|
|
@ -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"> |
|
|
|