fix(01): code form & i18n

2024-08-07 10:08:45 +00:00 · 2024-08-07 10:08:45 +00:00 · 68cc429b2e
commit 68cc429b2e
parent c25cede70b
9 changed files with 207 additions and 139 deletions
--- a/src/components/01_branch-management/FormBranchContact.vue
+++ b/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>
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/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
-        lazy-rules="ondemand"
-        :dense="dense"
-        outlined
-        readonly
-        :disable="!readonly"
-        hide-bottom-space
+      <div
+        class="col-6 row q-col-gutter-sm"
        :class="{
-          'col-12': $q.screen.xs,
-          'col-3': typeBranch == 'headOffice',
-          'col-4': typeBranch != 'headOffice',
+          'col-8': typeBranch !== 'headOffice',
+          'col-6': typeBranch === 'headOffice',
        }"
-        :label="$t('formDialogInputCode')"
-        v-model="code"
-        for="input-code"
-      />
+      >
+        <q-input
+          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
-        lazy-rules="ondemand"
-        v-if="typeBranch !== 'headOffice'"
-        :dense="dense"
-        outlined
-        readonly
-        hide-bottom-space
-        :class="{
-          'col-12': $q.screen.xs,
-          'col-3': typeBranch == 'headOffice',
-          'col-4': typeBranch != 'headOffice',
-        }"
-        :label="$t('branchLabelCode')"
-        v-model="codeSubBranch"
-        for="input-code-sub-branch"
-      />
+        <q-input
+          lazy-rules="ondemand"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-5"
+          :label="$t('formDialogInputTaxNo')"
+          v-model="taxNo"
+          :rules="[
+            (val) =>
+              (val && val.length === 13 && /[0-9]+/.test(val)) ||
+              $t('formDialogInputTaxNoValidate'),
+          ]"
+          for="input-tax-no"
+        />
+      </div>

-      <q-input
-        lazy-rules="ondemand"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        :class="{
-          'col-12': $q.screen.xs,
-          'col-3': typeBranch === 'headOffice',
-          'col-4': typeBranch !== 'headOffice',
-        }"
-        :label="$t('formDialogInputTaxNo')"
-        v-model="taxNo"
-        :rules="[
-          (val) =>
-            (val && val.length === 13 && /[0-9]+/.test(val)) ||
-            $t('formDialogInputTaxNoValidate'),
-        ]"
-        for="input-tax-no"
-      />
-
-      <q-input
-        lazy-rules="ondemand"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-3"
-        :label="
-          typeBranch === 'headOffice'
-            ? $t('formDialogInputNameHq')
-            : $t('formDialogInputNameSubBranch')
-        "
-        v-model="name"
-        :rules="[(val) => val && val.length > 0]"
-        :error-message="
-          typeBranch === 'headOffice'
-            ? $t('formDialogInputNameHqValidate')
-            : $t('formDialogInputNameSubBranchValidate')
-        "
-        for="input-name"
-      />
-
-      <q-input
-        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 class="col-12 row q-col-gutter-sm">
+        <q-input
+          lazy-rules="ondemand"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-6"
+          :label="
+            typeBranch === 'headOffice'
+              ? $t('formDialogInputNameHq')
+              : $t('formDialogInputNameSubBranch')
+          "
+          v-model="name"
+          :rules="[(val) => val && val.length > 0]"
+          :error-message="
+            typeBranch === 'headOffice'
+              ? $t('formDialogInputNameHqValidate')
+              : $t('formDialogInputNameSubBranchValidate')
+          "
+          for="input-name"
+        />
+        <q-input
+          lazy-rules="ondemand"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-6"
+          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>
  </div>
 </template>
--- a/src/i18n/en-US/form-dialog.ts
+++ b/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',

--- a/src/i18n/th-th/customer-main-page.ts
+++ b/src/i18n/th-th/customer-main-page.ts
@ -42,7 +42,7 @@ export default {
  about: 'เกี่ยวกับ',
  branchCode: 'รหัสสาขา',
  legalEntityCode: 'รหัสนิติบุคคล',
-  taxNo: 'เลขประจำตัวผู้เสียภาษี',
+  taxNo: 'เลขทะเบียนนิติบุคคล',
  customerName: 'ชื่อสาขา ภาษาไทย',
  customerEnglishName: 'ชื่อสาขา ภาษาอังกฤษ',
  registerDate: 'จดทะเบียนเมื่อ',
--- a/src/i18n/th-th/form-dialog.ts
+++ b/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: 'เลขประจำตัวผู้เสียภาษี',
-  formDialogInputTaxNoValidate: 'โปรดระบุเลขประจำตัวผู้เสียภาษี',
+  formDialogInputTaxNo: 'เลขทะเบียนนิติบุคคล',
+  formDialogInputTaxNoValidate: 'โปรดระบุเลขทะเบียนนิติบุคคล',

  formDialogInputNameHq: 'ชื่อสำนักงานใหญ่',
  formDialogInputNameSubBranch: 'ชื่อสาขา',
--- a/src/i18n/th-th/index.ts
+++ b/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: 'ทุนจดทะเบียน',
--- a/src/i18n/th-th/object.ts
+++ b/src/i18n/th-th/object.ts
@ -50,7 +50,7 @@ export default {
    input: {
      formDialogInputCode: 'รหัสสำนักงานใหญ่',
      formDialogInputBrId: 'รหัสสาขา',
-      formDialogInputTaxNo: 'เลขประจำตัวผู้เสียภาษี',
+      formDialogInputTaxNo: 'เลขทะเบียนนิติบุคคล',
      formDialogInputNameSubBranch: 'ชื่อสาขา',
      formDialogInputNameSubBranchEn: 'ชื่อสาขา (ภาษาอังกฤษ)',
      formDialogInputEmailSubBranch: 'อีเมลติดต่อสาขา',
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/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
--- a/src/stores/branch/types.ts
+++ b/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;