Create date format util with translations

src/components/ui/TicketDetails.vue

@@ -29,7 +29,7 @@ const lineSubtotal = line =>
         <QCardSection class="no-padding q-mb-md">
             <div class="text-h6">#{{ ticket.id }}</div>
         </QCardSection>
-        <QCardSection class="no-padding q-mb-md">
+        <QCardSection class="no-padding q-mb-md q-gutter-y-xs">
             <div class="text-subtitle1 text-bold">
                 {{ t('shippingInformation') }}
             </div>
@@ -39,14 +39,14 @@ const lineSubtotal = line =>
             </div>
             <div>
                 {{ t('delivery') }}
-                {{ formatDateTitle(ticket.shipped) }}
+                {{ formatDateTitle(ticket.landed) }}
             </div>
             <div>
                 {{ t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse') }}
                 {{ ticket.agency }}
             </div>
         </QCardSection>
-        <QCardSection class="no-padding q-mb-md">
+        <QCardSection class="no-padding q-mb-md q-gutter-y-xs">
             <div class="text-subtitle1 text-bold">
                 {{ t('deliveryAddress') }}
             </div>

src/i18n/ca-ES/index.js

@@ -24,7 +24,7 @@ export default {
             'Novembre',
             'Desembre'
         ],
-        shortMonths: [
+        monthsShort: [
             'Gen',
             'Feb',
             'Mar',

src/i18n/en-US/index.js

@@ -37,7 +37,7 @@ export default {
             'November',
             'December'
         ],
-        shortMonths: [
+        monthsShort: [
             'Jan',
             'Feb',
             'Mar',

src/i18n/es-ES/index.js

@@ -46,7 +46,7 @@ export default {
             'Noviembre',
             'Diciembre'
         ],
-        shortMonths: [
+        monthsShort: [
             'Ene',
             'Feb',
             'Mar',

src/i18n/fr-FR/index.js

@@ -24,7 +24,7 @@ export default {
             'Novembre',
             'Décembre'
         ],
-        shortMonths: [
+        monthsShort: [
             'Jan',
             'Fév',
             'Mar',

src/i18n/pt-PT/index.js

@@ -24,7 +24,7 @@ export default {
             'Novembro',
             'Dezembro'
         ],
-        shortMonths: [
+        monthsShort: [
             'Jan',
             'Fev',
             'Mar',

src/lib/filters.js

@@ -14,16 +14,43 @@ export function date(val, format) {
     return qdate.formatDate(val, format, i18n.global.tm('date'));
 }
 
-export const formatDateTitle = timeStamp => {
+export const formatDate = (timeStamp, format = 'YYYY-MM-DD') => {
-    const { t, messages, locale } = i18n.global;
+    if (!timeStamp) return '';
-    const formattedString = qdate.formatDate(
+    const { messages, locale } = i18n.global;
-        timeStamp,
+
-        `dddd, D [${t('of')}] MMMM [${t('of')}] YYYY`,
+    return qdate.formatDate(timeStamp, format, {
-        {
+        days: messages.value[locale.value].date.days,
-            days: messages.value[locale.value].date.days,
+        months: messages.value[locale.value].date.months,
-            months: messages.value[locale.value].date.months
+        daysShort: messages.value[locale.value].date.daysShort,
-        }
+        monthsShort: messages.value[locale.value].date.monthsShort
-    );
+    });
+};
+
+/**
+ * @param {Date} timeStamp - La marca de tiempo que se va a formatear. Si no se proporciona, la función devolverá una cadena vacía.
+ * @param {Object} options - Un objeto que contiene las opciones de formato.
+ * @param {boolean} options.showTime - Indica si se debe mostrar la hora en el formato de la fecha.
+ * @param {boolean} options.showSeconds - Indica si se deben mostrar los segundos en el formato de la hora. Solo se aplica si showTime es true.
+ * @param {boolean} options.shortDay - Indica si se debe usar una versión corta del día (por ejemplo, "Mon" en lugar de "Monday").
+ * @returns {string} La fecha formateada como un título.
+ */
+export const formatDateTitle = (
+    timeStamp,
+    options = { showTime: false, showSeconds: false, shortDay: false }
+) => {
+    if (!timeStamp) return '';
+    const { t } = i18n.global;
+
+    const timeFormat = options.showTime
+        ? options.showSeconds
+            ? ` [${t('at')}] hh:mm:ss`
+            : ` [${t('at')}] hh:mm`
+        : '';
+    const day = options.shortDay ? 'dd' : 'dddd';
+
+    const formatString = `${day}, D [${t('of')}] MMMM [${t('of')}] YYYY${timeFormat}`;
+
+    const formattedString = formatDate(timeStamp, formatString);
     return formattedString;
 };
 

src/pages/Ecomerce/Catalog.vue

@@ -343,8 +343,7 @@
 </style>
 
 <script>
-import { date, currency } from 'src/lib/filters.js';
+import { date, currency, formatDate } from 'src/lib/filters.js';
-import { date as qdate } from 'quasar';
 import axios from 'axios';
 import { useAppStore } from 'stores/app';
 
@@ -360,7 +359,7 @@ export default {
         return {
             uid: 0,
             search: '',
-            orderDate: qdate.formatDate(new Date(), 'YYYY/MM/DD'),
+            orderDate: formatDate(new Date(), 'YYYY/MM/DD'),
             category: null,
             categories: [],
             type: null,

src/pages/Ecomerce/InvoicesView.vue

@@ -4,9 +4,9 @@ import { useI18n } from 'vue-i18n';
 
 import VnTable from 'src/components/ui/VnTable.vue';
 
-import { currency } from 'src/lib/filters.js';
+import { currency, formatDate } from 'src/lib/filters.js';
-import { date as qdate } from 'quasar';
 import { usePrintService } from 'src/composables/usePrintService';
+// import { date as qdate } from 'quasar';
 
 const { t } = useI18n();
 const jApi = inject('jApi');
@@ -23,7 +23,7 @@ const columns = computed(() => [
         label: t('issued'),
         field: 'issued',
         align: 'left',
-        format: val => qdate.formatDate(val, 'D MMM YYYY')
+        format: val => formatDate(val, 'D MMM YYYY')
     },
     {
         name: 'amount',