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
-        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>