hedera-web-mindshore/src/pages/Ecomerce/CatalogCard.vue

<script setup>
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: () => {} },
    viewMode: { type: String, default: 'grid' }
});

const { t } = useI18n();
</script>

<template>
    <QCard
        v-if="viewMode === 'grid'"
        v-ripple
        class="catalog-card"
        data-testid="catalogCardGrid"
    >
        <VnImg
            storage="catalog"
            size="200x200"
            :id="item.image"
            height="210px"
            rounded="bottom"
        />
        <div
            class="column"
            style="height: 205px; padding: 10px"
            data-testid="catalogCardGridBody"
        >
            <div class="column" style="margin-bottom: auto">
                <div class="text-subtitle2 ellipsis-2-lines">
                    {{ item.item }}
                </div>
                <div
                    class="row justify-between 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
                        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>
                <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
                    :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>
    <CardList v-else class="vn-w-sm" data-testid="catalogCardList">
        <template #prepend>
            <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">
                {{ item.item }}
            </span>
            <div class="row justify-between text-uppercase text-grey-7">
                <span>{{ item.subName }}</span>
                <span>#{{ item.id }}</span>
            </div>
            <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>
            </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}`"
                    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>
.catalog-card {
    display: flex;
    flex-direction: column;
    width: 210px;
    overflow: hidden;
    cursor: pointer;
}
</style>

<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>