Nc feat: improve lazy loading for field edit or add (#8846)

* feat: improve lazy loading for field edit or add

* fix(nc-gui): use isEdit.value instead of isEdit

* fix(nocodb): validate required params in qr/barcode column create

---------

Co-authored-by: mertmit <mertmit99@gmail.com>

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

@@ -60,7 +60,7 @@ watch(openedSubTab, () => {
             <div>Fields</div>
           </div>
         </template>
-        <SmartsheetDetailsFields />
+        <LazySmartsheetDetailsFields />
       </a-tab-pane>
       <a-tab-pane key="relation">
         <template #tab>
@@ -69,7 +69,7 @@ watch(openedSubTab, () => {
             <div>{{ $t('title.relations') }}</div>
           </div>
         </template>
-        <SmartsheetDetailsErd />
+        <LazySmartsheetDetailsErd />
       </a-tab-pane>
 
       <a-tab-pane key="api">
@@ -79,7 +79,7 @@ watch(openedSubTab, () => {
             <div>{{ $t('labels.apiSnippet') }}</div>
           </div>
         </template>
-        <SmartsheetDetailsApi v-if="base && meta && view" />
+        <LazySmartsheetDetailsApi v-if="base && meta && view" />
         <div v-else class="h-full w-full flex flex-col justify-center items-center mt-28 mb-4">
           <a-spin size="large" :indicator="indicator" />
         </div>
@@ -92,7 +92,7 @@ watch(openedSubTab, () => {
             <div>{{ $t('objects.webhooks') }}</div>
           </div>
         </template>
-        <SmartsheetDetailsWebhooks />
+        <LazySmartsheetDetailsWebhooks />
       </a-tab-pane>
     </NcTabs>
   </div>

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

@@ -1239,7 +1239,8 @@ useEventListener(
                           {{ $t('general.edit') }} {{ $t('objects.field') }}
                         </NcButton>
                         <template #overlay>
-                          <SmartsheetColumnEditOrAddProvider
+                          <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
+                            <LazySmartsheetColumnEditOrAddProvider
                               v-if="dropdownStates.showEditColumn"
                               :column="activeColumn"
                               @submit="editColumnCallback"
@@ -1247,6 +1248,7 @@ useEventListener(
                               @click.stop
                               @keydown.stop
                             />
+                          </div>
                         </template>
                       </a-dropdown>
                       <SmartsheetFormFieldMenu
@@ -1325,13 +1327,15 @@ useEventListener(
                           </NcButton>
 
                           <template #overlay>
-                            <SmartsheetColumnEditOrAddProvider
+                            <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
+                              <LazySmartsheetColumnEditOrAddProvider
                                 v-if="dropdownStates.showAddColumn"
                                 @submit="addColumnCallback"
                                 @cancel="dropdownStates.showAddColumn = false"
                                 @click.stop
                                 @keydown.stop
                               />
+                            </div>
                           </template>
                         </a-dropdown>
                       </div>

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

@@ -37,7 +37,7 @@ onMounted(() => {
   }
   vModel.value.fk_barcode_value_column_id =
     (column?.value?.colOptions as Record<string, any>)?.fk_barcode_value_column_id ||
-    (!isEdit ? columnsAllowedAsBarcodeValue.value?.[0]?.id : null)
+    (!isEdit.value ? columnsAllowedAsBarcodeValue.value?.[0]?.id : null)
 })
 
 watch(columnsAllowedAsBarcodeValue, (newColumnsAllowedAsBarcodeValue) => {

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

@@ -471,33 +471,33 @@ const isFullUpdateAllowed = computed(() => {
       </div>
 
       <template v-if="!readOnly && formState.uidt">
-        <LazySmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" v-model:value="formState" />
+        <SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" v-model:value="formState" />
-        <LazySmartsheetColumnQrCodeOptions v-if="formState.uidt === UITypes.QrCode" v-model="formState" />
+        <SmartsheetColumnQrCodeOptions v-if="formState.uidt === UITypes.QrCode" v-model="formState" />
-        <LazySmartsheetColumnBarcodeOptions v-if="formState.uidt === UITypes.Barcode" v-model="formState" />
+        <SmartsheetColumnBarcodeOptions v-if="formState.uidt === UITypes.Barcode" v-model="formState" />
-        <LazySmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" />
+        <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" />
-        <LazySmartsheetColumnLongTextOptions v-if="formState.uidt === UITypes.LongText" v-model:value="formState" />
+        <SmartsheetColumnLongTextOptions v-if="formState.uidt === UITypes.LongText" v-model:value="formState" />
-        <LazySmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
+        <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
-        <LazySmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />
+        <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />
-        <LazySmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" v-model:value="formState" />
+        <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" v-model:value="formState" />
-        <LazySmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" v-model:value="formState" />
+        <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" v-model:value="formState" />
-        <LazySmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" v-model:value="formState" />
+        <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" v-model:value="formState" />
-        <LazySmartsheetColumnTimeOptions v-if="formState.uidt === UITypes.Time" v-model:value="formState" />
+        <SmartsheetColumnTimeOptions v-if="formState.uidt === UITypes.Time" v-model:value="formState" />
-        <LazySmartsheetColumnNumberOptions v-if="formState.uidt === UITypes.Number" v-model:value="formState" />
+        <SmartsheetColumnNumberOptions v-if="formState.uidt === UITypes.Number" v-model:value="formState" />
-        <LazySmartsheetColumnDecimalOptions v-if="formState.uidt === UITypes.Decimal" v-model:value="formState" />
+        <SmartsheetColumnDecimalOptions v-if="formState.uidt === UITypes.Decimal" v-model:value="formState" />
-        <LazySmartsheetColumnDateTimeOptions
+        <SmartsheetColumnDateTimeOptions
           v-if="[UITypes.DateTime, UITypes.CreatedTime, UITypes.LastModifiedTime].includes(formState.uidt)"
           v-model:value="formState"
         />
-        <LazySmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" v-model:value="formState" />
+        <SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" v-model:value="formState" />
-        <LazySmartsheetColumnLinkedToAnotherRecordOptions
+        <SmartsheetColumnLinkedToAnotherRecordOptions
           v-if="formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links"
           :key="`${formState.uidt}-${formState.id || formState.title}`"
           v-model:value="formState"
           :is-edit="isEdit"
         />
-        <LazySmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" v-model:value="formState" />
+        <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" v-model:value="formState" />
-        <LazySmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
+        <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
-        <LazySmartsheetColumnUserOptions v-if="formState.uidt === UITypes.User" v-model:value="formState" :is-edit="isEdit" />
+        <SmartsheetColumnUserOptions v-if="formState.uidt === UITypes.User" v-model:value="formState" :is-edit="isEdit" />
         <SmartsheetColumnSelectOptions
           v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"
           v-model:value="formState"

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

@@ -33,7 +33,7 @@ onMounted(() => {
   // set default value
   vModel.value.fk_qr_value_column_id =
     (column?.value?.colOptions as Record<string, any>)?.fk_qr_value_column_id ||
-    (!isEdit ? columnsAllowedAsQrValue.value?.[0]?.id : null)
+    (!isEdit.value ? columnsAllowedAsQrValue.value?.[0]?.id : null)
 })
 
 setAdditionalValidations({

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -1871,7 +1871,8 @@ onKeyStroke('ArrowDown', onDown)
                         </NcMenu>
                       </template>
                       <template v-else #overlay>
-                        <SmartsheetColumnEditOrAddProvider
+                        <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
+                          <LazySmartsheetColumnEditOrAddProvider
                             v-if="addColumnDropdown"
                             :preload="preloadColumn"
                             :column-position="columnOrder"
@@ -1882,6 +1883,7 @@ onKeyStroke('ArrowDown', onDown)
                             @keydown.stop
                             @mounted="preloadColumn = undefined"
                           />
+                        </div>
                       </template>
                     </a-dropdown>
                   </div>

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -204,7 +204,8 @@ const onClick = (e: Event) => {
       <div v-else />
 
       <template #overlay>
-        <SmartsheetColumnEditOrAddProvider
+        <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
+          <LazySmartsheetColumnEditOrAddProvider
             v-if="editColumnDropdown"
             :column="columnOrder ? null : column"
             :column-position="columnOrder"
@@ -214,6 +215,7 @@ const onClick = (e: Event) => {
             @click.stop
             @keydown.stop
           />
+        </div>
       </template>
     </a-dropdown>
   </div>

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -237,7 +237,8 @@ const onClick = (e: Event) => {
       <div v-if="isExpandedForm && !isExpandedBulkUpdateForm" class="h-[1px]" @dblclick.stop>&nbsp;</div>
       <div v-else />
       <template #overlay>
-        <SmartsheetColumnEditOrAddProvider
+        <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
+          <LazySmartsheetColumnEditOrAddProvider
             v-if="editColumnDropdown"
             :column="columnOrder ? null : column"
             :column-position="columnOrder"
@@ -247,6 +248,7 @@ const onClick = (e: Event) => {
             @click.stop
             @keydown.stop
           />
+        </div>
       </template>
     </a-dropdown>
   </div>

packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue

@@ -42,6 +42,7 @@ provide(IsKanbanInj, ref(true))
       </a-button>
     </div>
     <template #overlay>
+      <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
         <LazySmartsheetColumnEditOrAddProvider
           v-if="open"
           :column="groupingFieldColumn"
@@ -50,6 +51,7 @@ provide(IsKanbanInj, ref(true))
           @click.stop
           @keydown.stop
         />
+      </div>
     </template>
   </a-dropdown>
 </template>

packages/nocodb/src/services/columns.service.ts

@@ -1648,12 +1648,16 @@ export class ColumnsService {
         break;
 
       case UITypes.QrCode:
+        validateParams(['fk_qr_value_column_id'], param.column);
+
         await Column.insert(context, {
           ...colBody,
           fk_model_id: table.id,
         });
         break;
       case UITypes.Barcode:
+        validateParams(['fk_barcode_value_column_id'], param.column);
+
         await Column.insert(context, {
           ...colBody,
           fk_model_id: table.id,