fix: render async form custom actions & statuses

frontend/src/pages/Deal.vue

@@ -8,19 +8,14 @@
       </Breadcrumbs>
     </template>
     <template #right-header>
-      <CustomActions
+      <CustomActions v-if="customActions" :actions="customActions" />
-        v-if="deal.data._customActions"
-        :actions="deal.data._customActions"
-      />
       <component :is="deal.data._assignedTo?.length == 1 ? 'Button' : 'div'">
         <MultipleAvatar
           :avatars="deal.data._assignedTo"
           @click="showAssignmentModal = true"
         />
       </component>
-      <Dropdown
+      <Dropdown :options="statusOptions('deal', updateField, customStatuses)">
-        :options="statusOptions('deal', updateField, deal.data._customStatuses)"
-      >
         <template #default="{ open }">
           <Button
             :label="deal.data.status"
@@ -172,7 +167,7 @@
               <div v-else>
                 <div
                   v-if="
-                    deal_contacts?.loading && deal_contacts?.data?.length == 0
+                    dealContacts?.loading && dealContacts?.data?.length == 0
                   "
                   class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-gray-500"
                 >
@@ -180,8 +175,8 @@
                   <span>{{ __('Loading...') }}</span>
                 </div>
                 <div
-                  v-else-if="deal_contacts?.data?.length"
+                  v-else-if="dealContacts?.data?.length"
-                  v-for="(contact, i) in deal_contacts.data"
+                  v-for="(contact, i) in dealContacts.data"
                   :key="contact.name"
                 >
                   <div
@@ -257,7 +252,7 @@
                     </Section>
                   </div>
                   <div
-                    v-if="i != deal_contacts.data.length - 1"
+                    v-if="i != dealContacts.data.length - 1"
                     class="mx-2 h-px border-t border-gray-200"
                   />
                 </div>
@@ -340,8 +335,7 @@ import {
   openWebsite,
   createToast,
   setupAssignees,
-  setupCustomActions,
+  setupCustomizations,
-  setupCustomStatuses,
   errorMessage,
   copyToClipboard,
 } from '@/utils'
@@ -378,11 +372,14 @@ const props = defineProps({
   },
 })
 
+const customActions = ref([])
+const customStatuses = ref([])
+
 const deal = createResource({
   url: 'crm.fcrm.doctype.crm_deal.api.get_deal',
   params: { name: props.dealId },
   cache: ['deal', props.dealId],
-  onSuccess: (data) => {
+  onSuccess: async (data) => {
     let obj = {
       doc: data,
       $dialog,
@@ -393,14 +390,15 @@ const deal = createResource({
       deleteDoc: deleteDeal,
       resource: {
         deal,
-        deal_contacts,
+        dealContacts,
         fieldsLayout,
       },
       call,
     }
     setupAssignees(data)
-    setupCustomStatuses(data, obj)
+    let customization = await setupCustomizations(data, obj)
-    setupCustomActions(data, obj)
+    customActions.value = customization.actions || []
+    customStatuses.value = customization.statuses || []
   },
 })
 
@@ -613,7 +611,7 @@ async function addContact(contact) {
     contact,
   })
   if (d) {
-    deal_contacts.reload()
+    dealContacts.reload()
     createToast({
       title: __('Contact added'),
       icon: 'check',
@@ -628,7 +626,7 @@ async function removeContact(contact) {
     contact,
   })
   if (d) {
-    deal_contacts.reload()
+    dealContacts.reload()
     createToast({
       title: __('Contact removed'),
       icon: 'check',
@@ -643,7 +641,7 @@ async function setPrimaryContact(contact) {
     contact,
   })
   if (d) {
-    deal_contacts.reload()
+    dealContacts.reload()
     createToast({
       title: __('Primary contact set'),
       icon: 'check',
@@ -652,7 +650,7 @@ async function setPrimaryContact(contact) {
   }
 }
 
-const deal_contacts = createResource({
+const dealContacts = createResource({
   url: 'crm.fcrm.doctype.crm_deal.api.get_deal_contacts',
   params: { name: props.dealId },
   cache: ['deal_contacts', props.dealId],
@@ -666,7 +664,7 @@ const deal_contacts = createResource({
 })
 
 function triggerCall() {
-  let primaryContact = deal_contacts.data?.find((c) => c.is_primary)
+  let primaryContact = dealContacts.data?.find((c) => c.is_primary)
   let mobile_no = primaryContact.mobile_no || null
 
   if (!primaryContact) {

frontend/src/pages/Lead.vue

@@ -8,17 +8,14 @@
       </Breadcrumbs>
     </template>
     <template #right-header>
-      <CustomActions
+      <CustomActions v-if="customActions" :actions="customActions" />
-        v-if="lead.data._customActions"
-        :actions="lead.data._customActions"
-      />
       <component :is="lead.data._assignedTo?.length == 1 ? 'Button' : 'div'">
         <MultipleAvatar
           :avatars="lead.data._assignedTo"
           @click="showAssignmentModal = true"
         />
       </component>
-      <Dropdown :options="statusOptions('lead', updateField, lead.data._customStatuses)">
+      <Dropdown :options="statusOptions('lead', updateField, customStatuses)">
         <template #default="{ open }">
           <Button
             :label="lead.data.status"
@@ -307,8 +304,7 @@ import {
   openWebsite,
   createToast,
   setupAssignees,
-  setupCustomActions,
+  setupCustomizations,
-  setupCustomStatuses,
   errorMessage,
   copyToClipboard,
 } from '@/utils'
@@ -350,11 +346,14 @@ const props = defineProps({
   },
 })
 
+const customActions = ref([])
+const customStatuses = ref([])
+
 const lead = createResource({
   url: 'crm.fcrm.doctype.crm_lead.api.get_lead',
   params: { name: props.leadId },
   cache: ['lead', props.leadId],
-  onSuccess: (data) => {
+  onSuccess: async (data) => {
     let obj = {
       doc: data,
       $dialog,
@@ -370,8 +369,9 @@ const lead = createResource({
       call,
     }
     setupAssignees(data)
-    setupCustomStatuses(data, obj)
+    let customization = await setupCustomizations(data, obj)
-    setupCustomActions(data, obj)
+    customActions.value = customization.actions || []
+    customStatuses.value = customization.statuses || []
   },
 })
 

frontend/src/pages/MobileDeal.vue

@@ -9,11 +9,7 @@
         </template>
       </Breadcrumbs>
       <div class="absolute right-0">
-        <Dropdown
+        <Dropdown :options="statusOptions('deal', updateField, customStatuses)">
-          :options="
-            statusOptions('deal', updateField, deal.data._customStatuses)
-          "
-        >
           <template #default="{ open }">
             <Button
               :label="deal.data.status"
@@ -45,10 +41,7 @@
       />
     </component>
     <div class="flex items-center gap-2">
-      <CustomActions
+      <CustomActions v-if="customActions" :actions="customActions" />
-        v-if="deal.data._customActions"
-        :actions="deal.data._customActions"
-      />
     </div>
   </div>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
@@ -114,7 +107,7 @@
                 <div v-else>
                   <div
                     v-if="
-                      deal_contacts?.loading && deal_contacts?.data?.length == 0
+                      dealContacts?.loading && dealContacts?.data?.length == 0
                     "
                     class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-gray-500"
                   >
@@ -278,12 +271,7 @@ import Section from '@/components/Section.vue'
 import SectionFields from '@/components/SectionFields.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import {
+import { createToast, setupAssignees, setupCustomizations } from '@/utils'
-  createToast,
-  setupAssignees,
-  setupCustomActions,
-  setupCustomStatuses,
-} from '@/utils'
 import { getView } from '@/utils/view'
 import { globalStore } from '@/stores/global'
 import { organizationsStore } from '@/stores/organizations'
@@ -304,7 +292,7 @@ import {
 import { ref, computed, h, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-const { $dialog } = globalStore()
+const { $dialog, $socket } = globalStore()
 const { organizations, getOrganization } = organizationsStore()
 const { statusOptions, getDealStatus } = statusesStore()
 const route = useRoute()
@@ -317,23 +305,33 @@ const props = defineProps({
   },
 })
 
+const customActions = ref([])
+const customStatuses = ref([])
+
 const deal = createResource({
   url: 'crm.fcrm.doctype.crm_deal.api.get_deal',
   params: { name: props.dealId },
   cache: ['deal', props.dealId],
-  onSuccess: (data) => {
+  onSuccess: async (data) => {
     let obj = {
       doc: data,
       $dialog,
+      $socket,
       router,
       updateField,
       createToast,
       deleteDoc: deleteDeal,
+      resource: {
+        deal,
+        dealContacts,
+        fieldsLayout,
+      },
       call,
     }
     setupAssignees(data)
-    setupCustomStatuses(data, obj)
+    let customization = await setupCustomizations(data, obj)
-    setupCustomActions(data, obj)
+    customActions.value = customization.actions || []
+    customStatuses.value = customization.statuses || []
   },
 })
 
@@ -533,7 +531,7 @@ async function addContact(contact) {
     contact,
   })
   if (d) {
-    deal_contacts.reload()
+    dealContacts.reload()
     createToast({
       title: __('Contact added'),
       icon: 'check',
@@ -548,7 +546,7 @@ async function removeContact(contact) {
     contact,
   })
   if (d) {
-    deal_contacts.reload()
+    dealContacts.reload()
     createToast({
       title: __('Contact removed'),
       icon: 'check',
@@ -563,7 +561,7 @@ async function setPrimaryContact(contact) {
     contact,
   })
   if (d) {
-    deal_contacts.reload()
+    dealContacts.reload()
     createToast({
       title: __('Primary contact set'),
       icon: 'check',
@@ -572,7 +570,7 @@ async function setPrimaryContact(contact) {
   }
 }
 
-const deal_contacts = createResource({
+const dealContacts = createResource({
   url: 'crm.fcrm.doctype.crm_deal.api.get_deal_contacts',
   params: { name: props.dealId },
   cache: ['deal_contacts', props.dealId],

frontend/src/pages/MobileLead.vue

@@ -9,11 +9,7 @@
         </template>
       </Breadcrumbs>
       <div class="absolute right-0">
-        <Dropdown
+        <Dropdown :options="statusOptions('lead', updateField, customStatuses)">
-          :options="
-            statusOptions('lead', updateField, lead.data._customStatuses)
-          "
-        >
           <template #default="{ open }">
             <Button
               :label="lead.data.status"
@@ -45,10 +41,7 @@
       />
     </component>
     <div class="flex items-center gap-2">
-      <CustomActions
+      <CustomActions v-if="customActions" :actions="customActions" />
-        v-if="lead.data._customActions"
-        :actions="lead.data._customActions"
-      />
       <Button
         :label="__('Convert')"
         variant="solid"
@@ -199,12 +192,7 @@ import Section from '@/components/Section.vue'
 import SectionFields from '@/components/SectionFields.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import {
+import { createToast, setupAssignees, setupCustomizations } from '@/utils'
-  createToast,
-  setupAssignees,
-  setupCustomActions,
-  setupCustomStatuses,
-} from '@/utils'
 import { getView } from '@/utils/view'
 import { globalStore } from '@/stores/global'
 import { contactsStore } from '@/stores/contacts'
@@ -226,7 +214,7 @@ import {
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
-const { $dialog } = globalStore()
+const { $dialog, $socket } = globalStore()
 const { getContactByName, contacts } = contactsStore()
 const { organizations } = organizationsStore()
 const { statusOptions, getLeadStatus } = statusesStore()
@@ -240,23 +228,32 @@ const props = defineProps({
   },
 })
 
+const customActions = ref([])
+const customStatuses = ref([])
+
 const lead = createResource({
   url: 'crm.fcrm.doctype.crm_lead.api.get_lead',
   params: { name: props.leadId },
   cache: ['lead', props.leadId],
-  onSuccess: (data) => {
+  onSuccess: async (data) => {
     let obj = {
       doc: data,
       $dialog,
+      $socket,
       router,
       updateField,
       createToast,
       deleteDoc: deleteLead,
+      resource: {
+        lead,
+        fieldsLayout,
+      },
       call,
     }
     setupAssignees(data)
-    setupCustomStatuses(data, obj)
+    let customization = await setupCustomizations(data, obj)
-    setupCustomActions(data, obj)
+    customActions.value = customization.actions || []
+    customStatuses.value = customization.statuses || []
   },
 })
 

frontend/src/utils/index.js

@@ -57,7 +57,7 @@ export function taskStatusOptions(action, data) {
         label: status,
         onClick: () => action && action(status, data),
       }
-    }
+    },
   )
 }
 
@@ -125,46 +125,32 @@ export function setupAssignees(data) {
   }))
 }
 
-function getActionsFromScript(script, obj) {
+async function getFromScript(script, obj) {
   let scriptFn = new Function(script + '\nreturn setupForm')()
-  let formScript = scriptFn(obj)
+  let formScript = await scriptFn(obj)
-  return formScript?.actions || []
+  return formScript || {}
 }
 
-function getStatusFromScript(script, obj) {
+export async function setupCustomizations(data, obj) {
-  let scriptFn = new Function(script + '\nreturn setupForm')()
-  let formScript = scriptFn(obj)
-  return formScript?.statuses || []
-}
-
-export function setupCustomStatuses(data, obj) {
   if (!data._form_script) return []
 
   let statuses = []
+  let actions = []
   if (Array.isArray(data._form_script)) {
-    data._form_script.forEach((script) => {
+    for (let script of data._form_script) {
-      statuses = statuses.concat(getStatusFromScript(script, obj))
+      let _script = await getFromScript(script, obj)
-    })
+      actions = actions.concat(_script?.actions || [])
+      statuses = statuses.concat(_script?.statuses || [])
+    }
   } else {
-    statuses = getStatusFromScript(data._form_script, data)
+    let _script = await getFromScript(data._form_script, data)
+    actions = _script?.actions || []
+    statuses = _script?.statuses || []
   }
 
   data._customStatuses = statuses
-}
-
-export function setupCustomActions(data, obj) {
-  if (!data._form_script) return []
-
-  let actions = []
-  if (Array.isArray(data._form_script)) {
-    data._form_script.forEach((script) => {
-      actions = actions.concat(getActionsFromScript(script, obj))
-    })
-  } else {
-    actions = getActionsFromScript(data._form_script, obj)
-  }
-
   data._customActions = actions
+  return { statuses, actions }
 }
 
 function getActionsFromListScript(script, obj) {
@@ -235,7 +221,7 @@ export function isEmoji(str) {
 }
 
 export function isTouchScreenDevice() {
-	return "ontouchstart" in document.documentElement;
+  return 'ontouchstart' in document.documentElement
 }
 
 export function convertArrayToString(array) {