fix: whatsapp & call tab not loading if directly routed via url

frontend/src/components/Activities/Activities.vue

@@ -457,10 +457,6 @@ const { getUser } = usersStore()
 const { getContact, getLeadContact } = contactsStore()
 
 const props = defineProps({
-  title: {
-    type: String,
-    default: 'Activity',
-  },
   doctype: {
     type: String,
     default: 'CRM Lead',
@@ -471,6 +467,8 @@ const props = defineProps({
   },
 })
 
+const route = useRoute()
+
 const doc = defineModel()
 const reload = defineModel('reload')
 const tabIndex = defineModel('tabIndex')
@@ -478,6 +476,8 @@ const tabIndex = defineModel('tabIndex')
 const reload_email = ref(false)
 const modalRef = ref(null)
 
+const title = computed(() => props.tabs?.[tabIndex.value]?.name || 'Activity')
+
 const all_activities = createResource({
   url: 'crm.api.activities.get_activities',
   params: { name: doc.value.data.name },
@@ -549,6 +549,14 @@ onMounted(() => {
       whatsappMessages.reload()
     }
   })
+
+  nextTick(() => {
+    const hash = route.hash.slice(1) || null
+    let tabNames = props.tabs?.map((tab) => tab.name)
+    if (!tabNames?.includes(hash)) {
+      scroll(hash)
+    }
+  })
 })
 
 function sendTemplate(template) {
@@ -577,25 +585,25 @@ function get_activities() {
 
 const activities = computed(() => {
   let activities = []
-  if (props.title == 'Activity') {
+  if (title.value == 'Activity') {
     activities = get_activities()
-  } else if (props.title == 'Emails') {
+  } else if (title.value == 'Emails') {
     if (!all_activities.data?.versions) return []
     activities = all_activities.data.versions.filter(
       (activity) => activity.activity_type === 'communication',
     )
-  } else if (props.title == 'Comments') {
+  } else if (title.value == 'Comments') {
     if (!all_activities.data?.versions) return []
     activities = all_activities.data.versions.filter(
       (activity) => activity.activity_type === 'comment',
     )
-  } else if (props.title == 'Calls') {
+  } else if (title.value == 'Calls') {
     if (!all_activities.data?.calls) return []
     return sortByCreation(all_activities.data.calls)
-  } else if (props.title == 'Tasks') {
+  } else if (title.value == 'Tasks') {
     if (!all_activities.data?.tasks) return []
     return sortByCreation(all_activities.data.tasks)
-  } else if (props.title == 'Notes') {
+  } else if (title.value == 'Notes') {
     if (!all_activities.data?.notes) return []
     return sortByCreation(all_activities.data.notes)
   }
@@ -649,17 +657,17 @@ function update_activities_details(activity) {
 
 const emptyText = computed(() => {
   let text = 'No Activities'
-  if (props.title == 'Emails') {
+  if (title.value == 'Emails') {
     text = 'No Email Communications'
-  } else if (props.title == 'Comments') {
+  } else if (title.value == 'Comments') {
     text = 'No Comments'
-  } else if (props.title == 'Calls') {
+  } else if (title.value == 'Calls') {
     text = 'No Call Logs'
-  } else if (props.title == 'Notes') {
+  } else if (title.value == 'Notes') {
     text = 'No Notes'
-  } else if (props.title == 'Tasks') {
+  } else if (title.value == 'Tasks') {
     text = 'No Tasks'
-  } else if (props.title == 'WhatsApp') {
+  } else if (title.value == 'WhatsApp') {
     text = 'No WhatsApp Messages'
   }
   return text
@@ -667,17 +675,17 @@ const emptyText = computed(() => {
 
 const emptyTextIcon = computed(() => {
   let icon = ActivityIcon
-  if (props.title == 'Emails') {
+  if (title.value == 'Emails') {
     icon = Email2Icon
-  } else if (props.title == 'Comments') {
+  } else if (title.value == 'Comments') {
     icon = CommentIcon
-  } else if (props.title == 'Calls') {
+  } else if (title.value == 'Calls') {
     icon = PhoneIcon
-  } else if (props.title == 'Notes') {
+  } else if (title.value == 'Notes') {
     icon = NoteIcon
-  } else if (props.title == 'Tasks') {
+  } else if (title.value == 'Tasks') {
     icon = TaskIcon
-  } else if (props.title == 'WhatsApp') {
+  } else if (title.value == 'WhatsApp') {
     icon = WhatsAppIcon
   }
   return h(icon, { class: 'text-gray-500' })
@@ -737,11 +745,4 @@ function scroll(hash) {
 }
 
 defineExpose({ emailBox })
-
-const route = useRoute()
-
-nextTick(() => {
-  const hash = route.hash.slice(1) || null
-  scroll(hash)
-})
 </script>

frontend/src/composables/useActiveTabManager.js

@@ -3,16 +3,17 @@ import { useRoute, useRouter } from 'vue-router'
 import { useDebounceFn, useStorage } from '@vueuse/core'
 
 export function useActiveTabManager(tabs, storageKey) {
-  const activieTab = useStorage(storageKey, 'activity')
+  const activeTab = useStorage(storageKey, 'activity')
   const route = useRoute()
   const router = useRouter()
 
   const preserveLastVisitedTab = useDebounceFn((tabName) => {
-    activieTab.value = tabName.toLowerCase()
+    activeTab.value = tabName.toLowerCase()
   }, 300)
 
   function setActiveTabInUrl(tabName) {
     let hash = '#' + tabName.toLowerCase()
+    if (route.hash === hash) return
     router.push({ ...route, hash })
   }
 
@@ -21,7 +22,7 @@ export function useActiveTabManager(tabs, storageKey) {
   }
 
   function findTabIndex(tabName) {
-    return tabs.value.findIndex(
+    return tabs.value?.findIndex(
       (tabOptions) => tabOptions.name.toLowerCase() === tabName,
     )
   }
@@ -31,22 +32,18 @@ export function useActiveTabManager(tabs, storageKey) {
     return index !== -1 ? index : 0 // Default to the first tab if not found
   }
 
-  function getActiveTabFromLocalStorage() {
-    return activieTab.value
-  }
-
   function getActiveTab() {
-    let activeTab = getActiveTabFromUrl()
+    let _activeTab = getActiveTabFromUrl()
-    if (activeTab) {
+    if (_activeTab) {
-      let index = findTabIndex(activeTab)
+      let index = findTabIndex(_activeTab)
       if (index !== -1) {
-        preserveLastVisitedTab(activeTab)
+        preserveLastVisitedTab(_activeTab)
         return index
       }
       return 0
     }
 
-    let lastVisitedTab = getActiveTabFromLocalStorage()
+    let lastVisitedTab = activeTab.value
     if (lastVisitedTab) {
       return getTabIndex(lastVisitedTab)
     }
@@ -57,7 +54,7 @@ export function useActiveTabManager(tabs, storageKey) {
   const tabIndex = ref(getActiveTab())
 
   watch(tabIndex, (tabIndexValue) => {
-    let currentTab = tabs.value[tabIndexValue].name
+    let currentTab = tabs.value?.[tabIndexValue].name
     setActiveTabInUrl(currentTab)
     preserveLastVisitedTab(currentTab)
   })
@@ -71,11 +68,15 @@ export function useActiveTabManager(tabs, storageKey) {
       let index = findTabIndex(tabName)
       if (index === -1) index = 0
 
-      let currentTab = tabs.value[index].name
+      let currentTab = tabs.value?.[index].name
       preserveLastVisitedTab(currentTab)
       tabIndex.value = index
     },
   )
 
+  watch(tabs, () => {
+    tabIndex.value = getActiveTab()
+  })
+
   return { tabIndex }
 }

frontend/src/pages/Deal.vue

@@ -40,7 +40,7 @@
       <Activities
         ref="activities"
         doctype="CRM Deal"
-        :title="tab.name"
+        :tabs="tabs"
         v-model:reload="reload"
         v-model:tabIndex="tabIndex"
         v-model="deal"
@@ -356,7 +356,6 @@ import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useActiveTabManager } from '@/composables/useActiveTabManager'
 
-
 const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getDealStatus } = statusesStore()
 const { isManager } = usersStore()

frontend/src/pages/Lead.vue

@@ -45,7 +45,6 @@
       <Activities
         ref="activities"
         doctype="CRM Lead"
-        :title="tab.name"
         :tabs="tabs"
         v-model:reload="reload"
         v-model:tabIndex="tabIndex"