From a91d8e449f597cb3452bf94b3da8207905d60345 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 25 Dec 2024 18:20:00 +0530
Subject: [PATCH] feat: show formatted float fields in Modal & data fields

---
 frontend/src/components/FieldLayout.vue     | 14 ++++++++++----
 frontend/src/components/SidePanelLayout.vue | 15 +++++++++++----
 frontend/src/stores/meta.js                 |  9 ++++++++-
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index a9fbc721..6fbd07af 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -190,15 +190,21 @@
                     :placeholder="getPlaceholder(field)"
                     v-model="data[field.name]"
                   />
+                  <FormControl
+                    v-else-if="field.type === 'Float'"
+                    type="text"
+                    :value="getFormattedFloat(field.name, data)"
+                    :placeholder="getPlaceholder(field)"
+                    :disabled="Boolean(field.read_only)"
+                    @change="data[field.name] = flt($event.target.value)"
+                  />
                   <FormControl
                     v-else-if="field.type === 'Currency'"
                     type="text"
                     :value="getFormattedCurrency(field.name, data)"
                     :placeholder="getPlaceholder(field)"
                     :disabled="Boolean(field.read_only)"
-                    @change="
-                      data[field.name] = flt($event.target.value)
-                    "
+                    @change="data[field.name] = flt($event.target.value)"
                   />
                   <FormControl
                     v-else
@@ -243,7 +249,7 @@ const props = defineProps({
   },
 })
 
-const { getFormattedCurrency } = getMeta(props.doctype)
+const { getFormattedFloat, getFormattedCurrency } = getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const hasTabs = computed(() => !props.tabs[0].no_tabs)
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index be646727..e919ae46 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -168,6 +168,15 @@
               @change="(data) => emit('update', field.name, data)"
             />
           </div>
+          <FormControl
+            v-else-if="field.type === 'float'"
+            class="form-control"
+            type="text"
+            :value="getFormattedFloat(field.name, data)"
+            :placeholder="field.placeholder"
+            :debounce="500"
+            @change.stop="emit('update', field.name, flt($event.target.value))"
+          />
           <FormControl
             v-else-if="field.type === 'currency'"
             class="form-control"
@@ -175,9 +184,7 @@
             :value="getFormattedCurrency(field.name, data)"
             :placeholder="field.placeholder"
             :debounce="500"
-            @change.stop="
-              emit('update', field.name, flt($event.target.value))
-            "
+            @change.stop="emit('update', field.name, flt($event.target.value))"
           />
           <FormControl
             v-else
@@ -235,7 +242,7 @@ const props = defineProps({
   },
 })
 
-const { getFormattedCurrency } = getMeta(props.doctype)
+const { getFormattedFloat, getFormattedCurrency } = getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const emit = defineEmits(['update'])
diff --git a/frontend/src/stores/meta.js b/frontend/src/stores/meta.js
index 221b6357..bd086d12 100644
--- a/frontend/src/stores/meta.js
+++ b/frontend/src/stores/meta.js
@@ -1,5 +1,5 @@
 import { createResource } from 'frappe-ui'
-import { formatCurrency } from '@/utils/numberFormat.js'
+import { formatCurrency, formatNumber } from '@/utils/numberFormat.js'
 import { reactive } from 'vue'
 
 const doctypeMeta = reactive({})
@@ -25,6 +25,12 @@ export function getMeta(doctype) {
     meta.fetch()
   }
 
+  function getFormattedFloat(fieldname, doc) {
+    let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
+    let precision = df?.precision || null
+    return formatNumber(doc[fieldname], "", precision)
+  }
+
   function getFormattedCurrency(fieldname, doc) {
     let currency = window.sysdefaults.currency || 'USD'
 
@@ -44,6 +50,7 @@ export function getMeta(doctype) {
   return {
     meta,
     doctypeMeta,
+    getFormattedFloat,
     getFormattedCurrency,
   }
 }