feat: เพิ่ม i18n

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

@@ -1,4 +1,11 @@
 export default {
+  formDialogTitleCreateHeadOffice: 'Add Headquarters',
+  formDialogTitleEditHeadOffice: 'Edit Headquarters',
+  formDialogTitleCreateSubBranch: ' Add Sub-branch',
+  formDialogTitleEditSubBranch: 'Edit Sub-branch',
+
+  formDialogTitleAddress: ' Head office address information',
+
   formDialogTitleLocation: 'Head Office Location',
   formDialogTitleInformation: 'Basic Information',
   formDialogTitleContact: 'Contact Information',

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

@@ -1,4 +1,12 @@
 export default {
+  formDialogTitleCreateHeadOffice: 'เพิ่มสำนักงานใหญ่',
+  formDialogTitleEditHeadOffice: 'แก้ไขสำนักงานใหญ่',
+
+  formDialogTitleCreateSubBranch: 'เพิ่มสาขา',
+  formDialogTitleEditSubBranch: 'แก้ไขสาขา',
+
+  formDialogTitleAddress: 'ข้อมูลที่อยู่สำนักงานใหญ่',
+
   formDialogTitleLocation: 'สถานที่ตั้งสำนักงานใหญ่',
   formDialogTitleInformation: 'ข้อมูลพื้นฐาน',
   formDialogTitleContact: 'ข้อมูลติดต่อ',

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

@@ -127,7 +127,7 @@ const defaultFormData = {
 };
 
 const formDialogRef = ref();
-const formType = ref<'create' | 'edit' | 'delete'>('create');
+const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
 const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
 const codeHq = ref<{ id: string; code: string }>({ id: '', code: '' });
 const formData = ref<Omit<BranchCreate, 'qrCodeImage'>>(
@@ -170,6 +170,20 @@ function clearData() {
   profileFile.value = undefined;
 }
 
+function triggerView(id: string, code?: string) {
+  fetchBranchById(id);
+  if (id && code) {
+    codeHq.value = {
+      id: id,
+      code: code,
+    };
+  }
+
+  formType.value = 'view';
+
+  openDialog();
+}
+
 function triggerCreate(type: string, id?: string, code?: string) {
   clearData();
 
@@ -268,14 +282,18 @@ async function onSubmit() {
 }
 
 function changeTitle(
-  formType: 'edit' | 'create' | 'delete',
+  formType: 'edit' | 'create' | 'delete' | 'view',
   typeBranch: 'headOffice' | 'subBranch',
 ) {
   if (typeBranch === 'headOffice') {
-    return formType === 'create' ? 'เพิ่มสำนักงานใหญ่' : 'แก้ไขสำนักงานใหญ่';
+    return formType === 'create'
+      ? t('formDialogTitleCreateHeadOffice')
+      : t('formDialogTitleEditHeadOffice');
   }
   if (typeBranch === 'subBranch') {
-    return formType === 'create' ? 'เพิ่มสาขา' : 'แก้ไขสาขา';
+    return formType === 'create'
+      ? t('formDialogTitleCreateSubBranch')
+      : t('formDialogTitleEditSubBranch');
   }
   return '';
 }
@@ -616,7 +634,7 @@ watch(locale, () => {
                 :data="item"
                 :field-selected="fieldSelected"
                 :inactive="item.status === 'INACTIVE'"
-                @view-detail="(b) => console.log(b)"
+                @view-detail="(b) => triggerView(b.id, b.branchLabelCode)"
               />
             </div>
           </div>
@@ -633,8 +651,8 @@ watch(locale, () => {
     v-model:province-id="formData.provinceId"
     v-model:district-id="formData.districtId"
     v-model:sub-district-id="formData.subDistrictId"
-    title="เพิ่มสำนักงานใหญ่"
-    :titleFormAddress="`ข้อมูลที่อยู่สำนักงานใหญ่`"
+    :title="changeTitle(formType, formTypeBranch)"
+    :titleFormAddress="$t('formDialogTitleAddress')"
     :addressSeparator="true"
     :submit="
       () => {
@@ -671,7 +689,7 @@ watch(locale, () => {
 
     <template #qr-code>
       <FormQr
-        title="Qr code"
+        title="QR Code"
         :separator="true"
         :qr="qrCodeimageUrl"
         @upload="