refactor: custom actions not loading on second visit

frontend/src/components/Activities/EmailContent.vue

@@ -228,6 +228,9 @@ watch(iframeRef, (iframe) => {
         iframe.contentWindow.document.querySelector('.email-content')
       let parent = emailContent.closest('html')
 
+      let theme = document.documentElement.getAttribute('data-theme')
+      parent.setAttribute('data-theme', theme)
+
       iframe.style.height = parent.offsetHeight + 1 + 'px'
 
       let replyCollapsers = emailContent.querySelectorAll('.replyCollapser')

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/components/FilesUploader/FilesUploaderArea.vue

@@ -13,7 +13,7 @@
   </div>
   <div v-else>
     <div
-      class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed min-h-64 text-ink-gray-5"
+      class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed border-outline-gray-modals min-h-64 text-ink-gray-5"
       @dragover.prevent="dragover"
       @dragleave.prevent="dragleave"
       @drop.prevent="dropfiles"
@@ -128,7 +128,7 @@ import FileAudioIcon from '@/components/Icons/FileAudioIcon.vue'
 import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
 import { createToast, formatDate, convertSize } from '@/utils'
 import { FormControl, CircularProgressBar, createResource } from 'frappe-ui'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch, onUnmounted } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -383,6 +383,12 @@ function fileIcon(type) {
   return FileTextIcon
 }
 
+watch(showCamera, (value) => {
+  if (!value) stopStream()
+})
+
+onUnmounted(() => stopStream())
+
 defineExpose({
   showFileBrowser,
   showWebLink,

frontend/src/components/Kanban/KanbanView.vue

@@ -22,9 +22,7 @@
                     size="sm"
                     class="hover:!bg-surface-gray-2"
                   >
-                    <IndicatorIcon
-                      :class="colorClasses(column.column.color, true)"
-                    />
+                    <IndicatorIcon :class="parseColor(column.column.color)" />
                   </Button>
                 </template>
                 <template #body="{ close }">
@@ -33,13 +31,12 @@
                   >
                     <div class="flex gap-1">
                       <Button
-                        :class="colorClasses(color)"
                         variant="ghost"
                         v-for="color in colors"
                         :key="color"
                         @click="() => (column.column.color = color)"
                       >
-                        <IndicatorIcon />
+                        <IndicatorIcon :class="parseColor(color)" />
                       </Button>
                     </div>
                     <div class="flex flex-row-reverse">
@@ -172,7 +169,7 @@
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import { isTouchScreenDevice } from '@/utils'
+import { isTouchScreenDevice, colors, parseColor } from '@/utils'
 import Draggable from 'vuedraggable'
 import { Dropdown } from 'frappe-ui'
 import { computed } from 'vue'
@@ -265,33 +262,4 @@ function updateColumn(d) {
 
   emit('update', data)
 }
-
-function colorClasses(color, onlyIcon = false) {
-  let textColor = `!text-${color}-600`
-  if (color == 'black') {
-    textColor = '!text-ink-gray-9'
-  } 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]
-}
-
-const colors = [
-  'gray',
-  'blue',
-  'green',
-  'red',
-  'pink',
-  'orange',
-  'amber',
-  'yellow',
-  'cyan',
-  'teal',
-  'violet',
-  'purple',
-  'black',
-]
 </script>

frontend/src/components/Modals/DealModal.vue

@@ -163,7 +163,7 @@ const tabs = createResource({
             if (field.fieldname == 'status') {
               field.fieldtype = 'Select'
               field.options = dealStatuses.value
-              field.prefix = getDealStatus(deal.status).iconColorClass
+              field.prefix = getDealStatus(deal.status).color
             }
 
             if (field.fieldtype === 'Table') {

frontend/src/components/Modals/LeadModal.vue

@@ -76,7 +76,7 @@ const tabs = createResource({
             if (field.fieldname == 'status') {
               field.fieldtype = 'Select'
               field.options = leadStatuses.value
-              field.prefix = getLeadStatus(lead.status).iconColorClass
+              field.prefix = getLeadStatus(lead.status).color
             }
 
             if (field.fieldtype === 'Table') {

frontend/src/pages/Contact.vue

@@ -582,7 +582,7 @@ function getDealRowObject(deal) {
     annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
-      color: getDealStatus(deal.status)?.iconColorClass,
+      color: getDealStatus(deal.status)?.color,
     },
     email: deal.email,
     mobile_no: deal.mobile_no,

frontend/src/pages/Deal.vue

@@ -8,20 +8,22 @@
       </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"
-            :class="getDealStatus(deal.data.status).colorClass"
-          >
+          <Button :label="deal.data.status">
             <template #prefix>
-              <IndicatorIcon />
+              <IndicatorIcon :class="getDealStatus(deal.data.status).color" />
             </template>
             <template #suffix>
               <FeatherIcon
@@ -317,22 +319,20 @@ 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 },
       })
       organization.fetch()
     }
 
-    let obj = {
+    setupAssignees(deal)
+    setupCustomizations(deal, {
       doc: data,
       $dialog,
       $socket,
@@ -346,11 +346,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/Deals.vue

@@ -362,7 +362,7 @@ function getGroupedByRows(listRows, groupByField, columns) {
     if (groupByField.name == 'status') {
       groupDetail.icon = () =>
         h(IndicatorIcon, {
-          class: getDealStatus(option)?.iconColorClass,
+          class: getDealStatus(option)?.color,
         })
     }
     groupedRows.push(groupDetail)
@@ -421,7 +421,7 @@ function parseRows(rows, columns = []) {
       } else if (row == 'status') {
         _rows[row] = {
           label: deal.status,
-          color: getDealStatus(deal.status)?.iconColorClass,
+          color: getDealStatus(deal.status)?.color,
         }
       } else if (row == 'sla_status') {
         let value = deal.sla_status

frontend/src/pages/Lead.vue

@@ -8,20 +8,24 @@
       </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"
-            :class="getLeadStatus(lead.data.status).colorClass"
-          >
+          <Button :label="lead.data.status">
             <template #prefix>
-              <IndicatorIcon />
+              <IndicatorIcon
+                :class="getLeadStatus(lead.data.status).color"
+              />
             </template>
             <template #suffix>
               <FeatherIcon
@@ -329,32 +333,23 @@ 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) => {
-    let obj = {
+  onSuccess: (data) => {
+    setupAssignees(lead)
+    setupCustomizations(lead, {
       doc: data,
       $dialog,
       $socket,
       router,
       updateField,
       createToast,
       deleteDoc: deleteLead,
-      resource: {
-        lead,
-        sections,
-      },
+      resource: { lead, sections },
       call,
-    }
-    setupAssignees(data)
-    let customization = await setupCustomizations(data, obj)
-    customActions.value = customization.actions || []
-    customStatuses.value = customization.statuses || []
+    })
   },
 })
 

frontend/src/pages/Leads.vue

@@ -382,7 +382,7 @@ function getGroupedByRows(listRows, groupByField, columns) {
     if (groupByField.name == 'status') {
       groupDetail.icon = () =>
         h(IndicatorIcon, {
-          class: getLeadStatus(option)?.iconColorClass,
+          class: getLeadStatus(option)?.color,
         })
     }
     groupedRows.push(groupDetail)
@@ -444,7 +444,7 @@ function parseRows(rows, columns = []) {
       } else if (row == 'status') {
         _rows[row] = {
           label: lead.status,
-          color: getLeadStatus(lead.status)?.iconColorClass,
+          color: getLeadStatus(lead.status)?.color,
         }
       } else if (row == 'sla_status') {
         let value = lead.sla_status

frontend/src/pages/MobileContact.vue

@@ -592,7 +592,7 @@ function getDealRowObject(deal) {
     annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
-      color: getDealStatus(deal.status)?.iconColorClass,
+      color: getDealStatus(deal.status)?.color,
     },
     email: deal.email,
     mobile_no: deal.mobile_no,