fix: routes in communication tabs[WTEL-4296]

src/app/router/index.js

@@ -62,9 +62,25 @@ const routes = [
         children: [
           {
             path: 'communications',
+            redirect: {
+              name: `${CrmSections.CONTACTS}-communications-phones`,
+            },
             name: `${CrmSections.CONTACTS}-communications`,
             component: ContactCommunications,
+            children: [
+              {
+                path: 'phones',
+                name: `${CrmSections.CONTACTS}-communications-phones`,
+                component: ContactCommunications,
+              },
+              {
+                path: 'emails',
+                name: `${CrmSections.CONTACTS}-communications-emails`,
+                component: ContactCommunications,
+              },
+            ],
           },
+
           {
             path: 'variables',
             name: `${CrmSections.CONTACTS}-variables`,

src/modules/contacts/components/opened-contact-communications.vue

@@ -7,7 +7,7 @@
         :disabled="currentTab.value === tab.value"
         :color="currentTab.value !== tab.value && 'secondary'"
         wide
-        @click="currentTab = tab"
+        @click="changeTab(tab)"
       >
         <wt-icon
           :icon="tab.icon"
@@ -23,9 +23,11 @@
 </template>
 
 <script setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
+import CrmSections from '@webitel/ui-sdk/src/enums/WebitelApplications/CrmSections.enum';
 import TheEmails from '../modules/emails/components/the-emails.vue';
 import ThePhones from '../modules/phones/components/the-phones.vue';
 
@@ -43,6 +45,8 @@ const phonesNamespace = `${props.namespace}/phones`;
 
 const store = useStore();
 const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
 
 const tabs = computed(() => [
   {
@@ -52,6 +56,7 @@ const tabs = computed(() => [
     namespace: phonesNamespace,
     icon: 'call',
     channel: 'number', // must be same as comm popup channel
+    pathName: `${CrmSections.CONTACTS}-communications-phones`,
   },
   {
     value: 'emails',
@@ -60,10 +65,15 @@ const tabs = computed(() => [
     namespace: emailsNamespace,
     icon: 'email',
     channel: 'email', // must be same as comm popup channel
+    pathName: `${CrmSections.CONTACTS}-communications-emails`,
   },
 ]);
 
-const currentTab = ref(tabs.value[0]);
+const currentTab = computed(() => tabs.value.find(({ pathName }) => pathName === route.name))
+
+function changeTab(tab) {
+  return router.push({ name: tab.pathName });
+}
 
 </script>
 

src/modules/contacts/components/opened-contact-tabs.vue

@@ -51,19 +51,13 @@ const tabs = computed(() => [
   },
 ]);
 
-const currentTab = computed(() => tabs.value.find(({ pathName }) => pathName === route.name));
+const currentTab = computed(() => {
+  return tabs.value.find(({ pathName }) => route?.matched?.find(({name}) => name === pathName));
+});
 
 function changeTab(tab) {
   return router.push({ name: tab.pathName });
 }
-
-function initializeTab() {
-  if (!currentTab.value) changeTab(tabs.value[0]);
-}
-
-onMounted(() => {
-  initializeTab();
-});
 </script>
 
 <style lang="scss" scoped>