feat: add navigation to customer and employee details from request list

src/pages/03_customer-management/MainPage.vue

@@ -142,6 +142,14 @@ async function init() {
 
   gridView.value = $q.screen.lt.md ? true : false;
 
+  if (route.query.tab === 'customer') {
+    currentTab.value = 'employer';
+    if (route.query.id) openSpecificCustomer(route.query.id as string);
+  } else if (route.query.tab === 'employee') {
+    currentTab.value = 'employee';
+    if (route.query.id) openSpecificEmployee(route.query.id as string);
+  }
+
   if (route.name === 'CustomerManagement') await fetchListCustomer(true);
 
   if (
@@ -490,6 +498,30 @@ async function fetchImageList(
   return res;
 }
 
+async function openSpecificCustomer(id: string) {
+  await customerFormStore.assignFormData(id);
+  await fetchImageList(
+    id,
+    customerFormData.value.selectedImage || '',
+    'customer',
+  );
+  customerFormState.value.branchIndex = -1;
+  customerFormState.value.drawerModal = true;
+  customerFormState.value.editCustomerId = id;
+  customerFormState.value.dialogType = 'info';
+}
+
+async function openSpecificEmployee(id: string) {
+  await employeeFormStore.assignFormDataEmployee(id);
+  await fetchImageList(
+    id,
+    currentFromDataEmployee.value.selectedImage || '',
+    'employee',
+  );
+  employeeFormState.value.dialogType = 'info';
+  employeeFormState.value.drawerModal = true;
+}
+
 // TODO: When in employee form, if select address same as customer then auto fill
 
 watch(

src/pages/08_request-list/RequestListView.vue

@@ -438,6 +438,24 @@ async function submitRejectCancel() {
     pageState.rejectCancelDialog = false;
   }
 }
+
+function toCustomer(customer: RequestData['quotation']['customerBranch']) {
+  const url = new URL(
+    `/customer-management?tab=customer&id=${customer.customerId}`,
+    window.location.origin,
+  );
+
+  window.open(url.toString(), '_blank');
+}
+
+function toEmployee(employee: RequestData['employee']) {
+  const url = new URL(
+    `/customer-management?tab=employee&id=${employee.id}`,
+    window.location.origin,
+  );
+
+  window.open(url.toString(), '_blank');
+}
 </script>
 <template>
   <div class="column surface-0 fullscreen" v-if="data">
@@ -701,6 +719,7 @@ async function submitRejectCancel() {
                   }"
                 >
                   <DataDisplay
+                    clickable
                     class="col"
                     icon="mdi-account-settings-outline"
                     :label="$t('customer.employer')"
@@ -710,8 +729,10 @@ async function submitRejectCancel() {
                         noCode: true,
                       }) || '-'
                     "
+                    @label-click="toCustomer(data.quotation.customerBranch)"
                   />
                   <DataDisplay
+                    clickable
                     class="col"
                     icon="mdi-account-settings-outline"
                     :label="$t('customer.employee')"
@@ -720,6 +741,7 @@ async function submitRejectCancel() {
                         locale: $i18n.locale,
                       }) || '-'
                     "
+                    @label-click="toEmployee(data.employee)"
                   />
                   <DataDisplay
                     class="col"

src/pages/08_request-list/TableRequestList.vue

@@ -101,6 +101,24 @@ function getEmployeeName(
     }[opts?.locale || 'eng'] || '-'
   );
 }
+
+function toCustomer(customer: RequestData['quotation']['customerBranch']) {
+  const url = new URL(
+    `/customer-management?tab=customer&id=${customer.customerId}`,
+    window.location.origin,
+  );
+
+  window.open(url.toString(), '_blank');
+}
+
+function toEmployee(employee: RequestData['employee']) {
+  const url = new URL(
+    `/customer-management?tab=employee&id=${employee.id}`,
+    window.location.origin,
+  );
+
+  window.open(url.toString(), '_blank');
+}
 </script>
 <template>
   <q-table
@@ -159,15 +177,28 @@ function getEmployeeName(
           </div>
         </q-td>
         <q-td v-if="visibleColumns.includes('employer')" class="text-left">
-          {{
-            getCustomerName(props.row, {
-              noCode: true,
-              locale: $i18n.locale,
-            }) || '-'
-          }}
+          <span
+            class="link"
+            @click="toCustomer(props.row.quotation.customerBranch)"
+          >
+            {{
+              getCustomerName(props.row, {
+                noCode: true,
+                locale: $i18n.locale,
+              }) || '-'
+            }}
+            {{
+              getCustomerName(props.row, {
+                noCode: true,
+                locale: $i18n.locale,
+              }) || '-'
+            }}
+          </span>
         </q-td>
         <q-td v-if="visibleColumns.includes('employee')" class="text-left">
-          {{ getEmployeeName(props.row, { locale: $i18n.locale }) || '-' }}
+          <span class="link" @click="toEmployee(props.row.employee)">
+            {{ getEmployeeName(props.row, { locale: $i18n.locale }) || '-' }}
+          </span>
         </q-td>
 
         <q-td
@@ -450,4 +481,10 @@ function getEmployeeName(
     background: var(--red-8);
   }
 }
+
+.link {
+  color: hsl(var(--info-bg));
+  text-decoration: underline;
+  cursor: pointer;
+}
 </style>