From 17a519e2ee8e53806b9ce4a55446a1e0d7754675 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sun, 18 Aug 2024 20:10:57 -0300
Subject: [PATCH] Small changes

---
 src/components/common/VnForm.vue    |  8 ++++++--
 src/components/ui/VnImg.vue         | 21 ++++++++++++++++++++-
 src/components/ui/VnSearchBar.vue   |  4 ++--
 src/i18n/ca-ES/index.js             |  3 ++-
 src/i18n/en-US/index.js             |  1 +
 src/i18n/es-ES/index.js             |  1 +
 src/i18n/fr-FR/index.js             |  3 ++-
 src/i18n/pt-PT/index.js             |  3 ++-
 src/lib/filters.js                  | 29 ++++++++++++++++++++---------
 src/pages/Admin/ConnectionsView.vue | 17 +++++++++++++++--
 src/pages/Admin/LinksView.vue       |  4 ++--
 src/pages/Admin/NewsDetails.vue     | 11 +++++++----
 src/pages/Admin/NewsView.vue        | 12 ++++++++----
 src/pages/Admin/VisitsView.vue      | 16 ++++++++++++----
 14 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/src/components/common/VnForm.vue b/src/components/common/VnForm.vue
index fd34e8ac..71f36fd3 100644
--- a/src/components/common/VnForm.vue
+++ b/src/components/common/VnForm.vue
@@ -227,7 +227,9 @@ defineExpose({
                     no-caps
                     flat
                     v-close-popup
-                />
+                >
+                    <QTooltip>{{ t('cancel') }}</QTooltip>
+                </QBtn>
                 <QBtn
                     v-if="defaultActions"
                     :label="t('save')"
@@ -237,7 +239,9 @@ defineExpose({
                     flat
                     :disabled="!showBottomActions && !updatedColumns.length"
                     @click="submit()"
-                />
+                >
+                    <QTooltip>{{ t('save') }}</QTooltip>
+                </QBtn>
                 <slot name="actions" :data="formData" />
             </component>
         </QForm>
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index af078d6a..8bc1abee 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -4,6 +4,8 @@ import { useAppStore } from 'stores/app';
 
 import ImageEditor from 'src/components/ui/ImageEditor.vue';
 
+import { useI18n } from 'vue-i18n';
+
 const props = defineProps({
     baseURL: {
         type: String,
@@ -60,6 +62,8 @@ const props = defineProps({
     }
 });
 
+const { t } = useI18n();
+
 const app = useAppStore();
 const showZoom = ref(false);
 const showEditForm = ref(false);
@@ -77,7 +81,9 @@ const url = computed(() => {
             round
             text-color="black"
             @click.stop.prevent="showEditForm = !showEditForm"
-        />
+        >
+            <QTooltip>{{ t('addOrEditImage') }}</QTooltip>
+        </QBtn>
         <QImg
             :class="{
                 zoomIn: props.zoomSize,
@@ -160,3 +166,16 @@ const url = computed(() => {
     border-radius: 0%;
 }
 </style>
+
+<i18n lang="yaml">
+en-US:
+    addOrEditImage: Add or update an image
+es-ES:
+    addOrEditImage: Añadir o actualizar imagen
+ca-ES:
+    addOrEditImage: Afegir o actualitzar Imatge
+fr-FR:
+    addOrEditImage: Ajouter our mettre à jour l'image
+pt-PT:
+    addOrEditImage: Adicionar ou atualizar imagem
+</i18n>
diff --git a/src/components/ui/VnSearchBar.vue b/src/components/ui/VnSearchBar.vue
index 3c31465d..0d65a5f1 100644
--- a/src/components/ui/VnSearchBar.vue
+++ b/src/components/ui/VnSearchBar.vue
@@ -68,10 +68,10 @@ onMounted(() => {
         @keyup.enter="search()"
         :placeholder="props.placeholder || t('search')"
         bg-color="white"
-        isOutlined
+        is-outlined
         :clearable="false"
     >
-        <template #append>
+        <template #prepend>
             <QIcon name="search" class="cursor-pointer" @click="search()" />
         </template>
     </VnInput>
diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index 74106bfe..daa71789 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -62,5 +62,6 @@ export default {
     //
     orderLoadedIntoBasket: 'Comanda carregada a la cistella!',
     at: 'a les',
-    back: 'Tornar'
+    back: 'Tornar',
+    remove: 'Esborrar'
 };
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 5eb5753c..45c4b4d8 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -76,6 +76,7 @@ export default {
     orderLoadedIntoBasket: 'Order loaded into basket!',
     at: 'at',
     back: 'Back',
+    remove: 'Remove',
 
     orders: 'Orders',
     order: 'Pending order',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index 71a9223d..98af2234 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -82,6 +82,7 @@ export default {
     orderLoadedIntoBasket: '¡Pedido cargado en la cesta!',
     at: 'a las',
     back: 'Volver',
+    remove: 'Borrar',
 
     orders: 'Pedidos',
     order: 'Pedido pendiente',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index 2edf2e48..1ca353b8 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -62,5 +62,6 @@ export default {
     //
     orderLoadedIntoBasket: 'Commande chargée dans le panier!',
     at: 'à',
-    back: 'Retour'
+    back: 'Retour',
+    remove: 'Effacer'
 };
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index a9199cb5..ef31036b 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -63,5 +63,6 @@ export default {
     //
     orderLoadedIntoBasket: 'Pedido carregado na cesta!',
     at: 'às',
-    back: 'Voltar'
+    back: 'Voltar',
+    remove: 'Eliminar'
 };
diff --git a/src/lib/filters.js b/src/lib/filters.js
index fcdd5b21..cc979fec 100644
--- a/src/lib/filters.js
+++ b/src/lib/filters.js
@@ -14,6 +14,18 @@ export function date(val, format) {
     return qdate.formatDate(val, format, i18n.global.tm('date'));
 }
 
+export const formatDate = (timeStamp, format = 'YYYY-MM-DD') => {
+    if (!timeStamp) return '';
+    const { messages, locale } = i18n.global;
+
+    return qdate.formatDate(timeStamp, format, {
+        days: messages.value[locale.value].date.days,
+        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.
@@ -22,24 +34,23 @@ export function date(val, format) {
  * @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 formatStringDate = (timeStamp, options) => {
+export const formatDateTitle = (
+    timeStamp,
+    options = { showTime: false, showSeconds: false, shortDay: false }
+) => {
     if (!timeStamp) return '';
-
-    const { t, messages, locale } = i18n.global;
+    const { t } = i18n.global;
 
     const timeFormat = options.showTime
         ? options.showSeconds
-            ? ` [${t('at')}] hh:mm:ss`
-            : ` [${t('at')}] hh:mm`
+            ? ` [${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 = qdate.formatDate(timeStamp, formatString, {
-        days: messages.value[locale.value].date.days,
-        months: messages.value[locale.value].date.months
-    });
+    const formattedString = formatDate(timeStamp, formatString);
     return formattedString;
 };
 
diff --git a/src/pages/Admin/ConnectionsView.vue b/src/pages/Admin/ConnectionsView.vue
index bad50ad7..befdfeb5 100644
--- a/src/pages/Admin/ConnectionsView.vue
+++ b/src/pages/Admin/ConnectionsView.vue
@@ -69,7 +69,11 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
                 rounded
                 no-caps
                 class="q-mr-sm"
-            />
+            >
+                <QTooltip>
+                    {{ t('refresh') }}
+                </QTooltip>
+            </QBtn>
             <QBadge class="q-pa-sm" v-if="connections.length" color="blue">
                 {{ connections?.length }} {{ t('connections') }}
             </QBadge>
@@ -121,7 +125,11 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
                         flat
                         rounded
                         @click="supplantUser(connection.user)"
-                    />
+                    >
+                        <QTooltip>
+                            {{ t('supplantUser') }}
+                        </QTooltip>
+                    </QBtn>
                 </template>
             </CardList>
         </QList>
@@ -132,16 +140,21 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
 en-US:
     refresh: Refresh
     connections: Connections
+    supplantUser: Supplant user
 es-ES:
     refresh: Actualizar
     connections: Conexiones
+    supplantUser: Suplantar usuario
 ca-ES:
     refresh: Actualitzar
     connections: Connexions
+    supplantUser: Suplantar usuari
 fr-FR:
     refresh: Rafraîchir
     connections: Connexions
+    supplantUser: Supplanter l'utilisateur
 pt-PT:
     refresh: Atualizar
     connections: Conexões
+    supplantUser: Suplantar usuário
 </i18n>
diff --git a/src/pages/Admin/LinksView.vue b/src/pages/Admin/LinksView.vue
index 3e884b58..60cb0bc5 100644
--- a/src/pages/Admin/LinksView.vue
+++ b/src/pages/Admin/LinksView.vue
@@ -21,13 +21,13 @@ onMounted(async () => getLinks());
 
 <template>
     <QPage>
-        <QList class="flex justify-center">
+        <QList class="flex justify-center q-gutter-md">
             <QItem
                 v-for="(link, index) in links"
                 :key="index"
                 :href="link.link"
                 target="_blank"
-                class="flex"
+                class="flex no-padding"
             >
                 <QCard class="card-container">
                     <QImg
diff --git a/src/pages/Admin/NewsDetails.vue b/src/pages/Admin/NewsDetails.vue
index b569ecf6..b024bd46 100644
--- a/src/pages/Admin/NewsDetails.vue
+++ b/src/pages/Admin/NewsDetails.vue
@@ -69,7 +69,9 @@ onMounted(async () => {
                 rounded
                 no-caps
                 @click="goBack()"
-            />
+            >
+                <QTooltip>{{ t('back') }}</QTooltip>
+            </QBtn>
         </Teleport>
         <VnForm
             ref="vnFormRef"
@@ -88,15 +90,16 @@ onMounted(async () => {
         >
             <template #form="{ data }">
                 <VnImg
-                    storage="catalog"
+                    :id="data.image"
+                    :edit-image-name="data.image"
+                    storage="news"
+                    edit-schema="news"
                     size="200x200"
                     width="80px"
                     height="80px"
                     class="full-width"
-                    :id="data.image"
                     rounded
                     editable
-                    edit-schema="catalog"
                     always-show-edit-button
                 />
                 <VnInput
diff --git a/src/pages/Admin/NewsView.vue b/src/pages/Admin/NewsView.vue
index 68f7351a..6bb812e6 100644
--- a/src/pages/Admin/NewsView.vue
+++ b/src/pages/Admin/NewsView.vue
@@ -61,7 +61,9 @@ onMounted(async () => getNews());
             :to="{ name: 'adminNewsDetails' }"
             rounded
             no-caps
-        />
+        >
+            <QTooltip>{{ t('addNew') }}</QTooltip>
+        </QBtn>
     </Teleport>
     <QPage class="vn-w-xs">
         <QList class="flex justify-center">
@@ -80,15 +82,15 @@ onMounted(async () => getNews());
                 <template #prepend>
                     <VnImg
                         :id="newsItem.image"
+                        :edit-image-name="newsItem.image"
                         storage="news"
-                        editSchema="news"
+                        edit-schema="news"
                         size="200x200"
                         width="80px"
                         height="80px"
                         class="q-mr-md"
                         rounded
                         editable
-                        :editImageName="newsItem.image"
                     />
                 </template>
                 <template #content>
@@ -108,7 +110,9 @@ onMounted(async () => getNews());
                                 () => deleteNew(newsItem.id, index)
                             )
                         "
-                    />
+                    >
+                        <QTooltip>{{ t('remove') }}</QTooltip>
+                    </QBtn>
                 </template>
             </CardList>
         </QList>
diff --git a/src/pages/Admin/VisitsView.vue b/src/pages/Admin/VisitsView.vue
index bbdb7814..79686a50 100644
--- a/src/pages/Admin/VisitsView.vue
+++ b/src/pages/Admin/VisitsView.vue
@@ -6,7 +6,7 @@ import { date as qdate } from 'quasar';
 
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 
-import { formatStringDate } from 'src/lib/filters.js';
+import { formatDateTitle } from 'src/lib/filters.js';
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
 
@@ -79,14 +79,22 @@ watch(
             rounded
             no-caps
             class="q-mr-sm"
-        />
+        >
+            <QTooltip>
+                {{ t('refresh') }}
+            </QTooltip>
+        </QBtn>
         <QBtn
             :label="t('connections')"
             icon="visibility"
             rounded
             no-caps
             :to="{ name: 'adminConnections' }"
-        />
+        >
+            <QTooltip>
+                {{ t('connections') }}
+            </QTooltip>
+        </QBtn>
     </Teleport>
     <QPage class="vn-w-xs column">
         <QCard class="column q-pa-lg q-mb-md">
@@ -112,7 +120,7 @@ watch(
             <span>{{ visitsCardText }}</span>
             <span v-if="visitsData">
                 {{
-                    formatStringDate(visitsData.lastVisit, {
+                    formatDateTitle(visitsData.lastVisit, {
                         showTime: true,
                         showSeconds: true,
                         shortDay: true