Filters changes and create card component

src/i18n/ca-ES/index.js

@@ -104,6 +104,7 @@ export default {
     password: 'Contrasenya',
     modify: 'Modificar',
     shoppingCart: 'Cistella de la compra',
+    available: 'Disponible',
     // Image related translations
     'Cant lock cache': 'No es pot bloquejar la memòria cau',
     'Bad file format': 'Format de fitxer no reconegut',

src/i18n/en-US/index.js

@@ -137,6 +137,7 @@ export default {
     password: 'Password',
     modify: 'Modify',
     shoppingCart: 'Shopping cart',
+    available: 'Available',
     // Image related translations
     'Cant lock cache': 'The cache could not be blocked',
     'Bad file format': 'Unrecognized file format',

src/i18n/es-ES/index.js

@@ -136,6 +136,7 @@ export default {
     of: 'de',
     modify: 'Modificar',
     shoppingCart: 'Cesta de la compra',
+    available: 'Disponible',
     // Image related translations
     'Cant lock cache': 'La caché no pudo ser bloqueada',
     'Bad file format': 'Formato de archivo no reconocido',

src/i18n/fr-FR/index.js

@@ -104,6 +104,7 @@ export default {
     password: 'Mot de passe',
     modify: 'Modifier',
     shoppingCart: 'Panier',
+    available: 'Disponible',
     // Image related translations
     'Cant lock cache': "Le cache n'a pas pu être verrouillé",
     'Bad file format': 'Format de fichier non reconnu',

src/i18n/pt-PT/index.js

@@ -102,6 +102,7 @@ export default {
     password: 'Senha',
     modify: 'Modificar',
     shoppingCart: 'Cesta da compra',
+    available: 'Disponível',
     // Image related translations
     'Cant lock cache': 'O cache não pôde ser bloqueado',
     'Bad file format': 'Formato de arquivo inválido',

src/pages/Ecomerce/CatalogCard.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnImg from 'src/components/ui/VnImg.vue';
+
+import { currency } from 'src/lib/filters.js';
+
+defineProps({
+    item: { type: Object, default: () => {} }
+});
+
+const { t } = useI18n();
+
+onMounted(async () => {});
+</script>
+
+<template>
+    <QCard v-ripple class="catalog-card">
+        <div style="height: 210px">
+            <VnImg
+                storage="catalog"
+                size="200x200"
+                :id="item.image"
+                width="80px"
+                height="80px"
+                rounded="bottom"
+                class="full-height full-width"
+            />
+        </div>
+        <div class="column" style="height: 205px; padding: 10px">
+            <div class="column" style="margin-bottom: auto">
+                <div class="text-subtitle2">
+                    {{ item.item }}
+                </div>
+                <div
+                    class="row justify-between sub-name text-uppercase text-subtitle1 text-grey-7"
+                >
+                    <span class="text-subtitle2">
+                        {{ item.subName }}
+                    </span>
+                    <span> #{{ item.id }}</span>
+                </div>
+                <div class="tags q-pt-xs text-caption">
+                    <div class="full-width row">
+                        <span class="text-grey-7 col">
+                            {{ item.tag5 }}
+                        </span>
+                        <span class="col">{{ item.value5 }}</span>
+                    </div>
+                    <div class="full-width row">
+                        <span class="text-grey-7 col">
+                            {{ item.tag6 }}
+                        </span>
+                        <span class="col">{{ item.value6 }}</span>
+                    </div>
+                    <div class="full-width row">
+                        <span class="text-grey-7 col">
+                            {{ item.tag7 }}
+                        </span>
+                        <span class="col">{{ item.value7 }}</span>
+                    </div>
+                    <div class="full-width row">
+                        <span class="text-grey-7 col">
+                            {{ item.tag8 }}
+                        </span>
+                        <span class="col">{{ item.value8 }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="row justify-between items-cente q-gutter-x-xs">
+                <QBadge
+                    :label="`x${item.grouping}`"
+                    color="grey"
+                    class="col-2 justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('minGrouping') }}
+                    </QTooltip>
+                </QBadge>
+                <QBadge
+                    outline
+                    :label="item.available"
+                    color="accent"
+                    text-color="black"
+                    class="col justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('available') }}
+                    </QTooltip>
+                </QBadge>
+                <QBadge
+                    outline
+                    :label="currency(item.price)"
+                    color="accent"
+                    text-color="black"
+                    class="col justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('groupingPrice') }}
+                    </QTooltip>
+                </QBadge>
+            </div>
+        </div>
+    </QCard>
+</template>
+
+<style lang="scss" scoped>
+.catalog-card {
+    display: flex;
+    flex-direction: column;
+    width: 210px;
+    overflow: hidden;
+    cursor: pointer;
+}
+</style>
+
+<i18n lang="yaml">
+en-US:
+    groupingPrice: Price per group
+es-ES:
+    groupingPrice: Precio por grupo
+ca-ES:
+    groupingPrice: Preu per grup
+fr-FR:
+    groupingPrice: Prix par groupe
+pt-PT:
+    groupingPrice: Preço por grupo
+</i18n>

src/pages/Ecomerce/CatalogView.vue

@@ -222,109 +222,19 @@
                     :thickness="2"
                 />
                 <div
-                    v-else-if="!items || !items.length || !type"
+                    v-else-if="!items || !items.length || !isSomeFilterSelected"
                     class="text-subtitle1 text-grey-7 q-pa-md"
                 >
                     <QIcon name="refresh" size="sm" class="q-mr-sm"></QIcon>
                     <span>{{ t('pleaseSetFilter') }}</span>
                 </div>
-
+                <CatalogCard
-                <QCard
                     v-else
                     v-for="_item in items"
                     :key="_item.id"
-                    v-ripple
+                    :item="_item"
-                    class="my-card"
                     @click="showItem(_item)"
-                >
+                />
-                    <div style="height: 210px">
-                        <VnImg
-                            storage="catalog"
-                            size="200x200"
-                            :id="_item.image"
-                            width="80px"
-                            height="80px"
-                            rounded="bottom"
-                            class="full-height full-width"
-                        />
-                    </div>
-                    <div class="column" style="height: 205px; padding: 10px">
-                        <div class="column" style="margin-bottom: auto">
-                            <div class="text-subtitle2">
-                                {{ _item.item }}
-                            </div>
-                            <div
-                                class="row justify-between sub-name text-uppercase text-subtitle1 text-grey-7"
-                            >
-                                <span class="text-subtitle2">
-                                    {{ _item.subName }}
-                                </span>
-                                <span> #{{ _item.id }}</span>
-                            </div>
-                            <div class="tags q-pt-xs text-caption">
-                                <div class="full-width row">
-                                    <span class="text-grey-7 col">
-                                        {{ _item.tag5 }}
-                                    </span>
-                                    <span class="col">{{ _item.value5 }}</span>
-                                </div>
-                                <div class="full-width row">
-                                    <span class="text-grey-7 col">
-                                        {{ _item.tag6 }}
-                                    </span>
-                                    <span class="col">{{ _item.value6 }}</span>
-                                </div>
-                                <div class="full-width row">
-                                    <span class="text-grey-7 col">
-                                        {{ _item.tag7 }}
-                                    </span>
-                                    <span class="col">{{ _item.value7 }}</span>
-                                </div>
-                                <div class="full-width row">
-                                    <span class="text-grey-7 col">
-                                        {{ _item.tag8 }}
-                                    </span>
-                                    <span class="col">{{ _item.value8 }}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div
-                            class="row justify-between items-cente q-gutter-x-xs"
-                        >
-                            <QBadge
-                                :label="`x${_item.grouping}`"
-                                color="grey"
-                                class="col-2 justify-end text-body2"
-                            >
-                                <QTooltip>
-                                    {{ t('minGrouping') }}
-                                </QTooltip>
-                            </QBadge>
-                            <QBadge
-                                outline
-                                :label="_item.available"
-                                color="accent"
-                                text-color="black"
-                                class="col justify-end text-body2"
-                            >
-                                <QTooltip>
-                                    {{ t('available') }}
-                                </QTooltip>
-                            </QBadge>
-                            <QBadge
-                                outline
-                                :label="currency(_item.price)"
-                                color="accent"
-                                text-color="black"
-                                class="col justify-end text-body2"
-                            >
-                                <QTooltip>
-                                    {{ t('groupingPrice') }}
-                                </QTooltip>
-                            </QBadge>
-                        </div>
-                    </div>
-                </QCard>
             </div>
         </QInfiniteScroll>
         <QDialog v-model="showItemDialog">
@@ -417,11 +327,12 @@
 
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { inject, onMounted, onBeforeMount, ref, computed } from 'vue';
+import { inject, onBeforeMount, ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import VnImg from 'src/components/ui/VnImg.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import CatalogCard from 'src/pages/Ecomerce/CatalogCard.vue';
 
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
@@ -511,7 +422,8 @@ const selectedCategory = computed({
     async set(value) {
         category.value = value;
         router.push({ params: { category: category.value, type: null } });
-        console.log('category', category.value);
+        onCategoryChange();
+        refreshTitle();
         if (!value) return;
         getFilters();
         getItems();
@@ -525,9 +437,10 @@ const selectedType = computed({
     set(value) {
         type.value = value;
         router.push({ params: { category: category.value, type: type.value } });
-        console.log('type', type.value);
+        if (!selectedCategory.value) return;
         getFilters();
         getItems();
+        refreshTitle();
     }
 });
 
@@ -537,6 +450,7 @@ const selectedColor = computed({
     },
     set(value) {
         color.value = value;
+        if (!selectedCategory.value) return;
         getFilters();
         getItems();
     }
@@ -548,7 +462,7 @@ const selectedProducer = computed({
     },
     set(value) {
         producer.value = value;
-        if (!value) return;
+        if (!value || !selectedCategory.value) return;
         getFilters();
         getItems();
     }
@@ -560,7 +474,7 @@ const selectedOrigin = computed({
     },
     set(value) {
         origin.value = value;
-        if (!value) return;
+        if (!value || !selectedCategory.value) return;
         getFilters();
         getItems();
     }
@@ -572,7 +486,7 @@ const selectedSubcategory = computed({
     },
     set(value) {
         subcategory.value = value;
-        if (!value) return;
+        if (!value && !selectedCategory.value) return;
         getFilters();
         getItems();
     }
@@ -593,20 +507,29 @@ const selectedOrderBy = computed({
 });
 
 const queryFilter = computed(() => {
-    let filter = '';
+    const filters = [];
+
+    // Filtro principal
     if (selectedCategory.value) {
-        filter = `(t.categoryFk = ${selectedCategory.value})`;
+        filters.push(`t.categoryFk = ${selectedCategory.value}`);
-    }
-    if (selectedType.value) {
-        if (filter) filter += ' AND ';
-        filter += `(i.typeFk = ${selectedType.value})`;
-    }
-    if (selectedColor.value) {
-        if (filter) filter += ' AND ';
-        filter += `(i.inkFk = '${selectedColor?.value}')`;
     }
 
-    return filter;
+    const otherFilters = {
+        'i.typeFk': selectedType.value,
+        'i.inkFk': selectedColor?.value ? `'${selectedColor.value}'` : null,
+        'i.producerFk': selectedProducer.value,
+        'i.originFk': selectedOrigin.value
+    };
+
+    // Añadir solo aquellos filtros que tengan valor
+    Object.entries(otherFilters).forEach(([key, value]) => {
+        if (value) {
+            filters.push(`${key} = ${value}`);
+        }
+    });
+
+    // Concatenar todos los filtros
+    return filters.join(' AND ');
 });
 
 const isSomeFilterSelected = computed(() => {
@@ -629,7 +552,6 @@ const getOrder = async () => {
             { orderId: basketOrderId.value }
         );
         order.value = data;
-        console.log('order', order.value);
     } catch (error) {
         console.error('Error getting order:', error);
     }
@@ -700,12 +622,7 @@ const getItemColors = async () => {
 const getItems = async () => {
     try {
         loading.value = true;
-        if (
+        if (!selectedCategory.value || !basketOrderId.value) return;
-            !selectedCategory.value ||
-            !basketOrderId.value ||
-            !selectedType.value
-        )
-            return;
 
         const res = await jApi.execQuery(
             `DROP TEMPORARY TABLE IF EXISTS tmp.item;
@@ -762,7 +679,6 @@ const getProducers = async () => {
             { orderId: basketOrderId.value }
         );
         itemProducers.value = res.results[1].data;
-        console.log('Producers:', itemProducers.value);
     } catch (error) {
         console.error('Error getting productors:', error);
     }
@@ -784,7 +700,6 @@ const getOrigins = async () => {
             { orderId: basketOrderId.value }
         );
         itemOrigins.value = res.results[1].data;
-        console.log('Producers:', itemOrigins.value);
     } catch (error) {
         console.error('Error getting productors:', error);
     }
@@ -834,6 +749,10 @@ const showItem = async item => {
 
 const removeCategory = () => {
     selectedCategory.value = null;
+    onCategoryChange();
+};
+
+const onCategoryChange = () => {
     selectedType.value = null;
     selectedColor.value = null;
     selectedProducer.value = null;
@@ -963,7 +882,34 @@ const onConfirmClick = async params => {
     }
 };
 
-// const refreshTitle = () => {};
+const refreshTitle = () => {
+    const { meta } = route;
+    let title = t(meta.title);
+    let subtitle;
+
+    if (selectedCategory.value) {
+        const _category = categories.value.find(
+            i => i.id === selectedCategory.value
+        );
+
+        if (_category) {
+            title = _category.name;
+
+            if (selectedType.value) {
+                const _type = itemFamilies.value.find(
+                    i => i.id === selectedType.value
+                );
+
+                if (_type) {
+                    subtitle = title;
+                    title = _type.name;
+                }
+            }
+        }
+    }
+
+    appStore.$patch({ title, subtitle });
+};
 
 onBeforeMount(async () => {
     if (!isGuest.value) {
@@ -975,13 +921,11 @@ onBeforeMount(async () => {
         // resultSet.fetchResult();
         // this.orderId = resultSet.fetchValue();
     }
-    getOrder();
+    await getOrder();
-    getCategories();
+    await getCategories();
-});
 
-onMounted(async () => {
+    if (route.params.category) selectedCategory.value = route.params.category;
-    selectedCategory.value = route.params.category;
+    if (route.params.type) selectedType.value = route.params.type;
-    selectedType.value = route.params.type;
 });
 </script>
 
@@ -1015,14 +959,6 @@ onMounted(async () => {
         }
     }
 }
-
-.my-card {
-    display: flex;
-    flex-direction: column;
-    width: 210px;
-    overflow: hidden;
-    cursor: pointer;
-}
 </style>
 
 <i18n lang="yaml">
@@ -1041,9 +977,7 @@ en-US:
     higherSize: Higher size
     lowerPrice: Lower price
     higherPrice: Higher price
-    available: Available
     minGrouping: Minimum packing
-    groupingPrice: Price per group
     add: Add
     added: Added
 es-ES:
@@ -1068,9 +1002,7 @@ es-ES:
     higherSize: Medida más grande
     lowerPrice: Precio más bajo
     higherPrice: Precio más alto
-    available: Disponible
     minGrouping: Cantidad mínima
-    groupingPrice: Precio por grupo
     add: Añadir
     added: Añadido
 ca-ES:
@@ -1088,9 +1020,7 @@ ca-ES:
     higherSize: Mida més gran
     lowerPrice: Preu més baix
     higherPrice: Preu més alt
-    available: Disponible
     minGrouping: Empaquetament mínim
-    groupingPrice: Preu per grup
     add: Afegir
 fr-FR:
     category: Catégorie
@@ -1107,9 +1037,7 @@ fr-FR:
     higherSize: Taille le plus élevé
     lowerPrice: Prix le plus bas
     higherPrice: Prix le plus élevé
-    available: Disponible
     minGrouping: Emballage minimum
-    groupingPrice: Prix par groupe
     add: Ajouter
 pt-PT:
     category: Categoria
@@ -1126,8 +1054,6 @@ pt-PT:
     higherSize: Tamanho maior
     lowerPrice: Preço mais baixo
     higherPrice: Preço mais alto
-    available: Disponível
     minGrouping: Embalagem mínima
-    groupingPrice: Preço por grupo
     add: Adicionar
 </i18n>