139 lines
3.8 KiB
TypeScript
139 lines
3.8 KiB
TypeScript
import { defineComponent, onMounted, ref, watch } from 'vue'
|
|
import { IonIcon, IonPage, IonContent } from '@ionic/vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import {
|
|
timerOutline,
|
|
chevronUp,
|
|
chevronDown,
|
|
playCircleOutline,
|
|
pencilOutline,
|
|
trashOutline,
|
|
addCircleOutline,
|
|
} from 'ionicons/icons'
|
|
|
|
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)
|
|
|
|
/** ID таймера, ожидающего удаления */
|
|
const confirmDeleteId = ref<number | null>(null)
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
/** Переход на страницу конкретного таймера */
|
|
const goToTimer = (id: number) => {
|
|
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
|
|
|
|
try {
|
|
const result = await getTimers()
|
|
timers.value = result
|
|
} catch (e: unknown) {
|
|
error.value = e instanceof Error ? e.message : 'Ошибка загрузки таймеров'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
/** Переключает раскрытие карточки таймера */
|
|
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,
|
|
|
|
timerOutline,
|
|
chevronUp,
|
|
chevronDown,
|
|
playCircleOutline,
|
|
pencilOutline,
|
|
trashOutline,
|
|
addCircleOutline,
|
|
goToTimer,
|
|
goToCreateTimer,
|
|
goToEditTimer,
|
|
askDeleteTimer,
|
|
cancelDeleteTimer,
|
|
removeTimer,
|
|
}
|
|
},
|
|
})
|