fix(01): code form & i18n

src/components/01_branch-management/FormBranchContact.vue

@@ -36,7 +36,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md-3 col-12"
+        class="col-3"
         :label="
           typeBranch === 'headOffice'
             ? $t('formDialogInputEmailHq')
@@ -56,7 +56,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md-3 col-12"
+        class="col-3"
         :label="
           typeBranch === 'headOffice'
             ? $t('formDialogInputTelephoneHq')
@@ -70,34 +70,6 @@ defineProps<{
         </template>
       </q-input>
 
-      <q-input
-        lazy-rules="ondemand"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-md-3 col-12"
-        :label="$t('formDialogInputContactName')"
-        v-model="contactName"
-        for="input-contact-name"
-      />
-
-      <q-input
-        lazy-rules="ondemand"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-3"
-        :label="$t('formDialogInputTelephoneContact')"
-        v-model="contact"
-        for="input-contact"
-      >
-        <template #prepend>
-          <q-icon color="primary" name="mdi-phone" size="xs" class="q-mr-xs" />
-        </template>
-      </q-input>
-
       <q-input
         lazy-rules="ondemand"
         :dense="dense"
@@ -109,6 +81,41 @@ defineProps<{
         v-model="lineId"
         for="input-line-id"
       />
+
+      <div class="col-12 row q-col-gutter-sm">
+        <q-input
+          lazy-rules="ondemand"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputContactName')"
+          v-model="contactName"
+          for="input-contact-name"
+        />
+
+        <q-input
+          lazy-rules="ondemand"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputTelephoneContact')"
+          v-model="contact"
+          for="input-contact"
+        >
+          <template #prepend>
+            <q-icon
+              color="primary"
+              name="mdi-phone"
+              size="xs"
+              class="q-mr-xs"
+            />
+          </template>
+        </q-input>
+      </div>
     </div>
   </div>
 </template>

src/components/01_branch-management/FormBranchInformation.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { onMounted } from 'vue';
+
 const code = defineModel<string>('code');
 const codeSubBranch = defineModel<string>('codeSubBranch');
 const taxNo = defineModel<string>('taxNo');
 const name = defineModel<string>('name');
+const abbreviation = defineModel<string>('abbreviation');
 const nameEN = defineModel<string>('nameEN');
 const typeBranch = defineModel<string>('typeBranch');
 
@@ -13,6 +16,14 @@ defineProps<{
   readonly?: boolean;
   view?: boolean;
 }>();
+
+function formatCode(input: string | undefined, type: 'code' | 'number') {
+  if (!input) return;
+  const code = input.slice(0, -6);
+  const number = input.slice(-6);
+  if (type === 'code') return code;
+  if (type === 'number') return number;
+}
 </script>
 <template>
   <div class="row col-12">
@@ -29,104 +40,118 @@ defineProps<{
     </div>
 
     <div class="col-12 row q-col-gutter-sm">
-      <q-input
+      <div
-        lazy-rules="ondemand"
+        class="col-6 row q-col-gutter-sm"
-        :dense="dense"
-        outlined
-        readonly
-        :disable="!readonly"
-        hide-bottom-space
         :class="{
-          'col-12': $q.screen.xs,
+          'col-8': typeBranch !== 'headOffice',
-          'col-3': typeBranch == 'headOffice',
+          'col-6': typeBranch === 'headOffice',
-          'col-4': typeBranch != 'headOffice',
         }"
-        :label="$t('formDialogInputCode')"
+      >
-        v-model="code"
+        <q-input
-        for="input-code"
+          lazy-rules="ondemand"
-      />
+          :dense="dense"
+          outlined
+          :disable="view && !readonly"
+          :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('formDialogHqAbbreviation')"
+          for="input-abbreviation"
+          :model-value="view ? formatCode(abbreviation, 'code') : abbreviation"
+          @update:model-value="(v) => (abbreviation = v as string)"
+        />
+        <q-input
+          lazy-rules="ondemand"
+          :dense="dense"
+          outlined
+          readonly
+          :disable="!readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('formDialogInputCode')"
+          for="input-code"
+          :model-value="view ? formatCode(code, 'number') : code"
+          @update:model-value="(v) => (code = v as string)"
+        />
+        <q-input
+          lazy-rules="ondemand"
+          v-if="typeBranch !== 'headOffice'"
+          :dense="dense"
+          outlined
+          :disable="view && !readonly"
+          :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('branchLabelCode')"
+          for="input-code-sub-branch"
+          :model-value="
+            view ? formatCode(codeSubBranch, 'number') : codeSubBranch
+          "
+          @update:model-value="(v) => (codeSubBranch = v as string)"
+        />
 
-      <q-input
+        <q-input
-        lazy-rules="ondemand"
+          lazy-rules="ondemand"
-        v-if="typeBranch !== 'headOffice'"
+          :dense="dense"
-        :dense="dense"
+          outlined
-        outlined
+          :readonly="readonly"
-        readonly
+          hide-bottom-space
-        hide-bottom-space
+          class="col-5"
-        :class="{
+          :label="$t('formDialogInputTaxNo')"
-          'col-12': $q.screen.xs,
+          v-model="taxNo"
-          'col-3': typeBranch == 'headOffice',
+          :rules="[
-          'col-4': typeBranch != 'headOffice',
+            (val) =>
-        }"
+              (val && val.length === 13 && /[0-9]+/.test(val)) ||
-        :label="$t('branchLabelCode')"
+              $t('formDialogInputTaxNoValidate'),
-        v-model="codeSubBranch"
+          ]"
-        for="input-code-sub-branch"
+          for="input-tax-no"
-      />
+        />
+      </div>
 
-      <q-input
+      <div class="col-12 row q-col-gutter-sm">
-        lazy-rules="ondemand"
+        <q-input
-        :dense="dense"
+          lazy-rules="ondemand"
-        outlined
+          :dense="dense"
-        :readonly="readonly"
+          outlined
-        hide-bottom-space
+          :readonly="readonly"
-        :class="{
+          hide-bottom-space
-          'col-12': $q.screen.xs,
+          class="col-6"
-          'col-3': typeBranch === 'headOffice',
+          :label="
-          'col-4': typeBranch !== 'headOffice',
+            typeBranch === 'headOffice'
-        }"
+              ? $t('formDialogInputNameHq')
-        :label="$t('formDialogInputTaxNo')"
+              : $t('formDialogInputNameSubBranch')
-        v-model="taxNo"
+          "
-        :rules="[
+          v-model="name"
-          (val) =>
+          :rules="[(val) => val && val.length > 0]"
-            (val && val.length === 13 && /[0-9]+/.test(val)) ||
+          :error-message="
-            $t('formDialogInputTaxNoValidate'),
+            typeBranch === 'headOffice'
-        ]"
+              ? $t('formDialogInputNameHqValidate')
-        for="input-tax-no"
+              : $t('formDialogInputNameSubBranchValidate')
-      />
+          "
-
+          for="input-name"
-      <q-input
+        />
-        lazy-rules="ondemand"
+        <q-input
-        :dense="dense"
+          lazy-rules="ondemand"
-        outlined
+          :dense="dense"
-        :readonly="readonly"
+          outlined
-        hide-bottom-space
+          :readonly="readonly"
-        class="col-3"
+          hide-bottom-space
-        :label="
+          class="col-6"
-          typeBranch === 'headOffice'
+          v-model="nameEN"
-            ? $t('formDialogInputNameHq')
+          :label="
-            : $t('formDialogInputNameSubBranch')
+            typeBranch === 'headOffice'
-        "
+              ? $t('formDialogInputNameHqEn')
-        v-model="name"
+              : $t('formDialogInputNameSubBranchEn')
-        :rules="[(val) => val && val.length > 0]"
+          "
-        :error-message="
+          :rules="[(val) => val && val.length > 0]"
-          typeBranch === 'headOffice'
+          :error-message="
-            ? $t('formDialogInputNameHqValidate')
+            typeBranch === 'headOffice'
-            : $t('formDialogInputNameSubBranchValidate')
+              ? $t('formDialogInputNameHqEnValidate')
-        "
+              : $t('formDialogInputNameSubBranchEnValidate')
-        for="input-name"
+          "
-      />
+          for="input-name-en"
-
+        />
-      <q-input
+      </div>
-        lazy-rules="ondemand"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-3"
-        v-model="nameEN"
-        :label="
-          typeBranch === 'headOffice'
-            ? $t('formDialogInputNameHqEn')
-            : $t('formDialogInputNameSubBranchEn')
-        "
-        :rules="[(val) => val && val.length > 0]"
-        :error-message="
-          typeBranch === 'headOffice'
-            ? $t('formDialogInputNameHqEnValidate')
-            : $t('formDialogInputNameSubBranchEnValidate')
-        "
-        for="input-name-en"
-      />
     </div>
   </div>
 </template>

src/i18n/en-US/form-dialog.ts

@@ -3,6 +3,7 @@ export default {
   selectValidate: 'Please select ',
 
   // Branch & HQ
+  formDialogHqAbbreviation: 'Head Office Abbreviation',
   formDialogTitleImg: 'Office Image',
   formDialogBtnImg: 'Add Office Image',
 

src/i18n/th-th/customer-main-page.ts

@@ -42,7 +42,7 @@ export default {
   about: 'เกี่ยวกับ',
   branchCode: 'รหัสสาขา',
   legalEntityCode: 'รหัสนิติบุคคล',
-  taxNo: 'เลขประจำตัวผู้เสียภาษี',
+  taxNo: 'เลขทะเบียนนิติบุคคล',
   customerName: 'ชื่อสาขา ภาษาไทย',
   customerEnglishName: 'ชื่อสาขา ภาษาอังกฤษ',
   registerDate: 'จดทะเบียนเมื่อ',

src/i18n/th-th/form-dialog.ts

@@ -3,6 +3,7 @@ export default {
   selectValidate: 'กรุณาเลือก',
 
   // Branch & HQ
+  formDialogHqAbbreviation: 'ตัวย่อสำนักงานใหญ่',
   formDialogTitleImg: 'ภาพสำนักงาน',
   formDialogBtnImg: 'เพิ่มรูปสำนักงาน',
 
@@ -23,8 +24,8 @@ export default {
   formDialogTitlePersonal: 'ข้อมูลบุคคล',
 
   formDialogInputCode: 'รหัสสำนักงานใหญ่',
-  formDialogInputTaxNo: 'เลขประจำตัวผู้เสียภาษี',
+  formDialogInputTaxNo: 'เลขทะเบียนนิติบุคคล',
-  formDialogInputTaxNoValidate: 'โปรดระบุเลขประจำตัวผู้เสียภาษี',
+  formDialogInputTaxNoValidate: 'โปรดระบุเลขทะเบียนนิติบุคคล',
 
   formDialogInputNameHq: 'ชื่อสำนักงานใหญ่',
   formDialogInputNameSubBranch: 'ชื่อสาขา',

src/i18n/th-th/index.ts

@@ -120,7 +120,7 @@ export default {
       customerName: 'ชื่อบริษัท',
       customerNameEN: 'ชื่อบริษัท (EN)',
       personName: 'ชื่อลูกค้า',
-      taxIdentificationNumber: 'หมายเลขประจำตัวผู้เสียภาษี',
+      taxIdentificationNumber: 'หมายเลขทะเบียนนิติบุคคล',
       branch: {
         title: 'สาขาที่ {name}',
       },
@@ -130,7 +130,7 @@ export default {
     form: {
       no: 'เลขที่สาขา',
       code: 'รหัสสาขา',
-      taxNo: 'เลขประจำตัวผู้เสียภาษี',
+      taxNo: 'เลขทะเบียนนิติบุคคล',
       name: 'ชื่อสาขา',
       nameEN: 'ชื่อสาขา (ภาษาอังกฤษ)',
       authorizedCapital: 'ทุนจดทะเบียน',

src/i18n/th-th/object.ts

@@ -50,7 +50,7 @@ export default {
     input: {
       formDialogInputCode: 'รหัสสำนักงานใหญ่',
       formDialogInputBrId: 'รหัสสาขา',
-      formDialogInputTaxNo: 'เลขประจำตัวผู้เสียภาษี',
+      formDialogInputTaxNo: 'เลขทะเบียนนิติบุคคล',
       formDialogInputNameSubBranch: 'ชื่อสาขา',
       formDialogInputNameSubBranchEn: 'ชื่อสาขา (ภาษาอังกฤษ)',
       formDialogInputEmailSubBranch: 'อีเมลติดต่อสาขา',

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

@@ -41,7 +41,7 @@ const { t } = useI18n();
 const utilsStore = useUtilsStore();
 
 const holdDialog = ref(false);
-
+const isSubCreate = ref(false);
 const columns = [
   {
     name: 'branchLabelNo',
@@ -80,6 +80,7 @@ const columns = [
 
 const modal = ref<boolean>(false);
 const hideStat = ref(false);
+const currentId = ref<string>('');
 const currentStatus = ref<Status | 'All'>('All');
 const expandedTree = ref<string[]>([]);
 const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
@@ -257,6 +258,7 @@ const splitterModel = ref(25);
 
 const defaultFormData = {
   headOfficeId: null,
+  code: '',
   taxNo: '',
   nameEN: '',
   name: '',
@@ -314,6 +316,7 @@ async function fetchBranchById(id: string) {
     formBankBook.value = updatedBank;
 
     formData.value = {
+      code: res.code,
       headOfficeId: res.headOfficeId,
       taxNo: res.taxNo,
       nameEN: res.nameEN,
@@ -382,7 +385,9 @@ function triggerCreate(
   }
 
   if (type === 'subBranch' && id && code) {
+    isSubCreate.value = true;
     formData.value.headOfficeId = id;
+    formData.value.code = code;
     formData.value.codeHeadOffice = code;
   }
 
@@ -418,6 +423,8 @@ async function triggerEdit(
     formData.value.codeHeadOffice = code;
   }
 
+  currentId.value = id;
+
   const currentRecord = branchData.value.result.find((x) => x.id === id);
 
   if (!currentRecord) return;
@@ -441,6 +448,7 @@ async function triggerEdit(
       currentHq.value = currentEdit.value;
     }
   }
+  console.log(formData.value);
 
   formTypeBranch.value = typeBranch;
 }
@@ -496,6 +504,7 @@ async function triggerChangeStatus(
 async function onSubmit() {
   if (formType.value === 'edit') {
     delete formData.value['codeHeadOffice'];
+    delete formData.value['code'];
 
     await branchStore.editById(
       currentEdit.value.id,
@@ -520,6 +529,7 @@ async function onSubmit() {
       );
 
       formData.value.headOfficeId = currentRecord?.id;
+      formData.value.code = formData.value.code?.slice(0, -6);
       delete formData.value['codeHeadOffice'];
     }
 
@@ -1060,6 +1070,7 @@ watch(currentHq, () => {
                           <div class="row items-center">
                             <div
                               :class="{
+                                'q-mr-sm': true,
                                 'status-active':
                                   props.row.status !== 'INACTIVE',
                                 'status-inactive':
@@ -1077,7 +1088,7 @@ watch(currentHq, () => {
                                 <q-img
                                   :src="
                                     baseUrl +
-                                    `/branch/${props.row.id}/branch-image`
+                                    `/branch/${props.row.id}/branch-image?ts=${Date.now()}`
                                   "
                                   style="
                                     height: 3rem;
@@ -1504,7 +1515,10 @@ watch(currentHq, () => {
     "
     :close="
       () => (
-        (modal = false), (profileFileImg = undefined), (isImageEdit = false)
+        (modal = false),
+        (profileFileImg = undefined),
+        (isImageEdit = false),
+        (isSubCreate = false)
       )
     "
   >
@@ -1513,17 +1527,25 @@ watch(currentHq, () => {
       caption="Jobs Worker Service Co., Ltd." -->
       <ProfileBanner
         active
+        useToggle
         :title="formData.name"
-        :caption="formData.nameEN"
+        :caption="formData.codeHeadOffice"
+        v-model:toggle-status="formData.status"
         v-model:cover-url="imageUrl"
         :hideFade="imageUrl === '' || imageUrl === null"
         :img="imageUrl || null"
         icon="mdi-office-building-outline"
         color="hsla(var(--pink-6-hsl)/1)"
         bgColor="hsla(var(--pink-6-hsl)/0.15)"
+        :menu="formMenuIcon"
         @view="imageDialog = true"
         @edit="refImageUpload && refImageUpload.browse()"
-        :menu="formMenuIcon"
+        @update:toggle-status="
+          () => {
+            formData.status =
+              formData.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
+          }
+        "
       />
     </div>
     <div
@@ -1572,6 +1594,7 @@ watch(currentHq, () => {
       <div class="col-10 q-pa-md q-gutter-y-xl">
         <FormBranchInformation
           id="form-information"
+          v-model:abbreviation="formData.code"
           v-model:code="formData.codeHeadOffice"
           v-model:code-sub-branch="currentEdit.code"
           v-model:taxNo="formData.taxNo"
@@ -1581,7 +1604,7 @@ watch(currentHq, () => {
           :dense="true"
           :outlined="true"
           :readonly="formType === 'view'"
-          :view="formType === 'view'"
+          :view="isSubCreate"
           title="formDialogTitleInformation"
         />
         <FormBranchContact
@@ -1670,18 +1693,27 @@ watch(currentHq, () => {
     <InfoForm>
       <div class="q-mx-lg q-mt-lg">
         <ProfileBanner
-          active
+          :active="formData.status !== 'INACTIVE'"
+          useToggle
           v-model:cover-url="imageUrl"
           :hideFade="imageUrl === '' || imageUrl === null"
           :img="imageUrl || null"
           :cover="imageUrl || null"
           :title="formData.name"
-          :caption="formData.nameEN"
+          :caption="formData.codeHeadOffice"
           icon="mdi-office-building-outline"
           color="hsla(var(--pink-6-hsl)/1)"
           bgColor="hsla(var(--pink-6-hsl)/0.15)"
+          v-model:toggle-status="formData.status"
           @view="imageDialog = true"
           @edit="refImageUpload && refImageUpload.browse()"
+          @update:toggle-status="
+            async (v) => {
+              const res = await triggerChangeStatus(currentId, v);
+              if (res) formData.status = res.status;
+              await branchStore.fetchList({ pageSize: 99999 });
+            }
+          "
           :readonly="formType === 'view'"
           :menu="formMenuIcon"
         />
@@ -1733,6 +1765,7 @@ watch(currentHq, () => {
         <div class="col-10 q-pa-md q-gutter-y-xl">
           <FormBranchInformation
             id="info-information"
+            v-model:abbreviation="formData.code"
             v-model:code="formData.codeHeadOffice"
             v-model:code-sub-branch="currentEdit.code"
             v-model:taxNo="formData.taxNo"
@@ -1743,7 +1776,7 @@ watch(currentHq, () => {
             :dense="true"
             :outlined="true"
             :readonly="formType === 'view'"
-            :view="formType === 'view'"
+            view
             title="formDialogTitleInformation"
           />
           <FormBranchContact

src/stores/branch/types.ts

@@ -51,6 +51,7 @@ export type Branch = {
 export type BranchWithChildren = Branch & { branch: Branch[] };
 
 export type BranchCreate = {
+  code?: string;
   taxNo: string;
   nameEN: string;
   name: string;