+ alerts

src/App.vue

@@ -133,7 +133,7 @@ onBeforeUnmount(() => {
       </div>
 
       <div class="flex flex-col w-full h-full items-end px-4 gap-4 pb-6">
-        <router-view class="w-full" />
+        <router-view class=" w-full" />
       </div>
       <button
           v-if="isInputFocused"

src/components/ConfirmDialog.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const props = defineProps({
+  message: { type: String, required: true },
+  callback: { type: Function, required: true },
+})
+
+const handleConfirm = (result: boolean) => {
+  props.callback(result);
+}
+</script>
+
+<template>
+  <div class="fixed inset-0 z-[1000] flex items-center justify-center  p-4 bg-black/50 !bg-opacity-10!">
+    <div class="bg-white rounded-2xl shadow-xl max-w-sm w-full p-6 flex-col gap-5">
+      <!-- Сообщение -->
+      <div class="text-center mb-6">
+        <span class="text-lg font-semibold text-gray-900">
+          {{ message }}
+        </span>
+      </div>
+
+      <!-- Кнопки -->
+      <div class="flex gap-3">
+        <button
+            @click="handleConfirm(false)"
+            class="flex-1 py-3 px-4 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 active:bg-gray-100 transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+            @click="handleConfirm(true)"
+            class="flex-1 py-3 px-4 bg-blue-500 text-white rounded-xl font-medium hover:bg-blue-600 active:bg-blue-700 transition-colors"
+        >
+          OK
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

src/components/settings/RecurrentyCreateUpdate.vue

@@ -11,6 +11,7 @@ import {Category} from "@/models/category";
 import router from "@/router";
 import {useRecurrentsStore} from "@/stores/recurrent-store";
 import {CreateRecurrentOperationDTO, UpdateRecurrentOperationDTO} from "@/models/recurrent-operation";
+import ConfirmDialog from "@/components/ConfirmDialog.vue";
 
 const route = useRoute()
 const toolbar = useToolbarStore();
@@ -35,6 +36,7 @@ const recurrentDate = ref<number>(Math.floor(Math.random() * 31))
 const isDateError = ref(false)
 
 
+
 const fetchData = async () => {
   try {
     if (spaceStore.selectedSpaceId) {
@@ -165,6 +167,14 @@ const buildCreate = (): CreateRecurrentOperationDTO => {
   }
 }
 
+const isDeleteAlertVisible = ref(false)
+const deleteAlertMessage = ref('Do you want to delete recurrent?')
+const deleteRecurrent = async () => {
+  await recurrentsService.deleteRecurrent(spaceStore.selectedSpaceId, recurrentId.value)
+  await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
+  router.back()
+}
+
 onMounted(async () => {
   if (tgApp && ['ios', 'android'].includes(tgApp.platform)) {
     insetTop.value = tgApp.contentSafeAreaInset.top + tgApp.safeAreaInset.top
@@ -174,10 +184,22 @@ onMounted(async () => {
   if (mode.value === "edit") {
 
     toolbar.registerHandler('deleteRecurrent', async () => {
+      console.log('deleteRecurrent1')
+
       if (spaceStore.selectedSpaceId && recurrentId.value) {
-        await recurrentsService.deleteRecurrent(spaceStore.selectedSpaceId, recurrentId.value)
-        await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
-        router.back()
+        console.log('deleteRecurrent2')
+        if (tgApp.initData) {
+          console.log('deleteRecurrent3')
+          tgApp.showConfirm(deleteAlertMessage.value, async (bnt_id) => {
+            if (bnt_id === 'ok') {
+              console.log("recurrent id is deleted")
+              await deleteRecurrent()
+            }
+          })
+        } else {
+          console.log('deleteRecurrent4')
+          isDeleteAlertVisible.value = true
+        }
       }
     })
     toolbar.registerHandler('updateRecurrent', async () => {
@@ -210,11 +232,17 @@ onMounted(async () => {
 </script>
 
 <template>
+
   <div v-if="categories.length===0" class="card !gap-4 !p-10">
     <span class="">No categories available.</span>
     <span class="text-center">Maybe you want to <router-link to="/categories" class="!text-blue-700">create a new category</router-link> first?</span>
   </div>
   <div v-else class="flex flex-col w-full justify-items-start gap-1">
+    <ConfirmDialog
+        v-if="isDeleteAlertVisible"
+        :message="deleteAlertMessage"
+        :callback="(confirmed) => { if (confirmed) deleteRecurrent(); isDeleteAlertVisible = false; }"
+    />
     <!-- Fixed modal container -->
     <div v-if="isCategorySelectorOpened" class="fixed inset-0 z-50 flex items-start justify-center p-4 overflow-y-auto"
          style="background-color: var(--primary-color); "