Hide hints on start page if a user has tasks (#159)

Format

Add migration to Settings

Merge branch 'master' into feature/hide-hints

Hide hints on start page if a user has tasks

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/159

src/components/Home.vue

@@ -1,14 +1,16 @@
 <template>
 	<div class="content has-text-centered">
 		<h2>Hi {{userInfo.username}}!</h2>
-		<p>Click on a list or namespace on the left to get started.</p>
+		<template v-if="!hasTasks">
-		<router-link
+			<p>Click on a list or namespace on the left to get started.</p>
-				class="button is-primary is-right noshadow is-outlined"
+			<router-link
-				:to="{name: 'migrateStart'}"
+					class="button is-primary is-right noshadow is-outlined"
-				v-if="migratorsEnabled"
+					:to="{name: 'migrateStart'}"
-		>
+					v-if="migratorsEnabled"
-			Import your data into Vikunja
+			>
-		</router-link>
+				Import your data into Vikunja
+			</router-link>
+		</template>
 		<ShowTasks :show-all="true"/>
 	</div>
 </template>
@@ -33,6 +35,7 @@
 			migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
 			authenticated: state => state.auth.authenticated,
 			userInfo: state => state.auth.info,
+			hasTasks: state => state.hasTasks,
 		}),
 	}
 </script>

src/components/tasks/ShowTasks.vue

@@ -16,7 +16,8 @@
 </template>
 <script>
 	import TaskService from '../../services/task'
-	import SingleTaskInList from "./reusable/singleTaskInList";
+	import SingleTaskInList from './reusable/singleTaskInList'
+	import {HAS_TASKS} from '../../store/mutation-types'
 
 	export default {
 		name: 'ShowTasks',
@@ -54,15 +55,15 @@
 				}
 				if (!this.showAll) {
 					params.filter_by.push('start_date')
-					params.filter_value.push(Math.round(+ this.startDate / 1000))
+					params.filter_value.push(Math.round(+this.startDate / 1000))
 					params.filter_comparator.push('greater')
 
 					params.filter_by.push('end_date')
-					params.filter_value.push(Math.round(+ this.endDate / 1000))
+					params.filter_value.push(Math.round(+this.endDate / 1000))
 					params.filter_comparator.push('less')
 
 					params.filter_by.push('due_date')
-					params.filter_value.push(Math.round(+ this.endDate / 1000))
+					params.filter_value.push(Math.round(+this.endDate / 1000))
 					params.filter_comparator.push('less')
 				}
 
@@ -76,6 +77,7 @@
 							}
 						}
 						this.$set(this, 'tasks', r.filter(t => !t.done))
+						this.$store.commit(HAS_TASKS, r.length > 0)
 					})
 					.catch(e => {
 						this.error(e, this)
@@ -85,7 +87,7 @@
 				if (this.tasks === null || this.tasks === []) {
 					return
 				}
-				return this.tasks.sort(function(a,b) {
+				return this.tasks.sort(function (a, b) {
 					if (a.done < b.done)
 						return -1
 					if (a.done > b.done)
@@ -112,16 +114,16 @@
 </script>
 
 <style scoped>
-	h3{
+	h3 {
 		text-align: left;
 	}
 
-	h3.nothing{
+	h3.nothing {
 		text-align: center;
 		margin-top: 3em;
 	}
 
-	img{
+	img {
 		margin-top: 2em;
 	}
 

src/components/user/Settings.vue

@@ -2,6 +2,7 @@
 	<div
 			class="loader-container"
 			:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }">
+		<!-- Password update -->
 		<div class="card">
 			<header class="card-header">
 				<p class="card-header-title">
@@ -58,6 +59,8 @@
 				</div>
 			</div>
 		</div>
+
+		<!-- Update E-Mail -->
 		<div class="card">
 			<header class="card-header">
 				<p class="card-header-title">
@@ -102,6 +105,8 @@
 				</div>
 			</div>
 		</div>
+
+		<!-- TOTP -->
 		<div class="card" v-if="totpEnabled">
 			<header class="card-header">
 				<p class="card-header-title">
@@ -166,6 +171,22 @@
 				</div>
 			</div>
 		</div>
+		<div class="card" v-if="totpEnabled">
+			<header class="card-header">
+				<p class="card-header-title">
+					Migrate from other services to Vikunja
+				</p>
+			</header>
+			<div class="card-content">
+				<router-link
+						class="button is-primary is-right noshadow is-outlined"
+						:to="{name: 'migrateStart'}"
+						v-if="migratorsEnabled"
+				>
+					Import your data into Vikunja
+				</router-link>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -212,7 +233,8 @@
 			this.totpStatus()
 		},
 		computed: mapState({
-			totpEnabled: state => state.config.totpEnabled
+			totpEnabled: state => state.config.totpEnabled,
+			migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
 		}),
 		methods: {
 			updatePassword() {

src/store/index.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
-import {CURRENT_LIST, ERROR_MESSAGE, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types'
+import {CURRENT_LIST, ERROR_MESSAGE, HAS_TASKS, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types'
 import config from './modules/config'
 import auth from './modules/auth'
 import namespaces from './modules/namespaces'
@@ -29,6 +29,7 @@ export const store = new Vuex.Store({
 		// This is used to highlight the current list in menu for all list related views
 		currentList: {id: 0},
 		background: '',
+		hasTasks: false,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -87,5 +88,8 @@ export const store = new Vuex.Store({
 
 			state.currentList = currentList
 		},
+		[HAS_TASKS](state, hasTasks) {
+			state.hasTasks = hasTasks
+		}
 	},
 })

src/store/mutation-types.js

@@ -3,6 +3,7 @@ export const ERROR_MESSAGE = 'errorMessage'
 export const ONLINE = 'online'
 export const IS_FULLPAGE = 'isFullpage'
 export const CURRENT_LIST = 'currentList'
+export const HAS_TASKS = 'hasTasks'
 
 export const CONFIG = 'config'
 export const AUTH = 'auth'