feat: TaskDetail as script setup
continuous-integration/drone/pr Build is failing
Details
continuous-integration/drone/pr Build is failing
Details
This commit is contained in:
parent
41c0594bd2
commit
4cb6bc6c3b
GPG Key ID:
B257AC0149F43A77
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
import TaskService from '../../services/task'
|
||||
import TaskModel from '../../models/task'
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, toRef, shallowReactive, computed, watch, watchEffect, nextTick } from 'vue'
|
||||
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 rights from '../../models/constants/rights.json'
|
||||
|
||||
import PrioritySelect from '../../components/tasks/partials/prioritySelect'
|
||||
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 Attachments from '@/components/tasks/partials/attachments.vue'
|
||||
import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
|
||||
import ColorPicker from '@/components/input/colorPicker.vue'
|
||||
import Comments from '@/components/tasks/partials/comments.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 {
|
||||
name: 'TaskDetailView',
|
||||
components: {
|
||||
ChecklistSummary,
|
||||
TaskSubscription,
|
||||
Datepicker,
|
||||
ColorPicker,
|
||||
ListSearch,
|
||||
Reminders,
|
||||
RepeatAfter,
|
||||
RelatedTasks,
|
||||
Attachments,
|
||||
EditAssignees,
|
||||
EditLabels,
|
||||
PercentDoneSelect,
|
||||
PrioritySelect,
|
||||
Comments,
|
||||
description,
|
||||
heading,
|
||||
},
|
||||
data() {
|
||||
import {success} from '@/message'
|
||||
import {formatDate, formatDateSince} from '@/helpers/time/formatDate'
|
||||
|
||||
defineEmits(['close'])
|
||||
|
||||
const task = reactive(new TaskModel())
|
||||
useTitle(toRef(task, 'title'))
|
||||
|
||||
const descriptionChanged = ref(false)
|
||||
|
||||
// Used to avoid flashing of empty elements if the task content is not yet loaded.
|
||||
const visible = ref(false)
|
||||
|
||||
const activeFields = reactive({
|
||||
assignees: false,
|
||||
priority: false,
|
||||
dueDate: false,
|
||||
percentDone: false,
|
||||
startDate: false,
|
||||
endDate: false,
|
||||
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(),
|
||||
task: new TaskModel(),
|
||||
// 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: '',
|
||||
namespace: null,
|
||||
list: null,
|
||||
}
|
||||
}
|
||||
|
||||
showDeleteModal: false,
|
||||
// Used to avoid flashing of empty elements if the task content is not yet loaded.
|
||||
visible: false,
|
||||
if (!store.getters['namespaces/getListAndNamespaceById']) {
|
||||
return null
|
||||
}
|
||||
|
||||
priorities: priorites,
|
||||
activeFields: {
|
||||
assignees: false,
|
||||
priority: false,
|
||||
dueDate: false,
|
||||
percentDone: false,
|
||||
startDate: false,
|
||||
endDate: false,
|
||||
reminders: false,
|
||||
repeatAfter: false,
|
||||
labels: false,
|
||||
attachments: false,
|
||||
relatedTasks: false,
|
||||
moveList: false,
|
||||
color: false,
|
||||
},
|
||||
return store.getters['namespaces/getListAndNamespaceById'](task.listId)
|
||||
})
|
||||
|
||||
watch(
|
||||
parent,
|
||||
(parent) => {
|
||||
const parentList = parent !== null ? parent.list : null
|
||||
if (parentList !== null) {
|
||||
store.commit(CURRENT_LIST, parentList)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
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,
|
||||
}
|
||||
}
|
||||
{immediate: true },
|
||||
)
|
||||
|
||||
if (!this.$store.getters['namespaces/getListAndNamespaceById']) {
|
||||
return null
|
||||
}
|
||||
const canWrite = computed(() => typeof task.maxRight !== 'undefined' && task.maxRight > rights.READ)
|
||||
|
||||
return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
|
||||
},
|
||||
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)
|
||||
},
|
||||
const updatedSince = computed(() => formatDateSince(task.updated))
|
||||
|
||||
async loadTask(taskId) {
|
||||
if (taskId === undefined) {
|
||||
return
|
||||
}
|
||||
const updatedFormatted = computed(() => formatDate(task.updated))
|
||||
const doneSince = computed(() => formatDateSince(task.doneAt))
|
||||
const doneFormatted = computed(() => formatDate(task.doneAt))
|
||||
const hasAttachments = computed(() => store.state.attachments.attachments.length > 0)
|
||||
const shouldShowClosePopup = computed(() => route.name.includes('kanban'))
|
||||
|
||||
try {
|
||||
this.task = await this.taskService.get({id: taskId})
|
||||
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() {
|
||||
function attachmentUpload(...args) {
|
||||
return uploadFile(taskId.value, ...args)
|
||||
}
|
||||
|
||||
this.task.startDate = this.task.startDate ? this.task.startDate : null
|
||||
this.task.endDate = this.task.endDate ? this.task.endDate : null
|
||||
const taskService = shallowReactive(new TaskService())
|
||||
|
||||
// Set all active fields based on values in the model
|
||||
this.activeFields.assignees = this.task.assignees.length > 0
|
||||
this.activeFields.priority = this.task.priority !== priorites.UNSET
|
||||
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
|
||||
}
|
||||
async function loadTask(taskId) {
|
||||
if (taskId === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
// We're doing the whole update in a nextTick because sometimes race conditions can occur when
|
||||
// setting the due date on mobile which leads to no due date change being saved.
|
||||
await this.$nextTick()
|
||||
try {
|
||||
Object.assign(task, await taskService.get({id: taskId.value}))
|
||||
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,
|
||||
// use the due date as the end date
|
||||
if (this.task.endDate === null && this.task.startDate !== null && this.task.dueDate !== null) {
|
||||
this.task.endDate = this.task.dueDate
|
||||
}
|
||||
function setActiveFields() {
|
||||
task.startDate = task.startDate || null
|
||||
task.endDate = task.endDate || null
|
||||
|
||||
this.task = await this.$store.dispatch('tasks/update', this.task)
|
||||
this.setActiveFields()
|
||||
// Set all active fields based on values in the model
|
||||
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) {
|
||||
return
|
||||
}
|
||||
const activeFieldElements = reactive({
|
||||
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 = []
|
||||
if (undoCallback !== null) {
|
||||
actions = [{
|
||||
title: 'Undo',
|
||||
callback: undoCallback,
|
||||
}]
|
||||
}
|
||||
this.$message.success({message: this.$t('task.detail.updateSuccess')}, actions)
|
||||
},
|
||||
function setFieldActive(fieldName) {
|
||||
activeFields[fieldName] = true
|
||||
nextTick(() => {
|
||||
const el = unrefElement(activeFieldElements[fieldName])
|
||||
|
||||
setFieldActive(fieldName) {
|
||||
this.activeFields[fieldName] = true
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs[fieldName]) {
|
||||
this.$refs[fieldName].$el.focus()
|
||||
if (!el) {
|
||||
return
|
||||
}
|
||||
|
||||
el.focus()
|
||||
|
||||
// scroll the field to the center of the screen if not in viewport already
|
||||
const boundingRect = this.$refs[fieldName].$el.getBoundingClientRect()
|
||||
// scroll the field to the center of the screen if not in viewport already
|
||||
const boundingRect = el.getBoundingClientRect()
|
||||
|
||||
if (boundingRect.top > (window.scrollY + window.innerHeight) || boundingRect.top < window.scrollY)
|
||||
this.$refs[fieldName].$el.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
inline: 'nearest',
|
||||
})
|
||||
}
|
||||
if (
|
||||
boundingRect.top > (window.scrollY + window.innerHeight) ||
|
||||
boundingRect.top < window.scrollY
|
||||
) {
|
||||
el.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
inline: 'nearest',
|
||||
})
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async deleteTask() {
|
||||
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}})
|
||||
},
|
||||
const {t} = useI18n()
|
||||
|
||||
toggleTaskDone() {
|
||||
this.task.done = !this.task.done
|
||||
async function saveTask(showNotification = true, undoCallback = null) {
|
||||
if (!canWrite.value) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.task.done) {
|
||||
playPop()
|
||||
}
|
||||
// We're doing the whole update in a nextTick because sometimes race conditions can occur when
|
||||
// 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) {
|
||||
this.$store.commit('kanban/removeTaskInBucket', this.task)
|
||||
this.task.listId = list.id
|
||||
await this.saveTask()
|
||||
},
|
||||
const newTask = await store.dispatch('tasks/update', task) // TODO: markraw ?
|
||||
Object.assign(task, newTask)
|
||||
setActiveFields()
|
||||
|
||||
async toggleFavorite() {
|
||||
this.task.isFavorite = !this.task.isFavorite
|
||||
this.task = await this.taskService.update(this.task)
|
||||
this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
|
||||
},
|
||||
},
|
||||
if (!showNotification) {
|
||||
return
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<a @click="close()" class="close">
|
||||
<icon icon="times"/>
|
||||
</a>
|
||||
<task-detail-view/>
|
||||
<task-detail-view @close="close()" />
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Reference in New Issue