github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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>
pull/8870/head
Ramesh Mane 5 months ago committed by GitHub
parent
b3ab974334
commit
f141049937
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 95 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      packages/nc-gui/components/smartsheet/Details.vue
  2. 34
      packages/nc-gui/components/smartsheet/Form.vue
  3. 2
      packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue
  4. 38
      packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
  5. 2
      packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
  6. 24
      packages/nc-gui/components/smartsheet/grid/Table.vue
  7. 22
      packages/nc-gui/components/smartsheet/header/Cell.vue
  8. 22
      packages/nc-gui/components/smartsheet/header/VirtualCell.vue
  9. 18
      packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
  10. 4
      packages/nocodb/src/services/columns.service.ts

8
packages/nc-gui/components/smartsheet/Details.vue
Unescape View File

@ -60,7 +60,7 @@ watch(openedSubTab, () => {
<div>Fields</div> <div>Fields</div>
</div> </div>
</template> </template>
<SmartsheetDetailsFields /> <LazySmartsheetDetailsFields />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="relation"> <a-tab-pane key="relation">
<template #tab> <template #tab>
@ -69,7 +69,7 @@ watch(openedSubTab, () => {
<div>{{ $t('title.relations') }}</div> <div>{{ $t('title.relations') }}</div>
</div> </div>
</template> </template>
<SmartsheetDetailsErd /> <LazySmartsheetDetailsErd />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="api"> <a-tab-pane key="api">
@ -79,7 +79,7 @@ watch(openedSubTab, () => {
<div>{{ $t('labels.apiSnippet') }}</div> <div>{{ $t('labels.apiSnippet') }}</div>
</div> </div>
</template> </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"> <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" /> <a-spin size="large" :indicator="indicator" />
</div> </div>
@ -92,7 +92,7 @@ watch(openedSubTab, () => {
<div>{{ $t('objects.webhooks') }}</div> <div>{{ $t('objects.webhooks') }}</div>
</div> </div>
</template> </template>
<SmartsheetDetailsWebhooks /> <LazySmartsheetDetailsWebhooks />
</a-tab-pane> </a-tab-pane>
</NcTabs> </NcTabs>
</div> </div>

34
packages/nc-gui/components/smartsheet/Form.vue
Unescape View File

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

2
packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue
Unescape View File

@ -37,7 +37,7 @@ onMounted(() => {
} }
vModel.value.fk_barcode_value_column_id = vModel.value.fk_barcode_value_column_id =
(column?.value?.colOptions as Record<string, any>)?.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) => { watch(columnsAllowedAsBarcodeValue, (newColumnsAllowedAsBarcodeValue) => {

38
packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
Unescape View File

@ -471,33 +471,33 @@ const isFullUpdateAllowed = computed(() => {
</div> </div>
<template v-if="!readOnly && formState.uidt"> <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-if="[UITypes.DateTime, UITypes.CreatedTime, UITypes.LastModifiedTime].includes(formState.uidt)"
v-model:value="formState" 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" v-if="formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links"
:key="`${formState.uidt}-${formState.id || formState.title}`" :key="`${formState.uidt}-${formState.id || formState.title}`"
v-model:value="formState" v-model:value="formState"
:is-edit="isEdit" :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 <SmartsheetColumnSelectOptions
v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect" v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"
v-model:value="formState" v-model:value="formState"

2
packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
Unescape View File

@ -33,7 +33,7 @@ onMounted(() => {
// set default value // set default value
vModel.value.fk_qr_value_column_id = vModel.value.fk_qr_value_column_id =
(column?.value?.colOptions as Record<string, any>)?.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({ setAdditionalValidations({

24
packages/nc-gui/components/smartsheet/grid/Table.vue
Unescape View File

@ -1871,17 +1871,19 @@ onKeyStroke('ArrowDown', onDown)
</NcMenu> </NcMenu>
</template> </template>
<template v-else #overlay> <template v-else #overlay>
<SmartsheetColumnEditOrAddProvider <div class="overflow-auto max-h-[max(80vh,500px)] min-w-[384px]">
v-if="addColumnDropdown" <LazySmartsheetColumnEditOrAddProvider
:preload="preloadColumn" v-if="addColumnDropdown"
:column-position="columnOrder" :preload="preloadColumn"
:class="{ hidden: isJsonExpand }" :column-position="columnOrder"
@submit="closeAddColumnDropdown(true)" :class="{ hidden: isJsonExpand }"
@cancel="closeAddColumnDropdown()" @submit="closeAddColumnDropdown(true)"
@click.stop @cancel="closeAddColumnDropdown()"
@keydown.stop @click.stop
@mounted="preloadColumn = undefined" @keydown.stop
/> @mounted="preloadColumn = undefined"
/>
</div>
</template> </template>
</a-dropdown> </a-dropdown>
</div> </div>

22
packages/nc-gui/components/smartsheet/header/Cell.vue
Unescape View File

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

22
packages/nc-gui/components/smartsheet/header/VirtualCell.vue
Unescape View File

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

18
packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
Unescape View File

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

4
packages/nocodb/src/services/columns.service.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save