Browse Source

Merge pull request #4114 from nocodb/fix/4113-fix-currency

fix: handle currency cell manual save
pull/4137/head
mertmit 2 years ago committed by GitHub
parent
commit
10e895d43f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 20
      packages/nc-gui/components/cell/Currency.vue
  2. 57
      packages/nc-gui/components/smartsheet/Cell.vue
  3. 5
      packages/nc-gui/composables/useColumn.ts

20
packages/nc-gui/components/cell/Currency.vue

@ -8,14 +8,16 @@ interface Props {
const props = defineProps<Props>() const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue', 'save'])
const column = inject(ColumnInj)! const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj) const editEnabled = inject(EditModeInj)!
const vModel = useVModel(props, 'modelValue', emit) const vModel = useVModel(props, 'modelValue', emit)
const lastSaved = ref()
const currencyMeta = computed(() => { const currencyMeta = computed(() => {
return { return {
currency_locale: 'en-US', currency_locale: 'en-US',
@ -38,6 +40,18 @@ const currency = computed(() => {
}) })
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
const submitCurrency = () => {
if (lastSaved.value !== vModel.value) {
lastSaved.value = vModel.value
emit('save')
}
editEnabled.value = false
}
onMounted(() => {
lastSaved.value = vModel.value
})
</script> </script>
<template> <template>
@ -46,7 +60,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
:ref="focus" :ref="focus"
v-model="vModel" v-model="vModel"
class="w-full h-full border-none outline-none px-2" class="w-full h-full border-none outline-none px-2"
@blur="editEnabled = false" @blur="submitCurrency"
/> />
<span v-else-if="vModel">{{ currency }}</span> <span v-else-if="vModel">{{ currency }}</span>

57
packages/nc-gui/components/smartsheet/Cell.vue

@ -66,43 +66,6 @@ const syncValue = useDebounceFn(
500, 500,
{ maxWait: 2000 }, { maxWait: 2000 },
) )
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,
UITypes.Duration,
].includes(column?.value?.uidt as UITypes)
})
const isManualSaved = $computed(() => [UITypes.Currency].includes(column?.value?.uidt as UITypes))
const vModel = computed({
get: () => props.modelValue,
set: (val) => {
if (val !== props.modelValue) {
currentRow.value.rowMeta.changed = true
emit('update:modelValue', val)
if (isAutoSaved) {
syncValue()
} else if (!isManualSaved) {
emit('save')
currentRow.value.rowMeta.changed = true
}
}
},
})
const { const {
isPrimary, isPrimary,
isURL, isURL,
@ -126,8 +89,26 @@ const {
isMultiSelect, isMultiSelect,
isPercent, isPercent,
isPhoneNumber, isPhoneNumber,
isAutoSaved,
isManualSaved,
} = useColumn(column) } = useColumn(column)
const vModel = computed({
get: () => props.modelValue,
set: (val) => {
if (val !== props.modelValue) {
currentRow.value.rowMeta.changed = true
emit('update:modelValue', val)
if (isAutoSaved.value) {
syncValue()
} else if (!isManualSaved.value) {
emit('save')
currentRow.value.rowMeta.changed = true
}
}
},
})
const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => { const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
if (isJSON.value) return if (isJSON.value) return
@ -163,7 +144,7 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
<LazyCellUrl v-else-if="isURL" v-model="vModel" /> <LazyCellUrl v-else-if="isURL" v-model="vModel" />
<LazyCellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" /> <LazyCellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" />
<LazyCellPercent v-else-if="isPercent" v-model="vModel" /> <LazyCellPercent v-else-if="isPercent" v-model="vModel" />
<LazyCellCurrency v-else-if="isCurrency" v-model="vModel" /> <LazyCellCurrency v-else-if="isCurrency" v-model="vModel" @save="emit('save')" />
<LazyCellDecimal v-else-if="isDecimal" v-model="vModel" /> <LazyCellDecimal v-else-if="isDecimal" v-model="vModel" />
<LazyCellInteger v-else-if="isInt" v-model="vModel" /> <LazyCellInteger v-else-if="isInt" v-model="vModel" />
<LazyCellFloat v-else-if="isFloat" v-model="vModel" /> <LazyCellFloat v-else-if="isFloat" v-model="vModel" />

5
packages/nc-gui/composables/useColumn.ts

@ -56,11 +56,10 @@ export function useColumn(column: Ref<ColumnType | undefined>) {
UITypes.AutoNumber, UITypes.AutoNumber,
UITypes.SpecificDBType, UITypes.SpecificDBType,
UITypes.Geometry, UITypes.Geometry,
UITypes.Duration,
].includes(uiDatatype.value), ].includes(uiDatatype.value),
) )
const isManualSaved = computed(() => const isManualSaved = computed(() => [UITypes.Currency].includes(uiDatatype.value))
[UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(uiDatatype.value),
)
const isPrimary = computed(() => column.value?.pv) const isPrimary = computed(() => column.value?.pv)
return { return {

Loading…
Cancel
Save