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()
+const welcome = computed(() => {
+	const hours = new Date(now.value).getHours()
+
+	if (hours < 5) {
 		return 'Night'
 	}
 
-			if (now.getHours() < 11) {
+	if (hours < 11) {
 		return 'Morning'
 	}
 
-			if (now.getHours() < 18) {
+	if (hours < 18) {
 		return 'Day'
 	}
 
-			if (now.getHours() < 23) {
+	if (hours < 23) {
 		return 'Evening'
 	}
 
 	return 'Night'
-		},
+})
-		listHistory() {
+
+const store = useStore()
+const listHistory = computed(() => {
 	const history = getHistory()
 	return history.map(l => {
-				return this.$store.getters['lists/getListById'](l.id)
+		return 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
-			},
-			hasLists: state => {
-				if (state.namespaces.namespaces.length === 0) {
-					return false
-				}
 
-				return state.namespaces.namespaces[0].lists.length > 0
+const migratorsEnabled = computed(() => store.state.config.availableMigrators?.length > 0)
-			},
+const userInfo = computed(() => store.state.auth.info)
-			loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
+const hasTasks = computed(() => store.state.hasTasks)
-			deletionScheduledAt: state => parseDateOrNull(state.auth.info?.deletionScheduledAt),
+const defaultListId = computed(() => store.state.auth.defaultListId)
-		}),
+const defaultNamespaceId = computed(() => store.state.namespaces.namespaces?.[0].id || 0)
-	},
+const hasLists = computed (() => {
-	methods: {
+	return store.state.namespaces.namespaces.length === 0
-		// This is to reload the tasks list after adding a new task through the global task add.
+		? false
-		// FIXME: Should use vuex (somehow?)
+		: store.state.namespaces.namespaces[0].lists.length > 0
-		updateTaskList() {
+})
-			this.showTasksKey++
+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>