feat: show formatted currency fields in Modal & data fields

frontend/src/components/Activities/DataFields.vue

@@ -32,7 +32,12 @@
     <span>{{ __('Loading...') }}</span>
   </div>
   <div v-else>
-    <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="data.doc" />
+    <FieldLayout
+      v-if="tabs.data"
+      :tabs="tabs.data"
+      :data="data.doc"
+      :doctype="doctype"
+    />
   </div>
   <DataFieldsModal
     v-if="showDataFieldsModal"

frontend/src/components/FieldLayout.vue

@@ -190,6 +190,16 @@
                     :placeholder="getPlaceholder(field)"
                     v-model="data[field.name]"
                   />
+                  <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)
+                    "
+                  />
                   <FormControl
                     v-else
                     type="text"
@@ -213,22 +223,29 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
+import { getMeta } from '../stores/meta'
 import { usersStore } from '@/stores/users'
 import { getFormat } from '@/utils'
+import { flt } from '@/utils/numberFormat.js'
 import { Tabs, Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
-const { getUser } = usersStore()
-
 const props = defineProps({
   tabs: Array,
   data: Object,
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
   modal: {
     type: Boolean,
     default: false,
   },
 })
 
+const { getFormattedCurrency } = getMeta(props.doctype)
+const { getUser } = usersStore()
+
 const hasTabs = computed(() => !props.tabs[0].no_tabs)
 
 const tabIndex = ref(0)

frontend/src/components/Modals/AddressModal.vue

@@ -23,7 +23,7 @@
           </div>
         </div>
         <div v-if="tabs.data">
-          <FieldLayout :tabs="tabs.data" :data="_address" />
+          <FieldLayout :tabs="tabs.data" :data="_address" doctype="Address" />
           <ErrorMessage class="mt-2" :message="error" />
         </div>
       </div>
@@ -54,7 +54,7 @@ import FieldLayout from '@/components/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
-import { call, FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
+import { FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
 import { ref, nextTick, watch, computed } from 'vue'
 
 const props = defineProps({

frontend/src/components/Modals/ContactModal.vue

@@ -23,7 +23,11 @@
           </div>
         </div>
         <div v-if="filteredSections.length">
-          <FieldLayout :tabs="filteredSections" :data="_contact" />
+          <FieldLayout
+            :tabs="filteredSections"
+            :data="_contact"
+            doctype="Contact"
+          />
         </div>
       </div>
       <div class="px-4 pb-7 pt-4 sm:px-6">

frontend/src/components/Modals/DealModal.vue

@@ -38,6 +38,7 @@
             v-if="filteredSections.length"
             :tabs="filteredSections"
             :data="deal"
+            doctype="CRM Deal"
           />
           <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
         </div>

frontend/src/components/Modals/OrganizationModal.vue

@@ -23,7 +23,11 @@
           </div>
         </div>
         <div v-if="filteredSections.length">
-          <FieldLayout :tabs="filteredSections" :data="_organization" />
+          <FieldLayout
+            :tabs="filteredSections"
+            :data="_organization"
+            doctype="CRM Organization"
+          />
         </div>
       </div>
       <div class="px-4 pb-7 pt-4 sm:px-6">

frontend/src/components/Settings/SettingsPage.vue

@@ -12,7 +12,12 @@
       />
     </h2>
     <div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
-      <FieldLayout v-if="data?.doc && tabs" :tabs="tabs" :data="data.doc" />
+      <FieldLayout
+        v-if="data?.doc && tabs"
+        :tabs="tabs"
+        :data="data.doc"
+        :doctype="doctype"
+      />
       <ErrorMessage class="mt-2" :message="error" />
     </div>
     <div v-else class="flex flex-1 items-center justify-center">

frontend/src/components/SidePanelLayout.vue

@@ -168,6 +168,17 @@
               @change="(data) => emit('update', field.name, data)"
             />
           </div>
+          <FormControl
+            v-else-if="field.type === 'currency'"
+            class="form-control"
+            type="text"
+            :value="getFormattedCurrency(field.name, data)"
+            :placeholder="field.placeholder"
+            :debounce="500"
+            @change.stop="
+              emit('update', field.name, flt($event.target.value))
+            "
+          />
           <FormControl
             v-else
             class="form-control"
@@ -203,8 +214,10 @@ import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { getFormat } from '@/utils'
+import { flt } from '@/utils/numberFormat.js'
 import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
 import { computed } from 'vue'
 
@@ -212,12 +225,17 @@ const props = defineProps({
   fields: {
     type: Object,
   },
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
   isLastSection: {
     type: Boolean,
     default: false,
   },
 })
 
+const { getFormattedCurrency } = getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const emit = defineEmits(['update'])

frontend/src/pages/Contact.vue

@@ -142,6 +142,7 @@
                 v-if="section.fields"
                 :fields="section.fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
+                doctype="Contact"
                 v-model="contact.data"
                 @update="updateField"
               />

frontend/src/pages/Deal.vue

@@ -171,6 +171,7 @@
                 v-if="section.fields"
                 :fields="section.fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
+                doctype="CRM Deal"
                 v-model="deal.data"
                 @update="updateField"
               />

frontend/src/pages/MobileContact.vue

@@ -145,6 +145,7 @@
                   <SidePanelLayout
                     :fields="section.fields"
                     :isLastSection="i == fieldsLayout.data.length - 1"
+                    doctype="Contact"
                     v-model="contact.data"
                     @update="updateField"
                   />

frontend/src/pages/MobileDeal.vue

@@ -102,6 +102,7 @@
                   v-if="section.fields"
                   :fields="section.fields"
                   :isLastSection="i == fieldsLayout.data.length - 1"
+                  doctype="CRM Deal"
                   v-model="deal.data"
                   @update="updateField"
                 />

frontend/src/pages/MobileOrganization.vue

@@ -125,9 +125,10 @@
               >
                 <Section :label="section.label" :opened="section.opened">
                   <SidePanelLayout
+                    v-model="organization.doc"
                     :fields="section.fields"
                     :isLastSection="i == fieldsLayout.data.length - 1"
-                    v-model="organization.doc"
+                    doctype="CRM Organization"
                     @update="updateField"
                   />
                 </Section>

frontend/src/pages/Organization.vue

@@ -125,9 +125,10 @@
               </template>
               <SidePanelLayout
                 v-if="section.fields"
+                v-model="organization.doc"
                 :fields="section.fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"
-                v-model="organization.doc"
+                doctype="CRM Organization"
                 @update="updateField"
               />
             </Section>

frontend/src/utils/numberFormat.js

@@ -59,7 +59,7 @@ export function cint(v, def) {
   return v
 }
 
-function flt(v, decimals, numberFormat, roundingMethod) {
+export function flt(v, decimals, numberFormat, roundingMethod) {
   if (v == null || v == '') return 0
 
   if (typeof v !== 'number') {