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

2024-06-07 13:59:36 +07:00 · 2024-06-07 13:59:36 +07:00 · ccd7364b8a
commit ccd7364b8a
parent f3a146e345
5 changed files with 177 additions and 135 deletions
--- 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>
--- 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>
--- 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',
 };
--- 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: 'ลูกจ้างทั้งหมด',
 };
--- 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