|
|
@ -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,10 +610,11 @@ 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"> |
|
|
|
|
|
|
|
<Draggable v-model="fields" item-key="id" @change="onMove($event)"> |
|
|
|
<template #item="{ element: field }"> |
|
|
|
<template #item="{ element: field }"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-if="field.title && field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv" |
|
|
|
v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv" |
|
|
|
class="flex px-2 bg-white hover:bg-gray-100 first:rounded-t-lg border-b-1 border-gray-200 pl-5 group" |
|
|
|
class="flex px-2 bg-white hover:bg-gray-100 first:rounded-t-lg border-b-1 border-gray-200 pl-5 group" |
|
|
|
:class="` ${compareCols(field, activeField) ? 'selected' : ''}`" |
|
|
|
:class="` ${compareCols(field, activeField) ? 'selected' : ''}`" |
|
|
|
@click="changeField(field, $event)" |
|
|
|
@click="changeField(field, $event)" |
|
|
@ -668,7 +671,12 @@ onMounted(async () => { |
|
|
|
> |
|
|
|
> |
|
|
|
Updated field |
|
|
|
Updated field |
|
|
|
</NcBadge> |
|
|
|
</NcBadge> |
|
|
|
<NcBadge v-if="!isColumnValid(field)" color="yellow" :border="false" class="ml-1 bg-yellow-50 text-yellow-700"> |
|
|
|
<NcBadge |
|
|
|
|
|
|
|
v-if="!isColumnValid(field)" |
|
|
|
|
|
|
|
color="yellow" |
|
|
|
|
|
|
|
:border="false" |
|
|
|
|
|
|
|
class="ml-1 bg-yellow-50 text-yellow-700" |
|
|
|
|
|
|
|
> |
|
|
|
Incomplete configuration |
|
|
|
Incomplete configuration |
|
|
|
</NcBadge> |
|
|
|
</NcBadge> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -787,6 +795,7 @@ onMounted(async () => { |
|
|
|
</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 |
|
|
|