From bbaa6d87ff28cb5a98042f5ce19bec059e591133 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sun, 22 Sep 2024 17:50:24 -0300
Subject: [PATCH 01/12] WIP

---
 src/components/ui/VnImg.vue          |   37 +-
 src/i18n/ca-ES/index.js              |    1 +
 src/i18n/en-US/index.js              |    1 +
 src/i18n/es-ES/index.js              |    1 +
 src/i18n/fr-FR/index.js              |    1 +
 src/i18n/pt-PT/index.js              |    1 +
 src/pages/Admin/ItemsView.vue        |   10 +-
 src/pages/Ecomerce/Catalog.vue       |  706 ----------------
 src/pages/Ecomerce/CatalogView.vue   | 1133 ++++++++++++++++++++++++++
 src/pages/Ecomerce/OrdersView.vue    |    5 -
 src/pages/Ecomerce/TicketDetails.vue |    2 +-
 src/router/routes.js                 |    2 +-
 12 files changed, 1170 insertions(+), 730 deletions(-)
 delete mode 100644 src/pages/Ecomerce/Catalog.vue
 create mode 100644 src/pages/Ecomerce/CatalogView.vue

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 6a459020..fb468dc1 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -28,13 +28,9 @@ const props = defineProps({
         type: Number,
         required: true
     },
-    rounded: {
-        type: Boolean,
-        default: false
-    },
-    fullRounded: {
-        type: Boolean,
-        default: false
+    roundedBorders: {
+        type: String,
+        default: 'none'
     },
     width: {
         type: String,
@@ -70,6 +66,17 @@ const showEditForm = ref(false);
 const url = computed(() => {
     return `${props.baseURL ?? app.imageUrl}/${props.storage}/${props.size}/${props.id}`;
 });
+
+const rounded = computed(() => {
+    const roundedMap = {
+        none: '',
+        default: 'rounded',
+        full: 'full-rounded',
+        top: 'top-rounded',
+        bottom: 'bottom-rounded'
+    };
+    return roundedMap[props.roundedBorders];
+});
 </script>
 <template>
     <div class="relative-position main-image-container">
@@ -85,11 +92,7 @@ const url = computed(() => {
             <QTooltip>{{ t('addOrEditImage') }}</QTooltip>
         </QBtn>
         <QImg
-            :class="{
-                zoomIn: props.zoomSize,
-                rounded: props.rounded,
-                'full-rounded': props.fullRounded
-            }"
+            :class="[rounded, { zoomIn: props.zoomSize }]"
             class="main-image"
             :src="url"
             v-bind="$attrs"
@@ -161,9 +164,19 @@ const url = computed(() => {
 .rounded {
     border-radius: 0.6em;
 }
+
 .full-rounded {
     border-radius: 50px;
 }
+
+.rounded-bottom {
+    border-radius: 0.6em 0.6em 0 0;
+}
+
+.rounded-top {
+    border-radius: 0 0 0.6em 0.6em;
+}
+
 .img_zoom {
     border-radius: 0%;
 }
diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index 891d22d8..711a1cdf 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -103,6 +103,7 @@ export default {
     user: 'Usuari',
     password: 'Contrasenya',
     modify: 'Modificar',
+    shoppingCart: 'Cistella de la compra',
     // Image related translations
     'Cant lock cache': 'No es pot bloquejar la memòria cau',
     'Bad file format': 'Format de fitxer no reconegut',
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index f3d1e002..5e2e8019 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -136,6 +136,7 @@ export default {
     remindMe: 'Remember me',
     password: 'Password',
     modify: 'Modify',
+    shoppingCart: 'Shopping cart',
     // Image related translations
     'Cant lock cache': 'The cache could not be blocked',
     'Bad file format': 'Unrecognized file format',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index cafc2e7c..dc8ad61d 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -135,6 +135,7 @@ export default {
     cancel: 'Cancelar',
     of: 'de',
     modify: 'Modificar',
+    shoppingCart: 'Cesta de la compra',
     // Image related translations
     'Cant lock cache': 'La caché no pudo ser bloqueada',
     'Bad file format': 'Formato de archivo no reconocido',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index afa36798..b6d4c61b 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -103,6 +103,7 @@ export default {
     user: 'Utilisateur',
     password: 'Mot de passe',
     modify: 'Modifier',
+    shoppingCart: 'Panier',
     // Image related translations
     'Cant lock cache': "Le cache n'a pas pu être verrouillé",
     'Bad file format': 'Format de fichier non reconnu',
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index 43485c41..7f748303 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -101,6 +101,7 @@ export default {
     user: 'Utilizador',
     password: 'Senha',
     modify: 'Modificar',
+    shoppingCart: 'Cesta da compra',
     // Image related translations
     'Cant lock cache': 'O cache não pôde ser bloqueado',
     'Bad file format': 'Formato de arquivo inválido',
diff --git a/src/pages/Admin/ItemsView.vue b/src/pages/Admin/ItemsView.vue
index 7f83d4b9..bbcefc60 100644
--- a/src/pages/Admin/ItemsView.vue
+++ b/src/pages/Admin/ItemsView.vue
@@ -33,9 +33,9 @@ const onSearch = data => (items.value = data || []);
 <template>
     <Teleport v-if="isHeaderMounted" to="#actions">
         <VnSearchBar
-            :sqlQuery="query"
-            @onSearch="onSearch"
-            @onSearchError="items = []"
+            :sql-query="query"
+            @on-search="onSearch"
+            @on-search-error="items = []"
         />
     </Teleport>
     <QPage class="vn-w-xs">
@@ -66,8 +66,8 @@ const onSearch = data => (items.value = data || []);
                         class="q-mr-md"
                         rounded
                         editable
-                        editSchema="catalog"
-                        :editImageName="item.image"
+                        edit-schema="catalog"
+                        :edit-image-name="item.image"
                     />
                 </template>
                 <template #content>
diff --git a/src/pages/Ecomerce/Catalog.vue b/src/pages/Ecomerce/Catalog.vue
deleted file mode 100644
index 21ac278a..00000000
--- a/src/pages/Ecomerce/Catalog.vue
+++ /dev/null
@@ -1,706 +0,0 @@
-<template>
-    <Teleport v-if="isHeaderMounted" to="#actions">
-        <QInput
-            :placeholder="$t('search')"
-            v-model="search"
-            debounce="500"
-            class="search q-mr-sm"
-            rounded
-            dark
-            dense
-            standout
-        >
-            <template #prepend>
-                <QIcon v-if="search === ''" name="search" />
-                <QIcon
-                    v-else
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="search = ''"
-                />
-            </template>
-        </QInput>
-        <QBtn
-            :icon="$t(viewMode == 'list' ? 'view_list' : 'grid_on')"
-            :label="$t(viewMode == 'list' ? 'listView' : 'gridView')"
-            @click="onViewModeClick()"
-            rounded
-            no-caps
-        />
-    </Teleport>
-    <div style="padding-bottom: 5em">
-        <QDrawer v-model="$app.rightDrawerOpen" side="right" :width="250">
-            <div class="q-pa-md">
-                <div class="basket-info">
-                    <p>{{ date(new Date()) }}</p>
-                    <p>
-                        {{ $t('warehouse') }}
-                        {{ 'Algemesi' }}
-                    </p>
-                    <QBtn
-                        flat
-                        rounded
-                        no-caps
-                        :to="{
-                            name: 'checkout',
-                            params: { id: appStore.basketOrderId },
-                            query: { continue: 'catalog' }
-                        }"
-                    >
-                        {{ $t('modify') }}
-                    </QBtn>
-                </div>
-                <div class="q-mt-md">
-                    <div class="q-mb-xs text-grey-7">
-                        {{ $t('category') }}
-                        <QIcon
-                            v-if="category"
-                            style="font-size: 1.3em"
-                            name="cancel"
-                            class="cursor-pointer"
-                            :title="$t('deleteFilter')"
-                            @click="
-                                $router.push({ params: { category: null } })
-                            "
-                        />
-                    </div>
-                    <div class="categories">
-                        <QBtn
-                            flat
-                            round
-                            class="category q-pa-sm"
-                            v-for="cat in categories"
-                            :class="{ active: category == cat.id }"
-                            :key="cat.id"
-                            :title="cat.name"
-                            :to="{ params: { category: cat.id, type: null } }"
-                        >
-                            <img :src="`statics/category/${cat.code}.svg`" />
-                        </QBtn>
-                    </div>
-                </div>
-                <div class="q-mt-md" v-if="category || search">
-                    <div class="q-mb-xs text-grey-7">
-                        {{ $t('filterBy') }}
-                    </div>
-                    <QSelect
-                        v-model="type"
-                        option-value="id"
-                        option-label="name"
-                        :options="types"
-                        :disable="!category"
-                        clearable
-                        :label="$t('family')"
-                        @filter="filterType"
-                        @input="
-                            $router.push({ params: { type: type && type.id } })
-                        "
-                    />
-                    <QSelect
-                        v-model="order"
-                        input-debounce="0"
-                        :options="orderOptions"
-                        :label="$t('orderBy')"
-                    />
-                </div>
-            </div>
-            <div class="q-pa-md" v-if="typeId || search">
-                <div class="q-mb-md" v-for="tag in tags" :key="tag.uid">
-                    <div class="q-mb-xs text-caption text-grey-7">
-                        {{ tag.name }}
-                        <QIcon
-                            v-if="tag.hasFilter"
-                            style="font-size: 1.3em"
-                            name="cancel"
-                            :title="$t('deleteFilter')"
-                            class="cursor-pointer"
-                            @click="onResetTagFilterClick(tag)"
-                        />
-                    </div>
-                    <div v-if="!tag.useRange">
-                        <div
-                            v-for="value in tag.values.slice(0, tag.showCount)"
-                            :key="value"
-                        >
-                            <QCheckbox
-                                v-model="tag.filter"
-                                :dense="true"
-                                :val="value"
-                                :label="value"
-                                @input="onCheck(tag)"
-                            />
-                        </div>
-                        <div v-if="tag.values.length > tag.showCount">
-                            <span
-                                class="cursor-pointer text-blue"
-                                @click="tag.showCount = Infinity"
-                            >
-                                <QIcon name="keyboard_arrow_down" />
-                                {{ $t('viewMore') }}
-                            </span>
-                        </div>
-                        <div v-if="tag.showCount == Infinity">
-                            <span
-                                class="cursor-pointer text-blue"
-                                @click="tag.showCount = tag.initialCount"
-                            >
-                                <QIcon name="keyboard_arrow_up" />
-                                {{ $t('viewLess') }}
-                            </span>
-                        </div>
-                    </div>
-                    <div class="q-mx-md">
-                        <QRange
-                            class="q-mt-lg"
-                            v-if="tag.useRange"
-                            v-model="tag.filter"
-                            :min="tag.min"
-                            :max="tag.max"
-                            :step="tag.step"
-                            :color="tag.hasFilter ? 'primary' : 'grey-6'"
-                            @input="onRangeChange(tag, true)"
-                            @change="onRangeChange(tag)"
-                            label-always
-                            markers
-                            snap
-                        />
-                    </div>
-                </div>
-            </div>
-        </QDrawer>
-        <QInfiniteScroll
-            @load="onLoad"
-            scroll-taget="html"
-            :offset="800"
-            :disable="disableScroll"
-        >
-            <div class="q-pa-md row justify-center q-gutter-md">
-                <QSpinner v-if="isLoading" color="primary" size="50px" />
-                <div
-                    v-if="items && !items.length"
-                    class="text-subtitle1 text-grey-7 q-pa-md"
-                >
-                    {{ $t('noItemsFound') }}
-                </div>
-                <div
-                    v-if="!items && !isLoading"
-                    class="text-subtitle1 text-grey-7 q-pa-md"
-                >
-                    {{ $t('pleaseSetFilter') }}
-                </div>
-                <QCard class="my-card" v-for="_item in items" :key="_item.id">
-                    <img
-                        :src="`${$imageBase}/catalog/200x200/${_item.image}`"
-                    />
-                    <QCardSection>
-                        <div class="name text-subtitle1">
-                            {{ _item.longName }}
-                        </div>
-                        <div
-                            class="sub-name text-uppercase text-subtitle1 text-grey-7 ellipsize q-pt-xs"
-                        >
-                            {{ _item.subName }}
-                        </div>
-                        <div class="tags q-pt-xs">
-                            <div v-for="tag in _item.tags" :key="tag.tagFk">
-                                <span class="text-grey-7">{{
-                                    tag.tag.name
-                                }}</span>
-                                {{ tag.value }}
-                            </div>
-                        </div>
-                    </QCardSection>
-                    <QCardActions class="actions justify-between">
-                        <div class="q-pl-sm">
-                            <span class="available bg-green text-white">{{
-                                _item.available
-                            }}</span>
-                            {{ $t('from') }}
-                            <span class="price">{{
-                                currency(_item.buy?.price3)
-                            }}</span>
-                        </div>
-                        <QBtn
-                            icon="add_shopping_cart"
-                            :title="$t('buy')"
-                            @click="showItem(_item)"
-                            flat
-                        />
-                    </QCardActions>
-                </QCard>
-            </div>
-            <template #loading>
-                <div class="row justify-center q-my-md">
-                    <QSpinner color="primary" name="dots" size="40px" />
-                </div>
-            </template>
-        </QInfiniteScroll>
-        <QDialog v-model="showItemDialog">
-            <QCard style="width: 25em">
-                <QImg
-                    :src="`${$imageBase}/catalog/200x200/${item.image}`"
-                    :ratio="5 / 3"
-                >
-                    <div class="absolute-bottom text-center q-pa-xs">
-                        <div class="text-subtitle1">
-                            {{ item.longName }}
-                        </div>
-                    </div>
-                </QImg>
-                <QCardSection>
-                    <div
-                        class="text-uppercase text-subtitle1 text-grey-7 ellipsize"
-                    >
-                        {{ item.subName }}
-                    </div>
-                    <div class="text-grey-7">#{{ item.id }}</div>
-                </QCardSection>
-                <QCardSection>
-                    <div v-for="tag in item.tags" :key="tag.tagFk">
-                        <span class="text-grey-7">{{ tag.tag.name }}</span>
-                        {{ tag.value }}
-                    </div>
-                </QCardSection>
-                <QCardActions align="right">
-                    <QBtn @click="showItemDialog = false" flat>
-                        {{ $t('cancel') }}
-                    </QBtn>
-                    <QBtn @click="showItemDialog = false" flat>
-                        {{ $t('accept') }}
-                    </QBtn>
-                </QCardActions>
-            </QCard>
-        </QDialog>
-        <QPageSticky>
-            <QBtn
-                fab
-                to="/ecomerce/basket"
-                icon="shopping_cart"
-                color="accent"
-                :title="$t('shoppingCart')"
-            />
-        </QPageSticky>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.search {
-    max-width: 250px;
-}
-.basket-info {
-    background-color: #8cc63f;
-    color: white;
-    padding: 17px 28px;
-    border-radius: 7px;
-    text-align: center;
-
-    & > p {
-        margin: 0;
-        padding: 0.4em 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-}
-.categories {
-    margin: 0 auto;
-    width: 220px;
-
-    .category {
-        width: 55px;
-
-        &.active {
-            background: rgba(0, 0, 0, 0.08);
-        }
-        & > img {
-            height: 40px;
-            width: 40px;
-        }
-    }
-}
-.tags {
-    max-height: 4.6em;
-    overflow: hidden;
-}
-.available {
-    padding: 0.15em;
-    border-radius: 0.2em;
-    font-size: 1.3em;
-}
-.price {
-    font-size: 1.3em;
-}
-.my-card {
-    width: 100%;
-    max-width: 17.5em;
-    height: 32.5em;
-    overflow: hidden;
-    .name,
-    .sub-name {
-        line-height: 1.3em;
-    }
-    .ellipsize {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .description {
-        height: 40px;
-        overflow: hidden;
-    }
-}
-</style>
-
-<script>
-import { date, currency, formatDate } from 'src/lib/filters.js';
-import axios from 'axios';
-import { useAppStore } from 'stores/app';
-import { storeToRefs } from 'pinia';
-
-const CancelToken = axios.CancelToken;
-
-export default {
-    name: 'HederaCatalog',
-    setup() {
-        const appStore = useAppStore();
-        const { isHeaderMounted } = storeToRefs(appStore);
-        return { isHeaderMounted, appStore };
-    },
-    data() {
-        return {
-            uid: 0,
-            search: '',
-            orderDate: formatDate(new Date(), 'YYYY/MM/DD'),
-            category: null,
-            categories: [],
-            type: null,
-            typeId: null,
-            types: [],
-            orgTypes: [],
-            item: {},
-            showItemDialog: false,
-            tags: [],
-            isLoading: false,
-            items: null,
-            limit: null,
-            pageSize: 30,
-            maxTags: 5,
-            disableScroll: true,
-            viewMode: 'list',
-            order: {
-                label: this.$t('relevancy'),
-                value: 'relevancy DESC, longName'
-            },
-            orderOptions: [
-                {
-                    label: this.$t('relevancy'),
-                    value: 'relevancy DESC, longName'
-                },
-                {
-                    label: this.$t('name'),
-                    value: 'longName'
-                },
-                {
-                    label: this.$t('siceAsc'),
-                    value: 'size ASC'
-                },
-                {
-                    label: this.$t('sizeDesc'),
-                    value: 'size DESC'
-                },
-                {
-                    label: this.$t('priceAsc'),
-                    value: 'price ASC'
-                },
-                {
-                    label: this.$t('priceDesc'),
-                    value: 'price DESC'
-                },
-                {
-                    label: this.$t('available'),
-                    value: 'available'
-                }
-            ]
-        };
-    },
-    created() {
-        this.$app.useRightDrawer = true;
-    },
-    async beforeMount() {
-        const isGuest = false; // TODO: Integrate isGuest logic
-        if (!isGuest) {
-            this.appStore.check('catalog');
-        }
-    },
-    async mounted() {
-        this.categories = await this.$jApi.query(
-            `SELECT c.id, l.name, c.color, c.code
-        FROM vn.itemCategory c
-          JOIN vn.itemCategoryL10n l ON l.id = c.id
-        WHERE c.display
-        ORDER BY display`
-        );
-        this.onRouteChange(this.$route);
-    },
-    beforeUnmount() {
-        this.clearTimeoutAndRequest();
-    },
-    beforeRouteUpdate(to, from, next) {
-        this.onRouteChange(to);
-        next();
-    },
-    watch: {
-        categories() {
-            this.refreshTitle();
-        },
-        orgTypes() {
-            this.refreshTitle();
-        },
-        order() {
-            this.loadItems();
-        },
-        date() {
-            this.loadItems();
-        },
-        async category(value) {
-            this.orgTypes = [];
-            if (!value) return;
-
-            const res = await this.$jApi.execQuery(
-                `CALL myOrder_getAvailable(${this.appStore.basketOrderId});
-        SELECT DISTINCT t.id, l.name
-          FROM vn.item i
-            JOIN vn.itemType t ON t.id = i.typeFk
-            JOIN tmp.itemAvailable a ON a.id = i.id
-            JOIN vn.itemTypeL10n l ON l.id = t.id
-          WHERE t.\`order\` >= 0
-            AND t.categoryFk = #category
-          ORDER BY t.\`order\`, l.name;
-        DROP TEMPORARY TABLE tmp.itemAvailable;`,
-                { category: value }
-            );
-            res.fetch();
-            this.orgTypes = res.fetchData();
-        },
-        search(value) {
-            const location = { params: this.$route.params };
-            if (value) location.query = { search: value };
-            this.$router.push(location);
-        }
-    },
-    methods: {
-        date,
-        currency,
-        onViewModeClick() {
-            this.viewMode = this.viewMode === 'list' ? 'grid' : 'list';
-        },
-        onRouteChange(route) {
-            let { category, type } = route.params;
-
-            category = parseInt(category) || null;
-            type = parseInt(type) || null;
-
-            this.category = category;
-            this.typeId = category ? type : null;
-            this.search = route.query.search || '';
-            this.tags = [];
-
-            this.refreshTitle();
-            this.loadItems();
-        },
-        refreshTitle() {
-            let title = this.$t(this.$router.currentRoute.value.name);
-            let subtitle;
-
-            if (this.category) {
-                const category =
-                    this.categories.find(i => i.id === this.category) || {};
-                title = category.name;
-            }
-
-            if (this.typeId) {
-                this.type = this.orgTypes.find(i => i.id === this.typeId);
-                subtitle = title;
-                title = this.type && this.type.name;
-            } else {
-                this.type = null;
-            }
-
-            this.$app.$patch({ title, subtitle });
-        },
-        clearTimeoutAndRequest() {
-            if (this.timeout) {
-                clearTimeout(this.timeout);
-                this.timeout = null;
-            }
-            if (this.source) {
-                this.source.cancel();
-                this.source = null;
-            }
-        },
-        loadItemsDelayed() {
-            this.clearTimeoutAndRequest();
-            this.timeout = setTimeout(() => this.loadItems(), 500);
-        },
-        loadItems() {
-            this.items = null;
-            this.isLoading = true;
-            this.limit = this.pageSize;
-            this.disableScroll = false;
-            this.isLoading = false;
-            // this.loadItemsBase().finally(() => (this.isLoading = false))
-        },
-        onLoad(index, done) {
-            if (this.isLoading) return done();
-            this.limit += this.pageSize;
-            done();
-            // this.loadItemsBase().finally(done)
-        },
-        loadItemsBase() {
-            this.clearTimeoutAndRequest();
-
-            if (!(this.category || this.typeId || this.search)) {
-                this.tags = [];
-                return Promise.resolve(true);
-            }
-
-            const tagFilter = [];
-
-            for (const tag of this.tags) {
-                if (tag.hasFilter) {
-                    tagFilter.push({
-                        tagFk: tag.id,
-                        values: tag.filter
-                    });
-                }
-            }
-
-            this.source = CancelToken.source();
-
-            const params = {
-                dated: this.orderDate,
-                typeFk: this.typeId,
-                categoryFk: this.category,
-                search: this.search,
-                order: this.order.value,
-                limit: this.limit,
-                tagFilter
-            };
-            const config = {
-                params,
-                cancelToken: this.source.token
-            };
-            return this.$axios
-                .get('Items/catalog', config)
-                .then(res => this.onItemsGet(res))
-                .catch(err => this.onItemsError(err))
-                .finally(() => (this.cancel = null));
-        },
-        onItemsError(err) {
-            if (err.__CANCEL__) return;
-            this.disableScroll = true;
-            throw err;
-        },
-        onItemsGet(res) {
-            for (const tag of res.data.tags) {
-                tag.uid = this.uid++;
-
-                if (tag.filter) {
-                    tag.hasFilter = true;
-                    tag.useRange = tag.filter.max || tag.filter.min;
-                } else {
-                    tag.useRange =
-                        tag.isQuantitative && tag.values.length > this.maxTags;
-                    this.resetTagFilter(tag);
-                }
-
-                if (tag.values) {
-                    tag.initialCount = this.maxTags;
-                    if (Array.isArray(tag.filter)) {
-                        tag.initialCount = Math.max(
-                            tag.initialCount,
-                            tag.filter.length
-                        );
-                    }
-                    tag.showCount = tag.initialCount;
-                }
-            }
-
-            this.items = res.data.items;
-            this.tags = res.data.tags;
-            this.disableScroll = this.items.length < this.limit;
-        },
-        onRangeChange(tag, delay) {
-            tag.hasFilter = true;
-
-            if (!delay) this.loadItems();
-            else this.loadItemsDelayed();
-        },
-        onCheck(tag) {
-            tag.hasFilter = tag.filter.length > 0;
-            this.loadItems();
-        },
-        resetTagFilter(tag) {
-            tag.hasFilter = false;
-
-            if (tag.useRange) {
-                tag.filter = {
-                    min: tag.min,
-                    max: tag.max
-                };
-            } else {
-                tag.filter = [];
-            }
-        },
-        onResetTagFilterClick(tag) {
-            this.resetTagFilter(tag);
-            this.loadItems();
-        },
-        filterType(val, update) {
-            if (val === '') {
-                update(() => {
-                    this.types = this.orgTypes;
-                });
-            } else {
-                update(() => {
-                    const needle = val.toLowerCase();
-                    this.types = this.orgTypes.filter(
-                        type => type.name.toLowerCase().indexOf(needle) > -1
-                    );
-                });
-            }
-        },
-        showItem(item) {
-            this.item = item;
-            this.showItemDialog = true;
-
-            const conf = this.$state.catalogConfig;
-            const params = {
-                dated: this.orderDate,
-                addressFk: conf.addressFk,
-                agencyModeFk: conf.agencyModeFk
-            };
-            this.$axios
-                .get(`Items/${item.id}/calcCatalog`, { params })
-                .then(res => (this.lots = res.data));
-        }
-    }
-};
-</script>
-
-<i18n lang="yaml">
-es-ES:
-    gridView: Vista de rejilla
-    listView: Vista de lista
-    shoppingCart: Cesta de la compra
-    warehouse: Almacén
-    agency: Agencia
-    modify: Modificar
-    category: Categoría
-    deleteFilter: Quitar filtro
-    filterBy: Filtrar por
-    family: Familia
-    orderBy: Ordernar por
-    pleaseSetFilter: Elige un filtro en el menú de la derecha
-    search: Buscar
-</i18n>
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
new file mode 100644
index 00000000..a84f4330
--- /dev/null
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -0,0 +1,1133 @@
+<template>
+    <Teleport v-if="isHeaderMounted" to="#actions">
+        <!-- <QInput
+            :placeholder="$t('search')"
+            v-model="search"
+            debounce="500"
+            class="search q-mr-sm"
+            rounded
+            dark
+            dense
+            standout
+        >
+            <template #prepend>
+                <QIcon v-if="search === ''" name="search" />
+                <QIcon
+                    v-else
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="search = ''"
+                />
+            </template>
+        </QInput> -->
+        <!-- <QBtn
+            :icon="$t(viewMode == 'list' ? 'view_list' : 'grid_on')"
+            :label="$t(viewMode == 'list' ? 'listView' : 'gridView')"
+            @click="onViewModeClick()"
+            rounded
+            no-caps
+        /> -->
+        <QBtn
+            icon="shopping_cart_checkout"
+            :label="t('shoppingCart')"
+            :to="{ name: 'basket' }"
+            rounded
+            no-caps
+        />
+    </Teleport>
+    <div style="padding-bottom: 5em">
+        <QDrawer v-model="rightDrawerOpen" side="right" :width="250">
+            <div class="q-pa-md">
+                <div class="basket-info q-gutter-y-sm">
+                    <span v-if="order?.nickname">{{ order.nickname }}</span>
+                    <span v-if="order?.sent">
+                        {{
+                            formatDateTitle(order.sent, {
+                                shortDay: true,
+                                shortMonth: true,
+                                includeOfString: true
+                            })
+                        }}
+                    </span>
+                    <QBtn
+                        rounded
+                        no-caps
+                        :to="{
+                            name: 'checkout',
+                            params: { id: appStore.basketOrderId },
+                            query: { continue: 'catalog' }
+                        }"
+                    >
+                        {{ t('modify') }}
+                    </QBtn>
+                </div>
+                <div class="q-mt-md">
+                    <div class="q-mb-xs text-grey-7">
+                        {{ t('category') }}
+                        <QIcon
+                            v-if="category"
+                            style="font-size: 1.3em"
+                            name="cancel"
+                            class="cursor-pointer"
+                            :title="t('deleteFilter')"
+                            @click="removeCategory()"
+                        />
+                    </div>
+                    <div class="categories">
+                        <QBtn
+                            flat
+                            round
+                            class="category q-pa-sm"
+                            v-for="cat in categories"
+                            :class="{ active: category == cat.id }"
+                            :key="cat.id"
+                            :title="cat.name"
+                            @click="selectedCategory = cat.id"
+                        >
+                            <img :src="`statics/category/${cat.code}.svg`" />
+                        </QBtn>
+                    </div>
+                </div>
+                <div class="q-mt-md" v-if="category || search">
+                    <div class="q-mb-xs text-grey-7">
+                        {{ t('filterBy') }}
+                    </div>
+                    <VnSelect
+                        v-model="selectedType"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemFamilies"
+                        :disable="!category"
+                        :label="t('family')"
+                    />
+                    <VnSelect
+                        v-model="selectedColor"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemColors"
+                        :disable="!category"
+                        :label="t('color')"
+                    />
+                    <VnSelect
+                        v-model="selectedProducer"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemProducers"
+                        :disable="!category"
+                        :label="t('producer')"
+                    />
+                    <VnSelect
+                        v-model="selectedOrigin"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemOrigins"
+                        :disable="!category"
+                        :label="t('origin')"
+                    />
+                    <VnSelect
+                        v-model="selectedSubcategory"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemSubcategories"
+                        :disable="!category"
+                        :label="t('category')"
+                    />
+                    <VnSelect
+                        v-if="isSomeFilterSelected"
+                        v-model="selectedOrderBy"
+                        :options="orderByOptions"
+                        option-value="value"
+                        option-label="label"
+                        :is-clearable="false"
+                        :label="t('orderBy')"
+                    />
+                </div>
+                <span
+                    v-else
+                    class="flex full-width justify-center q-pt-lg text-h6 text-grey-7"
+                >
+                    Elige una categoria
+                </span>
+            </div>
+            <!-- <div class="q-pa-md" v-if="typeId || search">
+                <div class="q-mb-md" v-for="tag in tags" :key="tag.uid">
+                    <div class="q-mb-xs text-caption text-grey-7">
+                        {{ tag.name }}
+                        <QIcon
+                            v-if="tag.hasFilter"
+                            style="font-size: 1.3em"
+                            name="cancel"
+                            :title="$t('deleteFilter')"
+                            class="cursor-pointer"
+                            @click="onResetTagFilterClick(tag)"
+                        />
+                    </div>
+                    <div v-if="!tag.useRange">
+                        <div
+                            v-for="value in tag.values.slice(0, tag.showCount)"
+                            :key="value"
+                        >
+                            <QCheckbox
+                                v-model="tag.filter"
+                                :dense="true"
+                                :val="value"
+                                :label="value"
+                                @input="onCheck(tag)"
+                            />
+                        </div>
+                        <div v-if="tag.values.length > tag.showCount">
+                            <span
+                                class="cursor-pointer text-blue"
+                                @click="tag.showCount = Infinity"
+                            >
+                                <QIcon name="keyboard_arrow_down" />
+                                {{ $t('viewMore') }}
+                            </span>
+                        </div>
+                        <div v-if="tag.showCount == Infinity">
+                            <span
+                                class="cursor-pointer text-blue"
+                                @click="tag.showCount = tag.initialCount"
+                            >
+                                <QIcon name="keyboard_arrow_up" />
+                                {{ $t('viewLess') }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="q-mx-md">
+                        <QRange
+                            class="q-mt-lg"
+                            v-if="tag.useRange"
+                            v-model="tag.filter"
+                            :min="tag.min"
+                            :max="tag.max"
+                            :step="tag.step"
+                            :color="tag.hasFilter ? 'primary' : 'grey-6'"
+                            @input="onRangeChange(tag, true)"
+                            @change="onRangeChange(tag)"
+                            label-always
+                            markers
+                            snap
+                        />
+                    </div>
+                </div>
+            </div> -->
+        </QDrawer>
+        <QInfiniteScroll>
+            <div class="q-pa-md row justify-center q-gutter-md">
+                <QSpinner
+                    v-if="loading"
+                    color="primary"
+                    size="3em"
+                    :thickness="2"
+                />
+                <div
+                    v-else-if="!items || !items.length || !type"
+                    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
+                    v-else
+                    v-for="_item in items"
+                    :key="_item.id"
+                    v-ripple
+                    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">
+            <QCard style="width: 25em" class="column">
+                <div class="q-pa-md" style="display: flex">
+                    <div
+                        class="q-mr-md"
+                        style="min-height: 112px; min-width: 112px"
+                    >
+                        <VnImg
+                            storage="catalog"
+                            size="200x200"
+                            :id="selectedItem.image"
+                            width="80px"
+                            height="80px"
+                            rounded="bottom"
+                            class="full-height full-width"
+                        />
+                    </div>
+                    <div class="column">
+                        <div class="text-subtitle2">
+                            {{ selectedItem.item }}
+                        </div>
+                        <span class="text-subtitle2 text-grey-7 text-uppercase">
+                            {{ selectedItem.subName }}
+                        </span>
+                        <span class="text-grey-7"> #{{ selectedItem.id }}</span>
+                    </div>
+                </div>
+
+                <div class="tags q-px-md text-caption">
+                    <div
+                        v-for="(tag, index) in selectedItem.tags"
+                        :key="index"
+                        class="full-width row"
+                    >
+                        <span class="text-grey-7 col-5">
+                            {{ tag.name }}
+                        </span>
+                        <span class="col">{{ tag.value }}</span>
+                    </div>
+                </div>
+                <div
+                    v-for="(lot, index) in selectedItem.lots"
+                    :key="index"
+                    class="column"
+                >
+                    <QSeparator />
+                    <div class="row items-center q-px-md q-py-xs">
+                        <span class="col">{{ currency(lot.price) }}</span>
+                        <span class="col"> x{{ lot.grouping }}</span>
+                        <QBtn
+                            icon="add"
+                            round
+                            flat
+                            dense
+                            @click="onAddLotClick(lot)"
+                        >
+                            <QTooltip>{{ t('add') }}</QTooltip>
+                        </QBtn>
+                    </div>
+                </div>
+                <div class="row items-center justify-between q-pa-md bg-black">
+                    <QBtn
+                        icon="delete"
+                        round
+                        dense
+                        flat
+                        color="white"
+                        @click="resetAmounts()"
+                    >
+                        <QTooltip>{{ t('delete') }}</QTooltip>
+                    </QBtn>
+                    <span class="text-center text-white">{{ amount }}</span>
+                    <QBtn
+                        icon="check"
+                        round
+                        dense
+                        flat
+                        color="white"
+                        @click="onConfirmClick()"
+                    >
+                        <QTooltip>{{ t('confirm') }}</QTooltip>
+                    </QBtn>
+                </div>
+            </QCard>
+        </QDialog>
+    </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { inject, onMounted, 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 { useAppStore } from 'stores/app';
+import { storeToRefs } from 'pinia';
+import { formatDateTitle, currency } from 'src/lib/filters.js';
+import useNotify from 'src/composables/useNotify.js';
+
+const jApi = inject('jApi');
+const { t } = useI18n();
+const appStore = useAppStore();
+const route = useRoute();
+const router = useRouter();
+const { isHeaderMounted, rightDrawerOpen, basketOrderId } =
+    storeToRefs(appStore);
+const { notify } = useNotify();
+
+const order = ref(null);
+const items = ref([]);
+const selectedItem = ref(null);
+const showItemDialog = ref(false);
+const loading = ref(false);
+const isGuest = ref(false); // TODO: Integrate isGuest logic
+
+// Filters options
+const categories = ref([]);
+const itemColors = ref([]);
+const itemFamilies = ref([]);
+const itemProducers = ref([]);
+const itemOrigins = ref([]);
+const itemSubcategories = ref([]);
+// Filters values
+const category = ref(null);
+const type = ref(null);
+const color = ref(null);
+const producer = ref(null);
+const origin = ref(null);
+const subcategory = ref(null);
+// Order by options
+const orderBy = ref('i.relevancy DESC, longName');
+const orderByOptions = ref([
+    {
+        label: t('relevancy'),
+        value: 'i.relevancy DESC, longName'
+    },
+    {
+        label: t('name'),
+        value: 'longName ASC'
+    },
+    {
+        label: t('lowerSize'),
+        value: 'size ASC'
+    },
+    {
+        label: t('higherSize'),
+        value: 'size DESC'
+    },
+    {
+        label: t('lowerPrice'),
+        value: 'price ASC'
+    },
+    {
+        label: t('higherPrice'),
+        value: 'price DESC'
+    },
+    {
+        label: t('available'),
+        value: 'available'
+    },
+    { label: t('color'), value: 'ink ASC' },
+    {
+        label: t('producer'),
+        value: 'producer ASC'
+    },
+    {
+        label: t('origin'),
+        value: 'origin ASC'
+    },
+    {
+        label: t('category'),
+        value: 'category ASC'
+    }
+]);
+
+const selectedCategory = computed({
+    get() {
+        return category.value;
+    },
+    async set(value) {
+        category.value = value;
+        router.push({ params: { category: category.value, type: null } });
+        console.log('category', category.value);
+        if (!value) return;
+        getFilters();
+        getItems();
+    }
+});
+
+const selectedType = computed({
+    get() {
+        return type.value;
+    },
+    set(value) {
+        type.value = value;
+        router.push({ params: { category: category.value, type: type.value } });
+        console.log('type', type.value);
+        getFilters();
+        getItems();
+    }
+});
+
+const selectedColor = computed({
+    get() {
+        return color.value;
+    },
+    set(value) {
+        color.value = value;
+        getFilters();
+        getItems();
+    }
+});
+
+const selectedProducer = computed({
+    get() {
+        return producer.value;
+    },
+    set(value) {
+        producer.value = value;
+        if (!value) return;
+        getFilters();
+        getItems();
+    }
+});
+
+const selectedOrigin = computed({
+    get() {
+        return origin.value;
+    },
+    set(value) {
+        origin.value = value;
+        if (!value) return;
+        getFilters();
+        getItems();
+    }
+});
+
+const selectedSubcategory = computed({
+    get() {
+        return subcategory.value;
+    },
+    set(value) {
+        subcategory.value = value;
+        if (!value) return;
+        getFilters();
+        getItems();
+    }
+});
+
+const selectedOrderBy = computed({
+    get() {
+        return orderBy.value;
+    },
+    set(value) {
+        if (value) {
+            orderBy.value = value;
+        } else {
+            orderBy.value = 'i.relevancy DESC, longName';
+        }
+        getItems();
+    }
+});
+
+const queryFilter = computed(() => {
+    let filter = '';
+    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}')`;
+    }
+
+    return filter;
+});
+
+const isSomeFilterSelected = computed(() => {
+    return (
+        selectedType.value ||
+        selectedColor.value ||
+        selectedProducer.value ||
+        selectedOrigin.value ||
+        selectedSubcategory.value
+    );
+});
+
+const getOrder = async () => {
+    try {
+        const [data] = await jApi.query(
+            `SELECT o.id, o.sent, ad.nickname, o.addressFk, o.agencyModeFk
+				    FROM myOrder o
+				    LEFT JOIN myAddress ad ON ad.id = o.addressFk
+				    WHERE o.id = #orderId`,
+            { orderId: basketOrderId.value }
+        );
+        order.value = data;
+        console.log('order', order.value);
+    } catch (error) {
+        console.error('Error getting order:', error);
+    }
+};
+
+const getCategories = async () => {
+    try {
+        categories.value = await jApi.query(
+            `SELECT c.id, l.name, c.color, c.code
+            FROM vn.itemCategory c
+            JOIN vn.itemCategoryL10n l ON l.id = c.id
+            WHERE c.display
+            ORDER BY display`
+        );
+    } catch (error) {
+        console.error('Error getting categories:', error);
+    }
+};
+
+const getItemFamilies = async () => {
+    try {
+        if (!selectedCategory.value || !basketOrderId.value) return;
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+            SELECT DISTINCT t.id, l.name
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            JOIN tmp.itemAvailable a ON a.id = i.id
+            JOIN vn.itemTypeL10n l ON l.id = t.id
+            WHERE t.order >= 0
+            AND t.categoryFk = #category
+            ORDER BY t.order, l.name;
+            DROP TEMPORARY TABLE tmp.itemAvailable`,
+            {
+                category: selectedCategory.value,
+                orderId: basketOrderId.value
+            }
+        );
+        itemFamilies.value = res.results[1].data;
+    } catch (error) {
+        console.error('Error getting available items:', error);
+    }
+};
+
+const getItemColors = async () => {
+    try {
+        if (!selectedCategory.value || !basketOrderId.value) return;
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+					  SELECT DISTINCT l.id, l.name
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            JOIN tmp.itemAvailable a ON a.id = i.id
+            JOIN vn.inkL10n l ON l.id = i.inkFk
+            WHERE (${queryFilter.value})
+            ORDER BY name;
+            DROP TEMPORARY TABLE tmp.itemAvailable;`,
+            {
+                orderId: basketOrderId.value
+            }
+        );
+        itemColors.value = res.results[1].data;
+    } catch (error) {
+        console.error('Error getting available items:', error);
+    }
+};
+
+const getItems = async () => {
+    try {
+        loading.value = true;
+        if (
+            !selectedCategory.value ||
+            !basketOrderId.value ||
+            !selectedType.value
+        )
+            return;
+
+        const res = await jApi.execQuery(
+            `DROP TEMPORARY TABLE IF EXISTS tmp.item;
+            CREATE TEMPORARY TABLE tmp.item
+            (INDEX (itemFk))
+            ENGINE = MEMORY
+            SELECT i.id itemFk
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            WHERE (${queryFilter.value});
+            CALL myOrder_calcCatalogFull(#orderId);
+            SELECT i.id, i.longName item, i.subName,
+            i.tag5, i.value5, i.tag6, i.value6,
+            i.tag7, i.value7, i.tag8, i.value8,
+            i.relevancy, i.size, i.category, b.minQuantity,
+            k.name ink, p.name producer, o.name origin,
+            b.available, b.price, b.grouping,
+            i.image, im.updated
+            FROM tmp.ticketCalculateItem b
+            JOIN vn.item i ON i.id = b.itemFk
+            LEFT JOIN vn.ink k ON k.id = i.inkFk
+            LEFT JOIN vn.producer p ON p.id = i.producerFk
+            LEFT JOIN vn.origin o ON o.id = i.originFk
+            LEFT JOIN image im ON im.collectionFk = 'catalog'
+            AND im.name = i.image
+            WHERE b.available > 0
+            ORDER BY ${selectedOrderBy.value}
+            LIMIT 5000;
+            DROP TEMPORARY TABLE tmp.item;
+            CALL vn.ticketCalculatePurge();`,
+            { orderId: basketOrderId.value }
+        );
+        items.value = res.results[3].data;
+        console.log('get items: ', items.value);
+    } catch (error) {
+        console.error('Error getting items:', error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const getProducers = async () => {
+    try {
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+            SELECT DISTINCT p.id, p.name
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            JOIN tmp.itemAvailable a ON a.id = i.id
+            JOIN vn.producer p ON p.id = i.producerFk
+            WHERE (${queryFilter.value})
+            ORDER BY name;
+            DROP TEMPORARY TABLE tmp.itemAvailable;`,
+            { orderId: basketOrderId.value }
+        );
+        itemProducers.value = res.results[1].data;
+        console.log('Producers:', itemProducers.value);
+    } catch (error) {
+        console.error('Error getting productors:', error);
+    }
+};
+
+const getOrigins = async () => {
+    try {
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+					SELECT DISTINCT o.id, l.name, o.code
+          FROM vn.item i
+          JOIN vn.itemType t ON t.id = i.typeFk
+          JOIN tmp.itemAvailable a ON a.id = i.id
+          JOIN vn.origin o ON o.id = i.originFk
+          JOIN vn.originL10n l ON l.id = o.id
+          WHERE (${queryFilter.value})
+          ORDER BY name;
+					DROP TEMPORARY TABLE tmp.itemAvailable;`,
+            { orderId: basketOrderId.value }
+        );
+        itemOrigins.value = res.results[1].data;
+        console.log('Producers:', itemOrigins.value);
+    } catch (error) {
+        console.error('Error getting productors:', error);
+    }
+};
+
+const getSubcategories = async () => {
+    try {
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+            SELECT DISTINCT i.category, i.category
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            JOIN tmp.itemAvailable a ON a.id = i.id
+            WHERE #filter
+            ORDER BY category;
+            DROP TEMPORARY TABLE tmp.itemAvailable;`
+        );
+        itemSubcategories.value = res.results[1].data;
+    } catch (error) {
+        console.error('Error getting subcategories:', error);
+    }
+};
+
+const getFilters = async () => {
+    const promises = [
+        getItemFamilies(),
+        getItemColors(),
+        getProducers(),
+        getOrigins(),
+        getSubcategories()
+    ];
+
+    await Promise.allSettled(promises);
+};
+
+const showItem = async item => {
+    if (isGuest.value) return;
+
+    const itemLots = await calcItem(item.id);
+    const tags = await getItemTags(item.id);
+    item.tags = tags;
+    item.lots = itemLots;
+    showItemDialog.value = true;
+    selectedItem.value = item;
+    console.log('selected item: ', selectedItem.value);
+};
+
+const removeCategory = () => {
+    selectedCategory.value = null;
+    selectedType.value = null;
+    selectedColor.value = null;
+    selectedProducer.value = null;
+    selectedOrigin.value = null;
+    selectedSubcategory.value = null;
+    items.value = [];
+    router.push({ params: { category: null, type: null } });
+};
+
+const getItemTags = async itemFk => {
+    try {
+        const tags = await jApi.query(
+            `SELECT l.name, it.value
+            FROM vn.itemTag it
+            JOIN vn.tag t ON t.id = it.tagFk
+            JOIN vn.tagL10n l ON l.id = t.id
+            WHERE it.itemFk = #itemFk
+            AND priority >= 0
+            ORDER BY it.priority`,
+            {
+                itemFk
+            }
+        );
+        return tags;
+    } catch (error) {
+        console.error('Error getting available items:', error);
+    }
+};
+
+const calcItem = async itemId => {
+    try {
+        const res = await jApi.execQuery(
+            `CALL myOrder_calcCatalogFromItem(#orderId, #itemId);
+      SELECT l.warehouseFk, w.name warehouse, p.grouping,
+      p.price, p.priceKg, p.rate, l.available
+      FROM tmp.ticketLot l
+      JOIN tmp.ticketComponentPrice p ON p.warehouseFk = l.warehouseFk
+      JOIN vn.warehouse w ON w.id = p.warehouseFk
+      ORDER BY warehouseFk, grouping;
+      DROP TEMPORARY TABLE
+      tmp.ticketCalculateItem,
+      tmp.ticketComponentPrice,
+      tmp.ticketComponent,
+      tmp.ticketLot,
+      tmp.zoneGetShipped;`,
+            { orderId: basketOrderId.value, itemId }
+        );
+        return res.results[1].data;
+    } catch (error) {
+        console.error('Error getting items:', error);
+    }
+};
+
+const addedItemsAmountAcc = ref({});
+const amount = ref(0);
+
+const onAddLotClick = async lot => {
+    try {
+        const { grouping, warehouseFk, available } = lot;
+
+        let lotAmount = addedItemsAmountAcc.value[warehouseFk];
+
+        if (lotAmount === undefined) lotAmount = 0;
+
+        if (lotAmount < available) {
+            let newAmount = lotAmount + grouping;
+
+            if (newAmount > available) newAmount = available;
+
+            addedItemsAmountAcc.value[warehouseFk] = newAmount;
+            amount.value += newAmount - lotAmount;
+        } else {
+            notify(t('amountNotAvailable'), 'negative');
+        }
+    } catch (error) {
+        console.error('Error adding item to basket:', error);
+    }
+};
+
+const resetAmounts = () => {
+    addedItemsAmountAcc.value = {};
+    amount.value = 0;
+};
+
+const addItemToOrder = async params => {
+    try {
+        await jApi.execQuery(
+            `CALL myOrder_addItem(#orderId, #warehouse, #item, #amount);`,
+            params
+        );
+    } catch (error) {
+        console.error('Error adding item to basket:', error);
+    }
+};
+
+const onConfirmClick = async params => {
+    try {
+        let amountSum = 0;
+        const addItemPromises = [];
+
+        for (const warehouse in addedItemsAmountAcc.value) {
+            const amount = addedItemsAmountAcc.value[warehouse];
+            amountSum += amount;
+
+            const params = {
+                orderId: basketOrderId.value,
+                warehouse,
+                item: selectedItem.value.id,
+                amount
+            };
+            addItemPromises.push(addItemToOrder(params));
+        }
+
+        if (amountSum > 0) {
+            await Promise.all(addItemPromises);
+
+            notify(
+                `${t('added')} ${amountSum} ${selectedItem.value.item}`,
+                'positive'
+            );
+        }
+    } catch (error) {
+        console.error('Error adding item to basket:', error);
+    } finally {
+        showItemDialog.value = false;
+        resetAmounts();
+    }
+};
+
+// const refreshTitle = () => {};
+
+onBeforeMount(async () => {
+    if (!isGuest.value) {
+        await appStore.check('catalog');
+    } else {
+        // const resultSet = await jApi.execQuery(
+        //     'CALL myOrder_configureForGuest(@orderId); SELECT @orderId;'
+        // );
+        // resultSet.fetchResult();
+        // this.orderId = resultSet.fetchValue();
+    }
+    getOrder();
+    getCategories();
+});
+
+onMounted(async () => {
+    selectedCategory.value = route.params.category;
+    selectedType.value = route.params.type;
+});
+</script>
+
+<style lang="scss" scoped>
+.search {
+    max-width: 250px;
+}
+.basket-info {
+    display: flex;
+    flex-direction: column;
+    background-color: #8cc63f;
+    color: white;
+    padding: 17px 28px;
+    border-radius: 7px;
+    text-align: center;
+}
+.categories {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .category {
+        width: 54px;
+
+        &.active {
+            background: rgba(0, 0, 0, 0.08);
+        }
+        & > img {
+            height: 40px;
+            width: 40px;
+        }
+    }
+}
+
+.my-card {
+    display: flex;
+    flex-direction: column;
+    width: 210px;
+    overflow: hidden;
+    cursor: pointer;
+}
+</style>
+
+<i18n lang="yaml">
+en-US:
+    category: Category
+    deleteFilter: Delete filter
+    family: Family
+    color: Color
+    producer: Producer
+    origin: Origin
+    pleaseSetFilter: Choose a filter from the right menu
+    orderBy: Order by
+    relevancy: Relevancy
+    name: Name
+    lowerSize: Lower size
+    higherSize: Higher size
+    lowerPrice: Lower price
+    higherPrice: Higher price
+    available: Available
+    minGrouping: Minimum packing
+    groupingPrice: Price per group
+    add: Add
+    added: Added
+es-ES:
+    gridView: Vista de rejilla
+    listView: Vista de lista
+    warehouse: Almacén
+    agency: Agencia
+    modify: Modificar
+    category: Categoría
+    deleteFilter: Quitar filtro
+    filterBy: Filtrar por
+    family: Familia
+    search: Buscar
+    color: Color
+    producer: Productor
+    origin: Origen
+    pleaseSetFilter: Elige un filtro en el menú de la derecha
+    orderBy: Ordernar por
+    relevancy: Relevancia
+    name: Nombre
+    lowerSize: Medida más pequeña
+    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:
+    category: Categoría
+    deleteFilter: Eliminar filtro
+    family: Família
+    color: Color
+    producer: Productor
+    origin: Origen
+    pleaseSetFilter: Tria un filtre en el menú de la dreta
+    orderBy: Ordenar per
+    relevancy: Relevància
+    name: Nom
+    lowerSize: Mida més petita
+    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
+    deleteFilter: Supprimer le filtre
+    family: Famille
+    color: Couleur
+    producer: Producteur
+    origin: Origine
+    pleaseSetFilter: Choisissez un filtre dans le menu de droite
+    orderBy: Trier par
+    relevancy: Pertinence
+    name: Nom
+    lowerSize: Taille le plus bas
+    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
+    deleteFilter: Apagar filtro
+    family: Família
+    color: Cor
+    producer: Produtor
+    origin: Origem
+    pleaseSetFilter: Escolha um filtro no menu à direita
+    orderBy: Ordenar por
+    relevancy: Relevância
+    name: Nome
+    lowerSize: Tamanho menor
+    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>
diff --git a/src/pages/Ecomerce/OrdersView.vue b/src/pages/Ecomerce/OrdersView.vue
index f7a2c081..f801b090 100644
--- a/src/pages/Ecomerce/OrdersView.vue
+++ b/src/pages/Ecomerce/OrdersView.vue
@@ -174,7 +174,6 @@ en-US:
     startOrder: Start order
     noOrdersFound: No orders found
     makePayment: Make payment
-    shoppingCart: Shopping cart
     balance: 'Balance:'
     paymentInfo: >-
         The amount shown is your slope (negative) or favorable balance today, it
@@ -187,7 +186,6 @@ es-ES:
     startOrder: Empezar pedido
     noOrdersFound: No se encontrado pedidos
     makePayment: Realizar pago
-    shoppingCart: Cesta de la compra
     balance: 'Saldo:'
     paymentInfo: >-
         La cantidad mostrada es tu saldo pendiente (negativa) o favorable a día de
@@ -201,7 +199,6 @@ ca-ES:
     startOrder: Començar encàrrec
     noOrdersFound: No s'han trobat comandes
     makePayment: Realitzar pagament
-    shoppingCart: Cistella de la compra
     balance: 'Saldo:'
     paymentInfo: >-
         La quantitat mostrada és el teu saldo pendent (negatiu) o favorable a dia
@@ -215,7 +212,6 @@ fr-FR:
     startOrder: Acheter
     noOrdersFound: Aucune commande trouvée
     makePayment: Effectuer un paiement
-    shoppingCart: Panier
     balance: 'Balance:'
     paymentInfo: >-
         Le montant indiqué est votre pente (négative) ou balance favorable
@@ -229,7 +225,6 @@ pt-PT:
     startOrder: Iniciar encomenda
     noOrdersFound: Nenhum pedido encontrado
     makePayment: Realizar pagamento
-    shoppingCart: Cesta da compra
     balance: 'Saldo:'
     paymentInfo: >-
         A quantidade mostrada é seu saldo pendente (negativo) ou favorável a dia de
diff --git a/src/pages/Ecomerce/TicketDetails.vue b/src/pages/Ecomerce/TicketDetails.vue
index 408cf944..91f2a030 100644
--- a/src/pages/Ecomerce/TicketDetails.vue
+++ b/src/pages/Ecomerce/TicketDetails.vue
@@ -66,7 +66,7 @@ const deleteRow = id => {
 <template>
     <QCard class="vn-w-sm" style="padding: 32px">
         <QCardSection class="no-padding q-mb-md">
-            <div class="text-h6">#{{ ticket.id }}</div>
+            <div class="text-h6 text-bold">#{{ ticket.id }}</div>
         </QCardSection>
         <QCardSection class="no-padding q-mb-md q-gutter-y-xs">
             <div class="text-subtitle1 text-bold">
diff --git a/src/router/routes.js b/src/router/routes.js
index fa9dbd83..1a632381 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -75,7 +75,7 @@ const routes = [
                 meta: {
                     title: 'Catalog'
                 },
-                component: () => import('pages/Ecomerce/Catalog.vue')
+                component: () => import('pages/Ecomerce/CatalogView.vue')
             },
             {
                 name: 'basket',

From ff0d2db8fe1875d34b716a906078a46ed1fdbb3b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sun, 22 Sep 2024 18:47:06 -0300
Subject: [PATCH 02/12] Filters changes and create card component

---
 src/i18n/ca-ES/index.js            |   1 +
 src/i18n/en-US/index.js            |   1 +
 src/i18n/es-ES/index.js            |   1 +
 src/i18n/fr-FR/index.js            |   1 +
 src/i18n/pt-PT/index.js            |   1 +
 src/pages/Ecomerce/CatalogCard.vue | 129 +++++++++++++++++
 src/pages/Ecomerce/CatalogView.vue | 216 ++++++++++-------------------
 7 files changed, 205 insertions(+), 145 deletions(-)
 create mode 100644 src/pages/Ecomerce/CatalogCard.vue

diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index 711a1cdf..9cf1aba3 100644
--- 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',
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 5e2e8019..20105461 100644
--- 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',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index dc8ad61d..bbfaa58d 100644
--- 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',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index b6d4c61b..af4dbf43 100644
--- 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',
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index 7f748303..9b6f8f96 100644
--- 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',
diff --git a/src/pages/Ecomerce/CatalogCard.vue b/src/pages/Ecomerce/CatalogCard.vue
new file mode 100644
index 00000000..be18d160
--- /dev/null
+++ 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>
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index a84f4330..75a2c94a 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/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>
-
-                <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">
@@ -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>

From 72cd9e6cd6bc31ec079184d483ba9cccb66c99b2 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sun, 22 Sep 2024 20:12:25 -0300
Subject: [PATCH 03/12] Grid mode

---
 src/pages/Account/AddressList.vue  |   5 +-
 src/pages/Ecomerce/CatalogCard.vue | 113 +++++++++++++++++++++--------
 src/pages/Ecomerce/CatalogView.vue | 105 +++++++++++++++++++--------
 3 files changed, 158 insertions(+), 65 deletions(-)

diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 0f6fd764..0b91d52c 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -104,10 +104,7 @@ onMounted(async () => {
         </QBtn>
     </Teleport>
     <QPage class="vn-w-sm">
-        <QList
-            class="rounded-borders shadow-1 shadow-transition"
-            separator
-        >
+        <QList class="rounded-borders shadow-1 shadow-transition" separator>
             <CardList
                 v-for="(address, index) in addresses"
                 :key="index"
diff --git a/src/pages/Ecomerce/CatalogCard.vue b/src/pages/Ecomerce/CatalogCard.vue
index be18d160..412f7e7c 100644
--- a/src/pages/Ecomerce/CatalogCard.vue
+++ b/src/pages/Ecomerce/CatalogCard.vue
@@ -1,40 +1,37 @@
 <script setup>
-import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnImg from 'src/components/ui/VnImg.vue';
+import CardList from 'src/components/ui/CardList.vue';
 
 import { currency } from 'src/lib/filters.js';
 
 defineProps({
-    item: { type: Object, default: () => {} }
+    item: { type: Object, default: () => {} },
+    viewMode: { type: String, default: 'grid' }
 });
 
 const { t } = useI18n();
-
-onMounted(async () => {});
 </script>
 
 <template>
-    <QCard v-ripple class="catalog-card">
+    <QCard v-if="viewMode === 'grid'" 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">
+                <div class="text-subtitle2 ellipsis-2-lines">
                     {{ item.item }}
                 </div>
                 <div
-                    class="row justify-between sub-name text-uppercase text-subtitle1 text-grey-7"
+                    class="row justify-between text-uppercase text-subtitle1 text-grey-7"
                 >
                     <span class="text-subtitle2">
                         {{ item.subName }}
@@ -42,29 +39,15 @@ onMounted(async () => {});
                     <span> #{{ item.id }}</span>
                 </div>
                 <div class="tags q-pt-xs text-caption">
-                    <div class="full-width row">
+                    <div
+                        v-for="(tag, index) in item.previewTags"
+                        :key="index"
+                        class="full-width row"
+                    >
                         <span class="text-grey-7 col">
-                            {{ item.tag5 }}
+                            {{ tag.name }}
                         </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>
+                        <span class="col ellipsis">{{ tag.value }}</span>
                     </div>
                 </div>
             </div>
@@ -103,6 +86,71 @@ onMounted(async () => {});
             </div>
         </div>
     </QCard>
+    <CardList v-else class="vn-w-sm">
+        <template #prepend>
+            <div style="min-height: 105px; min-width: 105px" class="q-mr-md">
+                <VnImg
+                    storage="catalog"
+                    size="200x200"
+                    :id="item.image"
+                    rounded="bottom"
+                    class="full-height full-width"
+                />
+            </div>
+        </template>
+        <template #content>
+            <span class="ellipsis-2-lines">
+                {{ item.item }}
+            </span>
+            <div class="row justify-between text-uppercase text-grey-7">
+                <span>{{ item.subName }}</span>
+                <span>#{{ item.id }}</span>
+            </div>
+            <div
+                v-for="(tag, index) in item.previewTags"
+                :key="index"
+                class="full-width row"
+            >
+                <span class="text-grey-7 col">
+                    {{ tag.name }}
+                </span>
+                <span class="col ellipsis">{{ tag.value }}</span>
+            </div>
+            <div class="row justify-end items-center q-gutter-x-xs q-mt-sm">
+                <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-3 justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('available') }}
+                    </QTooltip>
+                </QBadge>
+                <QBadge
+                    outline
+                    :label="currency(item.price)"
+                    color="accent"
+                    text-color="black"
+                    class="col-3 justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('groupingPrice') }}
+                    </QTooltip>
+                </QBadge>
+            </div>
+        </template>
+    </CardList>
 </template>
 
 <style lang="scss" scoped>
@@ -118,12 +166,17 @@ onMounted(async () => {});
 <i18n lang="yaml">
 en-US:
     groupingPrice: Price per group
+    minGrouping: Minimum packing
 es-ES:
     groupingPrice: Precio por grupo
+    minGrouping: Cantidad mínima
 ca-ES:
     groupingPrice: Preu per grup
+    minGrouping: Empaquetament mínim
 fr-FR:
     groupingPrice: Prix par groupe
+    minGrouping: Emballage minimum
 pt-PT:
     groupingPrice: Preço por grupo
+    minGrouping: Embalagem mínima
 </i18n>
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 75a2c94a..0749bd69 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -20,20 +20,28 @@
                 />
             </template>
         </QInput> -->
-        <!-- <QBtn
-            :icon="$t(viewMode == 'list' ? 'view_list' : 'grid_on')"
-            :label="$t(viewMode == 'list' ? 'listView' : 'gridView')"
+        <QBtn
+            :icon="viewTypeButtonContent.icon"
+            :label="viewTypeButtonContent.label"
             @click="onViewModeClick()"
             rounded
             no-caps
-        /> -->
+        >
+            <QTooltip>
+                {{ viewTypeButtonContent.label }}
+            </QTooltip>
+        </QBtn>
         <QBtn
             icon="shopping_cart_checkout"
             :label="t('shoppingCart')"
             :to="{ name: 'basket' }"
             rounded
             no-caps
-        />
+        >
+            <QTooltip>
+                {{ t('shoppingCart') }}
+            </QTooltip>
+        </QBtn>
     </Teleport>
     <div style="padding-bottom: 5em">
         <QDrawer v-model="rightDrawerOpen" side="right" :width="250">
@@ -214,7 +222,13 @@
             </div> -->
         </QDrawer>
         <QInfiniteScroll>
-            <div class="q-pa-md row justify-center q-gutter-md">
+            <div
+                :class="
+                    viewMode === 'grid'
+                        ? 'q-pa-md row justify-center q-gutter-md'
+                        : 'column items-center'
+                "
+            >
                 <QSpinner
                     v-if="loading"
                     color="primary"
@@ -233,6 +247,7 @@
                     v-for="_item in items"
                     :key="_item.id"
                     :item="_item"
+                    :view-mode="viewMode"
                     @click="showItem(_item)"
                 />
             </div>
@@ -354,6 +369,7 @@ const selectedItem = ref(null);
 const showItemDialog = ref(false);
 const loading = ref(false);
 const isGuest = ref(false); // TODO: Integrate isGuest logic
+const viewMode = ref('grid');
 
 // Filters options
 const categories = ref([]);
@@ -423,10 +439,10 @@ const selectedCategory = computed({
         category.value = value;
         router.push({ params: { category: category.value, type: null } });
         onCategoryChange();
-        refreshTitle();
         if (!value) return;
         getFilters();
         getItems();
+        refreshTitle();
     }
 });
 
@@ -511,7 +527,7 @@ const queryFilter = computed(() => {
 
     // Filtro principal
     if (selectedCategory.value) {
-        filters.push(`t.categoryFk = ${selectedCategory.value}`);
+        filters.push(`(t.categoryFk = ${selectedCategory.value})`);
     }
 
     const otherFilters = {
@@ -524,7 +540,7 @@ const queryFilter = computed(() => {
     // Añadir solo aquellos filtros que tengan valor
     Object.entries(otherFilters).forEach(([key, value]) => {
         if (value) {
-            filters.push(`${key} = ${value}`);
+            filters.push(`(${key} = ${value})`);
         }
     });
 
@@ -542,6 +558,13 @@ const isSomeFilterSelected = computed(() => {
     );
 });
 
+const viewTypeButtonContent = computed(() => {
+    return {
+        label: t(viewMode.value === 'list' ? 'listView' : 'gridView'),
+        icon: viewMode.value === 'list' ? 'view_list' : 'grid_on'
+    };
+});
+
 const getOrder = async () => {
     try {
         const [data] = await jApi.query(
@@ -619,10 +642,26 @@ const getItemColors = async () => {
     }
 };
 
+const onItemsFetched = async () => {
+    items.value.forEach(item => {
+        const previewTags = [
+            { name: item.tag5, value: item.value5 },
+            { name: item.tag6, value: item.value6 },
+            { name: item.tag7, value: item.value7 }
+        ];
+        item.previewTags = previewTags;
+    });
+};
+
 const getItems = async () => {
     try {
+        if (
+            !selectedCategory.value ||
+            !basketOrderId.value ||
+            !isSomeFilterSelected.value
+        )
+            return;
         loading.value = true;
-        if (!selectedCategory.value || !basketOrderId.value) return;
 
         const res = await jApi.execQuery(
             `DROP TEMPORARY TABLE IF EXISTS tmp.item;
@@ -656,11 +695,10 @@ const getItems = async () => {
             { orderId: basketOrderId.value }
         );
         items.value = res.results[3].data;
-        console.log('get items: ', items.value);
+        await onItemsFetched();
+        loading.value = false;
     } catch (error) {
         console.error('Error getting items:', error);
-    } finally {
-        loading.value = false;
     }
 };
 
@@ -709,13 +747,14 @@ const getSubcategories = async () => {
     try {
         const res = await jApi.execQuery(
             `CALL myOrder_getAvailable(#orderId);
-            SELECT DISTINCT i.category, i.category
+            SELECT DISTINCT i.category
             FROM vn.item i
             JOIN vn.itemType t ON t.id = i.typeFk
             JOIN tmp.itemAvailable a ON a.id = i.id
-            WHERE #filter
+            WHERE (${queryFilter.value})
             ORDER BY category;
-            DROP TEMPORARY TABLE tmp.itemAvailable;`
+            DROP TEMPORARY TABLE tmp.itemAvailable;`,
+            { orderId: basketOrderId.value }
         );
         itemSubcategories.value = res.results[1].data;
     } catch (error) {
@@ -739,12 +778,11 @@ const showItem = async item => {
     if (isGuest.value) return;
 
     const itemLots = await calcItem(item.id);
-    const tags = await getItemTags(item.id);
-    item.tags = tags;
+    const tags = getItemTags(item.id);
     item.lots = itemLots;
+    item.tags = tags;
     showItemDialog.value = true;
     selectedItem.value = item;
-    console.log('selected item: ', selectedItem.value);
 };
 
 const removeCategory = () => {
@@ -759,7 +797,6 @@ const onCategoryChange = () => {
     selectedOrigin.value = null;
     selectedSubcategory.value = null;
     items.value = [];
-    router.push({ params: { category: null, type: null } });
 };
 
 const getItemTags = async itemFk => {
@@ -891,7 +928,6 @@ const refreshTitle = () => {
         const _category = categories.value.find(
             i => i.id === selectedCategory.value
         );
-
         if (_category) {
             title = _category.name;
 
@@ -899,7 +935,6 @@ const refreshTitle = () => {
                 const _type = itemFamilies.value.find(
                     i => i.id === selectedType.value
                 );
-
                 if (_type) {
                     subtitle = title;
                     title = _type.name;
@@ -911,6 +946,10 @@ const refreshTitle = () => {
     appStore.$patch({ title, subtitle });
 };
 
+const onViewModeClick = () => {
+    viewMode.value = viewMode.value === 'list' ? 'grid' : 'list';
+};
+
 onBeforeMount(async () => {
     if (!isGuest.value) {
         await appStore.check('catalog');
@@ -924,8 +963,9 @@ onBeforeMount(async () => {
     await getOrder();
     await getCategories();
 
-    if (route.params.category) selectedCategory.value = route.params.category;
-    if (route.params.type) selectedType.value = route.params.type;
+    if (route.params.category)
+        selectedCategory.value = Number(route.params.category);
+    if (route.params.type) selectedType.value = Number(route.params.type);
 });
 </script>
 
@@ -977,12 +1017,11 @@ en-US:
     higherSize: Higher size
     lowerPrice: Lower price
     higherPrice: Higher price
-    minGrouping: Minimum packing
     add: Add
     added: Added
+    listView: List view
+    gridView: Grid view
 es-ES:
-    gridView: Vista de rejilla
-    listView: Vista de lista
     warehouse: Almacén
     agency: Agencia
     modify: Modificar
@@ -1002,9 +1041,10 @@ es-ES:
     higherSize: Medida más grande
     lowerPrice: Precio más bajo
     higherPrice: Precio más alto
-    minGrouping: Cantidad mínima
     add: Añadir
     added: Añadido
+    listView: Vista de lista
+    gridView: Vista de rejilla
 ca-ES:
     category: Categoría
     deleteFilter: Eliminar filtro
@@ -1020,8 +1060,9 @@ ca-ES:
     higherSize: Mida més gran
     lowerPrice: Preu més baix
     higherPrice: Preu més alt
-    minGrouping: Empaquetament mínim
     add: Afegir
+    listView: Vista de llista
+    gridView: Vista de graella
 fr-FR:
     category: Catégorie
     deleteFilter: Supprimer le filtre
@@ -1037,8 +1078,9 @@ fr-FR:
     higherSize: Taille le plus élevé
     lowerPrice: Prix le plus bas
     higherPrice: Prix le plus élevé
-    minGrouping: Emballage minimum
     add: Ajouter
+    listView: Vue en liste
+    gridView: Vue en grille
 pt-PT:
     category: Categoria
     deleteFilter: Apagar filtro
@@ -1054,6 +1096,7 @@ pt-PT:
     higherSize: Tamanho maior
     lowerPrice: Preço mais baixo
     higherPrice: Preço mais alto
-    minGrouping: Embalagem mínima
     add: Adicionar
+    listView: Vista de lista
+    gridView: Vista de grade
 </i18n>

From e39cab82f6eb31882677d66ddc4d391ea7b5357a Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 23 Sep 2024 08:08:24 -0300
Subject: [PATCH 04/12] Use searchbar and debouncer

---
 src/components/ui/VnSearchBar.vue  |   2 +-
 src/pages/Ecomerce/CatalogView.vue | 320 ++++++++++++-----------------
 src/utils/debouncer.js             |  10 +
 3 files changed, 144 insertions(+), 188 deletions(-)
 create mode 100644 src/utils/debouncer.js

diff --git a/src/components/ui/VnSearchBar.vue b/src/components/ui/VnSearchBar.vue
index 0d65a5f1..375e9e8f 100644
--- a/src/components/ui/VnSearchBar.vue
+++ b/src/components/ui/VnSearchBar.vue
@@ -12,7 +12,7 @@ const props = defineProps({
     },
     placeholder: {
         type: String,
-        default: 'Search'
+        default: ''
     },
     sqlQuery: {
         type: String,
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 0749bd69..909aa7cb 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -1,47 +1,30 @@
 <template>
     <Teleport v-if="isHeaderMounted" to="#actions">
-        <!-- <QInput
-            :placeholder="$t('search')"
-            v-model="search"
-            debounce="500"
-            class="search q-mr-sm"
-            rounded
-            dark
-            dense
-            standout
-        >
-            <template #prepend>
-                <QIcon v-if="search === ''" name="search" />
-                <QIcon
-                    v-else
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="search = ''"
-                />
-            </template>
-        </QInput> -->
-        <QBtn
-            :icon="viewTypeButtonContent.icon"
-            :label="viewTypeButtonContent.label"
-            @click="onViewModeClick()"
-            rounded
-            no-caps
-        >
-            <QTooltip>
-                {{ viewTypeButtonContent.label }}
-            </QTooltip>
-        </QBtn>
-        <QBtn
-            icon="shopping_cart_checkout"
-            :label="t('shoppingCart')"
-            :to="{ name: 'basket' }"
-            rounded
-            no-caps
-        >
-            <QTooltip>
-                {{ t('shoppingCart') }}
-            </QTooltip>
-        </QBtn>
+        <div class="q-gutter-x-sm row">
+            <VnSearchBar :search-term="search" @on-search-error="items = []" />
+            <QBtn
+                :icon="viewTypeButtonContent.icon"
+                :label="viewTypeButtonContent.label"
+                @click="onViewModeClick()"
+                rounded
+                no-caps
+            >
+                <QTooltip>
+                    {{ viewTypeButtonContent.label }}
+                </QTooltip>
+            </QBtn>
+            <QBtn
+                icon="shopping_cart_checkout"
+                :label="t('shoppingCart')"
+                :to="{ name: 'basket' }"
+                rounded
+                no-caps
+            >
+                <QTooltip>
+                    {{ t('shoppingCart') }}
+                </QTooltip>
+            </QBtn>
+        </div>
     </Teleport>
     <div style="padding-bottom: 5em">
         <QDrawer v-model="rightDrawerOpen" side="right" :width="250">
@@ -96,7 +79,7 @@
                         </QBtn>
                     </div>
                 </div>
-                <div class="q-mt-md" v-if="category || search">
+                <div class="q-mt-md" v-if="selectedCategory">
                     <div class="q-mb-xs text-grey-7">
                         {{ t('filterBy') }}
                     </div>
@@ -157,69 +140,6 @@
                     Elige una categoria
                 </span>
             </div>
-            <!-- <div class="q-pa-md" v-if="typeId || search">
-                <div class="q-mb-md" v-for="tag in tags" :key="tag.uid">
-                    <div class="q-mb-xs text-caption text-grey-7">
-                        {{ tag.name }}
-                        <QIcon
-                            v-if="tag.hasFilter"
-                            style="font-size: 1.3em"
-                            name="cancel"
-                            :title="$t('deleteFilter')"
-                            class="cursor-pointer"
-                            @click="onResetTagFilterClick(tag)"
-                        />
-                    </div>
-                    <div v-if="!tag.useRange">
-                        <div
-                            v-for="value in tag.values.slice(0, tag.showCount)"
-                            :key="value"
-                        >
-                            <QCheckbox
-                                v-model="tag.filter"
-                                :dense="true"
-                                :val="value"
-                                :label="value"
-                                @input="onCheck(tag)"
-                            />
-                        </div>
-                        <div v-if="tag.values.length > tag.showCount">
-                            <span
-                                class="cursor-pointer text-blue"
-                                @click="tag.showCount = Infinity"
-                            >
-                                <QIcon name="keyboard_arrow_down" />
-                                {{ $t('viewMore') }}
-                            </span>
-                        </div>
-                        <div v-if="tag.showCount == Infinity">
-                            <span
-                                class="cursor-pointer text-blue"
-                                @click="tag.showCount = tag.initialCount"
-                            >
-                                <QIcon name="keyboard_arrow_up" />
-                                {{ $t('viewLess') }}
-                            </span>
-                        </div>
-                    </div>
-                    <div class="q-mx-md">
-                        <QRange
-                            class="q-mt-lg"
-                            v-if="tag.useRange"
-                            v-model="tag.filter"
-                            :min="tag.min"
-                            :max="tag.max"
-                            :step="tag.step"
-                            :color="tag.hasFilter ? 'primary' : 'grey-6'"
-                            @input="onRangeChange(tag, true)"
-                            @change="onRangeChange(tag)"
-                            label-always
-                            markers
-                            snap
-                        />
-                    </div>
-                </div>
-            </div> -->
         </QDrawer>
         <QInfiniteScroll>
             <div
@@ -342,17 +262,19 @@
 
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { inject, onBeforeMount, ref, computed } from 'vue';
+import { inject, onBeforeMount, ref, computed, watch } 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 VnSearchBar from 'src/components/ui/VnSearchBar.vue';
 
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
 import { formatDateTitle, currency } from 'src/lib/filters.js';
 import useNotify from 'src/composables/useNotify.js';
+import debounce from 'src/utils/debouncer.js';
 
 const jApi = inject('jApi');
 const { t } = useI18n();
@@ -378,6 +300,7 @@ const itemFamilies = ref([]);
 const itemProducers = ref([]);
 const itemOrigins = ref([]);
 const itemSubcategories = ref([]);
+const search = ref(null);
 // Filters values
 const category = ref(null);
 const type = ref(null);
@@ -437,11 +360,10 @@ const selectedCategory = computed({
     },
     async set(value) {
         category.value = value;
-        router.push({ params: { category: category.value, type: null } });
         onCategoryChange();
         if (!value) return;
-        getFilters();
-        getItems();
+        debouncedGetFilters();
+        debouncedGetItems();
         refreshTitle();
     }
 });
@@ -452,10 +374,13 @@ const selectedType = computed({
     },
     set(value) {
         type.value = value;
-        router.push({ params: { category: category.value, type: type.value } });
+        router.push({
+            params: { category: category.value, type: type.value },
+            query: { ...route.query }
+        });
         if (!selectedCategory.value) return;
-        getFilters();
-        getItems();
+        debouncedGetFilters();
+        debouncedGetItems();
         refreshTitle();
     }
 });
@@ -467,8 +392,8 @@ const selectedColor = computed({
     set(value) {
         color.value = value;
         if (!selectedCategory.value) return;
-        getFilters();
-        getItems();
+        debouncedGetFilters();
+        debouncedGetItems();
     }
 });
 
@@ -479,8 +404,8 @@ const selectedProducer = computed({
     set(value) {
         producer.value = value;
         if (!value || !selectedCategory.value) return;
-        getFilters();
-        getItems();
+        debouncedGetFilters();
+        debouncedGetItems();
     }
 });
 
@@ -491,8 +416,8 @@ const selectedOrigin = computed({
     set(value) {
         origin.value = value;
         if (!value || !selectedCategory.value) return;
-        getFilters();
-        getItems();
+        debouncedGetFilters();
+        debouncedGetItems();
     }
 });
 
@@ -503,8 +428,8 @@ const selectedSubcategory = computed({
     set(value) {
         subcategory.value = value;
         if (!value && !selectedCategory.value) return;
-        getFilters();
-        getItems();
+        debouncedGetFilters();
+        debouncedGetItems();
     }
 });
 
@@ -518,7 +443,7 @@ const selectedOrderBy = computed({
         } else {
             orderBy.value = 'i.relevancy DESC, longName';
         }
-        getItems();
+        debouncedGetItems();
     }
 });
 
@@ -530,6 +455,13 @@ const queryFilter = computed(() => {
         filters.push(`(t.categoryFk = ${selectedCategory.value})`);
     }
 
+    // Filtro búsqueda
+    if (search.value) {
+        filters.push(
+            `((i.longName LIKE '%${search.value}%') OR (i.subname LIKE '%${search.value}%'))`
+        );
+    }
+
     const otherFilters = {
         'i.typeFk': selectedType.value,
         'i.inkFk': selectedColor?.value ? `'${selectedColor.value}'` : null,
@@ -550,6 +482,7 @@ const queryFilter = computed(() => {
 
 const isSomeFilterSelected = computed(() => {
     return (
+        search.value ||
         selectedType.value ||
         selectedColor.value ||
         selectedProducer.value ||
@@ -565,6 +498,67 @@ const viewTypeButtonContent = computed(() => {
     };
 });
 
+const getFilters = async () => {
+    console.log('getFilters');
+    const promises = [
+        getItemFamilies(),
+        getItemColors(),
+        getProducers(),
+        getOrigins(),
+        getSubcategories()
+    ];
+
+    await Promise.allSettled(promises);
+};
+
+const getItems = async () => {
+    console.log('getItems');
+    try {
+        if (!basketOrderId.value || !isSomeFilterSelected.value) return;
+        loading.value = true;
+
+        const res = await jApi.execQuery(
+            `DROP TEMPORARY TABLE IF EXISTS tmp.item;
+            CREATE TEMPORARY TABLE tmp.item
+            (INDEX (itemFk))
+            ENGINE = MEMORY
+            SELECT i.id itemFk
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            WHERE (${queryFilter.value});
+            CALL myOrder_calcCatalogFull(#orderId);
+            SELECT i.id, i.longName item, i.subName,
+            i.tag5, i.value5, i.tag6, i.value6,
+            i.tag7, i.value7, i.tag8, i.value8,
+            i.relevancy, i.size, i.category, b.minQuantity,
+            k.name ink, p.name producer, o.name origin,
+            b.available, b.price, b.grouping,
+            i.image, im.updated
+            FROM tmp.ticketCalculateItem b
+            JOIN vn.item i ON i.id = b.itemFk
+            LEFT JOIN vn.ink k ON k.id = i.inkFk
+            LEFT JOIN vn.producer p ON p.id = i.producerFk
+            LEFT JOIN vn.origin o ON o.id = i.originFk
+            LEFT JOIN image im ON im.collectionFk = 'catalog'
+            AND im.name = i.image
+            WHERE b.available > 0
+            ORDER BY ${selectedOrderBy.value}
+            LIMIT 5000;
+            DROP TEMPORARY TABLE tmp.item;
+            CALL vn.ticketCalculatePurge();`,
+            { orderId: basketOrderId.value }
+        );
+        items.value = res.results[3].data;
+        await onItemsFetched();
+        loading.value = false;
+    } catch (error) {
+        console.error('Error getting items:', error);
+    }
+};
+
+const debouncedGetItems = debounce(getItems, 400);
+const debouncedGetFilters = debounce(getFilters, 400);
+
 const getOrder = async () => {
     try {
         const [data] = await jApi.query(
@@ -653,55 +647,6 @@ const onItemsFetched = async () => {
     });
 };
 
-const getItems = async () => {
-    try {
-        if (
-            !selectedCategory.value ||
-            !basketOrderId.value ||
-            !isSomeFilterSelected.value
-        )
-            return;
-        loading.value = true;
-
-        const res = await jApi.execQuery(
-            `DROP TEMPORARY TABLE IF EXISTS tmp.item;
-            CREATE TEMPORARY TABLE tmp.item
-            (INDEX (itemFk))
-            ENGINE = MEMORY
-            SELECT i.id itemFk
-            FROM vn.item i
-            JOIN vn.itemType t ON t.id = i.typeFk
-            WHERE (${queryFilter.value});
-            CALL myOrder_calcCatalogFull(#orderId);
-            SELECT i.id, i.longName item, i.subName,
-            i.tag5, i.value5, i.tag6, i.value6,
-            i.tag7, i.value7, i.tag8, i.value8,
-            i.relevancy, i.size, i.category, b.minQuantity,
-            k.name ink, p.name producer, o.name origin,
-            b.available, b.price, b.grouping,
-            i.image, im.updated
-            FROM tmp.ticketCalculateItem b
-            JOIN vn.item i ON i.id = b.itemFk
-            LEFT JOIN vn.ink k ON k.id = i.inkFk
-            LEFT JOIN vn.producer p ON p.id = i.producerFk
-            LEFT JOIN vn.origin o ON o.id = i.originFk
-            LEFT JOIN image im ON im.collectionFk = 'catalog'
-            AND im.name = i.image
-            WHERE b.available > 0
-            ORDER BY ${selectedOrderBy.value}
-            LIMIT 5000;
-            DROP TEMPORARY TABLE tmp.item;
-            CALL vn.ticketCalculatePurge();`,
-            { orderId: basketOrderId.value }
-        );
-        items.value = res.results[3].data;
-        await onItemsFetched();
-        loading.value = false;
-    } catch (error) {
-        console.error('Error getting items:', error);
-    }
-};
-
 const getProducers = async () => {
     try {
         const res = await jApi.execQuery(
@@ -762,18 +707,6 @@ const getSubcategories = async () => {
     }
 };
 
-const getFilters = async () => {
-    const promises = [
-        getItemFamilies(),
-        getItemColors(),
-        getProducers(),
-        getOrigins(),
-        getSubcategories()
-    ];
-
-    await Promise.allSettled(promises);
-};
-
 const showItem = async item => {
     if (isGuest.value) return;
 
@@ -796,7 +729,9 @@ const onCategoryChange = () => {
     selectedProducer.value = null;
     selectedOrigin.value = null;
     selectedSubcategory.value = null;
+    search.value = '';
     items.value = [];
+    router.push({ params: { category: category.value, type: null } });
 };
 
 const getItemTags = async itemFk => {
@@ -950,6 +885,16 @@ const onViewModeClick = () => {
     viewMode.value = viewMode.value === 'list' ? 'grid' : 'list';
 };
 
+watch(
+    () => route.query.search,
+    val => {
+        if (val) {
+            search.value = val;
+            debouncedGetItems();
+        }
+    }
+);
+
 onBeforeMount(async () => {
     if (!isGuest.value) {
         await appStore.check('catalog');
@@ -1021,13 +966,10 @@ en-US:
     added: Added
     listView: List view
     gridView: Grid view
+    filterBy: Filter by
 es-ES:
-    warehouse: Almacén
-    agency: Agencia
-    modify: Modificar
     category: Categoría
     deleteFilter: Quitar filtro
-    filterBy: Filtrar por
     family: Familia
     search: Buscar
     color: Color
@@ -1045,6 +987,7 @@ es-ES:
     added: Añadido
     listView: Vista de lista
     gridView: Vista de rejilla
+    filterBy: Filtrar por
 ca-ES:
     category: Categoría
     deleteFilter: Eliminar filtro
@@ -1063,6 +1006,7 @@ ca-ES:
     add: Afegir
     listView: Vista de llista
     gridView: Vista de graella
+    filterBy: Filtrar per
 fr-FR:
     category: Catégorie
     deleteFilter: Supprimer le filtre
@@ -1081,6 +1025,7 @@ fr-FR:
     add: Ajouter
     listView: Vue en liste
     gridView: Vue en grille
+    filterBy: Filtrer par
 pt-PT:
     category: Categoria
     deleteFilter: Apagar filtro
@@ -1099,4 +1044,5 @@ pt-PT:
     add: Adicionar
     listView: Vista de lista
     gridView: Vista de grade
+    filterBy: Filtrar por
 </i18n>
diff --git a/src/utils/debouncer.js b/src/utils/debouncer.js
new file mode 100644
index 00000000..2b915fb8
--- /dev/null
+++ b/src/utils/debouncer.js
@@ -0,0 +1,10 @@
+export default function debounce(callback, delay) {
+    let timeoutId;
+    return (...args) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            // eslint-disable-next-line
+            callback(...args);
+        }, delay);
+    };
+}

From 8664f40e06966f7060fd7592cbdcc61a68695207 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 23 Sep 2024 09:44:27 -0300
Subject: [PATCH 05/12] Small changes

---
 src/pages/Ecomerce/CatalogCard.vue | 17 +++++----
 src/pages/Ecomerce/CatalogView.vue | 57 +++++++++++++++---------------
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/pages/Ecomerce/CatalogCard.vue b/src/pages/Ecomerce/CatalogCard.vue
index 412f7e7c..d975e03a 100644
--- a/src/pages/Ecomerce/CatalogCard.vue
+++ b/src/pages/Ecomerce/CatalogCard.vue
@@ -93,7 +93,7 @@ const { t } = useI18n();
                     storage="catalog"
                     size="200x200"
                     :id="item.image"
-                    rounded="bottom"
+                    rounded-borders="full"
                     class="full-height full-width"
                 />
             </div>
@@ -106,15 +106,14 @@ const { t } = useI18n();
                 <span>{{ item.subName }}</span>
                 <span>#{{ item.id }}</span>
             </div>
-            <div
-                v-for="(tag, index) in item.previewTags"
-                :key="index"
-                class="full-width row"
-            >
-                <span class="text-grey-7 col">
-                    {{ tag.name }}
+            <div class="full-width row">
+                <span
+                    v-for="(tag, index) in item.previewTags"
+                    :key="index"
+                    class="text-grey-7 text-caption q-mr-sm"
+                >
+                    {{ tag.value }}
                 </span>
-                <span class="col ellipsis">{{ tag.value }}</span>
             </div>
             <div class="row justify-end items-center q-gutter-x-xs q-mt-sm">
                 <QBadge
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 909aa7cb..c87000e5 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -72,10 +72,10 @@
                             v-for="cat in categories"
                             :class="{ active: category == cat.id }"
                             :key="cat.id"
-                            :title="cat.name"
                             @click="selectedCategory = cat.id"
                         >
                             <img :src="`statics/category/${cat.code}.svg`" />
+                            <QTooltip>{{ cat.name }}</QTooltip>
                         </QBtn>
                     </div>
                 </div>
@@ -141,37 +141,35 @@
                 </span>
             </div>
         </QDrawer>
-        <QInfiniteScroll>
+        <div
+            :class="
+                viewMode === 'grid'
+                    ? 'q-pa-md row justify-center q-gutter-md'
+                    : 'column items-center'
+            "
+        >
+            <QSpinner
+                v-if="loading"
+                color="primary"
+                size="3em"
+                :thickness="2"
+            />
             <div
-                :class="
-                    viewMode === 'grid'
-                        ? 'q-pa-md row justify-center q-gutter-md'
-                        : 'column items-center'
-                "
+                v-else-if="!items || !items.length || !isSomeFilterSelected"
+                class="text-subtitle1 text-grey-7 q-pa-md"
             >
-                <QSpinner
-                    v-if="loading"
-                    color="primary"
-                    size="3em"
-                    :thickness="2"
-                />
-                <div
-                    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
-                    v-else
-                    v-for="_item in items"
-                    :key="_item.id"
-                    :item="_item"
-                    :view-mode="viewMode"
-                    @click="showItem(_item)"
-                />
+                <QIcon name="refresh" size="sm" class="q-mr-sm"></QIcon>
+                <span>{{ t('pleaseSetFilter') }}</span>
             </div>
-        </QInfiniteScroll>
+            <CatalogCard
+                v-else
+                v-for="_item in items"
+                :key="_item.id"
+                :item="_item"
+                :view-mode="viewMode"
+                @click="showItem(_item)"
+            />
+        </div>
         <QDialog v-model="showItemDialog">
             <QCard style="width: 25em" class="column">
                 <div class="q-pa-md" style="display: flex">
@@ -899,6 +897,7 @@ onBeforeMount(async () => {
     if (!isGuest.value) {
         await appStore.check('catalog');
     } else {
+        // TODO: Implement this logic when isGuest is implemented
         // const resultSet = await jApi.execQuery(
         //     'CALL myOrder_configureForGuest(@orderId); SELECT @orderId;'
         // );

From 101ac917a28efcd5dba111d4d36e6b47fee7a27f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 24 Sep 2024 08:40:38 -0300
Subject: [PATCH 06/12] Add await

---
 src/pages/Ecomerce/CatalogView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index c87000e5..23f21a6b 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -709,7 +709,7 @@ const showItem = async item => {
     if (isGuest.value) return;
 
     const itemLots = await calcItem(item.id);
-    const tags = getItemTags(item.id);
+    const tags = await getItemTags(item.id);
     item.lots = itemLots;
     item.tags = tags;
     showItemDialog.value = true;

From e6f0320cf576f74e41cc91c8aff4994d0c8aefc9 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 24 Sep 2024 09:03:59 -0300
Subject: [PATCH 07/12] Change view type button logic

---
 src/pages/Ecomerce/CatalogView.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 23f21a6b..593a2fd3 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -491,13 +491,12 @@ const isSomeFilterSelected = computed(() => {
 
 const viewTypeButtonContent = computed(() => {
     return {
-        label: t(viewMode.value === 'list' ? 'listView' : 'gridView'),
-        icon: viewMode.value === 'list' ? 'view_list' : 'grid_on'
+        label: t(viewMode.value === 'list' ? 'gridView' : 'listView'),
+        icon: viewMode.value === 'list' ? 'grid_on' : 'view_list'
     };
 });
 
 const getFilters = async () => {
-    console.log('getFilters');
     const promises = [
         getItemFamilies(),
         getItemColors(),
@@ -510,7 +509,6 @@ const getFilters = async () => {
 };
 
 const getItems = async () => {
-    console.log('getItems');
     try {
         if (!basketOrderId.value || !isSomeFilterSelected.value) return;
         loading.value = true;

From 58b7325605b4978968fbe656125056315431f553 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 24 Sep 2024 09:28:38 -0300
Subject: [PATCH 08/12] Fix image sizes

---
 src/pages/Ecomerce/CatalogCard.vue | 34 ++++++++++++++----------------
 src/pages/Ecomerce/CatalogView.vue | 21 +++++++-----------
 2 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/pages/Ecomerce/CatalogCard.vue b/src/pages/Ecomerce/CatalogCard.vue
index d975e03a..ea440862 100644
--- a/src/pages/Ecomerce/CatalogCard.vue
+++ b/src/pages/Ecomerce/CatalogCard.vue
@@ -16,15 +16,13 @@ const { t } = useI18n();
 
 <template>
     <QCard v-if="viewMode === 'grid'" v-ripple class="catalog-card">
-        <div style="height: 210px">
-            <VnImg
-                storage="catalog"
-                size="200x200"
-                :id="item.image"
-                rounded="bottom"
-                class="full-height full-width"
-            />
-        </div>
+        <VnImg
+            storage="catalog"
+            size="200x200"
+            :id="item.image"
+            height="210px"
+            rounded="bottom"
+        />
         <div class="column" style="height: 205px; padding: 10px">
             <div class="column" style="margin-bottom: auto">
                 <div class="text-subtitle2 ellipsis-2-lines">
@@ -88,15 +86,15 @@ const { t } = useI18n();
     </QCard>
     <CardList v-else class="vn-w-sm">
         <template #prepend>
-            <div style="min-height: 105px; min-width: 105px" class="q-mr-md">
-                <VnImg
-                    storage="catalog"
-                    size="200x200"
-                    :id="item.image"
-                    rounded-borders="full"
-                    class="full-height full-width"
-                />
-            </div>
+            <VnImg
+                storage="catalog"
+                size="200x200"
+                :id="item.image"
+                width="105px"
+                height="105px"
+                rounded-borders="full"
+                class="q-mr-md"
+            />
         </template>
         <template #content>
             <span class="ellipsis-2-lines">
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 593a2fd3..b58f908f 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -173,20 +173,15 @@
         <QDialog v-model="showItemDialog">
             <QCard style="width: 25em" class="column">
                 <div class="q-pa-md" style="display: flex">
-                    <div
+                    <VnImg
+                        storage="catalog"
+                        size="200x200"
+                        :id="'asd'"
+                        width="112px"
+                        height="112px"
+                        rounded="bottom"
                         class="q-mr-md"
-                        style="min-height: 112px; min-width: 112px"
-                    >
-                        <VnImg
-                            storage="catalog"
-                            size="200x200"
-                            :id="selectedItem.image"
-                            width="80px"
-                            height="80px"
-                            rounded="bottom"
-                            class="full-height full-width"
-                        />
-                    </div>
+                    />
                     <div class="column">
                         <div class="text-subtitle2">
                             {{ selectedItem.item }}

From 202c22b8a9494a5f513fc75255c74aaae84600be Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 24 Sep 2024 15:42:45 -0300
Subject: [PATCH 09/12] Add translation

---
 src/pages/Ecomerce/CatalogView.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index b58f908f..28c6c47a 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -137,7 +137,7 @@
                     v-else
                     class="flex full-width justify-center q-pt-lg text-h6 text-grey-7"
                 >
-                    Elige una categoria
+                    {{ t('chooseCategory') }}
                 </span>
             </div>
         </QDrawer>
@@ -959,6 +959,7 @@ en-US:
     listView: List view
     gridView: Grid view
     filterBy: Filter by
+    chooseCategory: Choose a category
 es-ES:
     category: Categoría
     deleteFilter: Quitar filtro
@@ -980,6 +981,7 @@ es-ES:
     listView: Vista de lista
     gridView: Vista de rejilla
     filterBy: Filtrar por
+    chooseCategory: Elige una categoría
 ca-ES:
     category: Categoría
     deleteFilter: Eliminar filtro
@@ -999,6 +1001,7 @@ ca-ES:
     listView: Vista de llista
     gridView: Vista de graella
     filterBy: Filtrar per
+    chooseCategory: Tria una categoria
 fr-FR:
     category: Catégorie
     deleteFilter: Supprimer le filtre
@@ -1018,6 +1021,7 @@ fr-FR:
     listView: Vue en liste
     gridView: Vue en grille
     filterBy: Filtrer par
+    chooseCategory: Choisissez une catégorie
 pt-PT:
     category: Categoria
     deleteFilter: Apagar filtro
@@ -1037,4 +1041,5 @@ pt-PT:
     listView: Vista de lista
     gridView: Vista de grade
     filterBy: Filtrar por
+    chooseCategory: Escolha uma categoria
 </i18n>

From 0f5014088d670c3e5cdbf63913672f14c6c3a4bf Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 24 Sep 2024 17:11:43 -0300
Subject: [PATCH 10/12] Handle minQuantity

---
 src/i18n/ca-ES/index.js            |  1 +
 src/i18n/en-US/index.js            |  1 +
 src/i18n/es-ES/index.js            |  1 +
 src/i18n/fr-FR/index.js            |  1 +
 src/i18n/pt-PT/index.js            |  1 +
 src/pages/Ecomerce/CatalogCard.vue | 28 ++++++++++
 src/pages/Ecomerce/CatalogView.vue | 88 ++++++++++++++++++------------
 7 files changed, 86 insertions(+), 35 deletions(-)

diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index 9cf1aba3..c21533d9 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -105,6 +105,7 @@ export default {
     modify: 'Modificar',
     shoppingCart: 'Cistella de la compra',
     available: 'Disponible',
+    minQuantity: 'Quantitat mínima',
     // Image related translations
     'Cant lock cache': 'No es pot bloquejar la memòria cau',
     'Bad file format': 'Format de fitxer no reconegut',
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 20105461..6938af07 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -138,6 +138,7 @@ export default {
     modify: 'Modify',
     shoppingCart: 'Shopping cart',
     available: 'Available',
+    minQuantity: 'Minimum quantity',
     // Image related translations
     'Cant lock cache': 'The cache could not be blocked',
     'Bad file format': 'Unrecognized file format',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index bbfaa58d..d826b2d8 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -137,6 +137,7 @@ export default {
     modify: 'Modificar',
     shoppingCart: 'Cesta de la compra',
     available: 'Disponible',
+    minQuantity: 'Cantidad mínima',
     // Image related translations
     'Cant lock cache': 'La caché no pudo ser bloqueada',
     'Bad file format': 'Formato de archivo no reconocido',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index af4dbf43..549eae58 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -105,6 +105,7 @@ export default {
     modify: 'Modifier',
     shoppingCart: 'Panier',
     available: 'Disponible',
+    minQuantity: 'Quantité minimum',
     // Image related translations
     'Cant lock cache': "Le cache n'a pas pu être verrouillé",
     'Bad file format': 'Format de fichier non reconnu',
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index 9b6f8f96..80b9a222 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -103,6 +103,7 @@ export default {
     modify: 'Modificar',
     shoppingCart: 'Cesta da compra',
     available: 'Disponível',
+    minQuantity: 'Quantidade mínima',
     // Image related translations
     'Cant lock cache': 'O cache não pôde ser bloqueado',
     'Bad file format': 'Formato de arquivo inválido',
diff --git a/src/pages/Ecomerce/CatalogCard.vue b/src/pages/Ecomerce/CatalogCard.vue
index ea440862..a53ce109 100644
--- a/src/pages/Ecomerce/CatalogCard.vue
+++ b/src/pages/Ecomerce/CatalogCard.vue
@@ -48,6 +48,20 @@ const { t } = useI18n();
                         <span class="col ellipsis">{{ tag.value }}</span>
                     </div>
                 </div>
+                <div v-if="item.minQuantity" class="row justify-end">
+                    <QIcon
+                        name="production_quantity_limits"
+                        size="xs"
+                        color="negative"
+                    >
+                        <QTooltip>
+                            {{ t('minQuantity') }}
+                        </QTooltip>
+                    </QIcon>
+                    <span class="text-negative text-caption">{{
+                        item.minQuantity
+                    }}</span>
+                </div>
             </div>
             <div class="row justify-between items-cente q-gutter-x-xs">
                 <QBadge
@@ -113,6 +127,20 @@ const { t } = useI18n();
                     {{ tag.value }}
                 </span>
             </div>
+            <div v-if="item.minQuantity" class="row justify-end">
+                <QIcon
+                    name="production_quantity_limits"
+                    size="xs"
+                    color="negative"
+                >
+                    <QTooltip>
+                        {{ t('minQuantity') }}
+                    </QTooltip>
+                </QIcon>
+                <span class="text-negative text-caption">{{
+                    item.minQuantity
+                }}</span>
+            </div>
             <div class="row justify-end items-center q-gutter-x-xs q-mt-sm">
                 <QBadge
                     :label="`x${item.grouping}`"
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 28c6c47a..a6aad1b1 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -170,39 +170,61 @@
                 @click="showItem(_item)"
             />
         </div>
-        <QDialog v-model="showItemDialog">
+        <QDialog v-model="showItemDialog" @hide="resetAmounts()">
             <QCard style="width: 25em" class="column">
-                <div class="q-pa-md" style="display: flex">
-                    <VnImg
-                        storage="catalog"
-                        size="200x200"
-                        :id="'asd'"
-                        width="112px"
-                        height="112px"
-                        rounded="bottom"
-                        class="q-mr-md"
-                    />
-                    <div class="column">
-                        <div class="text-subtitle2">
-                            {{ selectedItem.item }}
+                <div class="q-pa-md relative-position">
+                    <div class="q-mb-md" style="display: flex">
+                        <VnImg
+                            storage="catalog"
+                            size="200x200"
+                            :id="'asd'"
+                            width="112px"
+                            height="112px"
+                            rounded="bottom"
+                            class="q-mr-md"
+                        />
+                        <div class="column">
+                            <div class="text-subtitle2">
+                                {{ selectedItem.item }}
+                            </div>
+                            <span
+                                class="text-subtitle2 text-grey-7 text-uppercase"
+                            >
+                                {{ selectedItem.subName }}
+                            </span>
+                            <span class="text-grey-7">
+                                #{{ selectedItem.id }}</span
+                            >
+                        </div>
+                    </div>
+                    <div class="text-caption">
+                        <div
+                            v-for="(tag, index) in selectedItem.tags"
+                            :key="index"
+                            class="row"
+                        >
+                            <span class="text-grey-7" style="width: 35%">
+                                {{ tag.name }}
+                            </span>
+                            <span>{{ tag.value }}</span>
                         </div>
-                        <span class="text-subtitle2 text-grey-7 text-uppercase">
-                            {{ selectedItem.subName }}
-                        </span>
-                        <span class="text-grey-7"> #{{ selectedItem.id }}</span>
                     </div>
-                </div>
-
-                <div class="tags q-px-md text-caption">
                     <div
-                        v-for="(tag, index) in selectedItem.tags"
-                        :key="index"
-                        class="full-width row"
+                        v-if="selectedItem.minQuantity"
+                        class="row justify-end q-px-md absolute-bottom-right q-pa-md"
                     >
-                        <span class="text-grey-7 col-5">
-                            {{ tag.name }}
-                        </span>
-                        <span class="col">{{ tag.value }}</span>
+                        <QIcon
+                            name="production_quantity_limits"
+                            size="xs"
+                            color="negative"
+                        >
+                            <QTooltip>
+                                {{ t('minQuantity') }}
+                            </QTooltip>
+                        </QIcon>
+                        <span class="text-negative text-caption">{{
+                            selectedItem.minQuantity
+                        }}</span>
                     </div>
                 </div>
                 <div
@@ -808,6 +830,7 @@ const addItemToOrder = async params => {
         );
     } catch (error) {
         console.error('Error adding item to basket:', error);
+        throw error;
     }
 };
 
@@ -831,17 +854,14 @@ const onConfirmClick = async params => {
 
         if (amountSum > 0) {
             await Promise.all(addItemPromises);
-
             notify(
                 `${t('added')} ${amountSum} ${selectedItem.value.item}`,
                 'positive'
             );
         }
+        showItemDialog.value = false;
     } catch (error) {
         console.error('Error adding item to basket:', error);
-    } finally {
-        showItemDialog.value = false;
-        resetAmounts();
     }
 };
 
@@ -907,9 +927,6 @@ onBeforeMount(async () => {
 </script>
 
 <style lang="scss" scoped>
-.search {
-    max-width: 250px;
-}
 .basket-info {
     display: flex;
     flex-direction: column;
@@ -919,6 +936,7 @@ onBeforeMount(async () => {
     border-radius: 7px;
     text-align: center;
 }
+
 .categories {
     display: flex;
     flex-wrap: wrap;

From d8ec17532879099e866241176e0a19f272494105 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 24 Sep 2024 17:16:10 -0300
Subject: [PATCH 11/12] return from getOrder if basketOrderId is undefined

---
 src/pages/Ecomerce/CatalogView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index a6aad1b1..84e7aa68 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -574,6 +574,7 @@ const debouncedGetFilters = debounce(getFilters, 400);
 
 const getOrder = async () => {
     try {
+        if (!basketOrderId.value) return;
         const [data] = await jApi.query(
             `SELECT o.id, o.sent, ad.nickname, o.addressFk, o.agencyModeFk
 				    FROM myOrder o

From 4358ef70c0f04b67d338b2a71ce82b6bc1e577ee Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 25 Sep 2024 14:15:41 -0300
Subject: [PATCH 12/12] Add guest logic

---
 src/pages/Ecomerce/CatalogView.vue | 58 ++++++++++++++++++++----------
 src/pages/Login/LoginView.vue      | 21 ++++++++---
 src/stores/app.js                  |  5 +++
 src/stores/user.js                 |  4 +++
 4 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 84e7aa68..1faa5674 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -16,7 +16,7 @@
             <QBtn
                 icon="shopping_cart_checkout"
                 :label="t('shoppingCart')"
-                :to="{ name: 'basket' }"
+                @click="redirectToBasket()"
                 rounded
                 no-caps
             >
@@ -40,15 +40,7 @@
                             })
                         }}
                     </span>
-                    <QBtn
-                        rounded
-                        no-caps
-                        :to="{
-                            name: 'checkout',
-                            params: { id: appStore.basketOrderId },
-                            query: { continue: 'catalog' }
-                        }"
-                    >
+                    <QBtn rounded no-caps @click="redirectToCheckout()">
                         {{ t('modify') }}
                     </QBtn>
                 </div>
@@ -286,6 +278,7 @@ import CatalogCard from 'src/pages/Ecomerce/CatalogCard.vue';
 import VnSearchBar from 'src/components/ui/VnSearchBar.vue';
 
 import { useAppStore } from 'stores/app';
+import { useUserStore } from 'stores/user';
 import { storeToRefs } from 'pinia';
 import { formatDateTitle, currency } from 'src/lib/filters.js';
 import useNotify from 'src/composables/useNotify.js';
@@ -294,10 +287,12 @@ import debounce from 'src/utils/debouncer.js';
 const jApi = inject('jApi');
 const { t } = useI18n();
 const appStore = useAppStore();
+const userStore = useUserStore();
 const route = useRoute();
 const router = useRouter();
 const { isHeaderMounted, rightDrawerOpen, basketOrderId } =
     storeToRefs(appStore);
+const { isGuest } = storeToRefs(userStore);
 const { notify } = useNotify();
 
 const order = ref(null);
@@ -305,7 +300,6 @@ const items = ref([]);
 const selectedItem = ref(null);
 const showItemDialog = ref(false);
 const loading = ref(false);
-const isGuest = ref(false); // TODO: Integrate isGuest logic
 const viewMode = ref('grid');
 
 // Filters options
@@ -513,6 +507,15 @@ const viewTypeButtonContent = computed(() => {
     };
 });
 
+const checkGuest = () => {
+    if (isGuest.value) {
+        notify(t('youMustBeLoggedIn'), 'negative');
+        return true;
+    }
+
+    return false;
+};
+
 const getFilters = async () => {
     const promises = [
         getItemFamilies(),
@@ -722,7 +725,7 @@ const getSubcategories = async () => {
 };
 
 const showItem = async item => {
-    if (isGuest.value) return;
+    if (checkGuest()) return;
 
     const itemLots = await calcItem(item.id);
     const tags = await getItemTags(item.id);
@@ -897,6 +900,21 @@ const onViewModeClick = () => {
     viewMode.value = viewMode.value === 'list' ? 'grid' : 'list';
 };
 
+const redirectToCheckout = () => {
+    if (checkGuest()) return;
+
+    router.push({
+        name: 'checkout',
+        params: { id: basketOrderId.value },
+        query: { continue: 'catalog' }
+    });
+};
+
+const redirectToBasket = () => {
+    if (checkGuest()) return;
+    router.push({ name: 'basket' });
+};
+
 watch(
     () => route.query.search,
     val => {
@@ -911,12 +929,11 @@ onBeforeMount(async () => {
     if (!isGuest.value) {
         await appStore.check('catalog');
     } else {
-        // TODO: Implement this logic when isGuest is implemented
-        // const resultSet = await jApi.execQuery(
-        //     'CALL myOrder_configureForGuest(@orderId); SELECT @orderId;'
-        // );
-        // resultSet.fetchResult();
-        // this.orderId = resultSet.fetchValue();
+        const resultSet = await jApi.execQuery(
+            'CALL myOrder_configureForGuest(@orderId); SELECT @orderId;'
+        );
+        resultSet.fetchResult();
+        appStore.basketOrderId = resultSet.fetchValue();
     }
     await getOrder();
     await getCategories();
@@ -979,6 +996,7 @@ en-US:
     gridView: Grid view
     filterBy: Filter by
     chooseCategory: Choose a category
+    youMustBeLoggedIn: You must be a registered user
 es-ES:
     category: Categoría
     deleteFilter: Quitar filtro
@@ -1001,6 +1019,7 @@ es-ES:
     gridView: Vista de rejilla
     filterBy: Filtrar por
     chooseCategory: Elige una categoría
+    youMustBeLoggedIn: Debes estar registrado como usuario
 ca-ES:
     category: Categoría
     deleteFilter: Eliminar filtro
@@ -1021,6 +1040,7 @@ ca-ES:
     gridView: Vista de graella
     filterBy: Filtrar per
     chooseCategory: Tria una categoria
+    youMustBeLoggedIn: Has d'estar registrat com a usuari
 fr-FR:
     category: Catégorie
     deleteFilter: Supprimer le filtre
@@ -1041,6 +1061,7 @@ fr-FR:
     gridView: Vue en grille
     filterBy: Filtrer par
     chooseCategory: Choisissez une catégorie
+    youMustBeLoggedIn: Vous devez être un utilisateur enregistré
 pt-PT:
     category: Categoria
     deleteFilter: Apagar filtro
@@ -1061,4 +1082,5 @@ pt-PT:
     gridView: Vista de grade
     filterBy: Filtrar por
     chooseCategory: Escolha uma categoria
+    youMustBeLoggedIn: Deves estar registrado como usuario
 </i18n>
diff --git a/src/pages/Login/LoginView.vue b/src/pages/Login/LoginView.vue
index dc159e94..1dabc431 100644
--- a/src/pages/Login/LoginView.vue
+++ b/src/pages/Login/LoginView.vue
@@ -41,12 +41,23 @@ onMounted(() => {
         password.value.focus();
     }
 });
-async function onLogin() {
-    await userStore.login(email.value, password.value, remember.value);
+
+const onLogin = async () => {
     await userStore.fetchUser();
     await userStore.updateUserLang(selectedLocaleValue.value);
     await router.push('/');
-}
+};
+
+const login = async () => {
+    await userStore.login(email.value, password.value, remember.value);
+    await onLogin();
+};
+
+const loginAsGuest = async () => {
+    userStore.isGuest = true;
+    localStorage.setItem('hederaGuest', true);
+    await onLogin();
+};
 </script>
 
 <template>
@@ -56,7 +67,7 @@ async function onLogin() {
                 <img src="statics/logo.svg" alt="Verdnatura" class="block" />
             </router-link>
         </div>
-        <QForm @submit="onLogin" class="q-gutter-y-md">
+        <QForm @submit="login()" class="q-gutter-y-md">
             <div class="q-gutter-y-sm">
                 <QInput v-model="email" :label="$t('user')" autofocus />
                 <QInput
@@ -106,7 +117,7 @@ async function onLogin() {
             </div>
             <div class="justify-center">
                 <QBtn
-                    to="/"
+                    @click="loginAsGuest()"
                     :label="$t('logInAsGuest')"
                     class="full-width"
                     color="primary"
diff --git a/src/stores/app.js b/src/stores/app.js
index 184fbb71..ece6d4bb 100644
--- a/src/stores/app.js
+++ b/src/stores/app.js
@@ -139,6 +139,11 @@ export const useAppStore = defineStore('hedera', {
         unloadOrder() {
             localStorage.removeItem(storageOrderName);
             this.basketOrderId = null;
+        },
+
+        onLogout() {
+            this.unloadOrder();
+            this.menuEssentialLinks = [];
         }
     },
     getters: {
diff --git a/src/stores/user.js b/src/stores/user.js
index fe662e86..4fc4c650 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { api, jApi } from 'boot/axios';
 import { i18n } from 'src/boot/i18n';
 import useNotify from 'src/composables/useNotify.js';
+import { useAppStore } from 'src/stores/app.js';
 
 const { t } = i18n.global;
 const { notify } = useNotify();
@@ -35,6 +36,7 @@ export const useUserStore = defineStore('user', {
 
     actions: {
         async init() {
+            this.isGuest = localStorage.getItem('hederaGuest') || false;
             await this.fetchUser();
             await this.supplantInit();
             this.updateSiteLocale();
@@ -71,6 +73,8 @@ export const useUserStore = defineStore('user', {
                 sessionStorage.removeItem('vnToken');
             }
             this.$reset();
+            localStorage.removeItem('hederaGuest');
+            useAppStore().onLogout();
         },
 
         async fetchUser(userType = 'user') {