From 0bb287023e36e0eefe3371cb8e241207236df1c6 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 12 May 2025 12:10:26 +0200
Subject: [PATCH] feat(home): correctly check if tasks exist before showing
 import hint

Resolves https://community.vikunja.io/t/import-your-data-button-is-shown-unnecessarily/3681/5
---
 frontend/src/components/home/ImportHint.vue | 47 +++++++++++++++++++++
 frontend/src/views/Home.vue                 | 22 +---------
 2 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/home/ImportHint.vue

diff --git a/frontend/src/components/home/ImportHint.vue b/frontend/src/components/home/ImportHint.vue
new file mode 100644
index 000000000..af54067a0
--- /dev/null
+++ b/frontend/src/components/home/ImportHint.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import { useConfigStore } from '@/stores/config'
+import { useBaseStore } from '@/stores/base'
+import { useTaskStore } from '@/stores/tasks'
+import TaskService from '@/services/task'
+
+const configStore = useConfigStore()
+const baseStore = useBaseStore()
+const taskStore = useTaskStore()
+
+const migratorsEnabled = computed(() => configStore.availableMigrators?.length > 0)
+const hasTasks = computed(() => baseStore.hasTasks)
+const loading = computed(() => taskStore.isLoading)
+const show = ref(false)
+
+onMounted(async () => {
+	show.value = false
+
+	if (!migratorsEnabled.value) {
+		return
+	}
+
+	if (hasTasks.value) {
+		show.value = false
+		return
+	}
+
+	const taskService = new TaskService()
+	const tasks = await taskService.getAll({}, {per_page: 1})
+	show.value = tasks.length === 0
+})
+</script>
+
+<template>
+	<template v-if="show && !loading">
+		<p class="mt-4">
+			{{ $t('home.project.importText') }}
+		</p>
+		<x-button
+			:to="{ name: 'migrate.start' }"
+			:shadow="false"
+		>
+			{{ $t('home.project.import') }}
+		</x-button>
+	</template>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 87fc26c82..2437a30f2 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -23,17 +23,7 @@
 			class="is-max-width-desktop"
 			@taskAdded="updateTaskKey"
 		/>
-		<template v-if="tasksLoaded && !hasTasks && !loading && migratorsEnabled">
-			<p class="mt-4">
-				{{ $t('home.project.importText') }}
-			</p>
-			<x-button
-				:to="{ name: 'migrate.start' }"
-				:shadow="false"
-			>
-				{{ $t('home.project.import') }}
-			</x-button>
-		</template>
+		<ImportHint v-if="tasksLoaded" />
 		<div
 			v-if="projectHistory.length > 0"
 			class="is-max-width-desktop has-text-left mt-4"
@@ -61,25 +51,20 @@ import Message from '@/components/misc/Message.vue'
 import ShowTasks from '@/views/tasks/ShowTasks.vue'
 import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
 import AddTask from '@/components/tasks/AddTask.vue'
+import ImportHint from '@/components/home/ImportHint.vue'
 
 import {getHistory} from '@/modules/projectHistory'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useDaytimeSalutation} from '@/composables/useDaytimeSalutation'
 
-import {useBaseStore} from '@/stores/base'
 import {useProjectStore} from '@/stores/projects'
-import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
-import {useTaskStore} from '@/stores/tasks'
 
 const salutation = useDaytimeSalutation()
 
-const baseStore = useBaseStore()
 const authStore = useAuthStore()
-const configStore = useConfigStore()
 const projectStore = useProjectStore()
-const taskStore = useTaskStore()
 
 const projectHistory = computed(() => {
 	// If we don't check this, it tries to load the project background right after logging out	
@@ -94,9 +79,6 @@ const projectHistory = computed(() => {
 
 const tasksLoaded = ref(false)
 
-const migratorsEnabled = computed(() => configStore.availableMigrators?.length > 0)
-const hasTasks = computed(() => baseStore.hasTasks)
-const loading = computed(() => taskStore.isLoading)
 const deletionScheduledAt = computed(() => parseDateOrNull(authStore.info?.deletionScheduledAt))
 
 // This is to reload the tasks list after adding a new task through the global task add.