salix-front/src/pages/Ticket/Card/TicketDescriptor.vue

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import DepartmentDescriptorProxy from 'pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
import EntityDescriptor from 'components/ui/EntityDescriptor.vue';
import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { toDateTimeFormat } from 'src/filters/date';
import filter from './TicketFilter.js';
import FetchData from 'src/components/FetchData.vue';
import TicketProblems from 'src/components/TicketProblems.vue';
import axios from 'axios';

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

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

const entityId = computed(() => {
    return $props.id || route.params.id;
});
const problems = ref({});
const originalTicket = ref();

function ticketFilter(ticket) {
    return JSON.stringify({ clientFk: ticket.clientFk });
}
async function getClaims() {
    const userFilter = { where: { refundTicketFk: entityId.value } };
    const { data } = await axios.get(`TicketRefunds`, {
        params: { filter: JSON.stringify(userFilter) },
    });
    if (!data) return;
    originalTicket.value = data[0]?.originalTicketFk;
}
async function getProblems() {
    const { data } = await axios.get(`Tickets/getTicketProblems`, {params: { ids: [entityId.value] }});
    if (!data) return;
    problems.value = data[0];
}
function getInfo() {
    getClaims();
    getProblems();
}
</script>

<template>
    <EntityDescriptor
        :url="`Tickets/${entityId}`"
        :filter="filter"
        data-key="Ticket"
        :summary="$props.summary"
        @on-fetch="getInfo"
        width="lg-width"
    >
        <template #menu="{ entity }">
            <TicketDescriptorMenu :ticket="entity" />
        </template>
        <template #body="{ entity }">
            <VnLv :label="t('ticket.card.customerId')">
                <template #value>
                    <span class="link">
                        {{ entity.clientFk }}
                        <CustomerDescriptorProxy :id="entity.client?.id" />
                    </span>
                </template>
            </VnLv>
            <VnLv v-if="entity.ticketState" :label="t('globals.state')">
                <template #value>
                    <QBadge
                        text-color="black"
                        :color="entity.ticketState.state.classColor"
                        data-cy="ticketDescriptorStateBadge"
                    >
                        {{ entity.ticketState.state.name }}
                    </QBadge>
                </template>
            </VnLv>
            <VnLv :label="t('customer.summary.team')">
                <template #value>
                    <span class="link">
                        {{ entity?.client?.department?.name || '-' }}
                        <DepartmentDescriptorProxy :id="entity?.client?.departmentFk" />
                    </span>
                </template>
            </VnLv>
            <VnLv
                :label="t('globals.shipped')"
                :value="toDateTimeFormat(entity.shipped)"
            />
            <VnLv
                v-if="entity.agencyMode"
                :label="t('globals.agency')"
                :value="entity.agencyMode.name"
            />
            <VnLv :label="t('globals.warehouse')" :value="entity.warehouse?.name" />
            <VnLv :label="t('globals.alias')" :value="entity.nickname" />
        </template>
        <template #icons="{ entity }">
            <QCardActions class="q-gutter-x-xs">
                <TicketProblems :row="{ ...entity?.client, ...problems, ...entity }" />
            </QCardActions>
        </template>
        <template #actions="{ entity }">
            <QCardActions class="flex justify-center" style="padding-inline: 0">
                <QBtn
                    size="md"
                    icon="vn:client"
                    color="primary"
                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
                >
                    <QTooltip>{{ t('ticket.card.customerCard') }}</QTooltip>
                </QBtn>
                <QBtn
                    size="md"
                    icon="vn:ticket"
                    color="primary"
                    :to="{ name: 'TicketList', query: { table: ticketFilter(entity) } }"
                >
                    <QTooltip>{{ t('ticket.card.ticketList') }}</QTooltip>
                </QBtn>
                <QBtn
                    size="md"
                    icon="vn:basketadd"
                    color="primary"
                    :to="{
                        name: 'OrderList',
                        query: {
                            createForm: JSON.stringify({ clientFk: entity.clientFk }),
                        },
                    }"
                >
                    <QTooltip>{{ t('ticket.card.newOrder') }}</QTooltip>
                </QBtn>
                <QBtn
                    v-if="originalTicket"
                    size="md"
                    icon="vn:claims"
                    color="primary"
                    :to="{ name: 'TicketCard', params: { id: originalTicket } }"
                >
                    <QTooltip>{{ t('ticket.card.ticketClaimed') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </EntityDescriptor>
</template>

<i18n>
es:
    This ticket is deleted: Este ticket está eliminado
    Client inactive: Cliente inactivo
    Client not checked: Cliente no verificado
    Client has debt: Cliente con deuda
    Client Frozen: Cliente congelado
</i18n>