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 VnTitle from 'src/components/common/VnTitle.vue';

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

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

const entityId = computed(() => $props.id || route.params.id);
const getUrl = (id, param) => `#/Item/${id}/${param}`;
</script>
<template>
    <CardSummary
        ref="summary"
        :url="`Items/${entityId}/getSummary`"
        :entity-id="entityId"
        data-key="ItemSummary"
    >
        <template #header-left>
            <QBtn
                v-if="$route.name !== 'ItemSummary'"
                :to="{ name: 'ItemSummary', params: { id: entityId } }"
                class="header link--white"
                icon="open_in_new"
                flat
                dense
                round
            />
        </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">
                <VnTitle
                    :url="getUrl(entityId, 'basic-data')"
                    :text="t('globals.summary.basicData')"
                />
                <VnLv :label="t('globals.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('globals.size')" :value="item.size" />
                <VnLv :label="t('globals.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">
                <VnTitle
                    :url="getUrl(entityId, 'basic-data')"
                    :text="t('item.summary.basicData')"
                />
                <VnLv
                    :label="t('item.summary.intrastatCode')"
                    :value="item.intrastat.id"
                />
                <VnLv
                    :label="t('globals.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"
                />
            </QCard>
            <QCard class="vn-one">
                <VnTitle :url="getUrl(entityId, 'tags')" :text="t('globals.tags')" />
                <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">
                <VnTitle
                    :url="getUrl(entityId, 'basic-data')"
                    :text="t('globals.description')"
                />
                <p v-text="item.description" />
            </QCard>
            <QCard class="vn-one">
                <VnTitle :url="getUrl(entityId, 'tax')" :text="t('item.summary.tax')" />
                <VnLv
                    v-for="(tax, index) in item.taxes"
                    :key="index"
                    :label="tax.country.name"
                    :value="tax.taxClass.description"
                />
            </QCard>
            <QCard class="vn-one">
                <VnTitle
                    :url="getUrl(entityId, 'botanical')"
                    :text="t('item.summary.botanical')"
                />
                <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">
                <VnTitle
                    :url="getUrl(entityId, 'barcode')"
                    :text="t('item.summary.barcode')"
                />
                <div
                    class="text-bold"
                    v-for="(barcode, index) in item.itemBarcode"
                    :key="index"
                    v-text="barcode.code"
                />
            </QCard>
        </template>
    </CardSummary>
</template>
<i18n>
en:
    Este artículo necesita una foto: Este artículo necesita una foto
</i18n>