feat: UI Customer Detail 2 (more detail + i18n)

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>{{ $t('customerBranchFormTab') }} {{ data.branchCode }}</div>
-      <div>รายละเอียด</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-5">{{ $t('businessTypePure') }}</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-7">{{ data.typeCop }}</div>
     </div>
-    <div class="row col-12 q-px-md q-py-sm bordered-b surface-2">
+    <div class="row col-12 q-px-md q-py-sm bordered-b">
-      <div class="col-5">สถานะ</div>
+      <div class="col-5">{{ $t('status') }}</div>
-      <div class="col-7">{{ data.branchName }}</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>

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"
+          class="q-pa-sm q-pt-md bg-green q-mr-md q-mb-sm"
-          style="border-radius: 0 0 40px 40px; position: relative; bottom: 20px"
+          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)"
             />
+            <div class="q-px-sm">
               {{ '10' }}
+            </div>
             <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
+            <div class="q-px-sm">
               {{ '2' }}
             </div>
           </div>
         </div>
-      <div class="row items-center">
+      </div>
+      <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>

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',
 };

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: 'ลูกจ้างทั้งหมด',
 };

src/pages/03_customer-management/MainPage.vue

@@ -215,11 +215,12 @@ 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 v-if="isMainPage">
       <div class="row full-width q-mb-md no-wrap">
         <SelectorList
           :list="selectorList"
@@ -339,7 +340,11 @@ function undo() {
       </AppBox>
     </div>
     <div v-else>
-    <CustomerInfoComponent @back="isMainPage = true" />
+      <CustomerInfoComponent
+        @back="isMainPage = true"
+        @viewDetail="console.log('view detail')"
+      />
+    </div>
   </div>
 
   <FormDialog