wip(nc-gui): integrate with useKanbanViewData

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

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import Draggable from 'vuedraggable'
 import { isVirtualCol } from 'nocodb-sdk'
-import { inject, provide, useViewData } from '#imports'
+import { inject, provide, useKanbanViewData, useViewData } from '#imports'
 import Row from '~/components/smartsheet/Row.vue'
 import type { Row as RowType } from '~/composables'
 import {
   ActiveViewInj,
-  ChangePageInj,
+  // ChangePageInj,
   FieldsInj,
   IsFormInj,
   IsGalleryInj,
@@ -14,7 +14,7 @@ import {
   IsKanbanInj,
   MetaInj,
   OpenNewRecordFormHookInj,
-  PaginationDataInj,
+  // PaginationDataInj,
   ReadonlyInj,
 } from '~/context'
 
@@ -31,8 +31,10 @@ const expandedFormDlg = ref(false)
 const expandedFormRow = ref<RowType>()
 const expandedFormRowState = ref<Record<string, any>>()
 
-const { loadData, paginationData, formattedKanbanData, updateOrSaveRow, loadKanbanData, kanbanData, changePage, addEmptyRow } =
+const { loadKanbanData, loadKanbanMeta, kanbanMetaData, formatData, updateOrSaveRow, addEmptyRow } = useKanbanViewData(
-  useViewData(meta, view as any)
+  meta,
+  view as any,
+)
 
 const { isUIAllowed } = useUIPermission()
 
@@ -40,27 +42,25 @@ provide(IsFormInj, ref(false))
 provide(IsGalleryInj, ref(false))
 provide(IsGridInj, ref(false))
 provide(IsKanbanInj, ref(true))
-provide(PaginationDataInj, paginationData)
-provide(ChangePageInj, changePage)
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 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 !== kanbanData.value?.fk_cover_image_col_id))
 
-const coverImageColumn: any = $(
+// const coverImageColumn: any = $(
-  computed(() =>
+//   computed(() =>
-    meta?.value.columnsById
+//     meta?.value.columnsById
-      ? meta.value.columnsById[kanbanData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
+//       ? meta.value.columnsById[kanbanData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
-      : {},
+//       : {},
-  ),
+//   ),
-)
+// )
 
 watch(
   [meta, view],
   async () => {
     if (meta?.value && view?.value) {
-      await loadData()
+      await loadKanbanMeta()
       await loadKanbanData()
     }
   },
@@ -74,18 +74,18 @@ const isRowEmpty = (record: any, col: any) => {
   return Array.isArray(val) && val.length === 0
 }
 
-const attachments = (record: any): Array<Attachment> => {
+// const attachments = (record: any): Array<Attachment> => {
-  try {
+//   try {
-    return coverImageColumn?.title && record.row[coverImageColumn.title] ? JSON.parse(record.row[coverImageColumn.title]) : []
+//     return coverImageColumn?.title && record.row[coverImageColumn.title] ? JSON.parse(record.row[coverImageColumn.title]) : []
-  } catch (e) {
+//   } catch (e) {
-    return []
+//     return []
-  }
+//   }
-}
+// }
 
 const reloadAttachments = ref(false)
 
 reloadViewDataHook?.on(async () => {
-  await loadData()
+  await loadKanbanMeta()
   await loadKanbanData()
   reloadAttachments.value = true
   nextTick(() => {
@@ -126,6 +126,9 @@ openNewRecordFormHook?.on(async () => {
 <template>
   <!-- TODO: add loading component when formattedKanbanData is not ready -->
   <div v-if="formattedKanbanData" class="flex h-full">
+    <!--    {{ formattedData}} -->
+    <!--    <br/><br/> -->
+    <!--    {{ formattedKanbanData.data }} -->
     <div class="nc-kanban-container flex grid gap-2 my-4 px-3">
       <Draggable
         v-model="formattedKanbanData.meta"