fix: routes in communication tabs[WTEL-4296]

src/app/router/index.js

@@ -62,9 +62,22 @@ const routes = [
         children: [
           {
             path: 'communications',
+            redirect: {
+              name: `${CrmSections.CONTACTS}-communications-phones`
+            },
             name: `${CrmSections.CONTACTS}-communications`,
             component: ContactCommunications,
           },
+          {
+            path: 'communications/phones',
+            name: `${CrmSections.CONTACTS}-communications-phones`,
+            component: ContactCommunications,
+          },
+          {
+            path: 'communications/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,24 @@ 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 = ref({});
+
+function changeTab(tab) {
+  currentTab.value = tab;
+  return router.push({ name: tab.pathName });
+}
+
+function initializeCommunicationsTab() {
+   currentTab.value = tabs.value.find(({ pathName }) => pathName === route.name)
+}
+
+onMounted(() => {
+  initializeCommunicationsTab();
+});
 
 </script>
 

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

@@ -51,7 +51,12 @@ const tabs = computed(() => [
   },
 ]);
 
-const currentTab = computed(() => tabs.value.find(({ pathName }) => pathName === route.name));
+const currentTab = computed(() => {
+  if(route.name.includes('communications')) {
+    return tabs.value.find(tab => tab.value === 'communications')
+  }
+  return tabs.value.find(({ pathName }) => pathName === route.name)
+});
 
 function changeTab(tab) {
   return router.push({ name: tab.pathName });