feat: Currency, Float & Percent format

crm/fcrm/doctype/crm_deal/crm_deal.py

@@ -139,6 +139,7 @@ def default_list_data():
 				'label': 'Amount',
 				'type': 'Currency',
 				'key': 'annual_revenue',
+				'align': 'right',
 				'width': '9rem',
 			},
 			{

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/ColumnSettings.vue

@@ -49,7 +49,9 @@
               </div>
             </template>
           </Draggable>
-          <div class="mt-1.5 flex flex-col gap-1 border-t border-outline-gray-modals pt-1.5">
+          <div
+            class="mt-1.5 flex flex-col gap-1 border-t border-outline-gray-modals pt-1.5"
+          >
             <Autocomplete
               value=""
               :options="fields"
@@ -213,11 +215,13 @@ const fields = computed(() => {
 })
 
 function addColumn(c) {
+  let align = ['Float', 'Int', 'Percent', 'Currency'].includes(c.type) ? 'right' : 'left'
   let _column = {
     label: c.label,
     type: c.type,
     key: c.value,
     width: '10rem',
+    align,
   }
   columns.value.push(_column)
   rows.value.push(c.value)

frontend/src/components/FieldLayout.vue

@@ -190,6 +190,30 @@
                     :placeholder="getPlaceholder(field)"
                     v-model="data[field.name]"
                   />
+                  <FormControl
+                    v-else-if="field.type === 'Percent'"
+                    type="text"
+                    :value="getFormattedPercent(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 === '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)"
+                  />
                   <FormControl
                     v-else
                     type="text"
@@ -213,22 +237,30 @@ 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 { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta(props.doctype)
+const { getUser } = usersStore()
+
 const hasTabs = computed(() => !props.tabs[0].no_tabs)
 
 const tabIndex = ref(0)

frontend/src/components/ListViews/CallLogsListView.vue

@@ -38,7 +38,7 @@
       v-slot="{ idx, column, item }"
       doctype="CRM Call Log"
     >
-      <ListRowItem :item="item">
+      <ListRowItem :item="item" :align="column.align">
         <template #prefix>
           <div v-if="['caller', 'receiver'].includes(column.key)">
             <Avatar

frontend/src/components/ListViews/ContactsListView.vue

@@ -42,7 +42,7 @@
       v-slot="{ idx, column, item }"
       doctype="Contact"
     >
-      <ListRowItem :item="item">
+      <ListRowItem :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'full_name'">
             <Avatar

frontend/src/components/ListViews/DealsListView.vue

@@ -57,7 +57,7 @@
           "
         />
       </div>
-      <ListRowItem v-else :item="item">
+      <ListRowItem v-else :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'status'">
             <IndicatorIcon :class="item.color" />

frontend/src/components/ListViews/EmailTemplatesListView.vue

@@ -37,7 +37,7 @@
       v-slot="{ idx, column, item }"
       doctype="Email Template"
     >
-      <ListRowItem :item="item">
+      <ListRowItem :item="item" :align="column.align">
         <!-- <template #prefix>
 
           </template> -->

frontend/src/components/ListViews/LeadsListView.vue

@@ -57,7 +57,7 @@
           "
         />
       </div>
-      <ListRowItem v-else :item="item">
+      <ListRowItem v-else :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'status'">
             <IndicatorIcon :class="item.color" />

frontend/src/components/ListViews/OrganizationsListView.vue

@@ -41,7 +41,7 @@
       v-slot="{ idx, column, item }"
       doctype="CRM Organization"
     >
-      <ListRowItem :item="item">
+      <ListRowItem :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'organization_name'">
             <Avatar

frontend/src/components/ListViews/TasksListView.vue

@@ -47,7 +47,7 @@
           </div>
         </Tooltip>
       </div>
-      <ListRowItem v-else :item="item">
+      <ListRowItem v-else :item="item" :align="column.align">
         <template #prefix>
           <div v-if="column.key === 'status'">
             <TaskStatusIcon :status="item" />

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/Modals/SidePanelModal.vue

@@ -151,7 +151,7 @@ function saveChanges() {
     {
       doctype: _doctype.value,
       type: 'Side Panel',
-      layout: JSON.stringify(_tabs),
+      layout: JSON.stringify(_tabs[0].sections),
     },
   ).then(() => {
     loading.value = false

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,33 @@
               @change="(data) => emit('update', field.name, data)"
             />
           </div>
+          <FormControl
+            v-else-if="field.type === 'percent'"
+            class="form-control"
+            type="text"
+            :value="getFormattedPercent(field.name, data)"
+            :placeholder="field.placeholder"
+            :debounce="500"
+            @change.stop="emit('update', field.name, flt($event.target.value))"
+          />
+          <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"
+            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,21 +230,29 @@ 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'
 
 const props = defineProps({
   fields: {
     type: Object,
   },
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
   isLastSection: {
     type: Boolean,
     default: false,
   },
 })
 
+const { getFormattedPercent, getFormattedFloat, 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"
               />
@@ -211,13 +212,9 @@ import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
-import {
-  formatDate,
-  timeAgo,
-  formatNumberIntoCurrency,
-  createToast,
-} from '@/utils'
+import { formatDate, timeAgo, createToast } from '@/utils'
 import { getView } from '@/utils/view'
+import { getMeta } from '@/stores/meta'
 import { globalStore } from '@/stores/global.js'
 import { usersStore } from '@/stores/users.js'
 import { organizationsStore } from '@/stores/organizations.js'
@@ -601,6 +598,8 @@ async function updateField(fieldname, value) {
   contact.reload()
 }
 
+const { getFormattedCurrency } = getMeta('CRM Deal')
+
 const columns = computed(() => dealColumns)
 
 function getDealRowObject(deal) {
@@ -610,10 +609,7 @@ function getDealRowObject(deal) {
       label: deal.organization,
       logo: getOrganization(deal.organization)?.organization_logo,
     },
-    annual_revenue: formatNumberIntoCurrency(
-      deal.annual_revenue,
-      deal.currency,
-    ),
+    annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
       color: getDealStatus(deal.status)?.iconColorClass,
@@ -640,6 +636,7 @@ const dealColumns = [
   {
     label: __('Amount'),
     key: 'annual_revenue',
+    align: 'right',
     width: '9rem',
   },
   {

frontend/src/pages/Contacts.vue

@@ -70,10 +70,12 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
+import { getMeta } from '@/stores/meta'
 import { organizationsStore } from '@/stores/organizations.js'
 import { formatDate, timeAgo } from '@/utils'
 import { ref, computed } from 'vue'
 
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } = getMeta('Contact')
 const { getOrganization } = organizationsStore()
 
 const showContactModal = ref(false)
@@ -110,6 +112,18 @@ const rows = computed(() => {
         _rows[row] = formatDate(contact[row], '', true, fieldType == 'Datetime')
       }
 
+      if (fieldType && fieldType == 'Currency') {
+        _rows[row] = getFormattedCurrency(row, contact)
+      }
+
+      if (fieldType && fieldType == 'Float') {
+        _rows[row] = getFormattedFloat(row, contact)
+      }
+
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, contact)
+      }
+
       if (row == 'full_name') {
         _rows[row] = {
           label: contact.full_name,