refactor: custom actions not loading on second visit

frontend/src/components/CustomActions.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-import { computed, h } from 'vue'
+import { computed } from 'vue'
 import { Dropdown } from 'frappe-ui'
 import { isMobileView } from '@/composables/settings'
 

frontend/src/pages/Deal.vue

@@ -8,13 +8,18 @@
       </Breadcrumbs>
     </template>
     <template #right-header>
-      <CustomActions v-if="customActions" :actions="customActions" />
+      <CustomActions
+        v-if="deal.data._customActions?.length"
+        :actions="deal.data._customActions"
+      />
       <AssignTo
         v-model="deal.data._assignedTo"
         :data="deal.data"
         doctype="CRM Deal"
       />
-      <Dropdown :options="statusOptions('deal', updateField, customStatuses)">
+      <Dropdown
+        :options="statusOptions('deal', updateField, deal.data._customStatuses)"
+      >
         <template #default="{ open }">
           <Button
             :label="deal.data.status"
@@ -317,14 +322,11 @@ 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: async (data) => {
+  onSuccess: (data) => {
     if (data.organization) {
       organization.update({
         params: { doctype: 'CRM Organization', name: data.organization },
@@ -332,7 +334,8 @@ const deal = createResource({
       organization.fetch()
     }
 
-    let obj = {
+    setupAssignees(deal)
+    setupCustomizations(deal, {
       doc: data,
       $dialog,
       $socket,
@@ -346,11 +349,7 @@ const deal = createResource({
         sections,
       },
       call,
-    }
+    })
-    setupAssignees(data)
-    let customization = await setupCustomizations(data, obj)
-    customActions.value = customization.actions || []
-    customStatuses.value = customization.statuses || []
   },
 })
 

frontend/src/pages/Lead.vue

@@ -8,13 +8,18 @@
       </Breadcrumbs>
     </template>
     <template #right-header>
-      <CustomActions v-if="customActions" :actions="customActions" />
+      <CustomActions
+        v-if="lead.data._customActions?.length"
+        :actions="lead.data._customActions"
+      />
       <AssignTo
         v-model="lead.data._assignedTo"
         :data="lead.data"
         doctype="CRM Lead"
       />
-      <Dropdown :options="statusOptions('lead', updateField, customStatuses)">
+      <Dropdown
+        :options="statusOptions('lead', updateField, lead.data._customStatuses)"
+      >
         <template #default="{ open }">
           <Button
             :label="lead.data.status"
@@ -329,15 +334,13 @@ 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: async (data) => {
+  onSuccess: (data) => {
-    let obj = {
+    setupAssignees(lead)
+    setupCustomizations(lead, {
       doc: data,
       $dialog,
       $socket,
@@ -345,16 +348,9 @@ const lead = createResource({
       updateField,
       createToast,
       deleteDoc: deleteLead,
-      resource: {
+      resource: { lead, sections },
-        lead,
-        sections,
-      },
       call,
-    }
+    })
-    setupAssignees(data)
-    let customization = await setupCustomizations(data, obj)
-    customActions.value = customization.actions || []
-    customStatuses.value = customization.statuses || []
   },
 })
 

frontend/src/pages/MobileDeal.vue

@@ -9,7 +9,11 @@
         </template>
       </Breadcrumbs>
       <div class="absolute right-0">
-        <Dropdown :options="statusOptions('deal', updateField, customStatuses)">
+        <Dropdown
+          :options="
+            statusOptions('deal', updateField, deal.data._customStatuses)
+          "
+        >
           <template #default="{ open }">
             <Button
               :label="deal.data.status"
@@ -40,7 +44,10 @@
       doctype="CRM Deal"
     />
     <div class="flex items-center gap-2">
-      <CustomActions v-if="customActions" :actions="customActions" />
+      <CustomActions
+        v-if="deal.data._customActions?.length"
+        :actions="deal.data._customActions"
+      />
     </div>
   </div>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
@@ -257,14 +264,11 @@ 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: async (data) => {
+  onSuccess: (data) => {
     if (data.organization) {
       organization.update({
         params: { doctype: 'CRM Organization', name: data.organization },
@@ -272,7 +276,8 @@ const deal = createResource({
       organization.fetch()
     }
 
-    let obj = {
+    setupAssignees(deal)
+    setupCustomizations(deal, {
       doc: data,
       $dialog,
       $socket,
@@ -286,11 +291,7 @@ const deal = createResource({
         sections,
       },
       call,
-    }
+    })
-    setupAssignees(data)
-    let customization = await setupCustomizations(data, obj)
-    customActions.value = customization.actions || []
-    customStatuses.value = customization.statuses || []
   },
 })
 

frontend/src/pages/MobileLead.vue

@@ -9,7 +9,11 @@
         </template>
       </Breadcrumbs>
       <div class="absolute right-0">
-        <Dropdown :options="statusOptions('lead', updateField, customStatuses)">
+        <Dropdown
+          :options="
+            statusOptions('lead', updateField, lead.data._customStatuses)
+          "
+        >
           <template #default="{ open }">
             <Button
               :label="lead.data.status"
@@ -40,7 +44,10 @@
       doctype="CRM Lead"
     />
     <div class="flex items-center gap-2">
-      <CustomActions v-if="customActions" :actions="customActions" />
+      <CustomActions
+        v-if="lead.data._customActions?.length"
+        :actions="lead.data._customActions"
+      />
       <Button
         :label="__('Convert')"
         variant="solid"
@@ -211,15 +218,13 @@ 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: async (data) => {
+  onSuccess: (data) => {
-    let obj = {
+    setupAssignees(lead)
+    setupCustomizations(lead, {
       doc: data,
       $dialog,
       $socket,
@@ -232,11 +237,7 @@ const lead = createResource({
         sections,
       },
       call,
-    }
+    })
-    setupAssignees(data)
-    let customization = await setupCustomizations(data, obj)
-    customActions.value = customization.actions || []
-    customStatuses.value = customization.statuses || []
   },
 })
 

frontend/src/utils/index.js

@@ -136,41 +136,41 @@ export function validateEmail(email) {
   return regExp.test(email)
 }
 
-export function setupAssignees(data) {
+export function setupAssignees(doc) {
   let { getUser } = usersStore()
-  let assignees = data._assign || []
+  let assignees = doc.data?._assign || []
-  data._assignedTo = assignees.map((user) => ({
+  doc.data._assignedTo = assignees.map((user) => ({
     name: user,
     image: getUser(user).user_image,
     label: getUser(user).full_name,
   }))
 }
 
-async function getFromScript(script, obj) {
+async function getFormScript(script, obj) {
   let scriptFn = new Function(script + '\nreturn setupForm')()
   let formScript = await scriptFn(obj)
   return formScript || {}
 }
 
-export async function setupCustomizations(data, obj) {
+export async function setupCustomizations(doc, obj) {
-  if (!data._form_script) return []
+  if (!doc.data?._form_script) return []
 
   let statuses = []
   let actions = []
-  if (Array.isArray(data._form_script)) {
+  if (Array.isArray(doc.data._form_script)) {
-    for (let script of data._form_script) {
+    for (let script of doc.data._form_script) {
-      let _script = await getFromScript(script, obj)
+      let _script = await getFormScript(script, obj)
       actions = actions.concat(_script?.actions || [])
       statuses = statuses.concat(_script?.statuses || [])
     }
   } else {
-    let _script = await getFromScript(data._form_script, obj)
+    let _script = await getFormScript(doc.data._form_script, obj)
     actions = _script?.actions || []
     statuses = _script?.statuses || []
   }
 
-  data._customStatuses = statuses
+  doc.data._customStatuses = statuses
-  data._customActions = actions
+  doc.data._customActions = actions
   return { statuses, actions }
 }