From bae9e48afa920a46885060a93d69e9a3235530db Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 4 Apr 2024 11:28:52 +0700
Subject: [PATCH] feat: Main => i18n

---
 src/components/home/MenuItem.vue |  4 +--
 src/i18n/en-US/index.ts          |  2 ++
 src/i18n/en-US/main.ts           | 34 ++++++++++++++++++++
 src/i18n/th-th/index.ts          |  2 ++
 src/i18n/th-th/main.ts           | 34 ++++++++++++++++++++
 src/pages/MainPage.vue           | 53 ++++++++++++++++----------------
 6 files changed, 100 insertions(+), 29 deletions(-)
 create mode 100644 src/i18n/en-US/main.ts
 create mode 100644 src/i18n/th-th/main.ts

diff --git a/src/components/home/MenuItem.vue b/src/components/home/MenuItem.vue
index c32e7cea..deeb06b0 100644
--- a/src/components/home/MenuItem.vue
+++ b/src/components/home/MenuItem.vue
@@ -53,8 +53,8 @@ function navigateTo(destination: string) {
         />
       </AppCircle>
       <div class="column items-center q-mt-md text-center">
-        <span style="font-weight: var(--font-weight-8)">{{ v.title }}</span>
-        <span style="color: rgba(130 130 130 / 0.7)">{{ v.caption }}</span>
+        <span style="font-weight: var(--font-weight-8)">{{ $t(v.title) }}</span>
+        <span style="color: rgba(130 130 130 / 0.7)">{{ $t(v.caption) }}</span>
       </div>
     </AppBox>
   </div>
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index fe638aac..935bd0c7 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -2,6 +2,7 @@
 // so you can safely delete all default props below
 import drawerComponent from './drawer-component';
 import branchMainPage from './branch-main-page';
+import main from './main';
 
 export default {
   ok: 'Confirm',
@@ -13,4 +14,5 @@ export default {
   save: 'Save',
   ...drawerComponent,
   ...branchMainPage,
+  ...main,
 };
diff --git a/src/i18n/en-US/main.ts b/src/i18n/en-US/main.ts
new file mode 100644
index 00000000..1ca94e00
--- /dev/null
+++ b/src/i18n/en-US/main.ts
@@ -0,0 +1,34 @@
+export default {
+  mainBranchTitle: 'Branch Management',
+  mainBranchCaption: 'Manage branches within the organization.',
+
+  mainPersonnelTitle: 'Personnel Management',
+  mainPersonnelCaption: 'Manage personnel within the organization.',
+
+  mainCustomerTitle: 'Customer Management',
+  mainCustomerCaption: 'Manage customer within the organization.',
+
+  mainProductTitle: 'Products & Services',
+  mainProductCaption: 'List of products and services.',
+
+  mainQuotationTitle: 'Quotation',
+  mainQuotationCaption: 'List of quotations.',
+
+  mainRequestTitle: 'Purchase Order',
+  mainRequestCaption: 'List of purchase order.',
+
+  mainOrderTitle: 'Request',
+  mainOrderCaption: 'List of requests.',
+
+  mainReceiptTitle: 'Bill of Lading',
+  mainReceiptCaption: 'Bill of lading list.',
+
+  mainFinanceTitle: 'Financial Management',
+  mainFinanceCaption: 'List of all accounts.',
+
+  mainDashboardTitle: 'Dashboard',
+  mainDashboardCaption: 'Statistical information.',
+
+  mainReportTitle: 'Report',
+  mainReportCaption: 'List of report.',
+};
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index 5c01b76e..b5a3fbc0 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -1,5 +1,6 @@
 import drawerComponent from './drawer-component';
 import branchMainPage from './branch-main-page';
+import main from './main';
 
 export default {
   ok: 'ยืนยัน',
@@ -11,4 +12,5 @@ export default {
   save: 'บันทึก',
   ...drawerComponent,
   ...branchMainPage,
+  ...main,
 };
diff --git a/src/i18n/th-th/main.ts b/src/i18n/th-th/main.ts
new file mode 100644
index 00000000..2aa8851d
--- /dev/null
+++ b/src/i18n/th-th/main.ts
@@ -0,0 +1,34 @@
+export default {
+  mainBranchTitle: 'จัดการสาขา',
+  mainBranchCaption: 'จัดการสาขาภายในองค์กร',
+
+  mainPersonnelTitle: 'จัดการบุคลากร',
+  mainPersonnelCaption: 'จัดการคนภายในองค์กร',
+
+  mainCustomerTitle: 'จัดการลูกค้า',
+  mainCustomerCaption: 'จัดการคนภายในองค์กร',
+
+  mainProductTitle: 'สินค้าและบริการ',
+  mainProductCaption: 'รายการสินค้าและบริการ',
+
+  mainQuotationTitle: 'ใบเสนอราคา',
+  mainQuotationCaption: 'รายการใบเสนอราคา',
+
+  mainRequestTitle: 'รายการคำขอ',
+  mainRequestCaption: 'แสดงรายการคำขอ',
+
+  mainOrderTitle: 'ใบสั่งซื้อ',
+  mainOrderCaption: 'รายการใบสั่งซื้อ',
+
+  mainReceiptTitle: 'ใบรับสินค้า',
+  mainReceiptCaption: 'รายการใบรับสินค้า',
+
+  mainFinanceTitle: 'การจัดการการเงิน',
+  mainFinanceCaption: 'รายการบัญชีทั้งหมด',
+
+  mainDashboardTitle: 'Dashboard',
+  mainDashboardCaption: 'แสดงข้อมูลสถิติ',
+
+  mainReportTitle: 'รายงาน',
+  mainReportCaption: 'แสดงรายงาน',
+};
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 4f70ecbe..a6fbd9fe 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -1,101 +1,100 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import MenuItem from 'components/home/MenuItem.vue';
-import PersonCard from 'src/components/home/PersonCard.vue';
-import UsersDetailCardComponent from 'components/UsersDetailCardComponent.vue';
+
+const { t, locale } = useI18n();
 
 const menu = [
   {
     value: 'branch-management',
     icon: 'mdi-chart-donut',
     color: 'green',
-    title: 'จัดการสาขา',
-    caption: 'จัดการสาขาภายในองค์กร',
+    title: 'mainBranchTitle',
+    caption: 'mainBranchCaption',
   },
   {
     value: 'personnel-management',
     icon: 'isax-frame5',
     color: 'cyan',
-    title: 'จัดการบุคลากร',
-    caption: 'จัดการคนภายในองค์กร',
+    title: 'mainPersonnelTitle',
+    caption: 'mainPersonnelCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'isax-frame5',
     color: 'cyan',
-    title: 'จัดการลูกค้า',
-    caption: 'จัดการคนภายในองค์กร',
+    title: 'mainCustomerTitle',
+    caption: 'mainCustomerCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'heroicons-truck-solid',
     color: 'orange',
-    title: 'สินค้าและบริการ',
-    caption: 'รายการสินค้าและบริการ',
+    title: 'mainProductTitle',
+    caption: 'mainProductCaption',
   },
   {
     value: '',
     icon: 'mdi-file-document',
     color: 'violet',
-    title: 'ใบเสนอราคา',
-    caption: 'รายการใบเสนอราคา',
+    title: 'mainQuotationTitle',
+    caption: 'mainQuotationCaption',
   },
   {
     value: '',
     icon: 'isax-device-message5',
     color: 'purple',
-    title: 'รายการคำขอ',
-    caption: 'แสดงรายการคำขอ',
+    title: 'mainRequestTitle',
+    caption: 'mainRequestCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'isax-receipt-2-15',
     color: 'red',
-    title: 'ใบสั่งซื้อ',
-    caption: 'รายการใบสั่งซื้อ',
+    title: 'mainOrderTitle',
+    caption: 'mainOrderCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'material-symbols:box',
     color: 'camo',
-    title: 'ใบรับสินค้า',
-    caption: 'รายการใบรับสินค้า',
+    title: 'mainReceiptTitle',
+    caption: 'mainReceiptCaption',
   },
   {
     value: '',
     icon: 'isax-dollar-circle4',
     color: 'lime',
-    title: 'การจัดการการเงิน',
-    caption: 'รายการบัญชีทั้งหมด',
+    title: 'mainFinanceTitle',
+    caption: 'mainFinanceCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'isax-element-35',
     color: 'cyan',
-    title: 'Dashboard',
-    caption: 'แสดงข้อมูลสถิติ',
+    title: 'mainDashboardTitle',
+    caption: 'mainDashboardCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'mdi-file-document',
     color: 'indigo',
-    title: 'รายงาน',
-    caption: 'แสดงรายงาน',
+    title: 'mainReportTitle',
+    caption: 'mainReportCaption',
   },
 ] satisfies InstanceType<typeof MenuItem>['$props']['list'];
 </script>
 
 <template>
   <MenuItem :list="menu" />
-  <!-- <div class="row">
-    <users-detail-card-component class="q-pa-md" v-for="v in [1, 2]" :key="v" />
-  </div> -->
 </template>
 
 <style scoped>