feat: refs #5186 use global locales

src/components/LeftMenuItem.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+const { t, te } = useI18n();
 
 const props = defineProps({
     item: {
@@ -11,7 +11,13 @@ const props = defineProps({
     },
 });
 
-const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
+const item = computed(() => {
+    const item = JSON.parse(JSON.stringify(props.item));
+    const [, , section] = item.title.split('.');
+
+    if (!te(item.title)) item.title = t(`globals.pageTitles.${section}`);
+    return item;
+}); // eslint-disable-line vue/no-dupe-keys
 </script>
 <template>
     <QItem active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>

src/components/common/VnBreadcrumbs.vue

@@ -5,16 +5,16 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useCamelCase } from 'src/composables/useCamelCase';
 
-const router = useRouter();
+const { currentRoute } = useRouter();
-const quasar = useQuasar();
+const { screen } = useQuasar();
-const { t } = useI18n();
+const { t, te } = useI18n();
 
 let matched = ref([]);
 let breadcrumbs = ref([]);
 let root = ref(null);
 
 watchEffect(() => {
-    matched.value = router.currentRoute.value.matched.filter(
+    matched.value = currentRoute.value.matched.filter(
         (matched) => Object.keys(matched.meta).length
     );
     breadcrumbs.value.length = 0;
@@ -36,11 +36,15 @@ function getBreadcrumb(param) {
         root: root.value,
     };
 
-    if (quasar.screen.gt.sm) {
+    if (screen.gt.sm) {
         breadcrumb.name = param.name;
         breadcrumb.title = useCamelCase(param.meta.title);
     }
 
+    breadcrumb.locale = te(`${breadcrumb.root}.pageTitles.${breadcrumb.title}`)
+        ? t(`${breadcrumb.root}.pageTitles.${breadcrumb.title}`)
+        : t(`globals.pageTitles.${breadcrumb.title}`);
+
     return breadcrumb;
 }
 </script>
@@ -50,7 +54,7 @@ function getBreadcrumb(param) {
             v-for="(breadcrumb, index) of breadcrumbs"
             :key="index"
             :icon="breadcrumb.icon"
-            :label="t(`${breadcrumb.root}.pageTitles.${breadcrumb.title}`)"
+            :label="breadcrumb.locale"
             :to="breadcrumb.path"
         />
     </QBreadcrumbs>

src/i18n/en/index.js

@@ -83,6 +83,12 @@ export default {
         selectFile: 'Select a file',
         copyClipboard: 'Copy on clipboard',
         salesPerson: 'SalesPerson',
+        code: 'Code',
+        pageTitles: {
+            summary: 'Summary',
+            basicData: 'Basic data',
+            log: 'Logs',
+        },
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -685,34 +691,18 @@ export default {
         },
     },
     parking: {
+        pickingOrder: 'Picking order',
+        sector: 'Sector',
+        row: 'Row',
+        column: 'Column',
         pageTitles: {
             parking: 'Parking',
             parkingList: 'Parkings list',
-            summary: 'Summary',
-            basicData: 'Basic data',
-            log: 'Logs',
-        },
-        list: {
-            pickingOrder: 'Picking order',
         },
         searchBar: {
             info: 'You can search by parking code',
             label: 'Search parking...',
         },
-        summary: {
-            code: 'Code',
-            pickingOrder: 'Picking order',
-            sector: 'Sector',
-            row: 'Row',
-            column: 'Column',
-        },
-        basicData: {
-            code: 'Code',
-            pickingOrder: 'Picking order',
-            sector: 'Sector',
-            row: 'Row',
-            column: 'Column',
-        },
     },
     invoiceIn: {
         pageTitles: {

src/i18n/es/index.js

@@ -83,6 +83,12 @@ export default {
         selectFile: 'Seleccione un fichero',
         copyClipboard: 'Copiar en portapapeles',
         salesPerson: 'Comercial',
+        code: 'Código',
+        pageTitles: {
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            log: 'Historial',
+        },
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -743,32 +749,17 @@ export default {
         },
     },
     parking: {
+        pickingOrder: 'Orden de recogida',
+        row: 'Fila',
+        column: 'Columna',
         pageTitles: {
             parking: 'Parking',
             parkingList: 'Listado de parkings',
-            summary: 'Resumen',
-            basicData: 'Datos básicos',
-            log: 'Registros de auditoría',
-        },
-        list: {
-            pickingOrder: 'Orden de recogida',
         },
         searchBar: {
             info: 'Puedes buscar por código de parking',
             label: 'Buscar parking...',
         },
-        summary: {
-            code: 'Código',
-            pickingOrder: 'Orden de recogida',
-            row: 'Fila',
-            column: 'Columna',
-        },
-        basicData: {
-            code: 'Código',
-            pickingOrder: 'Orden de recogida',
-            row: 'Fila',
-            column: 'Columna',
-        },
     },
     invoiceIn: {
         pageTitles: {

src/pages/Parking/Card/ParkingBasicData.vue

@@ -32,22 +32,19 @@ const filter = {
     <FormModel :url="`Parkings/${parkingId}`" model="parking" :filter="filter" auto-load>
         <template #form="{ data }">
             <VnRow>
-                <VnInput v-model="data.code" :label="t('parking.basicData.code')" />
+                <VnInput v-model="data.code" :label="t('globals.code')" />
-                <VnInput
+                <VnInput v-model="data.pickingOrder" :label="t('parking.pickingOrder')" />
-                    v-model="data.pickingOrder"
-                    :label="t('parking.basicData.pickingOrder')"
-                />
             </VnRow>
             <VnRow>
-                <VnInput v-model="data.row" :label="t('parking.basicData.row')" />
+                <VnInput v-model="data.row" :label="t('parking.row')" />
-                <VnInput v-model="data.column" :label="t('parking.basicData.column')" />
+                <VnInput v-model="data.column" :label="t('parking.column')" />
             </VnRow>
             <VnRow>
                 <VnSelectFilter
                     v-model="data.sectorFk"
                     option-value="id"
                     option-label="description"
-                    :label="t('parking.basicData.sector')"
+                    :label="t('parking.sector')"
                     :options="sectors"
                     use-input
                     input-debounce="0"

src/pages/Parking/Card/ParkingDescriptor.vue

@@ -38,15 +38,9 @@ const setHeader = (entity) => (header.value = useCardDescription(entity.code, en
         @on-fetch="setHeader"
     >
         <template #body="{ entity: parking }">
-            <VnLv :label="t('parking.summary.code')" :value="parking.code" />
+            <VnLv :label="t('globals.code')" :value="parking.code" />
-            <VnLv
+            <VnLv :label="t('parking.pickingOrder')" :value="parking.pickingOrder" />
-                :label="t('parking.summary.pickingOrder')"
+            <VnLv :label="t('parking.sector')" :value="parking.sector?.description" />
-                :value="parking.pickingOrder"
-            />
-            <VnLv
-                :label="t('parking.summary.sector')"
-                :value="parking.sector?.description"
-            />
         </template>
     </CardDescriptor>
 </template>

src/pages/Parking/Card/ParkingSummary.vue

@@ -33,21 +33,21 @@ const filter = {
                             class="header header-link"
                             :href="`#/parking/${entityId}/basic-data`"
                         >
-                            {{ t('parking.pageTitles.basicData') }}
+                            {{ t('globals.pageTitles.basicData') }}
                             <QIcon name="open_in_new" />
                         </a>
                     </QCardSection>
-                    <VnLv :label="t('parking.summary.code')" :value="parking.code" />
+                    <VnLv :label="t('globals.code')" :value="parking.code" />
                     <VnLv
-                        :label="t('parking.summary.pickingOrder')"
+                        :label="t('parking.pickingOrder')"
                         :value="parking.pickingOrder"
                     />
                     <VnLv
-                        :label="t('parking.summary.sector')"
+                        :label="t('parking.sector')"
                         :value="parking.sector?.description"
                     />
-                    <VnLv :label="t('parking.summary.row')" :value="parking.row" />
+                    <VnLv :label="t('parking.row')" :value="parking.row" />
-                    <VnLv :label="t('parking.summary.column')" :value="parking.column" />
+                    <VnLv :label="t('parking.column')" :value="parking.column" />
                 </QCard>
             </template>
         </CardSummary>

src/pages/Parking/ParkingList.vue

@@ -88,7 +88,7 @@ function exprBuilder(param, value) {
                         <template #list-items>
                             <VnLv label="Sector" :value="row.sector?.description" />
                             <VnLv
-                                :label="t('parking.list.pickingOrder')"
+                                :label="t('parking.pickingOrder')"
                                 :value="row.pickingOrder"
                             />
                         </template>