frontend/src/views/list/settings/delete.vue

<template>
	<modal
		@close="$router.back()"
		@submit="deleteList()"
	>
		<template #header><span>{{ $t('list.delete.header') }}</span></template>

		<template #text>
			<p>
				{{ $t('list.delete.text1') }}
			</p>

			<p>
				<strong v-if="totalTasks !== null" class="has-text-white">
					{{
						totalTasks > 0 ? $t('list.delete.tasksToDelete', {count: totalTasks}) : $t('list.delete.noTasksToDelete')
					}}
				</strong>
				<Loading v-else class="is-loading-small"/>
			</p>

			<p>
				{{ $t('misc.cannotBeUndone') }}
			</p>
		</template>
	</modal>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import {useTitle} from '@/composables/useTitle'
import {useI18n} from 'vue-i18n'
import TaskCollectionService from '@/services/taskCollection'
import Loading from '@/components/misc/loading.vue'

import {useList} from '@/stores/lists'
import type {IList} from '@/modelTypes/IList'

const {listId} = defineProps<{
	listId: IList['id']
}>()

const {t} = useI18n({useScope: 'global'})

const totalTasks = ref<number | null>(null)
watch(
	() => listId,
	async (currentListId) => {
		if (!currentListId) {
			return
		}

		const taskCollectionService = new TaskCollectionService()
		await taskCollectionService.getAll({listId: currentListId})
		totalTasks.value = taskCollectionService.totalPages * taskCollectionService.resultCount
	},
	{immediate: true},

)

const {list, deleteList} = useList(listId)
useTitle(() => t('list.delete.title', {list: list?.value?.title}))
</script>