feat: show the number of tasks we're about to remove when deleting a list

src/components/misc/loading.vue

@@ -2,12 +2,17 @@
 	<div class="loader-container is-loading"></div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .loader-container {
 	height: 100%;
 	min-height: 200px;
 	width: 100%;
 	min-width: 600px;
 	max-width: 100vw;
+
+	&.is-loading-small {
+		min-height: 50px;
+		min-width: 100px;
+	}
 }
 </style>

src/i18n/lang/en.json

@@ -201,7 +201,9 @@
       "header": "Delete this list",
       "text1": "Are you sure you want to delete this list and all of its contents?",
       "text2": "This includes all tasks and CANNOT BE UNDONE!",
-      "success": "The list was successfully deleted."
+      "success": "The list was successfully deleted.",
+      "tasksToDelete": "This will irrevocably remove approx. {count} tasks.",
+      "noTasksToDelete": "This list does not contain any tasks, it should be safe to delete."
     },
     "duplicate": {
       "title": "Duplicate this list",
@@ -497,7 +499,8 @@
     "custom": "Custom",
     "id": "ID",
     "created": "Created at",
-    "actions": "Actions"
+    "actions": "Actions",
+    "cannotBeUndone": "This cannot be undone!"
   },
   "input": {
     "resetColor": "Reset Color",

src/styles/theme/loading.scss

@@ -14,12 +14,14 @@
     border-width: 0.25rem;
   }
 
-  &.is-loading-small::after {
-    width: 1.5rem;
-    height: 1.5rem;
-    top: calc(50% - .75rem);
-    left: calc(50% - .75rem);
-    border-width: 2px;
+  &.is-loading-small {
+    &::after {
+      width: 1.5rem;
+      height: 1.5rem;
+      top: calc(50% - .75rem);
+      left: calc(50% - .75rem);
+      border-width: 2px;
+    }
   }
 }
 

src/views/list/settings/delete.vue

@@ -6,31 +6,57 @@
 		<template #header><span>{{ $t('list.delete.header') }}</span></template>
 
 		<template #text>
-			<p>{{ $t('list.delete.text1') }}<br/>
-			{{ $t('list.delete.text2') }}</p>
+			<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 lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {computed, ref, watchEffect} from 'vue'
+import {useTitle} from '@/composables/useTitle'
+import {useI18n} from 'vue-i18n'
+import {useStore} from 'vuex'
+import {useRoute, useRouter} from 'vue-router'
+import {success} from '@/message'
+import TaskCollectionService from '@/services/taskCollection'
+import Loading from '@/components/misc/loading.vue'
 
-export default defineComponent({
-	name: 'list-setting-delete',
-	created() {
-		this.setTitle(this.$t('list.delete.title', {list: this.list.title}))
+const {t} = useI18n()
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+
+const totalTasks = ref<number | null>(null)
+
+const list = computed(() => store.getters['lists/getListById'](route.params.listId))
+
+watchEffect(
+	() => {
+		const taskCollectionService = new TaskCollectionService()
+		taskCollectionService.getAll({listId: route.params.listId}).then(() => {
+			totalTasks.value = taskCollectionService.totalPages * taskCollectionService.resultCount
+		})
 	},
-	computed: {
-		list() {
-			return this.$store.getters['lists/getListById'](this.$route.params.listId)
-		},
-	},
-	methods: {
-		async deleteList() {
-			await this.$store.dispatch('lists/deleteList', this.list)
-			this.$message.success({message: this.$t('list.delete.success')})
-			this.$router.push({name: 'home'})
-		},
-	},
-})
+)
+
+useTitle(() => t('list.delete.title', {list: list.value.title}))
+
+async function deleteList() {
+	await store.dispatch('lists/deleteList', list)
+	success({message: t('list.delete.success')})
+	router.push({name: 'home'})
+}
 </script>