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

fix: column config

pull/6540/head
DarkPhoenix2704 1 year ago
parent
f7d083b6e6
commit
efc6eb9415
1 changed files with 184 additions and 175 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. 359
      packages/nc-gui/components/smartsheet/details/Fields.vue

359
packages/nc-gui/components/smartsheet/details/Fields.vue
Unescape View File

@ -391,8 +391,8 @@ const onMove = (_event: { moved: { newIndex: number; oldIndex: number } }) => {
} }
const isColumnValid = (column: TableExplorerColumn) => { const isColumnValid = (column: TableExplorerColumn) => {
const isNewField = newFields.value.find((op) => compareCols(op, column)) const isDeleteOp = ops.value.find((op) => compareCols(column, op.column) && op.op === 'delete')
if (!isNewField) return true if (isDeleteOp) return true
if (!column.title) { if (!column.title) {
return false return false
} }
@ -558,6 +558,8 @@ const toggleVisibility = async (checked: boolean, field: Field) => {
}) })
} }
const isColumnsValid = computed(() => fields.value.every((f) => isColumnValid(f)))
onMounted(async () => { onMounted(async () => {
if (!meta.value?.id) return if (!meta.value?.id) return
columnsHash.value = (await $api.dbTableColumn.hash(meta.value?.id)).hash columnsHash.value = (await $api.dbTableColumn.hash(meta.value?.id)).hash
@ -566,7 +568,7 @@ onMounted(async () => {
<template> <template>
<div class="w-full h-full p-4"> <div class="w-full h-full p-4">
<div class="max-w-250 w-full mx-auto"> <div class="max-w-250 h-full w-full mx-auto">
<div class="flex w-full justify-between py-2"> <div class="flex w-full justify-between py-2">
<a-input v-model:value="searchQuery" class="!h-8 !px-1 !rounded-lg !w-72" placeholder="Search field"> <a-input v-model:value="searchQuery" class="!h-8 !px-1 !rounded-lg !w-72" placeholder="Search field">
<template #prefix> <template #prefix>
@ -600,7 +602,7 @@ onMounted(async () => {
type="primary" type="primary"
size="small" size="small"
:loading="loading" :loading="loading"
:disabled="!loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1" :disabled="isColumnsValid ? !loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1 : true"
@click="saveChanges()" @click="saveChanges()"
> >
Save changes Save changes
@ -608,185 +610,192 @@ onMounted(async () => {
</div> </div>
</div> </div>
<div class="flex flex-row h-full rounded-lg border-1 border-gray-200"> <div class="flex flex-row h-full rounded-lg border-1 border-gray-200">
<Draggable v-model="fields" item-key="id" class="w-full h-full flex-grow-1" @change="onMove($event)"> <div class="nc-scrollbar-md w-full h-full flex-grow-1">
<template #item="{ element: field }"> <Draggable v-model="fields" item-key="id" @change="onMove($event)">
<div <template #item="{ element: field }">
v-if="field.title && field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv" <div
class="flex px-2 bg-white hover:bg-gray-100 first:rounded-t-lg border-b-1 border-gray-200 pl-5 group" v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv"
:class="` ${compareCols(field, activeField) ? 'selected' : ''}`" class="flex px-2 bg-white hover:bg-gray-100 first:rounded-t-lg border-b-1 border-gray-200 pl-5 group"
@click="changeField(field, $event)" :class="` ${compareCols(field, activeField) ? 'selected' : ''}`"
> @click="changeField(field, $event)"
<div class="flex items-center flex-1 py-2.5 gap-1 w-2/6"> >
<component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" /> <div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
<NcCheckbox <component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-600 mr-1" />
v-if="field.id && viewFieldsMap[field.id]" <NcCheckbox
:checked=" v-if="field.id && viewFieldsMap[field.id]"
visibilityOps.find((op) => op.column.fk_column_id === field.id)?.visible ?? viewFieldsMap[field.id].show :checked="
" visibilityOps.find((op) => op.column.fk_column_id === field.id)?.visible ?? viewFieldsMap[field.id].show
@change=" "
(event) => { @change="
toggleVisibility(event.target.checked, viewFieldsMap[field.id]) (event) => {
} toggleVisibility(event.target.checked, viewFieldsMap[field.id])
" }
/> "
<NcCheckbox v-else :disabled="true" class="opacity-0" :checked="true" /> />
<SmartsheetHeaderCellIcon <NcCheckbox v-else :disabled="true" class="opacity-0" :checked="true" />
v-if="field" <SmartsheetHeaderCellIcon
:column-meta="fieldState(field) || field" v-if="field"
:class="{ :column-meta="fieldState(field) || field"
'text-brand-500': compareCols(field, activeField), :class="{
}" 'text-brand-500': compareCols(field, activeField),
/> }"
<span />
:class="{ <span
'text-brand-500': compareCols(field, activeField), :class="{
}" 'text-brand-500': compareCols(field, activeField),
class="truncate max-w-64" }"
> class="truncate max-w-64"
{{ fieldState(field)?.title || field.title }}
</span>
</div>
<div class="flex items-center justify-end gap-1">
<div class="flex items-center">
<NcBadge v-if="fieldStatus(field) === 'delete'" color="red" :border="false" class="bg-red-50 text-red-700">
Deleted field
</NcBadge>
<NcBadge
v-else-if="fieldStatus(field) === 'add'"
color="orange"
:border="false"
class="bg-green-50 text-green-700"
>
New field
</NcBadge>
<NcBadge
v-else-if="fieldStatus(field) === 'update'"
color="orange"
:border="false"
class="bg-orange-50 text-orange-700"
> >
Updated field {{ fieldState(field)?.title || field.title }}
</NcBadge> </span>
<NcBadge v-if="!isColumnValid(field)" color="yellow" :border="false" class="ml-1 bg-yellow-50 text-yellow-700">
Incomplete configuration
</NcBadge>
</div> </div>
<NcButton <div class="flex items-center justify-end gap-1">
v-if="fieldStatus(field) === 'delete' || fieldStatus(field) === 'update'" <div class="flex items-center">
type="secondary" <NcBadge v-if="fieldStatus(field) === 'delete'" color="red" :border="false" class="bg-red-50 text-red-700">
size="small" Deleted field
class="no-action mr-2" </NcBadge>
:disabled="loading" <NcBadge
@click="recoverField(field)" v-else-if="fieldStatus(field) === 'add'"
> color="orange"
<div class="flex items-center text-xs gap-1"> :border="false"
<GeneralIcon icon="reload" /> class="bg-green-50 text-green-700"
Restore >
New field
</NcBadge>
<NcBadge
v-else-if="fieldStatus(field) === 'update'"
color="orange"
:border="false"
class="bg-orange-50 text-orange-700"
>
Updated field
</NcBadge>
<NcBadge
v-if="!isColumnValid(field)"
color="yellow"
:border="false"
class="ml-1 bg-yellow-50 text-yellow-700"
>
Incomplete configuration
</NcBadge>
</div> </div>
</NcButton> <NcButton
<NcDropdown v-else :trigger="['click']" overlay-class-name="nc-dropdown-table-explorer" @click.stop> v-if="fieldStatus(field) === 'delete' || fieldStatus(field) === 'update'"
<GeneralIcon icon="threeDotVertical" class="no-action opacity-0 group-hover:(opacity-100) text-gray-500" /> type="secondary"
size="small"
<template #overlay> class="no-action mr-2"
<NcMenu> :disabled="loading"
<NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)"> @click="recoverField(field)"
<Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
</NcMenuItem>
<NcMenuItem v-if="!field.pv" key="table-explorer-insert-above" @click="addField(field, true)">
<Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>Insert above</span>
</NcMenuItem>
<NcMenuItem key="table-explorer-insert-below" @click="addField(field)">
<Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>Insert below</span>
</NcMenuItem>
<a-menu-divider class="my-1" />
<NcMenuItem key="table-explorer-delete" @click="onFieldDelete(field)">
<div class="text-red-500">
<GeneralIcon icon="delete" class="group-hover:text-accent" />
Delete
</div>
</NcMenuItem>
</NcMenu>
</template>
</NcDropdown>
<MdiChevronRight
class="text-brand-500 opacity-0"
:class="{
'opacity-100': compareCols(field, activeField),
}"
/>
</div>
</div>
</template>
<template v-if="displayColumn && displayColumn.title.toLowerCase().includes(searchQuery.toLowerCase())" #header>
<div
class="flex px-2 bg-white hover:bg-gray-100 border-b-1 border-gray-200 first:rounded-tl-lg last:border-b-1 pl-5 group"
:class="` ${compareCols(displayColumn, activeField) ? 'selected' : ''}`"
@click="changeField(displayColumn, $event)"
>
<div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
<component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-200 mr-1" />
<NcCheckbox :disabled="true" :checked="true" />
<SmartsheetHeaderCellIcon
v-if="displayColumn"
:column-meta="fieldState(displayColumn) || displayColumn"
:class="{
'text-brand-500': compareCols(displayColumn, activeField),
}"
/>
<span
:class="{
'text-brand-500': compareCols(displayColumn, activeField),
}"
>
{{ fieldState(displayColumn)?.title || displayColumn.title }}
</span>
</div>
<div class="flex items-center justify-end gap-1">
<div class="flex items-center">
<NcBadge
v-if="fieldStatus(displayColumn) === 'delete'"
color="red"
:border="false"
class="bg-red-50 text-red-700"
> >
Deleted field <div class="flex items-center text-xs gap-1">
</NcBadge> <GeneralIcon icon="reload" />
Restore
<NcBadge </div>
v-else-if="fieldStatus(displayColumn) === 'update'" </NcButton>
color="orange" <NcDropdown v-else :trigger="['click']" overlay-class-name="nc-dropdown-table-explorer" @click.stop>
:border="false" <GeneralIcon icon="threeDotVertical" class="no-action opacity-0 group-hover:(opacity-100) text-gray-500" />
class="bg-orange-50 text-orange-700"
<template #overlay>
<NcMenu>
<NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)">
<Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
</NcMenuItem>
<NcMenuItem v-if="!field.pv" key="table-explorer-insert-above" @click="addField(field, true)">
<Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>Insert above</span>
</NcMenuItem>
<NcMenuItem key="table-explorer-insert-below" @click="addField(field)">
<Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>Insert below</span>
</NcMenuItem>
<a-menu-divider class="my-1" />
<NcMenuItem key="table-explorer-delete" @click="onFieldDelete(field)">
<div class="text-red-500">
<GeneralIcon icon="delete" class="group-hover:text-accent" />
Delete
</div>
</NcMenuItem>
</NcMenu>
</template>
</NcDropdown>
<MdiChevronRight
class="text-brand-500 opacity-0"
:class="{
'opacity-100': compareCols(field, activeField),
}"
/>
</div>
</div>
</template>
<template v-if="displayColumn && displayColumn.title.toLowerCase().includes(searchQuery.toLowerCase())" #header>
<div
class="flex px-2 bg-white hover:bg-gray-100 border-b-1 border-gray-200 first:rounded-tl-lg last:border-b-1 pl-5 group"
:class="` ${compareCols(displayColumn, activeField) ? 'selected' : ''}`"
@click="changeField(displayColumn, $event)"
>
<div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
<component :is="iconMap.drag" class="cursor-move !h-3.75 text-gray-200 mr-1" />
<NcCheckbox :disabled="true" :checked="true" />
<SmartsheetHeaderCellIcon
v-if="displayColumn"
:column-meta="fieldState(displayColumn) || displayColumn"
:class="{
'text-brand-500': compareCols(displayColumn, activeField),
}"
/>
<span
:class="{
'text-brand-500': compareCols(displayColumn, activeField),
}"
> >
Updated field {{ fieldState(displayColumn)?.title || displayColumn.title }}
</NcBadge> </span>
</div> </div>
<NcButton <div class="flex items-center justify-end gap-1">
v-if="fieldStatus(displayColumn) === 'delete' || fieldStatus(displayColumn) === 'update'" <div class="flex items-center">
type="secondary" <NcBadge
size="small" v-if="fieldStatus(displayColumn) === 'delete'"
class="no-action mr-2" color="red"
:disabled="loading" :border="false"
@click="recoverField(displayColumn)" class="bg-red-50 text-red-700"
> >
<div class="flex items-center text-xs gap-1"> Deleted field
<GeneralIcon icon="reload" /> </NcBadge>
Restore
<NcBadge
v-else-if="fieldStatus(displayColumn) === 'update'"
color="orange"
:border="false"
class="bg-orange-50 text-orange-700"
>
Updated field
</NcBadge>
</div> </div>
</NcButton> <NcButton
<MdiChevronRight v-if="fieldStatus(displayColumn) === 'delete' || fieldStatus(displayColumn) === 'update'"
class="text-brand-500 opacity-0" type="secondary"
:class="{ size="small"
'opacity-100': compareCols(displayColumn, activeField), class="no-action mr-2"
}" :disabled="loading"
/> @click="recoverField(displayColumn)"
>
<div class="flex items-center text-xs gap-1">
<GeneralIcon icon="reload" />
Restore
</div>
</NcButton>
<MdiChevronRight
class="text-brand-500 opacity-0"
:class="{
'opacity-100': compareCols(displayColumn, activeField),
}"
/>
</div>
</div> </div>
</div> </template>
</template> </Draggable>
</Draggable> </div>
<Transition v-if="!changingField" name="slide-fade"> <Transition v-if="!changingField" name="slide-fade">
<div class="border-gray-200 border-l-1 rounded-r-xl h-full"> <div class="border-gray-200 border-l-1 rounded-r-xl h-full">
<SmartsheetColumnEditOrAddProvider <SmartsheetColumnEditOrAddProvider

Write Preview
Loading…
Cancel
Save