feat(frontend): add sync in settings

frontend/assets/app.css

@@ -0,0 +1,19 @@
+.v-application.task-app code {
+	font-weight: initial;
+	background-color: #2f2f2f;
+	color: rgba(255, 255, 255, 0.9);
+	font-size: 95%;
+	display: inline-block;
+	padding: 1px 0.5em 1px 0.5em;
+	margin: 2px;
+	margin-bottom: 14px;
+}
+/* Code block */
+.v-application.task-app pre code {
+	display: block;
+	padding: 0.5em 0.8em 0.5em 0.8em;
+}
+.v-application.task-app code:before,
+.v-application.task-app code:after {
+	content: initial;
+}

frontend/components/SettingsDialog.vue

@@ -36,7 +36,29 @@
 						<v-list-item-action>
 							<v-text-field
 								v-model="settings.autoRefresh"
-								style="width: 30px"
+								style="width: 40px"
+								:rules="numberRules"
+							/>
+						</v-list-item-action>
+					</v-list-item>
+
+					<v-list-item>
+						<v-list-item-content>
+							<v-list-item-title class="pb-1">
+								Auto Sync
+								<v-icon size="18px" class="ml-2" @click="sync" title="Sync immediately">
+									mdi-sync
+								</v-icon>
+							</v-list-item-title>
+							<v-list-item-subtitle>
+								in minutes (0 means no auto sync)<br />
+								run <code>task sync</code> periodically
+							</v-list-item-subtitle>
+						</v-list-item-content>
+						<v-list-item-action>
+							<v-text-field
+								v-model="settings.autoSync"
+								style="width: 40px"
 								:rules="numberRules"
 							/>
 						</v-list-item-action>
@@ -83,12 +105,14 @@ export default defineComponent({
 		const formRef = ref(null);
 		const settings = reactive({
 			dark: context.root.$store.state.settings.dark,
-			autoRefresh: context.root.$store.state.settings.autoRefresh
+			autoRefresh: context.root.$store.state.settings.autoRefresh,
+			autoSync: context.root.$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;
 		};
 
 		const closeDialog = () => {
@@ -106,7 +130,12 @@ export default defineComponent({
 			}
 		};
 
+		const sync = async () => {
+			await context.root.$store.dispatch('syncTasks');
+		};
+
 		return {
+			sync,
 			showDialog,
 			closeDialog,
 			save,

frontend/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-app>
+	<v-app class="task-app">
 		<SettingsDialog v-model="settingsDialog" />
 
 		<v-snackbar

frontend/nuxt.config.js

@@ -36,7 +36,9 @@ export default {
 		// mdi font
 		'@mdi/font/css/materialdesignicons.css',
 		// main font
-		'typeface-open-sans/index.css'
+		'typeface-open-sans/index.css',
+		// App css
+		'@/assets/app.css'
 	],
 	/*
   ** Plugins to load before mounting the App

frontend/pages/index.vue

@@ -51,13 +51,14 @@ export default defineComponent({
 	setup(_props, context) {
 		context.root.$store.dispatch('fetchTasks');
 
-		let interval: NodeJS.Timeout | null = null;
+		// Auto Refresh
+		let refreshInterval: NodeJS.Timeout | null = null;
 		const setAutoRefresh = () => {
-			if (interval)
+			if (refreshInterval)
-				clearInterval(interval);
+				clearInterval(refreshInterval);
 			const freq = +context.root.$store.state.settings.autoRefresh;
 			if (freq > 0) {
-				interval = setInterval(() => {
+				refreshInterval = setInterval(() => {
 					context.root.$store.dispatch('fetchTasks');
 				}, +context.root.$store.state.settings.autoRefresh * 60000);
 			}
@@ -65,6 +66,21 @@ export default defineComponent({
 		setAutoRefresh();
 		watch(() => context.root.$store.state.settings, setAutoRefresh);
 
+		// Auto Sync
+		let syncInterval: NodeJS.Timeout | null = null;
+		const setAutoSync = () => {
+			if (syncInterval)
+				clearInterval(syncInterval);
+			const freq = +context.root.$store.state.settings.autoSync;
+			if (freq > 0) {
+				syncInterval = setInterval(() => {
+					context.root.$store.dispatch('syncTasks');
+				}, +context.root.$store.state.settings.autoSync * 60000);
+			}
+		};
+		setAutoSync();
+		watch(() => context.root.$store.state.settings, setAutoSync);
+
 		const mode = ref('Tasks');
 		const allModes = ['Tasks', 'Projects'];
 

frontend/store/index.ts

@@ -11,7 +11,8 @@ export const state = () => ({
 	},
 	settings: {
 		dark: false,
-		autoRefresh: '5' // in minutes
+		autoRefresh: '5', // in minutes
+		autoSync: '0' // in minutes
 	}
 });
 
@@ -74,6 +75,10 @@ export const actions: ActionTree<RootState, RootState> = {
 		await this.$axios.$put('/api/tasks', { tasks });
 		// Refresh
 		await context.dispatch('fetchTasks');
+	},
+
+	async syncTasks(_context) {
+		await this.$axios.$post('/api/sync');
 	}
 };