salix-front/src/pages/Entry/Card/EntrySummary.vue

<script setup>
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate } from 'src/filters';
import { getUrl } from 'src/composables/getUrl';
import axios from 'axios';

import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
import EntryBuys from './EntryBuys.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import VnCheckbox from 'src/components/common/VnCheckbox.vue';
import VnToSummary from 'src/components/ui/VnToSummary.vue';

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

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

const entityId = computed(() => $props.id || route.params.id);
const summaryRef = ref();
const entry = ref();
const entryBuys = ref([]);
const entryUrl = ref();

async function setEntryData(data) {
    if (data) entry.value = data;
    await fetchEntryBuys();
}

const fetchEntryBuys = async () => {
    const { data } = await axios.get(`Entries/${entry.value.id}/getBuys`);
    if (data) entryBuys.value = data;
};

onMounted(async () => {
    entryUrl.value = (await getUrl('entry/')) + entityId.value;
});
</script>
<template>
    <CardSummary
        ref="summaryRef"
        :url="`Entries/${entityId}/getEntry`"
        @on-fetch="(data) => setEntryData(data)"
        data-key="EntrySummary"
        data-cy="entry-summary"
    >
        <template #header-left>
            <VnToSummary
                v-if="route?.name !== 'EntrySummary'"
                :route-name="'EntrySummary'"
                :entity-id="entityId"
                :url="entryUrl"
            />
        </template>
        <template #header>
            <span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
        </template>
        <template #body>
            <QCard class="vn-one">
                <VnTitle
                    :url="`#/entry/${entityId}/basic-data`"
                    :text="t('globals.summary.basicData')"
                />
                <div class="card-group">
                    <div class="card-content">
                        <VnLv
                            :label="t('entry.summary.commission')"
                            :value="entry?.commission"
                        />
                        <VnLv
                            :label="t('entry.summary.currency')"
                            :value="entry?.currency?.name"
                        />
                        <VnLv
                            :label="t('globals.company')"
                            :value="entry?.company?.code"
                        />
                        <VnLv :label="t('globals.reference')" :value="entry?.reference" />
                        <VnLv
                            :label="t('entry.summary.invoiceNumber')"
                            :value="entry?.invoiceNumber"
                        />
                    </div>
                    <div class="card-content">
                        <VnCheckbox
                            :label="t('entry.list.tableVisibleColumns.isOrdered')"
                            v-model="entry.isOrdered"
                            :disable="true"
                            size="xs"
                        />
                        <VnCheckbox
                            :label="t('entry.list.tableVisibleColumns.isConfirmed')"
                            v-model="entry.isConfirmed"
                            :disable="true"
                            size="xs"
                        />
                        <VnCheckbox
                            :label="t('entry.summary.booked')"
                            v-model="entry.isBooked"
                            :disable="true"
                            size="xs"
                        />
                        <VnCheckbox
                            :label="
                                t(
                                    'entry.list.tableVisibleColumns.isExcludedFromAvailable',
                                )
                            "
                            v-model="entry.isExcludedFromAvailable"
                            :disable="true"
                            size="xs"
                        />
                    </div>
                </div>
            </QCard>
            <QCard class="vn-one" v-if="entry?.travelFk">
                <VnTitle
                    :url="`#/travel/${entry.travel.id}/summary`"
                    :text="t('Travel')"
                />
                <div class="card-group">
                    <div class="card-content">
                        <VnLv :label="t('entry.summary.travelReference')">
                            <template #value>
                                <span class="link">
                                    {{ entry.travel.ref }}
                                    <TravelDescriptorProxy :id="entry.travel.id" />
                                </span>
                            </template>
                        </VnLv>
                        <VnLv
                            :label="t('entry.summary.travelAgency')"
                            :value="entry.travel.agency?.name"
                        />
                        <VnLv
                            :label="t('entry.summary.travelShipped')"
                            :value="toDate(entry.travel.shipped)"
                        />
                        <VnLv
                            :label="t('globals.warehouseOut')"
                            :value="entry.travel.warehouseOut?.name"
                        />
                        <VnLv
                            :label="t('entry.summary.travelLanded')"
                            :value="toDate(entry.travel.landed)"
                        />
                        <VnLv
                            :label="t('globals.warehouseIn')"
                            :value="entry.travel.warehouseIn?.name"
                        />
                    </div>
                    <div class="card-content">
                        <VnCheckbox
                            :label="t('entry.summary.travelDelivered')"
                            v-model="entry.travel.isDelivered"
                            :disable="true"
                            size="xs"
                        />
                        <VnCheckbox
                            :label="t('entry.summary.travelReceived')"
                            v-model="entry.travel.isReceived"
                            :disable="true"
                            size="xs"
                        />
                    </div>
                </div>
            </QCard>
            <QCard class="vn-max">
                <VnTitle
                    :url="`#/entry/${entityId}/buys`"
                    :text="t('entry.summary.buys')"
                />
                <EntryBuys
                    v-if="entityId"
                    :id="Number(entityId)"
                    :editable-mode="false"
                    table-height="49vh"
                />
            </QCard>
        </template>
    </CardSummary>
</template>
<style lang="scss" scoped>
.card-group {
    display: flex;
    flex-direction: column;
}

.card-content {
    display: flex;
    flex-direction: column;
    text-overflow: ellipsis;
    > div {
        max-height: 24px;
    }
}

@media (min-width: 1010px) {
    .card-group {
        flex-direction: row;
    }
    .card-content {
        flex: 1;
        margin-right: 16px;
    }
}
</style>
<i18n>
es:
    Travel: Envío
    InvoiceIn data: Datos factura
</i18n>