vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Add actually updating the task

Browse Source
This commit is contained in:
kolaente 2021-07-28 17:49:18 +02:00
parent 41449a6b15
commit 2e6fb374e8
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/views/list/views/Kanban.vue
View File

@ -21,7 +21,7 @@
:key="`bucket${bucket.id}`"
class="bucket"
:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
v-for="bucket in buckets"
v-for="(bucket, k) in buckets"
>
<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
<span
@ -111,36 +111,36 @@
<draggable
v-model="bucket.tasks"
@start="() => drag = true"
@end="e => onDrop(bucket.id, e)"
@end="e => updateTaskPosition(k, e)"
:group="{name: 'buckets', put: shouldAcceptDrop(bucket)}"
v-bind="dragOptions"
:disabled="!canWrite"
>
<transition-group type="transition" :name="!drag ? 'move-card': null">
<!-- Make the component either a div or a draggable component based on the user rights -->
<!-- <component-->
<!-- :animation-duration="150"-->
<!-- :drop-placeholder="dropPlaceholderOptions"-->
<!-- :get-child-payload="getTaskPayload(bucket.id)"-->
<!-- :is="canWrite ? 'Container' : 'div'"-->
<!-- :should-accept-drop="() => shouldAcceptDrop(bucket)"-->
<!-- @drop="e => onDrop(bucket.id, e)"-->
<!-- drag-class="ghost-task"-->
<!-- drag-class-drop="ghost-task-drop"-->
<!-- drag-handle-selector=".task.draggable"-->
<!-- group-name="buckets"-->
<!-- >-->
<!-- &lt;!&ndash; Make the component either a div or a draggable component based on the user rights &ndash;&gt;-->
<!-- <component-->
<!-- :is="canWrite ? 'Draggable' : 'div'"-->
<!-- :key="`bucket${bucket.id}-task${task.id}`"-->
<!-- v-for="task in bucket.tasks"-->
<!-- >-->
<kanban-card
:key="`bucket${bucket.id}-task${task.id}`"
v-for="task in bucket.tasks"
:task="task"
/>
<!-- Make the component either a div or a draggable component based on the user rights -->
<!-- <component-->
<!-- :animation-duration="150"-->
<!-- :drop-placeholder="dropPlaceholderOptions"-->
<!-- :get-child-payload="getTaskPayload(bucket.id)"-->
<!-- :is="canWrite ? 'Container' : 'div'"-->
<!-- :should-accept-drop="() => shouldAcceptDrop(bucket)"-->
<!-- @drop="e => onDrop(bucket.id, e)"-->
<!-- drag-class="ghost-task"-->
<!-- drag-class-drop="ghost-task-drop"-->
<!-- drag-handle-selector=".task.draggable"-->
<!-- group-name="buckets"-->
<!-- >-->
<!-- &lt;!&ndash; Make the component either a div or a draggable component based on the user rights &ndash;&gt;-->
<!-- <component-->
<!-- :is="canWrite ? 'Draggable' : 'div'"-->
<!-- :key="`bucket${bucket.id}-task${task.id}`"-->
<!-- v-for="task in bucket.tasks"-->
<!-- >-->
<kanban-card
:key="`bucket${bucket.id}-task${task.id}`"
v-for="task in bucket.tasks"
:task="task"
/>
</transition-group>
<!-- </component>-->
<!-- </component>-->
@ -365,10 +365,28 @@ export default {
this.error(e)
})
},
onDrop(bucketId, dropResult) {
console.log('drop', bucketId, dropResult)
updateTaskPosition(bucketIndex, e) {
this.drag = false
const newBucket = this.buckets[bucketIndex]
const task = newBucket.tasks[e.newIndex]
const taskBefore = newBucket.tasks[e.newIndex - 1] ?? null
const taskAfter = newBucket.tasks[e.newIndex + 1] ?? null
task.kanban_position = calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null)
task.bucketId = newBucket.id
this.$store.dispatch('tasks/update', task)
.catch(e => {
this.error(e)
})
.finally(() => {
this.$set(this.taskUpdating, task.id, false)
this.oneTaskUpdating = false
})
},
onDrop(bucketId, dropResult) {
// Note: A lot of this example comes from the excellent kanban example on https://github.com/kutlugsahin/vue-smooth-dnd/blob/master/demo/src/pages/cards.vue
// const bucketIndex = filterObject(this.buckets, b => b.id === bucketId)