From bc897a45037e1834adefba56bab229cf03238f57 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 12 Jun 2024 10:04:26 +0000
Subject: [PATCH] feat: improve types (#2368)

Reviewed-on: https://kolaente.dev/vikunja/vikunja/pulls/2368
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-committed-by: Dominik Pschenitschni <mail@celement.de>
---
 frontend/src/components/base/Expandable.vue | 29 +++++++++------------
 frontend/src/constants/date.ts              |  2 +-
 frontend/src/helpers/attachments.ts         |  4 +--
 frontend/src/main.ts                        |  4 +--
 frontend/src/models/project.ts              |  5 ++--
 frontend/src/types/global-components.d.ts   |  3 +++
 frontend/src/views/project/ProjectView.vue  |  6 ++---
 frontend/src/views/teams/ListTeams.vue      |  8 +++---
 8 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/base/Expandable.vue b/frontend/src/components/base/Expandable.vue
index c1a1a84c7..23f0f56d7 100644
--- a/frontend/src/components/base/Expandable.vue
+++ b/frontend/src/components/base/Expandable.vue
@@ -28,28 +28,23 @@
 </template>
 
 <script setup lang="ts">
-// the logic of this component is loosly based on this article
+// the logic of this component is loosely based on this article
 // https://gomakethings.com/how-to-add-transition-animations-to-vanilla-javascript-show-and-hide-methods/#putting-it-all-together
 
 import {computed, ref} from 'vue'
 import {getInheritedBackgroundColor} from '@/helpers/getInheritedBackgroundColor'
 
-const props = defineProps({
+const props = withDefaults(defineProps<{
   /** Whether the Expandable is open or not */
-  open: {
-    type: Boolean,
-    default: false,
-  },
+  open?: boolean,
   /** If there is too much content, content will be cut of here. */
-  initialHeight: {
-    type: Number,
-    default: undefined,
-  },
+  initialHeight?: number
   /** The hidden content is indicated by a gradient. This is the color that the gradient fades to.
-   * Makes only sense if `initialHeight` is set. */
-  backgroundColor: {
-    type: String,
-  },
+  * Makes only sense if `initialHeight` is set. */
+	backgroundColor: string
+}>(), {
+  open: false,
+  initialHeight: undefined,
 })
 
 const wrapper = ref<HTMLElement | null>(null)
@@ -82,7 +77,7 @@ function forceLayout(el: HTMLElement) {
 
 /* ######################################################################
 # The following functions are called by the js hooks of the transitions.
-# They follow the orignal hook order of the vue transition component
+# They follow the original hook order of the vue transition component
 # see: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks
 ###################################################################### */
 
@@ -117,8 +112,8 @@ function beforeLeave(el: HTMLElement) {
 function leave(el: HTMLElement) {
   // Set the height back to 0
   el.style.height = '0'
-	el.style.willChange = ''
-	el.style.backfaceVisibility = ''
+  el.style.willChange = ''
+  el.style.backfaceVisibility = ''
 }
 
 function afterLeave(el: HTMLElement) {
diff --git a/frontend/src/constants/date.ts b/frontend/src/constants/date.ts
index 835f2c4da..a47b0c391 100644
--- a/frontend/src/constants/date.ts
+++ b/frontend/src/constants/date.ts
@@ -1,4 +1,4 @@
-export const DATEFNS_DATE_FORMAT_KEBAB = 'yyyy-LL-dd'
+export const DATEFNS_DATE_FORMAT_KEBAB = 'yyyy-LL-dd' as const
 
 export const SECONDS_A_MINUTE = 60
 export const SECONDS_A_HOUR = SECONDS_A_MINUTE * 60
diff --git a/frontend/src/helpers/attachments.ts b/frontend/src/helpers/attachments.ts
index c8d86f513..88e817e0a 100644
--- a/frontend/src/helpers/attachments.ts
+++ b/frontend/src/helpers/attachments.ts
@@ -4,11 +4,11 @@ import type {IAttachment} from '@/modelTypes/IAttachment'
 import AttachmentService from '@/services/attachment'
 import {useTaskStore} from '@/stores/tasks'
 
-export function uploadFile(taskId: number, file: File, onSuccess?: (url: string) => void) {
+export async function uploadFile(taskId: number, file: File, onSuccess?: (url: string) => void) {
 	const attachmentService = new AttachmentService()
 	const files = [file]
 
-	return uploadFiles(attachmentService, taskId, files, onSuccess)
+	return await uploadFiles(attachmentService, taskId, files, onSuccess)
 }
 
 export async function uploadFiles(
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index c5687097f..432282d75 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -37,7 +37,7 @@ if (window.API_URL.endsWith('/')) {
 
 // directives
 import focus from '@/directives/focus'
-import {VTooltip} from 'floating-vue'
+import {vTooltip} from 'floating-vue'
 import 'floating-vue/dist/style.css'
 import shortcut from '@/directives/shortcut'
 import cypress from '@/directives/cypress'
@@ -57,7 +57,7 @@ setLanguage(browserLanguage).then(() => {
 	app.use(Notifications)
 
 	app.directive('focus', focus)
-	app.directive('tooltip', VTooltip)
+	app.directive('tooltip', vTooltip)
 	app.directive('shortcut', shortcut)
 	app.directive('cy', cypress)
 
diff --git a/frontend/src/models/project.ts b/frontend/src/models/project.ts
index f0ee4b1ab..f33e17a8d 100644
--- a/frontend/src/models/project.ts
+++ b/frontend/src/models/project.ts
@@ -2,12 +2,13 @@ import AbstractModel from './abstractModel'
 import TaskModel from '@/models/task'
 import UserModel from '@/models/user'
 import SubscriptionModel from '@/models/subscription'
+import ProjectViewModel from '@/models/projectView'
 
 import type {IProject} from '@/modelTypes/IProject'
 import type {IUser} from '@/modelTypes/IUser'
 import type {ITask} from '@/modelTypes/ITask'
 import type {ISubscription} from '@/modelTypes/ISubscription'
-import ProjectViewModel from '@/models/projectView'
+import type { IProjectView } from '@/modelTypes/IProjectView'
 
 export default class ProjectModel extends AbstractModel<IProject> implements IProject {
 	id = 0
@@ -24,7 +25,7 @@ export default class ProjectModel extends AbstractModel<IProject> implements IPr
 	position = 0
 	backgroundBlurHash = ''
 	parentProjectId = 0
-	views = []
+	views: IProjectView[] = []
 	
 	created: Date = null
 	updated: Date = null
diff --git a/frontend/src/types/global-components.d.ts b/frontend/src/types/global-components.d.ts
index 54dd2861f..ff581bda5 100644
--- a/frontend/src/types/global-components.d.ts
+++ b/frontend/src/types/global-components.d.ts
@@ -1,3 +1,5 @@
+import type { FunctionalComponent } from 'vue'
+import type { Notifications } from '@kyvg/vue3-notification'
 // import FontAwesomeIcon from '@/components/misc/Icon'
 import type { FontAwesomeIcon as FontAwesomeIconFixedTypes } from './vue-fontawesome'
 import type XButton from '@/components/input/button.vue'
@@ -12,6 +14,7 @@ import type Card from '@/components/misc/card.vue'
 declare module '@vue/runtime-core' {
 	export interface GlobalComponents {
 		Icon: FontAwesomeIconFixedTypes
+		Notifications: FunctionalComponent<Notifications>
 		XButton: typeof XButton,
 		Modal: typeof Modal,
 		Card: typeof Card,
diff --git a/frontend/src/views/project/ProjectView.vue b/frontend/src/views/project/ProjectView.vue
index 33a356245..59e78c861 100644
--- a/frontend/src/views/project/ProjectView.vue
+++ b/frontend/src/views/project/ProjectView.vue
@@ -23,10 +23,10 @@ const router = useRouter()
 const projectStore = useProjectStore()
 const authStore = useAuthStore()
 
-const currentView = computed(() => {
-	const project = projectStore.projects[projectId]
+const currentProject = computed(() => projectStore.projects[projectId])
 
-	return project?.views.find(v => v.id === viewId)
+const currentView = computed(() => {
+	return currentProject.value?.views.find(v => v.id === viewId)
 })
 
 function redirectToDefaultViewIfNecessary() {
diff --git a/frontend/src/views/teams/ListTeams.vue b/frontend/src/views/teams/ListTeams.vue
index 1d0d3222a..ae4a9e3a5 100644
--- a/frontend/src/views/teams/ListTeams.vue
+++ b/frontend/src/views/teams/ListTeams.vue
@@ -17,12 +17,12 @@
 			class="teams box"
 		>
 			<li
-				v-for="t in teams"
-				:key="t.id"
+				v-for="team in teams"
+				:key="team.id"
 			>
-				<router-link :to="{name: 'teams.edit', params: {id: t.id}}">
+				<router-link :to="{name: 'teams.edit', params: {id: team.id}}">
 					<p>
-						{{ t.name }}
+						{{ team.name }}
 					</p>
 				</router-link>
 			</li>