feat(nc-gui): kanban grouping column id in copy view

#3840

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

@@ -25,6 +25,7 @@ interface Props {
   type: ViewTypes
   title?: string
   selectedViewId?: string
+  groupingFieldColumnId?: string
 }
 
 interface Emits {
@@ -123,7 +124,13 @@ function init() {
           label: field.title,
         }
       })
-    form.grp_column_id = singleSelectFieldOptions.value?.[0]?.value as string
+    if (props.groupingFieldColumnId) {
+      // take from the one from copy view
+      form.grp_column_id = props.groupingFieldColumnId
+    } else {
+      // take the first option
+      form.grp_column_id = singleSelectFieldOptions.value?.[0]?.value as string
+    }
   }
 
   nextTick(() => {
@@ -186,11 +193,17 @@ async function onSubmit() {
       <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">
+      <a-form-item
+        v-if="form.type === ViewTypes.KANBAN"
+        :label="$t('general.groupingField')"
+        name="grp_column_id"
+        :rules="groupingFieldColumnRules"
+      >
         <a-select
           v-model:value="form.grp_column_id"
           class="w-full nc-kanban-grouping-field-select"
           :options="singleSelectFieldOptions"
+          :disabled="props.groupingFieldColumnId"
           placeholder="Select a Grouping Field"
           not-found-content="No Single Select Field can be found. Please create one first."
         />

packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue

@@ -28,7 +28,7 @@ const emits = defineEmits<Emits>()
 const { t } = useI18n()
 
 interface Emits {
-  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
+  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void
 
   (event: 'deleted'): void
 }

packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ViewType, ViewTypes } from 'nocodb-sdk'
+import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk'
 import type { WritableComputedRef } from '@vue/reactivity'
 import {
   IsLockedInj,
@@ -23,7 +23,7 @@ interface Emits {
   (event: 'changeView', view: Record<string, any>): void
   (event: 'rename', view: ViewType): void
   (event: 'delete', view: ViewType): void
-  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
+  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void
 }
 
 const props = defineProps<Props>()
@@ -101,7 +101,12 @@ function focusInput(el: HTMLInputElement) {
 /** Duplicate a view */
 // todo: This is not really a duplication, maybe we need to implement a true duplication?
 function onDuplicate() {
-  emits('openModal', { type: vModel.value.type!, title: vModel.value.title, copyViewId: vModel.value.id })
+  emits('openModal', {
+    type: vModel.value.type!,
+    title: vModel.value.title,
+    copyViewId: vModel.value.id,
+    groupingFieldColumnId: (vModel.value.view as KanbanType).grp_column_id!,
+  })
 
   $e('c:view:copy', { view: vModel.value.type })
 }

packages/nc-gui/components/smartsheet/sidebar/index.vue

@@ -50,6 +50,9 @@ let viewCreateTitle = $ref('')
 /** selected view id for copying view meta */
 let selectedViewId = $ref('')
 
+/** Kanban Grouping Column Id for copying view meta */
+let kanbanGrpColumnId = $ref('')
+
 /** is view creation modal open */
 let modalOpen = $ref(false)
 
@@ -82,11 +85,22 @@ watch(
 )
 
 /** Open view creation modal */
-function openModal({ type, title = '', copyViewId }: { type: ViewTypes; title: string; copyViewId: string }) {
+function openModal({
+  type,
+  title = '',
+  copyViewId,
+  groupingFieldColumnId,
+}: {
+  type: ViewTypes
+  title: string
+  copyViewId: string
+  groupingFieldColumnId: string
+}) {
   modalOpen = true
   viewCreateType = type
   viewCreateTitle = title
   selectedViewId = copyViewId
+  kanbanGrpColumnId = groupingFieldColumnId
 }
 
 /** Handle view creation */
@@ -126,6 +140,7 @@ function onCreate(view: ViewType) {
       :title="viewCreateTitle"
       :type="viewCreateType"
       :selected-view-id="selectedViewId"
+      :grouping-field-column-id="kanbanGrpColumnId"
       @created="onCreate"
     />
   </a-layout-sider>