Browse Source

feat(nc-gui): add draggable for kanban stacks and cards

pull/3818/head
Wing-Kam Wong 2 years ago
parent
commit
e977f0c1d1
  1. 203
      packages/nc-gui/components/smartsheet/Kanban.vue

203
packages/nc-gui/components/smartsheet/Kanban.vue

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import Draggable from 'vuedraggable'
import { isVirtualCol } from 'nocodb-sdk' import { isVirtualCol } from 'nocodb-sdk'
import { inject, provide, useViewData } from '#imports' import { inject, provide, useViewData } from '#imports'
import Row from '~/components/smartsheet/Row.vue' import Row from '~/components/smartsheet/Row.vue'
@ -85,6 +86,8 @@ const attachments = (record: any): Array<Attachment> => {
const reloadAttachments = ref(false) const reloadAttachments = ref(false)
const drag = ref(false)
reloadViewDataHook?.on(async () => { reloadViewDataHook?.on(async () => {
await loadData() await loadData()
await loadKanbanData() await loadKanbanData()
@ -108,106 +111,132 @@ const expandFormClick = async (e: MouseEvent, row: RowType) => {
} }
} }
function onMove(event: any) {
const { newIndex, element, oldIndex } = event.added || event.moved || event.removed
// TODO:
}
openNewRecordFormHook?.on(async () => { openNewRecordFormHook?.on(async () => {
const newRow = await addEmptyRow() const newRow = await addEmptyRow()
expandForm(newRow) expandForm(newRow)
}) })
const stacks = ref<any[]>([])
stacks.value = Object.keys(formattedKanbanData)
watch(formattedKanbanData, (v) => {
if (v) {
stacks.value = Object.keys(v).map((o, idx) => ({ key: o, idx }))
}
})
</script> </script>
<template> <template>
<div v-if="formattedKanbanData" class="flex h-full"> <!-- TODO: add loading component when formattedKanbanData is not ready -->
<div v-if="stacks && formattedKanbanData" class="flex h-full">
<div class="nc-kanban-container flex grid gap-2 my-4 px-3"> <div class="nc-kanban-container flex grid gap-2 my-4 px-3">
<!-- TODO: add loading component when formattedKanbanData is not ready --> <Draggable v-model="stacks" class="flex gap-5" item-key="idx" group="kanban-stack" draggable=".nc-kanban-stack">
<!-- TODO: the whole stack should be draggable --> <template #item="{ element: stack }">
<a-card <a-card :key="stack.idx" class="nc-kanban-stack mx-4" head-style="padding-bottom: 0px;" body-style="padding: 0px 20px;">
v-for="kanbanDataKey in Object.keys(formattedKanbanData)" <template #title>
:key="kanbanDataKey" <div class="nc-kanban-stack-head">{{ stack.key }}</div>
class="nc-kanban-stack" </template>
head-style="padding-bottom: 0px;" <div class="nc-kanban-list flex flex-col">
body-style="padding: 0px 20px;" <Draggable
> v-model="formattedKanbanData[stack.key]"
<template #title> item-key="row.Id"
<div class="nc-kanban-stack-head"> draggable=".nc-kanban-item"
{{ kanbanDataKey }} group="kanban-card"
</div> class="h-full"
</template> @change="onMove($event)"
<div class="nc-kanban-list flex flex-col"> @start="drag = true"
<div v-for="record in formattedKanbanData[kanbanDataKey]" :key="`record-${record.row.id}`" class="py-2"> @end="drag = false"
<Row :row="record">
<a-card
hoverable
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
@click="expandFormClick($event, record)"
> >
<template #cover> <template #item="{ element: record, index }">
<a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows> <div class="nc-kanban-item py-2">
<template #customPaging> <Row :row="record">
<a> <a-card
<div class="pt-[12px]"><div></div></div> hoverable
</a> class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
</template> @click="expandFormClick($event, record)"
<template #prevArrow> >
<div style="z-index: 1"></div> <template #cover>
</template> <a-carousel
<template #nextArrow> v-if="!reloadAttachments && attachments(record).length"
<div style="z-index: 1"></div> autoplay
</template> class="gallery-carousel"
<img arrows
v-for="(attachment, index) in attachments(record)" >
:key="`carousel-${record.row.id}-${index}`" <template #customPaging>
class="h-52" <a>
:src="attachment.url" <div class="pt-[12px]"><div></div></div>
/> </a>
</a-carousel> </template>
</template> <template #prevArrow>
<div style="z-index: 1"></div>
</template>
<template #nextArrow>
<div style="z-index: 1"></div>
</template>
<img
v-for="(attachment, index) in attachments(record)"
:key="`carousel-${record.row.id}-${index}`"
class="h-52"
:src="attachment.url"
/>
</a-carousel>
</template>
<div <div
v-for="col in fieldsWithoutCover" v-for="col in fieldsWithoutCover"
:key="`record-${record.row.id}-${col.id}`" :key="`record-${record.row.id}-${col.id}`"
class="flex flex-col space-y-1 px-2 mb-3 bg-gray-50 rounded-lg w-full" class="flex flex-col space-y-1 px-2 mb-3 bg-gray-50 rounded-lg w-full"
> >
<div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5"> <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
<div class="w-full text-gray-600"> <div class="w-full text-gray-600">
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" /> <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
<SmartsheetHeaderCell v-else :column="col" :hide-menu="true" /> <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
</div> </div>
</div> </div>
<div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start"> <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
<div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div> <div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
<template v-else> <template v-else>
<SmartsheetVirtualCell <SmartsheetVirtualCell
v-if="isVirtualCol(col)" v-if="isVirtualCol(col)"
v-model="record.row[col.title]" v-model="record.row[col.title]"
:column="col" :column="col"
:row="record" :row="record"
/> />
<SmartsheetCell <SmartsheetCell
v-else v-else
v-model="record.row[col.title]" v-model="record.row[col.title]"
:column="col" :column="col"
:edit-enabled="false" :edit-enabled="false"
:read-only="true" :read-only="true"
/> />
</template> </template>
</div>
</div>
</a-card>
</Row>
</div> </div>
</div> </template>
</a-card> </Draggable>
</Row>
</div>
</div>
<a-card-meta>
<template #description>
<div class="mt-5 text-center">
<mdi-plus class="text-pint-500 text-lg text-primary cursor-pointer" @click="openNewRecordFormHook.trigger()" />
<div class="nc-kanban-data-count">
{{ formattedKanbanData[kanbanDataKey].length }}
{{ formattedKanbanData[kanbanDataKey].length !== 1 ? $t('objects.records') : $t('objects.record') }}
</div>
</div> </div>
</template> <a-card-meta>
</a-card-meta> <template #description>
</a-card> <div class="mt-5 text-center">
<mdi-plus class="text-pint-500 text-lg text-primary cursor-pointer" @click="openNewRecordFormHook.trigger()" />
<div class="nc-kanban-data-count">
{{ formattedKanbanData[stack.key].length }}
{{ formattedKanbanData[stack.key].length !== 1 ? $t('objects.records') : $t('objects.record') }}
</div>
</div>
</template>
</a-card-meta>
</a-card>
</template>
</Draggable>
</div> </div>
</div> </div>
<div class="flex-1" /> <div class="flex-1" />

Loading…
Cancel
Save