fix: render async form custom actions & statuses

2024-09-16 20:53:32 +05:30 · 2024-09-16 20:53:32 +05:30 · 084ff543a4
commit 084ff543a4
parent 321c0d81bf
5 changed files with 85 additions and 106 deletions
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@ -8,19 +8,14 @@
      </Breadcrumbs>
    </template>
    <template #right-header>
-      <CustomActions
-        v-if="deal.data._customActions"
-        :actions="deal.data._customActions"
-      />
+      <CustomActions v-if="customActions" :actions="customActions" />
      <component :is="deal.data._assignedTo?.length == 1 ? 'Button' : 'div'">
        <MultipleAvatar
          :avatars="deal.data._assignedTo"
          @click="showAssignmentModal = true"
        />
      </component>
-      <Dropdown
-        :options="statusOptions('deal', updateField, deal.data._customStatuses)"
-      >
+      <Dropdown :options="statusOptions('deal', updateField, 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-for="(contact, i) in deal_contacts.data"
+                  v-else-if="dealContacts?.data?.length"
+                  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,
-  setupCustomStatuses,
+  setupCustomizations,
  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)
-    setupCustomActions(data, obj)
+    let customization = await setupCustomizations(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) {
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@ -8,17 +8,14 @@
      </Breadcrumbs>
    </template>
    <template #right-header>
-      <CustomActions
-        v-if="lead.data._customActions"
-        :actions="lead.data._customActions"
-      />
+      <CustomActions v-if="customActions" :actions="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,
-  setupCustomStatuses,
+  setupCustomizations,
  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)
-    setupCustomActions(data, obj)
+    let customization = await setupCustomizations(data, obj)
+    customActions.value = customization.actions || []
+    customStatuses.value = customization.statuses || []
  },
 })

--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@ -9,11 +9,7 @@
        </template>
      </Breadcrumbs>
      <div class="absolute right-0">
-        <Dropdown
-          :options="
-            statusOptions('deal', updateField, deal.data._customStatuses)
-          "
-        >
+        <Dropdown :options="statusOptions('deal', updateField, customStatuses)">
          <template #default="{ open }">
            <Button
              :label="deal.data.status"
@ -45,10 +41,7 @@
      />
    </component>
    <div class="flex items-center gap-2">
-      <CustomActions
-        v-if="deal.data._customActions"
-        :actions="deal.data._customActions"
-      />
+      <CustomActions v-if="customActions" :actions="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 {
-  createToast,
-  setupAssignees,
-  setupCustomActions,
-  setupCustomStatuses,
-} from '@/utils'
+import { createToast, setupAssignees, setupCustomizations } 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)
-    setupCustomActions(data, obj)
+    let customization = await setupCustomizations(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],
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@ -9,11 +9,7 @@
        </template>
      </Breadcrumbs>
      <div class="absolute right-0">
-        <Dropdown
-          :options="
-            statusOptions('lead', updateField, lead.data._customStatuses)
-          "
-        >
+        <Dropdown :options="statusOptions('lead', updateField, customStatuses)">
          <template #default="{ open }">
            <Button
              :label="lead.data.status"
@ -45,10 +41,7 @@
      />
    </component>
    <div class="flex items-center gap-2">
-      <CustomActions
-        v-if="lead.data._customActions"
-        :actions="lead.data._customActions"
-      />
+      <CustomActions v-if="customActions" :actions="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 {
-  createToast,
-  setupAssignees,
-  setupCustomActions,
-  setupCustomStatuses,
-} from '@/utils'
+import { createToast, setupAssignees, setupCustomizations } 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)
-    setupCustomActions(data, obj)
+    let customization = await setupCustomizations(data, obj)
+    customActions.value = customization.actions || []
+    customStatuses.value = customization.statuses || []
  },
 })

--- a/frontend/src/utils/index.js
+++ b/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)
-  return formScript?.actions || []
+  let formScript = await scriptFn(obj)
+  return formScript || {}
 }

-function getStatusFromScript(script, obj) {
-  let scriptFn = new Function(script + '\nreturn setupForm')()
-  let formScript = scriptFn(obj)
-  return formScript?.statuses || []
-}
-
-export function setupCustomStatuses(data, obj) {
+export async function setupCustomizations(data, obj) {
  if (!data._form_script) return []

  let statuses = []
+  let actions = []
  if (Array.isArray(data._form_script)) {
-    data._form_script.forEach((script) => {
-      statuses = statuses.concat(getStatusFromScript(script, obj))
-    })
+    for (let script of data._form_script) {
+      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) {
@ -282,4 +268,4 @@ export function evaluate_depends_on_value(expression, doc) {
  }

  return out
-}
+}