feat: show custom statuses in Lead/Deal page

frontend/src/pages/Deal.vue

@@ -18,7 +18,7 @@
           @click="showAssignmentModal = true"
         />
       </component>
-      <Dropdown :options="statusOptions('deal', updateField)">
+      <Dropdown :options="statusOptions('deal', updateField, deal.data._customStatuses)">
         <template #default="{ open }">
           <Button
             :label="deal.data.status"
@@ -339,6 +339,7 @@ import {
   createToast,
   setupAssignees,
   setupCustomActions,
+  setupCustomStatuses,
   errorMessage,
   copyToClipboard,
 } from '@/utils'
@@ -381,6 +382,7 @@ const deal = createResource({
   cache: ['deal', props.dealId],
   onSuccess: (data) => {
     setupAssignees(data)
+    setupCustomStatuses(data)
     setupCustomActions(data, {
       doc: data,
       $dialog,

frontend/src/pages/Lead.vue

@@ -18,7 +18,7 @@
           @click="showAssignmentModal = true"
         />
       </component>
-      <Dropdown :options="statusOptions('lead', updateField)">
+      <Dropdown :options="statusOptions('lead', updateField, lead.data._customStatuses)">
         <template #default="{ open }">
           <Button
             :label="lead.data.status"
@@ -308,6 +308,7 @@ import {
   createToast,
   setupAssignees,
   setupCustomActions,
+  setupCustomStatuses,
   errorMessage,
   copyToClipboard,
 } from '@/utils'
@@ -355,6 +356,7 @@ const lead = createResource({
   cache: ['lead', props.leadId],
   onSuccess: (data) => {
     setupAssignees(data)
+    setupCustomStatuses(data)
     setupCustomActions(data, {
       doc: data,
       $dialog,

frontend/src/pages/MobileDeal.vue

@@ -9,7 +9,11 @@
         </template>
       </Breadcrumbs>
       <div class="absolute right-0">
-        <Dropdown :options="statusOptions('deal', updateField)">
+        <Dropdown
+          :options="
+            statusOptions('deal', updateField, deal.data._customStatuses)
+          "
+        >
           <template #default="{ open }">
             <Button
               :label="deal.data.status"
@@ -274,7 +278,12 @@ 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 } from '@/utils'
+import {
+  createToast,
+  setupAssignees,
+  setupCustomActions,
+  setupCustomStatuses,
+} from '@/utils'
 import { getView } from '@/utils/view'
 import { globalStore } from '@/stores/global'
 import { organizationsStore } from '@/stores/organizations'
@@ -314,6 +323,7 @@ const deal = createResource({
   cache: ['deal', props.dealId],
   onSuccess: (data) => {
     setupAssignees(data)
+    setupCustomStatuses(data)
     setupCustomActions(data, {
       doc: data,
       $dialog,

frontend/src/pages/MobileLead.vue

@@ -9,7 +9,11 @@
         </template>
       </Breadcrumbs>
       <div class="absolute right-0">
-        <Dropdown :options="statusOptions('lead', updateField)">
+        <Dropdown
+          :options="
+            statusOptions('lead', updateField, lead.data._customStatuses)
+          "
+        >
           <template #default="{ open }">
             <Button
               :label="lead.data.status"
@@ -195,7 +199,12 @@ 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 } from '@/utils'
+import {
+  createToast,
+  setupAssignees,
+  setupCustomActions,
+  setupCustomStatuses,
+} from '@/utils'
 import { getView } from '@/utils/view'
 import { globalStore } from '@/stores/global'
 import { contactsStore } from '@/stores/contacts'
@@ -237,6 +246,7 @@ const lead = createResource({
   cache: ['lead', props.leadId],
   onSuccess: (data) => {
     setupAssignees(data)
+    setupCustomStatuses(data)
     setupCustomActions(data, {
       doc: data,
       $dialog,

frontend/src/stores/statuses.js

@@ -64,9 +64,9 @@ export const statusesStore = defineStore('crm-statuses', () => {
     } else if (['gray', 'green'].includes(color)) {
       textColor = `!text-${color}-700`
     }
-  
+
     let bgColor = `!bg-${color}-100 hover:!bg-${color}-200 active:!bg-${color}-300`
-  
+
     return [textColor, onlyIcon ? '' : bgColor]
   }
 
@@ -91,9 +91,17 @@ export const statusesStore = defineStore('crm-statuses', () => {
     return communicationStatuses[name]
   }
 
-  function statusOptions(doctype, action) {
+  function statusOptions(doctype, action, statuses = []) {
     let statusesByName =
       doctype == 'deal' ? dealStatusesByName : leadStatusesByName
+
+    if (statuses.length) {
+      statusesByName = statuses.reduce((acc, status) => {
+        acc[status] = statusesByName[status]
+        return acc
+      }, {})
+    }
+
     let options = []
     for (const status in statusesByName) {
       options.push({

frontend/src/utils/index.js

@@ -131,6 +131,27 @@ function getActionsFromScript(script, obj) {
   return formScript?.actions || []
 }
 
+function getStatusFromScript(script, obj) {
+  let scriptFn = new Function(script + '\nreturn setupForm')()
+  let formScript = scriptFn(obj)
+  return formScript?.statuses || []
+}
+
+export function setupCustomStatuses(data) {
+  if (!data._form_script) return []
+
+  let statuses = []
+  if (Array.isArray(data._form_script)) {
+    data._form_script.forEach((script) => {
+      statuses = statuses.concat(getStatusFromScript(script, data))
+    })
+  } else {
+    statuses = getStatusFromScript(data._form_script, data)
+  }
+
+  data._customStatuses = statuses
+}
+
 export function setupCustomActions(data, obj) {
   if (!data._form_script) return []