From 58a99de1e203b5809ed43ec28892e3eed945a95c Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Mon, 5 Aug 2024 16:55:23 +0700
Subject: [PATCH] refactor: add BasicInformation

---
 .../employee/BasicInformation.vue             | 342 ++++++++++++++++++
 1 file changed, 342 insertions(+)
 create mode 100644 src/components/03_customer-management/employee/BasicInformation.vue

diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
new file mode 100644
index 00000000..0a80fe58
--- /dev/null
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { QSelect } from 'quasar';
+import { CustomerBranch } from 'src/stores/customer/types';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
+import { onMounted, ref, watch } from 'vue';
+
+const optionsBranch = defineModel<{ id: string; name: string }[]>(
+  'optionsBranch',
+  { default: [] },
+);
+
+// employee
+const customerBranch = defineModel<{
+  id: string;
+  address: string;
+  addressEN: string;
+  provinceId: string;
+  districtId: string;
+  subDistrictId: string;
+  zipCode: string;
+}>('customerBranch');
+
+const nrcNo = defineModel<string>('nrcNo');
+const code = defineModel<string>('code');
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    dense?: boolean;
+    outlined?: boolean;
+    readonly?: boolean;
+    separator?: boolean;
+    typeCustomer?: string;
+    employee?: boolean;
+    employeeOwnerOption?: CustomerBranch[];
+    prefixId: string;
+    showBtnSave: boolean;
+  }>(),
+  {
+    showBtnSave: false,
+  },
+);
+
+defineEmits<{
+  (e: 'filterOwnerBranch', val: string, update: void): void;
+}>();
+
+const branchOptions = ref<Record<string, unknown>[]>([]);
+let branchFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+watch(
+  () => optionsBranch.value,
+  () => {
+    branchFilter = selectFilterOptionRefMod(
+      optionsBranch,
+      branchOptions,
+      'name',
+    );
+  },
+);
+
+onMounted(() => {
+  branchFilter = selectFilterOptionRefMod(optionsBranch, branchOptions, 'name');
+});
+</script>
+
+<template>
+  <div class="row col-12">
+    <div class="col-12 row justify-between q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-office-building-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`${title}`) }}
+
+      <q-btn
+        dense
+        unelevated
+        id="save-basic-info "
+        color="primary"
+        class="q-px-md q-ml-auto"
+        :label="$t('save')"
+        @click="$emit('save')"
+      />
+    </div>
+
+    <div class="col-12 row q-col-gutter-md">
+      <q-select
+        lazy-rules="ondemand"
+        :id="`${prefixId}-select-employer-branch`"
+        :for="`${prefixId}-select-employer-branch`"
+        :use-input="!customerBranch"
+        input-debounce="0"
+        :hide-dropdown-icon="readonly"
+        :dense="dense"
+        outlined
+        :readonly="readonly || customerBranch !== undefined"
+        hide-bottom-space
+        class="col-12"
+        :label="$t('formDialogEmployerBranchCode')"
+        v-model="customerBranch"
+        :option-value="
+          (v) => ({
+            id: v.id,
+            address: v.address,
+            addressEN: v.addressEN,
+            provinceId: v.provinceId,
+            districtId: v.districtId,
+            subDistrictId: v.subDistrictId,
+            zipCode: v.zipCode,
+          })
+        "
+        emit-value
+        map-options
+        :options="employeeOwnerOption"
+        @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
+        :rules="[
+          (val: string) =>
+            !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
+        ]"
+      >
+        <template v-slot:option="scope">
+          <q-item
+            v-if="scope.opt"
+            v-bind="scope.itemProps"
+            class="row items-start col-12 no-padding"
+          >
+            <div class="q-ma-sm">
+              <i class="isax isax-frame5" style="color: var(--brand-1)" />
+            </div>
+            <div class="q-mt-sm">
+              <div>
+                {{ scope.opt.code }} {{ $t('branchName') }}:
+                {{
+                  $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name
+                }}
+              </div>
+
+              <div class="text-caption app-text-muted-2 q-mb-xs">
+                <div v-if="scope.opt.customer" class="col column">
+                  <span>
+                    {{ $t('customerBranchName') }}:
+                    {{
+                      $i18n.locale === 'en-US'
+                        ? scope.opt.customer.customerNameEN
+                        : scope.opt.customer.customerName
+                    }}
+                  </span>
+                  <span>
+                    {{
+                      scope.opt.customer.customerType === 'PERS'
+                        ? $t('formDialogCustomerName')
+                        : $t('companyOwnerName')
+                    }}:
+                    {{
+                      $i18n.locale === 'en-US'
+                        ? scope.opt.customer.personName
+                        : scope.opt.customer.personName
+                    }}
+                  </span>
+                </div>
+                <div v-if="scope.opt.province" class="col">
+                  {{ $t('address') }}
+                  {{
+                    $i18n.locale === 'en-US'
+                      ? scope.opt.addressEN
+                      : scope.opt.address
+                  }}
+                  {{
+                    $i18n.locale === 'en-US'
+                      ? scope.opt.subDistrict.nameEN
+                      : scope.opt.subDistrict.name
+                  }}
+                  {{
+                    $i18n.locale === 'en-US'
+                      ? scope.opt.district.nameEN
+                      : scope.opt.district.name
+                  }}
+                  {{
+                    $i18n.locale === 'en-US'
+                      ? scope.opt.province.nameEN
+                      : scope.opt.province.name
+                  }}
+                  {{ scope.opt.zipCode }}
+                </div>
+              </div>
+            </div>
+          </q-item>
+          <q-separator class="q-mx-sm" />
+        </template>
+
+        <template v-slot:selected-item="scope">
+          <div
+            v-if="scope.opt"
+            class="row items-center no-wrap"
+            style="width: 1px"
+          >
+            <div class="q-mr-sm">
+              {{ scope.opt.code }}
+              {{ $t('branchName') }}:
+              {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
+            </div>
+            <div
+              class="text-caption app-text-muted-2"
+              v-if="scope.opt.customer && scope.opt.province"
+            >
+              {{ $t('customerBranchName') }}:
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.customer.customerNameEN
+                  : scope.opt.customer.customerName
+              }}
+              {{
+                scope.opt.customer.customerType === 'PERS'
+                  ? $t('formDialogCustomerName')
+                  : $t('companyOwnerName')
+              }}:
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.customer.personName
+                  : scope.opt.customer.personName
+              }}
+              {{ $t('address') }}
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.addressEN
+                  : scope.opt.address
+              }}
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.subDistrict.nameEN
+                  : scope.opt.subDistrict.name
+              }}
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.district.nameEN
+                  : scope.opt.district.name
+              }}
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.province.nameEN
+                  : scope.opt.province.name
+              }}
+              {{ scope.opt.zipCode }}
+              <q-tooltip v-if="scope.opt.customer && scope.opt.province">
+                {{ $t('customerBranchName') }}:
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.customer.customerNameEN
+                    : scope.opt.customer.customerName
+                }}
+                {{
+                  scope.opt.customer.customerType === 'PERS'
+                    ? $t('formDialogCustomerName')
+                    : $t('companyOwnerName')
+                }}:
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.customer.personName
+                    : scope.opt.customer.personName
+                }}
+                {{ $t('address') }}
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.addressEN
+                    : scope.opt.address
+                }}
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.subDistrict.nameEN
+                    : scope.opt.subDistrict.name
+                }}
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.district.nameEN
+                    : scope.opt.district.name
+                }}
+                {{
+                  $i18n.locale === 'en-US'
+                    ? scope.opt.province.nameEN
+                    : scope.opt.province.name
+                }}
+                {{ scope.opt.zipCode }}
+              </q-tooltip>
+            </div>
+          </div>
+        </template>
+
+        <template v-slot:append>
+          <q-icon
+            v-if="!readonly && customerBranch"
+            name="mdi-close-circle"
+            @click.stop="customerBranch = undefined"
+            class="cursor-pointer clear-btn"
+          />
+        </template>
+      </q-select>
+
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-code`"
+        :dense="dense"
+        outlined
+        hide-bottom-space
+        :readonly="readonly"
+        class="col-3"
+        :label="$t('formDialogEmployeeID')"
+        v-model="code"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        mask="## #### ###### #"
+        :for="`${prefixId}-input-nrc-no`"
+        :dense="dense"
+        outlined
+        hide-bottom-space
+        :readonly="readonly"
+        class="col-6"
+        :label="$t('formDialogEmployeeNRCNo')"
+        v-model="nrcNo"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.clear-btn {
+  opacity: 50%;
+  transition: opacity 0.2s ease-in-out;
+  &:hover {
+    opacity: 100%;
+  }
+}
+</style>