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

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

import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
import axios from 'axios';
import { dashIfEmpty } from 'src/filters';
import { useArrayData } from 'src/composables/useArrayData';
import ItemDescriptorMenu from './ItemDescriptorMenu.vue';

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
    summary: {
        type: Object,
        default: null,
    },
    dated: {
        type: String,
        default: null,
    },
    saleFk: {
        type: Number,
        default: null,
    },
    warehouseFk: {
        type: Number,
        default: null,
    },
    proxyRender: {
        type: Boolean,
        default: false,
    },
});

const route = useRoute();
const { t } = useI18n();
const warehouseConfig = ref(null);
const entityId = computed(() => {
    return $props.id || route.params.id;
});

const mounted = ref();

const arrayDataStock = useArrayData('descriptorStock', {
    url: `Items/${entityId.value}/getVisibleAvailable`,
});

onMounted(async () => {
    await getItemConfigs();
    mounted.value = true;
});

const setData = async (entity) => {
    if (!entity) return;
    await updateStock();
};

const getItemConfigs = async () => {
    const { data } = await axios.get('ItemConfigs/findOne');
    if (!data) return;
    warehouseConfig.value = data.warehouseFk;
};
const updateStock = async () => {
    if (!mounted.value) return;
    await getItemConfigs();

    const params = {
        warehouseFk: $props.warehouseFk ?? warehouseConfig.value,
        dated: $props.dated,
    };

    if (!params.warehouseFk) return;

    const stock = useArrayData('descriptorStock', {
        url: `Items/${entityId.value}/getVisibleAvailable`,
        userParams: params,
    });
    const storeData = stock.store.data;
    if (storeData?.itemFk == entityId.value) return;
    await stock.fetch({});
};
</script>

<template>
    <CardDescriptor
        data-key="Item"
        :summary="$props.summary"
        :url="`Items/${entityId}/getCard`"
        @on-fetch="setData"
    >
        <template #menu>
            <ItemDescriptorMenu
                :entity-id="entityId"
                :warehouse-fk="warehouseFk"
                @regularized="updateStock"
            />
        </template>
        <template #before>
            <ItemDescriptorImage
                :entity-id="entityId"
                :visible="arrayDataStock.store.data?.visible"
                :available="arrayDataStock.store.data?.available"
            />
        </template>
        <template #body="{ entity }">
            <VnLv :label="t('item.descriptor.buyer')">
                <template #value>
                    <span class="link">
                        {{ entity.itemType?.worker?.user?.name }}
                        <WorkerDescriptorProxy :id="entity.itemType?.worker?.id ?? NaN" />
                    </span>
                </template>
            </VnLv>
            <VnLv :label="t('globals.producer')" :value="dashIfEmpty(entity.subName)" />
            <VnLv v-if="entity?.value5" :label="entity?.tag5" :value="entity.value5" />
            <VnLv v-if="entity?.value6" :label="entity?.tag6" :value="entity.value6" />
            <VnLv v-if="entity?.value7" :label="entity?.tag7" :value="entity.value7" />
        </template>
        <template #icons="{ entity }">
            <QCardActions v-if="entity" class="q-gutter-x-md">
                <QIcon
                    v-if="!entity.isActive"
                    name="vn:unavailable"
                    color="primary"
                    size="xs"
                >
                    <QTooltip>{{ t('Inactive article') }}</QTooltip>
                </QIcon>
            </QCardActions>
        </template>
        <template #actions="{}">
            <QCardActions class="row justify-center" v-if="proxyRender">
                <QBtn
                    :to="{
                        name: 'ItemDiary',
                        params: { id: entityId },
                        query: { warehouseFk, lineFk: $props.saleFk },
                    }"
                    size="md"
                    icon="vn:transaction"
                    color="primary"
                >
                    <QTooltip>{{ t('item.descriptor.itemDiary') }}</QTooltip>
                </QBtn>
                <QBtn
                    :to="{
                        name: 'ItemLastEntries',
                    }"
                    size="md"
                    icon="vn:regentry"
                    color="primary"
                >
                    <QTooltip>{{ t('item.descriptor.itemLastEntries') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </CardDescriptor>
</template>

<i18n>
es:
    Inactive article: Artículo inactivo
</i18n>

<style lang="scss" scoped>
.photo {
    height: 256px;
}

.edit-photo-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    cursor: pointer;
}

.separation-borders {
    border-left: 1px solid $white;
    border-right: 1px solid $white;
}
</style>