refactor: link request

src/pages/05_quotation/TableRequest.vue

@@ -20,7 +20,7 @@ const columns = [
     field: (e: RequestData & { _index: number }) => e._index + 1,
   },
   {
-    name: 'code',
+    name: '#codeRequest',
     align: 'center',
     label: 'quotation.tableColumnsRequest.code',
     field: (v: RequestData) => v.code,
@@ -35,7 +35,7 @@ const columns = [
     },
   },
   {
-    name: 'requestDataStatus',
+    name: '#requestDataStatus',
     align: 'left',
     label: 'general.status',
     field: (v: RequestData) => v.requestDataStatus,
@@ -47,6 +47,11 @@ const emits = defineEmits<{
 }>();
 
 const open = defineModel<boolean>('open', { default: false });
+
+function goToRequestList(id: string) {
+  const url = new URL(`/request-list/${id}`, window.location.origin);
+  window.open(url.toString(), '_blank');
+}
 </script>
 
 <template>
@@ -73,9 +78,7 @@ const open = defineModel<boolean>('open', { default: false });
         :props="props"
       >
         <q-th v-for="col in columns" :key="col.name" :props="props">
-          <template v-if="!col.name.startsWith('#')">
-            {{ $t(col.label) }}
-          </template>
+          {{ $t(col.label) }}
         </q-th>
       </q-tr>
     </template>
@@ -88,7 +91,7 @@ const open = defineModel<boolean>('open', { default: false });
       <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
         <q-td v-for="col in columns" :align="col.align">
           <!-- NOTE: custom column will starts with # -->
-          <template v-if="col.name !== 'requestDataStatus'">
+          <template v-if="!col.name.startsWith('#')">
             <span>
               {{
                 typeof col.field === 'string'
@@ -98,7 +101,16 @@ const open = defineModel<boolean>('open', { default: false });
             </span>
           </template>
 
-          <template v-else>
+          <template v-if="col.name === '#codeRequest'">
+            <span
+              class="cursor-pointer link"
+              @click="goToRequestList(props.row.id)"
+            >
+              {{ props.row.code }}
+            </span>
+          </template>
+
+          <template v-if="col.name === '#requestDataStatus'">
             <span>
               <BadgeComponent
                 :hsla-color="
@@ -125,6 +137,11 @@ const open = defineModel<boolean>('open', { default: false });
 </template>
 
 <style scoped>
+.link {
+  color: hsl(var(--info-bg));
+  text-decoration: underline;
+}
+
 .selectable-item {
   padding: 0;
   appearance: none;