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>

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
-import FormBusiness from './EmployerFormBusiness.vue';
-import FormContact from './EmployerFormContact.vue';
+import EmployerFormBusiness from './EmployerFormBusiness.vue';
+import EmployerFormContact from './EmployerFormContact.vue';
 import { CustomerCreate } from 'src/stores/customer/types';
-import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { EditButton } from 'src/components/button';
 import DeleteButton from 'src/components/button/DeleteButton.vue';
 import SaveButton from 'src/components/button/SaveButton.vue';
 import CancelButton from 'src/components/button/CancelButton.vue';
+import EmployerFormAbout from './EmployerFormAbout.vue';
+import EmployerFormAttachment from './EmployerFormAttachment.vue';
 
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
   'customerBranch',
@@ -80,171 +81,26 @@ defineProps<{
         active-color="primary"
         no-caps
       >
-        <q-tab name="main" :label="$t('customerBranch.tab.main')"></q-tab>
-        <q-tab name="address" :label="$t('customerBranch.tab.address')"></q-tab>
-        <q-tab
-          name="business"
-          :label="$t('customerBranch.tab.business')"
-        ></q-tab>
-        <q-tab name="contact" :label="$t('customerBranch.tab.contact')"></q-tab>
+        <q-tab name="main" :label="$t('customerBranch.tab.main')" />
+        <q-tab name="address" :label="$t('customerBranch.tab.address')" />
+        <q-tab name="business" :label="$t('customerBranch.tab.business')" />
+        <q-tab name="contact" :label="$t('customerBranch.tab.contact')" />
+        <q-tab name="attachment" :label="$t('customerBranch.tab.attachment')" />
       </q-tabs>
       <q-tab-panels v-model="tab">
         <q-tab-panel name="main">
-          <div class="row q-col-gutter-md">
-            <q-input
-              lazy-rules="ondemand"
-              dense
-              outlined
-              :readonly="readonly"
-              hide-bottom-space
-              :label="$t('customerBranch.form.no')"
-              v-model="item.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="item.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="item.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="item.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="item.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="item.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="item.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="item.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="
-                    item.registerDate
-                      ? readonly
-                        ? dateFormat(item.registerDate)
-                        : dateFormat(item.registerDate, false, false, true)
-                      : undefined
-                  "
-                  @update:model-value="
-                    (v) => {
-                      if (readonly && v && v.toString().length === 10) {
-                        const _date = parseAndFormatDate(v, $i18n.locale);
-                        if (_date) {
-                          item.registerDate?.setDate(_date.getDate());
-                          item.registerDate?.setMonth(_date.getMonth());
-                          item.registerDate?.setFullYear(_date.getFullYear());
-                        } else {
-                          item.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="!item.registerDate && readonly"
-                      name="mdi-close-circle"
-                      class="cursor-pointer app-text-muted"
-                      size="sm"
-                      @click="item.registerDate = null"
-                    />
-                  </template>
-                </q-input>
-              </template>
-            </VueDatePicker>
-          </div>
+          <EmployerFormAbout
+            :readonly="readonly"
+            v-model:id="item.id"
+            v-model:branch-no="item.branchNo"
+            v-model:tax-no="item.taxNo"
+            v-model:code="item.code"
+            v-model:name="item.name"
+            v-model:name-en="item.nameEN"
+            v-model:registered-name="item.registerName"
+            v-model:registered-date="item.registerDate"
+            v-model:authorized-capital="item.authorizedCapital"
+          />
         </q-tab-panel>
         <q-tab-panel name="address">
           <FormAddress
@@ -264,7 +120,7 @@ defineProps<{
           />
         </q-tab-panel>
         <q-tab-panel name="business">
-          <FormBusiness
+          <EmployerFormBusiness
             dense
             outlined
             :prefix-id="prefixId || 'employer'"
@@ -281,12 +137,18 @@ defineProps<{
           />
         </q-tab-panel>
         <q-tab-panel name="contact">
-          <FormContact
+          <EmployerFormContact
             :readonly="readonly"
             v-model:email="item.email"
             v-model:telephone="item.telephoneNo"
           />
         </q-tab-panel>
+        <q-tab-panel name="attachment">
+          <EmployerFormAttachment
+            :readonly="readonly"
+            v-model:attachment="item.file"
+          />
+        </q-tab-panel>
       </q-tab-panels>
     </div>
   </div>