forked from verdnatura/salix-front
124 lines
4.0 KiB
Vue
124 lines
4.0 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { toDate } from 'src/filters';
|
|
|
|
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
|
|
import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
|
|
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const entityId = computed(() => {
|
|
return $props.id || route.params.id;
|
|
});
|
|
|
|
const filter = {
|
|
include: [
|
|
{ relation: 'client' },
|
|
{ relation: 'claimState' },
|
|
{
|
|
relation: 'claimState',
|
|
},
|
|
{
|
|
relation: 'worker',
|
|
scope: {
|
|
include: { relation: 'user' },
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
function stateColor(code) {
|
|
if (code === 'pending') return 'green';
|
|
if (code === 'managed') return 'orange';
|
|
if (code === 'resolved') return 'red';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<card-descriptor
|
|
ref="descriptor"
|
|
:url="`Claims/${entityId}`"
|
|
:filter="filter"
|
|
module="Claim"
|
|
>
|
|
<template #menu="{ entity }">
|
|
<claim-descriptor-menu :claim="entity" />
|
|
</template>
|
|
<template #description="{ entity }">
|
|
<span>
|
|
{{ entity.client.name }}
|
|
<q-tooltip>{{ entity.client.name }}</q-tooltip>
|
|
</span>
|
|
</template>
|
|
<template #body="{ entity }">
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
|
|
<q-item-label>{{ toDate(entity.created) }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section v-if="entity.claimState">
|
|
<q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
|
|
<q-item-label>
|
|
<q-chip :color="stateColor(entity.claimState.code)" dense>
|
|
{{ entity.claimState.description }}
|
|
</q-chip>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>
|
|
{{ t('claim.card.ticketId') }}
|
|
</q-item-label>
|
|
<q-item-label>
|
|
<span class="link">
|
|
{{ entity.ticketFk }}
|
|
|
|
<TicketDescriptorProxy :id="entity.ticketFk" />
|
|
</span>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section v-if="entity.worker">
|
|
<q-item-label caption>
|
|
{{ t('claim.card.assignedTo') }}
|
|
</q-item-label>
|
|
<q-item-label>{{ entity.worker.user.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
<q-card-actions>
|
|
<q-btn
|
|
size="md"
|
|
icon="vn:client"
|
|
color="primary"
|
|
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
|
|
>
|
|
<q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
size="md"
|
|
icon="vn:ticket"
|
|
color="primary"
|
|
:to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
|
|
>
|
|
<q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</template>
|
|
</card-descriptor>
|
|
</template>
|