feat: convert home view to script setup and ts (#1119)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1119
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/views/Home.vue

@@ -55,92 +55,70 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts" setup>
-import {mapState} from 'vuex'
+import {ref, computed} from 'vue'
-import Message from '@/components/misc/message'
+import {useStore} from 'vuex'
-import ShowTasks from './tasks/ShowTasks.vue'
+import {useNow} from '@vueuse/core'
-import {getHistory} from '../modules/listHistory'
+
+import Message from '@/components/misc/message.vue'
+import ShowTasks from '@/views/tasks/ShowTasks.vue'
 import ListCard from '@/components/list/partials/list-card.vue'
-import AddTask from '../components/tasks/add-task.vue'
+import AddTask from '@/components/tasks/add-task.vue'
-import {LOADING, LOADING_MODULE} from '../store/mutation-types'
-import {parseDateOrNull} from '../helpers/parseDateOrNull'
 
-export default {
+import {getHistory} from '@/modules/listHistory'
-	name: 'Home',
+import {parseDateOrNull} from '@/helpers/parseDateOrNull'
-	components: {
+import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
-		Message,
-		ListCard,
-		ShowTasks,
-		AddTask,
-	},
-	data() {
-		return {
-			currentDate: new Date(),
-			tasks: [],
-			showTasksKey: 0,
-		}
-	},
-	computed: {
-		welcome() {
-			const now = new Date()
 
-			if (now.getHours() < 5) {
+const now = useNow()
-				return 'Night'
+const welcome = computed(() => {
-			}
+	const hours = new Date(now.value).getHours()
 
-			if (now.getHours() < 11) {
+	if (hours < 5) {
-				return 'Morning'
+		return 'Night'
-			}
+	}
 
-			if (now.getHours() < 18) {
+	if (hours < 11) {
-				return 'Day'
+		return 'Morning'
-			}
+	}
 
-			if (now.getHours() < 23) {
+	if (hours < 18) {
-				return 'Evening'
+		return 'Day'
-			}
+	}
 
-			return 'Night'
+	if (hours < 23) {
-		},
+		return 'Evening'
-		listHistory() {
+	}
-			const history = getHistory()
-			return history.map(l => {
-				return this.$store.getters['lists/getListById'](l.id)
-			}).filter(l => l !== null)
-		},
-		...mapState({
-			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,
-			defaultListId: state => state.auth.defaultListId,
-			defaultNamespaceId: state => {
-				if (state.namespaces.namespaces.length === 0) {
-					return 0
-				}
 
-				return state.namespaces.namespaces[0].id
+	return 'Night'
-			},
+})
-			hasLists: state => {
-				if (state.namespaces.namespaces.length === 0) {
-					return false
-				}
 
-				return state.namespaces.namespaces[0].lists.length > 0
+const store = useStore()
-			},
+const listHistory = computed(() => {
-			loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
+	const history = getHistory()
-			deletionScheduledAt: state => parseDateOrNull(state.auth.info?.deletionScheduledAt),
+	return history.map(l => {
-		}),
+		return store.getters['lists/getListById'](l.id)
-	},
+	}).filter(l => l !== null)
-	methods: {
+})
-		// This is to reload the tasks list after adding a new task through the global task add.
+
-		// FIXME: Should use vuex (somehow?)
+
-		updateTaskList() {
+const migratorsEnabled = computed(() => store.state.config.availableMigrators?.length > 0)
-			this.showTasksKey++
+const userInfo = computed(() => store.state.auth.info)
-		},
+const hasTasks = computed(() => store.state.hasTasks)
-	},
+const defaultListId = computed(() => store.state.auth.defaultListId)
+const defaultNamespaceId = computed(() => store.state.namespaces.namespaces?.[0].id || 0)
+const hasLists = computed (() => {
+	return store.state.namespaces.namespaces.length === 0
+		? false
+		: store.state.namespaces.namespaces[0].lists.length > 0
+})
+const loading = computed(() => store.state.loading && store.state.loadingModule === 'tasks')
+const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt))
+
+// This is to reload the tasks list after adding a new task through the global task add.
+// FIXME: Should use vuex (somehow?)
+const showTasksKey = ref(0)
+function updateTaskList() {
+	showTasksKey.value++
 }
 </script>