fixes #4801 Summary del módulo tickets #31

Merged
joan merged 4 commits from 4801-ticket-summary into dev 2022-12-13 11:54:17 +00:00
4 changed files with 226 additions and 237 deletions
Showing only changes of commit e35c11d714 - Show all commits

View File

@ -3,7 +3,6 @@ import toDate from './toDate';
import toCurrency from './toCurrency';
import toPercentage from './toPercentage';
import dashIfEmpty from './dashIfEmpty';
import zeroFill from './zeroFill';
export {
toLowerCase,
@ -11,5 +10,4 @@ export {
toCurrency,
toPercentage,
dashIfEmpty,
zeroFill
};

View File

@ -1,4 +0,0 @@
export default function (value, pad) {
const valueStr = String(value);
return valueStr.padStart(pad, '0');
}

View File

@ -3,7 +3,7 @@ import { onMounted, ref, computed, onUpdated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { dashIfEmpty, toDate, toCurrency, zeroFill } from 'src/filters';
import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
import FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
@ -33,7 +33,6 @@ async function fetch() {
const { data } = await axios.get(`Tickets/${entityId.value}/summary`);
if (data) {
ticket.value = data;
console.log(ticket.value);
salesLines.value = data.sales;
alexandre marked this conversation as resolved
Review

Quitar Console.log()

Quitar Console.log()
}
}
@ -92,7 +91,8 @@ async function changeState(value) {
<q-btn-dropdown
side
alexandre marked this conversation as resolved
Review

En vez de ponerlo de color negro, quizás probaría con otro color de la gama "orange", de la paleta de colores, quizás un color más claro y apagado que el encabezado:
https://quasar.dev/style/color-palette

En vez de ponerlo de color negro, quizás probaría con otro color de la gama "orange", de la paleta de colores, quizás un color más claro y apagado que el encabezado: https://quasar.dev/style/color-palette
top
color="dark"
color="orange-11"
text-color="black"
:label="t('ticket.summary.changeState')"
:disable="!isEditable()"
>
@ -248,199 +248,221 @@ async function changeState(value) {
</div>
<div class="row q-pa-md" v-if="salesLines.length > 0">
<div class="col">
<q-item-label header class="text-h6">
{{ t('ticket.summary.saleLines') }}
<q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
</q-item-label>
<q-table :rows="ticket.sales">
<template #header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th auto-width>{{ t('ticket.summary.item') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.visible') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.available') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.discount') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.amount') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.packing') }}</q-th>
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td>
<q-btn
flat
round
size="xs"
icon="vn:claims"
v-if="props.row.claim"
color="primary"
:to="{ name: 'ClaimCard', params: { id: props.row.claim.claimFk } }"
>
<q-tooltip
>{{ t('ticket.summary.claim') }}:
{{ props.row.claim.claimFk }}</q-tooltip
<q-list>
<q-item-label header class="text-h6">
{{ t('ticket.summary.saleLines') }}
<router-link
:to="{ name: 'TicketBasicData', params: { id: entityId } }"
target="_blank"
>
<q-icon name="open_in_new" />
</router-link>
</q-item-label>
<q-table :rows="ticket.sales" flat>
<template #header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th auto-width>{{ t('ticket.summary.item') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.visible') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.available') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.discount') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.amount') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.packing') }}</q-th>
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td>
<q-btn
flat
round
size="xs"
icon="vn:claims"
v-if="props.row.claim"
color="primary"
:to="{ name: 'ClaimCard', params: { id: props.row.claim.claimFk } }"
>
</q-btn>
<q-btn
flat
round
size="xs"
icon="vn:claims"
v-if="props.row.claimBeginning"
color="primary"
:to="{
name: 'ClaimCard',
params: { id: props.row.claimBeginning.claimFk },
}"
>
<q-tooltip
>{{ t('ticket.summary.claim') }}:
{{ props.row.claimBeginning.claimFk }}</q-tooltip
<q-tooltip
>{{ t('ticket.summary.claim') }}:
{{ props.row.claim.claimFk }}</q-tooltip
>
</q-btn>
<q-btn
flat
round
size="xs"
icon="vn:claims"
v-if="props.row.claimBeginning"
color="primary"
:to="{
name: 'ClaimCard',
params: { id: props.row.claimBeginning.claimFk },
}"
>
</q-btn>
<q-icon name="warning" v-show="props.row.visible < 0" size="xs" color="primary">
<q-tooltip
>{{ t('ticket.summary.visible') }}: {{ props.row.visible }}</q-tooltip
<q-tooltip
>{{ t('ticket.summary.claim') }}:
{{ props.row.claimBeginning.claimFk }}</q-tooltip
>
</q-btn>
<q-icon
name="warning"
v-show="props.row.visible < 0"
size="xs"
color="primary"
>
</q-icon>
<q-icon name="vn:reserva" v-show="props.row.reserved" size="xs" color="primary">
<q-tooltip>{{ t('ticket.summary.reserved') }}</q-tooltip>
</q-icon>
<q-icon
name="vn:unavailable"
v-show="props.row.itemShortage"
size="xs"
color="primary"
>
<q-tooltip>{{ t('ticket.summary.itemShortage') }}</q-tooltip>
</q-icon>
<q-icon
name="vn:components"
v-show="props.row.hasComponentLack"
size="xs"
color="primary"
>
<q-tooltip>{{ t('ticket.summary.hasComponentLack') }}</q-tooltip>
</q-icon>
</q-td>
<q-td class="link">{{ zeroFill(props.row.itemFk, 6) }}</q-td>
<q-td>{{ props.row.visible }}</q-td>
<q-td>{{ props.row.available }}</q-td>
<q-td>{{ props.row.quantity }}</q-td>
<q-td>
<div class="fetched-tags">
<span>{{ props.row.item.name }}</span>
<span v-if="props.row.item.subName" class="subName">{{
props.row.item.subName
}}</span>
</div>
<fetched-tags :item="props.row.item" :max-length="5"></fetched-tags>
</q-td>
<q-td>{{ props.row.price }}</q-td>
<q-td>{{ props.row.discount }} %</q-td>
<q-td
>{{
toCurrency(
props.row.quantity *
props.row.price *
((100 - props.row.discount) / 100)
)
}}
</q-td>
<q-td>{{ dashIfEmpty(props.row.item.itemPackingTypeFk) }}</q-td>
</q-tr>
</template>
</q-table>
<q-tooltip
>{{ t('ticket.summary.visible') }}:
{{ props.row.visible }}</q-tooltip
>
</q-icon>
<q-icon
name="vn:reserva"
v-show="props.row.reserved"
size="xs"
color="primary"
>
<q-tooltip>{{ t('ticket.summary.reserved') }}</q-tooltip>
</q-icon>
<q-icon
name="vn:unavailable"
v-show="props.row.itemShortage"
size="xs"
color="primary"
>
<q-tooltip>{{ t('ticket.summary.itemShortage') }}</q-tooltip>
</q-icon>
<q-icon
name="vn:components"
v-show="props.row.hasComponentLack"
size="xs"
color="primary"
>
<q-tooltip>{{ t('ticket.summary.hasComponentLack') }}</q-tooltip>
</q-icon>
</q-td>
<q-td class="link">{{ props.row.itemFk }}</q-td>
<q-td>{{ props.row.visible }}</q-td>
<q-td>{{ props.row.available }}</q-td>
<q-td>{{ props.row.quantity }}</q-td>
<q-td>
<div class="fetched-tags">
<span>{{ props.row.item.name }}</span>
<span v-if="props.row.item.subName" class="subName">{{
props.row.item.subName
}}</span>
</div>
<fetched-tags :item="props.row.item" :max-length="5"></fetched-tags>
</q-td>
<q-td>{{ props.row.price }}</q-td>
<q-td>{{ props.row.discount }} %</q-td>
<q-td
>{{
toCurrency(
props.row.quantity *
props.row.price *
((100 - props.row.discount) / 100)
)
}}
</q-td>
<q-td>{{ dashIfEmpty(props.row.item.itemPackingTypeFk) }}</q-td>
</q-tr>
</template>
</q-table>
</q-list>
</div>
</div>
<div class="row q-pa-md" v-if="ticket.packagings.length > 0 || ticket.services.length > 0">
<div class="col" v-if="ticket.packagings.length > 0">
<q-item-label header class="text-h6">
{{ t('ticket.summary.packages') }}
<q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
</q-item-label>
<q-table :rows="ticket.packagings">
<template #header="props">
<q-tr :props="props">
<q-th auto-width>{{ t('ticket.summary.created') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.package') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td>{{ toDate(props.row.created) }}</q-td>
<q-td>{{ props.row.packaging.item.name }}</q-td>
<q-td>{{ props.row.quantity }}</q-td>
</q-tr>
</template>
</q-table>
<q-list>
<q-item-label header class="text-h6">
{{ t('ticket.summary.packages') }}
<q-icon name="open_in_new" />
</q-item-label>
alexandre marked this conversation as resolved Outdated
Outdated
Review

Seguir la misma estructura de encabezado de apartados, similar al de CustomerSummary, con el icono en el lado derecho.

Seguir la misma estructura de encabezado de apartados, similar al de CustomerSummary, con el icono en el lado derecho.
<q-table :rows="ticket.packagings" flat>
<template #header="props">
<q-tr :props="props">
<q-th auto-width>{{ t('ticket.summary.created') }}</q-th>
alexandre marked this conversation as resolved Outdated
Outdated
Review

Quitar fondo de la tabla

Quitar fondo de la tabla
<q-th auto-width>{{ t('ticket.summary.package') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td>{{ toDate(props.row.created) }}</q-td>
<q-td>{{ props.row.packaging.item.name }}</q-td>
<q-td>{{ props.row.quantity }}</q-td>
</q-tr>
</template>
</q-table>
</q-list>
</div>
<div class="col" v-if="ticket.services.length > 0">
<q-item-label header class="text-h6">
{{ t('ticket.summary.services') }}
<q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
</q-item-label>
<q-table :rows="ticket.services">
<template #header="props">
<q-tr :props="props">
<q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.taxClass') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.amount') }}</q-th>
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td>{{ props.row.quantity }}</q-td>
<q-td>{{ props.row.description }}</q-td>
<q-td>{{ toCurrency(props.row.price) }}</q-td>
<q-td>{{ props.row.taxClass.description }}</q-td>
<q-td>{{ toCurrency(props.row.quantity * props.row.price) }}</q-td>
</q-tr>
</template>
</q-table>
<q-list>
<q-item-label header class="text-h6">
{{ t('ticket.summary.services') }}
<q-icon name="open_in_new" />
</q-item-label>
<q-table :rows="ticket.services" flat>
<template #header="props">
<q-tr :props="props">
<q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.taxClass') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.amount') }}</q-th>
alexandre marked this conversation as resolved Outdated
Outdated
Review

Quitar el fondo de la tabla, ahora mismo es un card dentro de otro card.

Quitar el fondo de la tabla, ahora mismo es un card dentro de otro card.
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td>{{ props.row.quantity }}</q-td>
<q-td>{{ props.row.description }}</q-td>
<q-td>{{ toCurrency(props.row.price) }}</q-td>
<q-td>{{ props.row.taxClass.description }}</q-td>
<q-td>{{ toCurrency(props.row.quantity * props.row.price) }}</q-td>
</q-tr>
</template>
</q-table>
</q-list>
</div>
</div>
<div class="row q-pa-md" v-if="ticket.requests.length > 0">
<div class="col">
<q-item-label header class="text-h6">
{{ t('ticket.summary.request') }}
<q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
</q-item-label>
<q-table :rows="ticket.requests">
<template #header="props">
<q-tr :props="props">
<q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.created') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.requester') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.atender') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.item') }}</q-th>
<q-th auto-width>Ok</q-th>
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td>{{ props.row.description }}</q-td>
<q-td>{{ toDate(props.row.created) }}</q-td>
<q-td>{{ props.row.requester.user.name }}</q-td>
<q-td>{{ props.row.atender.user.name }}</q-td>
<q-td>{{ props.row.quantity }}</q-td>
<q-td>{{ toCurrency(props.row.price) }}</q-td>
<q-td v-if="!props.row.sale">-</q-td>
<q-td v-if="props.row.sale" class="link">{{
zeroFill(props.row.sale.itemFk, 6)
}}</q-td>
<q-td><q-checkbox v-model="props.row.isOk" :disable="true" /></q-td>
</q-tr>
</template>
</q-table>
<q-list>
<q-item-label header class="text-h6">
{{ t('ticket.summary.request') }}
<q-icon name="open_in_new" />
</q-item-label>
<q-table :rows="ticket.requests" flat>
<template #header="props">
<q-tr :props="props">
<q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.created') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.requester') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.atender') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
<q-th auto-width>{{ t('ticket.summary.item') }}</q-th>
<q-th auto-width>Ok</q-th>
</q-tr>
</template>
alexandre marked this conversation as resolved Outdated
Outdated
Review

Reducir el tamaño máximo de la vista previa y comprobar que se vea correctamente desde el listado de tickets. Ejemplo ClientSummary, tiene max-width de 1200px

Reducir el tamaño máximo de la vista previa y comprobar que se vea correctamente desde el listado de tickets. Ejemplo ClientSummary, tiene max-width de 1200px
<template #body="props">
<q-tr :props="props">
<q-td>{{ props.row.description }}</q-td>
<q-td>{{ toDate(props.row.created) }}</q-td>
<q-td>{{ props.row.requester.user.name }}</q-td>
<q-td>{{ props.row.atender.user.name }}</q-td>
<q-td>{{ props.row.quantity }}</q-td>
<q-td>{{ toCurrency(props.row.price) }}</q-td>
<q-td v-if="!props.row.sale">-</q-td>
<q-td v-if="props.row.sale" class="link">{{ props.row.sale.itemFk }}</q-td>
<q-td><q-checkbox v-model="props.row.isOk" :disable="true" /></q-td>
</q-tr>
</template>
</q-table>
</q-list>
</div>
</div>
</template>
@ -455,9 +477,21 @@ async function changeState(value) {
.q-card {
width: 100%;
height: 100%;
max-width: 1200px;
}
.summary {
.q-list {
.q-item__label--header {
display: flex;
justify-content: space-between;
a {
color: $primary;
}
}
}
.fetched-tags {
display: flex;
flex-wrap: wrap;
@ -494,26 +528,6 @@ async function changeState(value) {
}
}
.text-h6 {
margin-bottom: $spacing-md;
text-transform: uppercase;
line-height: 1;
padding: 7px 0;
padding-bottom: 5px;
border-bottom: 2px solid $primary;
overflow: hidden;
position: relative;
}
.text-h6:after {
font-family: 'Material Icons';
content: 'open_in_new';
position: absolute;
right: 5px;
text-transform: none;
color: $primary;
}
.header {
font-size: 18px;
display: flex;
@ -532,4 +546,8 @@ async function changeState(value) {
}
}
}
.q-dialog .summary {
max-width: 1200px;
}
</style>

View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import Paginate from 'components/Paginate.vue';
import { toDate, toCurrency } from 'src/filters/index';
// import TicketSummary from './Card/TicketSummary.vue';
import TicketSummary from './Card/TicketSummary.vue';
const router = useRouter();
const { t } = useI18n();
@ -55,7 +55,7 @@ const preview = ref({
function showPreview(id) {
preview.value.shown = true;
preview.value.data = {
customerId: id,
ticketId: id,
};
}
</script>
@ -108,42 +108,19 @@ function showPreview(id) {
</q-item-section>
<q-separator vertical />
<q-card-actions vertical class="justify-between">
<!-- <q-btn color="grey-7" round flat icon="more_vert">
<q-tooltip>{{ t('customer.list.moreOptions') }}</q-tooltip>
<q-menu cover auto-close>
<q-list>
<q-item clickable>
<q-item-section avatar>
<q-icon name="add" />
</q-item-section>
<q-item-section>Add a note</q-item-section>
</q-item>
<q-item clickable>
<q-item-section avatar>
<q-icon name="history" />
</q-item-section>
<q-item-section>Display customer history</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
<q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
<q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
</q-btn>
<q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
<q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
</q-btn>
<!-- <q-btn flat round color="grey-7" icon="vn:ticket">
<q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>
</q-btn> -->
</q-card-actions>
</q-item>
</q-card>
</template>
</paginate>
</q-page>
<!-- <q-dialog v-model="preview.shown">
<customer-summary :customer-id="preview.data.customerId" />
</q-dialog> -->
<q-dialog v-model="preview.shown">
<ticket-summary :id="preview.data.ticketId" />
</q-dialog>
</template>