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