From 04693529d70d4ace9fc2054b5eeb0ada535fc559 Mon Sep 17 00:00:00 2001
From: alexandre <alexandre@verdnatura.es>
Date: Fri, 25 Nov 2022 15:54:35 +0100
Subject: [PATCH 1/4] refs #4801 working on fetched tags

---
 src/css/quasar.variables.scss           |   5 +
 src/filters/dashIfEmpty.js              |   4 +
 src/filters/index.js                    |   4 +
 src/filters/zeroFill.js                 |   4 +
 src/i18n/en/index.js                    |  42 ++
 src/i18n/es/index.js                    |  42 ++
 src/pages/Ticket/Card/FetchedTags.vue   |  17 +
 src/pages/Ticket/Card/TicketSummary.vue | 504 ++++++++++++++++++++++++
 8 files changed, 622 insertions(+)
 create mode 100644 src/filters/dashIfEmpty.js
 create mode 100644 src/filters/zeroFill.js
 create mode 100644 src/pages/Ticket/Card/FetchedTags.vue

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 37f693da6..6476f150a 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -22,3 +22,8 @@ $positive: #21ba45;
 $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
+
+$color-spacer-light: rgba(255, 255, 255, .12);
+$border-thin-light: 1px solid $color-spacer-light;
+
+$spacing-md: 16px;
diff --git a/src/filters/dashIfEmpty.js b/src/filters/dashIfEmpty.js
new file mode 100644
index 000000000..4d959ea2c
--- /dev/null
+++ b/src/filters/dashIfEmpty.js
@@ -0,0 +1,4 @@
+export default function (value) {
+    if (value == null || value === '') return '-';
+    return value;
+}
diff --git a/src/filters/index.js b/src/filters/index.js
index 459087e8e..5f9d9e746 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -2,10 +2,14 @@ import toLowerCase from './toLowerCase';
 import toDate from './toDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
+import dashIfEmpty from './dashIfEmpty';
+import zeroFill from './zeroFill';
 
 export {
     toLowerCase,
     toDate,
     toCurrency,
     toPercentage,
+    dashIfEmpty,
+    zeroFill
 };
diff --git a/src/filters/zeroFill.js b/src/filters/zeroFill.js
new file mode 100644
index 000000000..00d47d366
--- /dev/null
+++ b/src/filters/zeroFill.js
@@ -0,0 +1,4 @@
+export default function (value, pad) {
+    const valueStr = String(value);
+    return valueStr.padStart(pad, '0');
+}
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 88fae5bb7..62e83884e 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -187,6 +187,48 @@ export default {
             selectVideo: 'Select video:',
             notFound: 'No videos available',
         },
+        summary: {
+            state: 'State',
+            salesPerson: 'Sales person',
+            agency: 'Agency',
+            zone: 'Zone',
+            warehouse: 'Warehouse',
+            route: 'Route',
+            invoice: 'Invoice',
+            shipped: 'Shipped',
+            landed: 'Landed',
+            packages: 'Packages',
+            consigneePhone: 'Consignee phone',
+            consigneeMobile: 'Consignee mobile',
+            clientPhone: 'Client phone',
+            clientMobile: 'Client mobile',
+            consignee: 'Consignee',
+            subtotal: 'Subtotal',
+            vat: 'VAT',
+            total: 'Total',
+            saleLines: 'Line items',
+            item: 'Item',
+            visible: 'Visible',
+            available: 'Available',
+            quantity: 'Quantity',
+            description: 'Description',
+            price: 'Price',
+            discount: 'Discount',
+            amount: 'Amount',
+            packing: 'Packing',
+            hasComponentLack: 'Component lack',
+            itemShortage: 'Not visible',
+            claim: 'Claim',
+            reserved: 'Reserved',
+            created: 'Created',
+            package: 'Package',
+            taxClass: 'Tax class',
+            services: 'Services',
+            changeState: 'Change state',
+            requester: 'Requester',
+            atender: 'Atender',
+            request: 'Request'
+        }
     },
     claim: {
         pageTitles: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 0103b1a92..d614591e3 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -186,6 +186,48 @@ export default {
             selectVideo: 'Seleccionar vídeo:',
             notFound: 'No hay vídeos disponibles',
         },
+        summary: {
+            state: 'Estado',
+            salesPerson: 'Comercial',
+            agency: 'Agencia',
+            zone: 'Zona',
+            warehouse: 'Almacén',
+            route: 'Ruta',
+            invoice: 'Factura',
+            shipped: 'Enviado',
+            landed: 'Entregado',
+            packages: 'Bultos',
+            consigneePhone: 'Tel. consignatario',
+            consigneeMobile: 'Móv. consignatario',
+            clientPhone: 'Tel. cliente',
+            clientMobile: 'Móv. cliente',
+            consignee: 'Consignatario',
+            subtotal: 'Subtotal',
+            vat: 'IVA',
+            total: 'Total',
+            saleLines: 'Líneas del pedido',
+            item: 'Artículo',
+            visible: 'Visible',
+            available: 'Disponible',
+            quantity: 'Cantidad',
+            description: 'Descripción',
+            price: 'Precio',
+            discount: 'Descuento',
+            amount: 'Importe',
+            packing: 'Encajado',
+            hasComponentLack: 'Faltan componentes',
+            itemShortage: 'No visible',
+            claim: 'Reclamación',
+            reserved: 'Reservado',
+            created: 'Fecha creación',
+            package: 'Embalaje',
+            taxClass: 'Tipo IVA',
+            services: 'Servicios',
+            changeState: 'Cambiar estado',
+            requester: 'Solicitante',
+            atender: 'Comprador',
+            request: 'Petición de compra'
+        }
     },
     claim: {
         pageTitles: {
diff --git a/src/pages/Ticket/Card/FetchedTags.vue b/src/pages/Ticket/Card/FetchedTags.vue
new file mode 100644
index 000000000..86abe93f7
--- /dev/null
+++ b/src/pages/Ticket/Card/FetchedTags.vue
@@ -0,0 +1,17 @@
+<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>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index e69de29bb..44239a25f 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -0,0 +1,504 @@
+<script setup>
+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 SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from './FetchedTags.vue';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const route = useRoute();
+const router = useRouter();
+
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const ticket = ref();
+const salesLines = ref(null);
+const editableStates = ref([]);
+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;
+    }
+}
+
+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';
+}
+
+function formattedAddress() {
+    if (!ticket.value) return '';
+
+    const address = this.ticket.address;
+    const postcode = address.postalCode;
+    const province = address.province ? `(${address.province.name})` : '';
+
+    return `${address.street} - ${postcode} - ${address.city} ${province}`;
+}
+
+function isEditable() {
+    try {
+        return !this.ticket.ticketState.state.alertLevel;
+    } catch (e) {
+        console.error(e);
+    }
+
+    return true;
+}
+
+async function changeState(value) {
+    if (!this.ticket.id) return;
+
+    const formData = {
+        ticketFk: this.ticket.id,
+        code: value,
+    };
+
+    await axios.post(`TicketTrackings/changeState`, formData);
+    await router.go(route.fullPath);
+}
+</script>
+
+<template>
+    <fetch-data url="States/editableStates" @on-fetch="(data) => (editableStates = data)" auto-load />
+    <div class="summary container">
+        <q-card>
+            <skeleton-summary v-if="!ticket" />
+            <template v-if="ticket">
+                <div class="header bg-primary q-pa-sm q-mb-md">
+                    <span>
+                        Ticket #{{ ticket.id }} - {{ ticket.client.name }} ({{ ticket.client.id }}) -
+                        {{ ticket.nickname }}
+                    </span>
+                    <q-btn-dropdown
+                        side
+                        top
+                        color="dark"
+                        :label="t('ticket.summary.changeState')"
+                        :disable="!isEditable()"
+                    >
+                        <q-list>
+                            <q-virtual-scroll
+                                style="max-height: 300px"
+                                :items="editableStates"
+                                separator
+                                v-slot="{ item, index }"
+                            >
+                                <q-item :key="index" dense clickable v-close-popup @click="changeState(item.code)">
+                                    <q-item-section>
+                                        <q-item-label>{{ item.name }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-virtual-scroll>
+                        </q-list>
+                    </q-btn-dropdown>
+                </div>
+                <div class="row q-pa-md q-col-gutter-md q-mb-md">
+                    <div class="col">
+                        <q-list>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.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.summary.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.summary.agency') }}</q-item-label>
+                                    <q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.zone') }}</q-item-label>
+                                    <q-item-label class="link">{{ ticket.routeFk }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.warehouse') }}</q-item-label>
+                                    <q-item-label>{{ ticket.warehouse.name }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <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-section>
+                            </q-item>
+                        </q-list>
+                    </div>
+                    <div class="col">
+                        <q-list>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.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.summary.landed') }}</q-item-label>
+                                    <q-item-label>{{ toDate(ticket.landed) }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.packages') }}</q-item-label>
+                                    <q-item-label>{{ ticket.packages }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.consigneePhone') }}</q-item-label>
+                                    <q-item-label>{{ ticket.address.phone }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.consigneeMobile') }}</q-item-label>
+                                    <q-item-label>{{ ticket.address.mobile }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.clientPhone') }}</q-item-label>
+                                    <q-item-label>{{ ticket.client.phone }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.clientMobile') }}</q-item-label>
+                                    <q-item-label>{{ ticket.client.mobile }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.consignee') }}</q-item-label>
+                                    <q-item-label>{{ formattedAddress() }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-list>
+                    </div>
+                    <div class="col">
+                        <q-list>
+                            <q-item v-for="note in ticket.notes" :key="note.id">
+                                <q-item-section>
+                                    <q-item-label caption>
+                                        {{ note.observationType.description }}
+                                    </q-item-label>
+                                    <q-item-label>
+                                        {{ note.description }}
+                                    </q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-list>
+                    </div>
+                    <div class="col">
+                        <q-list class="taxes">
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.subtotal') }}</q-item-label>
+                                    <q-item-label>{{ toCurrency(ticket.totalWithoutVat) }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.vat') }}</q-item-label>
+                                    <q-item-label>{{
+                                        toCurrency(ticket.totalWithVat - ticket.totalWithoutVat)
+                                    }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.summary.total') }}</q-item-label>
+                                    <q-item-label>{{ toCurrency(ticket.totalWithVat) }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-list>
+                    </div>
+                </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-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-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-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-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>
+                                        {{ props.row.concept }}
+                                        <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>
+                    </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-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>
+                    </div>
+                    <div class="col" v-if="ticket.services.length > 0">
+                        <q-item-label header class="text-h6">
+                            {{ t('ticket.summary.services') }}
+                        </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>
+                    </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-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>
+                    </div>
+                </div>
+            </template>
+        </q-card>
+    </div>
+</template>
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.q-card {
+    width: 100%;
+    max-width: 1200px;
+}
+
+.summary {
+    .q-table__container {
+        text-align: left;
+        .q-icon {
+            padding: 2%;
+        }
+    }
+    .taxes {
+        border: $border-thin-light;
+        text-align: right;
+        padding: 8px;
+    }
+
+    .row {
+        flex-wrap: wrap;
+
+        .col {
+            min-width: 250px;
+            padding-left: 1.5%;
+            padding-right: 1.5%;
+        }
+    }
+
+    .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;
+    }
+
+    .header {
+        font-size: 18px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        align-content: center;
+        margin: 0;
+        text-align: center;
+
+        span {
+            flex: 1;
+        }
+
+        .q-btn {
+            flex: none;
+        }
+    }
+}
+</style>

From 7ee8dbf2d6511ad43b695e1e02cce54296d9d7be Mon Sep 17 00:00:00 2001
From: alexandre <alexandre@verdnatura.es>
Date: Mon, 28 Nov 2022 09:10:13 +0100
Subject: [PATCH 2/4] refs #4801 fetched tags added

---
 src/components/ui/FetchedTags.vue       | 54 +++++++++++++++++++++++++
 src/css/quasar.variables.scss           |  1 +
 src/i18n/en/index.js                    |  3 +-
 src/i18n/es/index.js                    |  3 +-
 src/pages/Ticket/Card/FetchedTags.vue   | 17 --------
 src/pages/Ticket/Card/TicketSummary.vue | 41 ++++++++++++++++---
 6 files changed, 95 insertions(+), 24 deletions(-)
 create mode 100644 src/components/ui/FetchedTags.vue
 delete mode 100644 src/pages/Ticket/Card/FetchedTags.vue

diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
new file mode 100644
index 000000000..364713cbc
--- /dev/null
+++ b/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>
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 6476f150a..33e59074f 100644
--- a/src/css/quasar.variables.scss
+++ b/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;
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 62e83884e..acde021bd 100644
--- a/src/i18n/en/index.js
+++ b/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: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index d614591e3..78519a604 100644
--- a/src/i18n/es/index.js
+++ b/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: {
diff --git a/src/pages/Ticket/Card/FetchedTags.vue b/src/pages/Ticket/Card/FetchedTags.vue
deleted file mode 100644
index 86abe93f7..000000000
--- a/src/pages/Ticket/Card/FetchedTags.vue
+++ /dev/null
@@ -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>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 44239a25f..b172d0c89 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/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;

From e35c11d714b8ab1fcb290e204d2a19f52516f551 Mon Sep 17 00:00:00 2001
From: alexandre <alexandre@verdnatura.es>
Date: Wed, 30 Nov 2022 14:35:05 +0100
Subject: [PATCH 3/4] corrections

---
 src/filters/index.js                    |   2 -
 src/filters/zeroFill.js                 |   4 -
 src/pages/Ticket/Card/TicketSummary.vue | 424 ++++++++++++------------
 src/pages/Ticket/TicketList.vue         |  33 +-
 4 files changed, 226 insertions(+), 237 deletions(-)
 delete mode 100644 src/filters/zeroFill.js

diff --git a/src/filters/index.js b/src/filters/index.js
index 5f9d9e746..c08f897c4 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -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
 };
diff --git a/src/filters/zeroFill.js b/src/filters/zeroFill.js
deleted file mode 100644
index 00d47d366..000000000
--- a/src/filters/zeroFill.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default function (value, pad) {
-    const valueStr = String(value);
-    return valueStr.padStart(pad, '0');
-}
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index b172d0c89..f2cdb4c7a 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -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;
     }
 }
@@ -92,7 +91,8 @@ async function changeState(value) {
                     <q-btn-dropdown
                         side
                         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>
+                            <q-table :rows="ticket.packagings" flat>
+                                <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>
                     </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>
+                                    </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>
+                                <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>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 330c17bbf..f875e5314 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -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>

From c949adfd83595d52c7d21dad161b9810046c0b67 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 13 Dec 2022 12:45:39 +0100
Subject: [PATCH 4/4] Use dialog plugin

---
 src/pages/Claim/Card/ClaimSummaryDialog.vue   |  8 +++++
 .../Customer/Card/CustomerSummaryDialog.vue   |  8 +++++
 src/pages/Ticket/Card/TicketSummaryDialog.vue | 29 +++++++++++++++++++
 src/pages/Ticket/TicketList.vue               | 26 +++++++----------
 4 files changed, 56 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketSummaryDialog.vue

diff --git a/src/pages/Claim/Card/ClaimSummaryDialog.vue b/src/pages/Claim/Card/ClaimSummaryDialog.vue
index e0b4d22c1..4364f28ab 100644
--- a/src/pages/Claim/Card/ClaimSummaryDialog.vue
+++ b/src/pages/Claim/Card/ClaimSummaryDialog.vue
@@ -19,3 +19,11 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
         <claim-summary v-if="$props.id" :id="$props.id" />
     </q-dialog>
 </template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>
diff --git a/src/pages/Customer/Card/CustomerSummaryDialog.vue b/src/pages/Customer/Card/CustomerSummaryDialog.vue
index 84ecaf084..d40d99d1b 100644
--- a/src/pages/Customer/Card/CustomerSummaryDialog.vue
+++ b/src/pages/Customer/Card/CustomerSummaryDialog.vue
@@ -19,3 +19,11 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
         <customer-summary v-if="$props.id" :id="$props.id" />
     </q-dialog>
 </template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>
diff --git a/src/pages/Ticket/Card/TicketSummaryDialog.vue b/src/pages/Ticket/Card/TicketSummaryDialog.vue
new file mode 100644
index 000000000..40b88a96d
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketSummaryDialog.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import TicketSummary from './TicketSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <ticket-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index f875e5314..212a4f359 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -1,12 +1,13 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 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 TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
 
 const router = useRouter();
+const quasar = useQuasar();
 const { t } = useI18n();
 
 const filter = {
@@ -48,15 +49,13 @@ function navigate(id) {
     router.push({ path: `/ticket/${id}` });
 }
 
-const preview = ref({
-    shown: false,
-});
-
-function showPreview(id) {
-    preview.value.shown = true;
-    preview.value.data = {
-        ticketId: id,
-    };
+function viewSummary(id) {
+    quasar.dialog({
+        component: TicketSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
 }
 </script>
 
@@ -111,7 +110,7 @@ function showPreview(id) {
                             <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-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
                         </q-card-actions>
@@ -120,7 +119,4 @@ function showPreview(id) {
             </template>
         </paginate>
     </q-page>
-    <q-dialog v-model="preview.shown">
-        <ticket-summary :id="preview.data.ticketId" />
-    </q-dialog>
 </template>