From 28b48e6c6f1e52ac7d84a45fec00e9386a2b4d4b Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 8 Nov 2024 10:55:58 +0700
Subject: [PATCH] refactor: quotation table width & clear warning

---
 .../05_quotation/TableQuotation.vue           |   9 +-
 src/pages/05_quotation/MainPage.vue           | 177 +++++++++---------
 2 files changed, 91 insertions(+), 95 deletions(-)

diff --git a/src/components/05_quotation/TableQuotation.vue b/src/components/05_quotation/TableQuotation.vue
index d192287f..080cb24b 100644
--- a/src/components/05_quotation/TableQuotation.vue
+++ b/src/components/05_quotation/TableQuotation.vue
@@ -55,6 +55,7 @@ defineEmits<{
     flat
     hide-pagination
     card-container-class="q-col-gutter-sm"
+    class="full-width"
   >
     <template v-slot:header="props">
       <q-tr
@@ -62,7 +63,7 @@ defineEmits<{
         :props="props"
       >
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          {{ $t(col.label) }}
+          {{ col.label && $t(col.label) }}
         </q-th>
       </q-tr>
     </template>
@@ -106,7 +107,7 @@ defineEmits<{
 
         <q-td v-if="visibleColumns.includes('status')">
           <BadgeComponent
-            :title-i18n="$t(quotationStatus(props.row.quotationStatus))"
+            :title="$t(quotationStatus(props.row.quotationStatus))"
           />
         </q-td>
 
@@ -120,7 +121,7 @@ defineEmits<{
           </span>
         </q-td>
 
-        <q-td>
+        <q-td class="text-right">
           <q-btn
             :id="`btn-eye-${props.row.firstName}`"
             icon="mdi-eye-outline"
@@ -132,6 +133,8 @@ defineEmits<{
           />
 
           <KebabAction
+            :idName="`btn-kebab-${props.row.firstName}`"
+            status="'ACTIVE'"
             hide-toggle
             @view="$emit('view', props.row)"
             @edit="$emit('edit', props.row)"
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 9619a052..5085841e 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -271,7 +271,6 @@ onMounted(async () => {
 
 async function fetchQuotationList() {
   {
-    console.log(pageState.currentTab);
     const ret = await quotationStore.getQuotationList({
       page: quotationPage.value,
       pageSize: quotationPageSize.value,
@@ -473,7 +472,7 @@ async function storeDataLocal(id: string) {
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,
-                    label: $t(v.label),
+                    label: v.label && $t(v.label),
                   }))
                 "
                 :display-value="$t('general.displayField')"
@@ -591,101 +590,95 @@ async function storeDataLocal(id: string) {
           />
         </article>
         <article v-else class="col surface-2 full-width scroll">
-          <div class="row">
-            <div style="overflow-x: auto" class="q-pa-md">
-              <TableQuotation
-                style="max-width: 100%"
-                :columns="columnQuotation"
-                :rows="quotationData"
-                :visible-columns="pageState.fieldSelected"
-                :grid="pageState.gridView"
-                @preview="(id: any) => storeDataLocal(id)"
-                @view="
-                  (item) => {
-                    triggerQuotationDialog({
-                      statusDialog: 'info',
-                      quotationId: item.id,
-                      branchId: item.customerBranch.customer.registeredBranchId,
-                    });
-                  }
-                "
-                @edit="
-                  (item) =>
-                    triggerQuotationDialog({
-                      statusDialog: 'edit',
-                      quotationId: item.id,
-                      branchId: item.customerBranch.customer.registeredBranchId,
-                    })
-                "
-                @delete="(id) => triggerDialogDeleteQuottaion(id)"
-              >
-                <template #grid="{ item }">
-                  <div class="col-md-4 col-sm-6 col-12">
-                    <QuotationCard
-                      :urgent="item.row.urgent"
-                      :code="item.row.code"
-                      :title="item.row.workName"
-                      :created-at="
-                        new Date(item.row.createdAt).toLocaleString('th-TH', {
+          <div class="q-pa-md">
+            <TableQuotation
+              :columns="columnQuotation"
+              :rows="quotationData"
+              :visible-columns="pageState.fieldSelected"
+              :grid="pageState.gridView"
+              @preview="(id: any) => storeDataLocal(id)"
+              @view="
+                (item) => {
+                  triggerQuotationDialog({
+                    statusDialog: 'info',
+                    quotationId: item.id,
+                    branchId: item.customerBranch.customer.registeredBranchId,
+                  });
+                }
+              "
+              @edit="
+                (item) =>
+                  triggerQuotationDialog({
+                    statusDialog: 'edit',
+                    quotationId: item.id,
+                    branchId: item.customerBranch.customer.registeredBranchId,
+                  })
+              "
+              @delete="(id) => triggerDialogDeleteQuottaion(id)"
+            >
+              <template #grid="{ item }">
+                <div class="col-md-4 col-sm-6 col-12">
+                  <QuotationCard
+                    :urgent="item.row.urgent"
+                    :code="item.row.code"
+                    :title="item.row.workName"
+                    :created-at="
+                      new Date(item.row.createdAt).toLocaleString('th-TH', {
+                        hour12: false,
+                      })
+                    "
+                    :valid-until="
+                      (() => {
+                        const date = new Date(item.row.dueDate);
+                        date.setHours(23, 59, 59, 0);
+                        return date.toLocaleString('th-TH', {
                           hour12: false,
-                        })
-                      "
-                      :valid-until="
-                        (() => {
-                          const date = new Date(item.row.dueDate);
-                          date.setHours(23, 59, 59, 0);
-                          return date.toLocaleString('th-TH', {
-                            hour12: false,
-                          });
-                        })()
-                      "
-                      :status="
-                        $t(`quotation.status.${item.row.quotationStatus}`)
-                      "
-                      :worker-count="item.row._count.worker"
-                      :worker-max="item.row.workerMax || item.row._count.worker"
-                      :customer-name="
-                        item.row.customerBranch.registerName ||
-                        `${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
-                      "
-                      :reporter="
-                        $i18n.locale === 'eng'
-                          ? item.row.createdBy.firstNameEN +
-                            ' ' +
-                            item.row.createdBy.lastNameEN
-                          : item.row.createdBy.firstName +
-                            ' ' +
-                            item.row.createdBy.lastName
-                      "
-                      :total-price="item.row.finalPrice"
-                      @preview="storeDataLocal(item.row.id)"
-                      @view="
-                        () => {
-                          triggerQuotationDialog({
-                            statusDialog: 'info',
-                            quotationId: item.row.id,
-                            branchId:
-                              item.row.customerBranch.customer
-                                .registeredBranchId,
-                          });
-                        }
-                      "
-                      @edit="
+                        });
+                      })()
+                    "
+                    :status="$t(`quotation.status.${item.row.quotationStatus}`)"
+                    :worker-count="item.row._count.worker"
+                    :worker-max="item.row.workerMax || item.row._count.worker"
+                    :customer-name="
+                      item.row.customerBranch.registerName ||
+                      `${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
+                    "
+                    :reporter="
+                      $i18n.locale === 'eng'
+                        ? item.row.createdBy.firstNameEN +
+                          ' ' +
+                          item.row.createdBy.lastNameEN
+                        : item.row.createdBy.firstName +
+                          ' ' +
+                          item.row.createdBy.lastName
+                    "
+                    :total-price="item.row.finalPrice"
+                    @preview="storeDataLocal(item.row.id)"
+                    @view="
+                      () => {
                         triggerQuotationDialog({
-                          statusDialog: 'edit',
+                          statusDialog: 'info',
                           quotationId: item.row.id,
                           branchId:
                             item.row.customerBranch.customer.registeredBranchId,
-                        })
-                      "
-                      @link="triggerReceiptDialog(item.row)"
-                      @upload="console.log('upload')"
-                      @delete="triggerDialogDeleteQuottaion(item.row.id)"
-                    />
-                  </div>
-                </template>
-              </TableQuotation>
-            </div>
+                        });
+                      }
+                    "
+                    @edit="
+                      triggerQuotationDialog({
+                        statusDialog: 'edit',
+                        quotationId: item.row.id,
+                        branchId:
+                          item.row.customerBranch.customer.registeredBranchId,
+                      })
+                    "
+                    @link="triggerReceiptDialog(item.row)"
+                    @upload="console.log('upload')"
+                    @delete="triggerDialogDeleteQuottaion(item.row.id)"
+                  />
+                </div>
+              </template>
+            </TableQuotation>
           </div>
         </article>