konrad
724275e653
All checks were successful
continuous-integration/drone/push Build is passing
Save sort order to local storage Save selected columns to localStorage Loading spinner More sorting Add sorting Styling and hiding of column filter Add checkbox to show/hide columns Use fancycheckbox everywhere Fix is done badge Change sort order in table view Add is done column to table Better text handling Refactor is done into seperate component Add pagination to table view Add assignees to table view Fix redirecting to table view Add date tooltip to date field Add date tooltip to date field labels for table view Styling Add basic table view Extend priority label Split list view in mixins Co-authored-by: kolaente <k@knt.li> Reviewed-on: #76
108 lines
2.7 KiB
Vue
108 lines
2.7 KiB
Vue
<template>
|
|
<span>
|
|
<fancycheckbox v-model="task.done" @change="markAsDone" :disabled="isArchived"/>
|
|
<router-link :to="{ name: 'taskDetailView', params: { id: task.id } }" class="tasktext" :class="{ 'done': task.done}">
|
|
<!-- Show any parent tasks to make it clear this task is a sub task of something -->
|
|
<span class="parent-tasks" v-if="typeof task.related_tasks.parenttask !== 'undefined'">
|
|
<template v-for="(pt, i) in task.related_tasks.parenttask">
|
|
{{ pt.text }}<template v-if="(i + 1) < task.related_tasks.parenttask.length">, </template>
|
|
</template>
|
|
>
|
|
</span>
|
|
{{ task.text }}
|
|
<labels :labels="task.labels"/>
|
|
<user
|
|
:user="a"
|
|
:avatar-size="27"
|
|
:show-username="false"
|
|
:is-inline="true"
|
|
v-for="(a, i) in task.assignees"
|
|
:key="task.id + 'assignee' + a.id + i"
|
|
/>
|
|
<i v-if="task.dueDate > 0"
|
|
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
|
|
v-tooltip="formatDate(task.dueDate)"> - Due {{formatDateSince(task.dueDate)}}</i>
|
|
<priority-label :priority="task.priority"/>
|
|
</router-link>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
import TaskModel from '../../../models/task'
|
|
import PriorityLabel from './priorityLabel'
|
|
import TaskService from '../../../services/task'
|
|
import Labels from './labels'
|
|
import User from '../../global/user'
|
|
import Fancycheckbox from '../../global/fancycheckbox'
|
|
|
|
export default {
|
|
name: 'singleTaskInList',
|
|
data() {
|
|
return {
|
|
taskService: TaskService,
|
|
task: TaskModel,
|
|
}
|
|
},
|
|
components: {
|
|
Fancycheckbox,
|
|
User,
|
|
Labels,
|
|
PriorityLabel,
|
|
},
|
|
props: {
|
|
theTask: {
|
|
type: TaskModel,
|
|
required: true,
|
|
},
|
|
isArchived: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
watch: {
|
|
theTask(newVal) {
|
|
this.task = newVal
|
|
},
|
|
},
|
|
mounted() {
|
|
this.task = this.theTask
|
|
},
|
|
created() {
|
|
this.task = new TaskModel()
|
|
this.taskService = new TaskService()
|
|
},
|
|
methods: {
|
|
markAsDone(checked) {
|
|
const updateFunc = () => {
|
|
this.taskService.update(this.task)
|
|
.then(t => {
|
|
this.task = t
|
|
this.$emit('taskUpdated', t)
|
|
this.success(
|
|
{message: 'The task was successfully ' + (this.task.done ? '' : 'un-') + 'marked as done.'},
|
|
this,
|
|
[{
|
|
title: 'Undo',
|
|
callback: () => this.markAsDone({
|
|
target: {
|
|
checked: !checked
|
|
}
|
|
}),
|
|
}]
|
|
)
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
}
|
|
|
|
if (checked) {
|
|
setTimeout(updateFunc, 300); // Delay it to show the animation when marking a task as done
|
|
} else {
|
|
updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|