Improve translations

src/pages/Worker/Card/WorkerCalendarFilter.vue

@@ -94,22 +94,31 @@ const yearList = ref(generateYears());
         </QCardSection>
         <QCardSection class="column items-center" horizontal>
             <span>
-                {{ t('Used') }} {{ contractHolidays.holidaysEnjoyed || 0 }} {{ t('of') }}
+                {{
-                {{ contractHolidays.totalHolidays || 0 }}
+                    t('usedDays', {
-                {{ t('days') }}
+                        holidaysEnjoyed: contractHolidays.holidaysEnjoyed || 0,
+                        totalHolidays: contractHolidays.totalHolidays || 0,
+                    })
+                }}
             </span>
         </QCardSection>
         <QCardSection class="column items-center" horizontal>
             <span>
-                {{ t('Spent') }} {{ contractHolidays.hoursEnjoyed || 0 }} {{ t('of') }}
+                {{
-                {{ contractHolidays.totalHours || 0 }} {{ t('hours') }}
+                    t('spentHours', {
+                        hoursEnjoyed: contractHolidays.hoursEnjoyed || 0,
+                        totalHours: contractHolidays.totalHours || 0,
+                    })
+                }}
             </span>
         </QCardSection>
         <QCardSection class="column items-center" horizontal>
             <span>
-                {{ t('Paid holidays') }}
+                {{
-                {{ contractHolidays.payedHolidays || 0 }}
+                    t('paidHolidays', {
-                {{ t('days') }}
+                        payedHolidays: contractHolidays.payedHolidays || 0,
+                    })
+                }}
             </span>
         </QCardSection>
     </div>
@@ -125,15 +134,21 @@ const yearList = ref(generateYears());
         </QCardSection>
         <QCardSection class="column items-center" horizontal>
             <span>
-                {{ t('Used') }} {{ yearHolidays.holidaysEnjoyed || 0 }} {{ t('of') }}
+                {{
-                {{ yearHolidays.totalHolidays || 0 }} {{ t('days') }}
+                    t('usedDays', {
+                        holidaysEnjoyed: yearHolidays.holidaysEnjoyed || 0,
+                        totalHolidays: yearHolidays.totalHolidays || 0,
+                    })
+                }}
             </span>
         </QCardSection>
         <QCardSection class="column items-center" horizontal>
-            <span>
+            {{
-                {{ t('Spent') }} {{ yearHolidays.hoursEnjoyed || 0 }} {{ t('of') }}
+                t('spentHours', {
-                {{ yearHolidays.totalHours || 0 }} {{ t('hours') }}
+                    hoursEnjoyed: yearHolidays.hoursEnjoyed || 0,
-            </span>
+                    totalHours: yearHolidays.totalHours || 0,
+                })
+            }}
         </QCardSection>
     </div>
     <QList dense class="list q-gutter-y-sm q-my-lg">
@@ -219,15 +234,20 @@ const yearList = ref(generateYears());
 </style>
 
 <i18n>
+en:
+    spentHours: Spent {hoursEnjoyed} of {totalHours} hours
+    usedDays: Used {holidaysEnjoyed} of {totalHolidays} days
+    paidHolidays: Paid holidays {payedHolidays} days
+
+
 es:
-    Used: Utilizados
-    Spent: Utilizadas
     Paid holidays: Vacaciones pagadas
-    of: de
-    days: días
-    hours: horas
     Year: Año
     Contract: Contrato
     Festive: Festivo
     Current day: Día actual
+    spentHours: Utilizadas {hoursEnjoyed} de {totalHours} horas
+    usedDays: Utilizados {holidaysEnjoyed} de {totalHolidays} días
+    paidHolidays: Vacaciones pagadas {payedHolidays} días
+
 </i18n>