salix-front/src/pages/Item/Card/ItemSummary.vue

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';

import { useRole } from 'src/composables/useRole';

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});

const route = useRoute();
const { t } = useI18n();
const roleState = useRole();

const entityId = computed(() => $props.id || route.params.id);

const isBuyer = computed(() => {
    return roleState.hasAny(['buyer']);
});

const isReplenisher = computed(() => {
    return roleState.hasAny(['replenisher']);
});

const isAdministrative = computed(() => {
    return roleState.hasAny(['administrative']);
});
</script>

<template>
    <CardSummary
        ref="summary"
        :url="`Items/${entityId}/getSummary`"
        :entity-id="entityId"
        data-key="ItemSummary"
    >
        <template #header-left>
            <router-link
                v-if="route.name !== 'ItemSummary'"
                :to="{ name: 'ItemSummary', params: { id: entityId } }"
                class="header link"
            >
                <QIcon name="open_in_new" color="white" size="sm" />
            </router-link>
        </template>
        <template #header="{ entity: { item } }">
            {{ item.id }} - {{ item.name }}
        </template>
        <template #body="{ entity: { item, tags, visible, available, botanical } }">
            <QCard class="vn-one photo">
                <ItemDescriptorImage
                    :entity-id="entityId"
                    :visible="visible"
                    :available="available"
                    :show-edit-button="false"
                />
            </QCard>
            <QCard class="vn-one">
                <component
                    :is="isBuyer ? 'router-link' : 'span'"
                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
                    class="header"
                    :class="{ 'header-link': isBuyer }"
                >
                    {{ t('item.summary.basicData') }}
                    <QIcon v-if="isBuyer" name="open_in_new" />
                </component>
                <VnLv :label="t('item.summary.name')" :value="item.name" />
                <VnLv :label="t('item.summary.completeName')" :value="item.longName" />
                <VnLv :label="t('item.summary.family')" :value="item.itemType.name" />
                <VnLv :label="t('item.summary.size')" :value="item.size" />
                <VnLv :label="t('item.summary.origin')" :value="item.origin.name" />
                <VnLv :label="t('item.summary.stems')" :value="item.stems" />
                <VnLv
                    :label="t('item.summary.multiplier')"
                    :value="item.stemMultiplier"
                />

                <VnLv :label="t('item.summary.buyer')">
                    <template #value>
                        <VnUserLink
                            :name="item.itemType.worker.user.name"
                            :worker-id="item.itemType.worker.id"
                        />
                    </template>
                </VnLv>
                <VnLv :info="t('Este artículo necesita una foto')">
                    <template #value>
                        <QCheckbox
                            :label="t('item.summary.doPhoto')"
                            v-model="item.isPhotoRequested"
                            :disable="true"
                        />
                    </template>
                </VnLv>
            </QCard>
            <QCard class="vn-one">
                <component
                    :is="isBuyer ? 'router-link' : 'span'"
                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
                    class="header"
                    :class="{ 'header-link': isBuyer }"
                >
                    {{ t('item.summary.otherData') }}
                    <QIcon v-if="isBuyer" name="open_in_new" />
                </component>
                <VnLv
                    :label="t('item.summary.intrastatCode')"
                    :value="item.intrastat.id"
                />
                <VnLv
                    :label="t('item.summary.intrastat')"
                    :value="item.intrastat.description"
                />
                <VnLv :label="t('item.summary.ref')" :value="item.comment" />
                <VnLv :label="t('item.summary.relevance')" :value="item.relevancy" />
                <VnLv :label="t('item.summary.weight')" :value="item.weightByPiece" />
                <VnLv :label="t('item.summary.units')" :value="item.packingOut" />
                <VnLv :label="t('item.summary.expense')" :value="item.expense.name" />
                <VnLv :label="t('item.summary.generic')" :value="item.genericFk" />
                <VnLv
                    :label="t('item.summary.recycledPlastic')"
                    :value="item.recycledPlastic"
                />
                <VnLv
                    :label="t('item.summary.nonRecycledPlastic')"
                    :value="item.nonRecycledPlastic"
                />
                <VnLv
                    :label="t('item.summary.minSalesQuantity')"
                    :value="item.minQuantity"
                />
            </QCard>
            <QCard class="vn-one">
                <component
                    :is="isBuyer || isReplenisher ? 'router-link' : 'span'"
                    :to="{ name: 'ItemTags', params: { id: entityId } }"
                    class="header"
                    :class="{ 'header-link': isBuyer || isReplenisher }"
                >
                    {{ t('item.summary.tags') }}
                    <QIcon v-if="isBuyer || isReplenisher" name="open_in_new" />
                </component>
                <VnLv
                    v-for="(tag, index) in tags"
                    :key="index"
                    :label="`${tag.priority} ${tag.tag.name}`"
                    :value="tag.value"
                />
            </QCard>
            <QCard class="vn-one" v-if="item.description">
                <component
                    :is="isBuyer ? 'router-link' : 'span'"
                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
                    class="header"
                    :class="{ 'header-link': isBuyer }"
                >
                    {{ t('item.summary.description') }}
                    <QIcon v-if="isBuyer" name="open_in_new" />
                </component>
                <p>
                    {{ item.description }}
                </p>
            </QCard>
            <QCard class="vn-one">
                <component
                    :is="isBuyer || isAdministrative ? 'router-link' : 'span'"
                    :to="{ name: 'ItemTax', params: { id: entityId } }"
                    class="header"
                    :class="{ 'header-link': isBuyer || isAdministrative }"
                >
                    {{ t('item.summary.tax') }}
                    <QIcon v-if="isBuyer || isAdministrative" name="open_in_new" />
                </component>
                <VnLv
                    v-for="(tax, index) in item.taxes"
                    :key="index"
                    :label="tax.country.country"
                    :value="tax.taxClass.description"
                />
            </QCard>
            <QCard class="vn-one">
                <component
                    :is="isBuyer ? 'router-link' : 'span'"
                    :to="{ name: 'ItemBotanical', params: { id: entityId } }"
                    class="header"
                    :class="{ 'header-link': isBuyer }"
                >
                    {{ t('item.summary.botanical') }}
                    <QIcon v-if="isBuyer" name="open_in_new" />
                </component>
                <VnLv :label="t('item.summary.genus')" :value="botanical?.genus?.name" />
                <VnLv
                    :label="t('item.summary.specie')"
                    :value="botanical?.specie?.name"
                />
            </QCard>
            <QCard class="vn-one">
                <component
                    :is="isBuyer || isReplenisher ? 'router-link' : 'span'"
                    :to="{ name: 'ItemBarcode', params: { id: entityId } }"
                    class="header"
                    :class="{ 'header-link': isBuyer || isReplenisher }"
                >
                    {{ t('item.summary.barcode') }}
                    <QIcon v-if="isBuyer || isReplenisher" name="open_in_new" />
                </component>
                <p v-for="(barcode, index) in item.itemBarcode" :key="index">
                    {{ barcode.code }}
                </p>
            </QCard>
        </template>
    </CardSummary>
</template>

<i18n>
en:
    Este artículo necesita una foto: Este artículo necesita una foto
</i18n>