Browse Source

feat(gui-v2): add debounce for cell value update/save

re #2962

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2947/head
Pranav C 2 years ago
parent
commit
015d2fed21
  1. 54
      packages/nc-gui-v2/components/smartsheet/Cell.vue
  2. 2
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  3. 2
      packages/nc-gui-v2/composables/useViewData.ts

54
packages/nc-gui-v2/components/smartsheet/Cell.vue

@ -1,25 +1,71 @@
<script setup lang="ts">
import { UITypes } from 'nocodb-sdk'
import type { ColumnType } from 'nocodb-sdk'
import { provide } from 'vue'
import { useColumn, useVModel } from '#imports'
import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
import { ColumnInj } from '~/context'
interface Props {
column: ColumnType
modelValue: any
editEnabled: boolean
}
interface Emits {
(event: 'update:modelValue', value: any): void
}
const { column, ...rest } = defineProps<Props>()
const { column, editEnabled, ...rest } = defineProps<Props>()
const emit = defineEmits<Emits>()
const emit = defineEmits(['update:modelValue', 'save'])
provide(ColumnInj, column)
const vModel = useVModel(rest, 'modelValue', emit)
provide(
'editEnabled',
computed(() => editEnabled),
)
let changed = $ref(false)
const syncValue = useDebounceFn(function() {
emit('save')
}, 1000)
const isAutoSaved = $computed(() => {
return [
UITypes.SingleLineText,
UITypes.LongText,
UITypes.PhoneNumber,
UITypes.Email,
UITypes.URL,
UITypes.Number,
UITypes.Decimal,
UITypes.Percent,
UITypes.Count,
UITypes.AutoNumber,
UITypes.SpecificDBType,
UITypes.Geometry,
].includes(column.uidt as UITypes)
})
const isManualSaved = $computed(() => {
return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column.uidt as UITypes)
})
const vModel = computed({
get: () => value,
set: (val) => {
if (val !== value) {
changed = true
emit('update:modelValue', val)
if (isAutoSaved) {
syncValue()
} else if (!isManualSaved) {
emit('save')
}
}
},
})
const {
isURL,

2
packages/nc-gui-v2/components/smartsheet/Grid.vue

@ -262,7 +262,7 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
v-model="row.row[columnObj.title]"
:column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
@update:model-value="updateOrSaveRow(row, columnObj.title)"
@save="updateOrSaveRow(row, columnObj.title)"
/>
</td>
</tr>

2
packages/nc-gui-v2/composables/useViewData.ts

@ -174,7 +174,7 @@ export function useViewData(
const deleteRow = async (rowIndex: number) => {
try {
const row = formattedData.value[rowIndex]
if (!row.rowMeta.new){
if (!row.rowMeta.new) {
const id = meta?.value?.columns
?.filter((c) => c.pk)
.map((c) => row.row[c.title as any])

Loading…
Cancel
Save