FOUR-19984: Status and Pagination translation does not work

resources/js/components/shared/PaginationTable.vue

@@ -27,7 +27,7 @@
     >
 
     <span class="pagination-total">
-      of {{ totalPageCount }}
+      {{ totalPageCountLabel }}
     </span>
 
     <b-button
@@ -125,14 +125,17 @@ 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.$t('{{count}} Item', { count: this.meta.total });
       }
-      return `${this.meta.total} items`;
+      return this.$t('{{count}} Items', { count: this.meta.total });
     },
     perPageButton() {
-      return `${this.meta.per_page} per Page`;
+      return `${this.meta.per_page} ${this.$t("Per page")}`;
     },
     pageInputPlaceholder() {
       return `${this.currentPage}`;

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 `

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")}`,
   },
 ];
 

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")}`,
   },
 };