|
|
@ -41,6 +41,7 @@ const props = defineProps<{ |
|
|
|
metas?: { metaValue?: TableType; viewMetaValue?: ViewType }, |
|
|
|
metas?: { metaValue?: TableType; viewMetaValue?: ViewType }, |
|
|
|
undo?: boolean, |
|
|
|
undo?: boolean, |
|
|
|
) => Promise<void> |
|
|
|
) => Promise<void> |
|
|
|
|
|
|
|
bulkDeleteAll?: () => Promise<void> |
|
|
|
bulkUpsertRows?: ( |
|
|
|
bulkUpsertRows?: ( |
|
|
|
insertRows: Row[], |
|
|
|
insertRows: Row[], |
|
|
|
updateRows: [], |
|
|
|
updateRows: [], |
|
|
@ -57,9 +58,12 @@ const props = defineProps<{ |
|
|
|
selectedRows: Array<Row> |
|
|
|
selectedRows: Array<Row> |
|
|
|
chunkStates: Array<'loading' | 'loaded' | undefined> |
|
|
|
chunkStates: Array<'loading' | 'loaded' | undefined> |
|
|
|
isBulkOperationInProgress: boolean |
|
|
|
isBulkOperationInProgress: boolean |
|
|
|
|
|
|
|
selectedAllRecords?: boolean |
|
|
|
}>() |
|
|
|
}>() |
|
|
|
|
|
|
|
|
|
|
|
const emits = defineEmits(['bulkUpdateDlg']) |
|
|
|
const emits = defineEmits(['bulkUpdateDlg', 'update:selectedAllRecords']) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const vSelectedAllRecords = useVModel(props, 'selectedAllRecords', emits) |
|
|
|
|
|
|
|
|
|
|
|
const { |
|
|
|
const { |
|
|
|
loadData, |
|
|
|
loadData, |
|
|
@ -75,6 +79,7 @@ const { |
|
|
|
removeRowIfNew, |
|
|
|
removeRowIfNew, |
|
|
|
clearInvalidRows, |
|
|
|
clearInvalidRows, |
|
|
|
applySorting, |
|
|
|
applySorting, |
|
|
|
|
|
|
|
bulkDeleteAll, |
|
|
|
} = props |
|
|
|
} = props |
|
|
|
|
|
|
|
|
|
|
|
// Injections |
|
|
|
// Injections |
|
|
@ -660,6 +665,29 @@ const onActiveCellChanged = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const isDeleteAllModalIsOpen = ref(false) |
|
|
|
|
|
|
|
async function deleteAllRecords() { |
|
|
|
|
|
|
|
isDeleteAllModalIsOpen.value = true |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function closeDlg() { |
|
|
|
|
|
|
|
isOpen.value = false |
|
|
|
|
|
|
|
close(200) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { close } = useDialog(resolveComponent('DlgRecordDeleteAll'), { |
|
|
|
|
|
|
|
'modelValue': isDeleteAllModalIsOpen, |
|
|
|
|
|
|
|
'rows': totalRows.value, |
|
|
|
|
|
|
|
'onUpdate:modelValue': closeDlg, |
|
|
|
|
|
|
|
'onDeleteAll': async () => { |
|
|
|
|
|
|
|
await bulkDeleteAll?.() |
|
|
|
|
|
|
|
closeDlg() |
|
|
|
|
|
|
|
vSelectedAllRecords.value = false |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await until(isDeleteAllModalIsOpen).toBe(false) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const isOpen = ref(false) |
|
|
|
const isOpen = ref(false) |
|
|
|
async function expandRows({ |
|
|
|
async function expandRows({ |
|
|
|
newRows, |
|
|
|
newRows, |
|
|
@ -677,7 +705,7 @@ async function expandRows({ |
|
|
|
continue: false, |
|
|
|
continue: false, |
|
|
|
expand: true, |
|
|
|
expand: true, |
|
|
|
} |
|
|
|
} |
|
|
|
const { close } = useDialog(resolveComponent('DlgExpandTable'), { |
|
|
|
const { close } = useDialog(resolveComponent('DlgRecordUpsert'), { |
|
|
|
'modelValue': isOpen, |
|
|
|
'modelValue': isOpen, |
|
|
|
'newRows': newRows, |
|
|
|
'newRows': newRows, |
|
|
|
'newColumns': newColumns, |
|
|
|
'newColumns': newColumns, |
|
|
@ -1746,6 +1774,26 @@ watch( |
|
|
|
immediate: true, |
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
}, |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const toggleRowSelection = (row: number) => { |
|
|
|
|
|
|
|
if (vSelectedAllRecords.value) return |
|
|
|
|
|
|
|
const data = cachedRows.value.get(row) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!data) return |
|
|
|
|
|
|
|
data.rowMeta.selected = !data.rowMeta?.selected |
|
|
|
|
|
|
|
cachedRows.value.set(row, data) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch(vSelectedAllRecords, (selectedAll) => { |
|
|
|
|
|
|
|
if (!selectedAll) { |
|
|
|
|
|
|
|
for (const [row, data] of cachedRows.value.entries()) { |
|
|
|
|
|
|
|
if (data.rowMeta?.selected) { |
|
|
|
|
|
|
|
data.rowMeta.selected = false |
|
|
|
|
|
|
|
cachedRows.value.set(row, data) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
@ -1778,7 +1826,7 @@ watch( |
|
|
|
<div ref="gridWrapper" class="nc-grid-wrapper min-h-0 flex-1 relative !overflow-auto"> |
|
|
|
<div ref="gridWrapper" class="nc-grid-wrapper min-h-0 flex-1 relative !overflow-auto"> |
|
|
|
<NcDropdown |
|
|
|
<NcDropdown |
|
|
|
v-model:visible="contextMenu" |
|
|
|
v-model:visible="contextMenu" |
|
|
|
:disabled="contextMenuTarget === null && !selectedRows.length" |
|
|
|
:disabled="contextMenuTarget === null && !selectedRows.length && !vSelectedAllRecords" |
|
|
|
:trigger="isSqlView ? [] : ['contextmenu']" |
|
|
|
:trigger="isSqlView ? [] : ['contextmenu']" |
|
|
|
overlay-class-name="nc-dropdown-grid-context-menu" |
|
|
|
overlay-class-name="nc-dropdown-grid-context-menu" |
|
|
|
> |
|
|
|
> |
|
|
@ -1825,7 +1873,29 @@ watch( |
|
|
|
}" |
|
|
|
}" |
|
|
|
data-testid="grid-id-column" |
|
|
|
data-testid="grid-id-column" |
|
|
|
> |
|
|
|
> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
v-if="!readOnly" |
|
|
|
|
|
|
|
data-testid="nc-check-all" |
|
|
|
|
|
|
|
class="flex items-center pl-2 pr-1 w-full h-full justify-center" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div class="nc-no-label text-gray-500" :class="{ hidden: vSelectedAllRecords }"> |
|
|
|
|
|
|
|
# |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
:class="{ |
|
|
|
|
|
|
|
hidden: !vSelectedAllRecords, |
|
|
|
|
|
|
|
flex: vSelectedAllRecords, |
|
|
|
|
|
|
|
}" |
|
|
|
|
|
|
|
class="nc-check-all w-full items-center" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<NcCheckbox v-model:checked="vSelectedAllRecords" /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span class="flex-1" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<template v-else> |
|
|
|
<div class="w-full h-full text-gray-500 flex pl-2 pr-1 items-center" data-testid="nc-check-all">#</div> |
|
|
|
<div class="w-full h-full text-gray-500 flex pl-2 pr-1 items-center" data-testid="nc-check-all">#</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
</th> |
|
|
|
</th> |
|
|
|
<th |
|
|
|
<th |
|
|
|
v-if="fields[0] && fields[0].id" |
|
|
|
v-if="fields[0] && fields[0].id" |
|
|
@ -2127,7 +2197,7 @@ watch( |
|
|
|
'active-row': |
|
|
|
'active-row': |
|
|
|
activeCell.row === row.rowMeta.rowIndex || selectedRange._start?.row === row.rowMeta.rowIndex, |
|
|
|
activeCell.row === row.rowMeta.rowIndex || selectedRange._start?.row === row.rowMeta.rowIndex, |
|
|
|
'mouse-down': isGridCellMouseDown || isFillMode, |
|
|
|
'mouse-down': isGridCellMouseDown || isFillMode, |
|
|
|
'selected-row': row.rowMeta.selected, |
|
|
|
'selected-row': row.rowMeta.selected || vSelectedAllRecords, |
|
|
|
'invalid-row': row.rowMeta?.isValidationFailed || row.rowMeta?.isRowOrderUpdated, |
|
|
|
'invalid-row': row.rowMeta?.isValidationFailed || row.rowMeta?.isRowOrderUpdated, |
|
|
|
}" |
|
|
|
}" |
|
|
|
> |
|
|
|
> |
|
|
@ -2143,21 +2213,22 @@ watch( |
|
|
|
<div class="w-[60px] pl-2 pr-1 items-center flex gap-1"> |
|
|
|
<div class="w-[60px] pl-2 pr-1 items-center flex gap-1"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
class="nc-row-no sm:min-w-4 text-xs text-gray-500" |
|
|
|
class="nc-row-no sm:min-w-4 text-xs text-gray-500" |
|
|
|
:class="{ toggle: !readOnly, hidden: row.rowMeta?.selected }" |
|
|
|
:class="{ toggle: !readOnly, hidden: row.rowMeta?.selected || vSelectedAllRecords }" |
|
|
|
> |
|
|
|
> |
|
|
|
{{ row.rowMeta.rowIndex + 1 }} |
|
|
|
{{ row.rowMeta.rowIndex + 1 }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-if="!readOnly" |
|
|
|
v-if="!readOnly" |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
hidden: !row.rowMeta?.selected, |
|
|
|
hidden: !row.rowMeta?.selected && !vSelectedAllRecords, |
|
|
|
flex: row.rowMeta?.selected, |
|
|
|
flex: row.rowMeta?.selected || vSelectedAllRecords, |
|
|
|
}" |
|
|
|
}" |
|
|
|
class="nc-row-expand-and-checkbox" |
|
|
|
class="nc-row-expand-and-checkbox" |
|
|
|
> |
|
|
|
> |
|
|
|
<a-checkbox |
|
|
|
<NcCheckbox |
|
|
|
v-model:checked="row.rowMeta.selected" |
|
|
|
:checked="row.rowMeta.selected || vSelectedAllRecords" |
|
|
|
:disabled="!row.rowMeta.selected && selectedRows.length > 100" |
|
|
|
:disabled="(!row.rowMeta.selected && selectedRows.length > 100) || vSelectedAllRecords" |
|
|
|
|
|
|
|
@change="toggleRowSelection(row.rowMeta.rowIndex)" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span class="flex-1" /> |
|
|
|
<span class="flex-1" /> |
|
|
@ -2388,6 +2459,7 @@ watch( |
|
|
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
<template #overlay> |
|
|
|
<NcMenu class="!rounded !py-0" @click="contextMenu = false"> |
|
|
|
<NcMenu class="!rounded !py-0" @click="contextMenu = false"> |
|
|
|
|
|
|
|
<template v-if="!vSelectedAllRecords"> |
|
|
|
<NcMenuItem |
|
|
|
<NcMenuItem |
|
|
|
v-if="isEeUI && !contextMenuClosing && !contextMenuTarget && !isDataReadOnly && selectedRows.length" |
|
|
|
v-if="isEeUI && !contextMenuClosing && !contextMenuTarget && !isDataReadOnly && selectedRows.length" |
|
|
|
@click="emits('bulkUpdateDlg')" |
|
|
|
@click="emits('bulkUpdateDlg')" |
|
|
@ -2413,6 +2485,19 @@ watch( |
|
|
|
{{ $t('activity.deleteSelectedRow') }} |
|
|
|
{{ $t('activity.deleteSelectedRow') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<NcMenuItem |
|
|
|
|
|
|
|
v-if="vSelectedAllRecords" |
|
|
|
|
|
|
|
class="nc-base-menu-item !text-red-600 !hover:bg-red-50" |
|
|
|
|
|
|
|
data-testid="nc-delete-all-row" |
|
|
|
|
|
|
|
@click="deleteAllRecords" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div v-e="['a:row:delete-all']" class="flex gap-2 items-center"> |
|
|
|
|
|
|
|
<component :is="iconMap.delete" /> |
|
|
|
|
|
|
|
{{ $t('activity.deleteAllRecords') }} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</NcMenuItem> |
|
|
|
|
|
|
|
|
|
|
|
<NcTooltip |
|
|
|
<NcTooltip |
|
|
|
v-if="contextMenuTarget && hasEditPermission && !isDataReadOnly && isSelectedOnlyAI.enabled" |
|
|
|
v-if="contextMenuTarget && hasEditPermission && !isDataReadOnly && isSelectedOnlyAI.enabled" |
|
|
|
:disabled="!isSelectedOnlyAI.disabled" |
|
|
|
:disabled="!isSelectedOnlyAI.disabled" |
|
|
@ -2508,7 +2593,7 @@ watch( |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<template v-if="hasEditPermission && !isDataReadOnly"> |
|
|
|
<template v-if="hasEditPermission && !isDataReadOnly"> |
|
|
|
<NcDivider v-if="!(!contextMenuClosing && !contextMenuTarget && selectedRows.length)" /> |
|
|
|
<NcDivider v-if="!(!contextMenuClosing && !contextMenuTarget && (selectedRows.length || vSelectedAllRecords))" /> |
|
|
|
<NcMenuItem |
|
|
|
<NcMenuItem |
|
|
|
v-if="contextMenuTarget && (selectedRange.isSingleCell() || selectedRange.isSingleRow())" |
|
|
|
v-if="contextMenuTarget && (selectedRange.isSingleCell() || selectedRange.isSingleRow())" |
|
|
|
class="nc-base-menu-item !text-red-600 !hover:bg-red-50" |
|
|
|
class="nc-base-menu-item !text-red-600 !hover:bg-red-50" |
|
|
|