refactor(nc-gui): kanban view

packages/nc-gui/components/dlg/ViewCreate.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComponentPublicInstance } from '@vue/runtime-core'
-import { message } from 'ant-design-vue'
 import type { Form as AntForm, SelectProps } from 'ant-design-vue'
-import { capitalize, inject } from '@vue/runtime-core'
 import type { FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
+import { message } from 'ant-design-vue'
+import { capitalize, inject } from '@vue/runtime-core'
 import { UITypes, ViewTypes } from 'nocodb-sdk'
 import { useI18n } from 'vue-i18n'
 import {
@@ -36,6 +36,7 @@ interface Form {
   title: string
   type: ViewTypes
   copy_from_id: string | null
+  // for kanban view only
   grp_column_id: string | null
 }
 
@@ -66,7 +67,7 @@ const form = reactive<Form>({
   grp_column_id: null,
 })
 
-const formRules = [
+const viewNameRules = [
   // name is required
   { required: true, message: `${t('labels.viewName')} ${t('general.required')}` },
   // name is unique
@@ -178,7 +179,7 @@ const singleSelectFieldOptions = computed<SelectProps['options']>(() => {
     </template>
 
     <a-form ref="formValidator" layout="vertical" :model="form">
-      <a-form-item :label="$t('labels.viewName')" name="title" :rules="formRules">
+      <a-form-item :label="$t('labels.viewName')" name="title" :rules="viewNameRules">
         <a-input ref="inputEl" v-model:value="form.title" autofocus @keydown.enter="onSubmit" />
       </a-form-item>
       <a-form-item v-if="form.type === ViewTypes.KANBAN" name="grp_column_id" :rules="groupingFieldColumnRules">

packages/nc-gui/components/shared-view/Kanban.vue

@@ -4,10 +4,6 @@ import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadView
 
 const { sharedView, meta, sorts, nestedFilters } = useSharedView()
 
-const { signedIn } = useGlobal()
-
-const { loadProject } = useProject(meta.value?.project_id)
-
 const reloadEventHook = createEventHook<void>()
 
 provide(ReloadViewDataHookInj, reloadEventHook)
@@ -23,14 +19,6 @@ provide(FieldsInj, ref(meta.value?.columns || []))
 provide(IsPublicInj, ref(true))
 
 useProvideSmartsheetStore(sharedView, meta, true, sorts, nestedFilters)
-
-if (signedIn.value) {
-  try {
-    await loadProject()
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
 </script>
 
 <template>

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

@@ -19,7 +19,6 @@ import {
   provide,
   useKanbanViewData,
 } from '#imports'
-import Row from '~/components/smartsheet/Row.vue'
 import type { Row as RowType } from '~/composables'
 
 const meta = inject(MetaInj, ref())
@@ -100,7 +99,7 @@ reloadViewMetaHook?.on(async () => {
 const expandForm = (row: RowType, state?: Record<string, any>) => {
   if (!isUIAllowed('xcDatatableEditable')) return
 
-  const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
+  const rowId = extractPkFromRow(row.row, meta.value!.columns!)
 
   if (rowId) {
     router.push({
@@ -311,7 +310,7 @@ onMounted(async () => {
                     >
                       <template #item="{ element: record }">
                         <div class="nc-kanban-item py-2 px-[15px]">
-                          <Row :row="record">
+                          <SmartsheetRow :row="record">
                             <a-card
                               hoverable
                               :data-stack="stack.title"
@@ -355,7 +354,7 @@ onMounted(async () => {
                                 </div>
                               </div>
                             </a-card>
-                          </Row>
+                          </SmartsheetRow>
                         </div>
                       </template>
                     </Draggable>

packages/nc-gui/composables/useSmartsheetStore.ts

@@ -1,12 +1,12 @@
 import { ViewTypes } from 'nocodb-sdk'
-import type { FilterType, SortType, TableType, ViewType } from 'nocodb-sdk'
+import type { FilterType, KanbanType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
   (
     view: Ref<ViewType | undefined>,
-    meta: Ref<TableType | undefined>,
+    meta: Ref<TableType | KanbanType | undefined>,
     shared = false,
     initalSorts?: Ref<SortType[]>,
     initialFilters?: Ref<FilterType[]>,