Merge pull request #295 from tonyaellie/improve-languages-support

feat: improve languages support
sysadminsmedia · Oct 25, 2024 · d39d109 · d39d109
2 parents 3eb5ece + 1d5b62f
commit d39d109
Show file tree

Hide file tree

Showing 18 changed files with 348 additions and 171 deletions.
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
@@ -8,12 +8,12 @@
         v-model="form.name"
         :trigger-focus="focused"
         :autofocus="true"
-        label="Item Name"
+        :label="$t('components.item.create_modal.item_name')"
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" label="Item Description" :max-length="1000" />
-      <FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
+      <FormTextArea v-model="form.description" :label="$t('components.item.create_modal.item_description')" :max-length="1000" />
+      <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
 
       <div class="modal-action mb-6">
         <div>

diff --git a/frontend/components/Item/View/Table.vue b/frontend/components/Item/View/Table.vue
@@ -18,7 +18,7 @@
               }"
             >
               <template v-if="typeof h === 'string'">{{ h }}</template>
-              <template v-else>{{ h.text }}</template>
+              <template v-else>{{ $t(h.text) }}</template>
               <div
                 v-if="sortByProperty === h.value"
                 :class="`inline-flex ${sortByProperty === h.value ? '' : 'opacity-0'}`"
@@ -109,11 +109,11 @@
               :checked="h.enabled"
               @change="toggleHeader(h.value)"
             />
-            <label class="label-text" :for="h.value"> {{ h.text }} </label>
+            <label class="label-text" :for="h.value"> {{ $t(h.text) }} </label>
           </li>
         </ul>
       </div>
-      <div class="hidden md:block">Rows per page</div>
+      <div class="hidden md:block">{{ $t("components.item.view.table.rows_per_page") }}</div>
       <select v-model.number="pagination.rowsPerPage" class="select select-primary select-sm">
         <option :value="10">10</option>
         <option :value="25">25</option>
@@ -122,7 +122,7 @@
       </select>
       <div class="btn-group">
         <button :disabled="!hasPrev" class="btn btn-sm" @click="prev()">«</button>
-        <button class="btn btn-sm">Page {{ pagination.page }}</button>
+        <button class="btn btn-sm">{{ $t("components.item.view.table.page") }} {{ pagination.page }}</button>
         <button :disabled="!hasNext" class="btn btn-sm" @click="next()">»</button>
       </div>
     </div>
@@ -149,20 +149,29 @@
   const preferences = useViewPreferences();
 
   const defaultHeaders = [
-    { text: "Name", value: "name", enabled: true, type: "name" },
-    { text: "Quantity", value: "quantity", align: "center", enabled: true },
-    { text: "Insured", value: "insured", align: "center", enabled: true, type: "boolean" },
-    { text: "Price", value: "purchasePrice", align: "center", enabled: true, type: "price" },
-    { text: "Location", value: "location", align: "center", enabled: false, type: "location" },
-    { text: "Archived", value: "archived", align: "center", enabled: false, type: "boolean" },
-    { text: "Created At", value: "createdAt", align: "center", enabled: false, type: "date" },
-    { text: "Updated At", value: "updatedAt", align: "center", enabled: false, type: "date" },
+    {
+      text: "items.name", value: "name", enabled: true, type: "name"
+    },
+    { text: "items.quantity", value: "quantity", align: "center", enabled: true },
+    { text: "items.insured", value: "insured", align: "center", enabled: true, type: "boolean" },
+    { text: "items.purchase_price", value: "purchasePrice", align: "center", enabled: true, type: "price" },
+    { text: "items.location", value: "location", align: "center", enabled: false, type: "location" },
+    { text: "items.archived", value: "archived", align: "center", enabled: false, type: "boolean" },
+    { text: "items.created_at", value: "createdAt", align: "center", enabled: false, type: "date" },
+    { text: "items.updated_at", value: "updatedAt", align: "center", enabled: false, type: "date" },
   ] satisfies TableHeader[];
 
   const headers = ref<TableHeader[]>(
     (preferences.value.tableHeaders ?? []).concat(
       defaultHeaders.filter(h => !preferences.value.tableHeaders?.find(h2 => h2.value === h.value))
     )
+    // this is a hack to make sure that any changes to the defaultHeaders are reflected in the preferences
+      .map(h => (
+        {
+          ...defaultHeaders.find(h2 => h2.value === h.value) as TableHeader,
+          enabled: h.enabled
+        }
+      ))
   );
 
   console.log(headers.value);

diff --git a/frontend/components/Label/CreateModal.vue b/frontend/components/Label/CreateModal.vue
@@ -7,11 +7,11 @@
         v-model="form.name"
         :trigger-focus="focused"
         :autofocus="true"
-        label="Label Name"
+        :label="$t('components.label.create_modal.label_name')"
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" label="Label Description" :max-length="255" />
+      <FormTextArea v-model="form.description" :label="$t('components.label.create_modal.label_description')" :max-length="255" />
       <div class="modal-action">
         <div class="flex justify-center">
           <BaseButton class="rounded-r-none" :loading="loading" type="submit"> {{ $t("global.create") }} </BaseButton>

diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
@@ -8,11 +8,11 @@
         :trigger-focus="focused"
         :autofocus="true"
         :required="true"
-        label="Location Name"
+        :label="$t('components.location.create_modal.location_name')"
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" label="Location Description" :max-length="1000" />
+      <FormTextArea v-model="form.description" :label="$t('components.location.create_modal.location_description')" :max-length="1000" />
       <LocationSelector v-model="form.parent" />
       <div class="modal-action">
         <div class="flex justify-center">

diff --git a/frontend/components/Location/Selector.vue b/frontend/components/Location/Selector.vue
@@ -1,5 +1,5 @@
 <template>
-  <FormAutocomplete2 v-if="locations" v-model="value" :items="locations" display="name" label="Parent Location">
+  <FormAutocomplete2 v-if="locations" v-model="value" :items="locations" display="name" :label="$t('components.location.selector.parent_location')">
     <template #display="{ item, selected, active }">
       <div>
         <div class="flex w-full">

diff --git a/frontend/components/global/DetailsSection/DetailsSection.vue b/frontend/components/global/DetailsSection/DetailsSection.vue
@@ -3,7 +3,7 @@
     <dl class="sm:divide-y sm:divide-gray-300">
       <div v-for="(detail, i) in details" :key="i" class="group py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
         <dt class="text-sm font-medium text-base-content">
-          {{ detail.name }}
+          {{ $t(detail.name) }}
         </dt>
         <dd class="text-start text-sm text-base-content sm:col-span-2">
           <slot :name="detail.slot || detail.name" v-bind="{ detail }">

diff --git a/frontend/composables/use-formatters.ts b/frontend/composables/use-formatters.ts
@@ -1,3 +1,6 @@
+import { useI18n } from "vue-i18n";
+import { type UseTimeAgoMessages, type UseTimeAgoUnitNamesDefault } from "@vueuse/core";
+
 const cache = {
   currency: "",
 };
@@ -37,7 +40,61 @@ function ordinalIndicator(num: number) {
   }
 }
 
-export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): string {
+export function useLocaleTimeAgo(date: Date) {
+  const { t } = useI18n();
+
+  const I18N_MESSAGES: UseTimeAgoMessages<UseTimeAgoUnitNamesDefault> = {
+    justNow: t("components.global.date_time.just-now"),
+    past: (n) => (n.match(/\d/) ? t("components.global.date_time.ago", [n]) : n),
+    future: (n) => (n.match(/\d/) ? t("components.global.date_time.in", [n]) : n),
+    month: (n, past) =>
+      n === 1
+        ? past
+          ? t("components.global.date_time.last-month")
+          : t("components.global.date_time.next-month")
+        : `${n} ${t(`components.global.date_time.months`)}`,
+    year: (n, past) =>
+      n === 1
+        ? past
+          ? t("components.global.date_time.last-year")
+          : t("components.global.date_time.next-year")
+        : `${n} ${t(`components.global.date_time.years`)}`,
+    day: (n, past) =>
+      n === 1
+        ? past
+          ? t("components.global.date_time.yesterday")
+          : t("components.global.date_time.tomorrow")
+        : `${n} ${t(`components.global.date_time.days`)}`,
+    week: (n, past) =>
+      n === 1
+        ? past
+          ? t("components.global.date_time.last-week")
+          : t("components.global.date_time.next-week")
+        : `${n} ${t(`components.global.date_time.weeks`)}`,
+    hour: (n) => `${n} ${
+      n === 1 ? t("components.global.date_time.hour") : t("components.global.date_time.hours")
+      }`,
+    minute: (n) => `${n} ${
+      n === 1 ? t("components.global.date_time.minute") : t("components.global.date_time.minutes")
+      }`,
+    second: (n) => `${n} ${
+      n === 1
+        ? t("components.global.date_time.second")
+        : t("components.global.date_time.seconds")
+    }`,
+    invalid: "",
+  };
+
+  return useTimeAgo(date, {
+    fullDateFormatter: (date: Date) => date.toLocaleDateString(),
+    messages: I18N_MESSAGES,
+  });
+}
+
+export function fmtDate(
+  value: string | Date,
+  fmt: DateTimeFormat = "human"
+): string {
   const months = [
     "January",
     "February",
@@ -64,7 +121,7 @@ export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): st
 
   switch (fmt) {
     case "relative":
-      return useTimeAgo(dt).value + useDateFormat(dt, " (YYYY-MM-DD)").value;
+      return useLocaleTimeAgo(dt).value + useDateFormat(dt, " (YYYY-MM-DD)").value;
     case "long":
       return useDateFormat(dt, "YYYY-MM-DD (dddd)").value;
     case "short":

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
@@ -62,9 +62,9 @@
                     {{ $t("global.create") }}
                   </label>
                   <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 w-full p-2 shadow">
-                    <li v-for="btn in dropdown" :key="btn.name">
+                    <li v-for="btn in dropdown" :key="btn.id">
                       <button @click="btn.action">
-                        {{ btn.name }}
+                        {{ btn.name.value }}
                       </button>
                     </li>
                   </ul>
@@ -81,7 +81,7 @@
                     }"
                   >
                     <component :is="n.icon" class="mr-4 size-6" />
-                    {{ n.name }}
+                    {{ n.name.value }}
                   </NuxtLink>
                 </li>
               </ul>
@@ -135,19 +135,22 @@
 
   const dropdown = [
     {
-      name: "Item / Asset",
+      id: 0,
+      name: computed(() => t("menu.create_item")),
       action: () => {
         modals.item = true;
       },
     },
     {
-      name: "Location",
+      id: 1,
+      name: computed(() => t("menu.create_location")),
       action: () => {
         modals.location = true;
       },
     },
     {
-      name: "Label",
+      id: 2,
+      name: computed(() => t("menu.create_label")),
       action: () => {
         modals.label = true;
       },
@@ -168,42 +171,42 @@
       icon: MdiHome,
       active: computed(() => route.path === "/home"),
       id: 0,
-      name: t("menu.home"),
+      name: computed(() => t("menu.home")),
       to: "/home",
     },
     {
       icon: MdiFileTree,
       id: 1,
       active: computed(() => route.path === "/locations"),
-      name: t("menu.locations"),
+      name: computed(() => t("menu.locations")),
       to: "/locations",
     },
     {
       icon: MdiMagnify,
       id: 2,
       active: computed(() => route.path === "/items"),
-      name: t("menu.search"),
+      name: computed(() => t("menu.search")),
       to: "/items",
     },
     {
       icon: MdiWrench,
       id: 3,
       active: computed(() => route.path === "/maintenance"),
-      name: t("menu.maintenance"),
+      name: computed(() => t("menu.maintenance")),
       to: "/maintenance",
     },
     {
       icon: MdiAccount,
       id: 4,
       active: computed(() => route.path === "/profile"),
-      name: t("menu.profile"),
+      name: computed(() => t("menu.profile")),
       to: "/profile",
     },
     {
       icon: MdiCog,
       id: 5,
       active: computed(() => route.path === "/tools"),
-      name: t("menu.tools"),
+      name: computed(() => t("menu.tools")),
       to: "/tools",
     },
   ];