wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

refs #4801 fetched tags added

This commit is contained in:
Alexandre Riera 2022-11-28 09:10:13 +01:00
parent 04693529d7
commit 7ee8dbf2d6
6 changed files with 95 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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">
{{ t('ticket.summary.services') }}
<q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
</q-item-label>
<q-table :rows="ticket.services">
<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">
<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;