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

---
 .../src/components/Activities/DataFields.vue  |  7 ++++++-
 frontend/src/components/FieldLayout.vue       | 21 +++++++++++++++++--
 .../src/components/Modals/AddressModal.vue    |  4 ++--
 .../src/components/Modals/ContactModal.vue    |  6 +++++-
 frontend/src/components/Modals/DealModal.vue  |  1 +
 .../components/Modals/OrganizationModal.vue   |  6 +++++-
 .../src/components/Settings/SettingsPage.vue  |  7 ++++++-
 frontend/src/components/SidePanelLayout.vue   | 18 ++++++++++++++++
 frontend/src/pages/Contact.vue                |  1 +
 frontend/src/pages/Deal.vue                   |  1 +
 frontend/src/pages/MobileContact.vue          |  1 +
 frontend/src/pages/MobileDeal.vue             |  1 +
 frontend/src/pages/MobileOrganization.vue     |  3 ++-
 frontend/src/pages/Organization.vue           |  3 ++-
 frontend/src/utils/numberFormat.js            |  2 +-
 15 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index 287d4a8a..cee88cf0 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/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"
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index e28a3436..a9fbc721 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/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)
diff --git a/frontend/src/components/Modals/AddressModal.vue b/frontend/src/components/Modals/AddressModal.vue
index fd7cd25a..8b92f58e 100644
--- a/frontend/src/components/Modals/AddressModal.vue
+++ b/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({
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index a3515e8b..7cfa190b 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/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">
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index 2ccadec6..abb7f22f 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/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>
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 585b9b78..0ea5e159 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/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">
diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index e8d6c876..1d6bfdc3 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/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">
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index e18d65fc..be646727 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/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'])
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 5eea6170..2a982136 100644
--- a/frontend/src/pages/Contact.vue
+++ b/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"
               />
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index ba464d01..9c2b3db9 100644
--- a/frontend/src/pages/Deal.vue
+++ b/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"
               />
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 9508d3ee..41fb08d1 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/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"
                   />
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index f2c784c2..8936921f 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/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"
                 />
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index d73ce09f..abf52307 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/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>
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index e4920855..011e8da9 100644
--- a/frontend/src/pages/Organization.vue
+++ b/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>
diff --git a/frontend/src/utils/numberFormat.js b/frontend/src/utils/numberFormat.js
index 9e2962bc..061e7f70 100644
--- a/frontend/src/utils/numberFormat.js
+++ b/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') {