From 91ad01da838054fef70f9160d9eafc62b5154ed0 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Fri, 20 Sep 2024 16:55:09 +0700
Subject: [PATCH] refactor: add form customer

---
 .../CorpFormBusinessRegistration.vue          |  76 ++++++
 .../PersFormBusinessRegistration.vue          | 233 ++++++++++++++++++
 2 files changed, 309 insertions(+)
 create mode 100644 src/components/upload-file/CorpFormBusinessRegistration.vue
 create mode 100644 src/components/upload-file/PersFormBusinessRegistration.vue

diff --git a/src/components/upload-file/CorpFormBusinessRegistration.vue b/src/components/upload-file/CorpFormBusinessRegistration.vue
new file mode 100644
index 00000000..4ff547c5
--- /dev/null
+++ b/src/components/upload-file/CorpFormBusinessRegistration.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import DatePicker from '../shared/DatePicker.vue';
+
+const registrationNumber = defineModel<string>('registrationNumber', {
+  default: '',
+});
+const name = defineModel<string>('name', {
+  default: '',
+});
+
+const businessRegistrationDate = defineModel<string>(
+  'businessRegistrationDate',
+  { default: '' },
+);
+const visaPlace = defineModel<string>('visaPlace', { default: '' });
+defineProps<{
+  prefixId?: string;
+  outlined?: boolean;
+  readonly?: boolean;
+  customerType?: 'CORP' | 'PERS';
+}>();
+</script>
+
+<template>
+  <div class="row q-mb-sm" style="gap: 10px">
+    <div class="col-12 text-subtitle1 text-weight-bold">
+      <p>Document Properties</p>
+    </div>
+
+    <div class="col-12 row q-col-gutter-sm">
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('form.businessRegistration.registrationNumber')"
+        for="input-citizen-id"
+        v-model="registrationNumber"
+      />
+
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('form.businessRegistration.registrationNumber')"
+        for="input-citizen-id"
+        v-model="name"
+      />
+    </div>
+
+    <div class="col-12 row q-col-gutter-sm">
+      <DatePicker
+        :label="$t('form.businessRegistration.businessRegistration')"
+        v-model="businessRegistrationDate"
+        class="col-4"
+        :id="`${prefixId}-input-birth-date`"
+        :readonly="readonly"
+        clearable
+      />
+
+      <DatePicker
+        :label="$t('customerEmployee.form.visaPlace')"
+        v-model="visaPlace"
+        class="col-4"
+        :id="`${prefixId}-input-birth-date`"
+        :readonly="readonly"
+        clearable
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/upload-file/PersFormBusinessRegistration.vue b/src/components/upload-file/PersFormBusinessRegistration.vue
new file mode 100644
index 00000000..0657be42
--- /dev/null
+++ b/src/components/upload-file/PersFormBusinessRegistration.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import useOptionStore from 'stores/options';
+import { selectFilterOptionRefMod } from 'stores/utils';
+import DatePicker from '../shared/DatePicker.vue';
+import { QSelect } from 'quasar';
+import { AddressForm } from 'components/form';
+
+const optionStore = useOptionStore();
+
+const registrationNumber = defineModel<string>('registrationNumber', {
+  default: '',
+});
+
+const requestAt = defineModel<string>('requestAt', { default: '' });
+const namePrefix = defineModel<string | null>('namePrefix');
+const firstName = defineModel<string>('firstName', { default: '' });
+const lastName = defineModel<string>('lastName', { default: '' });
+
+const businessRegistrationDate = defineModel<string>(
+  'businessRegistrationDate',
+  { default: '' },
+);
+const visaPlace = defineModel<string>('visaPlace', { default: '' });
+const businessType = defineModel<string>('businessType', { default: '' });
+const businessName = defineModel<string>('businessName', { default: '' });
+const romanCharacters = defineModel<string>('romanCharacters', { default: '' });
+
+const address = defineModel<string>('address');
+const street = defineModel('street', { default: '' });
+const moo = defineModel('moo', { default: '' });
+const soi = defineModel('soi', { default: '' });
+const provinceId = defineModel<string | null | undefined>('provinceId');
+const districtId = defineModel<string | null | undefined>('districtId');
+const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
+const homeCode = defineModel<string | null | undefined>('homeCode');
+const employmentOffice = defineModel<string | null | undefined>(
+  'employmentOffice',
+);
+
+const prefixNameOptions = ref<Record<string, unknown>[]>([]);
+let prefixNameFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+defineProps<{
+  prefixId?: string;
+  outlined?: boolean;
+  readonly?: boolean;
+  customerType?: 'CORP' | 'PERS';
+}>();
+
+onMounted(() => {
+  prefixNameFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.prefix),
+    prefixNameOptions,
+    'label',
+  );
+});
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    prefixNameFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.prefix),
+      prefixNameOptions,
+      'label',
+    );
+  },
+);
+</script>
+
+<template>
+  <div class="row q-mb-sm" style="gap: 10px">
+    <div class="col-12 text-subtitle1 text-weight-bold">
+      <p>Document Properties</p>
+    </div>
+
+    <div class="col-12 row q-col-gutter-sm">
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('form.businessRegistration.registrationNumber')"
+        for="input-citizen-id"
+        v-model="registrationNumber"
+      />
+
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-3"
+        :label="$t('form.businessRegistration.requestAt')"
+        for="input-citizen-id"
+        v-model="requestAt"
+      />
+    </div>
+
+    <div class="col-12 row q-col-gutter-sm">
+      <q-select
+        outlined
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        hide-dropdown-icon
+        class="col-2"
+        dense
+        :readonly="readonly"
+        :options="prefixNameOptions"
+        :for="`${prefixId}-select-prefix-name`"
+        :label="$t('form.prefixName')"
+        @filter="prefixNameFilter"
+        :model-value="readonly ? namePrefix || '-' : namePrefix"
+        @update:model-value="
+          (v) => {
+            typeof v === 'string' ? (namePrefix = v) : '';
+          }
+        "
+        @clear="namePrefix = ''"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('general.noData') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-5"
+        :label="$t('customer.form.firstName')"
+        for="input-first-name"
+        v-model="firstName"
+      />
+
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-5"
+        :label="$t('customer.form.lastName')"
+        for="input-last-name"
+        v-model="lastName"
+      />
+
+      <DatePicker
+        :label="$t('form.businessRegistration.businessRegistration')"
+        v-model="businessRegistrationDate"
+        class="col-3"
+        :id="`${prefixId}-input-birth-date`"
+        :readonly="readonly"
+        clearable
+      />
+
+      <DatePicker
+        :label="$t('customerEmployee.form.visaPlace')"
+        v-model="visaPlace"
+        class="col-3"
+        :id="`${prefixId}-input-birth-date`"
+        :readonly="readonly"
+        clearable
+      />
+
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('form.businessRegistration.businessType')"
+        for="input-last-name"
+        v-model="businessType"
+      />
+
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12"
+        :label="$t('form.businessRegistration.businessName')"
+        for="input-last-name"
+        v-model="businessName"
+      />
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12"
+        :label="$t('form.businessRegistration.romanCharacters')"
+        for="input-last-name"
+        v-model="romanCharacters"
+      />
+    </div>
+
+    <AddressForm
+      prefixId="form-tm6"
+      hide-icon
+      hide-title
+      hide-input-en
+      dense
+      v-model:homeCode="homeCode"
+      v-model:employmentOffice="employmentOffice"
+      v-model:address="address"
+      v-model:street="street"
+      v-model:moo="moo"
+      v-model:soi="soi"
+      v-model:province-id="provinceId"
+      v-model:district-id="districtId"
+      v-model:sub-district-id="subDistrictId"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>