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

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>