Move kanban task card to a new component
This commit is contained in:
parent
d4eaec3145
commit
7f3cfccfbb
|
@ -0,0 +1,111 @@
|
||||||
|
<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>
|
|
@ -127,72 +127,7 @@
|
||||||
:key="`bucket${bucket.id}-task${task.id}`"
|
:key="`bucket${bucket.id}-task${task.id}`"
|
||||||
v-for="task in bucket.tasks"
|
v-for="task in bucket.tasks"
|
||||||
>
|
>
|
||||||
<div
|
<kanban-card :task="task"/>
|
||||||
:class="{
|
|
||||||
'is-loading': (taskService.loading || taskLoading) && taskUpdating[task.id],
|
|
||||||
'draggable': !(taskService.loading || taskLoading) || !taskUpdating[task.id],
|
|
||||||
'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">
|
|
||||||
<span
|
|
||||||
:key="label.id"
|
|
||||||
:style="{'background': label.hexColor, 'color': label.textColor}"
|
|
||||||
class="tag"
|
|
||||||
v-for="label in task.labels">
|
|
||||||
<span>{{ label.title }}</span>
|
|
||||||
</span>
|
|
||||||
<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>
|
|
||||||
</component>
|
</component>
|
||||||
</component>
|
</component>
|
||||||
</div>
|
</div>
|
||||||
|
@ -280,10 +215,6 @@ import TaskService from '../../../services/task'
|
||||||
import BucketModel from '../../../models/bucket'
|
import BucketModel from '../../../models/bucket'
|
||||||
|
|
||||||
import {Container, Draggable} from 'vue-smooth-dnd'
|
import {Container, Draggable} from 'vue-smooth-dnd'
|
||||||
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
|
|
||||||
import User from '../../../components/misc/user'
|
|
||||||
import Labels from '../../../components/tasks/partials/labels'
|
|
||||||
|
|
||||||
import {filterObject} from '@/helpers/filterObject'
|
import {filterObject} from '@/helpers/filterObject'
|
||||||
import {applyDrag} from '@/helpers/applyDrag'
|
import {applyDrag} from '@/helpers/applyDrag'
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
|
@ -292,21 +223,21 @@ import Rights from '../../../models/rights.json'
|
||||||
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
||||||
import FilterPopup from '@/components/list/partials/filter-popup.vue'
|
import FilterPopup from '@/components/list/partials/filter-popup.vue'
|
||||||
import Dropdown from '@/components/misc/dropdown.vue'
|
import Dropdown from '@/components/misc/dropdown.vue'
|
||||||
import {playPop} from '@/helpers/playPop'
|
|
||||||
import createTask from '@/components/tasks/mixins/createTask'
|
import createTask from '@/components/tasks/mixins/createTask'
|
||||||
import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
|
import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
|
||||||
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
|
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
import KanbanCard from '../../../components/tasks/partials/kanban-card'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Kanban',
|
name: 'Kanban',
|
||||||
components: {
|
components: {
|
||||||
|
KanbanCard,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
FilterPopup,
|
FilterPopup,
|
||||||
Container,
|
Container,
|
||||||
Draggable,
|
Draggable,
|
||||||
Labels,
|
draggable,
|
||||||
User,
|
|
||||||
PriorityLabel,
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -463,24 +394,6 @@ export default {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
markTaskAsDone(task) {
|
|
||||||
this.oneTaskUpdating = true
|
|
||||||
this.$set(this.taskUpdating, task.id, true)
|
|
||||||
task.done = !task.done
|
|
||||||
this.$store.dispatch('tasks/update', task)
|
|
||||||
.then(() => {
|
|
||||||
if (task.done) {
|
|
||||||
playPop()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
this.error(e)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
this.$set(this.taskUpdating, task.id, false)
|
|
||||||
this.oneTaskUpdating = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getTaskPayload(bucketId) {
|
getTaskPayload(bucketId) {
|
||||||
return index => {
|
return index => {
|
||||||
const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
|
const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
|
||||||
|
|
Reference in New Issue