From 41ae0d04951c36d0bcc9be7cde2c3f77ccc2b95d Mon Sep 17 00:00:00 2001
From: danloa <danloa@gmail.com>
Date: Tue, 5 Nov 2024 09:02:58 -0400
Subject: [PATCH 1/2] Add translations for statuses and pagination table

---
 resources/js/components/shared/PaginationTable.vue | 13 +++++++++----
 resources/js/tasks/components/TasksList.vue        |  8 ++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/shared/PaginationTable.vue b/resources/js/components/shared/PaginationTable.vue
index b6142be153..db0c9a77b3 100644
--- a/resources/js/components/shared/PaginationTable.vue
+++ b/resources/js/components/shared/PaginationTable.vue
@@ -27,7 +27,7 @@
     >
 
     <span class="pagination-total">
-      of {{ totalPageCount }}
+      {{ totalPageCountLabel }}
     </span>
 
     <b-button
@@ -125,14 +125,19 @@ export default {
     totalPageCount() {
       return this.meta.total_pages;
     },
+    totalPageCountLabel() {
+      return `${this.$t("of")} ${this.meta.total_pages}`;
+    },
     totalItems() {
       if (this.meta.total === 1) {
-        return `${this.meta.total} item`;
+        //return `${this.meta.total} ${this.$t("item")}`;
+        return this.$t('{{count}} Item', { count: this.meta.total });
       }
-      return `${this.meta.total} items`;
+      return this.$t('{{count}} Items', { count: this.meta.total });
+      //return `${this.meta.total} ${this.$t("items")}`;
     },
     perPageButton() {
-      return `${this.meta.per_page} per Page`;
+      return `${this.meta.per_page} ${this.$t("Per page")}`;
     },
     pageInputPlaceholder() {
       return `${this.currentPage}`;
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index b40f963c3e..c837b02bf1 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -684,19 +684,19 @@ export default {
     },
     formatStatus(props) {
       let color = "success";
-      let label = "In Progress";
+      let label = this.$t("In Progress");
 
       if (props.status === "ACTIVE") {
         if (props.is_self_service) {
           color = "danger";
-          label = "Self Service";
+          label = this.$t("Self Service");
         } else if (props.advanceStatus === "overdue") {
           color = "danger";
-          label = "Overdue";
+          label = this.$t("Overdue");
         }
       } else if (props.status === "CLOSED") {
         color = "primary";
-        label = "Completed";
+        label = this.$t("Completed");
       }
 
       return `

From dfc536820579707eef556d8523af91d774a204f4 Mon Sep 17 00:00:00 2001
From: danloa <danloa@gmail.com>
Date: Wed, 6 Nov 2024 15:10:04 -0400
Subject: [PATCH 2/2] Translate statuses and table footer for cases list

---
 .../js/components/shared/PaginationTable.vue   |  2 --
 .../jscomposition/system/table/Pagination.vue  | 18 ++++++++++++------
 .../system/table/cell/StatusCell.vue           | 13 +++++++------
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/shared/PaginationTable.vue b/resources/js/components/shared/PaginationTable.vue
index db0c9a77b3..4938ceba08 100644
--- a/resources/js/components/shared/PaginationTable.vue
+++ b/resources/js/components/shared/PaginationTable.vue
@@ -130,11 +130,9 @@ export default {
     },
     totalItems() {
       if (this.meta.total === 1) {
-        //return `${this.meta.total} ${this.$t("item")}`;
         return this.$t('{{count}} Item', { count: this.meta.total });
       }
       return this.$t('{{count}} Items', { count: this.meta.total });
-      //return `${this.meta.total} ${this.$t("items")}`;
     },
     perPageButton() {
       return `${this.meta.per_page} ${this.$t("Per page")}`;
diff --git a/resources/jscomposition/system/table/Pagination.vue b/resources/jscomposition/system/table/Pagination.vue
index 57e5256059..e7b49e23a7 100644
--- a/resources/jscomposition/system/table/Pagination.vue
+++ b/resources/jscomposition/system/table/Pagination.vue
@@ -102,7 +102,7 @@
     </svg>
 
     <div class="tw-px-2">
-      <span>{{ `${totalModel} items` }} </span>
+      <span>{{ totalModelLabel }} </span>
     </div>
 
     <div>
@@ -116,7 +116,7 @@
             class="tw-flex tw-full tw-items-center tw-space-x-2"
             @click.prevent.stop="toogleShow()">
             <span>
-              {{ `${selectedOption.value} ${$t("per page")}` }}
+              {{ `${selectedOption.value} ${$t("Per page")}` }}
             </span>
             <i
               class=" hover:tw-bg-gray-100 tw-rounded-md hover:tw-cursor-pointer tw-p-1 fas fa-chevron-down" />
@@ -152,20 +152,26 @@ const props = defineProps({
 
 const emit = defineEmits(["perPage", "go"]);
 
-const totalModel = computed(() => props.total);
+const totalModelLabel = computed(() => {
+  if (props.total === 0) {
+    return `${t("{{count}} Item", { count: props.total })}`;
+  }
+  return `${t("{{count}} Items", { count: props.total })}`;
+});
+
 const pageModel = ref(props.page);
 const optionsPerPage = [
   {
     value: 15,
-    label: `15 ${t("items")}`,
+    label: `${t("15 items")}`,
   },
   {
     value: 30,
-    label: `30 ${t("items")}`,
+    label: `${t("30 items")}`,
   },
   {
     value: 50,
-    label: `50 ${t("items")}`,
+    label: `${t("50 items")}`,
   },
 ];
 
diff --git a/resources/jscomposition/system/table/cell/StatusCell.vue b/resources/jscomposition/system/table/cell/StatusCell.vue
index 9556db9a3a..adb4a66aa9 100644
--- a/resources/jscomposition/system/table/cell/StatusCell.vue
+++ b/resources/jscomposition/system/table/cell/StatusCell.vue
@@ -9,31 +9,32 @@
 </template>
 <script>
 import { defineComponent, computed } from "vue";
+import { t } from "i18next";
 
 export const statuses = {
   DRAFT: {
     color: "red",
-    label: "Draft",
+    label: `${t("Draft")}`,
   },
   CANCELED: {
     color: "red",
-    label: "Canceled",
+    label: `${t("Canceled")}`,
   },
   COMPLETED: {
     color: "blue",
-    label: "Completed",
+    label: `${t("Completed")}`,
   },
   ERROR: {
     color: "red",
-    label: "Error",
+    label: `${t("Error")}`,
   },
   IN_PROGRESS: {
     color: "green",
-    label: "In progress",
+    label: `${t("In Progress")}`,
   },
   ACTIVE: {
     color: "green",
-    label: "In progress",
+    label: `${t("In Progress")}`,
   },
 };