Add rudimentary reordering buckets
This commit is contained in:
parent
4be420ace6
commit
15ba57c3ce
|
@ -17,8 +17,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
|
||||
.kanban {
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
height: calc(#{$crazy-height-calculation});
|
||||
|
@ -29,6 +27,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
|
||||
}
|
||||
|
||||
&-bucket-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.bucket {
|
||||
background-color: $bucket-background;
|
||||
border-radius: $radius;
|
||||
|
|
|
@ -16,7 +16,16 @@
|
|||
v-model="params"
|
||||
/>
|
||||
</div>
|
||||
<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban loader-container">
|
||||
<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban kanban-bucket-container loader-container">
|
||||
<draggable
|
||||
v-model="buckets"
|
||||
@start="() => drag = true"
|
||||
@end="updateBucketPosition"
|
||||
group="buckets"
|
||||
v-bind="dragOptions"
|
||||
:disabled="!canWrite"
|
||||
>
|
||||
<transition-group type="transition" :name="!drag ? 'move-bucket': null" tag="div" class="kanban-bucket-container">
|
||||
<div
|
||||
:key="`bucket${bucket.id}`"
|
||||
class="bucket"
|
||||
|
@ -86,8 +95,9 @@
|
|||
class="dropdown-item"
|
||||
v-tooltip="$t('list.kanban.doneBucketHintExtended')"
|
||||
>
|
||||
<span class="icon is-small" :class="{'has-text-success': bucket.isDoneBucket}"><icon
|
||||
icon="check-double"/></span>
|
||||
<span class="icon is-small" :class="{'has-text-success': bucket.isDoneBucket}">
|
||||
<icon icon="check-double"/>
|
||||
</span>
|
||||
{{ $t('list.kanban.doneBucket') }}
|
||||
</a>
|
||||
<a
|
||||
|
@ -102,7 +112,9 @@
|
|||
class="dropdown-item has-text-danger"
|
||||
v-tooltip="buckets.length <= 1 ? $t('list.kanban.deleteLast') : ''"
|
||||
>
|
||||
<span class="icon is-small"><icon icon="trash-alt"/></span>
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
{{ $t('misc.delete') }}
|
||||
</a>
|
||||
</dropdown>
|
||||
|
@ -112,7 +124,7 @@
|
|||
v-model="bucket.tasks"
|
||||
@start="() => drag = true"
|
||||
@end="updateTaskPosition"
|
||||
:group="{name: 'buckets', put: shouldAcceptDrop(bucket)}"
|
||||
:group="{name: 'tasks', put: shouldAcceptDrop(bucket)}"
|
||||
v-bind="dragOptions"
|
||||
:disabled="!canWrite"
|
||||
:data-bucket-index="k"
|
||||
|
@ -154,10 +166,14 @@
|
|||
icon="plus"
|
||||
type="secondary"
|
||||
>
|
||||
{{ bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask') }}
|
||||
{{
|
||||
bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask')
|
||||
}}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
|
||||
<div class="bucket new-bucket" v-if="canWrite && !loading && buckets.length > 0">
|
||||
<input
|
||||
|
@ -465,6 +481,9 @@ export default {
|
|||
this.error(e)
|
||||
})
|
||||
},
|
||||
updateBucketPosition(e) {
|
||||
console.log('drop bucket', e)
|
||||
},
|
||||
setBucketLimit(bucket) {
|
||||
if (bucket.limit < 0) {
|
||||
return
|
||||
|
|
Reference in New Issue