ami/tl-vikunja
1
0
Fork 0
Code

feat(kanban): debounce bucket limit setting

Browse Source
This commit is contained in:
kolaente 2024-02-12 17:05:48 +01:00
parent ef30868514
commit 8c6d98bb02
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/views/project/ProjectKanban.vue
View File

@ -82,14 +82,15 @@
> >
<div class="control"> <div class="control">
<input <input
ref="bucketLimitInputRef"
v-focus.always v-focus.always
:value="bucket.limit" :value="bucket.limit"
class="input" class="input"
type="number" type="number"
min="0" min="0"
@keyup.esc="() => showSetLimitInput = false" @keyup.esc="() => showSetLimitInput = false"
@keyup.enter="() => showSetLimitInput = false" @keyup.enter="() => {setBucketLimit(bucket.id, true); showSetLimitInput = false}"
@input="(event) => setBucketLimit(bucket.id, parseInt((event.target as HTMLInputElement).value))" @input="setBucketLimit(bucket.id)"
> >
</div> </div>
<div class="control"> <div class="control">
@ -98,6 +99,7 @@
:disabled="bucket.limit < 0" :disabled="bucket.limit < 0"
:icon="['far', 'save']" :icon="['far', 'save']"
:shadow="false" :shadow="false"
@click="setBucketLimit(bucket.id, true)"
/> />
</div> </div>
</div> </div>
@ -320,6 +322,7 @@ const taskStore = useTaskStore()
const projectStore = useProjectStore() const projectStore = useProjectStore()
const taskContainerRefs = ref<{[id: IBucket['id']]: HTMLElement}>({}) const taskContainerRefs = ref<{[id: IBucket['id']]: HTMLElement}>({})
const bucketLimitInputRef = ref<HTMLInputElement | null>(null)
const drag = ref(false) const drag = ref(false)
const dragBucket = ref(false) const dragBucket = ref(false)
@ -615,7 +618,7 @@ function updateBucketPosition(e: {newIndex: number}) {
}) })
} }
async function setBucketLimit(bucketId: IBucket['id'], limit: number) { async function saveBucketLimit(bucketId: IBucket['id'], limit: number) {
if (limit < 0) { if (limit < 0) {
return return
} }
@ -627,6 +630,22 @@ async function setBucketLimit(bucketId: IBucket['id'], limit: number) {
success({message: t('project.kanban.bucketLimitSavedSuccess')}) success({message: t('project.kanban.bucketLimitSavedSuccess')})
} }
const setBucketLimitCancel = ref<number|null>(null)
async function setBucketLimit(bucketId: IBucket['id'], now: boolean = false) {
const limit = parseInt(bucketLimitInputRef.value?.value || '')
if (setBucketLimitCancel.value !== null) {
clearTimeout(setBucketLimitCancel.value)
}
if (now) {
return saveBucketLimit(bucketId, limit)
}
setBucketLimitCancel.value = setTimeout(saveBucketLimit, 2500, bucketId, limit)
}
function shouldAcceptDrop(bucket: IBucket) { function shouldAcceptDrop(bucket: IBucket) {
return ( return (
// When dragging from a bucket who has its limit reached, dragging should still be possible // When dragging from a bucket who has its limit reached, dragging should still be possible