refactor: edit layout input

src/pages/03_customer-management/components/employer/EmployerFormAbout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
+import { ref } from 'vue';
 
 const id = defineModel<string>('id');
 const branchNo = defineModel<number>('branchNo');
@@ -11,6 +12,8 @@ const registerName = defineModel<string>('registerName');
 const registerDate = defineModel<Date | null>('registerDate');
 const authorizedCapital = defineModel<string>('authorizedCapital');
 
+const test = ref<string>('-');
+
 defineProps<{
   code?: string;
   readonly?: boolean;
@@ -21,7 +24,163 @@ defineProps<{
 
 <template>
   <div class="row q-col-gutter-md">
-    <q-input
+    <template v-if="customerType === 'CORP'">
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-3"
+        :label="$t('customer.form.legalPersonNo')"
+        for="input-legal-person-no"
+        :model-value="test"
+        :rules="[
+          (val: string) =>
+            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+            $t('formDialogInputHqAbbreviation'),
+        ]"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-3"
+        :label="$t('customer.form.branchCode')"
+        for="input-branch-code"
+        :model-value="test"
+        :rules="[
+          (val: string) =>
+            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+            $t('formDialogInputHqAbbreviation'),
+        ]"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-3"
+        :label="$t('customer.form.customerCode')"
+        for="input-customer-code"
+        :model-value="test"
+        :rules="[
+          (val: string) =>
+            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+            $t('formDialogInputHqAbbreviation'),
+        ]"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-3"
+        :label="$t('customer.form.legalPersonCode')"
+        for="input-legal-person-code"
+        :model-value="test"
+        :rules="[
+          (val: string) =>
+            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+            $t('formDialogInputHqAbbreviation'),
+        ]"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-6"
+        :label="$t('customer.form.registerName')"
+        for="input-register-name"
+        :model-value="test"
+        :rules="[
+          (val: string) =>
+            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+            $t('formDialogInputHqAbbreviation'),
+        ]"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-6"
+        :label="$t('customer.form.registerNameEN')"
+        for="input-register-name-en"
+        :model-value="test"
+        :rules="[
+          (val: string) =>
+            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+            $t('formDialogInputHqAbbreviation'),
+        ]"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-2"
+        :label="$t('customer.form.authorizedCapital')"
+        for="input-authorized-capital"
+        :model-value="test"
+        :rules="[
+          (val: string) =>
+            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+            $t('formDialogInputHqAbbreviation'),
+        ]"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-2"
+        :label="$t('customer.form.registerDate')"
+        for="input-register-date"
+        :model-value="test"
+        :rules="[
+          (val: string) =>
+            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+            $t('formDialogInputHqAbbreviation'),
+        ]"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-2"
+        :label="$t('customer.form.registerCompanyName')"
+        for="input-register-company-name"
+        :model-value="test"
+        :rules="[
+          (val: string) =>
+            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+            $t('formDialogInputHqAbbreviation'),
+        ]"
+      />
+    </template>
+
+    <template v-if="customerType === 'PERS'"></template>
+    <!-- <q-input
       lazy-rules="ondemand"
       dense
       outlined
@@ -173,6 +332,6 @@ defineProps<{
           </template>
         </q-input>
       </template>
-    </VueDatePicker>
+    </VueDatePicker> -->
   </div>
 </template>

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -3,7 +3,18 @@ import { ref, watch } from 'vue';
 import { QSelect } from 'quasar';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { getRole } from 'src/services/keycloak';
+import useOptionStore from 'stores/options';
 import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { locale } = useI18n();
+
+import {
+  dateFormat,
+  calculateAge,
+  parseAndFormatDate,
+  disabledAfterToday,
+} from 'src/utils/datetime';
+
 import {
   SaveButton,
   EditButton,
@@ -25,13 +36,17 @@ defineEmits<{
   (e: 'cancel'): void;
 }>();
 
+const optionStore = useOptionStore();
 const code = defineModel<string>('code', { required: true });
-const personName = defineModel<string>('personName', { required: true });
+const namePrefix = defineModel<string | null>('namePrefix');
-const customerName = defineModel<string>('customerName', { required: true });
+const birthDate = defineModel<Date | string | null>('birthDate');
-const customerNameEN = defineModel<string>('customerNameEn', {
+const gender = defineModel<string>('gender');
-  required: true,
+
-});
+const firstName = defineModel<string>('firstName', { required: true });
-const taxNo = defineModel<string | null>('taxNo');
+const lastName = defineModel<string>('lastName', { required: true });
+const firstNameEN = defineModel<string>('firstNameEn', { required: true });
+const lastNameEN = defineModel<string>('lastNameEn', { required: true });
+
 const registeredBranchId = defineModel<string>('registeredBranchId', {
   required: true,
 });
@@ -66,6 +81,53 @@ watch(
   },
 );
 
+const prefixNameOptions = ref<Record<string, unknown>[]>([]);
+let prefixNameFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const prefixNameEnOptions = ref<Record<string, unknown>[]>([]);
+let prefixNameEnFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const genderOptions = ref<Record<string, unknown>[]>([]);
+let genderFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+onMounted(() => {
+  prefixNameFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.prefix),
+    prefixNameOptions,
+    'label',
+  );
+  genderFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.gender),
+    genderOptions,
+    'label',
+  );
+});
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    prefixNameFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.prefix),
+      prefixNameOptions,
+      'label',
+    );
+    genderFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.gender),
+      genderOptions,
+      'label',
+    );
+  },
+);
+
 function formatCode(input: string | undefined, type: 'code' | 'number') {
   if (!input) return;
   return input.slice(...(type === 'code' ? [0, -6] : [-6]));
@@ -116,13 +178,276 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         :disabled="actionDisabled"
       />
     </div>
-    <q-select
+
-      outlined
+    <div class="col-12 row">
-      clearable
+      <q-select
-      use-input
+        outlined
-      fill-input
+        clearable
-      emit-value
+        use-input
-      map-options
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        dense
+        class="col-12 col-md-5"
+        option-value="id"
+        input-debounce="0"
+        option-label="name"
+        lazy-rules="ondemand"
+        v-model="registeredBranchId"
+        :readonly="readonly"
+        :options="filteredBranchOptions"
+        :hide-dropdown-icon="readonly"
+        :label="$t('registeredBranch')"
+        :for="`${prefixId}-input-source-nationality`"
+        :rules="[
+          (val) => {
+            const roles = getRole() || [];
+            return (
+              ['admin', 'system', 'head_of_admin'].some((v) =>
+                roles.includes(v),
+              ) ||
+              !!val ||
+              $t('form.error.required')
+            );
+          },
+        ]"
+        @filter="branchFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </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"
+        lazy-rules="ondemand"
+        hide-dropdown-icon
+        class="col-1"
+        dense
+        :readonly="readonly"
+        :options="prefixNameOptions"
+        :for="`${prefixId}-select-prefix-name`"
+        :label="$t('formDialogInputPrefixName')"
+        @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('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-4"
+        :label="$t('customer.form.firstName')"
+        for="input-first-name"
+        v-model="firstName"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-4"
+        :label="$t('customer.form.lastName')"
+        for="input-last-name"
+        v-model="lastName"
+      />
+    </div>
+
+    <div class="col-12 row q-col-gutter-sm">
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        disable
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-1"
+        :label="$t('customer.form.prefixName')"
+        for="input-prefix-name"
+        :model-value="
+          namePrefix ? $t(`customer.form.prefix.${namePrefix}`) : '-'
+        "
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-4"
+        :label="$t('customer.form.firstNameEN')"
+        for="input-first-name-en"
+        v-model="firstNameEN"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-4"
+        :label="$t('customer.form.lastNameEN')"
+        for="input-last-name-en"
+        v-model="lastNameEN"
+      />
+    </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"
+        lazy-rules="ondemand"
+        class="col-2"
+        dense
+        :readonly="readonly"
+        :options="genderOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-gender`"
+        :label="$t('formDialogInputGender')"
+        @filter="genderFilter"
+        :model-value="readonly ? gender || '-' : gender"
+        @update:model-value="(v) => (typeof v === 'string' ? (gender = v) : '')"
+        @clear="gender = ''"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <VueDatePicker
+        :id="`${prefixId}-input-birth-date`"
+        :for="`${prefixId}-input-birth-date`"
+        utc
+        autoApply
+        v-model="birthDate"
+        :disabled-dates="disabledAfterToday"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-2"
+      >
+        <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-birth-date`"
+            hide-bottom-space
+            placeholder="DD/MM/YYYY"
+            :label="$t('formDialogInputBirthDate')"
+            dense
+            outlined
+            :readonly="readonly"
+            :rules="[
+              (val: string) =>
+                !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
+            ]"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              birthDate && readonly
+                ? dateFormat(birthDate)
+                : dateFormat(birthDate, false, false, true)
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  const today = new Date();
+                  const date = parseAndFormatDate(v, locale);
+                  birthDate = date && date > today ? today : date;
+                }
+              }
+            "
+          >
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-age`"
+        :id="`${prefixId}-input-age`"
+        dense
+        outlined
+        :readonly="readonly"
+        :label="$t('formDialogInputAge')"
+        class="col-2"
+        :model-value="
+          birthDate?.toString() === 'Invalid Date' ||
+          birthDate?.toString() === undefined
+            ? ''
+            : calculateAge(birthDate)
+        "
+      />
+    </div>
+
+    <!-- <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
       hide-selected
       hide-bottom-space
       dense
@@ -235,6 +560,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
       v-model="taxNo"
       :for="`${prefixId}-input-tax-no`"
       class="col-12 col-md-4"
-    />
+    /> -->
   </div>
 </template>