Merge pull request #9934 from nocodb/nc-fix/kanban-stack

fix(nc-gui): hide `uncategorized` stack if grouping field is required field

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

@@ -69,6 +69,7 @@ const {
   moveHistory,
   addNewStackId,
   removeRowFromUncategorizedStack,
+  uncategorizedStackId,
 } = useKanbanViewStoreOrThrow()
 
 const { isViewDataLoading } = storeToRefs(useViewsStore())
@@ -108,6 +109,10 @@ const coverImageObjectFitClass = computed(() => {
   if (fk_cover_image_object_fit === CoverImageObjectFit.COVER) return '!object-cover'
 })
 
+const isRequiredGroupingFieldColumn = computed(() => {
+  return !!groupingFieldColumn.value?.rqd
+})
+
 const kanbanContainerRef = ref()
 
 const selectedStackTitle = ref('')
@@ -496,7 +501,9 @@ const handleSubmitRenameOrNewStack = async (loadMeta: boolean, stack?: any, stac
                 class="nc-kanban-stack"
                 :class="{
                   'w-[44px]': stack.collapsed,
-                  'hidden': hideEmptyStack && !formattedData.get(stack.title)?.length,
+                  'hidden':
+                    (hideEmptyStack && !formattedData.get(stack.title)?.length) ||
+                    (isRequiredGroupingFieldColumn && stack.id === uncategorizedStackId),
                 }"
                 :data-testid="`nc-kanban-stack-${stack.title}`"
               >

packages/nc-gui/composables/useKanbanViewStore.ts

@@ -15,6 +15,8 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
 
     const addNewStackId = 'addNewStack'
 
+    const uncategorizedStackId = 'uncategorized'
+
     const { t } = useI18n()
 
     const { api } = useApi()
@@ -255,7 +257,9 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
 
         // handle deleted options
         const columnOptionIds = (groupingFieldColumn.value?.colOptions as SelectOptionsType)?.options.map(({ id }) => id)
-        const cols = stackMetaObj.value[fk_grp_col_id].filter(({ id }) => id !== 'uncategorized' && !columnOptionIds.includes(id))
+        const cols = stackMetaObj.value[fk_grp_col_id].filter(
+          ({ id }) => id !== uncategorizedStackId && !columnOptionIds.includes(id),
+        )
         for (const col of cols) {
           const idx = stackMetaObj.value[fk_grp_col_id].map((ele: Record<string, any>) => ele.id).indexOf(col.id)
           if (idx !== -1) {
@@ -292,7 +296,7 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
         groupingFieldColOptions.value = [
           ...((groupingFieldColumn.value?.colOptions as SelectOptionsType & { collapsed: boolean })?.options ?? []),
           // enrich uncategorized stack
-          { id: 'uncategorized', title: null, order: 0, color: themeV3Colors.gray[500] } as any,
+          { id: uncategorizedStackId, title: null, order: 0, color: themeV3Colors.gray[500] } as any,
         ]
           // sort by initial order
           .sort((a, b) => a.order! - b.order!)
@@ -719,6 +723,7 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
       deleteRow,
       moveHistory,
       addNewStackId,
+      uncategorizedStackId,
     }
   },
   'kanban-view-store',