Nc org chart extension (#9860)

* feat(extensions): org chart: working nodes and edges

* fix(extensions): org chart: auto select active view

* fix(extensions): org chart: reuse isValidValue

* fix(extensions): org chart: typing and linting

* fix(extensions): org chart: fix edge case

---------

Co-authored-by: amandesai01 <amandesai01@gmail.com>

packages/nc-gui/components/cell/MultiSelect.vue

@@ -280,7 +280,6 @@ async function addIfMissingAndSave() {
         updatedColMeta,
       )
 
-
       column.value.colOptions = data.columns.find((c) => c.id === column.value.id).colOptions
 
       activeOptCreateInProgress.value--

packages/nc-gui/components/nc/Select.vue

@@ -15,6 +15,7 @@ const props = withDefaults(
     allowClear?: boolean
     loading?: boolean
     suffixIcon?: keyof typeof iconMap
+    maxTagCount?: number
   }>(),
   {
     suffixIcon: 'arrowDown',
@@ -55,8 +56,9 @@ const onChange = (value: string) => {
     :mode="mode"
     :placeholder="placeholder"
     :show-search="showSearch"
+    :max-tag-count="maxTagCount"
     class="nc-select"
-    @change="onChange"
+    @change="onChange as any"
   >
     <template #suffixIcon>
       <GeneralLoader v-if="loading" />

packages/nc-gui/composables/useExtensionHelper.ts

@@ -29,6 +29,7 @@ const [useProvideExtensionHelper, useExtensionHelper] = useInjectionState(
     const fullscreenModalSize = ref<keyof typeof modalSizes>(extensionManifest.value?.config?.modalSize || 'lg')
 
     const activeTableId = computed(() => route.params.viewId as string | undefined)
+    const activeViewId = computed(() => route.params.viewTitle as string | undefined)
 
     const collapsed = computed({
       get: () => extension.value?.meta?.collapsed ?? false,
@@ -225,6 +226,7 @@ const [useProvideExtensionHelper, useExtensionHelper] = useInjectionState(
       showExpandBtn,
       fullscreenModalSize,
       activeTableId,
+      activeViewId,
       getViewsForTable,
       getData,
       getTableMeta,

packages/nc-gui/composables/useExtensions.ts

@@ -447,7 +447,7 @@ export const useExtensions = createSharedComposable(() => {
 
       if (availableExtensions.value.length + disabledCount === extensionCount) {
         // Sort extensions
-        availableExtensions.value.sort((a, b) => a.title.localeCompare(b.title))
+        availableExtensions.value.sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
         extensionsLoaded.value = true
       }
     } catch (error) {

packages/nc-gui/utils/dataUtils.ts

@@ -2,7 +2,6 @@ import { RelationTypes, UITypes, buildFilterTree, isDateMonthFormat, isSystemCol
 import type { ColumnType, FilterType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import dayjs from 'dayjs'
 import { isColumnRequiredAndNull } from './columnUtils'
-import type { Row } from '~/lib/types'
 
 export const isValidValue = (val: unknown) => {
   if (ncIsNull(val) || ncIsUndefined(val)) {
@@ -141,13 +140,10 @@ export const rowDefaultData = (columns: ColumnType[] = []) => {
   return defaultData
 }
 
-export const isRowEmpty = (record: any, col: any) => {
-  if (!record || !col) return true
+export const isRowEmpty = (record: Pick<Row, 'row'>, col: ColumnType): boolean => {
+  if (!record || !col || !col.title) return true
 
-  const val = record.row[col.title]
-  if (val === null || val === undefined || val === '') return true
-
-  return Array.isArray(val) && val.length === 0
+  return !isValidValue(record.row[col.title])
 }
 
 export function validateRowFilters(_filters: FilterType[], data: any, columns: ColumnType[], client: any) {