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

feat(nc-gui): update advance link field modal with new design

pull/8367/head
Ramesh Mane 5 months ago
parent
f54ef63b3e
commit
ff06da8726
3 changed files with 153 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
  2. 171
      packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
  3. 13
      packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

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

@ -363,6 +363,7 @@ const isFullUpdateAllowed = computed(() => {
'min-w-[500px]': formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links,
'overflow-visible': formState.uidt === UITypes.Formula,
'!w-[600px]': formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links,
'min-w-[400px] !w-full': isLinksOrLTAR(formState.uidt),
'shadow-lg shadow-gray-300 border-1 border-gray-200 rounded-xl p-5': !embedMode,
}"
@keydown="handleEscape"

171
packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
Unescape View File

@ -44,9 +44,15 @@ const { metas, getMeta } = useMetas()
const isMm = computed(() => vModel.value.type === RelationTypes.MANY_TO_MANY)
const pkColumn = computed(() => {
return meta?.value?.columns?.find((f) => f.pk)
})
// set default value
vModel.value.custom = {
base_id: meta.value?.base_id,
column_id: pkColumn.value?.id,
junc_base_id: meta.value?.base_id,
}
console.log('meta', meta.value, vModel.value)
@ -54,8 +60,8 @@ const { basesList, bases } = storeToRefs(useBases())
const tablesStore = useTablesStore()
const { baseTables, activeTable, activeTables: sourceTables } = storeToRefs(tablesStore)
const currentDisplayValueColumn = computed(() => {
return meta?.value?.columns?.find((f) => f.pv)
const sourceColumn = computed(() => {
return meta?.value?.columns?.find((f) => vModel.value.custom?.column_id === f.id)
})
/*const refTables = computed(() =>{
@ -75,6 +81,14 @@ const refTables = computed(() => {
return [...baseTables.value.get(vModel.value.custom.base_id).filter((t) => t.type === ModelTypes.TABLE)]
})
const junctionTables = computed(() => {
if (!baseTables.value.get(vModel.value.custom.junc_base_id)) {
return []
}
return [...baseTables.value.get(vModel.value.custom.junc_base_id).filter((t) => t.type === ModelTypes.TABLE)]
})
const columns = computed(() => {
if (!meta.value?.columns) {
return []
@ -107,17 +121,52 @@ const juncTableColumns = computed(() => {
const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
const onModelIdChange = async (modelId: string) => {
const resetSelectedColumns = (isJunction: boolean = false) => {
if (isJunction) {
if (vModel.value.custom.junc_column_id) {
vModel.value.custom.junc_column_id = null
}
if (vModel.value.custom.junc_ref_column_id) {
vModel.value.custom.junc_ref_column_id = null
}
} else {
if (vModel.value.custom.ref_column_id) {
vModel.value.custom.ref_column_id = null
}
}
}
const onModelIdChange = async (modelId: string, isJunctionModel: boolean = false) => {
// todo: optimise
await getMeta(modelId, false, false, vModel.value.custom.base_id)
await getMeta(modelId)
await onDataTypeChange()
resetSelectedColumns(isJunctionModel)
}
const onBaseChange = async (baseId) => {
const onBaseChange = async (baseId, isJunctionBase: boolean = false) => {
await tablesStore.loadProjectTables(baseId)
vModel.value.custom.ref_model_id = null
if (isJunctionBase) {
if (vModel.value.custom.junc_model_id) {
vModel.value.custom.junc_model_id = null
}
resetSelectedColumns(true)
} else {
if (vModel.value.custom.ref_model_id) {
vModel.value.custom.ref_model_id = null
}
resetSelectedColumns(false)
}
}
watch(pkColumn, () => {
if (pkColumn.value?.id && !vModel.value.custom?.column_id) {
vModel.value.custom = {
...vModel.value.custom,
column_id: pkColumn.value.id,
}
}
})
</script>
<template>
@ -189,7 +238,6 @@ const onBaseChange = async (baseId) => {
placeholder="-select field-"
:filter-option="filterOption"
:bordered="false"
:default-value="currentDisplayValueColumn?.id"
dropdown-class-name="nc-dropdown-ltar-source-column !text-xs"
@change="onDataTypeChange"
>
@ -212,11 +260,38 @@ const onBaseChange = async (baseId) => {
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
<div class="nc-relation-settings-table-connector-point nc-right" :class="`column-type-${vModel.type}`"></div>
</a-form-item>
</div>
<template v-if="isMm">
<div class="nc-relation-settings-table flex flex-col">
<div class="nc-relation-settings-table-header">Junction</div>
<a-form-item class="nc-relation-settings-table-row nc-ltar-junction-base" v-bind="validateInfos['custom.junc_base_id']">
<a-select
v-model:value="vModel.custom.junc_base_id"
show-search
:filter-option="filterOption"
:bordered="false"
dropdown-class-name="nc-dropdown-ltar-junction-base"
@change="onBaseChange(vModel.custom.junc_base_id, true)"
>
<a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralProjectIcon :color="parseProp(base.meta).iconColor" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ base.title }}</template>
<span>{{ base.title }}</span>
</NcTooltip>
</div>
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
<a-form-item
class="nc-relation-settings-table-row nc-ltar-junction-table"
v-bind="validateInfos['custom.junc_model_id']"
@ -224,21 +299,20 @@ const onBaseChange = async (baseId) => {
<a-select
v-model:value="vModel.custom.junc_model_id"
show-search
placeholder="-select table-"
:bordered="false"
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onModelIdChange(vModel.custom.junc_model_id)"
dropdown-class-name="nc-dropdown-ltar-junction-table"
@change="onModelIdChange(vModel.custom.junc_model_id, true)"
>
<a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
<a-select-option v-for="table of junctionTables" :key="table.title" :value="table.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<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 class="text-8px">({{ bases.get(table.base_id)?.title }})</span></span
>
<span>{{ table.title }}</span>
</NcTooltip>
</div>
</a-select-option>
@ -249,15 +323,16 @@ const onBaseChange = async (baseId) => {
</a-form-item>
<a-form-item
class="nc-relation-settings-table-row nc-ltar-junction-column"
class="nc-relation-settings-table-row nc-ltar-source-junction-column"
v-bind="validateInfos['custom.junc_column_id']"
>
<a-select
v-model:value="vModel.custom.junc_column_id"
show-search
placeholder="-select field-"
:bordered="false"
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
dropdown-class-name="nc-dropdown-ltar-source-junction-column"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
@ -269,8 +344,10 @@ const onBaseChange = async (baseId) => {
></SmartsheetHeaderVirtualCellIcon>
<SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<NcTooltip class="flex-1 truncate" :show-on-truncate-only="sourceColumn?.dt === column.dt">
<template #title>{{
sourceColumn?.dt === column.dt ? column.title : `Incompatible with column '${sourceColumn?.title}'`
}}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
@ -279,32 +356,44 @@ const onBaseChange = async (baseId) => {
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
<div class="nc-relation-settings-table-connector-point nc-left" :class="`column-type-${vModel.type}`"></div>
</a-form-item>
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Ref column in jn table"
class="nc-relation-settings-table-row nc-ltar-child-junction-column"
v-bind="validateInfos['custom.junc_ref_column_id']"
>
<a-select
v-model:value="vModel.custom.junc_ref_column_id"
show-search
placeholder="-select field-"
:bordered="false"
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
dropdown-class-name="nc-dropdown-ltar-child-junction-column"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
<SmartsheetHeaderVirtualCellIcon
v-if="isVirtualCol(column)"
:column-meta="column"
></SmartsheetHeaderVirtualCellIcon>
<SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<NcTooltip class="flex-1 truncate" :show-on-truncate-only="sourceColumn?.dt === column.dt">
<template #title>{{
sourceColumn?.dt === column.dt ? column.title : `Incompatible with column '${sourceColumn?.title}'`
}}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
<div class="nc-relation-settings-table-connector-point nc-right" :class="`column-type-${vModel.type}`"></div>
</a-form-item>
</div>
</template>
@ -373,7 +462,12 @@ const onBaseChange = async (baseId) => {
dropdown-class-name="nc-dropdown-ltar-child-column !text-xs"
@change="onDataTypeChange"
>
<a-select-option v-for="column of refTableColumns" :key="column.title" :value="column.id">
<a-select-option
v-for="column of refTableColumns"
:key="column.title"
:value="column.id"
:disabled="sourceColumn?.dt !== column.dt"
>
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<SmartsheetHeaderVirtualCellIcon
@ -382,8 +476,10 @@ const onBaseChange = async (baseId) => {
></SmartsheetHeaderVirtualCellIcon>
<SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<NcTooltip class="flex-1 truncate" :show-on-truncate-only="sourceColumn?.dt === column.dt">
<template #title>{{
sourceColumn?.dt === column.dt ? column.title : `Incompatible with column '${sourceColumn?.title}'`
}}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
@ -392,6 +488,7 @@ const onBaseChange = async (baseId) => {
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
<div class="nc-relation-settings-table-connector-point nc-left" :class="`column-type-${vModel.type}`"></div>
</a-form-item>
</div>
</div>
@ -407,7 +504,7 @@ const onBaseChange = async (baseId) => {
}
.nc-relation-settings-table-row {
@apply py-[1px] w-full flex items-center space-x-2 !my-0;
@apply py-[1px] w-full flex items-center space-x-2 !my-0 relative;
&:not(:last-child) {
@apply border-b border-gray-200;
@ -426,6 +523,28 @@ const onBaseChange = async (baseId) => {
:deep(.ant-select-arrow) {
@apply mr-2;
}
.nc-relation-settings-table-connector-point {
@apply absolute top-[50%] rounded-full w-2 h-2;
transform: translateY(-50%);
&.nc-right {
@apply -right-1;
}
&.nc-left {
@apply -left-1;
}
}
.column-type-mm {
@apply bg-pink-500;
}
.column-type-hm {
@apply bg-orange-500;
}
.column-type-oo {
@apply bg-purple-500;
}
}
}
</style>

13
packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
Unescape View File

@ -186,11 +186,8 @@ const onCustomSwitchToggle = () => {
</script>
<template>
<div class="w-full flex flex-col mb-2 mt-4">
<div class="mb-2">
Relation Type <span class="text-red-500">*</span>
<a-switch v-model:checked="vModel.is_custom_link" size="small" name="Custom" @change="onCustomSwitchToggle" /> Custom
</div>
<div class="w-full flex flex-col mb-2 mt-2">
<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">
<a-form-item :label="$t('labels.relationType')" v-bind="validateInfos.type" class="nc-ltar-relation-type">
@ -216,7 +213,11 @@ const onCustomSwitchToggle = () => {
</a-radio-group>
</a-form-item>
</div>
<div class="mt-6">
<div class="mt-4">
<a-switch v-model:checked="vModel.is_custom_link" size="small" name="Custom" @change="onCustomSwitchToggle" />
<span class="ml-3">Advanced Link</span>
</div>
<div class="mt-3">
<LazySmartsheetColumnLinkAdvancedOptions v-if="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">

Write Preview
Loading…
Cancel
Save