From 7a9f0451a984b27cc3c58d8eaaf25235f2931d2f Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:08:01 +0700
Subject: [PATCH] refactor: card

---
 .../CardDetailsComponent.vue                  | 270 +++++++++---------
 .../TableCardComponent.vue                    |  33 +--
 src/pages/01_branch-management/MainPage.vue   |  12 +-
 3 files changed, 150 insertions(+), 165 deletions(-)

diff --git a/src/components/01_branch-management/CardDetailsComponent.vue b/src/components/01_branch-management/CardDetailsComponent.vue
index 1414cc31..a51fa083 100644
--- a/src/components/01_branch-management/CardDetailsComponent.vue
+++ b/src/components/01_branch-management/CardDetailsComponent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Branch } from '../../stores/branch/types';
+import AppBox from '../app/AppBox.vue';
 
 defineProps<{
   data?: Branch;
@@ -7,147 +8,146 @@ defineProps<{
 </script>
 
 <template>
-  <q-card style="width: 100%">
-    <q-item>
-      <q-card-section class="no-padding">
-        <div class="flex q-gutter-x-md" style="align-items: center">
-          <iconify-icon icon="ic:baseline-home" />
-          <div class="text-h6">รายละเอียดสำนักงานใหญ่</div>
+  <div class="q-pa-md">
+    <div class="flex q-gutter-x-md" style="align-items: center">
+      <Icon icon="ic:baseline-home" />
+      <div class="text-h6">รายละเอียดสำนักงานใหญ่</div>
 
-          <div
-            class="text-h6 color-card-text-code"
-            :class="{ dark: $q.dark.isActive }"
-          >
-            {{ data?.code }}
-          </div>
-          <div
-            class="q-pa-sm"
-            style="
-              color: var(--teal-6);
-              background: hsla(var(--teal-6-hsl) / 0.08);
-              border-radius: 25px;
-            "
-          >
-            ดำเนินการอยู่
-          </div>
-        </div>
-      </q-card-section>
-    </q-item>
-  </q-card>
-
-  <div class="row">
-    <div class="col q-pa-sm card-details-variable">
-      <q-card class="bordered column q-pa-sm">
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">รหัสสาขา</div>
-          <div class="col-2">{{ data?.code }}</div>
-          <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
-          <div class="col-3">{{ data?.taxNo }}</div>
-        </div>
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">ชื่อสาขา ภาษาไทย</div>
-          <div class="col-2">{{ data?.name }}</div>
-          <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
-          <div class="col-3">{{ data?.nameEN }}</div>
-        </div>
-
-        <div class="row q-pt-sm q-pb-md card-details-row-height">
-          <div
-            class="col color-card-text-code"
-            :class="{ dark: $q.dark.isActive }"
-          >
-            ที่อยู่สาขา
-          </div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">ที่อยู่</div>
-          <div class="col-2">{{ data?.address }}</div>
-          <div class="col-4 color-text-static">แขวง/ตำบล</div>
-          <div class="col-3">
-            {{ data?.subDistrict?.name }}
-          </div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">เขต/อำเภอ</div>
-          <div class="col-2">{{ data?.district?.name }}</div>
-          <div class="col-4 color-text-static">จังหวัด</div>
-          <div class="col-3">{{ data?.province?.name }}</div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">รหัสไปรษณีย์</div>
-          <div class="col-2">{{ data?.zipCode }}</div>
-        </div>
-
-        <div class="row q-pt-sm q-pb-md card-details-row-height">
-          <div
-            class="col color-card-text-code"
-            :class="{ dark: $q.dark.isActive }"
-          >
-            ที่อยู่สาขา ENG
-          </div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">Address</div>
-          <div class="col-2">{{ data?.addressEN }}</div>
-          <div class="col-4 color-text-static">Subdistrict</div>
-          <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">District</div>
-          <div class="col-2">{{ data?.district?.nameEN }}</div>
-          <div class="col-4 color-text-static">Province</div>
-          <div class="col-3">{{ data?.province?.nameEN }}</div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">Zip code</div>
-          <div class="col-2">{{ data?.zipCode }}</div>
-        </div>
-      </q-card>
+      <div
+        class="text-h6 color-card-text-code"
+        :class="{ dark: $q.dark.isActive }"
+      >
+        {{ data?.code }}
+      </div>
+      <div
+        class="q-pa-sm"
+        style="
+          color: var(--teal-6);
+          background: hsla(var(--teal-6-hsl) / 0.08);
+          border-radius: 25px;
+        "
+      >
+        ดำเนินการอยู่
+      </div>
     </div>
 
-    <div class="col q-pa-sm">
-      <q-card class="bordered q-pa-sm">
-        <div class="row">
-          <div class="col-8">
-            <div class="row card-details-row-height">
-              <div class="col-5 color-text-static">เบอร์โทรศัพท์สาขา</div>
-              <div class="col">{{ data?.telephoneNo }}</div>
-            </div>
-            <div class="row card-details-row-height">
-              <div class="col-5 color-text-static">อีเมลติดต่อสาขา</div>
-              <div class="col">{{ data?.email }}</div>
-            </div>
+    <div class="row">
+      <div class="col q-pa-sm card-details-variable">
+        <AppBox class="bordered column q-pa-sm" bordered>
+          <div class="row card-details-row-height">
+            <div class="col-3 color-text-static">รหัสสาขา</div>
+            <div class="col-2">{{ data?.code }}</div>
+            <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
+            <div class="col-3">{{ data?.taxNo }}</div>
           </div>
-          <div class="col full-width">
-            <div
-              class="column"
-              style="border-radius: 6px; border: 1px solid #e0e0e0"
-            >
-              <div class="col q-pa-sm" style="border-bottom: 1px solid #e0e0e0">
-                Id line
-              </div>
-              <div class="col flex flex-center full-width bg-grey-3 q-pa-sm">
-                <q-img
-                  src="/qrcode.png"
-                  spinner-color="white"
-                  style="height: 80px; max-width: 80px"
-                />
-              </div>
-            </div>
+          <div class="row card-details-row-height">
+            <div class="col-3 color-text-static">ชื่อสาขา ภาษาไทย</div>
+            <div class="col-2">{{ data?.name }}</div>
+            <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
+            <div class="col-3">{{ data?.nameEN }}</div>
           </div>
-        </div>
 
-        <div class="row">
-          <div class="col color-text-static">location</div>
-          <div class="col"></div>
-        </div>
-      </q-card>
+          <div class="row q-pt-sm q-pb-md card-details-row-height">
+            <div
+              class="col color-card-text-code"
+              :class="{ dark: $q.dark.isActive }"
+            >
+              ที่อยู่สาขา
+            </div>
+          </div>
+
+          <div class="row card-details-row-height">
+            <div class="col-3 color-text-static">ที่อยู่</div>
+            <div class="col-2">{{ data?.address }}</div>
+            <div class="col-4 color-text-static">แขวง/ตำบล</div>
+            <div class="col-3">
+              {{ data?.subDistrict?.name }}
+            </div>
+          </div>
+
+          <div class="row card-details-row-height">
+            <div class="col-3 color-text-static">เขต/อำเภอ</div>
+            <div class="col-2">{{ data?.district?.name }}</div>
+            <div class="col-4 color-text-static">จังหวัด</div>
+            <div class="col-3">{{ data?.province?.name }}</div>
+          </div>
+
+          <div class="row card-details-row-height">
+            <div class="col-3 color-text-static">รหัสไปรษณีย์</div>
+            <div class="col-2">{{ data?.zipCode }}</div>
+          </div>
+
+          <div class="row q-pt-sm q-pb-md card-details-row-height">
+            <div
+              class="col color-card-text-code"
+              :class="{ dark: $q.dark.isActive }"
+            >
+              ที่อยู่สาขา ENG
+            </div>
+          </div>
+
+          <div class="row card-details-row-height">
+            <div class="col-3 color-text-static">Address</div>
+            <div class="col-2">{{ data?.addressEN }}</div>
+            <div class="col-4 color-text-static">Subdistrict</div>
+            <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
+          </div>
+
+          <div class="row card-details-row-height">
+            <div class="col-3 color-text-static">District</div>
+            <div class="col-2">{{ data?.district?.nameEN }}</div>
+            <div class="col-4 color-text-static">Province</div>
+            <div class="col-3">{{ data?.province?.nameEN }}</div>
+          </div>
+
+          <div class="row card-details-row-height">
+            <div class="col-3 color-text-static">Zip code</div>
+            <div class="col-2">{{ data?.zipCode }}</div>
+          </div>
+        </AppBox>
+      </div>
+
+      <div class="col q-pa-sm">
+        <AppBox bordered>
+          <div class="row">
+            <div class="col-8">
+              <div class="row card-details-row-height">
+                <div class="col-5 color-text-static">เบอร์โทรศัพท์สาขา</div>
+                <div class="col">{{ data?.telephoneNo }}</div>
+              </div>
+              <div class="row card-details-row-height">
+                <div class="col-5 color-text-static">อีเมลติดต่อสาขา</div>
+                <div class="col">{{ data?.email }}</div>
+              </div>
+            </div>
+            <div class="col full-width">
+              <div
+                class="column"
+                style="border-radius: 6px; border: 1px solid #e0e0e0"
+              >
+                <div
+                  class="col q-pa-sm"
+                  style="border-bottom: 1px solid #e0e0e0"
+                >
+                  Id line
+                </div>
+                <div class="col flex flex-center full-width bg-grey-3 q-pa-sm">
+                  <q-img
+                    src="/qrcode.png"
+                    spinner-color="white"
+                    style="height: 80px; max-width: 80px"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col color-text-static">location</div>
+            <div class="col"></div>
+          </div>
+        </AppBox>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/01_branch-management/TableCardComponent.vue b/src/components/01_branch-management/TableCardComponent.vue
index 8849ef8d..07779ee6 100644
--- a/src/components/01_branch-management/TableCardComponent.vue
+++ b/src/components/01_branch-management/TableCardComponent.vue
@@ -23,7 +23,7 @@ const columns = [
   {
     name: 'name',
     required: true,
-    label: props.subBranch ? 'รหัสสาขา' : 'รหัสสำนักงานใหญ่',
+    label: props.subBranch ? 'branchLabel' : 'branchHQLabel',
     align: 'left',
     field: (row) => row.name,
     format: (val) => `${val}`,
@@ -36,9 +36,9 @@ const columns = [
     field: 'branchName',
     sortable: true,
   },
-  { name: 'address', label: 'ที่อยู่', field: 'address', sortable: true },
-  { name: 'telephoneNo', label: 'เบอร์โทร', field: 'telephoneNo' },
-  { name: 'code', label: 'สำนักงานใหญ่', field: 'code' },
+  { name: 'address', label: 'address', field: 'address', sortable: true },
+  { name: 'telephoneNo', label: 'telephone', field: 'telephoneNo' },
+  { name: 'code', label: 'รหัส', field: 'code' },
   { name: 'type', label: 'ประเภท', field: 'type' },
   { name: 'status', label: 'สถานะ', field: 'status' },
 ] satisfies QTableProps['columns'];
@@ -60,8 +60,11 @@ const filter = ref('');
       hide-header
     >
       <template v-slot:item="prop">
-        <div class="q-pr-sm q-pb-md">
-          <q-card class="bordered" style="width: 340px">
+        <div
+          class="q-pr-sm q-pb-md col-6"
+          @click.stop="!subBranch && $emit('navigate', prop.row)"
+        >
+          <q-card class="bordered">
             <q-item
               class="bordered"
               :class="`table-card-color-${subBranch ? color[1] : color[0]} ${$q.dark.isActive ? 'dark-table-card' : ''}    ${i === 0 ? 'color-table-header' : ''} ${i % 2 === 0 && i !== 0 ? 'color-table-row' : ''}`"
@@ -73,7 +76,7 @@ const filter = ref('');
                 style="width: 120px"
                 :style="`${!$q.dark.isActive && i !== 0 ? 'color:gray' : ''}`"
               >
-                {{ prop.colsMap[k]?.label }}
+                {{ $t(prop.colsMap[k]?.label) }}
               </q-item-section>
 
               <q-item-section>
@@ -82,27 +85,17 @@ const filter = ref('');
                     {{ v }}
                   </div>
                   <div v-else>
-                    <div v-if="v">สำนักงานใหญ่</div>
-                    <div v-else>สาขา</div>
+                    {{ (v && $t('branchHQLabel')) || $t('branchLabel') }}
                   </div>
 
                   <q-space />
 
-                  <q-space />
-
                   <Icon
                     icon="mdi:navigate-next"
                     class="cursor-pointer"
-                    v-if="i === 0 && !subBranch"
+                    v-if="i === 0"
                     width="20px"
-                    @click="$emit('navigate', prop.row)"
-                  />
-                  <Icon
-                    icon="mdi:navigate-next"
-                    class="cursor-pointer"
-                    v-if="i === 0 && subBranch"
-                    width="20px"
-                    @click="$emit('showCard', prop.row)"
+                    @click.stop="$emit('show-info', prop.row)"
                   />
                 </div>
               </q-item-section>
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 7a8518f5..bdff1d8d 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -633,16 +633,8 @@ onMounted(async () => {
                   label="เลือก"
                 />
               </div>
-              <div class="col-2 q-pr-md">
-                <q-input dense outlined v-model="inputSearch">
-                  <template #append>
-                    <Icon icon="ic:baseline-search" />
-                  </template>
-                </q-input>
-              </div>
-              <div class="col-2">
+              <div class="col-3">
                 <q-select
-                  style="width: 150px"
                   dense
                   outlined
                   v-model="inputFilter"
@@ -655,7 +647,7 @@ onMounted(async () => {
           <AppBox>
             <TableCardComponent
               @navigate="(v) => fetchSubBranch(v.id)"
-              @showCard="(v) => fetchCard(v.name)"
+              @show-info="(v) => fetchCard(v.id)"
               :sub-branch="subBranch"
               :rows="rowsBranch"
             />