From 96bcc04d787a71654231b03316ccc125a293e7a2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 31 Mar 2025 11:59:08 +0200
Subject: [PATCH 1/9] style: fix vnselect style with full-width

---
 src/css/app.scss                  |  3 +++
 src/pages/Item/ItemListFilter.vue | 45 ++++++++++++++-----------------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index b299973d1..dd5dbe247 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -340,3 +340,6 @@ input::-webkit-inner-spin-button {
 .containerShrinked {
     width: 70%;
 }
+.q-item__section--main ~ .q-item__section--side {
+    padding-inline: 0;
+}
diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue
index f4500d5fa..0b40d38e1 100644
--- a/src/pages/Item/ItemListFilter.vue
+++ b/src/pages/Item/ItemListFilter.vue
@@ -7,7 +7,7 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import { QCheckbox } from 'quasar';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
 import { useArrayData } from 'composables/useArrayData';
 import { useValidator } from 'src/composables/useValidator';
@@ -250,10 +250,9 @@ onMounted(async () => {
                 </QItemSection>
             </QItem>
             <!-- Tags filter -->
-            <QItem class="row items-center">
-                <QItemLabel>
-                    {{ t('params.tags') }}
-                </QItemLabel>
+            <QItemLabel header>
+                {{ t('params.tags') }}
+
                 <QIcon
                     name="add_circle"
                     class="fill-icon-on-hover q-ml-md"
@@ -261,7 +260,7 @@ onMounted(async () => {
                     color="primary"
                     @click="tagValues.push({})"
                 />
-            </QItem>
+            </QItemLabel>
             <QItem
                 v-for="(tag, index) in tagValues"
                 :key="index"
@@ -269,6 +268,7 @@ onMounted(async () => {
             >
                 <QItemSection class="col">
                     <VnSelect
+                        class="full-width"
                         :label="t('params.tag')"
                         v-model="tag.selectedTag"
                         :options="tagOptions"
@@ -316,25 +316,19 @@ onMounted(async () => {
                 />
             </QItem>
             <!-- Filter fields -->
-            <QItem class="row items-center">
-                <QItemLabel>
-                    {{ t('More fields') }}
-                </QItemLabel>
+            <QItemLabel header
+                >{{ t('More fields') }}
                 <QIcon
                     name="add_circle"
                     class="fill-icon-on-hover q-ml-md"
                     size="sm"
                     color="primary"
                     @click="fieldFiltersValues.push({})"
-                />
-            </QItem>
-            <QItem
-                v-for="(fieldFilter, index) in fieldFiltersValues"
-                :key="index"
-                class="row items-center"
-            >
+            /></QItemLabel>
+            <QItem v-for="(fieldFilter, index) in fieldFiltersValues" :key="index">
                 <QItemSection class="col">
                     <VnSelect
+                        :style="{ 'max-width': '100%' }"
                         :label="t('params.tag')"
                         :model-value="fieldFilter.selectedField"
                         :options="moreFields"
@@ -355,7 +349,7 @@ onMounted(async () => {
                     />
                 </QItemSection>
                 <QItemSection class="col">
-                    <QCheckbox
+                    <VnCheckbox
                         v-if="fieldFilter.selectedField?.type === 'boolean'"
                         v-model="fieldFilter.value"
                         :label="t('params.value')"
@@ -370,13 +364,14 @@ onMounted(async () => {
                         @keydown.enter="applyFieldFilters(params, searchFn)"
                     />
                 </QItemSection>
-                <QIcon
-                    name="delete"
-                    class="fill-icon-on-hover q-ml-xs"
-                    size="sm"
-                    color="primary"
-                    @click="removeFieldFilter(index, params, searchFn)"
-                />
+                <QItemSection side
+                    ><QIcon
+                        name="delete"
+                        class="fill-icon-on-hover q-ml-xs"
+                        size="sm"
+                        color="primary"
+                        @click="removeFieldFilter(index, params, searchFn)"
+                /></QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>

From 8c9a863d71d04d03130d2987dc11fcb2a6ab7e8c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 31 Mar 2025 12:23:45 +0200
Subject: [PATCH 2/9] style: handle height based on number of toolbars

---
 src/components/VnTable/VnTable.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index e214770d2..93aff289a 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -117,7 +117,15 @@ const $props = defineProps({
     },
     tableHeight: {
         type: String,
-        default: '90vh',
+        default: () => {
+            let height = 100;
+            Array.from(document.querySelectorAll('[role="toolbar"]'))
+                .filter((element) => window.getComputedStyle(element).display !== 'none')
+                .forEach(() => {
+                    height -= 10;
+                });
+            return height + 'vh';
+        },
     },
     footer: {
         type: Boolean,
@@ -627,6 +635,7 @@ const rowCtrlClickFunction = computed(() => {
 });
 </script>
 <template>
+    {{ $props.tableHeight }}
     <RightMenu v-if="$props.rightSearch" :overlay="overlay">
         <template #right-panel>
             <VnTableFilter

From 04dcd1136ab4a5897c943a22fb9c7f1e6d787a11 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 31 Mar 2025 12:35:47 +0200
Subject: [PATCH 3/9] fix: remove prop printing

---
 src/components/VnTable/VnTable.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 93aff289a..e3aa14255 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -635,7 +635,6 @@ const rowCtrlClickFunction = computed(() => {
 });
 </script>
 <template>
-    {{ $props.tableHeight }}
     <RightMenu v-if="$props.rightSearch" :overlay="overlay">
         <template #right-panel>
             <VnTableFilter

From c099b41e745d7d65c6f7e6283afd40b54391f8ba Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 2 Apr 2025 10:13:12 +0200
Subject: [PATCH 4/9] perf: move calc heightTable to filter

---
 src/components/VnTable/VnTable.vue            | 11 ++---------
 src/components/VnTable/filters/heightTable.js | 10 ++++++++++
 2 files changed, 12 insertions(+), 9 deletions(-)
 create mode 100644 src/components/VnTable/filters/heightTable.js

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index e3aa14255..c93367268 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -32,6 +32,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
+import heightTable from './filters/heightTable';
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
@@ -117,15 +118,7 @@ const $props = defineProps({
     },
     tableHeight: {
         type: String,
-        default: () => {
-            let height = 100;
-            Array.from(document.querySelectorAll('[role="toolbar"]'))
-                .filter((element) => window.getComputedStyle(element).display !== 'none')
-                .forEach(() => {
-                    height -= 10;
-                });
-            return height + 'vh';
-        },
+        default: heightTable,
     },
     footer: {
         type: Boolean,
diff --git a/src/components/VnTable/filters/heightTable.js b/src/components/VnTable/filters/heightTable.js
new file mode 100644
index 000000000..d3bfc9f1c
--- /dev/null
+++ b/src/components/VnTable/filters/heightTable.js
@@ -0,0 +1,10 @@
+export default function () {
+    let height = 100;
+    Array.from(document.querySelectorAll('[role="toolbar"]'))
+        .filter((element) => window.getComputedStyle(element).display !== 'none')
+        .forEach(() => {
+            height -= 10;
+        });
+    console.error(height);
+    return height + 'vh';
+}

From f13b168364715c54662df3bf01f9c103d6a33842 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 2 Apr 2025 10:13:24 +0200
Subject: [PATCH 5/9] style: reduce height row

---
 src/pages/Ticket/Card/TicketSale.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 2fb305cc3..7efb9f62d 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -99,6 +99,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('globals.quantity'),
         name: 'quantity',
+        class: 'shrink',
         format: (row) => toCurrency(row.quantity),
     },
     {
@@ -767,7 +768,7 @@ watch(
                     {{ row?.item?.subName.toUpperCase() }}
                 </div>
             </div>
-            <FetchedTags v-if="row.item" :item="row.item" :max-length="6" />
+            <FetchedTags v-if="row.item" :item="row.item" :columns="6" :max-length="6" />
             <QPopupProxy v-if="row.id && isTicketEditable">
                 <VnInput
                     v-model="row.concept"

From 6bf6ae028875700bc106888cac1d49fc45176eb9 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 2 Apr 2025 10:15:02 +0200
Subject: [PATCH 6/9] perf: rename filter

---
 src/components/VnTable/VnTable.vue                            | 4 ++--
 .../filters/{heightTable.js => calculateTableHeight.js}       | 0
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/components/VnTable/filters/{heightTable.js => calculateTableHeight.js} (100%)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index c93367268..7f505558a 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -32,7 +32,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
-import heightTable from './filters/heightTable';
+import calcTableHeight from './filters/calculateTableHeight';
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
@@ -118,7 +118,7 @@ const $props = defineProps({
     },
     tableHeight: {
         type: String,
-        default: heightTable,
+        default: calcTableHeight,
     },
     footer: {
         type: Boolean,
diff --git a/src/components/VnTable/filters/heightTable.js b/src/components/VnTable/filters/calculateTableHeight.js
similarity index 100%
rename from src/components/VnTable/filters/heightTable.js
rename to src/components/VnTable/filters/calculateTableHeight.js

From 4caf496bd6754fc57475bf17e13cb47e2252b580 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 2 Apr 2025 10:28:30 +0200
Subject: [PATCH 7/9] perf: use composable

---
 src/components/VnTable/VnTable.vue             |  6 ++++--
 .../VnTable/filters/useTableHeight.js          | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/components/VnTable/filters/useTableHeight.js

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 7f505558a..d8318e989 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -19,6 +19,7 @@ import { useQuasar, date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { useFilterParams } from 'src/composables/useFilterParams';
 import { dashIfEmpty, toDate } from 'src/filters';
+import { useTableHeight } from './filters/useTableHeight';
 
 import CrudModel from 'src/components/CrudModel.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
@@ -118,7 +119,7 @@ const $props = defineProps({
     },
     tableHeight: {
         type: String,
-        default: calcTableHeight,
+        default: undefined,
     },
     footer: {
         type: Boolean,
@@ -167,6 +168,7 @@ const tableRef = ref();
 const params = ref(useFilterParams($attrs['data-key']).params);
 const orders = ref(useFilterParams($attrs['data-key']).orders);
 const app = inject('app');
+const tableHeight = useTableHeight();
 
 const editingRow = ref(null);
 const editingField = ref(null);
@@ -679,7 +681,7 @@ const rowCtrlClickFunction = computed(() => {
                 table-header-class="bg-header"
                 card-container-class="grid-three"
                 flat
-                :style="isTableMode && `max-height: ${tableHeight}`"
+                :style="isTableMode && `max-height: ${$props.tableHeight || tableHeight}`"
                 :virtual-scroll="isTableMode"
                 @virtual-scroll="handleScroll"
                 @row-click="(event, row) => handleRowClick(event, row)"
diff --git a/src/components/VnTable/filters/useTableHeight.js b/src/components/VnTable/filters/useTableHeight.js
new file mode 100644
index 000000000..6a857e078
--- /dev/null
+++ b/src/components/VnTable/filters/useTableHeight.js
@@ -0,0 +1,18 @@
+import { onMounted, nextTick, ref } from 'vue';
+
+export function useTableHeight() {
+    const tableHeight = ref('100vh');
+
+    onMounted(async () => {
+        await nextTick();
+        let height = 100;
+        Array.from(document.querySelectorAll('[role="toolbar"]'))
+            .filter((element) => window.getComputedStyle(element).display !== 'none')
+            .forEach(() => {
+                height -= 10;
+            });
+        tableHeight.value = `${height}vh`;
+    });
+
+    return tableHeight;
+}

From a1490a798b4154c60cde6ef3f171b9933d2891d1 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 2 Apr 2025 10:32:42 +0200
Subject: [PATCH 8/9] fix: remove calculateTableHeight

---
 src/components/VnTable/VnTable.vue                     |  1 -
 src/components/VnTable/filters/calculateTableHeight.js | 10 ----------
 2 files changed, 11 deletions(-)
 delete mode 100644 src/components/VnTable/filters/calculateTableHeight.js

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index d8318e989..b21a622ca 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -33,7 +33,6 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
-import calcTableHeight from './filters/calculateTableHeight';
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
diff --git a/src/components/VnTable/filters/calculateTableHeight.js b/src/components/VnTable/filters/calculateTableHeight.js
deleted file mode 100644
index d3bfc9f1c..000000000
--- a/src/components/VnTable/filters/calculateTableHeight.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default function () {
-    let height = 100;
-    Array.from(document.querySelectorAll('[role="toolbar"]'))
-        .filter((element) => window.getComputedStyle(element).display !== 'none')
-        .forEach(() => {
-            height -= 10;
-        });
-    console.error(height);
-    return height + 'vh';
-}

From e435674eda4a82f1d5c7bbb151edd1e1da7bf012 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 2 Apr 2025 11:34:19 +0200
Subject: [PATCH 9/9] style: minor changes

---
 src/components/VnTable/filters/useTableHeight.js | 2 +-
 src/pages/Item/ItemListFilter.vue                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/VnTable/filters/useTableHeight.js b/src/components/VnTable/filters/useTableHeight.js
index 6a857e078..2397ce16f 100644
--- a/src/components/VnTable/filters/useTableHeight.js
+++ b/src/components/VnTable/filters/useTableHeight.js
@@ -1,7 +1,7 @@
 import { onMounted, nextTick, ref } from 'vue';
 
 export function useTableHeight() {
-    const tableHeight = ref('100vh');
+    const tableHeight = ref('90vh');
 
     onMounted(async () => {
         await nextTick();
diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue
index 0b40d38e1..ab9b91d06 100644
--- a/src/pages/Item/ItemListFilter.vue
+++ b/src/pages/Item/ItemListFilter.vue
@@ -328,7 +328,7 @@ onMounted(async () => {
             <QItem v-for="(fieldFilter, index) in fieldFiltersValues" :key="index">
                 <QItemSection class="col">
                     <VnSelect
-                        :style="{ 'max-width': '100%' }"
+                        class="full-width"
                         :label="t('params.tag')"
                         :model-value="fieldFilter.selectedField"
                         :options="moreFields"