feat(i18n): add translations managment

Author: guillaume-infernal

js/Components/HeaderCell.vue

@@ -5,6 +5,13 @@ export default {
       type: Object,
       required: true,
     },
+    translations: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+      required: true,
+    },
   },
 
   methods: {
@@ -15,4 +22,4 @@ export default {
     },
   },
 };
-</script>
+</script>

js/Components/Pagination.vue

@@ -9,6 +9,12 @@ const Pagination = {
 
   computed: {
     translations() {
+      if (
+        this.meta.hasOwnProperty("translations") &&
+        Object.keys(this.meta.translations).length > 0
+      ) {
+        return this.meta.translations;
+      }
       return Pagination.defaultTranslations;
     },
 

js/Components/Table.vue

@@ -25,6 +25,14 @@ export default {
       required: false,
     },
 
+    translations: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+      required: true,
+    },
+
     search: {
       type: Object,
       default: () => {
@@ -69,18 +77,23 @@ export default {
     },
 
     paginationMeta() {
+      let paginationMeta = Object.assign({}, this.meta, {
+        translations: this.translations,
+      });
       if (this.hasBody) {
-        return this.meta;
+        return paginationMeta;
       }
 
-      const hasPagination = 'meta' in this.meta || ('total' in this.meta && 'to' in this.meta && 'from' in this.meta);
+      const hasPagination =
+        "meta" in this.meta ||
+        ("total" in this.meta && "to" in this.meta && "from" in this.meta);
 
       if (hasPagination) {
-        return this.meta;
+        return paginationMeta;
       }
 
       return { meta: { total: 0 } };
-    }
+    },
   },
 
   data() {
@@ -141,4 +154,4 @@ export default {
     },
   },
 };
-</script>
+</script>

js/Components/TableAddSearchRow.vue

@@ -18,6 +18,13 @@ export default {
       type: Function,
       required: true,
     },
+    translations: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+      required: true,
+    },
   },
 
   computed: {

js/Components/TableColumns.vue

@@ -14,6 +14,13 @@ export default {
       type: Function,
       required: true,
     },
+    translations: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+      required: true,
+    },
   },
 
   methods: {

js/Components/TableFilter.vue

@@ -12,6 +12,13 @@ export default {
       type: Function,
       required: true,
     },
+    translations: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+      required: true,
+    },
   },
 
   computed: {

js/Components/TableGlobalSearch.vue

@@ -11,6 +11,13 @@ export default {
       type: Function,
       required: true,
     },
+    translations: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+      required: true,
+    },
   },
 };
 </script>

js/Components/TableSearchRows.vue

@@ -23,6 +23,13 @@ export default {
       type: Function,
       required: true,
     },
+    translations: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+      required: true,
+    },
   },
 
   methods: {

php/InertiaTable.php

@@ -16,6 +16,7 @@ class InertiaTable
     private Collection $search;
     private Collection $filters;
     private bool $globalSearch = true;
+    private array $translations;
 
     public function __construct(Request $request)
     {
@@ -25,6 +26,7 @@ public function __construct(Request $request)
         $this->sortables = [];
         $this->search  = new Collection;
         $this->filters = new Collection;
+        $this->translations = $this->getDefaultTranlsations();
     }
 
     /**
@@ -57,6 +59,7 @@ public function getQueryBuilderProps(): array
             'columns' => $columns->isNotEmpty() ? $columns->all() : (object) [],
             'search'  => $search->isNotEmpty() ? $search->all() : (object) [],
             'filters' => $filters->isNotEmpty() ? $filters->all() : (object) [],
+            'translations' => $this->translations,
         ];
     }
 
@@ -202,6 +205,19 @@ public function addColumns(array $columns = []): self
         return $this;
     }
 
+    /**
+     * Add and update translations array
+     *
+     * @param array $updatedTranslations
+     * @return self
+     */
+    public function updateTranslations(array $updatedTranslations = []): self
+    {
+        $this->translations = array_merge($this->translations, $updatedTranslations);
+
+        return $this;
+    }
+
     /**
      * Add a search row to the query builder.
      *
@@ -248,4 +264,22 @@ public function addFilter(string $key, string $label, array $options): self
 
         return $this;
     }
+
+    private function getDefaultTranlsations(): array
+    {
+        $translationsArray = __('pagination');
+
+        $translationsArray = array_merge($translationsArray, [
+            'filter' => "Filter",
+            "next" => "suivant",
+            "no_results_found" => "Aucun résultats",
+            "of" => "sur",
+            "previous" => "précédent",
+            "results" => "résultats",
+            "search_placeholder" => "Chercher",
+            "to" => "à",
+        ]);
+
+        return $translationsArray;
+    }
 }