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,14 +1239,16 @@ useEventListener(
                           {{ $t('general.edit') }} {{ $t('objects.field') }}
                         </NcButton>
                         <template #overlay>
-                          <SmartsheetColumnEditOrAddProvider
-                            v-if="dropdownStates.showEditColumn"
-                            :column="activeColumn"
-                            @submit="editColumnCallback"
-                            @cancel="dropdownStates.showEditColumn = false"
-                            @click.stop
-                            @keydown.stop
-                          />
+                          <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
+                            <LazySmartsheetColumnEditOrAddProvider
+                              v-if="dropdownStates.showEditColumn"
+                              :column="activeColumn"
+                              @submit="editColumnCallback"
+                              @cancel="dropdownStates.showEditColumn = false"
+                              @click.stop
+                              @keydown.stop
+                            />
+                          </div>
                         </template>
                       </a-dropdown>
                       <SmartsheetFormFieldMenu
@@ -1325,13 +1327,15 @@ useEventListener(
                           </NcButton>
 
                           <template #overlay>
-                            <SmartsheetColumnEditOrAddProvider
-                              v-if="dropdownStates.showAddColumn"
-                              @submit="addColumnCallback"
-                              @cancel="dropdownStates.showAddColumn = false"
-                              @click.stop
-                              @keydown.stop
-                            />
+                            <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" />
-        <LazySmartsheetColumnQrCodeOptions v-if="formState.uidt === UITypes.QrCode" v-model="formState" />
-        <LazySmartsheetColumnBarcodeOptions v-if="formState.uidt === UITypes.Barcode" v-model="formState" />
-        <LazySmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" />
-        <LazySmartsheetColumnLongTextOptions v-if="formState.uidt === UITypes.LongText" v-model:value="formState" />
-        <LazySmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
-        <LazySmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />
-        <LazySmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" v-model:value="formState" />
-        <LazySmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" v-model:value="formState" />
-        <LazySmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" v-model:value="formState" />
-        <LazySmartsheetColumnTimeOptions v-if="formState.uidt === UITypes.Time" v-model:value="formState" />
-        <LazySmartsheetColumnNumberOptions v-if="formState.uidt === UITypes.Number" v-model:value="formState" />
-        <LazySmartsheetColumnDecimalOptions v-if="formState.uidt === UITypes.Decimal" v-model:value="formState" />
-        <LazySmartsheetColumnDateTimeOptions
+        <SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" v-model:value="formState" />
+        <SmartsheetColumnQrCodeOptions v-if="formState.uidt === UITypes.QrCode" v-model="formState" />
+        <SmartsheetColumnBarcodeOptions v-if="formState.uidt === UITypes.Barcode" v-model="formState" />
+        <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" />
+        <SmartsheetColumnLongTextOptions v-if="formState.uidt === UITypes.LongText" v-model:value="formState" />
+        <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
+        <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />
+        <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" v-model:value="formState" />
+        <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" v-model:value="formState" />
+        <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" v-model:value="formState" />
+        <SmartsheetColumnTimeOptions v-if="formState.uidt === UITypes.Time" v-model:value="formState" />
+        <SmartsheetColumnNumberOptions v-if="formState.uidt === UITypes.Number" v-model:value="formState" />
+        <SmartsheetColumnDecimalOptions v-if="formState.uidt === UITypes.Decimal" v-model:value="formState" />
+        <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" />
-        <LazySmartsheetColumnLinkedToAnotherRecordOptions
+        <SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" v-model:value="formState" />
+        <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" />
-        <LazySmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
-        <LazySmartsheetColumnUserOptions v-if="formState.uidt === UITypes.User" v-model:value="formState" :is-edit="isEdit" />
+        <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" v-model:value="formState" />
+        <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
+        <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,17 +1871,19 @@ onKeyStroke('ArrowDown', onDown)
                         </NcMenu>
                       </template>
                       <template v-else #overlay>
-                        <SmartsheetColumnEditOrAddProvider
-                          v-if="addColumnDropdown"
-                          :preload="preloadColumn"
-                          :column-position="columnOrder"
-                          :class="{ hidden: isJsonExpand }"
-                          @submit="closeAddColumnDropdown(true)"
-                          @cancel="closeAddColumnDropdown()"
-                          @click.stop
-                          @keydown.stop
-                          @mounted="preloadColumn = undefined"
-                        />
+                        <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
+                          <LazySmartsheetColumnEditOrAddProvider
+                            v-if="addColumnDropdown"
+                            :preload="preloadColumn"
+                            :column-position="columnOrder"
+                            :class="{ hidden: isJsonExpand }"
+                            @submit="closeAddColumnDropdown(true)"
+                            @cancel="closeAddColumnDropdown()"
+                            @click.stop
+                            @keydown.stop
+                            @mounted="preloadColumn = undefined"
+                          />
+                        </div>
                       </template>
                     </a-dropdown>
                   </div>

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

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

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

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

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

@@ -42,14 +42,16 @@ provide(IsKanbanInj, ref(true))
       </a-button>
     </div>
     <template #overlay>
-      <LazySmartsheetColumnEditOrAddProvider
-        v-if="open"
-        :column="groupingFieldColumn"
-        @submit="handleSubmit"
-        @cancel="open = false"
-        @click.stop
-        @keydown.stop
-      />
+      <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
+        <LazySmartsheetColumnEditOrAddProvider
+          v-if="open"
+          :column="groupingFieldColumn"
+          @submit="handleSubmit"
+          @cancel="open = false"
+          @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,