|
|
|
@ -40,6 +40,8 @@ const { getMeta } = useMetas() |
|
|
|
|
|
|
|
|
|
|
|
const { meta, view } = useSmartsheetStoreOrThrow() |
|
|
|
const { meta, view } = useSmartsheetStoreOrThrow() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const isLocked = inject(IsLockedInj, ref(false)) |
|
|
|
|
|
|
|
|
|
|
|
const { openedViewsTab } = storeToRefs(useViewsStore()) |
|
|
|
const { openedViewsTab } = storeToRefs(useViewsStore()) |
|
|
|
|
|
|
|
|
|
|
|
const moveOps = ref<moveOp[]>([]) |
|
|
|
const moveOps = ref<moveOp[]>([]) |
|
|
|
@ -587,6 +589,8 @@ const toggleVisibility = async (checked: boolean, field: Field) => { |
|
|
|
useEventListener(document, 'keydown', async (e: KeyboardEvent) => { |
|
|
|
useEventListener(document, 'keydown', async (e: KeyboardEvent) => { |
|
|
|
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey |
|
|
|
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (isLocked.value) return |
|
|
|
|
|
|
|
|
|
|
|
if (cmdOrCtrl && e.key.toLowerCase() === 's') { |
|
|
|
if (cmdOrCtrl && e.key.toLowerCase() === 's') { |
|
|
|
if (openedViewsTab.value !== 'field') return |
|
|
|
if (openedViewsTab.value !== 'field') return |
|
|
|
e.preventDefault() |
|
|
|
e.preventDefault() |
|
|
|
@ -625,7 +629,11 @@ onKeyDown('ArrowUp', () => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
onKeyDown('Delete', () => { |
|
|
|
onKeyDown('Delete', () => { |
|
|
|
|
|
|
|
if (isLocked.value) return |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (document.activeElement?.tagName === 'INPUT') return |
|
|
|
if (document.activeElement?.tagName === 'TEXTAREA') return |
|
|
|
if (document.activeElement?.tagName === 'TEXTAREA') return |
|
|
|
|
|
|
|
|
|
|
|
const isDeletedField = fieldStatus(activeField.value) === 'delete' |
|
|
|
const isDeletedField = fieldStatus(activeField.value) === 'delete' |
|
|
|
if (!isDeletedField && activeField.value) { |
|
|
|
if (!isDeletedField && activeField.value) { |
|
|
|
onFieldDelete(activeField.value) |
|
|
|
onFieldDelete(activeField.value) |
|
|
|
@ -633,7 +641,11 @@ onKeyDown('Delete', () => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
onKeyDown('Backspace', () => { |
|
|
|
onKeyDown('Backspace', () => { |
|
|
|
|
|
|
|
if (isLocked.value) return |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (document.activeElement?.tagName === 'INPUT') return |
|
|
|
if (document.activeElement?.tagName === 'TEXTAREA') return |
|
|
|
if (document.activeElement?.tagName === 'TEXTAREA') return |
|
|
|
|
|
|
|
|
|
|
|
const isDeletedField = fieldStatus(activeField.value) === 'delete' |
|
|
|
const isDeletedField = fieldStatus(activeField.value) === 'delete' |
|
|
|
if (!isDeletedField && activeField.value) { |
|
|
|
if (!isDeletedField && activeField.value) { |
|
|
|
onFieldDelete(activeField.value) |
|
|
|
onFieldDelete(activeField.value) |
|
|
|
@ -659,11 +671,15 @@ const onClickCopyFieldUrl = async (field: ColumnType) => { |
|
|
|
const keys = useMagicKeys() |
|
|
|
const keys = useMagicKeys() |
|
|
|
|
|
|
|
|
|
|
|
whenever(keys.meta_s, () => { |
|
|
|
whenever(keys.meta_s, () => { |
|
|
|
|
|
|
|
if (isLocked.value) return |
|
|
|
|
|
|
|
|
|
|
|
if (!meta.value?.id) return |
|
|
|
if (!meta.value?.id) return |
|
|
|
if (openedViewsTab.value === 'field') saveChanges() |
|
|
|
if (openedViewsTab.value === 'field') saveChanges() |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
whenever(keys.ctrl_s, () => { |
|
|
|
whenever(keys.ctrl_s, () => { |
|
|
|
|
|
|
|
if (isLocked.value) return |
|
|
|
|
|
|
|
|
|
|
|
if (!meta.value?.id) return |
|
|
|
if (!meta.value?.id) return |
|
|
|
if (openedViewsTab.value === 'field') saveChanges() |
|
|
|
if (openedViewsTab.value === 'field') saveChanges() |
|
|
|
}) |
|
|
|
}) |
|
|
|
@ -718,9 +734,9 @@ const onFieldOptionUpdate = () => { |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-input> |
|
|
|
</a-input> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<NcTooltip> |
|
|
|
<NcTooltip :disabled="isLocked"> |
|
|
|
<template #title> {{ `${renderAltOrOptlKey()} + C` }} </template> |
|
|
|
<template #title> {{ `${renderAltOrOptlKey()} + C` }} </template> |
|
|
|
<NcButton type="secondary" size="small" class="mr-1" :disabled="loading" @click="addField()"> |
|
|
|
<NcButton type="secondary" size="small" class="mr-1" :disabled="loading || isLocked" @click="addField()"> |
|
|
|
<div class="flex items-center gap-2"> |
|
|
|
<div class="flex items-center gap-2"> |
|
|
|
<GeneralIcon icon="plus" class="w-3" /> |
|
|
|
<GeneralIcon icon="plus" class="w-3" /> |
|
|
|
New Field |
|
|
|
New Field |
|
|
|
@ -730,19 +746,22 @@ const onFieldOptionUpdate = () => { |
|
|
|
<NcButton |
|
|
|
<NcButton |
|
|
|
type="secondary" |
|
|
|
type="secondary" |
|
|
|
size="small" |
|
|
|
size="small" |
|
|
|
:disabled="!loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1" |
|
|
|
:disabled="(!loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1) || isLocked" |
|
|
|
@click="clearChanges()" |
|
|
|
@click="clearChanges()" |
|
|
|
> |
|
|
|
> |
|
|
|
Reset |
|
|
|
Reset |
|
|
|
</NcButton> |
|
|
|
</NcButton> |
|
|
|
<NcTooltip> |
|
|
|
<NcTooltip :disabled="isLocked"> |
|
|
|
<template #title> {{ `${renderCmdOrCtrlKey()} + S` }} </template> |
|
|
|
<template #title> {{ `${renderCmdOrCtrlKey()} + S` }} </template> |
|
|
|
|
|
|
|
|
|
|
|
<NcButton |
|
|
|
<NcButton |
|
|
|
type="primary" |
|
|
|
type="primary" |
|
|
|
size="small" |
|
|
|
size="small" |
|
|
|
:loading="loading" |
|
|
|
:loading="loading" |
|
|
|
:disabled="isColumnsValid ? !loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1 : true" |
|
|
|
:disabled=" |
|
|
|
|
|
|
|
(isColumnsValid ? !loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1 : true) || |
|
|
|
|
|
|
|
isLocked |
|
|
|
|
|
|
|
" |
|
|
|
@click="saveChanges()" |
|
|
|
@click="saveChanges()" |
|
|
|
> |
|
|
|
> |
|
|
|
Save changes |
|
|
|
Save changes |
|
|
|
@ -752,7 +771,7 @@ const onFieldOptionUpdate = () => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex flex-row rounded-lg border-1 border-gray-200"> |
|
|
|
<div class="flex flex-row rounded-lg border-1 border-gray-200"> |
|
|
|
<div ref="fieldsListWrapperDomRef" class="nc-scrollbar-md !overflow-auto w-full flex-grow-1 nc-fields-height"> |
|
|
|
<div ref="fieldsListWrapperDomRef" class="nc-scrollbar-md !overflow-auto w-full flex-grow-1 nc-fields-height"> |
|
|
|
<Draggable v-model="fields" item-key="id" @change="onMove($event)"> |
|
|
|
<Draggable v-model="fields" :disabled="isLocked" item-key="id" @change="onMove($event)"> |
|
|
|
<template #item="{ element: field }"> |
|
|
|
<template #item="{ element: field }"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv" |
|
|
|
v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv" |
|
|
|
@ -761,9 +780,16 @@ const onFieldOptionUpdate = () => { |
|
|
|
@click="changeField(field, $event)" |
|
|
|
@click="changeField(field, $event)" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex items-center flex-1 py-2.5 gap-1 w-2/6"> |
|
|
|
<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" /> |
|
|
|
<component |
|
|
|
|
|
|
|
:is="iconMap.drag" |
|
|
|
|
|
|
|
class="cursor-move !h-3.75 text-gray-600 mr-1" |
|
|
|
|
|
|
|
:class="{ |
|
|
|
|
|
|
|
'opacity-0 !cursor-default': isLocked, |
|
|
|
|
|
|
|
}" |
|
|
|
|
|
|
|
/> |
|
|
|
<NcCheckbox |
|
|
|
<NcCheckbox |
|
|
|
v-if="field.id && viewFieldsMap[field.id]" |
|
|
|
v-if="field.id && viewFieldsMap[field.id]" |
|
|
|
|
|
|
|
:disabled="isLocked" |
|
|
|
:checked=" |
|
|
|
:checked=" |
|
|
|
visibilityOps.find((op) => op.column.fk_column_id === field.id)?.visible ?? viewFieldsMap[field.id].show |
|
|
|
visibilityOps.find((op) => op.column.fk_column_id === field.id)?.visible ?? viewFieldsMap[field.id].show |
|
|
|
" |
|
|
|
" |
|
|
|
@ -882,9 +908,10 @@ const onFieldOptionUpdate = () => { |
|
|
|
</NcButton> |
|
|
|
</NcButton> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</NcTooltip> |
|
|
|
</NcTooltip> |
|
|
|
<a-menu-divider class="my-1.5" /> |
|
|
|
<a-menu-divider v-if="!isLocked" class="my-1.5" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<template v-if="!isLocked"> |
|
|
|
<NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)"> |
|
|
|
<NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)"> |
|
|
|
<Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span> |
|
|
|
<Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span> |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
@ -903,6 +930,7 @@ const onFieldOptionUpdate = () => { |
|
|
|
Delete |
|
|
|
Delete |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
|
|
|
|
</template> |
|
|
|
</NcMenu> |
|
|
|
</NcMenu> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</NcDropdown> |
|
|
|
</NcDropdown> |
|
|
|
@ -927,7 +955,13 @@ const onFieldOptionUpdate = () => { |
|
|
|
@click="changeField(displayColumn, $event)" |
|
|
|
@click="changeField(displayColumn, $event)" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex items-center flex-1 py-2.5 gap-1 w-2/6"> |
|
|
|
<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" /> |
|
|
|
<component |
|
|
|
|
|
|
|
:is="iconMap.drag" |
|
|
|
|
|
|
|
class="cursor-move !h-3.75 text-gray-200 mr-1" |
|
|
|
|
|
|
|
:class="{ |
|
|
|
|
|
|
|
'opacity-0 !cursor-default': isLocked, |
|
|
|
|
|
|
|
}" |
|
|
|
|
|
|
|
/> |
|
|
|
<NcCheckbox :disabled="true" :checked="true" /> |
|
|
|
<NcCheckbox :disabled="true" :checked="true" /> |
|
|
|
<SmartsheetHeaderCellIcon |
|
|
|
<SmartsheetHeaderCellIcon |
|
|
|
v-if="displayColumn" |
|
|
|
v-if="displayColumn" |
|
|
|
@ -1046,6 +1080,7 @@ const onFieldOptionUpdate = () => { |
|
|
|
:preload="fieldState(activeField)" |
|
|
|
:preload="fieldState(activeField)" |
|
|
|
:table-explorer-columns="fields" |
|
|
|
:table-explorer-columns="fields" |
|
|
|
embed-mode |
|
|
|
embed-mode |
|
|
|
|
|
|
|
:readonly="isLocked" |
|
|
|
from-table-explorer |
|
|
|
from-table-explorer |
|
|
|
@update="onFieldUpdate" |
|
|
|
@update="onFieldUpdate" |
|
|
|
@add="onFieldAdd" |
|
|
|
@add="onFieldAdd" |
|
|
|
|
Raju Udava
1 year ago
committed by
GitHub
