fix date formating with i18n

AbdelilahOu · Oct 28, 2023 · 6c82ac9 · 6c82ac9
1 parent 6756b75
commit 6c82ac9
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 63 deletions.
diff --git a/src/components/InventoryTable.vue b/src/components/InventoryTable.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import UiPagination from "./ui/UiPagination.vue";
-import { formatDate } from "@/utils/formatDate";
 import type { inventoryMvmT } from "@/types";
 import { RouterLink } from "vue-router";
 import UiIcon from "./ui/UiIcon.vue";
 
-const { t } = useI18n();
+const { t, d } = useI18n();
 
 defineProps<{
   inventory: inventoryMvmT[];
@@ -83,7 +82,9 @@ defineProps<{
             </div>
           </td>
           <td class="p-2">
-            <div class="text-left">{{ formatDate(mvm.date) }}</div>
+            <div class="text-left">
+              {{ d(new Date(mvm.date), "long") }}
+            </div>
           </td>
           <td class="p-2">
             <div class="flex justify-start gap-3 font-bold text-xl h-8 p-1">

diff --git a/src/components/InvoicesTable.vue b/src/components/InvoicesTable.vue
@@ -9,7 +9,7 @@ import { ref } from "vue";
 
 defineProps<{ invoices: invoiceT[] }>();
 
-const { t } = useI18n();
+const { t, d } = useI18n();
 
 const checkedInvoices = ref<string[]>([]);
 
@@ -123,7 +123,7 @@ const toggleThisInvoice = (Invoice: invoiceT, name: string) => {
                 >No date</span
               >
               <span v-else>
-                {{ Invoice.created_at }}
+                {{ d(new Date(Invoice.created_at), "long") }}
               </span>
             </div>
           </td>

diff --git a/src/components/OrdersTable.vue b/src/components/OrdersTable.vue
@@ -10,7 +10,7 @@ import { ref } from "vue";
 
 defineProps<{ orders: orderT[] }>();
 
-const { t } = useI18n();
+const { t, d } = useI18n();
 const checkedOrders = ref<string[]>([]);
 
 const checkThisOrders = (IsIncluded: boolean, id: string) => {
@@ -96,7 +96,7 @@ const toggleThisOrders = (Order: orderT, name: string) => {
             <div class="text-left whitespace-nowrap overflow-ellipsis">
               <span v-if="!order.created_at" class="text-red-400">No date</span>
               <span v-else>
-                {{ order.created_at }}
+                {{ d(new Date(order.created_at), "long") }}
               </span>
             </div>
           </td>

diff --git a/src/components/TranslationModal.vue b/src/components/TranslationModal.vue
@@ -33,7 +33,7 @@ const changeLocale = (locale: { key: string; text: string }) => {
             class="w-3/5 items-center h-full text-start flex justify-center gap-2"
           >
             <span class="py-2">
-              <UiIcon :isStyled="true" :name="item.key" />
+              <UiIcon :isStyled="true" :name="item.key.split('-')[0]" />
             </span>
             {{ item.text }}
           </span>

diff --git a/src/main.ts b/src/main.ts
@@ -11,6 +11,32 @@ import "./assets/main.css";
 
 const locale = localStorage.getItem("locale");
 
+const DEFAULT_DATE_TIME_FORMAT = {
+  short: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  },
+  monthOnly: {
+    month: "long",
+  },
+  long: {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    weekday: "short",
+    hour: "numeric",
+    minute: "numeric",
+  },
+};
+
+const datetimeFormats = {
+  "en-US": DEFAULT_DATE_TIME_FORMAT,
+  "fr-FR": DEFAULT_DATE_TIME_FORMAT,
+  "ar-AE": DEFAULT_DATE_TIME_FORMAT,
+  "de-DE": DEFAULT_DATE_TIME_FORMAT,
+};
+
 const initiVueApp = () => {
   // create app
   createApp(App)
@@ -55,11 +81,12 @@ const initiVueApp = () => {
       createI18n({
         legacy: false,
         globalInjection: false,
-        locale: locale ? JSON.parse(locale).key : "en",
-        fallbackLocale: "en",
-        availableLocales: ["en"],
-        // availableLocales: ["en", "fr", "ar", "de"],
+        locale: locale ? JSON.parse(locale).key : "en-US",
+        fallbackLocale: "en-US",
+        availableLocales: ["en-US", "fr-FR", "ar-AE", "de-DE"],
         messages: messages,
+        // @ts-ignore
+        datetimeFormats,
       })
     )
     .mount("#app");

diff --git a/src/store.ts b/src/store.ts
@@ -18,19 +18,19 @@ const DEFAULT_STORE = {
   currentLocale,
   availableLocals: [
     {
-      key: "fr",
-      text: "Francais",
+      key: "en-US",
+      text: "English",
     },
     {
-      key: "en",
-      text: "English",
+      key: "fr-FR",
+      text: "Francais",
     },
     {
-      key: "ar",
+      key: "ar-AE",
       text: "Arabic",
     },
     {
-      key: "de",
+      key: "de-DE",
       text: "German",
     },
   ],

diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts
@@ -1,12 +1,3 @@
-export const formatDate = (theDate: string): string =>
-  new Date(theDate).toLocaleDateString("en-us", {
-    day: "numeric",
-    month: "numeric",
-    year: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-
 export const getWeekDay = (i: number, locale = "en-us") =>
   new Date(2023, 4, i).toLocaleDateString(locale, {
     weekday: "short",

diff --git a/src/views/ClientDetails.vue b/src/views/ClientDetails.vue
@@ -14,7 +14,7 @@ import type { clientT } from "@/types";
 import UiCard from "@/components/ui/UiCard.vue";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+const { t, d } = useI18n();
 const { id } = useRoute().params;
 const client = ref<clientT | null>(null);
 
@@ -109,9 +109,7 @@ onBeforeMount(async () => {
 
   ProductsStats.data = productStats.data;
   ProductsStats.dates = productStats.dates.map((pDate) =>
-    new Date(pDate).toLocaleDateString("fr-fr", {
-      month: "long",
-    })
+    d(new Date(pDate), "monthOnly")
   );
   ProductsStats.products = productStats.products.map((product) => {
     const color = generateColor();

diff --git a/src/views/InvoiceDetails.vue b/src/views/InvoiceDetails.vue
@@ -6,7 +6,7 @@ import { useI18n } from "vue-i18n";
 import type { invoiceDetailsT } from "@/types";
 import { Button } from "@/components/ui/button";
 
-const { t } = useI18n();
+const { t, d } = useI18n();
 const id = useRoute().params.id;
 const invoice = ref<invoiceDetailsT | null>(null);
 
@@ -48,17 +48,7 @@ const print = () => window.print();
                 </td>
                 <td class="p-2">
                   <span class="h-full w-full grid">
-                    {{
-                      new Date(
-                        invoice?.created_at ?? new Date()
-                      ).toLocaleDateString("en-us", {
-                        month: "2-digit",
-                        year: "2-digit",
-                        day: "2-digit",
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })
-                    }}
+                    {{ d(new Date(invoice?.created_at ?? new Date()), "long") }}
                   </span>
                 </td>
               </tr>

diff --git a/src/views/OrderDetails.vue b/src/views/OrderDetails.vue
@@ -6,7 +6,7 @@ import { useI18n } from "vue-i18n";
 import type { orderDetailsT } from "@/types";
 import { Button } from "@/components/ui/button";
 
-const { t } = useI18n();
+const { t, d } = useI18n();
 
 const id = useRoute().params.id;
 const order = ref<orderDetailsT | null>(null);
@@ -49,17 +49,7 @@ const print = () => window.print();
                 </td>
                 <td class="p-2">
                   <span class="h-full w-full grid">
-                    {{
-                      new Date(
-                        order?.created_at ?? new Date()
-                      ).toLocaleDateString("en-us", {
-                        month: "2-digit",
-                        year: "2-digit",
-                        day: "2-digit",
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })
-                    }}
+                    {{ d(new Date(order?.created_at ?? new Date()), "long") }}
                   </span>
                 </td>
               </tr>

diff --git a/src/views/SellerDetails.vue b/src/views/SellerDetails.vue
@@ -14,7 +14,7 @@ import { useRoute } from "vue-router";
 import { store } from "@/store";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+const { t, d } = useI18n();
 const id = useRoute().params.id;
 const seller = ref<sellerT | null>(null);
 
@@ -103,9 +103,7 @@ onBeforeMount(async () => {
 
   ProductsStats.data = productStats.data;
   ProductsStats.dates = productStats.dates.map((pDate) =>
-    new Date(pDate).toLocaleDateString("fr-fr", {
-      month: "long",
-    })
+    d(new Date(pDate), "monthOnly")
   );
   ProductsStats.products = productStats.products.map((product) => {
     const color = generateColor();

diff --git a/src/views/StatsView.vue b/src/views/StatsView.vue
@@ -10,7 +10,7 @@ import { onBeforeMount, reactive } from "vue";
 import { invoke } from "@tauri-apps/api";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+const { t, d } = useI18n();
 
 const InsOuts = reactive({
   keys: [] as { [key: string]: any; data: number[] }[],
@@ -36,9 +36,7 @@ async function getInventoryMouvementStats() {
   const Rows: inOutReType = await invoke("get_inventory_stats");
   //
   for (const { group_month, total_in: IN, total_out: OUT } of Rows) {
-    const month = new Date(group_month).toLocaleDateString("en-us", {
-      month: "long",
-    });
+    const month = d(new Date(group_month), "monthOnly");
     months.add(month);
     results.set(month, { IN, OUT: Math.abs(OUT) });
   }