feat(frontend): add confirmation before deleting and restoring

frontend/components/ConfirmationDialog.vue

@@ -0,0 +1,59 @@
+<template>
+	<v-dialog
+		v-model="showDialog"
+		max-width="300px"
+		@keydown.esc="handler('no')"
+	>
+		<v-card>
+			<v-card-title>
+				{{ title }}
+			</v-card-title>
+			<v-card-text>
+				{{ text }}
+			</v-card-text>
+			<v-card-actions>
+				<v-spacer />
+				<v-btn text color="primary" @click="handler('no')">No</v-btn>
+				<v-btn text color="red" @click="handler('yes')">Yes</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Boolean,
+			required: true
+		},
+		title: {
+			type: String,
+			required: true
+		},
+		text: {
+			type: String,
+			required: true
+		}
+	},
+
+	setup(props, context) {
+		const showDialog = computed({
+			get: () => props.value,
+			set: val => context.emit('input', val)
+		});
+
+		const handler = (event: string) => {
+			showDialog.value = false;
+			context.emit(event);
+		};
+
+		return {
+			showDialog,
+			handler
+		};
+	}
+});
+</script>

frontend/components/TaskList.vue

@@ -1,5 +1,11 @@
 <template>
 	<div>
+		<ConfirmationDialog
+			v-model="showConfirmationDialog"
+			:title="confirmation.title"
+			:text="confirmation.text"
+			@yes="confirmation.handler"
+		/>
 		<TaskDialog v-model="showTaskDialog" :task="currentTask" />
 
 		<v-btn-toggle v-model="status" mandatory background-color="rgba(0, 0, 0, 0)">
@@ -186,6 +192,7 @@ import { defineComponent, computed, reactive, ref, ComputedRef, Ref } from '@vue
 import { Task } from 'taskwarrior-lib';
 import _ from 'lodash';
 import TaskDialog from '../components/TaskDialog.vue';
+import ConfirmationDialog from '../components/ConfirmationDialog.vue';
 import moment from 'moment';
 
 function displayDate(str?: string) {
@@ -246,12 +253,18 @@ export default defineComponent({
 			tempTasks[status] = computed((): Task[] => props.tasks?.filter(task => task.status === status));
 		}
 		const classifiedTasks = reactive(tempTasks);
-		console.log(tempTasks);
 
 		const refresh = () => {
 			context.root.$store.dispatch('fetchTasks');
 		};
 
+		const showConfirmationDialog = ref(false);
+		const confirmation = reactive({
+			title: 'Confirm',
+			text: '',
+			handler: () => {}
+		});
+
 		const showTaskDialog = ref(false);
 		const currentTask: Ref<Task | null> = ref(null);
 		const newTask = () => {
@@ -264,15 +277,6 @@ export default defineComponent({
 			currentTask.value = _.cloneDeep(task);
 		};
 
-		const deleteTasks = async (tasks: Task[]) => {
-			await context.root.$store.dispatch('deleteTasks', tasks);
-			selected.value = selected.value.filter(task => tasks.findIndex(t => t.uuid === task.uuid) === -1);
-			context.root.$store.commit('setNotification', {
-				color: 'success',
-				text: 'Successfully delete the task(s)'
-			});
-		};
-
 		const completeTasks = async (tasks: Task[]) => {
 			await context.root.$store.dispatch('updateTasks', tasks.map(task => {
 				return {
@@ -287,18 +291,35 @@ export default defineComponent({
 			});
 		};
 
-		const restoreTasks = async (tasks: Task[]) => {
-			await context.root.$store.dispatch('updateTasks', tasks.map(task => {
-				return {
-					...task,
-					status: 'pending'
-				};
-			}));
-			selected.value = selected.value.filter(task => tasks.findIndex(t => t.uuid === task.uuid) === -1);
-			context.root.$store.commit('setNotification', {
-				color: 'success',
-				text: 'Successfully restore the task(s)'
-			});
+		const deleteTasks = (tasks: Task[]) => {
+			confirmation.text = 'Are you sure to delete the task(s)?';
+			confirmation.handler = async () => {
+				await context.root.$store.dispatch('deleteTasks', tasks);
+				selected.value = selected.value.filter(task => tasks.findIndex(t => t.uuid === task.uuid) === -1);
+				context.root.$store.commit('setNotification', {
+					color: 'success',
+					text: 'Successfully delete the task(s)'
+				});
+			};
+			showConfirmationDialog.value = true;
+		};
+
+		const restoreTasks = (tasks: Task[]) => {
+			confirmation.text = 'Are you sure to restore the task(s)?';
+			confirmation.handler = async () => {
+				await context.root.$store.dispatch('updateTasks', tasks.map(task => {
+					return {
+						...task,
+						status: 'pending'
+					};
+				}));
+				selected.value = selected.value.filter(task => tasks.findIndex(t => t.uuid === task.uuid) === -1);
+				context.root.$store.commit('setNotification', {
+					color: 'success',
+					text: 'Successfully restore the task(s)'
+				});
+			};
+			showConfirmationDialog.value = true;
 		};
 
 		return {
@@ -316,8 +337,12 @@ export default defineComponent({
 			completeTasks,
 			restoreTasks,
 			showTaskDialog,
+			showConfirmationDialog,
+			confirmation,
+			displayDate,
+
 			TaskDialog,
-			displayDate
+			ConfirmationDialog
 		};
 	}
 });