refs #4801 fetched tags added

src/components/ui/FetchedTags.vue

@@ -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>

src/css/quasar.variables.scss

@@ -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;

src/i18n/en/index.js

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

src/i18n/es/index.js

@@ -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: {

src/pages/Ticket/Card/FetchedTags.vue

@@ -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>

src/pages/Ticket/Card/TicketSummary.vue

@@ -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;