From a227bc34fa5352f568ede5975da442b26a8a874f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sun, 13 Apr 2025 12:39:46 +0200
Subject: [PATCH] Move template tag

---
 src/pages/Ecomerce/CatalogView.vue | 610 ++++++++++++++---------------
 1 file changed, 305 insertions(+), 305 deletions(-)

diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 915c34cf..ac990aed 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -1,308 +1,3 @@
-<template>
-    <Teleport v-if="isHeaderMounted" to="#actions">
-        <div class="row">
-            <VnSearchBar
-                @on-search-error="
-                    () => {
-                        items = [];
-                        search = '';
-                    }
-                "
-            />
-            <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')"
-                @click="redirectToBasket()"
-                rounded
-                no-caps
-                data-cy="catalogGoToBasketButton"
-            >
-                <QTooltip>
-                    {{ t('shoppingCart') }}
-                </QTooltip>
-            </QBtn>
-            <QBtn
-                v-if="!isDesktop"
-                flat
-                dense
-                round
-                icon="menu"
-                aria-label="Menu"
-                @click="toggleRightDrawer()"
-            />
-        </div>
-    </Teleport>
-    <div>
-        <QDrawer v-model="rightDrawerOpen" side="right" :width="250" persistent>
-            <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
-                        @click="redirectToCheckout()"
-                        data-cy="orderModifyButton"
-                        color="light-green-7"
-                        unelevated
-                        text-color="white"
-                    >
-                        {{ 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"
-                            @click="selectedCategory = cat.id"
-                            data-cy="catalogCategoryButton"
-                        >
-                            <img :src="`statics/category/${cat.icon}.svg`" />
-                            <QTooltip>{{ cat.name }}</QTooltip>
-                        </QBtn>
-                    </div>
-                </div>
-                <div class="q-mt-md" v-if="selectedCategory">
-                    <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')"
-                        data-cy="catalogFamilySelect"
-                    />
-                    <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')"
-                    />
-                    <div
-                        v-if="isSomeFilterSelected"
-                        class="q-mt-md text-grey-7"
-                    >
-                        {{ t('orderBy') }}
-                    </div>
-                    <VnSelect
-                        v-if="isSomeFilterSelected"
-                        v-model="selectedOrderBy"
-                        :options="orderByOptions"
-                        option-value="value"
-                        option-label="label"
-                        :is-clearable="false"
-                        :label="t('sort')"
-                    />
-                </div>
-                <span
-                    v-else
-                    class="flex full-width justify-center q-pt-lg text-h6 text-grey-7"
-                >
-                    {{ t('chooseCategory') }}
-                </span>
-            </div>
-        </QDrawer>
-        <div
-            :class="
-                viewMode === 'grid'
-                    ? ' row justify-center q-gutter-md'
-                    : 'column items-center'
-            "
-        >
-            <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"
-            >
-                <span>{{ t('pleaseSetFilter') }}</span>
-            </div>
-            <CatalogCard
-                v-else
-                v-for="_item in items"
-                :key="_item.id"
-                :item="_item"
-                :view-mode="viewMode"
-                @click="showItem(_item)"
-                data-cy="catalogCardElement"
-            />
-        </div>
-        <QDialog v-model="showItemDialog" @hide="resetAmounts()">
-            <QCard v-if="selectedItem" style="width: 25em" class="column">
-                <div class="q-pa-md relative-position">
-                    <div class="q-mb-md" style="display: flex">
-                        <VnImg
-                            storage="catalog"
-                            size="200x200"
-                            :id="selectedItem.image"
-                            width="112px"
-                            height="112px"
-                            rounded="bottom"
-                            class="q-mr-md"
-                        />
-                        <div class="column">
-                            <div class="text-subtitle2">
-                                {{ selectedItem.name }}
-                            </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>
-                    </div>
-                    <div
-                        v-if="selectedItem.minQuantity"
-                        class="row justify-end q-px-md absolute-bottom-right q-pa-md"
-                    >
-                        <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
-                    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)"
-                            data-cy="addItemQuantityButton"
-                        >
-                            <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()"
-                        data-cy="catalogAddToBasketButton"
-                    >
-                        <QTooltip>{{ t('confirm') }}</QTooltip>
-                    </QBtn>
-                </div>
-            </QCard>
-            <QSpinner v-else color="primary" size="3em" :thickness="5" />
-        </QDialog>
-    </div>
-</template>
-
 <script setup>
 import { useI18n } from 'vue-i18n';
 import {
@@ -1055,6 +750,311 @@ onBeforeMount(async () => {
 onBeforeUnmount(() => appStore.resetCustomTitle());
 </script>
 
+<template>
+    <Teleport v-if="isHeaderMounted" to="#actions">
+        <div class="row">
+            <VnSearchBar
+                @on-search-error="
+                    () => {
+                        items = [];
+                        search = '';
+                    }
+                "
+            />
+            <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')"
+                @click="redirectToBasket()"
+                rounded
+                no-caps
+                data-cy="catalogGoToBasketButton"
+            >
+                <QTooltip>
+                    {{ t('shoppingCart') }}
+                </QTooltip>
+            </QBtn>
+            <QBtn
+                v-if="!isDesktop"
+                flat
+                dense
+                round
+                icon="menu"
+                aria-label="Menu"
+                @click="toggleRightDrawer()"
+            />
+        </div>
+    </Teleport>
+    <div>
+        <QDrawer v-model="rightDrawerOpen" side="right" :width="250" persistent>
+            <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
+                        @click="redirectToCheckout()"
+                        data-cy="orderModifyButton"
+                        color="light-green-7"
+                        unelevated
+                        text-color="white"
+                    >
+                        {{ 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"
+                            @click="selectedCategory = cat.id"
+                            data-cy="catalogCategoryButton"
+                        >
+                            <img :src="`statics/category/${cat.icon}.svg`" />
+                            <QTooltip>{{ cat.name }}</QTooltip>
+                        </QBtn>
+                    </div>
+                </div>
+                <div class="q-mt-md" v-if="selectedCategory">
+                    <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')"
+                        data-cy="catalogFamilySelect"
+                    />
+                    <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')"
+                    />
+                    <div
+                        v-if="isSomeFilterSelected"
+                        class="q-mt-md text-grey-7"
+                    >
+                        {{ t('orderBy') }}
+                    </div>
+                    <VnSelect
+                        v-if="isSomeFilterSelected"
+                        v-model="selectedOrderBy"
+                        :options="orderByOptions"
+                        option-value="value"
+                        option-label="label"
+                        :is-clearable="false"
+                        :label="t('sort')"
+                    />
+                </div>
+                <span
+                    v-else
+                    class="flex full-width justify-center q-pt-lg text-h6 text-grey-7"
+                >
+                    {{ t('chooseCategory') }}
+                </span>
+            </div>
+        </QDrawer>
+        <div
+            :class="
+                viewMode === 'grid'
+                    ? ' row justify-center q-gutter-md'
+                    : 'column items-center'
+            "
+        >
+            <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"
+            >
+                <span>{{ t('pleaseSetFilter') }}</span>
+            </div>
+            <CatalogCard
+                v-else
+                v-for="_item in items"
+                :key="_item.id"
+                :item="_item"
+                :view-mode="viewMode"
+                @click="showItem(_item)"
+                data-cy="catalogCardElement"
+            />
+        </div>
+        <QDialog v-model="showItemDialog" @hide="resetAmounts()">
+            <QCard v-if="selectedItem" style="width: 25em" class="column">
+                <div class="q-pa-md relative-position">
+                    <div class="q-mb-md" style="display: flex">
+                        <VnImg
+                            storage="catalog"
+                            size="200x200"
+                            :id="selectedItem.image"
+                            width="112px"
+                            height="112px"
+                            rounded="bottom"
+                            class="q-mr-md"
+                        />
+                        <div class="column">
+                            <div class="text-subtitle2">
+                                {{ selectedItem.name }}
+                            </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>
+                    </div>
+                    <div
+                        v-if="selectedItem.minQuantity"
+                        class="row justify-end q-px-md absolute-bottom-right q-pa-md"
+                    >
+                        <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
+                    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)"
+                            data-cy="addItemQuantityButton"
+                        >
+                            <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()"
+                        data-cy="catalogAddToBasketButton"
+                    >
+                        <QTooltip>{{ t('confirm') }}</QTooltip>
+                    </QBtn>
+                </div>
+            </QCard>
+            <QSpinner v-else color="primary" size="3em" :thickness="5" />
+        </QDialog>
+    </div>
+</template>
+
 <style lang="scss" scoped>
 .basket-info {
     display: flex;