refactor: structure

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

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
+
+const id = defineModel<string>('id');
+const branchNo = defineModel<number>('branchNo');
+const code = defineModel<string>('code');
+const taxNo = defineModel<string | null>('taxNo');
+const name = defineModel<string>('name');
+const nameEN = defineModel<string>('nameEn');
+const registerName = defineModel<string>('registerName');
+const registerDate = defineModel<Date | null>('registerDate');
+const authorizedCapital = defineModel<string>('authorizedCapital');
+
+defineProps<{
+  code?: string;
+  readonly?: boolean;
+  prefixId?: string;
+  customerType?: 'PERS' | 'CORP';
+}>();
+</script>
+
+<template>
+  <div class="row q-col-gutter-md">
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      :readonly="!!id || readonly"
+      hide-bottom-space
+      :label="$t('customerBranch.form.no')"
+      v-model="branchNo"
+      :for="`${prefixId}-input-branch-branch-no`"
+      type="number"
+      class="col-12 col-md-2"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      readonly
+      hide-bottom-space
+      :label="$t('customerBranch.form.code')"
+      :model-value="code || '-'"
+      :for="`${prefixId}-input-branch-branch-code`"
+      class="col-12 col-md-4"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      :label="$t('customerBranch.form.taxNo')"
+      v-model="taxNo"
+      :for="`${prefixId}-input-branch-tax-no`"
+      type="number"
+      class="col-12 col-md-4"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      :label="$t('customerBranch.form.name')"
+      v-model="name"
+      :for="`${prefixId}-input-branch-tax-no`"
+      class="col-12 col-md-6"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      :label="$t('customerBranch.form.nameEN')"
+      v-model="nameEN"
+      :for="`${prefixId}-input-branch-tax-no`"
+      class="col-12 col-md-6"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      v-if="customerType === 'CORP'"
+      :readonly="readonly"
+      hide-bottom-space
+      :label="$t('customerBranch.form.registerName')"
+      v-model="registerName"
+      :for="`${prefixId}-input-branch-register-name`"
+      class="col-12 col-md-4"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      v-if="customerType === 'CORP'"
+      :label="$t('customerBranch.form.authorizedCapital')"
+      v-model="authorizedCapital"
+      :for="`${prefixId}-input-branch-authorized-capital`"
+      class="col-12 col-md-4"
+    />
+    <VueDatePicker
+      :id="`${prefixId}-picker-date-register-date`"
+      :teleport="true"
+      utc
+      v-if="customerType === 'CORP'"
+      auto-apply
+      v-model="registerDate"
+      :dark="$q.dark.isActive"
+      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-md-4 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('customerBranch.form.registerDate')"
+          dense
+          outlined
+          :readonly="readonly"
+          placeholder="DD/MM/YYYY"
+          :mask="readonly ? '' : '##/##/####'"
+          :model-value="
+            registerDate
+              ? readonly
+                ? dateFormat(registerDate)
+                : dateFormat(registerDate, false, false, true)
+              : undefined
+          "
+          @update:model-value="
+            (v) => {
+              if (readonly && v && v.toString().length === 10) {
+                const _date = parseAndFormatDate(v, $i18n.locale);
+                if (_date) {
+                  registerDate?.setDate(_date.getDate());
+                  registerDate?.setMonth(_date.getMonth());
+                  registerDate?.setFullYear(_date.getFullYear());
+                } else {
+                  registerDate = null;
+                }
+              }
+            }
+          "
+        >
+          <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="!registerDate && readonly"
+              name="mdi-close-circle"
+              class="cursor-pointer app-text-muted"
+              size="sm"
+              @click="registerDate = null"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+  </div>
+</template>