refactor: update nuxt.js and composition api

frontend/components/ConfirmationDialog.vue

@@ -21,14 +21,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@nuxtjs/composition-api';
 
 export default defineComponent({
 	props: {
-		value: {
-			type: Boolean,
-			required: true
-		},
+		value: Boolean,
 		title: {
 			type: String,
 			required: true

frontend/components/SettingsDialog.vue

@@ -82,20 +82,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, reactive } from '@vue/composition-api';
+import { watch, defineComponent, useStore, computed, ref, reactive } from '@nuxtjs/composition-api';
+import { accessorType  } from "../store";
 
 export default defineComponent({
 	props: {
-		value: {
-			type: Boolean,
-			required: true
-		}
+		value: Boolean,
 	},
 
-	setup(props, context) {
+	setup(props, ctx) {
+		const store = useStore<typeof accessorType>();
+
 		const showDialog = computed({
 			get: () => props.value,
-			set: val => context.emit('input', val)
+			set: val => ctx.emit('input', val)
 		});
 
 		const numberRules = [
@@ -104,15 +104,15 @@ export default defineComponent({
 
 		const formRef = ref(null);
 		const settings = reactive({
-			dark: context.root.$store.state.settings.dark,
-			autoRefresh: context.root.$store.state.settings.autoRefresh,
-			autoSync: context.root.$store.state.settings.autoSync
+			dark: store.state.settings.dark,
+			autoRefresh: store.state.settings.autoRefresh,
+			autoSync: store.state.settings.autoSync
 		});
 
 		const reset = () => {
-			settings.dark = context.root.$store.state.settings.dark;
-			settings.autoRefresh = context.root.$store.state.settings.autoRefresh;
-			settings.autoSync = context.root.$store.state.settings.autoSync;
+			settings.dark = store.state.settings.dark;
+			settings.autoRefresh = store.state.settings.autoRefresh;
+			settings.autoSync = store.state.settings.autoSync;
 		};
 
 		const closeDialog = () => {
@@ -123,7 +123,7 @@ export default defineComponent({
 		const save = () => {
 			const valid = (formRef as any).value.validate();
 			if (valid) {
-				context.root.$store.dispatch('updateSettings', {
+				store.dispatch('updateSettings', {
 					...settings
 				});
 				closeDialog();
@@ -131,7 +131,7 @@ export default defineComponent({
 		};
 
 		const sync = async () => {
-			await context.root.$store.dispatch('syncTasks');
+			await store.dispatch('syncTasks');
 		};
 
 		return {

frontend/components/TaskDialog.vue

@@ -130,33 +130,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watch, computed, ref } from '@vue/composition-api';
+import { defineComponent, useStore, watch, computed, ref } from '@nuxtjs/composition-api';
 import { Task } from 'taskwarrior-lib';
-
-interface Props {
-	[key: string]: unknown,
-	value: boolean,
-	task?: Task;
-}
+import { accessorType  } from "../store";
 
 export default defineComponent({
 	props: {
-		value: {
-			type: Boolean,
-			required: true
-		},
+		value: Boolean,
 		task: {
-			type: Object,
+			type: Object as () => Task,
 			required: false
 		}
 	},
-	setup(props: Props, context) {
-		const projects = computed(() => context.root.$store.getters.projects);
-		const tags = computed(() => context.root.$store.getters.tags);
+	setup(props, ctx) {
+		const store = useStore<typeof accessorType>();
+
+		const projects = computed(() => store.getters.projects);
+		const tags = computed(() => store.getters.tags);
 
 		const showDialog = computed({
 			get: () => props.value,
-			set: val => context.emit('input', val)
+			set: val => ctx.emit('input', val)
 		});
 
 		const requiredRules = [
@@ -224,7 +218,7 @@ export default defineComponent({
 		const submit = async () => {
 			const valid = (formRef.value as any).validate();
 			if (valid) {
-				await context.root.$store.dispatch('updateTasks', [{
+				await store.dispatch('updateTasks', [{
 					...formData.value,
 					annotations: formData.value.annotations || [],
 					project: formData.value.project || undefined,
@@ -235,7 +229,7 @@ export default defineComponent({
 					priority: formData.value.priority === 'N' ? undefined : formData.value.priority,
 					recur: recur.value ? formData.value.recur : undefined
 				}]);
-				context.root.$store.commit('setNotification', {
+				store.commit('setNotification', {
 					color: 'success',
 					text: `Successfully ${props.task ? 'update' : 'create'} the task`
 				});

frontend/components/TaskList.vue

@@ -6,7 +6,7 @@
 			:text="confirmation.text"
 			@yes="confirmation.handler"
 		/>
-		<TaskDialog v-model="showTaskDialog" :task="currentTask" />
+		<TaskDialog v-model="showTaskDialog" :task="currentTask || undefined" />
 
 		<v-row class="px-4 pt-4">
 			<v-btn-toggle v-model="status" mandatory background-color="rgba(0, 0, 0, 0)">
@@ -27,8 +27,8 @@
 					</v-icon>
 					{{ st }}
 					<v-badge
-						v-if="st === 'pending' && classifiedTasks[st].length"
-						:content="classifiedTasks[st].length"
+						v-if="st === 'pending' && classifiedTasks[st].value && classifiedTasks[st].value.length"
+						:content="classifiedTasks[st].value.length"
 						:color="st === status ? 'primary' : 'grey'"
 						inline
 					/>
@@ -188,7 +188,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive, ref, ComputedRef, Ref } from '@vue/composition-api';
+import { defineComponent, useStore, computed, reactive, ref, ComputedRef, Ref } from '@nuxtjs/composition-api';
 import { Task } from 'taskwarrior-lib';
 import _ from 'lodash';
 import TaskDialog from '../components/TaskDialog.vue';
@@ -196,6 +196,7 @@ import ConfirmationDialog from '../components/ConfirmationDialog.vue';
 import moment from 'moment';
 import urlRegex from 'url-regex-safe';
 import normalizeUrl from 'normalize-url';
+import { accessorType  } from "../store";
 
 function displayDate(str?: string) {
 	if (!str)
@@ -254,24 +255,21 @@ function linkify(text: string) {
 	return result;
 }
 
-interface Props {
-	[key: string]: unknown,
-	tasks: Task[]
-}
-
 export default defineComponent({
 	props: {
 		tasks: {
-			type: Array as () => Task[]
+			type: Array as () => Task[],
+			required: true
 		}
 	},
 
-	setup(props: Props, context) {
+	setup(props) {
+		const store = useStore<typeof accessorType>();
 		const selected = ref([] as Task[]);
 
 		const status = ref('pending');
 		const allStatus = ['pending', 'waiting', 'completed', 'deleted', 'recurring'];
-		const statusIcons = {
+		const statusIcons: { [st: string]: string } = {
 			pending: 'mdi-clock-outline',
 			waiting: 'mdi-pause',
 			completed: 'mdi-check',
@@ -314,7 +312,7 @@ export default defineComponent({
 		const classifiedTasks = reactive(tempTasks);
 
 		const refresh = () => {
-			context.root.$store.dispatch('fetchTasks');
+			store.dispatch('fetchTasks');
 		};
 
 		const showConfirmationDialog = ref(false);
@@ -337,14 +335,14 @@ export default defineComponent({
 		};
 
 		const completeTasks = async (tasks: Task[]) => {
-			await context.root.$store.dispatch('updateTasks', tasks.map(task => {
+			await store.dispatch('updateTasks', tasks.map(task => {
 				return {
 					...task,
 					status: 'completed'
 				};
 			}));
 			selected.value = selected.value.filter(task => tasks.findIndex(t => t.uuid === task.uuid) === -1);
-			context.root.$store.commit('setNotification', {
+			store.commit('setNotification', {
 				color: 'success',
 				text: 'Successfully complete the task(s)'
 			});
@@ -353,9 +351,9 @@ export default defineComponent({
 		const deleteTasks = (tasks: Task[]) => {
 			confirmation.text = 'Are you sure to delete the task(s)?';
 			confirmation.handler = async () => {
-				await context.root.$store.dispatch('deleteTasks', tasks);
+				await store.dispatch('deleteTasks', tasks);
 				selected.value = selected.value.filter(task => tasks.findIndex(t => t.uuid === task.uuid) === -1);
-				context.root.$store.commit('setNotification', {
+				store.commit('setNotification', {
 					color: 'success',
 					text: 'Successfully delete the task(s)'
 				});
@@ -366,14 +364,14 @@ export default defineComponent({
 		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 => {
+				await 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', {
+				store.commit('setNotification', {
 					color: 'success',
 					text: 'Successfully restore the task(s)'
 				});