From 80ac35dce066df30cfa4fae75eae1c0c86c75bf5 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:34:12 +0700
Subject: [PATCH] feat: save branch

---
 src/pages/03_customer-management/MainPage.vue |   6 +
 .../components/FormBranch.vue                 |  39 ++-
 .../components/FormBusiness.vue               | 286 ++++++++++++++++++
 3 files changed, 322 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/03_customer-management/components/FormBusiness.vue

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index ae5069ff..81f28f93 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1883,6 +1883,12 @@ watch(
             customerFormState.editReadonly === false
           "
           @add-branch="customerFormStore.addCurrentCustomerBranch()"
+          @save-branch="
+            (idx) => {
+              customerFormState.saveMode = 'branch';
+              customerFormState.branchIndex = idx;
+            }
+          "
           v-model:customer-branch="customerFormData.customerBranch"
         />
       </div>
diff --git a/src/pages/03_customer-management/components/FormBranch.vue b/src/pages/03_customer-management/components/FormBranch.vue
index 56fecf43..238093af 100644
--- a/src/pages/03_customer-management/components/FormBranch.vue
+++ b/src/pages/03_customer-management/components/FormBranch.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
+import FormBusiness from './FormBusiness.vue';
 import { CustomerCreate } from 'src/stores/customer/types';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { ref, watch } from 'vue';
@@ -21,7 +22,9 @@ watch(
     tab.value =
       branch.value?.map((a) => ({
         branch: a,
-        tab: tab.value.find((b) => b.branch === a)?.tab || 'main',
+        tab:
+          tab.value.find((b) => (b.branch === a ? true : b.branch.id === a.id))
+            ?.tab || 'main',
       })) || [];
   },
   { deep: true },
@@ -29,8 +32,8 @@ watch(
 
 defineEmits<{
   (e: 'addBranch'): void;
-  (e: 'saveBranch', v: (typeof tab.value)[number]['branch']): void;
-  (e: 'deleteBranch', v: (typeof tab.value)[number]['branch']): void;
+  (e: 'saveBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
+  (e: 'deleteBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
 }>();
 defineProps<{
   editable?: boolean;
@@ -79,7 +82,7 @@ defineProps<{
           text-color="red-9"
           color="red-2"
           :label="$t('delete')"
-          @click="$emit('deleteBranch', item)"
+          @click="$emit('deleteBranch', idx, item)"
           class="q-px-md q-ml-auto rounded"
         />
         <q-btn
@@ -89,7 +92,7 @@ defineProps<{
           unelevated
           color="primary"
           :label="$t('save')"
-          @click="$emit('saveBranch', item)"
+          @click="$emit('saveBranch', idx, item)"
           class="q-px-md q-ml-sm rounded"
         />
       </span>
@@ -106,6 +109,7 @@ defineProps<{
           >
             <q-tab name="main" label="Main"></q-tab>
             <q-tab name="address" label="Address"></q-tab>
+            <q-tab name="business" label="Business"></q-tab>
           </q-tabs>
           <q-tab-panels v-model="tab[idx].tab">
             <q-tab-panel name="main">
@@ -273,17 +277,34 @@ defineProps<{
                 :prefix-id="prefixId || 'employer'"
                 hide-title
                 dense
+                :readonly="!editable"
                 outlined
                 :title="$t('form.address')"
                 v-model:address="item.address"
                 v-model:addressEN="item.addressEN"
-                v-model:provinceId="item.provinceId"
-                v-model:districtId="item.districtId"
-                v-model:subDistrictId="item.subDistrictId"
+                v-model:province-id="item.provinceId"
+                v-model:district-id="item.districtId"
+                v-model:sub-district-id="item.subDistrictId"
                 :addressTitle="$t('form.address')"
                 :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
               />
-              {{ $t('form.address', { suffix: '(EN)' }) }}
+            </q-tab-panel>
+            <q-tab-panel name="business">
+              <FormBusiness
+                dense
+                outlined
+                :prefix-id="prefixId || 'employer'"
+                :readonly="!editable"
+                v-model:employment-office="item.employmentOffice"
+                v-model:bussiness-type="item.bussinessType"
+                v-model:bussiness-type-en="item.bussinessTypeEN"
+                v-model:job-position="item.jobPosition"
+                v-model:job-position-en="item.jobPositionEN"
+                v-model:job-description="item.jobDescription"
+                v-model:sale-employee="item.saleEmployee"
+                v-model:pay-date="item.payDate"
+                v-model:wage-rate="item.wageRate"
+              />
             </q-tab-panel>
           </q-tab-panels>
         </div>
diff --git a/src/pages/03_customer-management/components/FormBusiness.vue b/src/pages/03_customer-management/components/FormBusiness.vue
new file mode 100644
index 00000000..1f50bfc2
--- /dev/null
+++ b/src/pages/03_customer-management/components/FormBusiness.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { selectFilterOptionRefMod } from 'src/stores/utils';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
+import { onMounted, watch } from 'vue';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { locale } = useI18n({ useScope: 'global' });
+
+const employmentOffice = defineModel<string>('employmentOffice');
+const bussinessType = defineModel<string>('bussinessType');
+const jobPosition = defineModel<string>('jobPosition');
+
+const bussinessTypeEN = defineModel<string>('bussinessTypeEn');
+const jobPositionEN = defineModel<string>('jobPositionEn');
+
+const jobDescription = defineModel<string>('jobDescription');
+
+const payDate = defineModel<Date | null | string>('payDate');
+const wageRate = defineModel<number>('wageRate');
+
+const saleEmployee = defineModel<string>('saleEmployee');
+
+const rawOption = ref();
+
+const typeBusinessOption = ref([]);
+const jobPositionOption = ref([]);
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  prefixId: string;
+}>();
+
+onMounted(async () => {
+  const resultOption = await fetch('/option/option.json');
+  rawOption.value = await resultOption.json();
+
+  if (locale.value === 'en-US') {
+    typeBusinessOption.value = rawOption.value.eng.businessType;
+    jobPositionOption.value = rawOption.value.eng.position;
+  }
+  if (locale.value === 'th-th') {
+    typeBusinessOption.value = rawOption.value.tha.businessType;
+    jobPositionOption.value = rawOption.value.tha.position;
+  }
+});
+watch(typeBusinessOption, () => {
+  typeBusinessFilter = selectFilterOptionRefMod(
+    typeBusinessOption,
+    typeBusinessOptions,
+    'label',
+  );
+});
+
+watch(jobPositionOption, () => {
+  jobPositionFilter = selectFilterOptionRefMod(
+    jobPositionOption,
+    jobPositionOptions,
+    'label',
+  );
+});
+
+const typeBusinessOptions = ref<Record<string, unknown>[]>([]);
+let typeBusinessFilter = selectFilterOptionRefMod(
+  typeBusinessOption,
+  typeBusinessOptions,
+  'label',
+);
+
+const jobPositionOptions = ref<Record<string, unknown>[]>([]);
+let jobPositionFilter = selectFilterOptionRefMod(
+  jobPositionOption,
+  jobPositionOptions,
+  'label',
+);
+</script>
+<template>
+  <div class="col-12 row q-col-gutter-sm">
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-employment-office`"
+      :id="`${prefixId}-input-employment-office`"
+      :dense="dense"
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-12"
+      :label="$t('inputCustomerAddress')"
+      v-model="employmentOffice"
+    />
+
+    <q-select
+      outlined
+      clearable
+      use-input
+      fill-input
+      emit-value
+      map-options
+      hide-selected
+      hide-bottom-space
+      input-debounce="0"
+      option-value="value"
+      option-label="label"
+      lazy-rules="ondemand"
+      v-model="bussinessType"
+      class="col-md-6 col-12"
+      :dense="dense"
+      :readonly="readonly"
+      :label="$t('businessType')"
+      :options="typeBusinessOptions"
+      :for="`${prefixId}-select-business-type`"
+      @filter="typeBusinessFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
+
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-bussiness-type-en`"
+      :id="`${prefixId}-input-bussiness-type-en`"
+      :dense="dense"
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-md-6 col-12"
+      :label="$t('businessTypeEN')"
+      v-model="bussinessTypeEN"
+    />
+
+    <q-select
+      outlined
+      clearable
+      use-input
+      fill-input
+      emit-value
+      map-options
+      hide-selected
+      hide-bottom-space
+      input-debounce="0"
+      option-value="value"
+      option-label="label"
+      lazy-rules="ondemand"
+      v-model="jobPosition"
+      class="col-md-6 col-12"
+      :dense="dense"
+      :readonly="readonly"
+      :label="$t('jobPosition')"
+      :options="jobPositionOptions"
+      :for="`${prefixId}-select-job-position`"
+      @filter="jobPositionFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
+
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-job-position-en`"
+      :id="`${prefixId}-input-job-position-en`"
+      :dense="dense"
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-md-6 col-12"
+      :label="$t('jobPositionEN')"
+      v-model="jobPositionEN"
+    />
+
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-job-description`"
+      :id="`${prefixId}-input-job-description`"
+      :dense="dense"
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-md-6 col-12"
+      :label="$t('jobDescription')"
+      v-model="jobDescription"
+    />
+
+    <VueDatePicker
+      :id="`${prefixId}-date-picker-start-date`"
+      :teleport="true"
+      utc
+      autoApply
+      v-model="payDate"
+      :dark="$q.dark.isActive"
+      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-md-3 col-12"
+    >
+      <template #year="{ value }">
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      </template>
+      <template #year-overlay-value="{ value }">
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      </template>
+      <template #trigger>
+        <q-input
+          lazy-rules="ondemand"
+          :for="`${prefixId}-input-start-date`"
+          :id="`${prefixId}-input-start-date`"
+          :label="$t('payDay')"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          placeholder="DD/MM/YYYY"
+          :mask="readonly ? '' : '##/##/####'"
+          :model-value="
+            payDate
+              ? readonly
+                ? dateFormat(payDate)
+                : dateFormat(payDate, false, false, true)
+              : undefined
+          "
+          @update:model-value="
+            (v) => {
+              if (v && v.toString().length === 10) {
+                payDate = parseAndFormatDate(v, locale);
+              }
+            }
+          "
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="primary"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="payDate && !readonly"
+              name="mdi-close-circle"
+              class="cursor-pointer app-text-muted"
+              size="sm"
+              @click="payDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-pay-rate`"
+      :id="`${prefixId}-input-pay-rate`"
+      :dense="dense"
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-md-3 col-6"
+      :label="$t('payRate')"
+      v-model="wageRate"
+    />
+
+    <q-input
+      lazy-rules="ondemand"
+      :for="`${prefixId}-input-sales-person`"
+      :id="`${prefixId}-input-sales-person`"
+      :dense="dense"
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="$t('salesPerson')"
+      v-model="saleEmployee"
+    />
+  </div>
+</template>