feat(nc-gui): add scrolling logic when new options are added

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

@@ -65,6 +65,7 @@ const {
   countByStack,
   deleteStack,
   removeRowFromUncategorizedStack,
+  shouldScrollToRight,
 } = useKanbanViewData(meta, view)
 
 const { isUIAllowed } = useUIPermission()
@@ -72,13 +73,21 @@ const { isUIAllowed } = useUIPermission()
 const { appInfo } = $(useGlobal())
 
 provide(IsFormInj, ref(false))
+
 provide(IsGalleryInj, ref(false))
+
 provide(IsGridInj, ref(false))
+
 provide(IsKanbanInj, ref(true))
+
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 const fields = inject(FieldsInj, ref([]))
 
+const kanbanContainerRef = ref()
+
+let isMounted = false
+
 const isRowEmpty = (record: any, col: any) => {
   const val = record.row[col.title]
   if (!val) return true
@@ -221,12 +230,31 @@ onMounted(async () => {
   await loadKanbanMeta()
   // load kanban data
   await loadKanbanData()
+  // update isMounted for below watcher
+  isMounted = true
 })
+
+watch(
+  () => shouldScrollToRight.value,
+  () => {
+    // use `isMounted` to avoid scrolling from switching from other views
+    // i.e. scroll only when a new option is added within kanban view
+    if (isMounted && shouldScrollToRight.value) {
+      // horizontally scroll to the end of the kanban container
+      kanbanContainerRef.value.scrollTo({
+        left: kanbanContainerRef.value.scrollWidth,
+        behavior: 'smooth',
+      })
+      // reset shouldScrollToRight
+      shouldScrollToRight.value = false
+    }
+  },
+)
 </script>
 
 <template>
   <div class="flex h-full bg-white px-2">
-    <div class="nc-kanban-container flex my-4 px-3 overflow-x-scroll overflow-y-hidden">
+    <div ref="kanbanContainerRef" class="nc-kanban-container flex my-4 px-3 overflow-x-scroll overflow-y-hidden">
       <Draggable
         v-model="groupingFieldColOptions"
         class="flex gap-4"

packages/nc-gui/composables/useKanbanViewData.ts

@@ -66,6 +66,8 @@ export function useKanbanViewData(
   // stack meta in object format
   const stackMetaObj = useState<Record<string, GroupingFieldColOptionsType[]>>('KanbanStackMetaObj', () => ({}))
 
+  const shouldScrollToRight = ref(false)
+
   const formatData = (list: Record<string, any>[]) =>
     list.map((row) => ({
       row: { ...row },
@@ -138,6 +140,7 @@ export function useKanbanViewData(
     if (stackMetaObj.value && grp_column_id && stackMetaObj.value[grp_column_id]) {
       // keep the existing order (index of the array) but update the values done outside kanban
       let isChanged = false
+      let hasNewOptionsAdded = false
       for (const option of (groupingFieldColumn.value.colOptions as SelectOptionsType)?.options ?? []) {
         const idx = stackMetaObj.value[grp_column_id].findIndex((ele) => ele.id === option.id)
         if (idx !== -1) {
@@ -167,6 +170,7 @@ export function useKanbanViewData(
           formattedData.value[option.title!] = []
           countByStack.value[option.title!] = 0
           isChanged = true
+          hasNewOptionsAdded = true
         }
       }
 
@@ -198,6 +202,9 @@ export function useKanbanViewData(
 
       if (isChanged) {
         await updateKanbanStackMeta()
+        if (hasNewOptionsAdded) {
+          shouldScrollToRight.value = true
+        }
       }
     } else {
       // build stack meta
@@ -420,5 +427,6 @@ export function useKanbanViewData(
     deleteStack,
     updateKanbanStackMeta,
     removeRowFromUncategorizedStack,
+    shouldScrollToRight,
   }
 }