github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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

pull/3818/head
Wing-Kam Wong 2 years ago
parent
8988f0edd8
commit
e977f0c1d1
1 changed files with 116 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 203
      packages/nc-gui/components/smartsheet/Kanban.vue

203
packages/nc-gui/components/smartsheet/Kanban.vue
Unescape View File

@ -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" />

Write Preview
Loading…
Cancel
Save