refactor: better way to update field/field in lead/deal

frontend/src/pages/Deal.vue

@@ -8,7 +8,7 @@
         type="autocomplete"
         :options="activeAgents"
         :value="getUser(deal.data.deal_owner).full_name"
-        @change="(option) => updateAssignedAgent(option.email)"
+        @change="(option) => updateField('deal_owner', option.email)"
         placeholder="Deal owner"
       >
         <template #prefix>
@@ -18,7 +18,9 @@
           <UserAvatar class="mr-2" :user="option.email" size="sm" />
         </template>
       </FormControl>
-      <Dropdown :options="statusDropdownOptions(deal.data, 'deal', updateDeal)">
+      <Dropdown
+        :options="statusDropdownOptions(deal.data, 'deal', updateField)"
+      >
         <template #default="{ open }">
           <Button :label="deal.data.status">
             <template #prefix>
@@ -170,7 +172,9 @@
                         type="autocomplete"
                         :options="activeAgents"
                         :value="getUser(deal.data[field.name]).full_name"
-                        @change="(option) => updateAssignedAgent(option.email)"
+                        @change="
+                          (option) => updateField('deal_owner', option.email)
+                        "
                         class="form-control"
                         :placeholder="deal.placeholder"
                       >
@@ -200,7 +204,7 @@
                       <Dropdown
                         v-else-if="field.type === 'dropdown'"
                         :options="
-                          statusDropdownOptions(deal.data, 'deal', updateDeal)
+                          statusDropdownOptions(deal.data, 'deal', updateField)
                         "
                         class="w-full flex-1"
                       >
@@ -352,7 +356,9 @@ const deal = createResource({
 
 const reload = ref(false)
 
-function updateDeal(fieldname, value) {
+function updateDeal(fieldname, value, callback) {
+  value = Array.isArray(fieldname) ? '' : value
+
   createResource({
     url: 'frappe.client.set_value',
     params: {
@@ -371,6 +377,7 @@ function updateDeal(fieldname, value) {
         icon: 'check',
         iconClasses: 'text-green-600',
       })
+      callback?.()
     },
     onError: (err) => {
       createToast({
@@ -428,10 +435,7 @@ const detailSections = computed(() => {
           name: 'organization',
           placeholder: 'Select organization',
           options: getOrganizationOptions(),
-          change: (data) => {
+          change: (data) => updateField('organization', data.value),
-            deal.data.organization = data.value
-            updateDeal('organization', data.value)
-          },
           link: () => {
             router.push({
               name: 'Organization',
@@ -492,10 +496,7 @@ const detailSections = computed(() => {
             { label: 'Madam', value: 'Madam' },
             { label: 'Miss', value: 'Miss' },
           ],
-          change: (data) => {
+          change: (data) => updateField('salutation', data.value),
-            deal.data.salutation = data.value
-            updateDeal('salutation', data.value)
-          },
         },
         {
           label: 'First name',
@@ -526,9 +527,10 @@ const organization = computed(() => {
   return getOrganization(deal.data.organization)
 })
 
-function updateAssignedAgent(email) {
+function updateField(name, value) {
-  deal.data.deal_owner = email
+  updateDeal(name, value, () => {
-  updateDeal('deal_owner', email)
+    deal.data[name] = value
+  })
 }
 </script>
 

frontend/src/pages/Lead.vue

@@ -18,7 +18,7 @@
           <UserAvatar class="mr-2" :user="option.email" size="sm" />
         </template>
       </FormControl>
-      <Dropdown :options="statusDropdownOptions(lead.data, 'lead', updateLead)">
+      <Dropdown :options="statusDropdownOptions(lead.data, 'lead', updateField)">
         <template #default="{ open }">
           <Button :label="lead.data.status">
             <template #prefix>
@@ -32,11 +32,7 @@
           </Button>
         </template>
       </Dropdown>
-      <Button
+      <Button label="Convert to deal" variant="solid" @click="convertToDeal" />
-        label="Convert to deal"
-        variant="solid"
-        @click="convertToDeal()"
-      />
     </template>
   </LayoutHeader>
   <div v-if="lead?.data" class="flex h-full overflow-hidden">
@@ -54,7 +50,7 @@
       >
         About this lead
       </div>
-      <FileUploader @success="changeLeadImage" :validateFile="validateFile">
+      <FileUploader @success="(file) => updateField('image', file.file_url)" :validateFile="validateFile">
         <template #default="{ openFileSelector, error }">
           <div class="flex items-center justify-start gap-5 p-5">
             <div class="group relative h-[88px] w-[88px]">
@@ -80,7 +76,7 @@
                           {
                             icon: 'trash-2',
                             label: 'Remove image',
-                            onClick: () => changeLeadImage(''),
+                            onClick: () => updateField('image', ''),
                           },
                         ],
                       }
@@ -254,37 +250,6 @@
                           />
                         </template>
                       </FormControl>
-                      <Dropdown
-                        v-else-if="field.type === 'dropdown'"
-                        :options="
-                          statusDropdownOptions(lead.data, 'lead', updateLead)
-                        "
-                        class="w-full flex-1"
-                      >
-                        <template #default="{ open }">
-                          <Button
-                            :label="lead.data[field.name]"
-                            class="w-full justify-between"
-                          >
-                            <template #prefix>
-                              <IndicatorIcon
-                                :class="
-                                  leadStatuses[lead.data[field.name]].color
-                                "
-                              />
-                            </template>
-                            <template #default>{{
-                              lead.data[field.name]
-                            }}</template>
-                            <template #suffix>
-                              <FeatherIcon
-                                :name="open ? 'chevron-up' : 'chevron-down'"
-                                class="h-4 text-gray-600"
-                              />
-                            </template>
-                          </Button>
-                        </template>
-                      </Dropdown>
                       <Tooltip
                         :text="field.tooltip"
                         class="flex h-7 cursor-pointer items-center px-2 py-1"
@@ -395,7 +360,9 @@ const reload = ref(false)
 const showOrganizationModal = ref(false)
 const _organization = ref({})
 
-function updateLead(fieldname, value) {
+function updateLead(fieldname, value, callback) {
+  value = Array.isArray(fieldname) ? '' : value
+
   createResource({
     url: 'frappe.client.set_value',
     params: {
@@ -414,6 +381,7 @@ function updateLead(fieldname, value) {
         icon: 'check',
         iconClasses: 'text-green-600',
       })
+      callback?.()
     },
     onError: (err) => {
       createToast({
@@ -459,11 +427,6 @@ const tabs = [
   },
 ]
 
-function changeLeadImage(file) {
-  lead.data.image = file.file_url
-  updateLead('image', file.file_url)
-}
-
 function validateFile(file) {
   let extn = file.name.split('.').pop().toLowerCase()
   if (!['png', 'jpg', 'jpeg'].includes(extn)) {
@@ -519,10 +482,7 @@ const detailSections = computed(() => {
             { label: 'Web', value: 'Web' },
             { label: 'Others', value: 'Others' },
           ],
-          change: (data) => {
+          change: (data) => updateField('source', data.value),
-            lead.data.source = data.value
-            updateLead('source', data.value)
-          },
         },
         {
           label: 'Industry',
@@ -535,10 +495,7 @@ const detailSections = computed(() => {
             { label: 'Banking', value: 'Banking' },
             { label: 'Others', value: 'Others' },
           ],
-          change: (data) => {
+          change: (data) => updateField('industry', data.value),
-            lead.data.industry = data.value
-            updateLead('industry', data.value)
-          },
         },
       ],
     },
@@ -562,10 +519,7 @@ const detailSections = computed(() => {
             { label: 'Madam', value: 'Madam' },
             { label: 'Miss', value: 'Miss' },
           ],
-          change: (data) => {
+          change: (data) => updateField('salutation', data.value),
-            lead.data.salutation = data.value
-            updateLead('salutation', data.value)
-          },
         },
         {
           label: 'First name',
@@ -597,9 +551,11 @@ const organization = computed(() => {
 })
 
 function convertToDeal() {
-  lead.data.status = 'Qualified'
+  updateLead({ status: 'Qualified', converted: 1 }, '', () => {
-  lead.data.converted = 1
+    lead.data.status = 'Qualified'
-  createDeal(lead.data)
+    lead.data.converted = 1
+    createDeal(lead.data)
+  })
 }
 
 async function createDeal(lead) {
@@ -618,8 +574,9 @@ async function createDeal(lead) {
 }
 
 function updateField(name, value) {
-  lead.data[name] = value
+  updateLead(name, value, () => {
-  updateLead(name, value)
+    lead.data[name] = value
+  })
 }
 </script>
 

frontend/src/utils/index.js

@@ -78,7 +78,6 @@ export function statusDropdownOptions(data, doctype, action) {
       label: statuses[status].label,
       icon: () => h(IndicatorIcon, { class: statuses[status].color }),
       onClick: () => {
-        data.status = statuses[status].label
         action && action('status', statuses[status].label)
       },
     })