feat: allow virtual column add/edit/remove

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -38,6 +38,8 @@ const { getMeta } = useMetas()
 
 const { t } = useI18n()
 
+const {isMetaReadOnly} = useRoles()
+
 const columnLabel = computed(() => props.columnLabel || t('objects.field'))
 
 const { $e } = useNuxtApp()
@@ -99,6 +101,14 @@ const onlyNameUpdateOnEditColumns = [
   UITypes.Barcode,
 ]
 
+const readonlyMetaAllowedTypes = [
+  UITypes.Lookup,
+  UITypes.Rollup,
+  UITypes.Formula,
+  UITypes.Barcode,
+  UITypes.QrCode,
+]
+
 // To close column type dropdown on escape and
 // close modal only when the type popup is close
 const isColumnTypeOpen = ref(false)
@@ -124,7 +134,7 @@ const uiFilters = (t: { name: UITypes; virtual?: number; deprecated?: boolean })
 }
 
 const uiTypesOptions = computed<typeof uiTypes>(() => {
-  return [
+  const types = [
     ...uiTypes.filter(uiFilters),
     ...(!isEdit.value && meta?.value?.columns?.every((c) => !c.pk)
       ? [
@@ -136,6 +146,21 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
         ]
       : []),
   ]
+
+  // if meta is readonly, move disabled types to the end
+  if(isMetaReadOnly.value) {
+    types.sort((a, b) => {
+      const aDisabled = readonlyMetaAllowedTypes.includes(a.name)
+      const bDisabled = readonlyMetaAllowedTypes.includes(b.name)
+
+      if(aDisabled && !bDisabled) return -1
+      if(!aDisabled && bDisabled) return 1
+
+      return 0
+    })
+  }
+
+  return types
 })
 
 const onSelectType = (uidt: UITypes) => {
@@ -380,7 +405,7 @@ const filterOption = (input: string, option: { value: UITypes }) => {
             v-model:value="formState.uidt"
             show-search
             class="nc-column-type-input !rounded-lg"
-            :disabled="isKanban || readOnly || (isEdit && !!onlyNameUpdateOnEditColumns.includes(column?.uidt))"
+            :disabled="(isMetaReadOnly && !readonlyMetaAllowedTypes.includes(formState.uidt)) || isKanban || readOnly || (isEdit && !!onlyNameUpdateOnEditColumns.includes(column?.uidt))"
             dropdown-class-name="nc-dropdown-column-type border-1 !rounded-lg border-gray-200"
             :filter-option="filterOption"
             @dropdown-visible-change="onDropdownChange"

packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue

@@ -11,6 +11,8 @@ const { options } = toRefs(props)
 
 const searchQuery = ref('')
 
+const {isMetaReadOnly} = useRoles()
+
 const filteredOptions = computed(
   () =>
     options.value?.filter(
@@ -62,6 +64,19 @@ onMounted(() => {
   searchQuery.value = ''
   activeFieldIndex.value = options.value.findIndex((o) => o.name === UITypes.SingleLineText)
 })
+
+
+const readonlyMetaAllowedTypes = [
+  UITypes.Lookup,
+  UITypes.Rollup,
+  UITypes.Formula,
+  UITypes.Barcode,
+  UITypes.QrCode,
+]
+
+const isDisabledUIType = (type: UITypes) => {
+  return isMetaReadOnly.value && !readonlyMetaAllowedTypes.includes(type)
+}
 </script>
 
 <template>
@@ -98,18 +113,21 @@ onMounted(() => {
       <div
         v-for="(option, index) in filteredOptions"
         :key="index"
-        class="flex w-full py-2 items-center justify-between px-2 hover:bg-gray-100 cursor-pointer rounded-md"
+        class="flex w-full py-2 items-center justify-between px-2 rounded-md"
         :class="[
           `nc-column-list-option-${index}`,
           {
-            'bg-gray-100 nc-column-list-option-active': activeFieldIndex === index,
+            'hover:bg-gray-100 cursor-pointer' : !isDisabledUIType(option.name),
+            'bg-gray-100 nc-column-list-option-active': activeFieldIndex === index && !isDisabledUIType(option.name),
+            '!text-gray-400 cursor-not-allowed': isDisabledUIType(option.name),
+
           },
         ]"
         :data-testid="option.name"
         @click="onClick(option.name)"
       >
         <div class="flex gap-2 items-center">
-          <component :is="option.icon" class="text-gray-700 w-4 h-4" />
+          <component :is="option.icon" class="w-4 h-4" :class="isDisabledUIType(option.name) ? '!text-gray-400' : 'text-gray-700' "/>
           <div class="flex-1 text-sm">{{ UITypesName[option.name] }}</div>
           <span v-if="option.deprecated" class="!text-xs !text-gray-300">({{ $t('general.deprecated') }})</span>
         </div>