fix: move templates at top of sfc files
continuous-integration/drone/pr Build is failing
Details
continuous-integration/drone/pr Build is failing
Details
This commit is contained in:
parent
193212ad05
commit
d6970bdd6d
GPG Key ID:
B257AC0149F43A77
|
|
@ -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;
|
||||
|
|
|
|||
Reference in New Issue