From 3a0e35072b7b1b2ca8252bfa5494d58a54078d0b Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Fri, 7 Jun 2024 11:58:27 +0700
Subject: [PATCH] feat: UI Customer Detail

---
 .../BranchCardCustomer.vue                    |  63 ++++++++++
 .../CustomerInfoComponent.vue                 | 114 ++++++++++++++++++
 src/pages/03_customer-management/MainPage.vue |  12 +-
 3 files changed, 184 insertions(+), 5 deletions(-)
 create mode 100644 src/components/03_customer-management/BranchCardCustomer.vue
 create mode 100644 src/components/03_customer-management/CustomerInfoComponent.vue

diff --git a/src/components/03_customer-management/BranchCardCustomer.vue b/src/components/03_customer-management/BranchCardCustomer.vue
new file mode 100644
index 00000000..025b7c84
--- /dev/null
+++ b/src/components/03_customer-management/BranchCardCustomer.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import branch from 'src/i18n/en-US/branch';
+import AppBox from 'components/app/AppBox.vue';
+
+withDefaults(
+  defineProps<{
+    data: any;
+  }>(),
+  {
+    data: {
+      branchCode: 'SNIS-642',
+      branchName: 'จ็อบเวิร์ดเกอร์เซอร์วิส',
+      address: 'เลขที่ 49,51 ถนนสุขสวัสดิ์ แขวงราษฏร์บูรณะ ...',
+      tel: '02-012-2323',
+      type: 'สาขา',
+      typeCop: 'แม่บ้าน',
+      boolean: true,
+      number: 10,
+    },
+  },
+);
+</script>
+
+<template>
+  <AppBox class="row" no-padding bordered>
+    <div
+      class="row col-12 q-px-md q-py-md justify-between bordered-b surface-3"
+    >
+      <div>รหัสสาขา {{ data.branchCode }}</div>
+      <div>รายละเอียด</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.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-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-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-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>
+    <div class="row col-12 q-px-md q-py-sm surface-3">
+      <div class="col-5">ลูกจ้างทั้งหมด</div>
+      <div class="col-7">{{ data.number }}</div>
+    </div>
+  </AppBox>
+</template>
+
+<style scoped></style>
diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
new file mode 100644
index 00000000..f876d40a
--- /dev/null
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import AppBox from 'components/app/AppBox.vue';
+import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
+
+const inputSearch = ref<string>('');
+
+withDefaults(
+  defineProps<{
+    color: 'purple' | 'green';
+  }>(),
+  {
+    color: 'green',
+  },
+);
+</script>
+
+<template>
+  <AppBox no-padding bordered>
+    <div class="row no-wrap justify-between q-pa-md bordered-b surface-2">
+      <div class="row items-center">
+        <q-btn
+          round
+          icon="mdi-arrow-left"
+          flat
+          dense
+          @click="$emit('back')"
+          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"
+        >
+          <q-avatar no-padding size="50px">
+            <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
+          </q-avatar>
+        </q-card-section>
+        <div>
+          <div>นายสุขใจ แสนดี</div>
+          <div class="flex items-center">
+            <i
+              class="isax isax-frame5"
+              style="font-size: 1rem; color: var(--stone-6)"
+            />
+            {{ '10' }}
+            <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
+            {{ '2' }}
+          </div>
+        </div>
+      </div>
+      <div class="row items-center">
+        <q-btn
+          id="btn-add-customer"
+          dense
+          unelevated
+          :label="'+ ' + $t('customerAdd')"
+          padding="4px 16px"
+          @click="console.log('add')"
+          style="background-color: var(--cyan-6); color: white"
+        />
+        <q-separator vertical inset class="q-mx-lg" />
+        <q-input
+          style="width: 250px"
+          outlined
+          dense
+          label="ค้นหา"
+          class="q-mr-lg"
+          :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+          v-model="inputSearch"
+          debounce="500"
+        ></q-input>
+        <q-btn
+          icon="mdi-tune-vertical-variant"
+          size="sm"
+          class="bordered rounded"
+          unelevated
+        >
+          <q-menu class="bordered">
+            <q-list v-close-popup dense>
+              <q-item
+                clickable
+                class="flex items-center"
+                @click="console.log('test')"
+              >
+                {{ $t('all') }}
+              </q-item>
+              <q-item
+                clickable
+                class="flex items-center"
+                @click="console.log('test')"
+              >
+                {{ $t('statusACTIVE') }}
+              </q-item>
+              <q-item
+                clickable
+                class="flex items-center"
+                @click="console.log('test')"
+              >
+                {{ $t('statusINACTIVE') }}
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </div>
+    </div>
+    <div class="row q-pa-lg q-col-gutter-xl">
+      <div v-for="i in 2" class="col-4">
+        <BranchCardCustomer></BranchCardCustomer>
+      </div>
+    </div>
+  </AppBox>
+</template>
+
+<style scoped></style>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index da29dbad..23a5b12f 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -20,7 +20,7 @@ import OtherInformation from 'src/components/03_customer-management/OtherInforma
 import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue';
 import DrawerInfo from 'src/components/DrawerInfo.vue';
 import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
-
+import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
 import { CustomerCreate } from 'stores/customer/types';
 import useCustomerStore from 'src/stores/customer';
 
@@ -71,6 +71,7 @@ const profileFile = ref<File | undefined>(undefined);
 const profileUrl = ref<string | null>('');
 const infoDrawer = ref(false);
 const infoDrawerEdit = ref(false);
+const isMainPage = ref<boolean>(true);
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -214,7 +215,7 @@ function undo() {
 </script>
 
 <template>
-  <div class="column q-pb-lg">
+  <div v-if="isMainPage" class="column q-pb-lg">
     <div class="text-h6 text-weight-bold q-mb-md">
       {{ $t('customerManagement') }}
     </div>
@@ -309,7 +310,7 @@ function undo() {
               },
             ],
           }"
-          @enter-card="console.log('enter')"
+          @enter-card="isMainPage = false"
           @view-card="openDialogInputForm"
         />
         <UsersDetailCardComponent
@@ -337,6 +338,9 @@ function undo() {
       </div>
     </AppBox>
   </div>
+  <div v-else>
+    <CustomerInfoComponent @back="isMainPage = true" />
+  </div>
 
   <FormDialog
     v-model:modal="dialogCustomerType"
@@ -565,8 +569,6 @@ function undo() {
         </template>
 
         <template #address>
-          <!-- <FormCustomerBranch separator dense outlined /> -->
-
           <div class="col-3 app-text-muted">
             • {{ $t('formDialogCustomerBranch') }}
           </div>