feat: implement timer screens and navigation

client/src/views/TimersList/TimersList.ts

@@ -1,6 +1,6 @@
-import { defineComponent, onMounted, ref } from 'vue'
+import { defineComponent, onMounted, ref, watch } from 'vue'
 import { IonIcon, IonPage, IonContent } from '@ionic/vue'
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router'
 import {
   timerOutline,
   chevronUp,
@@ -8,26 +8,76 @@ import {
   playCircleOutline,
   pencilOutline,
   trashOutline,
+  addCircleOutline,
 } from 'ionicons/icons'
 
-import { getTimers } from '@/db/crud/timerCrud'
+import { deleteTimer, getTimers } from '@/db/crud/timerCrud'
 import type { TimersRow } from '@/types/timerType'
 
 export default defineComponent({
   name: 'TimersList',
   components: { IonIcon, IonPage, IonContent },
+
   setup() {
+    /** Список всех таймеров */
     const timers = ref<TimersRow[]>([])
+
+    /** Флаг загрузки списка таймеров */
     const loading = ref<boolean>(true)
+
+    /** Ошибка загрузки или операций */
     const error = ref<string | null>(null)
+
+    /** ID раскрытого таймера в списке */
     const expandedId = ref<number | null>(null)
 
-    const router = useRouter();
+    /** ID таймера, ожидающего удаления */
+    const confirmDeleteId = ref<number | null>(null)
 
+    const router = useRouter()
+    const route = useRoute()
+
+    /** Переход на страницу конкретного таймера */
     const goToTimer = (id: number) => {
-      router.push(`/timer/${id}`);
-    };
+      router.push(`/timer/${id}`)
+    }
 
+    /** Переход на создание нового таймера */
+    const goToCreateTimer = () => {
+      router.push('/timer-update/new')
+    }
+
+    /** Переход на редактирование таймера */
+    const goToEditTimer = (id: number) => {
+      router.push(`/timer-update/${id}`)
+    }
+
+    /** Открывает подтверждение удаления таймера */
+    const askDeleteTimer = (id: number): void => {
+      confirmDeleteId.value = id
+    }
+
+    /** Отмена удаления таймера */
+    const cancelDeleteTimer = (): void => {
+      confirmDeleteId.value = null
+    }
+
+    /** Удаляет таймер и обновляет список */
+    const removeTimer = async (): Promise<void> => {
+      if (confirmDeleteId.value === null) {
+        return
+      }
+
+      try {
+        await deleteTimer(confirmDeleteId.value)
+        confirmDeleteId.value = null
+        await loadTimers()
+      } catch (e: unknown) {
+        error.value = e instanceof Error ? e.message : 'Ошибка удаления таймера'
+      }
+    }
+
+    /** Загружает список таймеров из базы данных */
     const loadTimers = async (): Promise<void> => {
       loading.value = true
       error.value = null
@@ -42,17 +92,31 @@ export default defineComponent({
       }
     }
 
+    /** Переключает раскрытие карточки таймера */
     const toggleExpand = (id: number): void => {
       expandedId.value = expandedId.value === id ? null : id
     }
 
+    /** Загружает таймеры при первом рендере */
     onMounted(loadTimers)
 
+    /** Перезагружает список при возврате на страницу /timers */
+    watch(
+      () => route.fullPath,
+      (path) => {
+        if (path === '/timers') {
+          loadTimers()
+        }
+      },
+      { immediate: false }
+    )
+
     return {
       timers,
       loading,
       error,
       expandedId,
+      confirmDeleteId,
 
       toggleExpand,
 
@@ -62,7 +126,13 @@ export default defineComponent({
       playCircleOutline,
       pencilOutline,
       trashOutline,
-      goToTimer
+      addCircleOutline,
+      goToTimer,
+      goToCreateTimer,
+      goToEditTimer,
+      askDeleteTimer,
+      cancelDeleteTimer,
+      removeTimer,
     }
   },
 })