verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 92 Releases Wiki Activity

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
Conversation 0 Commits 4 Files Changed 11 +95 -24
6 changed files with 95 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7ee8dbf2d6 - Show all commits

54
src/components/ui/FetchedTags.vue Normal file
View File

@ -0,0 +1,54 @@
<script setup>
defineProps({
maxLength: {
type: Number,
required: true,
},
item: {
type: Object,
required: true,
},
});
</script>
<template>
<div class="fetchedTags">
<div class="wrap">
<div class="inline-tag" :class="{ empty: !$props.item.value5 }">{{ $props.item.value5 }}</div>
<div class="inline-tag" :class="{ empty: !$props.item.value6 }">{{ $props.item.value6 }}</div>
<div class="inline-tag" :class="{ empty: !$props.item.value7 }">{{ $props.item.value7 }}</div>
<div class="inline-tag" :class="{ empty: !$props.item.value8 }">{{ $props.item.value8 }}</div>
<div class="inline-tag" :class="{ empty: !$props.item.value9 }">{{ $props.item.value9 }}</div>
<div class="inline-tag" :class="{ empty: !$props.item.value10 }">{{ $props.item.value10 }}</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.fetchedTags {
align-items: center;
.wrap {
width: 100%;
flex-wrap: wrap;
display: flex;
}
.inline-tag {
height: 1rem;
margin: 0.05rem;
color: $secondary;
text-align: center;
font-size: smaller;
padding: 1px;
flex: 1;
border: 1px solid $color-spacer;
text-overflow: ellipsis;
overflow: hidden;
min-width: 4rem;
max-width: 4rem;
}
.empty {
border: 1px solid $color-spacer-light;
}
}
</style>

1
src/css/quasar.variables.scss
View File

@ -24,6 +24,7 @@ $info: #31ccec;
$warning: #f2c037;
$color-spacer-light: rgba(255, 255, 255, .12);
$color-spacer:rgba(255, 255, 255, .3);
$border-thin-light: 1px solid $color-spacer-light;
$spacing-md: 16px;

3
src/i18n/en/index.js
View File

@ -227,7 +227,8 @@ export default {
changeState: 'Change state',
requester: 'Requester',
atender: 'Atender',
request: 'Request'
request: 'Request',
goTo: 'Go to'
}
},
claim: {

3
src/i18n/es/index.js
View File

@ -226,7 +226,8 @@ export default {
changeState: 'Cambiar estado',
requester: 'Solicitante',
atender: 'Comprador',
request: 'Petición de compra'
request: 'Petición de compra',
goTo: 'Ir a'
}
},
claim: {

17
src/pages/Ticket/Card/FetchedTags.vue
View File

@ -1,17 +0,0 @@
<script setup>
defineProps({
maxLength: {
type: Number,
required: true,
},
item: {
type: Object,
required: true,
},
});
</script>
<template>
<div>{{ $props.item.value5 }}</div>
</template>
<style lang="scss" scoped></style>

41
src/pages/Ticket/Card/TicketSummary.vue
View File

@ -6,7 +6,7 @@ import axios from 'axios';
import { dashIfEmpty, toDate, toCurrency, zeroFill } from 'src/filters';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
import FetchData from 'components/FetchData.vue';
import FetchedTags from './FetchedTags.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
onMounted(() => fetch());
onUpdated(() => fetch());
@ -126,7 +126,7 @@ async function changeState(value) {
<q-item>
<q-item-section>
<q-item-label caption>{{ t('ticket.summary.salesPerson') }}</q-item-label>
<q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
<q-item-label class="link">{{ ticket.client.salesPersonUser.name }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
@ -150,7 +150,7 @@ async function changeState(value) {
<q-item>
<q-item-section>
<q-item-label caption>{{ t('ticket.summary.invoice') }}</q-item-label>
<q-item-label>{{ dashIfEmpty(ticket.refFk) }}</q-item-label>
<q-item-label v-if="ticket.refFk" class="link">{{ ticket.refFk }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
@ -250,6 +250,7 @@ async function changeState(value) {
<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">
@ -330,7 +331,12 @@ async function changeState(value) {
<q-td>{{ props.row.available }}</q-td>
<q-td>{{ props.row.quantity }}</q-td>
<q-td>
{{ props.row.concept }}
<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>
@ -354,6 +360,7 @@ async function changeState(value) {
<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">
@ -375,6 +382,7 @@ async function changeState(value) {
<div class="col" v-if="ticket.services.length > 0">
<q-item-label header class="text-h6">
alexandre marked this conversation as resolved Outdated
joan commented 2022-11-30 10:59:39 +00:00
Outdated
Review
Copy Link

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.
{{ t('ticket.summary.services') }}
<q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
</q-item-label>
<q-table :rows="ticket.services">
alexandre marked this conversation as resolved Outdated
joan commented 2022-11-30 10:58:30 +00:00
Outdated
Review
Copy Link

Quitar fondo de la tabla

Quitar fondo de la tabla
<template #header="props">
@ -402,6 +410,7 @@ async function changeState(value) {
<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">
alexandre marked this conversation as resolved Outdated
joan commented 2022-11-30 10:56:04 +00:00
Outdated
Review
Copy Link

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.
<template #header="props">
@ -446,10 +455,23 @@ async function changeState(value) {
.q-card {
width: 100%;
max-width: 1200px;
}
.summary {
.fetched-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
& span {
flex-basis: 50%;
}
& span.subName {
flex-basis: 50%;
color: $secondary;
text-transform: uppercase;
font-size: 0.75rem;
}
}
.q-table__container {
text-align: left;
.q-icon {
@ -483,6 +505,15 @@ async function changeState(value) {
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;