Filters changes and create card component

2024-09-22 18:47:06 -03:00 · 2024-09-22 18:47:06 -03:00 · ff0d2db8fe
parent bbaa6d87ff
commit ff0d2db8fe
7 changed files with 205 additions and 145 deletions
--- a/src/i18n/ca-ES/index.js
+++ b/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',
--- a/src/i18n/en-US/index.js
+++ b/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',
--- a/src/i18n/es-ES/index.js
+++ b/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',
--- a/src/i18n/fr-FR/index.js
+++ b/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',
--- a/src/i18n/pt-PT/index.js
+++ b/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',
--- a/src/pages/Ecomerce/CatalogCard.vue
+++ b/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>
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@ -222,110 +222,20 @@
                    :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>
-
-                <QCard
+                <CatalogCard
                    v-else
                    v-for="_item in items"
                    :key="_item.id"
-                    v-ripple
-                    class="my-card"
+                    :item="_item"
                    @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">
            <QCard style="width: 25em" class="column">
@ -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})`;
-    }
-    if (selectedType.value) {
-        if (filter) filter += ' AND ';
-        filter += `(i.typeFk = ${selectedType.value})`;
-    }
-    if (selectedColor.value) {
-        if (filter) filter += ' AND ';
-        filter += `(i.inkFk = '${selectedColor?.value}')`;
+        filters.push(`t.categoryFk = ${selectedCategory.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 (
-            !selectedCategory.value ||
-            !basketOrderId.value ||
-            !selectedType.value
-        )
-            return;
+        if (!selectedCategory.value || !basketOrderId.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();
-    getCategories();
-});
+    await getOrder();
+    await getCategories();

-onMounted(async () => {
-    selectedCategory.value = route.params.category;
-    selectedType.value = route.params.type;
+    if (route.params.category) selectedCategory.value = route.params.category;
+    if (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>