feat: convert model methods to named functions

src/components/misc/user.vue

@@ -2,34 +2,39 @@
 	<div :class="{'is-inline': isInline}" class="user">
 		<img
 			:height="avatarSize"
-			:src="user.getAvatarUrl(avatarSize)"
+			:src="getAvatarUrl(user, avatarSize)"
 			:width="avatarSize"
 			alt=""
 			class="avatar"
-			v-tooltip="user.getDisplayName()"/>
-		<span class="username" v-if="showUsername">{{ user.getDisplayName() }}</span>
+			v-tooltip="getDisplayName(user)"/>
+		<span class="username" v-if="showUsername">{{ getDisplayName(user) }}</span>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import type {PropType} from 'vue'
+
+import {getAvatarUrl, getDisplayName} from '@/models/user'
+import type {IUser} from '@/modelTypes/IUser'
+
 defineProps({
 	user: {
+		type: Object as PropType<IUser>,
 		required: true,
-		type: Object,
 	},
 	showUsername: {
-		required: false,
 		type: Boolean,
+		required: false,
 		default: true,
 	},
 	avatarSize: {
-		required: false,
 		type: Number,
+		required: false,
 		default: 50,
 	},
 	isInline: {
-		required: false,
 		type: Boolean,
+		required: false,
 		default: false,
 	},
 })

src/components/notifications/notifications.vue

@@ -24,7 +24,7 @@
 					<div class="detail">
 						<div>
 							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
-								{{ n.notification.doer.getDisplayName() }}
+								{{ getDisplayName(n.notification.doer) }}
 							</span>
 							<BaseButton @click="() => to(n, index)()">
 								{{ n.toText(userInfo) }}
@@ -56,6 +56,7 @@ import User from '@/components/misc/user.vue'
 import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getDisplayName} from '@/models/user'
 import {useAuthStore} from '@/stores/auth'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000

src/components/sharing/linkSharing.vue

@@ -93,7 +93,7 @@
 
 						<p class="mb-2">
 							<i18n-t keypath="list.share.links.sharedBy" scope="global">
-								<strong>{{ s.sharedBy.getDisplayName() }}</strong>
+								<strong>{{ getDisplayName(s.sharedBy) }}</strong>
 							</i18n-t>
 						</p>
 
@@ -201,6 +201,7 @@ import LinkShareService from '@/services/linkShare'
 
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
+import {getDisplayName} from '@/models/user'
 import type {ListView} from '@/types/ListView'
 import {LIST_VIEWS} from '@/types/ListView'
 import {useConfigStore} from '@/stores/config'

src/components/sharing/userTeam.vue

@@ -28,7 +28,7 @@
 			<tbody>
 			<tr :key="s.id" v-for="s in sharables">
 				<template v-if="shareType === 'user'">
-					<td>{{ s.getDisplayName() }}</td>
+					<td>{{ getDisplayName(s) }}</td>
 					<td>
 						<template v-if="s.id === userInfo.id">
 							<b class="is-success">{{ $t('list.share.userTeam.you') }}</b>
@@ -150,7 +150,7 @@ import UserListModel from '@/models/userList'
 import type {IUserList} from '@/modelTypes/IUserList'
 
 import UserService from '@/services/user'
-import UserModel from '@/models/user'
+import UserModel, { getDisplayName } from '@/models/user'
 import type {IUser} from '@/modelTypes/IUser'
 
 import TeamNamespaceService from '@/services/teamNamespace'

src/components/tasks/partials/comments.vue

@@ -17,7 +17,7 @@
 			<div :key="c.id" class="media comment" v-for="c in comments">
 				<figure class="media-left is-hidden-mobile">
 					<img
-						:src="c.author.getAvatarUrl(48)"
+						:src="getAvatarUrl(c.author, 48)"
 						alt=""
 						class="image is-avatar"
 						height="48"
@@ -27,13 +27,13 @@
 				<div class="media-content">
 					<div class="comment-info">
 						<img
-							:src="c.author.getAvatarUrl(20)"
+							:src="getAvatarUrl(c.author, 20)"
 							alt=""
 							class="image is-avatar d-print-none"
 							height="20"
 							width="20"
 						/>
-						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
+						<strong>{{ getDisplayName(c.author) }}</strong>&nbsp;
 						<span v-tooltip="formatDateLong(c.created)" class="has-text-grey">
 							{{ formatDateSince(c.created) }}
 						</span>
@@ -166,6 +166,7 @@ import type {ITask} from '@/modelTypes/ITask'
 import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getAvatarUrl, getDisplayName} from '@/models/user'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 
@@ -196,7 +197,7 @@ const newComment = reactive(new TaskCommentModel())
 const saved = ref<ITask['id'] | null>(null)
 const saving = ref<ITask['id'] | null>(null)
 
-const userAvatar = computed(() => authStore.info.getAvatarUrl(48))
+const userAvatar = computed(() => getAvatarUrl(authStore.info, 48))
 const currentUserId = computed(() => authStore.info.id)
 const enabled = computed(() => configStore.taskCommentsEnabled)
 const actions = computed(() => {

src/components/tasks/partials/createdUpdated.vue

@@ -3,7 +3,7 @@
 		<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.created)">
 			<i18n-t keypath="task.detail.created" scope="global">
 				<span>{{ formatDateSince(task.created) }}</span>
-				{{ task.createdBy.getDisplayName() }}
+				{{ getDisplayName(task.createdBy) }}
 			</i18n-t>
 		</time>
 		<template v-if="+new Date(task.created) !== +new Date(task.updated)">
@@ -30,6 +30,7 @@
 import {computed, toRefs, type PropType} from 'vue'
 import type {ITask} from '@/modelTypes/ITask'
 import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getDisplayName} from '@/models/user'
 
 const props = defineProps({
 	task: {

src/components/tasks/partials/defer-task.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, type PropType} from 'vue'
+import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, toRef, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
@@ -63,12 +63,12 @@ const task = ref<ITask>()
 // We're saving the due date seperately to prevent null errors in very short periods where the task is null.
 const dueDate = ref<Date>()
 const lastValue = ref<Date>()
-const changeInterval = ref<number>()
+const changeInterval = ref<ReturnType<typeof setInterval>>()
 
 watch(
-	() => props.modelValue,
+	toRef(props, 'modelValue'),
 	(value) => {
-		task.value = value
+		task.value = { ...value }
 		dueDate.value = value.dueDate
 		lastValue.value = value.dueDate
 	},
@@ -123,7 +123,6 @@ async function updateDueDate() {
 		return
 	}
 
-	// FIXME: direct prop manipulation
 	const newTask = await taskService.update({
 		...task.value,
 		dueDate: new Date(dueDate.value),