feat: TaskDetail as script setup

src/helpers/time/formatDate.js

@@ -2,7 +2,7 @@ import {createDateFromString} from '@/helpers/time/createDateFromString'
 import {format, formatDistanceToNow} from 'date-fns'
 import {enGB, de, fr, ru} from 'date-fns/locale'
 
-import {i18n} from '@/i18n'
+import {useI18n} from 'vue-i18n'
 
 const locales = {en: enGB, de, ch: de, fr, ru}
 
@@ -14,14 +14,17 @@ const dateIsValid = date => {
 	return date instanceof Date && !isNaN(date)
 }
 
-export const formatDate = (date, f, locale = i18n.global.t('date.locale')) => {
+export const formatDate = (date, f, locale) => {
+	console.log(date)
+
 	if (!dateIsValid(date)) {
 		return ''
 	}
 
 	date = createDateFromString(date)
+	const {t} = useI18n()
 
-	return date ? format(date, f, {locale: locales[locale]}) : ''
+	return date ? format(date, f, {locale: locales[locale || t('date.locale')]}) : ''
 }
 
 export function formatDateLong(date) {
@@ -38,9 +41,11 @@ export const formatDateSince = (date) => {
 	}
 
 	date = createDateFromString(date)
+	const {t} = useI18n()
+
 
 	return formatDistanceToNow(date, {
-		locale: locales[i18n.global.t('date.locale')],
+		locale: locales[t('date.locale')],
 		addSuffix: true,
 	})
 }

src/views/tasks/TaskDetailView.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="{ 'is-loading': taskService.loading, 'visible': visible}" class="loader-container task-view-container">
 		<div class="task-view">
-			<heading v-model="task" :can-write="canWrite" ref="heading"/>
+			<Heading v-model="task" :can-write="canWrite" ref="heading"/>
 			<h6 class="subtitle" v-if="parent && parent.namespace && parent.list">
 				{{ getNamespaceTitle(parent.namespace) }} >
 				<router-link :to="{ name: 'list.index', params: { listId: parent.list.id } }">
@@ -247,7 +247,7 @@
 					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
 				<div class="column is-one-third action-buttons">
-					<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4" v-if="shouldShowClosePopup">
+					<a v-if="shouldShowClosePopup" @click="$emit('close')" class="is-fullwidth is-block has-text-centered mb-4">
 						<icon icon="arrow-left"/>
 						{{ $t('task.detail.closePopup') }}
 					</a>
@@ -410,9 +410,9 @@
 
 		<transition name="modal">
 			<modal
+				v-if="showDeleteModal"
 				@close="showDeleteModal = false"
 				@submit="deleteTask()"
-				v-if="showDeleteModal"
 			>
 				<template #header><span>{{ $t('task.detail.delete.header') }}</span></template>
 
@@ -425,271 +425,279 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts" setup>
-import TaskService from '../../services/task'
+import { ref, reactive, toRef, shallowReactive, computed, watch, watchEffect, nextTick } from 'vue'
-import TaskModel from '../../models/task'
+import { useStore } from 'vuex'
+import { useRoute, useRouter } from 'vue-router'
+import {useI18n} from 'vue-i18n'
+import { useTitle, unrefElement } from '@vueuse/core'
 
-import priorites from '../../models/constants/priorities.json'
+import Attachments from '@/components/tasks/partials/attachments.vue'
-import rights from '../../models/constants/rights.json'
+import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
-
+import ColorPicker from '@/components/input/colorPicker.vue'
-import PrioritySelect from '../../components/tasks/partials/prioritySelect'
+import Comments from '@/components/tasks/partials/comments.vue'
-import PercentDoneSelect from '../../components/tasks/partials/percentDoneSelect'
-import EditLabels from '../../components/tasks/partials/editLabels'
-import EditAssignees from '../../components/tasks/partials/editAssignees'
-import Attachments from '../../components/tasks/partials/attachments'
-import RelatedTasks from '../../components/tasks/partials/relatedTasks'
-import RepeatAfter from '../../components/tasks/partials/repeatAfter'
-import Reminders from '../../components/tasks/partials/reminders'
-import Comments from '../../components/tasks/partials/comments'
-import ListSearch from '../../components/tasks/partials/listSearch'
-import description from '@/components/tasks/partials/description.vue'
-import ColorPicker from '../../components/input/colorPicker'
-import heading from '@/components/tasks/partials/heading.vue'
 import Datepicker from '@/components/input/datepicker.vue'
-import {playPop} from '@/helpers/playPop'
+import description from '@/components/tasks/partials/description.vue'
+import EditAssignees from '@/components/tasks/partials/editAssignees.vue'
+import EditLabels from '@/components/tasks/partials/editLabels.vue'
+import Heading from '@/components/tasks/partials/heading.vue'
+import ListSearch from '@/components/tasks/partials/listSearch.vue'
+import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect.vue'
+import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
+import RelatedTasks from '@/components/tasks/partials/relatedTasks.vue'
+import Reminders from '@/components/tasks/partials/reminders.vue'
+import RepeatAfter from '@/components/tasks/partials/repeatAfter.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
-import {CURRENT_LIST} from '@/store/mutation-types'
 
+import {playPop} from '@/helpers/playPop'
 import {uploadFile} from '@/helpers/attachments'
-import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
+import {CURRENT_LIST} from '@/store/mutation-types'
+import TaskService from '@/services/task'
+import TaskModel from '@/models/task'
+import priorites from '@/models/constants/priorities.json'
+import rights from '@/models/constants/rights.json'
 
-export default {
+import {success} from '@/message'
-	name: 'TaskDetailView',
+import {formatDate, formatDateSince} from '@/helpers/time/formatDate'
-	components: {
+
-		ChecklistSummary,
+defineEmits(['close'])
-		TaskSubscription,
+
-		Datepicker,
+const task = reactive(new TaskModel())
-		ColorPicker,
+useTitle(toRef(task, 'title'))
-		ListSearch,
+
-		Reminders,
+const descriptionChanged = ref(false)
-		RepeatAfter,
+
-		RelatedTasks,
+// Used to avoid flashing of empty elements if the task content is not yet loaded.
-		Attachments,
+const visible = ref(false)
-		EditAssignees,
+
-		EditLabels,
+const activeFields = reactive({
-		PercentDoneSelect,
+	assignees: false,
-		PrioritySelect,
+	priority: false,
-		Comments,
+	dueDate: false,
-		description,
+	percentDone: false,
-		heading,
+	startDate: false,
-	},
+	endDate: false,
-	data() {
+	reminders: false,
+	repeatAfter: false,
+	labels: false,
+	attachments: false,
+	relatedTasks: false,
+	moveList: false,
+	color: false,
+})
+
+const route = useRoute()
+
+const taskId = computed(() => {
+	const {id} = route.params
+	return id === undefined ? id : Number(id)
+})
+
+watchEffect(() => taskId.value !== undefined && loadTask(taskId.value))
+
+const store = useStore()
+
+const parent = computed(() => {
+	if (!task.listId) {
 		return {
-			taskService: new TaskService(),
+			namespace: null,
-			task: new TaskModel(),
+			list: null,
-			// We doubled the task color property here because verte does not have a real change property, leading
+		}
-			// to the color property change being triggered when the # is removed from it, leading to an update,
+	}
-			// which leads in turn to a change... This creates an infinite loop in which the task is updated, changed,
-			// updated, changed, updated and so on.
-			// To prevent this, we put the task color property in a seperate value which is set to the task color
-			// when it is saved and loaded.
-			taskColor: '',
 
-			showDeleteModal: false,
+	if (!store.getters['namespaces/getListAndNamespaceById']) {
-			// Used to avoid flashing of empty elements if the task content is not yet loaded.
+		return null
-			visible: false,
+	}
 
-			priorities: priorites,
+	return store.getters['namespaces/getListAndNamespaceById'](task.listId)
-			activeFields: {
+})
-				assignees: false,
+
-				priority: false,
+watch(
-				dueDate: false,
+	parent,
-				percentDone: false,
+	(parent) => {
-				startDate: false,
+		const parentList = parent !== null ? parent.list : null
-				endDate: false,
+		if (parentList !== null) {
-				reminders: false,
+			store.commit(CURRENT_LIST, parentList)
-				repeatAfter: false,
-				labels: false,
-				attachments: false,
-				relatedTasks: false,
-				moveList: false,
-				color: false,
-			},
 		}
 	},
-	watch: {
+	{immediate: true },
-		taskId: {
+)
-			handler: 'loadTask',
-			immediate: true,
-		},
-		parent: {
-			handler(parent) {
-				const parentList = parent !== null ? parent.list : null
-				if (parentList !== null) {
-					this.$store.commit(CURRENT_LIST, parentList)
-				}
-			},
-			immediate: true,
-		},
-	},
-	computed: {
-		taskId() {
-			const {id} = this.$route.params
-			return id === undefined ? id : Number(id)
-		},
-		currentList() {
-			return this.$store.state[CURRENT_LIST]
-		},
-		parent() {
-			if (!this.task.listId) {
-				return {
-					namespace: null,
-					list: null,
-				}
-			}
 
-			if (!this.$store.getters['namespaces/getListAndNamespaceById']) {
+const canWrite = computed(() => typeof task.maxRight !== 'undefined' && task.maxRight > rights.READ)
-				return null
-			}
 
-			return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
+const updatedSince = computed(() => formatDateSince(task.updated))
-		},
-		canWrite() {
-			return typeof this.task !== 'undefined' && typeof this.task.maxRight !== 'undefined' && this.task.maxRight > rights.READ
-		},
-		updatedSince() {
-			return this.formatDateSince(this.task.updated)
-		},
-		updatedFormatted() {
-			return this.formatDate(this.task.updated)
-		},
-		doneSince() {
-			return this.formatDateSince(this.task.doneAt)
-		},
-		doneFormatted() {
-			return this.formatDate(this.task.doneAt)
-		},
-		hasAttachments() {
-			return this.$store.state.attachments.attachments.length > 0
-		},
-		shouldShowClosePopup() {
-			return this.$route.name.includes('kanban')
-		},
-	},
-	methods: {
-		attachmentUpload(...args) {
-			return uploadFile(this.taskId, ...args)
-		},
 
-		async loadTask(taskId) {
+const updatedFormatted = computed(() => formatDate(task.updated))
-			if (taskId === undefined) {
+const doneSince = computed(() => formatDateSince(task.doneAt))
-				return
+const doneFormatted = computed(() => formatDate(task.doneAt))
-			}
+const hasAttachments = computed(() => store.state.attachments.attachments.length > 0)
+const shouldShowClosePopup = computed(() => route.name.includes('kanban'))
 
-			try {
+function attachmentUpload(...args) {
-				this.task = await this.taskService.get({id: taskId})
+	return uploadFile(taskId.value, ...args)
-				this.$store.commit('attachments/set', this.task.attachments)
+}
-				this.taskColor = this.task.hexColor
-				this.setActiveFields()
-				this.setTitle(this.task.title)
-			} finally {
-				this.scrollToHeading()
-				await this.$nextTick()
-				this.visible = true
-			}
-		},
-		scrollToHeading() {
-			this.$refs.heading.$el.scrollIntoView({block: 'center'})
-		},
-		setActiveFields() {
 
-			this.task.startDate = this.task.startDate ? this.task.startDate : null
+const taskService = shallowReactive(new TaskService())
-			this.task.endDate = this.task.endDate ? this.task.endDate : null
 
-			// Set all active fields based on values in the model
+async function loadTask(taskId) {
-			this.activeFields.assignees = this.task.assignees.length > 0
+	if (taskId === undefined) {
-			this.activeFields.priority = this.task.priority !== priorites.UNSET
+		return
-			this.activeFields.dueDate = this.task.dueDate !== null
+	}
-			this.activeFields.percentDone = this.task.percentDone > 0
-			this.activeFields.startDate = this.task.startDate !== null
-			this.activeFields.endDate = this.task.endDate !== null
-			this.activeFields.reminders = this.task.reminderDates.length > 0
-			this.activeFields.repeatAfter = this.task.repeatAfter.amount > 0
-			this.activeFields.labels = this.task.labels.length > 0
-			this.activeFields.attachments = this.task.attachments.length > 0
-			this.activeFields.relatedTasks = Object.keys(this.task.relatedTasks).length > 0
-		},
-		async saveTask(showNotification = true, undoCallback = null) {
-			if (!this.canWrite) {
-				return
-			}
 
-			// We're doing the whole update in a nextTick because sometimes race conditions can occur when
+	try {
-			// setting the due date on mobile which leads to no due date change being saved.
+		Object.assign(task, await taskService.get({id: taskId.value}))
-			await this.$nextTick()
+		store.commit('attachments/set', task.attachments)
+		setActiveFields()
+	} finally {
+		scrollToHeading()
+		await nextTick()
+		visible.value = true
+	}
+}
 
-			this.task.hexColor = this.taskColor
+const heading = ref(null)
+function scrollToHeading() {
+	const el = unrefElement(heading)
+	el.scrollIntoView({block: 'center'})
+}
 
-			// If no end date is being set, but a start date and due date,
+function setActiveFields() {
-			// use the due date as the end date
+	task.startDate = task.startDate || null
-			if (this.task.endDate === null && this.task.startDate !== null && this.task.dueDate !== null) {
+	task.endDate = task.endDate || null
-				this.task.endDate = this.task.dueDate
-			}
 
-			this.task = await this.$store.dispatch('tasks/update', this.task)
+	// Set all active fields based on values in the model
-			this.setActiveFields()
+	activeFields.assignees = task.assignees.length > 0
+	activeFields.priority = task.priority !== priorites.UNSET
+	activeFields.dueDate = task.dueDate !== null
+	activeFields.percentDone = task.percentDone > 0
+	activeFields.startDate = task.startDate !== null
+	activeFields.endDate = task.endDate !== null
+	activeFields.reminders = task.reminderDates.length > 0
+	activeFields.repeatAfter = task.repeatAfter.amount > 0
+	activeFields.labels = task.labels.length > 0
+	activeFields.attachments = task.attachments.length > 0
+	activeFields.relatedTasks = Object.keys(task.relatedTasks).length > 0
+}
 
-			if (!showNotification) {
+const activeFieldElements = reactive({
-				return
+	assignees: null,
-			}
+	priority: null,
+	dueDate: null,
+	percentDone: null,
+	startDate: null,
+	endDate: null,
+	reminders: null,
+	repeatAfter: null,
+	color: null,
+	labels: null,
+	attachments: null,
+	relatedTasks: null,
+	moveList: null,
+})
 
-			let actions = []
+function setFieldActive(fieldName) {
-			if (undoCallback !== null) {
+	activeFields[fieldName] = true
-				actions = [{
+	nextTick(() => {
-					title: 'Undo',
+		const el = unrefElement(activeFieldElements[fieldName])
-					callback: undoCallback,
-				}]
-			}
-			this.$message.success({message: this.$t('task.detail.updateSuccess')}, actions)
-		},
 
-		setFieldActive(fieldName) {
+		if (!el) {
-			this.activeFields[fieldName] = true
+			return
-			this.$nextTick(() => {
+		}
-				if (this.$refs[fieldName]) {
+		
-					this.$refs[fieldName].$el.focus()
+		el.focus()
 
-					// scroll the field to the center of the screen if not in viewport already
+		// scroll the field to the center of the screen if not in viewport already
-					const boundingRect = this.$refs[fieldName].$el.getBoundingClientRect()
+		const boundingRect = el.getBoundingClientRect()
 
-					if (boundingRect.top > (window.scrollY + window.innerHeight) || boundingRect.top < window.scrollY)
+		if (
-						this.$refs[fieldName].$el.scrollIntoView({
+			boundingRect.top > (window.scrollY + window.innerHeight) ||
-							behavior: 'smooth',
+			boundingRect.top < window.scrollY
-							block: 'center',
+		) {
-							inline: 'nearest',
+			el.scrollIntoView({
-						})
+				behavior: 'smooth',
-				}
+				block: 'center',
+				inline: 'nearest',
 			})
-		},
+		}
+	})
+}
 
-		async deleteTask() {
+const {t} = useI18n()
-			await this.$store.dispatch('tasks/delete', this.task)
-			this.$message.success({message: this.$t('task.detail.deleteSuccess')})
-			this.$router.push({name: 'list.index', params: {listId: this.task.listId}})
-		},
 
-		toggleTaskDone() {
+async function saveTask(showNotification = true, undoCallback = null) {
-			this.task.done = !this.task.done
+	if (!canWrite.value) {
+		return
+	}
 
-			if (this.task.done) {
+	// We're doing the whole update in a nextTick because sometimes race conditions can occur when
-				playPop()
+	// setting the due date on mobile which leads to no due date change being saved.
-			}
+	await nextTick()
 
-			this.saveTask(true, this.toggleTaskDone)
+	// If no end date is being set, but a start date and due date,
-		},
+	// use the due date as the end date
+	if (
+		task.endDate === null &&
+		task.startDate !== null &&
+		task.dueDate !== null
+	) {
+		task.endDate = task.dueDate
+	}
 
-		async changeList(list) {
+	const newTask = await store.dispatch('tasks/update', task) // TODO: markraw ?
-			this.$store.commit('kanban/removeTaskInBucket', this.task)
+	Object.assign(task, newTask)
-			this.task.listId = list.id
+	setActiveFields()
-			await this.saveTask()
-		},
 
-		async toggleFavorite() {
+	if (!showNotification) {
-			this.task.isFavorite = !this.task.isFavorite
+		return
-			this.task = await this.taskService.update(this.task)
+	}
-			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+
-		},
+	let actions = []
-	},
+	if (undoCallback !== null) {
+		actions = [{
+			title: 'Undo',
+			callback: undoCallback,
+		}]
+	}
+	success({message: t('task.detail.updateSuccess')}, actions)
+}
+
+const router = useRouter()
+
+const showDeleteModal = ref(false)
+async function deleteTask() {
+	await store.dispatch('tasks/delete', task)
+	success({message: t('task.detail.deleteSuccess')})
+	router.push({name: 'list.index', params: {listId: task.listId}})
+}
+
+function toggleTaskDone() {
+	task.done = !task.done
+
+	if (task.done) {
+		playPop()
+	}
+
+	saveTask(true, toggleTaskDone)
+}
+
+function setDescriptionChanged(e) {
+	if (e.key === 'Enter' || e.key === 'Control') {
+		return
+	}
+	descriptionChanged.value = true
+}
+
+async function changeList(list) {
+	store.commit('kanban/removeTaskInBucket', task)
+	task.listId = list.id
+	await saveTask()
+}
+
+async function toggleFavorite() {
+	task.isFavorite = !task.isFavorite
+	const newTask = await taskService.update(task)
+	Object.assign(task, newTask)
+	store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
 }
 </script>
 

src/views/tasks/TaskDetailViewModal.vue

@@ -7,7 +7,7 @@
 				<a @click="close()" class="close">
 					<icon icon="times"/>
 				</a>
-				<task-detail-view/>
+				<task-detail-view @close="close()" />
 	</modal>
 </template>