fix: move templates at top of sfc files
Some checks failed
continuous-integration/drone/pr Build is failing
Some checks failed
continuous-integration/drone/pr Build is failing
This commit is contained in:
parent
193212ad05
commit
d6970bdd6d
|
@ -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>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="bucket"
|
class="bucket"
|
||||||
|
@ -245,7 +116,7 @@ function scrollTaskContainerToBottom() {
|
||||||
>
|
>
|
||||||
<template #item="{element: task}">
|
<template #item="{element: task}">
|
||||||
<div class="task-item">
|
<div class="task-item">
|
||||||
<kanban-card
|
<TaskCard
|
||||||
class="kanban-card"
|
class="kanban-card"
|
||||||
:task="task"
|
:task="task"
|
||||||
:loading="tasksUpdating[task.id]"
|
:loading="tasksUpdating[task.id]"
|
||||||
|
@ -254,7 +125,7 @@ function scrollTaskContainerToBottom() {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<KanbanTaskNew
|
<TaskNew
|
||||||
v-if="canWrite"
|
v-if="canWrite"
|
||||||
:bucketId="bucket.id"
|
:bucketId="bucket.id"
|
||||||
:listId="bucket.listId"
|
:listId="bucket.listId"
|
||||||
|
@ -266,6 +137,135 @@ function scrollTaskContainerToBottom() {
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<style lang="scss" scoped>
|
||||||
.bucket {
|
.bucket {
|
||||||
--bucket-header-height: 60px;
|
--bucket-header-height: 60px;
|
||||||
|
|
Reference in New Issue
Block a user