feat(nc-gui): add limit options for single & multi select field

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

@@ -3,6 +3,7 @@ import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
+import type { FormFieldsLimitOptionsType } from '~/lib'
 import {
   ActiveCellInj,
   ColumnInj,
@@ -95,8 +96,44 @@ const options = computed<(SelectOptionType & { value?: string })[]>(() => {
     for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
       op.title = op.title?.replace(/^'/, '').replace(/'$/, '')
     }
+    let order = 1
+    const limitOptionsById =
+      ((parseProp(column.value.meta)?.limitOptions || []).reduce(
+        (o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
+          if (f?.order !== undefined && order < f.order) {
+            order = f.order
+          }
+          return {
+            ...o,
+            [f.id]: f,
+          }
+        },
+        {},
+      ) as Record<string, FormFieldsLimitOptionsType>) ?? {}
+
+    if (
+      !isEditColumn.value &&
+      isForm.value &&
+      parseProp(column.value.meta)?.isLimitOption &&
+      (parseProp(column.value.meta)?.limitOptions || []).length
+    ) {
+      return opts
+        ?.filter((o: SelectOptionType) => {
+          if (limitOptionsById[o.id!]?.show !== undefined) {
+            return limitOptionsById[o.id!]?.show
+          }
+          return false
+        })
+        ?.map((o) => ({
+          ...o,
+          value: o.title,
+          order: o.id && limitOptionsById[o.id] ? limitOptionsById[o.id]?.order : order++,
+        }))
+        ?.sort((a, b) => a.order - b.order)
+    } else {
       return opts.map((o: SelectOptionType) => ({ ...o, value: o.title }))
     }
+  }
   return []
 })
 

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

@@ -3,6 +3,7 @@ import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
+import type { FormFieldsLimitOptionsType } from '~/lib'
 import {
   ActiveCellInj,
   ColumnInj,
@@ -88,8 +89,45 @@ const options = computed<(SelectOptionType & { value: string })[]>(() => {
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
+
+    let order = 1
+    const limitOptionsById =
+      ((parseProp(column.value.meta)?.limitOptions || []).reduce(
+        (o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
+          if (f?.order !== undefined && order < f.order) {
+            order = f.order
+          }
+          return {
+            ...o,
+            [f.id]: f,
+          }
+        },
+        {},
+      ) as Record<string, FormFieldsLimitOptionsType>) ?? {}
+
+    if (
+      !isEditColumn.value &&
+      isForm.value &&
+      parseProp(column.value.meta)?.isLimitOption &&
+      (parseProp(column.value.meta)?.limitOptions || []).length
+    ) {
+      return opts
+        ?.filter((o: any) => {
+          if (limitOptionsById[o.id]?.show !== undefined) {
+            return limitOptionsById[o.id]?.show
+          }
+          return false
+        })
+        ?.map((o: any) => ({
+          ...o,
+          value: o.title,
+          order: o.id && limitOptionsById[o.id] ? limitOptionsById[o.id]?.order : order++,
+        }))
+        ?.sort((a, b) => a.order - b.order)
+    } else {
       return opts.map((o: any) => ({ ...o, value: o.title }))
     }
+  }
   return []
 })
 

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

@@ -4,6 +4,7 @@ import tinycolor from 'tinycolor2'
 import { CheckboxGroup, Checkbox, RadioGroup, Radio } from 'ant-design-vue'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { UserFieldRecordType } from 'nocodb-sdk'
+import type { FormFieldsLimitOptionsType } from '~/lib'
 import {
   ActiveCellInj,
   CellClickHookInj,
@@ -26,12 +27,6 @@ import {
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
-interface LimitOptionsType {
-  id: string
-  order: number
-  show: boolean
-}
-
 interface Props {
   modelValue?: UserFieldRecordType[] | UserFieldRecordType | string | null
   rowIndex?: number
@@ -86,7 +81,8 @@ const { isUIAllowed } = useRoles()
 const options = computed<UserFieldRecordType[]>(() => {
   let order = 1
   const limitOptionsById =
-    ((parseProp(column.value.meta)?.limitOptions || []).reduce((o: Record<string, LimitOptionsType>, f: LimitOptionsType) => {
+    ((parseProp(column.value.meta)?.limitOptions || []).reduce(
+      (o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
         if (f?.order !== undefined && order < f.order) {
           order = f.order
         }
@@ -94,7 +90,9 @@ const options = computed<UserFieldRecordType[]>(() => {
           ...o,
           [f.id]: f,
         }
-    }, {}) as Record<string, LimitOptionsType>) ?? {}
+      },
+      {},
+    ) as Record<string, FormFieldsLimitOptionsType>) ?? {}
 
   const collaborators: UserFieldRecordType[] = []
 

packages/nc-gui/components/smartsheet/form/LimitOptions.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
 import tinycolor from 'tinycolor2'
-import { UITypes, type ColumnType, type SelectOptionType, type SelectOptionsType, type UserFieldRecordType } from 'nocodb-sdk'
-
+import type { ColumnType, SelectOptionType, SelectOptionsType, UserFieldRecordType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import type { FormFieldsLimitOptionsType } from '~/lib'
 import { iconMap, MetaInj } from '#imports'
 
-interface LimitOptionsType {
-  id: string
-  order: number
-  show: boolean
-}
-
 const props = defineProps<{
-  modelValue: LimitOptionsType[]
+  modelValue: FormFieldsLimitOptionsType[]
   column: ColumnType
 }>()
 
@@ -38,7 +33,7 @@ const vModel = computed({
   get: () => {
     let order = 1
     const limitOptionsById =
-      (props.modelValue || []).reduce((o: Record<string, LimitOptionsType>, f: LimitOptionsType) => {
+      (props.modelValue || []).reduce((o: Record<string, FormFieldsLimitOptionsType>, f: FormFieldsLimitOptionsType) => {
         if (f?.order !== undefined && order < f.order) {
           order = f.order
         }
@@ -46,7 +41,7 @@ const vModel = computed({
           ...o,
           [f.id]: f,
         }
-      }, {} as Record<string, LimitOptionsType>) ?? {}
+      }, {} as Record<string, FormFieldsLimitOptionsType>) ?? {}
 
     if (UITypes.User === column.value.uidt) {
       const collaborators = ((baseUsers.value || []) as UserFieldRecordType[])

packages/nc-gui/lib/types.ts

@@ -198,6 +198,12 @@ interface UsersSortType {
 
 type CommandPaletteType = 'cmd-k' | 'cmd-j' | 'cmd-l'
 
+interface FormFieldsLimitOptionsType {
+  id: string
+  order: number
+  show: boolean
+}
+
 export type {
   User,
   ProjectMetaInfo,
@@ -226,4 +232,5 @@ export type {
   UsersSortType,
   CommandPaletteType,
   CalendarRangeType,
+  FormFieldsLimitOptionsType,
 }