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

feat(nc-gui): integrate with formattedData from useKanbanViewData

pull/3818/head
Wing-Kam Wong 2 years ago
parent
9cdfa1879b
commit
85198275cc
1 changed files with 35 additions and 40 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. 75
      packages/nc-gui/components/smartsheet/Kanban.vue

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

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
import { isVirtualCol } from 'nocodb-sdk' import { isVirtualCol } from 'nocodb-sdk'
import { inject, provide, useKanbanViewData, useViewData } from '#imports' import { inject, provide, useKanbanViewData } from '#imports'
import Row from '~/components/smartsheet/Row.vue' import Row from '~/components/smartsheet/Row.vue'
import type { Row as RowType } from '~/composables' import type { Row as RowType } from '~/composables'
import { import {
@ -31,10 +31,8 @@ const expandedFormDlg = ref(false)
const expandedFormRow = ref<RowType>() const expandedFormRow = ref<RowType>()
const expandedFormRowState = ref<Record<string, any>>() const expandedFormRowState = ref<Record<string, any>>()
const { loadKanbanData, loadKanbanMeta, kanbanMetaData, formatData, updateOrSaveRow, addEmptyRow } = useKanbanViewData( const { loadKanbanData, loadKanbanMeta, kanbanMetaData, formattedData, updateOrSaveRow, addEmptyRow, groupingFieldColOptions } =
meta, useKanbanViewData(meta, view as any)
view as any,
)
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
@ -46,7 +44,7 @@ provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
const fields = inject(FieldsInj, ref([])) const fields = inject(FieldsInj, ref([]))
// const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== kanbanData.value?.fk_cover_image_col_id)) const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== kanbanMetaData.value?.fk_cover_image_col_id))
// const coverImageColumn: any = $( // const coverImageColumn: any = $(
// computed(() => // computed(() =>
@ -125,13 +123,10 @@ openNewRecordFormHook?.on(async () => {
<template> <template>
<!-- TODO: add loading component when formattedKanbanData is not ready --> <!-- TODO: add loading component when formattedKanbanData is not ready -->
<div v-if="formattedKanbanData" class="flex h-full"> <div v-if="formattedData" class="flex h-full">
<!-- {{ formattedData}} -->
<!-- <br/><br/> -->
<!-- {{ formattedKanbanData.data }} -->
<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">
<Draggable <Draggable
v-model="formattedKanbanData.meta" v-model="groupingFieldColOptions"
class="flex gap-5" class="flex gap-5"
item-key="id" item-key="id"
group="kanban-stack" group="kanban-stack"
@ -149,7 +144,7 @@ openNewRecordFormHook?.on(async () => {
</template> </template>
<div class="nc-kanban-list flex flex-col"> <div class="nc-kanban-list flex flex-col">
<Draggable <Draggable
v-model="formattedKanbanData.data[stack.title]" v-model="formattedData[stack.id]"
item-key="row.Id" item-key="row.Id"
draggable=".nc-kanban-item" draggable=".nc-kanban-item"
group="kanban-card" group="kanban-card"
@ -165,32 +160,32 @@ openNewRecordFormHook?.on(async () => {
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]" class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
@click="expandFormClick($event, record)" @click="expandFormClick($event, record)"
> >
<template #cover> <!-- <template #cover> -->
<a-carousel <!-- <a-carousel -->
v-if="!reloadAttachments && attachments(record).length" <!-- v-if="!reloadAttachments && attachments(record).length" -->
autoplay <!-- autoplay -->
class="gallery-carousel" <!-- class="gallery-carousel" -->
arrows <!-- arrows -->
> <!-- > -->
<template #customPaging> <!-- <template #customPaging> -->
<a> <!-- <a> -->
<div class="pt-[12px]"><div></div></div> <!-- <div class="pt-[12px]"><div></div></div> -->
</a> <!-- </a> -->
</template> <!-- </template> -->
<template #prevArrow> <!-- <template #prevArrow> -->
<div style="z-index: 1"></div> <!-- <div style="z-index: 1"></div> -->
</template> <!-- </template> -->
<template #nextArrow> <!-- <template #nextArrow> -->
<div style="z-index: 1"></div> <!-- <div style="z-index: 1"></div> -->
</template> <!-- </template> -->
<img <!-- <img -->
v-for="(attachment, index) in attachments(record)" <!-- v-for="(attachment, index) in attachments(record)" -->
:key="`carousel-${record.row.id}-${index}`" <!-- :key="`carousel-${record.row.id}-${index}`" -->
class="h-52" <!-- class="h-52" -->
:src="attachment.url" <!-- :src="attachment.url" -->
/> <!-- /> -->
</a-carousel> <!-- </a-carousel> -->
</template> <!-- </template> -->
<div <div
v-for="col in fieldsWithoutCover" v-for="col in fieldsWithoutCover"
@ -234,8 +229,8 @@ openNewRecordFormHook?.on(async () => {
<div class="mt-5 text-center"> <div class="mt-5 text-center">
<mdi-plus class="text-pint-500 text-lg text-primary cursor-pointer" @click="openNewRecordFormHook.trigger()" /> <mdi-plus class="text-pint-500 text-lg text-primary cursor-pointer" @click="openNewRecordFormHook.trigger()" />
<div class="nc-kanban-data-count"> <div class="nc-kanban-data-count">
{{ formattedKanbanData.data[stack.title].length }} {{ formattedData[stack.id]?.length }}
{{ formattedKanbanData.data[stack.title].length !== 1 ? $t('objects.records') : $t('objects.record') }} {{ formattedData[stack.id]?.length !== 1 ? $t('objects.records') : $t('objects.record') }}
</div> </div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save