112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<template>
|
|
<div
|
|
:class="{
|
|
'is-loading': loadingInternal || loading,
|
|
'draggable': !(loadingInternal || loading),
|
|
'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
|
|
}"
|
|
:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
|
|
@click.ctrl="() => markTaskAsDone(task)"
|
|
@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
|
|
@click.meta="() => markTaskAsDone(task)"
|
|
class="task loader-container draggable"
|
|
>
|
|
<span class="task-id">
|
|
<span class="is-done" v-if="task.done">Done</span>
|
|
<template v-if="task.identifier === ''">
|
|
#{{ task.index }}
|
|
</template>
|
|
<template v-else>
|
|
{{ task.identifier }}
|
|
</template>
|
|
</span>
|
|
<span
|
|
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
|
|
class="due-date"
|
|
v-if="task.dueDate > 0"
|
|
v-tooltip="formatDate(task.dueDate)">
|
|
<span class="icon">
|
|
<icon :icon="['far', 'calendar-alt']"/>
|
|
</span>
|
|
<span>
|
|
{{ formatDateSince(task.dueDate) }}
|
|
</span>
|
|
</span>
|
|
<h3>{{ task.title }}</h3>
|
|
<progress
|
|
class="progress is-small"
|
|
v-if="task.percentDone > 0"
|
|
:value="task.percentDone * 100" max="100">
|
|
{{ task.percentDone * 100 }}%
|
|
</progress>
|
|
<div class="footer">
|
|
<labels :labels="task.labels"/>
|
|
<priority-label :priority="task.priority"/>
|
|
<div class="assignees" v-if="task.assignees.length > 0">
|
|
<user
|
|
:avatar-size="24"
|
|
:key="task.id + 'assignee' + u.id"
|
|
:show-username="false"
|
|
:user="u"
|
|
v-for="u in task.assignees"
|
|
/>
|
|
</div>
|
|
<span class="icon" v-if="task.attachments.length > 0">
|
|
<icon icon="paperclip"/>
|
|
</span>
|
|
<span v-if="task.description" class="icon">
|
|
<icon icon="align-left"/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {playPop} from '../../../helpers/playPop'
|
|
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
|
|
import User from '../../../components/misc/user'
|
|
import Labels from '../../../components/tasks/partials/labels'
|
|
|
|
export default {
|
|
name: 'kanban-card',
|
|
components: {
|
|
PriorityLabel,
|
|
User,
|
|
Labels,
|
|
},
|
|
data() {
|
|
return {
|
|
loadingInternal: false,
|
|
}
|
|
},
|
|
props: {
|
|
task: {
|
|
required: true,
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
},
|
|
methods: {
|
|
markTaskAsDone(task) {
|
|
this.loadingInternal = true
|
|
task.done = !task.done
|
|
this.$store.dispatch('tasks/update', task)
|
|
.then(() => {
|
|
if (task.done) {
|
|
playPop()
|
|
}
|
|
})
|
|
.catch(e => {
|
|
this.error(e)
|
|
})
|
|
.finally(() => {
|
|
this.loadingInternal = false
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|