test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show formatted percent, currency & float only when not focused

Browse Source
This commit is contained in:
Shariq Ansari 2025-05-14 13:19:54 +05:30
parent 76aaf7f37d
commit 32f3aaf38f
5 changed files with 64 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/components.d.ts vendored
View File

@ -114,6 +114,7 @@ declare module 'vue' {
FileVideoIcon: typeof import('./src/components/Icons/FileVideoIcon.vue')['default']
Filter: typeof import('./src/components/Filter.vue')['default']
FilterIcon: typeof import('./src/components/Icons/FilterIcon.vue')['default']
FormattedInput: typeof import('./src/components/Controls/FormattedInput.vue')['default']
FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
GenderIcon: typeof import('./src/components/Icons/GenderIcon.vue')['default']
GeneralSettings: typeof import('./src/components/Settings/GeneralSettings.vue')['default']

29
frontend/src/components/Controls/FormattedInput.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<FormControl
:value="displayValue"
@focus="isFocused = true"
@blur="isFocused = false"
v-bind="$attrs"
/>
</template>
<script setup>
import { FormControl } from 'frappe-ui'
import { ref, computed } from 'vue'
const props = defineProps({
value: {
type: [String, Number],
default: '',
},
formattedValue: {
type: [String, Number],
default: '',
},
})
const isFocused = ref(false)
const displayValue = computed(() => {
return isFocused.value ? props.value : props.formattedValue
})
</script>

24
frontend/src/components/Controls/Grid.vue
View File

@ -207,38 +207,41 @@
@change="(e) => fieldChange(e.target.value, field, row)"
/>
<FormControl
v-else-if="['Int'].includes(field.fieldtype)"
v-else-if="field.fieldtype === 'Int'"
class="[&_input]:text-right"
type="number"
type="text"
variant="outline"
:value="row[field.fieldname]"
:disabled="Boolean(field.read_only)"
@change="fieldChange($event.target.value, field, row)"
/>
<FormControl
<FormattedInput
v-else-if="field.fieldtype === 'Percent'"
class="[&_input]:text-right"
type="text"
variant="outline"
:value="getFormattedPercent(field.fieldname, row)"
:value="getFloatWithPrecision(field.fieldname, row)"
:formattedValue="row[field.fieldname] + '%'"
:disabled="Boolean(field.read_only)"
@change="fieldChange(flt($event.target.value), field, row)"
/>
<FormControl
<FormattedInput
v-else-if="field.fieldtype === 'Float'"
class="[&_input]:text-right"
type="text"
variant="outline"
:value="getFormattedFloat(field.fieldname, row)"
:value="getFloatWithPrecision(field.fieldname, row)"
:formattedValue="row[field.fieldname]"
:disabled="Boolean(field.read_only)"
@change="fieldChange(flt($event.target.value), field, row)"
/>
<FormControl
<FormattedInput
v-else-if="field.fieldtype === 'Currency'"
class="[&_input]:text-right"
type="text"
variant="outline"
:value="
:value="getCurrencyWithPrecision(field.fieldname, row)"
:formattedValue="
getFormattedCurrency(field.fieldname, row, parentDoc)
"
:disabled="Boolean(field.read_only)"
@ -312,6 +315,7 @@
</template>
<script setup>
import FormattedInput from '@/components/Controls/FormattedInput.vue'
import GridFieldsEditorModal from '@/components/Controls/GridFieldsEditorModal.vue'
import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'
import GridRowModal from '@/components/Controls/GridRowModal.vue'
@ -361,8 +365,8 @@ const triggerOnRowRemove = inject('triggerOnRowRemove')
const {
getGridViewSettings,
getFields,
getFormattedPercent,
getFormattedFloat,
getFloatWithPrecision,
getCurrencyWithPrecision,
getFormattedCurrency,
getGridSettings,
} = getMeta(props.doctype)

14
frontend/src/stores/meta.js
View File

@ -39,6 +39,18 @@ export function getMeta(doctype) {
return formatNumber(doc[fieldname], '', precision)
}
function getFloatWithPrecision(fieldname, doc) {
let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
let precision = df?.precision || null
return formatNumber(doc[fieldname], '', precision)
}
function getCurrencyWithPrecision(fieldname, doc) {
let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
let precision = df?.precision || null
return formatCurrency(doc[fieldname], '', '', precision)
}
function getFormattedCurrency(fieldname, doc, parentDoc = null) {
let currency = window.sysdefaults.currency || 'USD'
let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
@ -129,6 +141,8 @@ export function getMeta(doctype) {
getGridSettings,
getGridViewSettings,
saveUserSettings,
getFloatWithPrecision,
getCurrencyWithPrecision,
getFormattedFloat,
getFormattedPercent,
getFormattedCurrency,

11
frontend/src/utils/numberFormat.js
View File

@ -1,5 +1,3 @@
import { get } from '@vueuse/core'
const NUMBER_FORMAT_INFO = {
'#,###.##': { decimalStr: '.', groupSep: ',' },
'#.###,##': { decimalStr: ',', groupSep: '.' },
@ -183,10 +181,13 @@ export function formatCurrency(value, format, currency = 'USD', precision = 2) {
// }
format = getNumberFormat(format)
let symbol = getCurrencySymbol(currency)
if (symbol) {
return __(symbol) + ' ' + formatNumber(value, format, precision)
if (currency) {
let symbol = getCurrencySymbol(currency)
if (symbol) {
return __(symbol) + ' ' + formatNumber(value, format, precision)
}
}
return formatNumber(value, format, precision)