{
@click="changeField(field, $event)"
>
-
+
{
-
+
-
- Duplicate
-
-
- Insert above
-
-
- Insert below
-
-
-
-
-
-
-
- Delete
-
-
+
+
+ Duplicate
+
+
+ Insert above
+
+
+ Insert below
+
+
+
+
+
+
+
+ Delete
+
+
+
@@ -927,7 +955,13 @@ const onFieldOptionUpdate = () => {
@click="changeField(displayColumn, $event)"
>
-
+
{
:preload="fieldState(activeField)"
:table-explorer-columns="fields"
embed-mode
+ :readonly="isLocked"
from-table-explorer
@update="onFieldUpdate"
@add="onFieldAdd"
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 1996160598..4695736513 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -88,6 +88,8 @@ const isRecordLinkCopied = ref(false)
const { isUIAllowed } = useRoles()
+const readOnly = computed(() => !isUIAllowed('dataEdit') || isPublic.value)
+
const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
const { addOrEditStackRow } = useKanbanViewStoreOrThrow()
@@ -200,6 +202,8 @@ const save = async () => {
await _save(undefined, undefined, {
kanbanClbk,
})
+
+ _loadRow()
reloadTrigger?.trigger()
}
isUnsavedFormExist.value = false
@@ -667,6 +671,7 @@ export default {
:class="{
'px-1': isReadOnlyVirtualCell(col),
}"
+ :read-only="readOnly"
/>
@@ -735,6 +740,7 @@ export default {
v-model="_row.row[col.title]"
:row="_row"
:column="col"
+ :read-only="readOnly"
/>
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 7235f2af4f..b612aaedd7 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -142,7 +142,12 @@ const { getMeta } = useMetas()
const { addUndo, clone, defineViewScope } = useUndoRedo()
-const { isViewColumnsLoading, updateGridViewColumn, gridViewCols, resizingColOldWith } = useViewColumnsOrThrow()
+const {
+ isViewColumnsLoading: _isViewColumnsLoading,
+ updateGridViewColumn,
+ gridViewCols,
+ resizingColOldWith,
+} = useViewColumnsOrThrow()
const { isExpandedFormCommentMode } = storeToRefs(useConfigStore())
@@ -179,9 +184,11 @@ const fillHandle = ref()
const gridRect = useElementBounding(gridWrapper)
+const isViewColumnsLoading = computed(() => _isViewColumnsLoading.value || !meta.value)
+
// #Permissions
const { isUIAllowed } = useRoles()
-const hasEditPermission = computed(() => isUIAllowed('dataEdit') && !isLocked.value)
+const hasEditPermission = computed(() => isUIAllowed('dataEdit'))
const isAddingColumnAllowed = computed(() => !readOnly.value && !isLocked.value && isUIAllowed('fieldAdd') && !isSqlView.value)
const { onDrag, onDragStart, draggedCol, dragColPlaceholderDomRef, toBeDroppedColId } = useColumnDrag({
@@ -344,7 +351,7 @@ async function clearCell(ctx: { row: number; col: number } | null, skipUpdate =
}
function makeEditable(row: Row, col: ColumnType) {
- if (!hasEditPermission.value || editEnabled.value || isView || isLocked.value || readOnly.value || isSystemColumn(col)) {
+ if (!hasEditPermission.value || editEnabled.value || isView || readOnly.value || isSystemColumn(col)) {
return
}
@@ -375,9 +382,7 @@ function makeEditable(row: Row, col: ColumnType) {
// #Computed
-const isAddingEmptyRowAllowed = computed(
- () => !isView && !isLocked.value && hasEditPermission.value && !isSqlView.value && !isPublicView.value,
-)
+const isAddingEmptyRowAllowed = computed(() => !isView && hasEditPermission.value && !isSqlView.value && !isPublicView.value)
const visibleColLength = computed(() => fields.value?.length)
@@ -409,7 +414,9 @@ const dummyRowDataForLoading = computed(() => {
})
const showSkeleton = computed(
- () => disableSkeleton !== true && (isViewDataLoading.value || isPaginationLoading.value || isViewColumnsLoading.value),
+ () =>
+ (disableSkeleton !== true && (isViewDataLoading.value || isPaginationLoading.value || isViewColumnsLoading.value)) ||
+ !meta.value,
)
// #Grid
@@ -443,9 +450,7 @@ async function openNewRecordHandler() {
}
const onDraftRecordClick = () => {
- if (!isLocked?.value) {
- openNewRecordFormHook.trigger()
- }
+ openNewRecordFormHook.trigger()
}
const onNewRecordToGridClick = () => {
@@ -552,6 +557,8 @@ const {
return true
}
+ if (isExpandedCellInputExist()) return
+
// skip keyboard event handling if there is a drawer / modal
if (isDrawerOrModalExist()) {
return true
@@ -560,7 +567,9 @@ const {
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
const altOrOptionKey = e.altKey
if (e.key === ' ') {
- if (isCellActive.value && !editEnabled.value && hasEditPermission.value && activeCell.row !== null) {
+ const isRichModalOpen = isExpandedCellInputExist()
+
+ if (isCellActive.value && !editEnabled.value && hasEditPermission.value && activeCell.row !== null && !isRichModalOpen) {
e.preventDefault()
const row = dataRef.value[activeCell.row]
expandForm?.(row)
@@ -756,6 +765,9 @@ onClickOutside(tableBodyEl, (e) => {
if (activeCell.row === null || activeCell.col === null) return
+ const isRichModalOpen = isExpandedCellInputExist()
+ if (isRichModalOpen) return
+
const activeCol = fields.value[activeCell.col]
if (editEnabled.value && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
@@ -978,7 +990,6 @@ const refreshFillHandle = () => {
const showFillHandle = computed(
() =>
!readOnly.value &&
- !isLocked.value &&
!editEnabled.value &&
(!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) &&
!dataRef.value[(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) ?? -1]?.rowMeta?.new,
@@ -1057,14 +1068,18 @@ useEventListener(document, 'mouseup', () => {
/** handle keypress events */
useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
- if (e.key === 'Alt') {
+ const isRichModalOpen = isExpandedCellInputExist()
+
+ if (e.key === 'Alt' && !isRichModalOpen) {
altModifier.value = true
}
})
/** handle keypress events */
useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
- if (e.key === 'Alt') {
+ const isRichModalOpen = isExpandedCellInputExist()
+
+ if (e.key === 'Alt' && !isRichModalOpen) {
altModifier.value = false
disableUrlOverlay.value = false
}
@@ -1111,22 +1126,6 @@ onBeforeUnmount(async () => {
reloadViewDataHook?.on(reloadViewDataHandler)
openNewRecordFormHook?.on(openNewRecordHandler)
-// TODO: Use CSS animations
-const showLoaderAfterDelay = ref(false)
-watch([isViewDataLoading, showSkeleton, isPaginationLoading], () => {
- if (!isViewDataLoading.value && !showSkeleton.value && !isPaginationLoading.value) {
- showLoaderAfterDelay.value = false
-
- return
- }
-
- showLoaderAfterDelay.value = false
-
- setTimeout(() => {
- showLoaderAfterDelay.value = true
- }, 500)
-})
-
// #Watchers
// reset context menu target on hide
@@ -1217,7 +1216,7 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
}
const loaderText = computed(() => {
- if (isViewDataLoading.value) {
+ if (isPaginationLoading.value) {
if (paginationDataRef.value?.totalRows && paginationDataRef.value?.pageSize) {
return `Loading page
${paginationDataRef.value.page} of ${Math.ceil(
paginationDataRef.value?.totalRows / paginationDataRef.value?.pageSize,
@@ -1256,10 +1255,7 @@ onKeyStroke('ArrowDown', onDown)
>