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

Add rudimentary reordering buckets

This commit is contained in:
kolaente 2021-07-28 18:29:09 +02:00
parent 4be420ace6
commit 15ba57c3ce
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 163 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/styles/components/kanban.scss
View File

@ -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;

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

@ -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