Move template tag
gitea/hedera-web/pipeline/pr-beta This commit looks good
Details
gitea/hedera-web/pipeline/pr-beta This commit looks good
Details
This commit is contained in:
parent
ad767ecd2b
commit
a227bc34fa
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue