From b78ab598b73da20e2f06f93a17d551c6bfb24a06 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 13 Feb 2025 12:06:53 +0100
Subject: [PATCH] fix: icons

---
 src/components/VnTable/VnTable.vue            |   2 +-
 src/pages/Item/components/ItemProposal.vue    |  33 +++--
 src/pages/Ticket/Negative/TicketLackList.vue  |   2 +-
 src/pages/Ticket/Negative/TicketLackTable.vue | 127 +++++++-----------
 4 files changed, 73 insertions(+), 91 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 7e0757f6c..693fc6873 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -689,7 +689,7 @@ const checkbox = ref(null);
                         :data-col-field="col?.name"
                     >
                         <div
-                            class="no-padding no-margin peter"
+                            class="no-padding no-margin"
                             style="
                                 overflow: hidden;
                                 text-overflow: ellipsis;
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index d2dbea7b3..f49e5e04c 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -32,7 +32,10 @@ const $props = defineProps({
 const proposalSelected = ref([]);
 const ticketConfig = ref({});
 const proposalTableRef = ref(null);
-
+const isLoading = ref(true);
+const filterTicketConfig = {
+    fields: ['lackAlertPrice'],
+};
 const sale = computed(() => $props.sales[0]);
 const saleFk = computed(() => sale.value.saleFk);
 const filter = computed(() => ({
@@ -77,7 +80,7 @@ const columns = computed(() => [
     },
 
     {
-        align: 'left',
+        align: 'center',
         sortable: true,
         label: t('proposal.longName'),
         name: 'longName',
@@ -85,7 +88,7 @@ const columns = computed(() => [
         columnClass: 'expand',
     },
     {
-        align: 'left',
+        align: 'center',
         sortable: true,
         label: t('item.list.color'),
         name: 'tag5',
@@ -93,7 +96,7 @@ const columns = computed(() => [
         columnClass: 'expand',
     },
     {
-        align: 'left',
+        align: 'center',
         sortable: true,
         label: t('item.list.stems'),
         name: 'tag6',
@@ -101,7 +104,7 @@ const columns = computed(() => [
         columnClass: 'expand',
     },
     {
-        align: 'left',
+        align: 'center',
         sortable: true,
         label: t('item.list.producer'),
         name: 'tag7',
@@ -221,18 +224,20 @@ async function change({ itemFk: substitutionFk }) {
 
 async function handleTicketConfig(data) {
     ticketConfig.value = data[0];
+    isLoading.value = false;
 }
 </script>
 <template>
     <FetchData
         url="TicketConfigs"
-        :filter="{ fields: ['lackAlertPrice'] }"
-        @on-fetch="handleTicketConfig"
+        :filter="filterTicketConfig"
         auto-load
-    />
+        @on-fetch="handleTicketConfig"
+    ></FetchData>
+    <QSpinner v-if="isLoading" color="primary" size="md"></QSpinner>
 
     <VnTable
-        v-if="ticketConfig"
+        v-else
         auto-load
         data-cy="proposalTable"
         ref="proposalTableRef"
@@ -242,7 +247,7 @@ async function handleTicketConfig(data) {
         :columns="columns"
         class="full-width q-mt-md"
         row-key="id"
-        :row-click="change"
+        redirect="false"
         :is-editable="false"
         :right-search="false"
         :without-header="true"
@@ -260,10 +265,10 @@ async function handleTicketConfig(data) {
                     <QTooltip> {{ statusConditionalValue(row) }}% </QTooltip>
                 </div>
                 <div style="flex: 2 0 100%; align-content: center">
-                    <div>
-                        <span class="link">{{ row.longName }}</span>
-                        <ItemDescriptorProxy :id="row.id" />
-                    </div>
+                    <span class="link" @click.stop>
+                        {{ row.longName }}
+                        <ItemDescriptorProxy :id="row.itemFk" />
+                    </span>
                 </div>
             </QTd>
         </template>
diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index d1e8b823a..bb75f957d 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -65,7 +65,7 @@ const columns = computed(() => [
         columnFilter: {
             component: 'input',
             type: 'number',
-            columnClass: 'shrink',
+            inWhere: false,
         },
     },
     {
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index 176e8f7ad..1fca65b88 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -22,14 +22,6 @@ const $props = defineProps({
     },
 });
 
-watch(
-    () => $props.filter,
-    (v) => {
-        filterLack.value.where = v;
-        tableRef.value.reload(filterLack);
-    },
-);
-
 const filterLack = ref({
     include: [
         {
@@ -238,65 +230,59 @@ function onBuysFetched(data) {
         </template>
 
         <template #column-status="{ row }">
-            <QTd style="min-width: 150px">
-                <div class="icon-container">
-                    <QIcon
-                        v-if="row.isBasket"
-                        name="vn:basket"
-                        color="primary"
-                        class="cursor-pointer"
-                        size="xs"
-                    >
-                        <QTooltip>{{ t('negative.detail.isBasket') }}</QTooltip>
-                    </QIcon>
-                    <QIcon
-                        v-if="row.hasToIgnore"
-                        name="star"
-                        color="primary"
-                        class="cursor-pointer fill-icon"
-                        size="xs"
-                    >
-                        <QTooltip>{{ t('negative.detail.hasToIgnore') }}</QTooltip>
-                    </QIcon>
-                    <QIcon
-                        v-if="row.hasObservation"
-                        name="change_circle"
-                        color="primary"
-                        class="cursor-pointer"
-                        size="xs"
-                    >
-                        <QTooltip>{{
-                            t('negative.detail.hasObservation')
-                        }}</QTooltip> </QIcon
-                    ><QIcon
-                        v-if="row.isRookie"
-                        name="vn:Person"
-                        size="xs"
-                        color="primary"
-                        class="cursor-pointer"
-                    >
-                        <QTooltip>{{ t('negative.detail.isRookie') }}</QTooltip>
-                    </QIcon>
-                    <QIcon
-                        v-if="row.peticionCompra"
-                        name="vn:buyrequest"
-                        size="xs"
-                        color="primary"
-                        class="cursor-pointer"
-                    >
-                        <QTooltip>{{ t('negative.detail.peticionCompra') }}</QTooltip>
-                    </QIcon>
-                    <QIcon
-                        v-if="row.turno"
-                        name="vn:calendar"
-                        size="xs"
-                        color="primary"
-                        class="cursor-pointer"
-                    >
-                        <QTooltip>{{ t('negative.detail.turno') }}</QTooltip>
-                    </QIcon>
-                </div></QTd
+            <QIcon
+                v-if="row.isBasket"
+                name="vn:basket"
+                color="primary"
+                class="cursor-pointer"
+                size="xs"
             >
+                <QTooltip>{{ t('negative.detail.isBasket') }}</QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.hasToIgnore"
+                name="star"
+                color="primary"
+                class="cursor-pointer fill-icon"
+                size="xs"
+            >
+                <QTooltip>{{ t('negative.detail.hasToIgnore') }}</QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.hasObservation"
+                name="change_circle"
+                color="primary"
+                class="cursor-pointer"
+                size="xs"
+            >
+                <QTooltip>{{ t('negative.detail.hasObservation') }}</QTooltip> </QIcon
+            ><QIcon
+                v-if="row.isRookie"
+                name="vn:Person"
+                size="xs"
+                color="primary"
+                class="cursor-pointer"
+            >
+                <QTooltip>{{ t('negative.detail.isRookie') }}</QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.peticionCompra"
+                name="vn:buyrequest"
+                size="xs"
+                color="primary"
+                class="cursor-pointer"
+            >
+                <QTooltip>{{ t('negative.detail.peticionCompra') }}</QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.turno"
+                name="vn:calendar"
+                size="xs"
+                color="primary"
+                class="cursor-pointer"
+            >
+                <QTooltip>{{ t('negative.detail.turno') }}</QTooltip>
+            </QIcon>
         </template>
         <template #column-nickname="{ row }">
             <span class="link" @click.stop>
@@ -335,15 +321,6 @@ function onBuysFetched(data) {
     </VnTable>
 </template>
 <style lang="scss" scoped>
-.icon-container {
-    display: grid;
-    grid-template-columns: repeat(3, 0.2fr);
-    row-gap: 5px; /* Ajusta el espacio entre los iconos según sea necesario */
-}
-.icon-container > * {
-    width: 100%;
-    height: auto;
-}
 .list-enter-active,
 .list-leave-active {
     transition: all 1s ease;