This commit is contained in:
kolaente 2021-07-28 17:51:14 +02:00
parent 2e6fb374e8
commit d9575ed11b
Signed by: konrad
GPG Key ID: F40E70337AB24C9B

View File

@ -117,41 +117,20 @@
: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"
/>
</transition-group>
<!-- </component>-->
<!-- </component>-->
</draggable>
</div>
<div class="bucket-footer" v-if="canWrite">
<div class="field" v-if="showNewTaskInput[bucket.id]">
<div class="control" :class="{'is-loading': taskService.loading || loading}">
<div class="control" :class="{'is-loading': loading}">
<input
class="input"
:disabled="taskService.loading || loading"
:disabled="loading"
@focusout="toggleShowNewTaskInput(bucket.id)"
@keyup.enter="addTaskToBucket(bucket.id)"
@keyup.esc="toggleShowNewTaskInput(bucket.id)"
@ -226,10 +205,8 @@
</template>
<script>
import TaskService from '../../../services/task'
import BucketModel from '../../../models/bucket'
import {Container, Draggable} from 'vue-smooth-dnd'
import {filterObject} from '@/helpers/filterObject'
import {applyDrag} from '@/helpers/applyDrag'
import {mapState} from 'vuex'
@ -250,19 +227,10 @@ export default {
KanbanCard,
Dropdown,
FilterPopup,
Container,
Draggable,
draggable,
},
data() {
return {
taskService: TaskService,
dropPlaceholderOptions: {
className: 'drop-preview',
animationDuration: 150,
showOnTop: true,
},
drag: false,
dragOptions: {
animation: 150,
@ -300,7 +268,6 @@ export default {
createTask,
],
created() {
this.taskService = new TaskService()
this.loadBuckets()
// Save the current list view to local storage
@ -385,63 +352,6 @@ export default {
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)
//
// if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
//
// // FIXME: This is probably not the best solution and more of a naive brute-force approach
//
// // Duplicate the buckets to avoid stuff moving around without noticing
// const buckets = Object.assign({}, this.buckets)
// // Get the index of the bucket and the bucket itself
// const bucket = buckets[bucketIndex]
//
// // Rebuild the tasks from the bucket, removing/adding the moved task
// bucket.tasks = applyDrag(bucket.tasks, dropResult)
// // Update the bucket in the list of all buckets
// delete buckets[bucketIndex]
// buckets[bucketIndex] = bucket
// // Set the buckets, triggering a state update in vue
// // FIXME: This seems to set some task attributes (like due date) wrong. Commented out, but seems to still work?
// // Not sure what to do about this.
// // this.$store.commit('kanban/setBuckets', buckets)
// }
//
// if (dropResult.addedIndex !== null) {
//
// const taskIndex = dropResult.addedIndex
// const taskBefore = typeof this.buckets[bucketIndex].tasks[taskIndex - 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex - 1]
// const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
// const task = this.buckets[bucketIndex].tasks[taskIndex]
// this.$set(this.taskUpdating, task.id, true)
// this.oneTaskUpdating = true
//
// task.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
// console.log(task.kanbanPosition)
//
// task.bucketId = bucketId
//
// this.$store.dispatch('tasks/update', task)
// .catch(e => {
// this.error(e)
// })
// .finally(() => {
// this.$set(this.taskUpdating, task.id, false)
// this.oneTaskUpdating = false
// })
// }
},
getTaskPayload(bucketId) {
return index => {
const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
this.sourceBucket = bucket.id
return bucket.tasks[index]
}
},
toggleShowNewTaskInput(bucket) {
this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
},