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

@@ -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: {
+  open?: boolean,
-    type: Boolean,
-    default: false,
-  },
   /** If there is too much content, content will be cut of here. */
-  initialHeight: {
+  initialHeight?: number
-    type: Number,
-    default: undefined,
-  },
   /** 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: {
+	backgroundColor: string
-    type: 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
 ###################################################################### */
 

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

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(

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)
 

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

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,

frontend/src/views/project/ProjectView.vue

@@ -23,10 +23,10 @@ const router = useRouter()
 const projectStore = useProjectStore()
 const authStore = useAuthStore()
 
-const currentView = computed(() => {
+const currentProject = computed(() => projectStore.projects[projectId])
-	const project = 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() {

frontend/src/views/teams/ListTeams.vue

@@ -17,12 +17,12 @@
 			class="teams box"
 		>
 			<li
-				v-for="t in teams"
+				v-for="team in teams"
-				:key="t.id"
+				: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>