Merge branch 'develop'

src/components/02_personnel-management/FormPerson.vue

@@ -404,6 +404,7 @@ watch(
         :id="`${prefixId}-input-citizen-issue`"
         :readonly="readonly"
         :label="$t('personnel.form.citizenIssue')"
+        :disabled-dates="disabledAfterToday"
         :rules="[
           (val: string) =>
             !!val ||

src/components/upload-file/UploadFileGroup.vue

@@ -242,11 +242,11 @@ defineEmits<{
 
     <div
       v-if="obj"
-      class="bordered col surface-2 column justify-center items-center no-wrap scroll"
+      class="bordered col surface-2 column items-center no-wrap scroll"
     >
       <slot name="content">
         <template v-if="columns !== undefined">
-          <div class="full-height full-width q-pa-md">
+          <div class="full-width q-pa-md">
             <TableComponents
               buttomDownload
               @download="

src/pages/01_branch-management/MainPage.vue

@@ -263,7 +263,7 @@ onMounted(async () => {
     // object, we are effectively unselecting any HQ branch.
   ];
 
-  await fetchList({ pageSize: 99999, tree: true });
+  await fetchList({ pageSize: 99999, tree: true, withHead: true });
   await calculateStats();
 
   modeView.value = $q.screen.lt.md ? true : false;
@@ -447,7 +447,7 @@ async function fetchBranchById(id: string) {
     }
 
     formData.value = {
-      remark: res.remark,
+      remark: res.remark || '',
       code: res.code,
       headOfficeId: res.headOfficeId,
       taxNo: res.taxNo,
@@ -641,7 +641,7 @@ async function triggerDelete(id: string) {
         const res = await branchStore.deleteById(id);
 
         if (res) {
-          await fetchList({ tree: true, pageSize: 99999 });
+          await fetchList({ tree: true, pageSize: 99999, withHead: true });
           modalDrawer.value = false;
           modal.value = false;
           await calculateStats();
@@ -705,13 +705,14 @@ async function fetchList(opts: {
   zipCode?: string;
   query?: string;
   tree?: boolean;
+  withHead?: boolean;
   filter?: 'head' | 'sub';
 }) {
   await branchStore.fetchList(opts);
 }
 
 watch(inputSearch, () => {
-  fetchList({ tree: true, query: inputSearch.value });
+  fetchList({ tree: true, query: inputSearch.value, withHead: true });
   currentSubBranch.value = undefined;
 });
 
@@ -737,7 +738,7 @@ async function triggerChangeStatus(
         });
         if (res) resolve(res);
 
-        await fetchList({ tree: true, pageSize: 99999 });
+        await fetchList({ tree: true, pageSize: 99999, withHead: true });
       },
       cancel: () => {},
     });
@@ -767,7 +768,7 @@ async function onSubmit(submitSelectedItem?: boolean) {
     formData.value.codeHeadOffice = formData.value.code = res.code;
     imageUrl.value = `${baseUrl}/branch/${res.id}/image/${res.selectedImage}`;
 
-    await fetchList({ tree: true, pageSize: 99999 });
+    await fetchList({ tree: true, pageSize: 99999, withHead: true });
 
     if (!imageDialog.value) modalDrawer.value = submitSelectedItem || false;
   }
@@ -797,7 +798,7 @@ async function onSubmit(submitSelectedItem?: boolean) {
         formType.value = 'view';
       }
 
-      await fetchList({ tree: true, pageSize: 99999 });
+      await fetchList({ tree: true, pageSize: 99999, withHead: true });
     };
 
     if (
@@ -2069,7 +2070,7 @@ watch(currentHq, () => {
                 formType = 'view';
               }
 
-              await fetchList({ tree: true, pageSize: 99999 });
+              await fetchList({ tree: true, pageSize: 99999, withHead: true });
             }
           "
           :menu="formMenuIcon"

src/pages/03_customer-management/MainPage.vue

@@ -2221,7 +2221,7 @@ const emptyCreateDialog = ref(false);
                       customerFormState.editCustomerId,
                     );
 
-                    await fetchListCustomer();
+                    await fetchListCustomer(true);
                     customerFormStore.resetForm();
                   }
                 "

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { QSelect } from 'quasar';
 import { onMounted, ref, watch, capitalize } from 'vue';
-import { formatNumberDecimal, selectFilterOptionRefMod } from 'stores/utils';
+import { selectFilterOptionRefMod, commaInput } from 'stores/utils';
 import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
 
 import useOptionStore from 'src/stores/options';
@@ -108,6 +108,36 @@ watch(
 <template>
   <div class="row q-col-gutter-sm">
     <template v-if="customerType === 'CORP'">
+      <div class="col-12 row q-col-gutter-sm">
+        <q-input
+          dense
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-12 col-md-6"
+          :label="$t('customer.form.registerName')"
+          for="input-register-name"
+          v-model="registerName"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
+        />
+
+        <q-input
+          dense
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-12 col-md-6"
+          label="Company name"
+          for="input-register-name-en"
+          v-model="registerNameEN"
+          :rules="[
+            (val: string) => !!val || $t('form.error.required'),
+            (val: string) =>
+              /^[0-9A-Za-z\s.,]+$/.test(val) || $t('form.error.letterOnly'),
+          ]"
+        />
+      </div>
+
       <div class="col-12 row q-col-gutter-sm">
         <q-input
           dense
@@ -166,36 +196,6 @@ watch(
         />
       </div>
 
-      <div class="col-12 row q-col-gutter-sm">
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-12 col-md-6"
-          :label="$t('customer.form.registerName')"
-          for="input-register-name"
-          v-model="registerName"
-          :rules="[(val: string) => !!val || $t('form.error.required')]"
-        />
-
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-12 col-md-6"
-          label="Company name"
-          for="input-register-name-en"
-          v-model="registerNameEN"
-          :rules="[
-            (val: string) => !!val || $t('form.error.required'),
-            (val: string) =>
-              /^[0-9A-Za-z\s.,]+$/.test(val) || $t('form.error.letterOnly'),
-          ]"
-        />
-      </div>
-
       <div class="col-12 row q-col-gutter-sm">
         <DatePicker
           v-model="registerDate"
@@ -214,14 +214,10 @@ watch(
           class="col-12 col-md-2"
           :label="$t('customer.form.authorizedCapital')"
           for="input-authorized-capital"
-          :model-value="
+          :model-value="authorizedCapital"
-            !readonly
-              ? authorizedCapital
-              : formatNumberDecimal(+authorizedCapital, 2)
-          "
           @update:model-value="
             (v) => {
-              authorizedCapital = `${v}`;
+              if (typeof v === 'string') authorizedCapital = commaInput(v);
             }
           "
         />

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { selectFilterOptionRefMod } from 'stores/utils';
+import { selectFilterOptionRefMod, commaInput } from 'stores/utils';
 import { onMounted, watch } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -13,9 +13,10 @@ const jobPosition = defineModel<string>('jobPosition');
 const jobDescription = defineModel<string>('jobDescription');
 const payDate = defineModel<string>('payDate');
 const payDateEN = defineModel<string>('payDateEN');
-const wageRate = defineModel<number>('wageRate');
+const wageRate = defineModel<number | string>('wageRate');
 const wageRateText = defineModel<string>('wageRateText');
 
+const wageRate4Show = ref('');
 const typeBusinessOption = ref([]);
 const typeBusinessENOption = ref([]);
 const jobPositionOption = ref([]);
@@ -272,7 +273,6 @@ let jobPositionENFilter = selectFilterOptionRefMod(
         (v) => (typeof v === 'string' ? (payDateEN = v) : '')
       "
     />
-
     <q-input
       :for="`${prefixId}-input-pay-rate`"
       :id="`${prefixId}-input-pay-rate`"
@@ -282,7 +282,18 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       hide-bottom-space
       class="col-md-3 col-6"
       :label="$t('customer.form.payRate')"
-      v-model="wageRate"
+      :model-value="commaInput(wageRate?.toString() || '-')"
+      @update:model-value="
+        (v) => {
+          if (typeof v === 'string') wageRate4Show = commaInput(v);
+          const x = parseInt(
+            wageRate4Show && typeof wageRate4Show === 'string'
+              ? wageRate4Show.replace(/,/g, '')
+              : '',
+          );
+          wageRate = x;
+        }
+      "
     />
 
     <q-input

src/stores/branch/index.ts

@@ -35,6 +35,7 @@ const useBranchStore = defineStore('api-branch', () => {
       query?: string;
       tree?: boolean;
       filter?: 'head' | 'sub';
+      withHead?: boolean;
     },
     Data extends Pagination<Branch[]>,
   >(opts?: Options): Promise<Data | false> {

src/stores/user/index.ts

@@ -44,6 +44,7 @@ const useUserStore = defineStore('api-user', () => {
       const res = await branchStore.fetchList({
         pageSize: 999,
         filter: 'head',
+        withHead: true,
       });
       if (res) {
         res.result.map((item) => {

src/stores/utils/index.ts

@@ -415,4 +415,12 @@ export async function waitAll<T extends Promise<any>[]>(arr: T) {
   return await Promise.all(arr);
 }
 
+export function commaInput(text: string): string {
+  if (typeof text !== 'string') return '';
+  const num = text.replace(/,/gi, '');
+  const numF = num.split(/(?=(?:\d{3})+$)/).join(',');
+
+  return numF;
+}
+
 export default useUtilsStore;