From bef0142db590da1988800a9b34a9f1459f8725de Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 18 Feb 2022 13:24:23 +0100
Subject: [PATCH 1/3] feat: create KanbanBucket from ListKanban

---
 .../tasks/partials/KanbanBucket.vue           |  439 +++++++
 .../{kanban-card.vue => KanbanCard.vue}       |    0
 src/models/bucket.ts                          |   13 +-
 src/views/list/ListKanban.vue                 | 1065 +++++------------
 4 files changed, 763 insertions(+), 754 deletions(-)
 create mode 100644 src/components/tasks/partials/KanbanBucket.vue
 rename src/components/tasks/partials/{kanban-card.vue => KanbanCard.vue} (100%)

diff --git a/src/components/tasks/partials/KanbanBucket.vue b/src/components/tasks/partials/KanbanBucket.vue
new file mode 100644
index 000000000..4c924c9cd
--- /dev/null
+++ b/src/components/tasks/partials/KanbanBucket.vue
@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import {ref, computed, nextTick} from 'vue'
+import {useStore} from 'vuex'
+import {useI18n} from 'vue-i18n'
+import Draggable from 'vuedraggable'
+
+import {success} from '@/message'
+import BucketModel from '@/models/bucket'
+import TaskModel from '@/models/task'
+
+import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
+
+import Dropdown from '@/components/misc/dropdown.vue'
+import KanbanCard from '@/components/tasks/partials/KanbanCard.vue'
+
+const MIN_SCROLL_HEIGHT_PERCENT = 0.25
+
+const props = defineProps<{
+	bucketIndex: number
+	isCollapsed: boolean
+	canWrite: boolean
+	bucket: BucketModel
+	isOnlyBucketLeft: boolean
+	dragOptions: Object
+	params: Object
+	shouldAcceptDrop: boolean
+	isDraggingTask: boolean
+}>()
+const emit = defineEmits(['openDeleteBucketModal', 'dragstart', 'updateTaskPosition'])
+
+const {t} = useI18n()
+const store = useStore()
+
+const loading = computed(() =>
+	store.state.loading && store.state.loadingModule === 'kanban',
+)
+
+
+const isCollapsed = ref(false)
+function collapseBucket() {
+	isCollapsed.value = true
+	// TODO:
+	// saveCollapsedBucketState(this.listId, this.collapsedBuckets)
+}
+function unCollapseBucket() {
+	if (!isCollapsed.value) {
+		return
+	}
+
+	isCollapsed.value = false
+	
+	// TODO:
+	// saveCollapsedBucketState(this.listId, this.collapsedBuckets)
+}
+
+const bucketTitleEditable = ref(true)
+async function saveBucketTitle(bucketTitle: string) {
+		await store.dispatch('kanban/updateBucketTitle', {
+			id: props.bucket.id,
+			title: bucketTitle,
+		})
+		bucketTitleEditable.value = false
+		success({message: t('list.kanban.bucketTitleSavedSuccess')})
+}
+
+async function focusBucketTitle(e: Event) {
+	// This little helper allows us to drag a bucket around at the title without focusing on it right away.
+	bucketTitleEditable.value = true
+	await nextTick();
+	
+	(e.target as HTMLInputElement).focus()
+}
+
+const hasLimitInput = ref(false)
+
+async function setBucketLimit(limit: number) {
+	if (limit < 0) {
+		return
+	}
+
+	await store.dispatch('kanban/updateBucket', {
+		...props.bucket,
+		limit,
+	})
+	success({message: t('list.kanban.bucketLimitSavedSuccess')})
+}
+
+async function toggleDoneBucket() {
+	await store.dispatch('kanban/updateBucket', {
+		...props.bucket,
+		isDoneBucket: !props.bucket.isDoneBucket,
+	})
+	success({message: t('list.kanban.doneBucketSavedSuccess')})
+}
+
+function updateTasks(tasks: TaskModel[]) {
+	store.commit('kanban/setBucketById', {
+		...props.bucket,
+		tasks,
+	})
+}
+
+function handleTaskContainerScroll(el: HTMLElement) {
+	if (!el) {
+		return
+	}
+	const scrollTopMax = el.scrollHeight - el.clientHeight
+	const threshold = el.scrollTop + el.scrollTop * MIN_SCROLL_HEIGHT_PERCENT
+	if (scrollTopMax > threshold) {
+		return
+	}
+
+	store.dispatch('kanban/loadNextTasksForBucket', {
+		listId: props.bucket.listId,
+		params: props.params,
+		bucketId: props.bucket.id,
+	})
+}
+
+const taskContainer = ref<HTMLElement>()
+
+const taskDraggableTaskComponentData = computed(() => ({
+	ref: 'taskContainer',
+	onScroll: (event: Event) => handleTaskContainerScroll(event.target as HTMLElement),
+	type: 'transition',
+	tag: 'div',
+	name: !props.isDraggingTask ? 'move-card' : null,
+	class: [
+		'tasks',
+		{'dragging-disabled': !props.canWrite},
+	],
+}))
+
+function scrollTaskContainerToBottom() {
+	if (!taskContainer.value) {
+		return
+	}
+	taskContainer.value.scrollTop = taskContainer.value.scrollHeight
+}
+
+const hasNewTaskInput = ref(false)
+function toggleShowNewTaskInput() {
+	hasNewTaskInput.value = !hasNewTaskInput.value
+}
+
+const newTaskText = ref('')
+const newTaskError = ref(false)
+
+async function addTaskToBucket() {
+	if (newTaskText.value === '') {
+		newTaskError.value = true
+		return
+	}
+	newTaskError.value = false
+
+	const task = await store.dispatch('tasks/createNewTask', {
+		title: newTaskText.value,
+		bucketId: props.bucket.id,
+		listId: props.bucket.listId,
+	})
+	newTaskText.value = ''
+	store.commit('kanban/addTaskToBucket', task)
+	scrollTaskContainerToBottom()
+}
+</script>
+
+<template>
+	<div
+		class="bucket"
+		:class="{'is-collapsed': isCollapsed}"
+	>
+		<div class="bucket-header" @click="unCollapseBucket()">
+			<span
+				v-if="bucket.isDoneBucket"
+				class="icon is-small has-text-success mr-2"
+				v-tooltip="$t('list.kanban.doneBucketHint')"
+			>
+				<icon icon="check-double"/>
+			</span>
+			<h2
+				@keydown.enter.prevent.stop="($event.target as HTMLInputElement).blur()"
+				@keydown.esc.prevent.stop="($event.target as HTMLInputElement).blur()"
+				@blur="saveBucketTitle(($event.target as HTMLInputElement).textContent as string)"
+				@click="focusBucketTitle"
+				class="title input"
+				:contenteditable="bucketTitleEditable && canWrite && !isCollapsed || undefined"
+				:spellcheck="false">{{ bucket.title }}</h2>
+			<span
+				:class="{'is-max': bucket.tasks.length >= bucket.limit}"
+				class="limit"
+				v-if="bucket.limit > 0">
+				{{ bucket.tasks.length }}/{{ bucket.limit }}
+			</span>
+			<dropdown
+				class="is-right options"
+				v-if="canWrite && !isCollapsed"
+				trigger-icon="ellipsis-v"
+				@close="hasLimitInput =false"
+			>
+				<a
+					v-if="hasLimitInput"
+					@click.stop="hasLimitInput = true"
+					class="dropdown-item"
+				>
+					<div class="field has-addons">
+						<div class="control">
+							<input
+								@keyup.esc="hasLimitInput = false"
+								@keyup.enter="hasLimitInput = false"
+								:value="bucket.limit"
+								@input="setBucketLimit(parseInt(($event.target as HTMLInputElement).value))"
+								class="input"
+								type="number"
+								min="0"
+								v-focus.always
+							/>
+						</div>
+						<div class="control">
+							<x-button
+								:disabled="bucket.limit < 0"
+								:icon="['far', 'save']"
+								:shadow="false"
+								v-cy="'setBucketLimit'"
+							/>
+						</div>
+					</div>
+				</a>
+				<div
+					v-else
+					@click.stop="hasLimitInput = true"
+					class="dropdown-item"
+				>
+					{{ $t('list.kanban.limit', {
+							limit: bucket.limit > 0
+								? bucket.limit
+								: $t('list.kanban.noLimit')
+						})
+					}}
+				</div>
+				<a
+					@click.stop="toggleDoneBucket()"
+					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>
+					{{ $t('list.kanban.doneBucket') }}
+				</a>
+				<a
+					class="dropdown-item"
+					@click.stop="collapseBucket()"
+				>
+					{{ $t('list.kanban.collapse') }}
+				</a>
+				<a
+					:class="{'is-disabled': isOnlyBucketLeft}"
+					@click.stop="emit('openDeleteBucketModal', bucket.id)"
+					class="dropdown-item has-text-danger"
+					v-tooltip="isOnlyBucketLeft && $t('list.kanban.deleteLast')"
+				>
+					<span class="icon is-small">
+						<icon icon="trash-alt"/>
+					</span>
+					{{ $t('misc.delete') }}
+				</a>
+			</dropdown>
+		</div>
+
+		<Draggable
+			v-bind="dragOptions"
+			:modelValue="bucket.tasks"
+			@update:modelValue="updateTasks"
+			@start="emit('dragstart', bucket.id)"
+			@end="emit('updateTaskPosition', $event)"
+			:group="{name: 'tasks', put: shouldAcceptDrop}"
+			:disabled="!canWrite"
+			:data-bucket-index="bucketIndex"
+			tag="transition-group"
+			:item-key="(task: TaskModel) => `bucket${bucket.id}-task${task.id}`"
+			:component-data="taskDraggableTaskComponentData"
+		>
+			<template #footer>
+				<div class="bucket-footer" v-if="canWrite">
+					<div class="field" v-if="hasNewTaskInput">
+						<div class="control" :class="{'is-loading': loading}">
+							<input
+								class="input"
+								:disabled="loading || undefined"
+								@focusout="toggleShowNewTaskInput()"
+								@keyup.esc="toggleShowNewTaskInput()"
+								@keyup.enter="addTaskToBucket()"
+								:placeholder="$t('list.kanban.addTaskPlaceholder')"
+								type="text"
+								v-focus.always
+								v-model="newTaskText"
+							/>
+						</div>
+						<p class="help is-danger" v-if="newTaskError && newTaskText === ''">
+							{{ $t('list.create.addTitleRequired') }}
+						</p>
+					</div>
+					<x-button
+						@click="toggleShowNewTaskInput()"
+						class="is-fullwidth has-text-centered"
+						:shadow="false"
+						v-else
+						icon="plus"
+						variant="secondary"
+					>
+						{{ bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask') }}
+					</x-button>
+				</div>
+			</template>
+
+			<template #item="{element: task}">
+				<div class="task-item">
+					<kanban-card class="kanban-card" :task="task"/>
+				</div>
+			</template>
+		</Draggable>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.bucket {
+	--bucket-header-height: 60px;
+
+	border-radius: $radius;
+	position: relative;
+
+	display: flex;
+	flex-direction: column;
+
+	.tasks {
+		overflow: hidden auto;
+		height: 100%;
+	}
+
+	.task-item {
+		background-color: var(--grey-100);
+		padding: .25rem .5rem;
+
+		&:first-of-type {
+			padding-top: .5rem;
+		}
+		&:last-of-type {
+			padding-bottom: .5rem;
+		}	
+	}
+
+	.no-move {
+		transition: transform 0s;
+	}
+
+	h2 {
+		font-size: 1rem;
+		margin: 0;
+		font-weight: 600 !important;
+	}
+
+	a.dropdown-item {
+		padding-right: 1rem;
+	}
+
+	&.is-collapsed {
+		align-self: flex-start;
+		transform: rotate(90deg) translateY(-100%);
+		transform-origin: top left;
+		// Using negative margins instead of translateY here to make all other buckets fill the empty space
+		margin-right: calc((var(--bucket-width) - var(--bucket-header-height) - var(--bucket-right-margin)) * -1);
+		cursor: pointer;
+
+		.tasks, .bucket-footer {
+			display: none;
+		}
+	}
+}
+
+.bucket-header {
+	background-color: var(--grey-100);
+	height: min-content;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: .5rem;
+	height: var(--bucket-header-height);
+
+	.limit {
+		padding: 0 .5rem;
+		font-weight: bold;
+
+		&.is-max {
+			color: var(--danger);
+		}
+	}
+
+	.title.input {
+		height: auto;
+		padding: .4rem .5rem;
+		display: inline-block;
+		cursor: pointer;
+	}
+}
+
+:deep(.dropdown-trigger) {
+	cursor: pointer;
+	padding: .5rem;
+}
+
+.bucket-footer {
+	position: sticky;
+	bottom: 0;
+	height: min-content;
+	padding: .5rem;
+	background-color: var(--grey-100);
+	border-bottom-left-radius: $radius;
+	border-bottom-right-radius: $radius;
+
+	.button {
+		background-color: transparent;
+
+		&:hover {
+			background-color: var(--white);
+		}
+	}
+}
+
+.move-card-move {
+	transform: rotateZ(3deg);
+	transition: transform $transition-duration;
+}
+
+.move-card-leave-from,
+.move-card-leave-to,
+.move-card-leave-active {
+	display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/KanbanCard.vue
similarity index 100%
rename from src/components/tasks/partials/kanban-card.vue
rename to src/components/tasks/partials/KanbanCard.vue
diff --git a/src/models/bucket.ts b/src/models/bucket.ts
index 2e0552491..0514d5b9e 100644
--- a/src/models/bucket.ts
+++ b/src/models/bucket.ts
@@ -7,13 +7,13 @@ import type {ITask} from '@/modelTypes/ITask'
 import type {IUser} from '@/modelTypes/IUser'
 
 export default class BucketModel extends AbstractModel<IBucket> implements IBucket {
-	id = 0
-	title = ''
-	listId = ''
-	limit = 0
+	id: number = 0
+	title: string = ''
+	listId: number = ''
+	limit: number = 0
 	tasks: ITask[] = []
-	isDoneBucket = false
-	position = 0
+	isDoneBucket: boolean = false
+	position: boolean = 0
 	
 	createdBy: IUser = null
 	created: Date = null
@@ -24,7 +24,6 @@ export default class BucketModel extends AbstractModel<IBucket> implements IBuck
 		this.assignData(data)
 
 		this.tasks = this.tasks.map(t => new TaskModel(t))
-
 		this.createdBy = new UserModel(this.createdBy)
 		this.created = new Date(this.created)
 		this.updated = new Date(this.updated)
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index 45fdc3d45..2a93fab00 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -1,7 +1,7 @@
 <template>
 	<ListWrapper class="list-kanban" :list-id="listId" viewName="kanban">
 		<template #header>
-			<div class="filter-container" v-if="!isSavedFilter(listId)">
+			<div class="filter-container" v-if="isSavedFilter">
 				<div class="items">
 					<filter-popup
 						v-model="params"
@@ -13,236 +13,104 @@
 
 		<template #default>
 			<div class="kanban-view">
-			<div
-				:class="{ 'is-loading': loading && !oneTaskUpdating}"
-				class="kanban kanban-bucket-container loader-container"
-			>
-			<draggable
-				v-bind="dragOptions"
-				:modelValue="buckets"
-				@update:modelValue="updateBuckets"
-				@end="updateBucketPosition"
-				@start="() => dragBucket = true"
-				group="buckets"
-				:disabled="!canWrite"
-				tag="ul"
-				:item-key="({id}) => `bucket${id}`"
-				:component-data="bucketDraggableComponentData"
-			>
-				<template #item="{element: bucket, index: bucketIndex }">
-					<div
-						class="bucket"
-						:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
-					>
-						<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
-							<span
-								v-if="bucket.isDoneBucket"
-								class="icon is-small has-text-success mr-2"
-								v-tooltip="$t('list.kanban.doneBucketHint')"
-							>
-								<icon icon="check-double"/>
-							</span>
-							<h2
-								@keydown.enter.prevent.stop="$event.target.blur()"
-								@keydown.esc.prevent.stop="$event.target.blur()"
-								@blur="saveBucketTitle(bucket.id, $event.target.textContent)"
-								@click="focusBucketTitle"
-								class="title input"
-								:contenteditable="(bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]) ? true : undefined"
-								:spellcheck="false">{{ bucket.title }}</h2>
-							<span
-								:class="{'is-max': bucket.tasks.length >= bucket.limit}"
-								class="limit"
-								v-if="bucket.limit > 0">
-								{{ bucket.tasks.length }}/{{ bucket.limit }}
-							</span>
-							<dropdown
-								class="is-right options"
-								v-if="canWrite && !collapsedBuckets[bucket.id]"
-								trigger-icon="ellipsis-v"
-								@close="() => showSetLimitInput = false"
-							>
-								<dropdown-item
-									@click.stop="showSetLimitInput = true"
-								>
-									<div class="field has-addons" v-if="showSetLimitInput">
-										<div class="control">
-											<input
-												@keyup.esc="() => showSetLimitInput = false"
-												@keyup.enter="() => showSetLimitInput = false"
-												:value="bucket.limit"
-												@input="(event) => setBucketLimit(bucket.id, parseInt(event.target.value))"
-												class="input"
-												type="number"
-												min="0"
-												v-focus.always
-											/>
-										</div>
-										<div class="control">
-											<x-button
-												:disabled="bucket.limit < 0"
-												:icon="['far', 'save']"
-												:shadow="false"
-												v-cy="'setBucketLimit'"
-											/>
-										</div>
-									</div>
-									<template v-else>
-										{{
-											$t('list.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('list.kanban.noLimit')})
-										}}
-									</template>
-								</dropdown-item>
-								<dropdown-item
-									@click.stop="toggleDoneBucket(bucket)"
-									v-tooltip="$t('list.kanban.doneBucketHintExtended')"
-								>
-									<span class="icon is-small" :class="{'has-text-success': bucket.isDoneBucket}">
-										<icon icon="check-double"/>
-									</span>
-									{{ $t('list.kanban.doneBucket') }}
-								</dropdown-item>
-								<dropdown-item
-									@click.stop="() => collapseBucket(bucket)"
-								>
-									{{ $t('list.kanban.collapse') }}
-								</dropdown-item>
-								<dropdown-item
-									:class="{'is-disabled': buckets.length <= 1}"
-									@click.stop="() => deleteBucketModal(bucket.id)"
-									class="has-text-danger"
-									v-tooltip="buckets.length <= 1 ? $t('list.kanban.deleteLast') : ''"
-								>
-									<span class="icon is-small">
-										<icon icon="trash-alt"/>
-									</span>
-									{{ $t('misc.delete') }}
-								</dropdown-item>
-							</dropdown>
-						</div>
-
-						<draggable
-							v-bind="dragOptions"
-							:modelValue="bucket.tasks"
-							@update:modelValue="(tasks) => updateTasks(bucket.id, tasks)"
-							@start="() => dragstart(bucket)"
-							@end="updateTaskPosition"
-							:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
-							:disabled="!canWrite"
-							:data-bucket-index="bucketIndex"
-							tag="ul"
-							:item-key="(task) => `bucket${bucket.id}-task${task.id}`"
-							:component-data="getTaskDraggableTaskComponentData(bucket)"
-						>
-							<template #footer>
-								<div class="bucket-footer" v-if="canWrite">
-									<div class="field" v-if="showNewTaskInput[bucket.id]">
-										<div class="control" :class="{'is-loading': loading || taskLoading}">
-											<input
-												class="input"
-												:disabled="loading || taskLoading || undefined"
-												@focusout="toggleShowNewTaskInput(bucket.id)"
-												@keyup.enter="addTaskToBucket(bucket.id)"
-												@keyup.esc="toggleShowNewTaskInput(bucket.id)"
-												:placeholder="$t('list.kanban.addTaskPlaceholder')"
-												type="text"
-												v-focus.always
-												v-model="newTaskText"
-											/>
-										</div>
-										<p class="help is-danger" v-if="newTaskError[bucket.id] && newTaskText === ''">
-											{{ $t('list.create.addTitleRequired') }}
-										</p>
-									</div>
-									<x-button
-										@click="toggleShowNewTaskInput(bucket.id)"
-										class="is-fullwidth has-text-centered"
-										:shadow="false"
-										v-else
-										icon="plus"
-										variant="secondary"
-									>
-										{{ bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask') }}
-									</x-button>
-								</div>
-							</template>
-
-							<template #item="{element: task}">
-								<div class="task-item">
-									<kanban-card class="kanban-card" :task="task" :loading="taskUpdating[task.id] ?? false"/>
-								</div>
-							</template>
-						</draggable>
-					</div>
-				</template>
-			</draggable>
-
-			<div class="bucket new-bucket" v-if="canWrite && !loading && buckets.length > 0">
-				<input
-					:class="{'is-loading': loading}"
-					:disabled="loading || undefined"
-					@blur="() => showNewBucketInput = false"
-					@keyup.enter="createNewBucket"
-					@keyup.esc="$event.target.blur()"
-					class="input"
-					:placeholder="$t('list.kanban.addBucketPlaceholder')"
-					type="text"
-					v-focus.always
-					v-if="showNewBucketInput"
-					v-model="newBucketTitle"
-				/>
-				<x-button
-					v-else
-					@click="() => showNewBucketInput = true"
-					:shadow="false"
-					class="is-transparent is-fullwidth has-text-centered"
-					variant="secondary"
-					icon="plus"
+				<div
+					:class="{ 'is-loading': loading && !oneTaskUpdating}"
+					class="kanban kanban-bucket-container loader-container"
 				>
-					{{ $t('list.kanban.addBucket') }}
-				</x-button>
+					<draggable
+						v-bind="DRAG_OPTIONS"
+						:modelValue="buckets"
+						@update:modelValue="updateBuckets"
+						@end="updateBucketPosition"
+						@start="() => isDraggingBucket = true"
+						group="buckets"
+						:disabled="!canWrite"
+						tag="transition-group"
+						:item-key="(id: number) => `bucket${id}`"
+						:component-data="bucketDraggableComponentData"
+					>
+						<template #item="{element: bucket, index: bucketIndex }">
+							<KanbanBucket
+								class="bucket"
+								:bucket-index="bucketIndex"
+								:is-collapsed="collapsedBuckets[bucket.id]"
+								:can-write="canWrite"
+								:bucket="bucket"
+								:isOnlyBucketLeft="buckets.length <= 1"
+								:drag-options="DRAG_OPTIONS"
+								:params="params"
+								:should-accept-drop="shouldAcceptDrop(bucket)"
+								:isDraggingTask="isDraggingTask"
+								@dragstart="dragstart"
+								@updateTaskPosition="updateTaskPosition"
+								@openDeleteBucketModal="openDeleteBucketModal"
+							/>
+						</template>
+					</draggable>
+
+					<div class="bucket new-bucket" v-if="canWrite && !loading && buckets.length > 0">
+						<input
+							v-if="hasNewBucketInput"
+							:class="{'is-loading': loading}"
+							:disabled="loading || null"
+							@blur="hasNewBucketInput = false"
+							@keyup.enter="createNewBucket"
+							@keyup.esc="($event.target as HTMLInputElement).blur()"
+							class="input"
+							:placeholder="$t('list.kanban.addBucketPlaceholder')"
+							type="text"
+							v-focus.always
+							v-model="newBucketTitle"
+						/>
+						<x-button
+							v-else
+							@click="hasNewBucketInput = true"
+							:shadow="false"
+							class="is-transparent is-fullwidth has-text-centered"
+							variant="secondary"
+							icon="plus"
+						>
+							{{ $t('list.kanban.addBucket') }}
+						</x-button>
+					</div>
+				</div>
+
+				<transition name="modal">
+					<modal
+						v-if="hasBucketDeleteModal"
+						@close="hasBucketDeleteModal = false"
+						@submit="deleteBucket()"
+					>
+						<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
+
+						<template #text>
+							<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
+								{{ $t('list.kanban.deleteBucketText2') }}</p>
+						</template>
+					</modal>
+				</transition>
 			</div>
-		</div>
-
-		<transition name="modal">
-			<modal
-				v-if="showBucketDeleteModal"
-				@close="showBucketDeleteModal = false"
-				@submit="deleteBucket()"
-			>
-				<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
-
-				<template #text>
-					<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
-						{{ $t('list.kanban.deleteBucketText2') }}</p>
-				</template>
-			</modal>
-		</transition>
-		</div>
 		</template>
 	</ListWrapper>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, computed, watch} from 'vue'
 import draggable from 'zhyswan-vuedraggable'
 import cloneDeep from 'lodash.clonedeep'
-import {mapState} from 'pinia'
+import {useI18n} from 'vue-i18n'
+import {SortableEvent} from 'sortablejs'
+
+import { success } from '@/message'
+import {calculateItemPosition} from '@/helpers/calculateItemPosition'
+
+import BucketModel from '@/models/bucket'
+import TaskModel from '@/models/task'
+import Rights from '@/models/constants/rights.json'
 
-import BucketModel from '../../models/bucket'
-import {RIGHTS as Rights} from '@/constants/rights'
 import ListWrapper from './ListWrapper.vue'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
-import Dropdown from '@/components/misc/dropdown.vue'
-import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
-import {calculateItemPosition} from '../../helpers/calculateItemPosition'
-import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
-import DropdownItem from '@/components/misc/dropdown-item.vue'
-import {isSavedFilter} from '@/helpers/savedFilter'
-
-import {useBaseStore} from '@/stores/base'
-import {useTaskStore} from '@/stores/tasks'
-import {useKanbanStore} from '@/stores/kanban'
+import KanbanBucket from '@/components/tasks/partials/KanbanBucket.vue'
 
 const DRAG_OPTIONS = {
 	// sortable options
@@ -253,550 +121,264 @@ const DRAG_OPTIONS = {
 	delay: 150,
 }
 
-const MIN_SCROLL_HEIGHT_PERCENT = 0.25
+const props = defineProps<{
+	listId: number
+}>()
 
-export default defineComponent({
-	name: 'Kanban',
-	components: {
-		DropdownItem,
-		ListWrapper,
-		KanbanCard,
-		Dropdown,
-		FilterPopup,
-		draggable,
-	},
+const {t} = useI18n()
 
-	props: {
-		listId: {
-			type: Number,
-			required: true,
-		},
-	},
+const collapsedBuckets = ref({})
 
-	data() {
-		return {
-			taskContainerRefs: {},
-
-			dragOptions: DRAG_OPTIONS,
-
-			drag: false,
-			dragBucket: false,
-			sourceBucket: 0,
-
-			showBucketDeleteModal: false,
-			bucketToDelete: 0,
-			bucketTitleEditable: false,
-
-			newTaskText: '',
-			showNewTaskInput: {},
-			newBucketTitle: '',
-			showNewBucketInput: false,
-			newTaskError: {},
-			showSetLimitInput: false,
-			collapsedBuckets: {},
-
-			// We're using this to show the loading animation only at the task when updating it
-			taskUpdating: {},
-			oneTaskUpdating: false,
-
-			params: {
-				filter_by: [],
-				filter_value: [],
-				filter_comparator: [],
-				filter_concat: 'and',
-			},
-		}
-	},
-
-	watch: {
-		loadBucketParameter: {
-			handler: 'loadBuckets',
-			immediate: true,
-		},
-	},
-	computed: {
-		getTaskDraggableTaskComponentData() {
-			return (bucket) => ({
-				ref: (el) => this.setTaskContainerRef(bucket.id, el),
-				onScroll: (event) => this.handleTaskContainerScroll(bucket.id, bucket.listId, event.target),
-				type: 'transition-group',
-				name: !this.drag ? 'move-card' : null,
-				class: [
-					'tasks',
-					{'dragging-disabled': !this.canWrite},
-				],
-			})
-		},
-
-		loadBucketParameter() {
-			return {
-				listId: this.listId,
-				params: this.params,
-			}
-		},
-		bucketDraggableComponentData() {
-			return {
-				type: 'transition-group',
-				name: !this.dragBucket ? 'move-bucket' : null,
-				class: [
-					'kanban-bucket-container',
-					{'dragging-disabled': !this.canWrite},
-				],
-			}
-		},
-		...mapState(useBaseStore, {
-			canWrite: state => state.currentList.maxRight > Rights.READ,
-			list: state => state.currentList,
-		}),
-		...mapState(useKanbanStore, {
-			buckets: state => state.buckets,
-			loadedListId: state => state.listId,
-			loading: state => state.isLoading,
-		}),
-		...mapState(useTaskStore, {
-			taskLoading: state => state.isLoading,
-		}),
-	},
-
-	methods: {
-		isSavedFilter,
-
-		loadBuckets() {
-			const {listId, params} = this.loadBucketParameter
-
-			this.collapsedBuckets = getCollapsedBucketState(listId)
-
-			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $attrs = ${this.$attrs} $route.params =`, this.$route.params)
-
-			useKanbanStore().loadBucketsForList({listId, params})
-		},
-
-		setTaskContainerRef(id, el) {
-			if (!el) return
-			this.taskContainerRefs[id] = el
-		},
-
-		handleTaskContainerScroll(id, listId, el) {
-			if (!el) {
-				return
-			}
-			const scrollTopMax = el.scrollHeight - el.clientHeight
-			const threshold = el.scrollTop + el.scrollTop * MIN_SCROLL_HEIGHT_PERCENT
-			if (scrollTopMax > threshold) {
-				return
-			}
-
-			useKanbanStore().loadNextTasksForBucket({
-				listId: listId,
-				params: this.params,
-				bucketId: id,
-			})
-		},
-
-		updateTasks(bucketId, tasks) {
-			const kanbanStore = useKanbanStore()
-			const newBucket = {
-				...kanbanStore.getBucketById(bucketId),
-				tasks,
-			}
-
-			kanbanStore.setBucketById(newBucket)
-		},
-
-		async updateTaskPosition(e) {
-			this.drag = false
-
-			// While we could just pass the bucket index in through the function call, this would not give us the 
-			// new bucket id when a task has been moved between buckets, only the new bucket. Using the data-bucket-id
-			// of the drop target works all the time.
-			const bucketIndex = parseInt(e.to.dataset.bucketIndex)
-
-			const newBucket = this.buckets[bucketIndex]
-
-			// HACK:
-			// this is a hacky workaround for a known problem of vue.draggable.next when using the footer slot
-			// the problem: https://github.com/SortableJS/vue.draggable.next/issues/108
-			// This hack doesn't remove the problem that the ghost item is still displayed below the footer
-			// It just makes releasing the item possible.
-
-			// The newIndex of the event doesn't count in the elements of the footer slot.
-			// This is why in case the length of the tasks is identical with the newIndex
-			// we have to remove 1 to get the correct index.
-			const newTaskIndex = newBucket.tasks.length === e.newIndex
-				? e.newIndex - 1
-				: e.newIndex
-
-			const task = newBucket.tasks[newTaskIndex]
-			const taskBefore = newBucket.tasks[newTaskIndex - 1] ?? null
-			const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null
-			this.taskUpdating[task.id] = true
-
-			const newTask = cloneDeep(task) // cloning the task to avoid pinia store manipulation
-			newTask.bucketId = newBucket.id
-			newTask.kanbanPosition = calculateItemPosition(
-				taskBefore !== null ? taskBefore.kanbanPosition : null,
-				taskAfter !== null ? taskAfter.kanbanPosition : null,
-			)
-
-			try {
-				const taskStore = useTaskStore()
-				await taskStore.update(newTask)
-				
-				// Make sure the first and second task don't both get position 0 assigned
-				if(newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
-					const taskAfterAfter = newBucket.tasks[newTaskIndex + 2] ?? null
-					const newTaskAfter = cloneDeep(taskAfter) // cloning the task to avoid pinia store manipulation
-					newTaskAfter.bucketId = newBucket.id
-					newTaskAfter.kanbanPosition = calculateItemPosition(
-						0,
-						taskAfterAfter !== null ? taskAfterAfter.kanbanPosition : null,
-					)
-
-					await taskStore.update(newTaskAfter)
-				}
-			} finally {
-				this.taskUpdating[task.id] = false
-				this.oneTaskUpdating = false
-			}
-		},
-
-		toggleShowNewTaskInput(bucketId) {
-			this.showNewTaskInput[bucketId] = !this.showNewTaskInput[bucketId]
-		},
-
-		async addTaskToBucket(bucketId) {
-			if (this.newTaskText === '') {
-				this.newTaskError[bucketId] = true
-				return
-			}
-			this.newTaskError[bucketId] = false
-			
-			const task = await useTaskStore().createNewTask({
-				title: this.newTaskText,
-				bucketId,
-				listId: this.listId,
-			})
-			this.newTaskText = ''
-			useKanbanStore().addTaskToBucket(task)
-			this.scrollTaskContainerToBottom(bucketId)
-		},
-
-		scrollTaskContainerToBottom(bucketId) {
-			const bucketEl = this.taskContainerRefs[bucketId]
-			if (!bucketEl) {
-				return
-			}
-			bucketEl.scrollTop = bucketEl.scrollHeight
-		},
-
-		async createNewBucket() {
-			if (this.newBucketTitle === '') {
-				return
-			}
-
-			const newBucket = new BucketModel({
-				title: this.newBucketTitle,
-				listId: this.listId,
-			})
-
-			await useKanbanStore().createBucket(newBucket)
-			this.newBucketTitle = ''
-			this.showNewBucketInput = false
-		},
-
-		deleteBucketModal(bucketId) {
-			if (this.buckets.length <= 1) {
-				return
-			}
-
-			this.bucketToDelete = bucketId
-			this.showBucketDeleteModal = true
-		},
-
-		async deleteBucket() {
-			const bucket = new BucketModel({
-				id: this.bucketToDelete,
-				listId: this.listId,
-			})
-
-			try {
-				await useKanbanStore().deleteBucket({
-					bucket,
-					params: this.params,
-				})
-				this.$message.success({message: this.$t('list.kanban.deleteBucketSuccess')})
-			} finally {
-				this.showBucketDeleteModal = false
-			}
-		},
-
-		focusBucketTitle(e) {
-			// This little helper allows us to drag a bucket around at the title without focusing on it right away.
-			this.bucketTitleEditable = true
-			this.$nextTick(() => e.target.focus())
-		},
-
-		async saveBucketTitle(bucketId, bucketTitle) {
-			const updatedBucketData = {
-				id: bucketId,
-				title: bucketTitle,
-			}
-
-			await useKanbanStore().updateBucketTitle(updatedBucketData)
-			this.bucketTitleEditable = false
-		},
-
-		updateBuckets(value) {
-			// (1) buckets get updated in store and tasks positions get invalidated
-			useKanbanStore().setBuckets(value)
-		},
-
-		updateBucketPosition(e) {
-			// (2) bucket positon is changed
-			this.dragBucket = false
-
-			const bucket = this.buckets[e.newIndex]
-			const bucketBefore = this.buckets[e.newIndex - 1] ?? null
-			const bucketAfter = this.buckets[e.newIndex + 1] ?? null
-
-			const updatedData = {
-				id: bucket.id,
-				position: calculateItemPosition(
-					bucketBefore !== null ? bucketBefore.position : null,
-					bucketAfter !== null ? bucketAfter.position : null,
-				),
-			}
-
-			useKanbanStore().updateBucket(updatedData)
-		},
-
-		async setBucketLimit(bucketId, limit) {
-			if (limit < 0) {
-				return
-			}
-
-			const kanbanStore = useKanbanStore()
-
-			const newBucket = {
-				...kanbanStore.getBucketById(bucketId),
-				limit,
-			}
-
-			await kanbanStore.updateBucket(newBucket)
-			this.$message.success({message: this.$t('list.kanban.bucketLimitSavedSuccess')})
-		},
-
-		shouldAcceptDrop(bucket) {
-			return (
-				// When dragging from a bucket who has its limit reached, dragging should still be possible
-				bucket.id === this.sourceBucket ||
-				// If there is no limit set, dragging & dropping should always work
-				bucket.limit === 0 ||
-				// Disallow dropping to buckets which have their limit reached
-				bucket.tasks.length < bucket.limit
-			)
-		},
-
-		dragstart(bucket) {
-			this.drag = true
-			this.sourceBucket = bucket.id
-		},
-
-		async toggleDoneBucket(bucket) {
-			const newBucket = {
-				...bucket,
-				isDoneBucket: !bucket.isDoneBucket,
-			}
-			await useKanbanStore().updateBucket(newBucket)
-			this.$message.success({message: this.$t('list.kanban.doneBucketSavedSuccess')})
-		},
-
-		collapseBucket(bucket) {
-			this.collapsedBuckets[bucket.id] = true
-			saveCollapsedBucketState(this.listId, this.collapsedBuckets)
-		},
-		unCollapseBucket(bucket) {
-			if (!this.collapsedBuckets[bucket.id]) {
-				return
-			}
-
-			this.collapsedBuckets[bucket.id] = false
-			saveCollapsedBucketState(this.listId, this.collapsedBuckets)
-		},
-	},
+const params = ref({
+	filter_by: [],
+	filter_value: [],
+	filter_comparator: [],
+	filter_concat: 'and',
 })
+
+interface LoadBucketsParams {
+	listId: number,
+	params: Object
+}
+
+watch(() => ({
+	listId: props.listId,
+	params: params.value,
+} as LoadBucketsParams), loadBuckets, {immediate: true})
+
+function loadBuckets({listId, params} : LoadBucketsParams) {
+	store.dispatch('kanban/loadBucketsForList', {listId, params})
+	collapsedBuckets.value = getCollapsedBucketState(listId)
+}
+
+const isSavedFilter = computed(() => list.value.isSavedFilter && !list.value.isSavedFilter())
+
+const buckets = computed(() => store.state.kanban.buckets)
+
+const loading = computed(() => store.state.loading && store.state.loadingModule === 'kanban')
+// const taskLoading = computed(() => store.state.loading && store.state.loadingModule === 'tasks') // unused ?
+const canWrite = computed(() => store.state.currentList.maxRight > Rights.READ)
+const list = computed(() => store.state.currentList)
+
+// We're using this to show the loading animation only at the task when updating it
+const taskUpdating = ref<{ [id: TaskModel['id']]: boolean }>({})
+const oneTaskUpdating = ref(false)
+
+const isDraggingTask = ref(false)
+
+async function updateTaskPosition(e) {
+	isDraggingTask.value = false
+
+	// While we could just pass the bucket index in through the function call, this would not give us the 
+	// new bucket id when a task has been moved between buckets, only the new bucket. Using the data-bucket-id
+	// of the drop target works all the time.
+	const bucketIndex = parseInt(e.to.dataset.bucketIndex)
+
+	const newBucket = buckets.value[bucketIndex]
+
+	// HACK:
+	// this is a hacky workaround for a known problem of vue.draggable.next when using the footer slot
+	// the problem: https://github.com/SortableJS/vue.draggable.next/issues/108
+	// This hack doesn't remove the problem that the ghost item is still displayed below the footer
+	// It just makes releasing the item possible.
+
+	// The newIndex of the event doesn't count in the elements of the footer slot.
+	// This is why in case the length of the tasks is identical with the newIndex
+	// we have to remove 1 to get the correct index.
+	const newTaskIndex = newBucket.tasks.length === e.newIndex
+		? e.newIndex - 1
+		: e.newIndex
+
+	const taskBefore = newBucket.tasks[newTaskIndex - 1] ?? null
+	const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null
+
+	const task = {
+		// cloning the task to avoid vuex store mutations
+		...cloneDeep(newBucket.tasks[newTaskIndex]),
+		bucketId: newBucket.id,
+		kanbanPosition: calculateItemPosition(
+			taskBefore !== null ? taskBefore.kanbanPosition : null,
+			taskAfter !== null ? taskAfter.kanbanPosition : null,
+		),
+	}
+
+	try {
+		await store.dispatch('tasks/update', task)
+	} finally {
+		taskUpdating.value[task.id] = false
+		oneTaskUpdating.value = false
+	}
+}
+
+const hasNewBucketInput = ref(false)
+
+const newBucketTitle = ref('')
+async function createNewBucket() {
+	if (newBucketTitle.value === '') {
+		return
+	}
+
+	await store.dispatch('kanban/createBucket', new BucketModel({
+		title: newBucketTitle.value,
+		listId: props.listId,
+	}))
+	newBucketTitle.value = ''
+	hasNewBucketInput.value = false
+}
+
+const bucketToDeleteId = ref<BucketModel['id']>(0)
+const hasBucketDeleteModal = ref(false)
+
+function openDeleteBucketModal(bucketId: BucketModel['id']) {
+	if (buckets.value.length <= 1) {
+		return
+	}
+
+	bucketToDeleteId.value = bucketId
+	hasBucketDeleteModal.value = true
+}
+
+async function deleteBucket() {
+	try {
+		await store.dispatch('kanban/deleteBucket', {
+			bucket: new BucketModel({
+				id: bucketToDeleteId.value,
+				listId: props.listId,
+			}),
+			params: params.value,
+		})
+		success({message: t('list.kanban.deleteBucketSuccess')})
+	} finally {
+		hasBucketDeleteModal.value = false
+	}
+}
+
+const isDraggingBucket = ref(false)
+const bucketDraggableComponentData = computed(() => ({
+	type: 'transition',
+	tag: 'div',
+	name: !isDraggingBucket.value ? 'move-bucket' : null,
+	class: [
+		'kanban-bucket-container',
+		{'dragging-disabled': !canWrite.value},
+	],
+}))
+
+function updateBuckets(value: BucketModel[]) {
+	// (1) buckets get updated in store and tasks positions get invalidated
+	store.commit('kanban/setBuckets', value)
+}
+
+function updateBucketPosition(e) {
+	// (2) bucket positon is changed
+	isDraggingBucket.value = false
+
+	const bucket = buckets.value[e.newIndex]
+	const bucketBefore = buckets.value[e.newIndex - 1] ?? null
+	const bucketAfter = buckets.value[e.newIndex + 1] ?? null
+
+	store.dispatch('kanban/updateBucket', {
+		id: bucket.id,
+		position: calculateItemPosition(
+			bucketBefore !== null ? bucketBefore.position : null,
+			bucketAfter !== null ? bucketAfter.position : null,
+		),
+	})
+}
+
+const sourceBucketId = ref(0)
+
+function shouldAcceptDrop(bucket: BucketModel) {
+	return !isDraggingBucket.value && (
+		// When dragging from a bucket who has its limit reached, dragging should still be possible
+		bucket.id === sourceBucketId.value ||
+		// If there is no limit set, dragging & dropping should always work
+		bucket.limit === 0 ||
+		// Disallow dropping to buckets which have their limit reached
+		bucket.tasks.length < bucket.limit
+	)
+}
+
+function dragstart(bucketId: BucketModel['id']) {
+	isDraggingTask.value = true
+	sourceBucketId.value = bucketId
+}
 </script>
 
+
+
+<style lang="scss">
+// FIXME:
+.app-content.list\.kanban {
+	padding-bottom: 0 !important;
+}
+</style>
+
 <style lang="scss">
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
-$bucket-width: 300px;
-$bucket-header-height: 60px;
-$bucket-right-margin: 1rem;
 
 $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
 $crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem';
 $filter-container-height: '1rem - #{$switch-view-height}';
 
-// FIXME:
-.app-content.list\.kanban, .app-content.task\.detail {
-	padding-bottom: 0 !important;
-}
-
 .kanban {
+	--bucket-width: 300px;
+	--bucket-right-margin: 1rem;
 	overflow-x: auto;
 	overflow-y: hidden;
 	height: calc(#{$crazy-height-calculation});
 	margin: 0 -1.5rem;
 	padding: 0 1.5rem;
+	scroll-snap-type: x mandatory;
 
 	@media screen and (max-width: $tablet) {
 		height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
-		scroll-snap-type: x mandatory;
+	}
+}
+
+.kanban-bucket-container {
+	display: flex;
+}
+
+.bucket {
+	margin: 0 var(--bucket-right-margin) 0 0;
+	max-height: 100%;
+	min-height: 20px;
+	width: var(--bucket-width);
+}
+
+.ghost {
+	position: relative;
+
+	* {
+		opacity: 0;
 	}
 
-	&-bucket-container {
-		display: flex;
-	}
-
-	.ghost {
-		position: relative;
-
-		* {
-			opacity: 0;
-		}
-		&::after {
-			content: '';
-			position: absolute;
-			display: block;
-			top: 0.25rem;
-			right: 0.5rem;
-			bottom: 0.25rem;
-			left: 0.5rem;
-			border: 3px dashed var(--grey-300);
-			border-radius: $radius;
-		}
-	}
-
-	.bucket {
+	&::after {
+		content: '';
+		position: absolute;
+		display: block;
+		top: 0.25rem;
+		right: 0.5rem;
+		bottom: 0.25rem;
+		left: 0.5rem;
+		border: 3px dashed var(--grey-300);
 		border-radius: $radius;
-		position: relative;
-
-		margin: 0 $bucket-right-margin 0 0;
-		max-height: calc(100% - 1rem); // 1rem spacing to the bottom
-		min-height: 20px;
-		width: $bucket-width;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden; // Make sure the edges are always rounded
-
-		@media screen and (max-width: $tablet) {
-			scroll-snap-align: center;
-		}
-
-		.tasks {
-			overflow: hidden auto;
-			height: 100%;
-		}
-
-		.task-item {
-			background-color: var(--grey-100);
-			padding: .25rem .5rem;
-
-			&:first-of-type {
-				padding-top: .5rem;
-			}
-			&:last-of-type {
-				padding-bottom: .5rem;
-			}	
-		}
-
-		.no-move {
-			transition: transform 0s;
-		}
-
-		h2 {
-			font-size: 1rem;
-			margin: 0;
-			font-weight: 600 !important;
-		}
-
-		&.new-bucket {
-			// Because of reasons, this button ignores the margin we gave it to the right.
-			// To make it still look like it has some, we modify the container to have a padding of 1rem,
-			// which is the same as the margin it should have. Then we make the container itself bigger
-			// to hide the fact we just made the button smaller.
-			min-width: calc(#{$bucket-width} + 1rem);
-			background: transparent;
-			padding-right: 1rem;
-
-			.button {
-				background: var(--grey-100);
-				width: 100%;
-			}
-		}
-
-		&.is-collapsed {
-			align-self: flex-start;
-			transform: rotate(90deg) translateY(-100%);
-			transform-origin: top left;
-			// Using negative margins instead of translateY here to make all other buckets fill the empty space
-			margin-right: calc((#{$bucket-width} - #{$bucket-header-height} - #{$bucket-right-margin}) * -1);
-			cursor: pointer;
-
-			.tasks, .bucket-footer {
-				display: none;
-			}
-		}
 	}
+}
 
-	.bucket-header {
-		background-color: var(--grey-100);
-		height: min-content;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: .5rem;
-		height: $bucket-header-height;
+.new-bucket {
+	// Because of reasons, this button ignores the margin we gave it to the right.
+	// To make it still look like it has some, we modify the container to have a padding of 1rem,
+	// which is the same as the margin it should have. Then we make the container itself bigger
+	// to hide the fact we just made the button smaller.
+	min-width: calc(var(--bucket-width) + 1rem);
+	background: transparent;
+	padding-right: 1rem;
 
-		.limit {
-			padding: 0 .5rem;
-			font-weight: bold;
-
-			&.is-max {
-				color: var(--danger);
-			}
-		}
-
-		.title.input {
-			height: auto;
-			padding: .4rem .5rem;
-			display: inline-block;
-			cursor: pointer;
-		}
-	}
-
-	:deep(.dropdown-trigger) {
-		cursor: pointer;
-		padding: .5rem;
-	}
-
-	.bucket-footer {
-		position: sticky;
-		bottom: 0;
-		height: min-content;
-		padding: .5rem;
-		background-color: var(--grey-100);
-		border-bottom-left-radius: $radius;
-		border-bottom-right-radius: $radius;
-		transform: none;
-
-		.button {
-			background-color: transparent;
-
-			&:hover {
-				background-color: var(--white);
-			}
-		}
+	.button {
+		background: var(--grey-100);
+		width: 100%;
 	}
 }
 
@@ -806,16 +388,5 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	transition: transform 0.18s ease;
 }
 
-.move-card-move {
-	transform: rotateZ(3deg);
-	transition: transform $transition-duration;
-}
-
-.move-card-leave-from,
-.move-card-leave-to,
-.move-card-leave-active {
-	display: none;
-}
-
 @include modal-transition();
 </style>
\ No newline at end of file
-- 
2.40.1


From 193212ad054b554b8447acd698d08dd5ec120eb5 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 21 Feb 2022 16:48:59 +0100
Subject: [PATCH 2/3] feat: Kanban Buckets

# Conflicts:
#	src/features/kanban/TaskCard.vue
#	src/helpers/saveCollapsedBucketState.ts
---
 .../kanban/Bucket.vue}                        | 234 ++++-------
 src/features/kanban/BucketNew.vue             |  73 ++++
 .../kanban/TaskCard.vue}                      |   2 +-
 src/features/kanban/TaskNew.vue               |  94 +++++
 src/helpers/saveCollapsedBucketState.ts       |  24 +-
 src/models/task.ts                            |   2 +
 src/views/list/ListKanban.vue                 | 368 +++++++++---------
 7 files changed, 438 insertions(+), 359 deletions(-)
 rename src/{components/tasks/partials/KanbanBucket.vue => features/kanban/Bucket.vue} (65%)
 create mode 100644 src/features/kanban/BucketNew.vue
 rename src/{components/tasks/partials/KanbanCard.vue => features/kanban/TaskCard.vue} (98%)
 create mode 100644 src/features/kanban/TaskNew.vue

diff --git a/src/components/tasks/partials/KanbanBucket.vue b/src/features/kanban/Bucket.vue
similarity index 65%
rename from src/components/tasks/partials/KanbanBucket.vue
rename to src/features/kanban/Bucket.vue
index 4c924c9cd..917211750 100644
--- a/src/components/tasks/partials/KanbanBucket.vue
+++ b/src/features/kanban/Bucket.vue
@@ -3,15 +3,15 @@ import {ref, computed, nextTick} from 'vue'
 import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 import Draggable from 'vuedraggable'
+import { useVModels } from '@vueuse/core'
 
 import {success} from '@/message'
 import BucketModel from '@/models/bucket'
 import TaskModel from '@/models/task'
 
-import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
-
 import Dropdown from '@/components/misc/dropdown.vue'
-import KanbanCard from '@/components/tasks/partials/KanbanCard.vue'
+import KanbanCard from '@/feature/kanban/KanbanCard.vue'
+import KanbanTaskNew from '@/feature/kanban/KanbanTaskNew.vue'
 
 const MIN_SCROLL_HEIGHT_PERCENT = 0.25
 
@@ -25,33 +25,19 @@ const props = defineProps<{
 	params: Object
 	shouldAcceptDrop: boolean
 	isDraggingTask: boolean
+	tasksUpdating: { [taskId: TaskModel['id']]: boolean },
 }>()
-const emit = defineEmits(['openDeleteBucketModal', 'dragstart', 'updateTaskPosition'])
+const emit = defineEmits([
+	'openDeleteBucketModal',
+	'dragstart',
+	'dragend',
+	'update:isCollapsed',
+])
 
 const {t} = useI18n()
 const store = useStore()
 
-const loading = computed(() =>
-	store.state.loading && store.state.loadingModule === 'kanban',
-)
-
-
-const isCollapsed = ref(false)
-function collapseBucket() {
-	isCollapsed.value = true
-	// TODO:
-	// saveCollapsedBucketState(this.listId, this.collapsedBuckets)
-}
-function unCollapseBucket() {
-	if (!isCollapsed.value) {
-		return
-	}
-
-	isCollapsed.value = false
-	
-	// TODO:
-	// saveCollapsedBucketState(this.listId, this.collapsedBuckets)
-}
+const { isCollapsed } = useVModels(props, emit)
 
 const bucketTitleEditable = ref(true)
 async function saveBucketTitle(bucketTitle: string) {
@@ -138,30 +124,7 @@ function scrollTaskContainerToBottom() {
 	taskContainer.value.scrollTop = taskContainer.value.scrollHeight
 }
 
-const hasNewTaskInput = ref(false)
-function toggleShowNewTaskInput() {
-	hasNewTaskInput.value = !hasNewTaskInput.value
-}
 
-const newTaskText = ref('')
-const newTaskError = ref(false)
-
-async function addTaskToBucket() {
-	if (newTaskText.value === '') {
-		newTaskError.value = true
-		return
-	}
-	newTaskError.value = false
-
-	const task = await store.dispatch('tasks/createNewTask', {
-		title: newTaskText.value,
-		bucketId: props.bucket.id,
-		listId: props.bucket.listId,
-	})
-	newTaskText.value = ''
-	store.commit('kanban/addTaskToBucket', task)
-	scrollTaskContainerToBottom()
-}
 </script>
 
 <template>
@@ -169,7 +132,7 @@ async function addTaskToBucket() {
 		class="bucket"
 		:class="{'is-collapsed': isCollapsed}"
 	>
-		<div class="bucket-header" @click="unCollapseBucket()">
+		<div class="bucket-header" @click="isCollapsed = false">
 			<span
 				v-if="bucket.isDoneBucket"
 				class="icon is-small has-text-success mr-2"
@@ -249,7 +212,7 @@ async function addTaskToBucket() {
 				</a>
 				<a
 					class="dropdown-item"
-					@click.stop="collapseBucket()"
+					@click.stop="isCollapsed = true"
 				>
 					{{ $t('list.kanban.collapse') }}
 				</a>
@@ -272,7 +235,7 @@ async function addTaskToBucket() {
 			:modelValue="bucket.tasks"
 			@update:modelValue="updateTasks"
 			@start="emit('dragstart', bucket.id)"
-			@end="emit('updateTaskPosition', $event)"
+			@end="emit('dragend', $event)"
 			:group="{name: 'tasks', put: shouldAcceptDrop}"
 			:disabled="!canWrite"
 			:data-bucket-index="bucketIndex"
@@ -280,43 +243,24 @@ async function addTaskToBucket() {
 			:item-key="(task: TaskModel) => `bucket${bucket.id}-task${task.id}`"
 			:component-data="taskDraggableTaskComponentData"
 		>
-			<template #footer>
-				<div class="bucket-footer" v-if="canWrite">
-					<div class="field" v-if="hasNewTaskInput">
-						<div class="control" :class="{'is-loading': loading}">
-							<input
-								class="input"
-								:disabled="loading || undefined"
-								@focusout="toggleShowNewTaskInput()"
-								@keyup.esc="toggleShowNewTaskInput()"
-								@keyup.enter="addTaskToBucket()"
-								:placeholder="$t('list.kanban.addTaskPlaceholder')"
-								type="text"
-								v-focus.always
-								v-model="newTaskText"
-							/>
-						</div>
-						<p class="help is-danger" v-if="newTaskError && newTaskText === ''">
-							{{ $t('list.create.addTitleRequired') }}
-						</p>
-					</div>
-					<x-button
-						@click="toggleShowNewTaskInput()"
-						class="is-fullwidth has-text-centered"
-						:shadow="false"
-						v-else
-						icon="plus"
-						variant="secondary"
-					>
-						{{ bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask') }}
-					</x-button>
+			<template #item="{element: task}">
+				<div class="task-item">
+					<kanban-card
+						class="kanban-card" 
+						:task="task"
+						:loading="tasksUpdating[task.id]"
+					/>
 				</div>
 			</template>
 
-			<template #item="{element: task}">
-				<div class="task-item">
-					<kanban-card class="kanban-card" :task="task"/>
-				</div>
+			<template #footer>
+				<KanbanTaskNew
+					v-if="canWrite"
+					:bucketId="bucket.id"
+					:listId="bucket.listId"
+					:bucketIsEmpty="bucket.tasks.length === 0"
+					@scrollTaskContainerToBottom="scrollTaskContainerToBottom"
+				/>
 			</template>
 		</Draggable>
 	</div>
@@ -331,52 +275,54 @@ async function addTaskToBucket() {
 
 	display: flex;
 	flex-direction: column;
+}
 
-	.tasks {
-		overflow: hidden auto;
-		height: 100%;
-	}
+.is-collapsed {
+	align-self: flex-start;
+	transform: rotate(90deg) translateY(-100%);
+	transform-origin: top left;
+	// Using negative margins instead of translateY here to make all other buckets fill the empty space
+	margin-right: calc((var(--bucket-width) - var(--bucket-header-height) - var(--bucket-right-margin)) * -1);
+	cursor: pointer;
 
-	.task-item {
-		background-color: var(--grey-100);
-		padding: .25rem .5rem;
-
-		&:first-of-type {
-			padding-top: .5rem;
-		}
-		&:last-of-type {
-			padding-bottom: .5rem;
-		}	
-	}
-
-	.no-move {
-		transition: transform 0s;
-	}
-
-	h2 {
-		font-size: 1rem;
-		margin: 0;
-		font-weight: 600 !important;
-	}
-
-	a.dropdown-item {
-		padding-right: 1rem;
-	}
-
-	&.is-collapsed {
-		align-self: flex-start;
-		transform: rotate(90deg) translateY(-100%);
-		transform-origin: top left;
-		// Using negative margins instead of translateY here to make all other buckets fill the empty space
-		margin-right: calc((var(--bucket-width) - var(--bucket-header-height) - var(--bucket-right-margin)) * -1);
-		cursor: pointer;
-
-		.tasks, .bucket-footer {
-			display: none;
-		}
+	.tasks, .bucket-footer {
+		display: none;
 	}
 }
 
+.tasks {
+	overflow: hidden auto;
+	height: 100%;
+}
+
+.task-item {
+	background-color: var(--grey-100);
+	padding: .25rem .5rem;
+
+	&:first-of-type {
+		padding-top: .5rem;
+	}
+	&:last-of-type {
+		padding-bottom: .5rem;
+	}	
+}
+
+.no-move {
+	transition: transform 0s;
+}
+
+h2 {
+	font-size: 1rem;
+	margin: 0;
+	font-weight: 600 !important;
+}
+
+a.dropdown-item {
+	padding-right: 1rem;
+}
+
+
+
 .bucket-header {
 	background-color: var(--grey-100);
 	height: min-content;
@@ -385,22 +331,22 @@ async function addTaskToBucket() {
 	justify-content: space-between;
 	padding: .5rem;
 	height: var(--bucket-header-height);
+}
 
-	.limit {
-		padding: 0 .5rem;
-		font-weight: bold;
+.limit {
+	padding: 0 .5rem;
+	font-weight: bold;
 
-		&.is-max {
-			color: var(--danger);
-		}
+	&.is-max {
+		color: var(--danger);
 	}
+}
 
-	.title.input {
-		height: auto;
-		padding: .4rem .5rem;
-		display: inline-block;
-		cursor: pointer;
-	}
+.title.input {
+	height: auto;
+	padding: .4rem .5rem;
+	display: inline-block;
+	cursor: pointer;
 }
 
 :deep(.dropdown-trigger) {
@@ -412,18 +358,6 @@ async function addTaskToBucket() {
 	position: sticky;
 	bottom: 0;
 	height: min-content;
-	padding: .5rem;
-	background-color: var(--grey-100);
-	border-bottom-left-radius: $radius;
-	border-bottom-right-radius: $radius;
-
-	.button {
-		background-color: transparent;
-
-		&:hover {
-			background-color: var(--white);
-		}
-	}
 }
 
 .move-card-move {
diff --git a/src/features/kanban/BucketNew.vue b/src/features/kanban/BucketNew.vue
new file mode 100644
index 000000000..8f47f1f2a
--- /dev/null
+++ b/src/features/kanban/BucketNew.vue
@@ -0,0 +1,73 @@
+<template>
+	<div class="new-bucket">
+		<input
+			v-if="hasNewBucketInput"
+			:class="{'is-loading': loading}"
+			:disabled="loading || undefined"
+			@blur="hasNewBucketInput = false"
+			@keyup.enter="createNewBucket"
+			@keyup.esc="($event.target as HTMLInputElement).blur()"
+			class="input"
+			:placeholder="$t('list.kanban.addBucketPlaceholder')"
+			type="text"
+			v-focus.always
+			v-model="newBucketTitle"
+		/>
+		<x-button
+			v-else
+			@click="hasNewBucketInput = true"
+			:shadow="false"
+			class="is-transparent is-fullwidth has-text-centered"
+			variant="secondary"
+			icon="plus"
+		>
+			{{ $t('list.kanban.addBucket') }}
+		</x-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed} from 'vue'
+import BucketModel from '@/models/bucket'
+import {useStore} from 'vuex'
+
+const props = defineProps<{
+	listId: number
+}>()
+
+const store = useStore()
+const loading = computed(() => store.state.loading && store.state.loadingModule === 'kanban')
+
+const hasNewBucketInput = ref(false)
+
+const newBucketTitle = ref('')
+async function createNewBucket() {
+	if (newBucketTitle.value === '') {
+		return
+	}
+
+	await store.dispatch('kanban/createBucket', new BucketModel({
+		title: newBucketTitle.value,
+		listId: props.listId,
+	}))
+	newBucketTitle.value = ''
+	hasNewBucketInput.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.new-bucket {
+	// Because of reasons, this button ignores the margin we gave it to the right.
+	// To make it still look like it has some, we modify the container to have a padding of 1rem,
+	// which is the same as the margin it should have. Then we make the container itself bigger
+	// to hide the fact we just made the button smaller.
+	min-width: calc(var(--bucket-width) + 1rem);
+	background: transparent;
+	padding-right: 1rem;
+
+	.button {
+		background: var(--grey-100);
+		width: 100%;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/KanbanCard.vue b/src/features/kanban/TaskCard.vue
similarity index 98%
rename from src/components/tasks/partials/KanbanCard.vue
rename to src/features/kanban/TaskCard.vue
index 4bf4fa472..fd9cddab2 100644
--- a/src/components/tasks/partials/KanbanCard.vue
+++ b/src/features/kanban/TaskCard.vue
@@ -81,7 +81,7 @@ import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
 import User from '@/components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
 import Labels from '@/components/tasks/partials/labels.vue'
-import ChecklistSummary from './checklist-summary.vue'
+import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
 
 import {TASK_DEFAULT_COLOR, getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
diff --git a/src/features/kanban/TaskNew.vue b/src/features/kanban/TaskNew.vue
new file mode 100644
index 000000000..7465f8b77
--- /dev/null
+++ b/src/features/kanban/TaskNew.vue
@@ -0,0 +1,94 @@
+<template>
+	<div class="bucket-footer">
+		<div class="field" v-if="hasNewTaskInput">
+			<div class="control" :class="{'is-loading': loading}">
+				<input
+					class="input"
+					:disabled="loading || undefined"
+					@focusout="toggleShowNewTaskInput()"
+					@keyup.esc="toggleShowNewTaskInput()"
+					@keyup.enter="addTaskToBucket()"
+					:placeholder="$t('list.kanban.addTaskPlaceholder')"
+					type="text"
+					v-focus.always
+					v-model="newTaskText"
+				/>
+			</div>
+			<p class="help is-danger" v-if="newTaskError && newTaskText === ''">
+				{{ $t('list.create.addTitleRequired') }}
+			</p>
+		</div>
+		<x-button
+			@click="toggleShowNewTaskInput()"
+			class="is-fullwidth has-text-centered"
+			:shadow="false"
+			v-else
+			icon="plus"
+			variant="secondary"
+		>
+			{{ bucketIsEmpty  ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask') }}
+		</x-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed} from 'vue'
+import {useStore} from 'vuex'
+
+import BucketModel from '@/models/bucket'
+
+const props = defineProps<{
+	bucketId: BucketModel['id']
+	listId: BucketModel['listId']
+	bucketIsEmpty: boolean
+}>()
+
+const emit = defineEmits(['scrollTaskContainerToBottom'])
+
+const loading = computed(() =>
+	store.state.loading && store.state.loadingModule === 'kanban',
+)
+
+const hasNewTaskInput = ref(false)
+function toggleShowNewTaskInput() {
+	hasNewTaskInput.value = !hasNewTaskInput.value
+}
+
+const newTaskText = ref('')
+const newTaskError = ref(false)
+
+const store = useStore()
+async function addTaskToBucket() {
+	if (newTaskText.value === '') {
+		newTaskError.value = true
+		return
+	}
+	newTaskError.value = false
+
+	const task = await store.dispatch('tasks/createNewTask', {
+		title: newTaskText.value,
+		bucketId: props.bucketId,
+		listId: props.listId,
+	})
+	newTaskText.value = ''
+	store.commit('kanban/addTaskToBucket', task)
+	emit('scrollTaskContainerToBottom')
+}
+</script>
+
+<style lang="scss">
+.bucket-footer {
+	padding: .5rem;
+	background-color: var(--grey-100);
+	border-bottom-left-radius: $radius;
+	border-bottom-right-radius: $radius;
+
+	.button {
+		background-color: transparent;
+
+		&:hover {
+			background-color: var(--white);
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/helpers/saveCollapsedBucketState.ts b/src/helpers/saveCollapsedBucketState.ts
index f784a9190..d4f5b15b3 100644
--- a/src/helpers/saveCollapsedBucketState.ts
+++ b/src/helpers/saveCollapsedBucketState.ts
@@ -2,19 +2,17 @@ import type {IList} from '@/modelTypes/IList'
 
 const key = 'collapsedBuckets'
 
-const getAllState = () => {
+function getAllState() {
 	const saved = localStorage.getItem(key)
-	if (saved === null) {
-		return {}
-	}
-
-	return JSON.parse(saved)
+	return saved === null
+		? {}
+		: JSON.parse(saved)
 }
 
-export const saveCollapsedBucketState = (
+export function saveCollapsedBucketState(
 	listId: IList['id'],
-	collapsedBuckets,
-) => {
+	collapsedBuckets: any,
+) {
 	const state = getAllState()
 	state[listId] = collapsedBuckets
 	for (const bucketId in state[listId]) {
@@ -25,11 +23,7 @@ export const saveCollapsedBucketState = (
 	localStorage.setItem(key, JSON.stringify(state))
 }
 
-export const getCollapsedBucketState = (listId : IList['id']) => {
+export function getCollapsedBucketState(listId: IList['id']) {
 	const state = getAllState()
-	if (typeof state[listId] !== 'undefined') {
-		return state[listId]
-	}
-
-	return {}
+	return state[listId] ?? {}
 }
diff --git a/src/models/task.ts b/src/models/task.ts
index 5f4e01d70..f244dd8f1 100644
--- a/src/models/task.ts
+++ b/src/models/task.ts
@@ -133,6 +133,8 @@ export default class TaskModel extends AbstractModel<ITask> implements ITask {
 		this.updated = new Date(this.updated)
 
 		this.listId = Number(this.listId)
+		
+		this.kanbanPosition
 	}
 
 	getTextIdentifier() {
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index 2a93fab00..45772a187 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -1,95 +1,71 @@
 <template>
 	<ListWrapper class="list-kanban" :list-id="listId" viewName="kanban">
 		<template #header>
-			<div class="filter-container" v-if="isSavedFilter">
+			<div class="filter-container" v-if="!isSavedFilter">
 				<div class="items">
-					<filter-popup
-						v-model="params"
-						@update:modelValue="loadBuckets"
-					/>
+					<filter-popup v-model="params" />
 				</div>
 			</div>
 		</template>
 
 		<template #default>
-			<div class="kanban-view">
-				<div
-					:class="{ 'is-loading': loading && !oneTaskUpdating}"
-					class="kanban kanban-bucket-container loader-container"
+			<div
+				:class="{ 'is-loading': loading && !oneTaskUpdating}"
+				class="kanban kanban-bucket-container loader-container"
+			>
+				<draggable
+					v-bind="DRAG_OPTIONS"
+					:modelValue="buckets"
+					@update:modelValue="updateBuckets"
+					@start="() => isDraggingBucket = true"
+					@end="updateBucketPosition"
+					group="buckets"
+					:disabled="!canWrite"
+					tag="transition-group"
+					:item-key="(id: number) => `bucket${id}`"
+					:component-data="bucketDraggableComponentData"
 				>
-					<draggable
-						v-bind="DRAG_OPTIONS"
-						:modelValue="buckets"
-						@update:modelValue="updateBuckets"
-						@end="updateBucketPosition"
-						@start="() => isDraggingBucket = true"
-						group="buckets"
-						:disabled="!canWrite"
-						tag="transition-group"
-						:item-key="(id: number) => `bucket${id}`"
-						:component-data="bucketDraggableComponentData"
-					>
-						<template #item="{element: bucket, index: bucketIndex }">
-							<KanbanBucket
-								class="bucket"
-								:bucket-index="bucketIndex"
-								:is-collapsed="collapsedBuckets[bucket.id]"
-								:can-write="canWrite"
-								:bucket="bucket"
-								:isOnlyBucketLeft="buckets.length <= 1"
-								:drag-options="DRAG_OPTIONS"
-								:params="params"
-								:should-accept-drop="shouldAcceptDrop(bucket)"
-								:isDraggingTask="isDraggingTask"
-								@dragstart="dragstart"
-								@updateTaskPosition="updateTaskPosition"
-								@openDeleteBucketModal="openDeleteBucketModal"
-							/>
-						</template>
-					</draggable>
-
-					<div class="bucket new-bucket" v-if="canWrite && !loading && buckets.length > 0">
-						<input
-							v-if="hasNewBucketInput"
-							:class="{'is-loading': loading}"
-							:disabled="loading || null"
-							@blur="hasNewBucketInput = false"
-							@keyup.enter="createNewBucket"
-							@keyup.esc="($event.target as HTMLInputElement).blur()"
-							class="input"
-							:placeholder="$t('list.kanban.addBucketPlaceholder')"
-							type="text"
-							v-focus.always
-							v-model="newBucketTitle"
+					<template #item="{element: bucket, index: bucketIndex }">
+						<Bucket
+							class="bucket"
+							:bucket-index="bucketIndex"
+							:is-collapsed="collapsedBuckets[bucket.id]"
+							:can-write="canWrite"
+							:bucket="bucket"
+							:isOnlyBucketLeft="buckets.length <= 1"
+							:drag-options="DRAG_OPTIONS"
+							:params="params"
+							:should-accept-drop="shouldAcceptDrop(bucket)"
+							:isDraggingTask="isDraggingTask"
+							:taskUpdating="tasksUpdating"
+							@dragstart="dragstart"
+							@dragend="updateTaskPosition"
+							@openDeleteBucketModal="openDeleteBucketModal"
 						/>
-						<x-button
-							v-else
-							@click="hasNewBucketInput = true"
-							:shadow="false"
-							class="is-transparent is-fullwidth has-text-centered"
-							variant="secondary"
-							icon="plus"
-						>
-							{{ $t('list.kanban.addBucket') }}
-						</x-button>
-					</div>
-				</div>
+					</template>
+				</draggable>
 
-				<transition name="modal">
-					<modal
-						v-if="hasBucketDeleteModal"
-						@close="hasBucketDeleteModal = false"
-						@submit="deleteBucket()"
-					>
-						<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
-
-						<template #text>
-							<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
-								{{ $t('list.kanban.deleteBucketText2') }}</p>
-						</template>
-					</modal>
-				</transition>
+				<BucketNew
+					v-if="canWrite && !loading && buckets.length > 0"
+					class="bucket"
+					:listId="listId"
+				/>
 			</div>
+
+			<transition name="modal">
+				<modal
+					v-if="hasBucketDeleteModal"
+					@close="hasBucketDeleteModal = false"
+					@submit="deleteBucket()"
+				>
+					<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
+
+					<template #text>
+						<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
+							{{ $t('list.kanban.deleteBucketText2') }}</p>
+					</template>
+				</modal>
+			</transition>
 		</template>
 	</ListWrapper>
 </template>
@@ -101,16 +77,19 @@ import cloneDeep from 'lodash.clonedeep'
 import {useI18n} from 'vue-i18n'
 import {SortableEvent} from 'sortablejs'
 
-import { success } from '@/message'
+import {success} from '@/message'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
+import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
 
+import ListModel from '@/models/list'
 import BucketModel from '@/models/bucket'
 import TaskModel from '@/models/task'
 import Rights from '@/models/constants/rights.json'
 
 import ListWrapper from './ListWrapper.vue'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
-import KanbanBucket from '@/components/tasks/partials/KanbanBucket.vue'
+import Bucket from '@/features/kanban/Bucket.vue'
+import BucketNew from '@/features/kanban/BucketNew.vue'
 
 const DRAG_OPTIONS = {
 	// sortable options
@@ -127,7 +106,16 @@ const props = defineProps<{
 
 const {t} = useI18n()
 
-const collapsedBuckets = ref({})
+/**
+ * Load collapsed Buckets
+ */
+
+const collapsedBuckets = ref<{ [listId: number]: any}>({})
+watch(collapsedBuckets, (collapsedBuckets) => saveCollapsedBucketState(props.listId, collapsedBuckets))
+
+/**
+ * Load Bucket Data
+ */
 
 const params = ref({
 	filter_by: [],
@@ -136,95 +124,53 @@ const params = ref({
 	filter_concat: 'and',
 })
 
-interface LoadBucketsParams {
-	listId: number,
-	params: Object
-}
-
 watch(() => ({
 	listId: props.listId,
 	params: params.value,
-} as LoadBucketsParams), loadBuckets, {immediate: true})
-
-function loadBuckets({listId, params} : LoadBucketsParams) {
+}), ({listId, params}) => {
 	store.dispatch('kanban/loadBucketsForList', {listId, params})
 	collapsedBuckets.value = getCollapsedBucketState(listId)
-}
+}, {immediate: true, deep: true})
 
-const isSavedFilter = computed(() => list.value.isSavedFilter && !list.value.isSavedFilter())
+const list = computed(() => store.state.currentList as ListModel)
 
-const buckets = computed(() => store.state.kanban.buckets)
+const buckets = computed({
+	get: () => store.state.kanban.buckets,
+	set(value: BucketModel[]) {
+		// (1) buckets get updated in store and tasks positions get invalidated
+		store.commit('kanban/setBuckets', value)
+	},
+})
 
-const loading = computed(() => store.state.loading && store.state.loadingModule === 'kanban')
-// const taskLoading = computed(() => store.state.loading && store.state.loadingModule === 'tasks') // unused ?
+
+/**
+ * Template helpers
+ */
+
+const isSavedFilter = computed(() => list.value.isSavedFilter && list.value.isSavedFilter())
 const canWrite = computed(() => store.state.currentList.maxRight > Rights.READ)
-const list = computed(() => store.state.currentList)
+const loading = computed(() => store.state.loading && store.state.loadingModule === 'kanban')
 
+// FIXME: seems unused ?
+// const taskLoading = computed(() => store.state.loading && store.state.loadingModule === 'tasks')
+
+/**
+ * Manage list of updateing tasks
+ */
+
+// FIXME: save globally if a specific task is updated.
 // We're using this to show the loading animation only at the task when updating it
-const taskUpdating = ref<{ [id: TaskModel['id']]: boolean }>({})
-const oneTaskUpdating = ref(false)
+const tasksUpdating = ref<{ [taskId: TaskModel['id']]: boolean }>({})
 
-const isDraggingTask = ref(false)
-
-async function updateTaskPosition(e) {
-	isDraggingTask.value = false
-
-	// While we could just pass the bucket index in through the function call, this would not give us the 
-	// new bucket id when a task has been moved between buckets, only the new bucket. Using the data-bucket-id
-	// of the drop target works all the time.
-	const bucketIndex = parseInt(e.to.dataset.bucketIndex)
-
-	const newBucket = buckets.value[bucketIndex]
-
-	// HACK:
-	// this is a hacky workaround for a known problem of vue.draggable.next when using the footer slot
-	// the problem: https://github.com/SortableJS/vue.draggable.next/issues/108
-	// This hack doesn't remove the problem that the ghost item is still displayed below the footer
-	// It just makes releasing the item possible.
-
-	// The newIndex of the event doesn't count in the elements of the footer slot.
-	// This is why in case the length of the tasks is identical with the newIndex
-	// we have to remove 1 to get the correct index.
-	const newTaskIndex = newBucket.tasks.length === e.newIndex
-		? e.newIndex - 1
-		: e.newIndex
-
-	const taskBefore = newBucket.tasks[newTaskIndex - 1] ?? null
-	const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null
-
-	const task = {
-		// cloning the task to avoid vuex store mutations
-		...cloneDeep(newBucket.tasks[newTaskIndex]),
-		bucketId: newBucket.id,
-		kanbanPosition: calculateItemPosition(
-			taskBefore !== null ? taskBefore.kanbanPosition : null,
-			taskAfter !== null ? taskAfter.kanbanPosition : null,
-		),
-	}
-
-	try {
-		await store.dispatch('tasks/update', task)
-	} finally {
-		taskUpdating.value[task.id] = false
-		oneTaskUpdating.value = false
-	}
+function setTaskUpdating(id: TaskModel['id'], isUpdating: boolean) {
+	tasksUpdating.value[id] = isUpdating
 }
 
-const hasNewBucketInput = ref(false)
+const oneTaskUpdating = computed(() => Object.values(tasksUpdating.value).some((isUpdating) => isUpdating))
 
-const newBucketTitle = ref('')
-async function createNewBucket() {
-	if (newBucketTitle.value === '') {
-		return
-	}
-
-	await store.dispatch('kanban/createBucket', new BucketModel({
-		title: newBucketTitle.value,
-		listId: props.listId,
-	}))
-	newBucketTitle.value = ''
-	hasNewBucketInput.value = false
-}
+/**
+ * Delete Bucket
+ */
 
 const bucketToDeleteId = ref<BucketModel['id']>(0)
 const hasBucketDeleteModal = ref(false)
@@ -253,6 +199,10 @@ async function deleteBucket() {
 	}
 }
 
+/**
+ * Move / Drag Bucket
+ */
+
 const isDraggingBucket = ref(false)
 const bucketDraggableComponentData = computed(() => ({
 	type: 'transition',
@@ -264,18 +214,13 @@ const bucketDraggableComponentData = computed(() => ({
 	],
 }))
 
-function updateBuckets(value: BucketModel[]) {
-	// (1) buckets get updated in store and tasks positions get invalidated
-	store.commit('kanban/setBuckets', value)
-}
-
-function updateBucketPosition(e) {
+function updateBucketPosition({newDraggableIndex}: SortableEvent) {
 	// (2) bucket positon is changed
 	isDraggingBucket.value = false
 
-	const bucket = buckets.value[e.newIndex]
-	const bucketBefore = buckets.value[e.newIndex - 1] ?? null
-	const bucketAfter = buckets.value[e.newIndex + 1] ?? null
+	const bucket = buckets.value[newDraggableIndex]
+	const bucketBefore = buckets.value[newDraggableIndex - 1] ?? null
+	const bucketAfter = buckets.value[newDraggableIndex + 1] ?? null
 
 	store.dispatch('kanban/updateBucket', {
 		id: bucket.id,
@@ -286,11 +231,15 @@ function updateBucketPosition(e) {
 	})
 }
 
-const sourceBucketId = ref(0)
+/**
+ * Move / Drag Task
+ */
+
+const sourceBucketId = ref<number>()
 
 function shouldAcceptDrop(bucket: BucketModel) {
 	return !isDraggingBucket.value && (
-		// When dragging from a bucket who has its limit reached, dragging should still be possible
+		// It's always possible to drag a task inside the same a bucket
 		bucket.id === sourceBucketId.value ||
 		// If there is no limit set, dragging & dropping should always work
 		bucket.limit === 0 ||
@@ -299,10 +248,62 @@ function shouldAcceptDrop(bucket: BucketModel) {
 	)
 }
 
+const isDraggingTask = ref(false)
+
 function dragstart(bucketId: BucketModel['id']) {
 	isDraggingTask.value = true
 	sourceBucketId.value = bucketId
 }
+
+
+async function updateTaskPosition({newDraggableIndex, to}: SortableEvent) {
+	isDraggingTask.value = false
+
+	// FIXME: Cases
+	// e.to.dataset.bucketIndex === undefined
+	// e.newIndex === undefined
+
+	// While we could just pass the bucket index in through the function call, this would not give us the 
+	// new bucket id when a task has been moved between buckets, only the new bucket. Using the data-bucket-id
+	// of the drop target works all the time.
+	const bucketIndex = parseInt(to.dataset.bucketIndex)
+
+	const newBucket = buckets.value[bucketIndex]
+
+	// HACK:
+	// this is a hacky workaround for a known problem of vue.draggable.next when using the footer slot
+	// the problem: https://github.com/SortableJS/vue.draggable.next/issues/108
+	// This hack doesn't remove the problem that the ghost item is still displayed below the footer
+	// It just makes releasing the item possible.
+
+	// The newIndex of the event doesn't count in the elements of the footer slot.
+	// This is why in case the length of the tasks is identical with the newIndex
+	// we have to remove 1 to get the correct index.
+	// const newTaskIndex = newBucket.tasks.length === e.newIndex
+	// 	? e.newIndex - 1
+	// 	: e.newIndex
+
+	const taskBefore = newBucket.tasks[newDraggableIndex - 1] ?? null
+	const taskAfter = newBucket.tasks[newDraggableIndex + 1] ?? null
+
+	const task = {
+		// cloning the task to avoid vuex store mutations
+		...cloneDeep(newBucket.tasks[newDraggableIndex]),
+		bucketId: newBucket.id,
+		kanbanPosition: calculateItemPosition(
+			taskBefore !== null ? taskBefore.kanbanPosition : null,
+			taskAfter !== null ? taskAfter.kanbanPosition : null,
+		),
+	} as TaskModel
+	
+	setTaskUpdating(task.id, false)
+
+	try {
+		await store.dispatch('tasks/update', task)
+	} finally {
+		setTaskUpdating(task.id, false)
+	}
+}
 </script>
 
 
@@ -312,28 +313,25 @@ function dragstart(bucketId: BucketModel['id']) {
 .app-content.list\.kanban {
 	padding-bottom: 0 !important;
 }
-</style>
 
-<style lang="scss">
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 
-$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
-$crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem';
-$filter-container-height: '1rem - #{$switch-view-height}';
+// $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
+// $filter-container-height: '1rem - #{$switch-view-height}';
 
 .kanban {
 	--bucket-width: 300px;
 	--bucket-right-margin: 1rem;
 	overflow-x: auto;
 	overflow-y: hidden;
-	height: calc(#{$crazy-height-calculation});
+	// height: calc(#{$crazy-height-calculation});
 	margin: 0 -1.5rem;
 	padding: 0 1.5rem;
 	scroll-snap-type: x mandatory;
 
-	@media screen and (max-width: $tablet) {
-		height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
-	}
+	// @media screen and (max-width: $tablet) {
+	// 	height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
+	// }
 }
 
 .kanban-bucket-container {
@@ -341,7 +339,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 }
 
 .bucket {
-	margin: 0 var(--bucket-right-margin) 0 0;
+	margin-right: var(--bucket-right-margin);
 	max-height: 100%;
 	min-height: 20px;
 	width: var(--bucket-width);
@@ -367,22 +365,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	}
 }
 
-.new-bucket {
-	// Because of reasons, this button ignores the margin we gave it to the right.
-	// To make it still look like it has some, we modify the container to have a padding of 1rem,
-	// which is the same as the margin it should have. Then we make the container itself bigger
-	// to hide the fact we just made the button smaller.
-	min-width: calc(var(--bucket-width) + 1rem);
-	background: transparent;
-	padding-right: 1rem;
-
-	.button {
-		background: var(--grey-100);
-		width: 100%;
-	}
-}
-
-// FIXME: This does not seem to work
 .task-dragging {
 	transform: rotateZ(3deg);
 	transition: transform 0.18s ease;
-- 
2.40.1


From d6970bdd6dca5a36aa35d2c2a5511a795e95f721 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Thu, 27 Oct 2022 16:52:15 +0200
Subject: [PATCH 3/3] fix: move templates at top of sfc files

---
 src/features/kanban/Bucket.vue | 262 ++++++++++++++++-----------------
 1 file changed, 131 insertions(+), 131 deletions(-)

diff --git a/src/features/kanban/Bucket.vue b/src/features/kanban/Bucket.vue
index 917211750..9434c5a94 100644
--- a/src/features/kanban/Bucket.vue
+++ b/src/features/kanban/Bucket.vue
@@ -1,132 +1,3 @@
-<script setup lang="ts">
-import {ref, computed, nextTick} from 'vue'
-import {useStore} from 'vuex'
-import {useI18n} from 'vue-i18n'
-import Draggable from 'vuedraggable'
-import { useVModels } from '@vueuse/core'
-
-import {success} from '@/message'
-import BucketModel from '@/models/bucket'
-import TaskModel from '@/models/task'
-
-import Dropdown from '@/components/misc/dropdown.vue'
-import KanbanCard from '@/feature/kanban/KanbanCard.vue'
-import KanbanTaskNew from '@/feature/kanban/KanbanTaskNew.vue'
-
-const MIN_SCROLL_HEIGHT_PERCENT = 0.25
-
-const props = defineProps<{
-	bucketIndex: number
-	isCollapsed: boolean
-	canWrite: boolean
-	bucket: BucketModel
-	isOnlyBucketLeft: boolean
-	dragOptions: Object
-	params: Object
-	shouldAcceptDrop: boolean
-	isDraggingTask: boolean
-	tasksUpdating: { [taskId: TaskModel['id']]: boolean },
-}>()
-const emit = defineEmits([
-	'openDeleteBucketModal',
-	'dragstart',
-	'dragend',
-	'update:isCollapsed',
-])
-
-const {t} = useI18n()
-const store = useStore()
-
-const { isCollapsed } = useVModels(props, emit)
-
-const bucketTitleEditable = ref(true)
-async function saveBucketTitle(bucketTitle: string) {
-		await store.dispatch('kanban/updateBucketTitle', {
-			id: props.bucket.id,
-			title: bucketTitle,
-		})
-		bucketTitleEditable.value = false
-		success({message: t('list.kanban.bucketTitleSavedSuccess')})
-}
-
-async function focusBucketTitle(e: Event) {
-	// This little helper allows us to drag a bucket around at the title without focusing on it right away.
-	bucketTitleEditable.value = true
-	await nextTick();
-	
-	(e.target as HTMLInputElement).focus()
-}
-
-const hasLimitInput = ref(false)
-
-async function setBucketLimit(limit: number) {
-	if (limit < 0) {
-		return
-	}
-
-	await store.dispatch('kanban/updateBucket', {
-		...props.bucket,
-		limit,
-	})
-	success({message: t('list.kanban.bucketLimitSavedSuccess')})
-}
-
-async function toggleDoneBucket() {
-	await store.dispatch('kanban/updateBucket', {
-		...props.bucket,
-		isDoneBucket: !props.bucket.isDoneBucket,
-	})
-	success({message: t('list.kanban.doneBucketSavedSuccess')})
-}
-
-function updateTasks(tasks: TaskModel[]) {
-	store.commit('kanban/setBucketById', {
-		...props.bucket,
-		tasks,
-	})
-}
-
-function handleTaskContainerScroll(el: HTMLElement) {
-	if (!el) {
-		return
-	}
-	const scrollTopMax = el.scrollHeight - el.clientHeight
-	const threshold = el.scrollTop + el.scrollTop * MIN_SCROLL_HEIGHT_PERCENT
-	if (scrollTopMax > threshold) {
-		return
-	}
-
-	store.dispatch('kanban/loadNextTasksForBucket', {
-		listId: props.bucket.listId,
-		params: props.params,
-		bucketId: props.bucket.id,
-	})
-}
-
-const taskContainer = ref<HTMLElement>()
-
-const taskDraggableTaskComponentData = computed(() => ({
-	ref: 'taskContainer',
-	onScroll: (event: Event) => handleTaskContainerScroll(event.target as HTMLElement),
-	type: 'transition',
-	tag: 'div',
-	name: !props.isDraggingTask ? 'move-card' : null,
-	class: [
-		'tasks',
-		{'dragging-disabled': !props.canWrite},
-	],
-}))
-
-function scrollTaskContainerToBottom() {
-	if (!taskContainer.value) {
-		return
-	}
-	taskContainer.value.scrollTop = taskContainer.value.scrollHeight
-}
-
-
-</script>
-
 <template>
 	<div
 		class="bucket"
@@ -245,7 +116,7 @@ function scrollTaskContainerToBottom() {
 		>
 			<template #item="{element: task}">
 				<div class="task-item">
-					<kanban-card
+					<TaskCard
 						class="kanban-card" 
 						:task="task"
 						:loading="tasksUpdating[task.id]"
@@ -254,7 +125,7 @@ function scrollTaskContainerToBottom() {
 			</template>
 
 			<template #footer>
-				<KanbanTaskNew
+				<TaskNew
 					v-if="canWrite"
 					:bucketId="bucket.id"
 					:listId="bucket.listId"
@@ -266,6 +137,135 @@ function scrollTaskContainerToBottom() {
 	</div>
 </template>
 
+<script setup lang="ts">
+import {ref, computed, nextTick} from 'vue'
+import {useStore} from 'vuex'
+import {useI18n} from 'vue-i18n'
+import Draggable from 'vuedraggable'
+import { useVModels } from '@vueuse/core'
+
+import {success} from '@/message'
+import BucketModel from '@/models/bucket'
+import TaskModel from '@/models/task'
+
+import Dropdown from '@/components/misc/dropdown.vue'
+import TaskCard from '@/features/kanban/TaskCard.vue'
+import TaskNew from '@/features/kanban/TaskNew.vue'
+
+const MIN_SCROLL_HEIGHT_PERCENT = 0.25
+
+const props = defineProps<{
+	bucketIndex: number
+	isCollapsed: boolean
+	canWrite: boolean
+	bucket: BucketModel
+	isOnlyBucketLeft: boolean
+	dragOptions: Object
+	params: Object
+	shouldAcceptDrop: boolean
+	isDraggingTask: boolean
+	tasksUpdating: { [taskId: TaskModel['id']]: boolean },
+}>()
+const emit = defineEmits([
+	'openDeleteBucketModal',
+	'dragstart',
+	'dragend',
+	'update:isCollapsed',
+])
+
+const {t} = useI18n()
+const store = useStore()
+
+const { isCollapsed } = useVModels(props, emit)
+
+const bucketTitleEditable = ref(true)
+async function saveBucketTitle(bucketTitle: string) {
+		await store.dispatch('kanban/updateBucketTitle', {
+			id: props.bucket.id,
+			title: bucketTitle,
+		})
+		bucketTitleEditable.value = false
+		success({message: t('list.kanban.bucketTitleSavedSuccess')})
+}
+
+async function focusBucketTitle(e: Event) {
+	// This little helper allows us to drag a bucket around at the title without focusing on it right away.
+	bucketTitleEditable.value = true
+	await nextTick();
+	
+	(e.target as HTMLInputElement).focus()
+}
+
+const hasLimitInput = ref(false)
+
+async function setBucketLimit(limit: number) {
+	if (limit < 0) {
+		return
+	}
+
+	await store.dispatch('kanban/updateBucket', {
+		...props.bucket,
+		limit,
+	})
+	success({message: t('list.kanban.bucketLimitSavedSuccess')})
+}
+
+async function toggleDoneBucket() {
+	await store.dispatch('kanban/updateBucket', {
+		...props.bucket,
+		isDoneBucket: !props.bucket.isDoneBucket,
+	})
+	success({message: t('list.kanban.doneBucketSavedSuccess')})
+}
+
+function updateTasks(tasks: TaskModel[]) {
+	store.commit('kanban/setBucketById', {
+		...props.bucket,
+		tasks,
+	})
+}
+
+function handleTaskContainerScroll(el: HTMLElement) {
+	if (!el) {
+		return
+	}
+	const scrollTopMax = el.scrollHeight - el.clientHeight
+	const threshold = el.scrollTop + el.scrollTop * MIN_SCROLL_HEIGHT_PERCENT
+	if (scrollTopMax > threshold) {
+		return
+	}
+
+	store.dispatch('kanban/loadNextTasksForBucket', {
+		listId: props.bucket.listId,
+		params: props.params,
+		bucketId: props.bucket.id,
+	})
+}
+
+const taskContainer = ref<HTMLElement>()
+
+const taskDraggableTaskComponentData = computed(() => ({
+	ref: 'taskContainer',
+	onScroll: (event: Event) => handleTaskContainerScroll(event.target as HTMLElement),
+	type: 'transition',
+	tag: 'div',
+	name: !props.isDraggingTask ? 'move-card' : null,
+	class: [
+		'tasks',
+		{'dragging-disabled': !props.canWrite},
+	],
+}))
+
+function scrollTaskContainerToBottom() {
+	if (!taskContainer.value) {
+		return
+	}
+	taskContainer.value.scrollTop = taskContainer.value.scrollHeight
+}
+
+
+</script>
+
 <style lang="scss" scoped>
 .bucket {
 	--bucket-header-height: 60px;
-- 
2.40.1