From 7147ed1819b66191d6658cc85e538553251d9930 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 29 Nov 2024 11:17:35 +0700
Subject: [PATCH] refactor: request list => display invoice code & payment code

---
 src/components/08_request-list/DataDisplay.vue | 10 ++++++----
 src/pages/08_request-list/RequestListView.vue  | 18 ++++++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/08_request-list/DataDisplay.vue b/src/components/08_request-list/DataDisplay.vue
index a377534e..8da99d99 100644
--- a/src/components/08_request-list/DataDisplay.vue
+++ b/src/components/08_request-list/DataDisplay.vue
@@ -7,6 +7,7 @@ withDefaults(
     value: string;
     icon?: string;
     iconSize?: string;
+    tooltip?: boolean;
   }>(),
   {
     label: '-',
@@ -16,19 +17,20 @@ withDefaults(
 </script>
 
 <template>
-  <article class="row items-center">
+  <article class="row items-center full-width">
     <Icon
       v-if="icon"
       :icon
       class="app-text-muted q-pr-sm"
       :width="iconSize || '2rem'"
     />
-    <span class="column">
-      <span class="app-text-muted-2 text-caption">
+    <span class="row col">
+      <span class="col-12 app-text-muted-2 text-caption">
         {{ label }}
       </span>
-      <span class="text-weight-medium">
+      <span class="col-12 text-weight-medium ellipsis">
         {{ value }}
+        <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
       </span>
     </span>
   </article>
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 491e7b26..3e896ed6 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // NOTE: Library
-import { onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, reactive, ref, watch, computed, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 // NOTE:  Components
@@ -36,7 +36,7 @@ import {
   PropOptions,
   PropString,
 } from 'src/stores/product-service/types';
-import { computed, nextTick } from 'vue';
+import { Invoice } from 'src/stores/payment/types';
 
 const { locale } = useI18n();
 
@@ -443,8 +443,13 @@ const successAll = computed(() => {
                   <DataDisplay
                     class="col"
                     icon="mdi-file-document-outline"
+                    tooltip
                     :label="$t('requestList.invoiceCode')"
-                    :value="'-'"
+                    :value="
+                      data.quotation?.invoice
+                        ?.map((i: Invoice) => i.code)
+                        .join(', ') || '-'
+                    "
                   />
                   <span class="col"></span>
                 </div>
@@ -455,8 +460,13 @@ const successAll = computed(() => {
                   <DataDisplay
                     class="col"
                     icon="mdi-file-document-outline"
+                    tooltip
                     :label="$t('requestList.receiptCode')"
-                    :value="'-'"
+                    :value="
+                      data.quotation?.invoice
+                        ?.flatMap((i: Invoice) => i.payment?.code || [])
+                        .join(', ') || '-'
+                    "
                   />
                   <DataDisplay
                     class="col"