From ccd7364b8aacae55893e35f9a6e8d743be36128d Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Fri, 7 Jun 2024 13:59:36 +0700
Subject: [PATCH] feat: UI Customer Detail 2 (more detail + i18n)

---
 .../BranchCardCustomer.vue                    |  50 ++--
 .../CustomerInfoComponent.vue                 |  28 ++-
 src/i18n/en-US/customer-main-page.ts          |   4 +
 src/i18n/th-th/customer-main-page.ts          |   5 +
 src/pages/03_customer-management/MainPage.vue | 225 +++++++++---------
 5 files changed, 177 insertions(+), 135 deletions(-)

diff --git a/src/components/03_customer-management/BranchCardCustomer.vue b/src/components/03_customer-management/BranchCardCustomer.vue
index 025b7c84..b4464b88 100644
--- a/src/components/03_customer-management/BranchCardCustomer.vue
+++ b/src/components/03_customer-management/BranchCardCustomer.vue
@@ -24,37 +24,57 @@ withDefaults(
 <template>
   <AppBox class="row" no-padding bordered>
     <div
-      class="row col-12 q-px-md q-py-md justify-between bordered-b surface-3"
+      class="row col-12 q-px-md q-py-md justify-between bordered-b surface-3 items-center"
     >
-      <div>รหัสสาขา {{ data.branchCode }}</div>
-      <div>รายละเอียด</div>
+      <div>{{ $t('customerBranchFormTab') }} {{ data.branchCode }}</div>
+      <q-btn
+        @click.stop="$emit('view-detail')"
+        :label="$t('viewDetail')"
+        rounded
+        outline
+        dense
+        class="q-px-md"
+        style="color: var(--stone-6)"
+      />
     </div>
     <div class="row col-12 q-px-md q-py-sm bordered-b">
-      <div class="col-5">ชื่อสาขา</div>
+      <div class="col-5">{{ $t('branchName') }}</div>
       <div class="col-7">{{ data.branchName }}</div>
     </div>
     <div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
-      <div class="col-5">ที่อยู่</div>
+      <div class="col-5">{{ $t('address') }}</div>
       <div class="col-7">{{ data.address }}</div>
     </div>
     <div class="row col-12 q-px-md q-py-sm bordered-b">
-      <div class="col-5">เบอร์โทร</div>
+      <div class="col-5">{{ $t('telephone') }}</div>
       <div class="col-7">{{ data.tel }}</div>
     </div>
     <div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
-      <div class="col-5">ประเภทสำนักงาน</div>
-      <div class="col-7">{{ data.type }}</div>
-    </div>
-    <div class="row col-12 q-px-md q-py-sm bordered-b">
-      <div class="col-5">ประเภทกิจการ</div>
+      <div class="col-5">{{ $t('businessTypePure') }}</div>
       <div class="col-7">{{ data.typeCop }}</div>
     </div>
-    <div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
-      <div class="col-5">สถานะ</div>
-      <div class="col-7">{{ data.branchName }}</div>
+    <div class="row col-12 q-px-md q-py-sm bordered-b">
+      <div class="col-5">{{ $t('status') }}</div>
+      <div class="col-7">
+        <q-badge
+          v-if="data.boolean"
+          class="q-px-md q-py-xs rounded"
+          style="background-color: var(--teal-1); color: var(--teal-4)"
+        >
+          {{ $t('statusACTIVE') }}
+        </q-badge>
+        <q-badge
+          v-else
+          text-color="orange"
+          class="q-px-md q-py-xs rounded"
+          style="background-color: var(--red-1); color: var(--orange-4)"
+        >
+          {{ $t('statusINACTIVE') }}
+        </q-badge>
+      </div>
     </div>
     <div class="row col-12 q-px-md q-py-sm surface-3">
-      <div class="col-5">ลูกจ้างทั้งหมด</div>
+      <div class="col-5">{{ $t('allEmployee') }}</div>
       <div class="col-7">{{ data.number }}</div>
     </div>
   </AppBox>
diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index f876d40a..f17f9034 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -17,7 +17,7 @@ withDefaults(
 
 <template>
   <AppBox no-padding bordered>
-    <div class="row no-wrap justify-between q-pa-md bordered-b surface-2">
+    <div class="row no-wrap justify-between bordered-b surface-2">
       <div class="row items-center">
         <q-btn
           round
@@ -28,8 +28,8 @@ withDefaults(
           class="q-mr-md"
         />
         <q-card-section
-          class="q-pa-sm q-pt-md bg-green q-mr-md"
-          style="border-radius: 0 0 40px 40px; position: relative; bottom: 20px"
+          class="q-pa-sm q-pt-md bg-green q-mr-md q-mb-sm"
+          style="border-radius: 0 0 40px 40px; position: relative"
         >
           <q-avatar no-padding size="50px">
             <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
@@ -37,23 +37,27 @@ withDefaults(
         </q-card-section>
         <div>
           <div>นายสุขใจ แสนดี</div>
-          <div class="flex items-center">
+          <div class="row items-center">
             <i
               class="isax isax-frame5"
               style="font-size: 1rem; color: var(--stone-6)"
             />
-            {{ '10' }}
+            <div class="q-px-sm">
+              {{ '10' }}
+            </div>
             <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
-            {{ '2' }}
+            <div class="q-px-sm">
+              {{ '2' }}
+            </div>
           </div>
         </div>
       </div>
-      <div class="row items-center">
+      <div class="row items-center q-pa-md">
         <q-btn
           id="btn-add-customer"
           dense
           unelevated
-          :label="'+ ' + $t('customerAdd')"
+          :label="'+ ' + $t('formDialogTitleCreateSubBranch')"
           padding="4px 16px"
           @click="console.log('add')"
           style="background-color: var(--cyan-6); color: white"
@@ -63,7 +67,7 @@ withDefaults(
           style="width: 250px"
           outlined
           dense
-          label="ค้นหา"
+          :label="$t('search')"
           class="q-mr-lg"
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
           v-model="inputSearch"
@@ -72,6 +76,8 @@ withDefaults(
         <q-btn
           icon="mdi-tune-vertical-variant"
           size="sm"
+          :color="$q.dark.isActive ? 'dark' : 'white'"
+          :text-color="$q.dark.isActive ? 'white' : 'dark'"
           class="bordered rounded"
           unelevated
         >
@@ -105,7 +111,9 @@ withDefaults(
     </div>
     <div class="row q-pa-lg q-col-gutter-xl">
       <div v-for="i in 2" class="col-4">
-        <BranchCardCustomer></BranchCardCustomer>
+        <BranchCardCustomer
+          @view-detail="$emit('viewDetail')"
+        ></BranchCardCustomer>
       </div>
     </div>
   </AppBox>
diff --git a/src/i18n/en-US/customer-main-page.ts b/src/i18n/en-US/customer-main-page.ts
index 75fbceef..0d6ed360 100644
--- a/src/i18n/en-US/customer-main-page.ts
+++ b/src/i18n/en-US/customer-main-page.ts
@@ -13,6 +13,8 @@ export default {
   inputCustomerAddress: 'Employment office location (within the area)',
   businessType: 'Business type in Thai',
   businessTypeEN: 'Business type in English',
+  businessTypePure: 'Business Type',
+
   jobPosition: 'Job position in Thai',
   jobPositionEN: 'Job position in English',
   jobDescription: 'Job description',
@@ -32,4 +34,6 @@ export default {
   registerName: 'RegisterName',
 
   customerBranchFormTab: 'Branch ',
+
+  allEmployee: 'All Employee',
 };
diff --git a/src/i18n/th-th/customer-main-page.ts b/src/i18n/th-th/customer-main-page.ts
index cc835fa5..4bcf16bc 100644
--- a/src/i18n/th-th/customer-main-page.ts
+++ b/src/i18n/th-th/customer-main-page.ts
@@ -17,6 +17,7 @@ export default {
 
   businessType: 'ประเภทกิจการ ภาษาไทย',
   businessTypeEN: 'ประเภทกิจการ ภาษาอังกฤษ',
+  businessTypePure: 'ประเภทกิจการ',
 
   jobPosition: 'ตําแหน่งงาน ภาษาไทย',
   jobPositionEN: 'ตําแหน่งงาน ภาษาอังกฤษ',
@@ -40,4 +41,8 @@ export default {
   registerName: 'จดทะเบียนชื่อ',
 
   customerBranchFormTab: 'สาขาที่',
+
+  officeType: '',
+
+  allEmployee: 'ลูกจ้างทั้งหมด',
 };
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 23a5b12f..0535bb40 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -215,131 +215,136 @@ function undo() {
 </script>
 
 <template>
-  <div v-if="isMainPage" class="column q-pb-lg">
+  <div class="column q-pb-lg">
     <div class="text-h6 text-weight-bold q-mb-md">
       {{ $t('customerManagement') }}
     </div>
 
-    <div class="row full-width q-mb-md no-wrap">
-      <SelectorList
-        :list="selectorList"
-        v-model:selector="selectorLabel"
-        class="q-mr-md col-4"
-      />
+    <div v-if="isMainPage">
+      <div class="row full-width q-mb-md no-wrap">
+        <SelectorList
+          :list="selectorList"
+          v-model:selector="selectorLabel"
+          class="q-mr-md col-4"
+        />
 
-      <!-- stat -->
-      <AppBox bordered class="column full-width">
-        <div class="row q-pb-sm justify-between items-center">
-          <div class="text-weight-bold text-subtitle1">
-            {{ $t('customerStatTitle') }}
+        <!-- stat -->
+        <AppBox bordered class="column full-width">
+          <div class="row q-pb-sm justify-between items-center">
+            <div class="text-weight-bold text-subtitle1">
+              {{ $t('customerStatTitle') }}
+            </div>
+            {{ selectorLabel }}
+            <q-btn
+              id="btn-add-customer"
+              dense
+              unelevated
+              :label="'+ ' + $t('customerAdd')"
+              padding="4px 16px"
+              @click="openDialogCustomerType()"
+              style="background-color: var(--cyan-6); color: white"
+            />
           </div>
-          {{ selectorLabel }}
-          <q-btn
-            id="btn-add-customer"
-            dense
-            unelevated
-            :label="'+ ' + $t('customerAdd')"
-            padding="4px 16px"
-            @click="openDialogCustomerType()"
-            style="background-color: var(--cyan-6); color: white"
-          />
-        </div>
-        <div class="row full-width q-py-md" style="overflow-x: auto">
-          <StatCardComponent
-            v-if="customerStats"
-            labelI18n
-            :branch="
-              customerStats.map((v) => ({
-                count: v.count,
-                label: v.name,
-                color: v.name === 'customerLegalEntity' ? 'purple' : 'green',
-              }))
-            "
-            :dark="$q.dark.isActive"
-            class="no-wrap"
-          />
-        </div>
-      </AppBox>
-    </div>
+          <div class="row full-width q-py-md" style="overflow-x: auto">
+            <StatCardComponent
+              v-if="customerStats"
+              labelI18n
+              :branch="
+                customerStats.map((v) => ({
+                  count: v.count,
+                  label: v.name,
+                  color: v.name === 'customerLegalEntity' ? 'purple' : 'green',
+                }))
+              "
+              :dark="$q.dark.isActive"
+              class="no-wrap"
+            />
+          </div>
+        </AppBox>
+      </div>
 
-    <!-- main -->
-    <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
-      <div v-if="false" class="row q-mb-md justify-between">
-        <div class="col-1 self-end">
-          <div class="row">
-            <TooltipComponent
-              title="customerTooltipTitle"
-              caption="customerTooltipCaption"
-              imgSrc="personnel-table-"
+      <!-- main -->
+      <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
+        <div v-if="false" class="row q-mb-md justify-between">
+          <div class="col-1 self-end">
+            <div class="row">
+              <TooltipComponent
+                title="customerTooltipTitle"
+                caption="customerTooltipCaption"
+                imgSrc="personnel-table-"
+              />
+            </div>
+          </div>
+
+          <div
+            class="col self-center"
+            style="display: flex; flex-grow: 1; align-items: center"
+          >
+            <AddButton
+              :label="'customerAdd'"
+              :cyanOn="true"
+              @trigger="openDialogCustomerType()"
             />
           </div>
         </div>
 
         <div
-          class="col self-center"
-          style="display: flex; flex-grow: 1; align-items: center"
+          class="row full-width customer-row"
+          :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : '4'}, 1fr)`"
         >
-          <AddButton
-            :label="'customerAdd'"
-            :cyanOn="true"
-            @trigger="openDialogCustomerType()"
+          <UsersDetailCardComponent
+            color="purple"
+            :metadata="{ id: '1', disabled: false }"
+            :list="{
+              id: '1',
+              type: 'customerLegalEntity',
+              name: 'เจมส์ บอน',
+              code: 'HQ007',
+              detail: [
+                {
+                  label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                  value: 'บริษัทลับ',
+                },
+                {
+                  label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                  value: 'บริษัทลับ',
+                },
+              ],
+            }"
+            @enter-card="isMainPage = false"
+            @view-card="openDialogInputForm"
+          />
+          <UsersDetailCardComponent
+            color="green"
+            :metadata="{ id: '1', disabled: false }"
+            :list="{
+              id: '2',
+              type: 'customerNaturalPerson',
+              name: 'ขอบใจ ขอบใจ',
+              code: 'HQ006',
+              detail: [
+                {
+                  label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                  value: 'บริษัทเฟรบเป้',
+                },
+                {
+                  label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                  value: 'บริษัทเฟรบเป้',
+                },
+              ],
+            }"
+            @enter-card="console.log('enter')"
+            @view-card="openDialogInputForm"
           />
         </div>
-      </div>
-
-      <div
-        class="row full-width customer-row"
-        :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : '4'}, 1fr)`"
-      >
-        <UsersDetailCardComponent
-          color="purple"
-          :metadata="{ id: '1', disabled: false }"
-          :list="{
-            id: '1',
-            type: 'customerLegalEntity',
-            name: 'เจมส์ บอน',
-            code: 'HQ007',
-            detail: [
-              {
-                label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                value: 'บริษัทลับ',
-              },
-              {
-                label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                value: 'บริษัทลับ',
-              },
-            ],
-          }"
-          @enter-card="isMainPage = false"
-          @view-card="openDialogInputForm"
-        />
-        <UsersDetailCardComponent
-          color="green"
-          :metadata="{ id: '1', disabled: false }"
-          :list="{
-            id: '2',
-            type: 'customerNaturalPerson',
-            name: 'ขอบใจ ขอบใจ',
-            code: 'HQ006',
-            detail: [
-              {
-                label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                value: 'บริษัทเฟรบเป้',
-              },
-              {
-                label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
-                value: 'บริษัทเฟรบเป้',
-              },
-            ],
-          }"
-          @enter-card="console.log('enter')"
-          @view-card="openDialogInputForm"
-        />
-      </div>
-    </AppBox>
-  </div>
-  <div v-else>
-    <CustomerInfoComponent @back="isMainPage = true" />
+      </AppBox>
+    </div>
+    <div v-else>
+      <CustomerInfoComponent
+        @back="isMainPage = true"
+        @viewDetail="console.log('view detail')"
+      />
+    </div>
   </div>
 
   <FormDialog