feat: show formatted percent fields in listview, Modal & data fields

frontend/src/components/FieldLayout.vue

@@ -190,6 +190,14 @@
                     :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"
@@ -249,7 +257,8 @@ const props = defineProps({
   },
 })
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta(props.doctype)
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const hasTabs = computed(() => !props.tabs[0].no_tabs)

frontend/src/components/SidePanelLayout.vue

@@ -168,6 +168,15 @@
               @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"
@@ -242,7 +251,8 @@ const props = defineProps({
   },
 })
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta(props.doctype)
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta(props.doctype)
 const { getUser } = usersStore()
 
 const emit = defineEmits(['update'])

frontend/src/pages/Contacts.vue

@@ -75,7 +75,7 @@ import { organizationsStore } from '@/stores/organizations.js'
 import { formatDate, timeAgo } from '@/utils'
 import { ref, computed } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('Contact')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } = getMeta('Contact')
 const { getOrganization } = organizationsStore()
 
 const showContactModal = ref(false)
@@ -120,6 +120,10 @@ const rows = computed(() => {
         _rows[row] = getFormattedFloat(row, contact)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, contact)
+      }
+
       if (row == 'full_name') {
         _rows[row] = {
           label: contact.full_name,

frontend/src/pages/Deals.vue

@@ -292,7 +292,8 @@ import { Tooltip, Avatar, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, reactive, computed, h } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Deal')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Deal')
 const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
@@ -406,6 +407,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = getFormattedFloat(row, deal)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, deal)
+      }
+
       if (row == 'organization') {
         _rows[row] = {
           label: deal.organization,

frontend/src/pages/EmailTemplates.vue

@@ -79,7 +79,8 @@ import { getMeta } from '@/stores/meta'
 import { formatDate, timeAgo } from '@/utils'
 import { computed, ref } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('Email Template')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('Email Template')
 
 const emailTemplatesListView = ref(null)
 
@@ -126,6 +127,10 @@ const rows = computed(() => {
         _rows[row] = getFormattedFloat(row, emailTemplate)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, emailTemplate)
+      }
+
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: formatDate(emailTemplate[row]),

frontend/src/pages/Leads.vue

@@ -313,7 +313,8 @@ import { Avatar, Tooltip, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, computed, reactive, h } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Lead')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Lead')
 const { makeCall } = globalStore()
 const { getUser } = usersStore()
 const { getLeadStatus } = statusesStore()
@@ -426,6 +427,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = getFormattedFloat(row, lead)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, lead)
+      }
+
       if (row == 'lead_name') {
         _rows[row] = {
           label: lead.lead_name,

frontend/src/pages/Organizations.vue

@@ -73,7 +73,8 @@ import { getMeta } from '@/stores/meta'
 import { formatDate, timeAgo, website } from '@/utils'
 import { ref, computed } from 'vue'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Organization')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Organization')
 
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
@@ -121,6 +122,10 @@ const rows = computed(() => {
         _rows[row] = getFormattedFloat(row, organization)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, organization)
+      }
+
       if (row === 'organization_name') {
         _rows[row] = {
           label: organization.organization_name,

frontend/src/pages/Tasks.vue

@@ -211,7 +211,8 @@ import { Tooltip, Avatar, TextEditor, Dropdown, call } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Task')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Task')
 const { getUser } = usersStore()
 
 const router = useRouter()
@@ -281,6 +282,10 @@ function parseRows(rows, columns = []) {
         _rows[row] = getFormattedFloat(row, task)
       }
 
+      if (fieldType && fieldType == 'Percent') {
+        _rows[row] = getFormattedPercent(row, task)
+      }
+
       if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: formatDate(task[row]),

frontend/src/stores/meta.js

@@ -25,6 +25,11 @@ export function getMeta(doctype) {
     meta.fetch()
   }
 
+  function getFormattedPercent(fieldname, doc) {
+    let value = getFormattedFloat(fieldname, doc)
+    return value + '%'
+  }
+
   function getFormattedFloat(fieldname, doc) {
     let df = doctypeMeta[doctype]?.fields.find((f) => f.fieldname == fieldname)
     let precision = df?.precision || null
@@ -51,6 +56,7 @@ export function getMeta(doctype) {
     meta,
     doctypeMeta,
     getFormattedFloat,
+    getFormattedPercent,
     getFormattedCurrency,
   }
 }

frontend/src/utils/callLog.js

@@ -3,7 +3,8 @@ import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 
-const { getFormattedFloat, getFormattedCurrency } = getMeta('CRM Call Log')
+const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
+  getMeta('CRM Call Log')
 const { getUser } = usersStore()
 const { getContact, getLeadContact } = contactsStore()
 
@@ -68,6 +69,10 @@ export function getCallLogDetail(row, log, columns = []) {
     return getFormattedFloat(row, log)
   }
 
+  if (fieldType && fieldType == 'Percent') {
+    return getFormattedPercent(row, log)
+  }
+
   return log[row]
 }