188 lines
7.6 KiB
Vue
188 lines
7.6 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import axios from 'axios';
|
|
|
|
import { useState } from 'src/composables/useState';
|
|
import { toDate } from 'src/filters';
|
|
|
|
const route = useRoute();
|
|
const state = useState();
|
|
const { t } = useI18n();
|
|
|
|
onMounted(async () => {
|
|
await fetch();
|
|
});
|
|
|
|
const ticket = ref(null);
|
|
|
|
async function fetch() {
|
|
const entityId = route.params.id;
|
|
|
|
const { data } = await axios.get(`Tickets/${entityId}/summary`);
|
|
|
|
if (data) ticket.value = data;
|
|
}
|
|
|
|
function stateColor(state) {
|
|
if (state.code === 'OK') return 'text-green';
|
|
if (state.code === 'FREE') return 'text-blue-3';
|
|
if (state.alertLevel === 1) return 'text-primary';
|
|
if (state.alertLevel === 0) return 'text-red';
|
|
}
|
|
</script>
|
|
<template>
|
|
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
|
|
<q-scroll-area class="fit text-grey-8 descriptor">
|
|
<div class="header bg-primary q-pa-sm">
|
|
<router-link :to="{ path: '/ticket/list' }">
|
|
<q-btn round flat dense size="md" icon="view_list" color="white">
|
|
<q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
|
|
</q-btn>
|
|
</router-link>
|
|
<router-link :to="{ name: 'TicketSummary', params: { id: route.params.id } }">
|
|
<q-btn round flat dense size="md" icon="launch" color="white">
|
|
<q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
|
|
</q-btn>
|
|
</router-link>
|
|
|
|
<q-btn round flat dense size="md" icon="more_vert" color="white">
|
|
<q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
|
|
<!-- <q-menu>
|
|
<q-list>
|
|
<q-item clickable v-ripple>Option 1</q-item>
|
|
<q-item clickable v-ripple>Option 2</q-item>
|
|
</q-list>
|
|
</q-menu> -->
|
|
</q-btn>
|
|
</div>
|
|
|
|
<div v-if="ticket" class="q-py-sm">
|
|
<q-list>
|
|
<q-item-label header class="ellipsis text-h5" :lines="1">
|
|
{{ ticket.nickname }}
|
|
<q-tooltip>{{ ticket.nickname }}</q-tooltip>
|
|
</q-item-label>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('ticket.card.ticketId') }}</q-item-label>
|
|
<q-item-label>#{{ ticket.id }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
|
|
<q-item-label :class="stateColor(ticket.ticketState.state)">
|
|
{{ ticket.ticketState.state.name }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('ticket.card.customerId') }}</q-item-label>
|
|
<q-item-label>{{ ticket.clientFk }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('ticket.card.salesPerson') }}</q-item-label>
|
|
<q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
|
|
<q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
|
|
<q-item-label>{{ toDate(ticket.shipped) }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
|
|
<q-item-label>{{ ticket.warehouse.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
<!-- <q-card-actions class="q-gutter-md">
|
|
<q-icon v-if="customer.isActive == false" name="vn:disabled" size="xs" color="primary">
|
|
<q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
|
|
</q-icon>
|
|
<q-icon v-if="customer.isFreezed == true" name="vn:frozen" size="xs" color="primary">
|
|
<q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
|
|
</q-icon>
|
|
<q-icon v-if="customer.debt > customer.credit" name="vn:risk" size="xs" color="primary">
|
|
<q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
|
|
</q-icon>
|
|
<q-icon v-if="customer.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
|
|
<q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
|
|
</q-icon>
|
|
<q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
|
|
<q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
|
|
</q-icon>
|
|
</q-card-actions> -->
|
|
<q-card-actions>
|
|
<q-btn size="md" icon="vn:client" color="primary">
|
|
<q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</div>
|
|
<!-- Skeleton -->
|
|
<div id="descriptor-skeleton" v-if="!ticket">
|
|
<div class="col q-pl-sm q-pa-sm">
|
|
<q-skeleton type="text" square height="45px" />
|
|
<q-skeleton type="text" square height="18px" />
|
|
<q-skeleton type="text" square height="18px" />
|
|
<q-skeleton type="text" square height="18px" />
|
|
</div>
|
|
|
|
<q-card-actions>
|
|
<q-skeleton size="40px" />
|
|
<q-skeleton size="40px" />
|
|
<q-skeleton size="40px" />
|
|
<q-skeleton size="40px" />
|
|
<q-skeleton size="40px" />
|
|
</q-card-actions>
|
|
</div>
|
|
|
|
<q-separator />
|
|
|
|
<q-list>
|
|
<q-item :to="{ name: 'TicketBoxing' }" clickable v-ripple>
|
|
<q-item-section avatar>
|
|
<q-icon name="vn:package" />
|
|
</q-item-section>
|
|
<q-item-section>{{ t('ticket.pageTitles.boxing') }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
<q-page-container>
|
|
<q-page class="q-pa-md">
|
|
<router-view></router-view>
|
|
</q-page>
|
|
</q-page-container>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.q-scrollarea__content {
|
|
max-width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.descriptor {
|
|
h5 {
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.q-card__actions {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|