Browse Source

fix: GUI corrections

pull/8367/head
Pranav C 5 months ago
parent
commit
42d6241a00
  1. 198
      packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
  2. 6
      packages/nocodb/src/db/genRollupSelectv2.ts

198
packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@ -157,7 +157,6 @@ const handleUpdateRefTable = () => {
updateFieldName() updateFieldName()
}) })
} }
const oneToOneEnabled = ref(false)
const isAdvancedOptionsShownEasterEgg = ref(false) const isAdvancedOptionsShownEasterEgg = ref(false)
@ -196,9 +195,7 @@ const handleShowAdvanceOptions = () => {
</script> </script>
<template> <template>
<div class="w-full flex flex-col mb-2 mt-1"> <div class="w-full flex flex-col gap-4">
<div class="mb-2">Relation Type <span class="text-red-500">*</span></div>
<div class="border-2 p-6">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<a-form-item :label="$t('labels.relationType')" v-bind="validateInfos.type" class="nc-ltar-relation-type"> <a-form-item :label="$t('labels.relationType')" v-bind="validateInfos.type" class="nc-ltar-relation-type">
<a-radio-group v-model:value="linkType" name="type" v-bind="validateInfos.type" :disabled="isEdit"> <a-radio-group v-model:value="linkType" name="type" v-bind="validateInfos.type" :disabled="isEdit">
@ -214,7 +211,7 @@ const handleShowAdvanceOptions = () => {
</span> </span>
{{ $t('title.hasMany') }} {{ $t('title.hasMany') }}
</a-radio> </a-radio>
<a-radio value="oo" data-testid="One to One"> <a-radio value="oo" data-testid="One to One" @dblclick="handleShowAdvanceOptions">
<span class="nc-ltar-icon nc-oo-icon"> <span class="nc-ltar-icon nc-oo-icon">
<GeneralIcon icon="oneToOneSolid" /> <GeneralIcon icon="oneToOneSolid" />
</span> </span>
@ -223,117 +220,109 @@ const handleShowAdvanceOptions = () => {
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
</div> </div>
<div v-if="isAdvancedOptionsShownEasterEgg && isEeUI" class="mt-4"> <div v-if="isAdvancedOptionsShownEasterEgg && isEeUI">
<a-switch v-model:checked="vModel.is_custom_link" size="small" name="Custom" @change="onCustomSwitchToggle" /> <a-switch v-model:checked="vModel.is_custom_link" size="small" name="Custom" @change="onCustomSwitchToggle" />
<span class="ml-3">Advanced Link</span> <span class="ml-3">Advanced Link</span>
</div> </div>
<div <div v-if="isEeUI && vModel.is_custom_link" :class="{}">
:class="{ <LazySmartsheetColumnLinkAdvancedOptions v-model:value="vModel" :meta="meta" />
'mt-3': isAdvancedOptionsShownEasterEgg, </div>
'mt-4': !isAdvancedOptionsShownEasterEgg, <template v-else>
}" <a-form-item class="flex w-full pb-2 nc-ltar-child-table" v-bind="validateInfos.childId">
> <a-select
<LazySmartsheetColumnLinkAdvancedOptions v-if="isEeUI && vModel.is_custom_link" v-model:value="vModel" />
<template v-else>
<a-form-item class="flex w-full pb-2 nc-ltar-child-table" v-bind="validateInfos.childId">
<a-select
v-model:value="referenceTableChildId" v-model:value="referenceTableChildId"
show-search show-search
:disabled="isEdit" :disabled="isEdit"
:filter-option="filterOption" :filter-option="filterOption"
placeholder="select table to link" placeholder="select table to link"
dropdown-class-name="nc-dropdown-ltar-child-table" dropdown-class-name="nc-dropdown-ltar-child-table"
@change="handleUpdateRefTable" @change="handleUpdateRefTable"
> >
<template #suffixIcon> <template #suffixIcon>
<GeneralIcon icon="arrowDown" class="text-gray-700" /> <GeneralIcon icon="arrowDown" class="text-gray-700" />
</template> </template>
<a-select-option v-for="table of refTables" :key="table.title" :value="table.id"> <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
<div class="flex w-full items-center gap-2"> <div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center"> <div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="table" class="text-gray-500" /> <GeneralTableIcon :meta="table" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ table.title }}</template>
<span>{{ table.title }}</span>
</NcTooltip>
</div> </div>
</a-select-option> <NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #suffixIcon> <template #title>{{ table.title }}</template>
<GeneralIcon class="" icon="chevronDown" /> <span>{{ table.title }}</span>
</template> </NcTooltip>
</a-select> </div>
</a-form-item> </a-select-option>
</template> </a-select>
</a-form-item>
<div v-if="isEeUI" class="w-full flex-col"> </template>
<div class="flex gap-2 items-center" :class="{ 'mb-2': limitRecToView }">
<a-switch <template v-if="isEeUI">
v-model:checked="limitRecToView" <div class="flex gap-2 items-center" :class="{ 'mb-2': limitRecToView }">
v-e="['c:link:limit-record-by-view', { status: limitRecToView }]" <a-switch
size="small" v-model:checked="limitRecToView"
:disabled="!vModel.childId" v-e="['c:link:limit-record-by-view', { status: limitRecToView }]"
@change="onLimitRecToViewChange" size="small"
></a-switch> :disabled="!vModel.childId"
<span @change="onLimitRecToViewChange"
v-e="['c:link:limit-record-by-view', { status: limitRecToView }]" ></a-switch>
class="text-s" <span
data-testid="nc-limit-record-view" v-e="['c:link:limit-record-by-view', { status: limitRecToView }]"
@click="limitRecToView = !!vModel.childId && !limitRecToView" class="text-s"
>Limit record selection to a view</span data-testid="nc-limit-record-view"
> @click="limitRecToView = !!vModel.childId && !limitRecToView"
</div> >Limit record selection to a view</span
<a-form-item v-if="limitRecToView" class="!pl-8 flex w-full pb-2 mt-4 space-y-2 nc-ltar-child-view"> >
<NcSelect </div>
v-model:value="vModel.childViewId" <a-form-item v-if="limitRecToView" class="!pl-8 flex w-full pb-2 mt-4 space-y-2 nc-ltar-child-view">
:placeholder="$t('labels.selectView')" <NcSelect
show-search v-model:value="vModel.childViewId"
:filter-option="filterOption" :placeholder="$t('labels.selectView')"
dropdown-class-name="nc-dropdown-ltar-child-view" show-search
> :filter-option="filterOption"
<a-select-option v-for="view of refViews" :key="view.title" :value="view.id"> dropdown-class-name="nc-dropdown-ltar-child-view"
<div class="flex w-full items-center gap-2"> >
<div class="min-w-5 flex items-center justify-center"> <a-select-option v-for="view of refViews" :key="view.title" :value="view.id">
<GeneralViewIcon :meta="view" class="text-gray-500" /> <div class="flex w-full items-center gap-2">
</div> <div class="min-w-5 flex items-center justify-center">
<NcTooltip class="flex-1 truncate" show-on-truncate-only> <GeneralViewIcon :meta="view" class="text-gray-500" />
<template #title>{{ view.title }}</template>
<span>{{ view.title }}</span>
</NcTooltip>
</div> </div>
</a-select-option> <NcTooltip class="flex-1 truncate" show-on-truncate-only>
</NcSelect> <template #title>{{ view.title }}</template>
</a-form-item> <span>{{ view.title }}</span>
</NcTooltip>
<div class="mt-4 flex gap-2 items-center" :class="{ 'mb-2': limitRecToCond }"> </div>
<a-switch </a-select-option>
v-model:checked="limitRecToCond" </NcSelect>
v-e="['c:link:limit-record-by-filter', { status: limitRecToCond }]" </a-form-item>
:disabled="!vModel.childId"
size="small" <div class="flex gap-2 items-center" :class="{ 'mb-2': limitRecToCond }">
></a-switch> <a-switch
<span v-model:checked="limitRecToCond"
v-e="['c:link:limit-record-by-filter', { status: limitRecToCond }]" v-e="['c:link:limit-record-by-filter', { status: limitRecToCond }]"
data-testid="nc-limit-record-filters" :disabled="!vModel.childId"
@click="limitRecToCond = !!vModel.childId && !limitRecToCond" size="small"
> ></a-switch>
Limit record selection to filters <span
</span> v-e="['c:link:limit-record-by-filter', { status: limitRecToCond }]"
</div> data-testid="nc-limit-record-filters"
<div v-if="limitRecToCond" class="overflow-auto"> @click="limitRecToCond = !!vModel.childId && !limitRecToCond"
<LazySmartsheetToolbarColumnFilter >
ref="filterRef" Limit record selection to filters
v-model="vModel.filters" </span>
class="!pl-8 !p-0 max-w-620px"
:auto-save="false"
:show-loading="false"
:link="true"
:root-meta="meta"
:link-col-id="vModel.id"
/>
</div>
</div> </div>
</div> <div v-if="limitRecToCond" class="overflow-auto">
<LazySmartsheetToolbarColumnFilter
ref="filterRef"
v-model="vModel.filters"
class="!pl-8 !p-0 max-w-620px"
:auto-save="false"
:show-loading="false"
:link="true"
:root-meta="meta"
:link-col-id="vModel.id"
/>
</div>
</template>
<template v-if="(!isXcdbBase && !isEdit) || isLinks"> <template v-if="(!isXcdbBase && !isEdit) || isLinks">
<div> <div>
<NcButton <NcButton
@ -349,8 +338,7 @@ const handleShowAdvanceOptions = () => {
<GeneralIcon :icon="advancedOptions ? 'arrowUp' : 'arrowDown'" class="h-4 w-4" /> <GeneralIcon :icon="advancedOptions ? 'arrowUp' : 'arrowDown'" class="h-4 w-4" />
</div> </div>
</NcButton>
</NcButton>
</div> </div>
<div v-if="advancedOptions" class="flex flex-col gap-4"> <div v-if="advancedOptions" class="flex flex-col gap-4">

6
packages/nocodb/src/db/genRollupSelectv2.ts

@ -34,11 +34,11 @@ export default async function ({
const parentModel = await parentCol?.getModel(context); const parentModel = await parentCol?.getModel(context);
const refTableAlias = `__nc_rollup`; const refTableAlias = `__nc_rollup`;
const parentBaseModel = await Model.getBaseModelSQL(this.context, { const parentBaseModel = await Model.getBaseModelSQL(context, {
model: parentModel, model: parentModel,
dbDriver: knex, dbDriver: knex,
}); });
const childBaseModel = await Model.getBaseModelSQL(this.context, { const childBaseModel = await Model.getBaseModelSQL(context, {
model: childModel, model: childModel,
dbDriver: knex, dbDriver: knex,
}); });
@ -98,7 +98,7 @@ export default async function ({
const mmModel = await relationColumnOption.getMMModel(context); const mmModel = await relationColumnOption.getMMModel(context);
const mmChildCol = await relationColumnOption.getMMChildColumn(context); const mmChildCol = await relationColumnOption.getMMChildColumn(context);
const mmParentCol = await relationColumnOption.getMMParentColumn(context); const mmParentCol = await relationColumnOption.getMMParentColumn(context);
const assocBaseModel = await Model.getBaseModelSQL(this.context, { const assocBaseModel = await Model.getBaseModelSQL(context, {
id: mmModel.id, id: mmModel.id,
dbDriver: knex, dbDriver: knex,
}); });

Loading…
Cancel
Save