From b59f8374b3a441e6acff990ee63075e75d2ee0dc Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 4 Jul 2024 17:28:45 +0200
Subject: [PATCH 01/34] perf: hide icon for VnInputDate

---
 src/components/common/VnInputDate.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 184f8a158..b22de3606 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -9,6 +9,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    showEvent: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const { t } = useI18n();
@@ -107,7 +111,7 @@ watch(
                         isPopupOpen = false;
                     "
                 />
-                <QIcon name="event" class="cursor-pointer" />
+                <QIcon v-if="showEvent" name="event" class="cursor-pointer" />
             </template>
             <QMenu
                 transition-show="scale"

From b3ea05fb32900740d226e791a6e8223daeddf66b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 4 Jul 2024 17:31:08 +0200
Subject: [PATCH 02/34] feat: dense rows

---
 src/pages/Item/ItemFixedPrice.vue | 73 ++++++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 12 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 2ecd1f21b..ea1d92e7b 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -108,8 +108,10 @@ const defaultColumnAttrs = {
     sortable: true,
 };
 
-const columns = computed(() => [
+const columns = ref([
     {
+        sortable: true,
+        align: 'left',
         label: t('item.fixedPrice.itemId'),
         name: 'itemId',
         field: 'itemFk',
@@ -380,6 +382,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
+            dense
             :rows="fixedPrices"
             :columns="columns"
             row-key="id"
@@ -408,10 +411,33 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </QTd>
                 </QTr>
             </template>
-
+            <template #header="props">
+                <QTr :props="props" class="bg">
+                    <QTh />
+                    <QTh
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        style="text-wrap: balance"
+                    >
+                        {{ col.label }}
+                    </QTh>
+                </QTr>
+            </template>
+            <template #body-selection="scope">
+                <QCheckbox
+                    flat
+                    style="width: 10px; margin-left: -20px"
+                    v-model="scope.selected"
+                />
+            </template>
+            <template #header-selection="scope">
+                <QCheckbox style="margin-left: -15px" v-model="scope.selected" />
+            </template>
             <template #body-cell-itemId="props">
                 <QTd>
                     <VnSelect
+                        style="width: 115px"
                         url="Items/withName"
                         hide-selected
                         option-label="id"
@@ -436,12 +462,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         {{ row.name }}
                     </span>
                     <ItemDescriptorProxy :id="row.itemFk" />
-                    <FetchedTags :item="row" :max-length="6" />
+                    <FetchedTags style="width: 200px" :item="row" :max-length="6" />
                 </QTd>
             </template>
             <template #body-cell-groupingPrice="props">
                 <QTd class="col">
                     <VnInput
+                        style="width: 80px"
+                        mask="###.##"
                         v-model.number="props.row.rate2"
                         v-on="getRowUpdateInputEvents(props)"
                     >
@@ -452,6 +480,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <template #body-cell-packingPrice="props">
                 <QTd class="col">
                     <VnInput
+                        mask="###.##"
+                        style="width: 80px"
                         v-model.number="props.row.rate3"
                         v-on="getRowUpdateInputEvents(props)"
                     >
@@ -463,7 +493,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <QTd class="col">
                     <div class="row">
                         <QCheckbox
-                            class="col"
                             :model-value="props.row.hasMinPrice"
                             @update:model-value="updateMinPrice($event, props)"
                             :false-value="0"
@@ -471,8 +500,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                             :toggle-indeterminate="false"
                         />
                         <VnInput
+                            style="padding-left: -20px; width: 80px"
                             class="col"
-                            :disable="!props.row.hasMinPrice"
+                            :disable="props.row.hasMinPrice === 'false'"
                             v-model.number="props.row.minPrice"
                             v-on="getRowUpdateInputEvents(props)"
                             type="number"
@@ -481,33 +511,43 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
             <template #body-cell-started="props">
-                <QTd class="col" style="min-width: 160px">
+                <QTd class="col">
                     <VnInputDate
+                        style="max-width: 125px"
+                        :show-event="false"
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
                         v-bind="
                             isBigger(props.row.started)
-                                ? { 'bg-color': 'warning', 'is-outlined': true }
+                                ? {
+                                      'bg-color': 'warning',
+                                      'is-outlined': true,
+                                  }
                                 : {}
                         "
                     />
                 </QTd>
             </template>
             <template #body-cell-ended="props">
-                <QTd class="col" style="min-width: 150px">
+                <QTd class="col">
                     <VnInputDate
+                        style="max-width: 125px"
+                        :show-event="false"
                         v-model="props.row.ended"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
                         v-bind="
-                            isLower(props.row.ended)
-                                ? { 'bg-color': 'warning', 'is-outlined': true }
+                            isLower(props.row.started)
+                                ? {
+                                      'bg-color': 'warning',
+                                      'is-outlined': true,
+                                  }
                                 : {}
                         "
                     />
                 </QTd>
             </template>
             <template #body-cell-warehouse="props">
-                <QTd class="col">
+                <QTd class="col" style="max-width: 180px">
                     <VnSelect
                         :options="warehousesOptions"
                         hide-selected
@@ -571,7 +611,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </QDialog>
     </QPage>
 </template>
-
+<style lang="scss" scoped>
+.q-table th,
+.q-table td {
+    padding-inline: 5px !important;
+}
+.q-field__after,
+.q-field__append {
+    padding: 0;
+}
+</style>
 <i18n>
 es:
     Add fixed price: Añadir precio fijado

From b781940c77aa9d6d85d60cd2ba1c276eb6a3ffed Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 4 Jul 2024 17:31:40 +0200
Subject: [PATCH 03/34] feat: handle qCheckbox 3rd state

---
 src/pages/Item/ItemFixedPrice.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index ea1d92e7b..997db0fbe 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -65,6 +65,10 @@ const fetchFixedPrices = async () => {
 };
 
 const onFixedPricesFetched = (data) => {
+    data.forEach((item) => {
+        console.log(item.hasMinPrice);
+        item.hasMinPrice = `${item.hasMinPrice !== 0}`;
+    });
     fixedPrices.value = data;
     // el objetivo de guardar una copia de las rows es evitar guardar cambios si la data no cambió al disparar los eventos
     fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
@@ -495,8 +499,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         <QCheckbox
                             :model-value="props.row.hasMinPrice"
                             @update:model-value="updateMinPrice($event, props)"
-                            :false-value="0"
-                            :true-value="1"
+                            :true-value="'true'"
+                            :false-value="'false'"
                             :toggle-indeterminate="false"
                         />
                         <VnInput

From 1c88bf25569d297479f475e4b1c4924f7cac5e8d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 4 Jul 2024 17:32:11 +0200
Subject: [PATCH 04/34] feat: only filter by isDestiny

---
 src/pages/Item/ItemFixedPrice.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 997db0fbe..7fa698094 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -372,7 +372,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 <template>
     <FetchData
         url="Warehouses"
-        :filter="{ order: ['name'] }"
+        :filter="{ where: { isDestiny: true }, order: ['name'] }"
         auto-load
         @on-fetch="(data) => onWarehousesFetched(data)"
     />

From 72a6056f3d34f2c280adbc782db5d8491ece99e7 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 4 Jul 2024 17:32:36 +0200
Subject: [PATCH 05/34] perf: change slots order

---
 src/components/common/VnInput.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 33b97e29d..3790a63c2 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -88,7 +88,6 @@ const inputRules = [
                 <slot name="prepend" />
             </template>
             <template #append>
-                <slot name="append" v-if="$slots.append && !$attrs.disabled" />
                 <QIcon
                     name="close"
                     size="xs"
@@ -100,6 +99,7 @@ const inputRules = [
                         }
                     "
                 ></QIcon>
+                <slot name="append" v-if="$slots.append && !$attrs.disabled" />
                 <QIcon v-if="info" name="info">
                     <QTooltip max-width="350px">
                         {{ info }}
@@ -115,3 +115,8 @@ const inputRules = [
     es:
         inputMin: Debe ser mayor a {value}
 </i18n>
+<style lang="scss">
+.q-field__append {
+    padding-inline: 0;
+}
+</style>

From 3a73c6b908ac9c9239fec307f47bf6b083434990 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 4 Jul 2024 17:42:06 +0200
Subject: [PATCH 06/34] test: fix e2e

---
 test/cypress/integration/entry/myEntry.spec.js                 | 2 +-
 test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js | 1 +
 test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js | 1 +
 test/cypress/integration/ticket/ticketDescriptor.spec.js       | 1 +
 test/cypress/integration/wagonType/wagonTypeCreate.spec.js     | 1 +
 test/cypress/support/commands.js                               | 2 +-
 6 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/test/cypress/integration/entry/myEntry.spec.js b/test/cypress/integration/entry/myEntry.spec.js
index 14c09176e..78bc31f56 100644
--- a/test/cypress/integration/entry/myEntry.spec.js
+++ b/test/cypress/integration/entry/myEntry.spec.js
@@ -1,7 +1,7 @@
 describe('WagonTypeCreate', () => {
     beforeEach(() => {
         cy.viewport(1920, 1080);
-        cy.login('customer');
+        cy.login('supplier');
         cy.visit(`/#/entry/my`, {
             onBeforeLoad(win) {
                 cy.stub(win, 'open');
diff --git a/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js b/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
index 7863d6bfa..f553c1e74 100644
--- a/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
@@ -9,6 +9,7 @@ describe('InvoiceInCorrective', () => {
         cy.viewport(1280, 720);
         cy.login('developer');
         cy.visit(`/#/invoice-in/1/summary?limit=10`);
+        cy.waitForElement('.q-page', 6000);
 
         cy.openActionsDescriptor();
 
diff --git a/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js b/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
index a2e9998bb..46927bfb1 100644
--- a/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
@@ -7,6 +7,7 @@ describe('InvoiceInDescriptor', () => {
         cy.viewport(1280, 720);
         cy.login('developer');
         cy.visit('/#/invoice-in/1/summary');
+        cy.waitForElement('.q-page', 6000);
 
         cy.openActionsDescriptor();
         cy.get(firstDescritorOpt).click();
diff --git a/test/cypress/integration/ticket/ticketDescriptor.spec.js b/test/cypress/integration/ticket/ticketDescriptor.spec.js
index fc920f346..138001ad2 100644
--- a/test/cypress/integration/ticket/ticketDescriptor.spec.js
+++ b/test/cypress/integration/ticket/ticketDescriptor.spec.js
@@ -9,6 +9,7 @@ describe('Ticket descriptor', () => {
 
         cy.login('developer');
         cy.visit(`/#/ticket/${ticketId}/summary`);
+        cy.waitForElement('.q-page', 7000);
     });
 
     it('should clone the ticket without warehouse', () => {
diff --git a/test/cypress/integration/wagonType/wagonTypeCreate.spec.js b/test/cypress/integration/wagonType/wagonTypeCreate.spec.js
index bcf7fe841..5e8b6b888 100644
--- a/test/cypress/integration/wagonType/wagonTypeCreate.spec.js
+++ b/test/cypress/integration/wagonType/wagonTypeCreate.spec.js
@@ -3,6 +3,7 @@ describe('WagonTypeCreate', () => {
         cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit('/#/wagon/type/create');
+        cy.waitForElement('.q-page', 6000);
     });
 
     function chooseColor(color) {
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 4ed940ecd..3be4a9f0c 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -239,5 +239,5 @@ Cypress.Commands.add('validateContent', (selector, expectedValue) => {
 });
 
 Cypress.Commands.add('openActionsDescriptor', () => {
-    cy.get('.descriptor > .header > .q-btn').click();
+    cy.get('.descriptor > .header > :nth-child(3) > .q-btn__content > .q-icon').click();
 });

From 5d6cdd4e2ebe5f838b4f7059c486b772f7380a6d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 4 Jul 2024 17:42:28 +0200
Subject: [PATCH 07/34] feat: imrpove VnInputTime to set cursor at start

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

diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 9344ff869..e2c6ffb56 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -2,6 +2,7 @@
 import { watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
+import { nextTick } from 'vue';
 
 const model = defineModel({ type: String });
 const props = defineProps({
@@ -55,17 +56,24 @@ const formattedTime = computed({
 function dateToTime(newDate) {
     return date.formatDate(new Date(newDate), dateFormat);
 }
-
+const timeField = ref();
 watch(
     () => model.value,
     (val) => (formattedTime.value = val),
     { immediate: true }
 );
+const focusField = () => {
+    nextTick(() => {
+        const input = timeField.value.$el.querySelector('input');
+        input.setSelectionRange(0, 0);
+    });
+};
 </script>
 
 <template>
     <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
+            ref="timeField"
             class="vn-input-time"
             mask="##:##"
             placeholder="--:--"
@@ -74,6 +82,7 @@ watch(
             :class="{ required: $attrs.required }"
             style="min-width: 100px"
             :rules="$attrs.required ? [requiredFieldRule] : null"
+            @focus="focusField"
         >
             <template #append>
                 <QIcon

From ff80a768d7e7642fc4106c54fc208815e6f4f513 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 4 Jul 2024 18:23:45 +0200
Subject: [PATCH 08/34] feat: try to fix ItemFixedFilterPanel

---
 src/pages/Item/ItemFixedPriceFilter.vue | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index 6c847ece8..6fec09f37 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -19,8 +19,17 @@ defineProps({
         default: () => [],
     },
 });
+import { useRoute } from 'vue-router';
+const route = useRoute();
 
 const itemTypeWorkersOptions = ref([]);
+const sanitizeParam = (param) => {
+    return JSON.parse(route.query.params)[param] ? 'true' : 'false';
+};
+const $params = ref({});
+onMounted(() => {
+    ['mine', 'hasMinPrice'].forEach((tag) => ($params.value[tag] = sanitizeParam(tag)));
+});
 </script>
 
 <template>
@@ -33,6 +42,7 @@ const itemTypeWorkersOptions = ref([]);
     />
     <ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
         <template #body="{ params, searchFn }">
+            {{ JSON.parse(route.query.params).mine }}
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnSelect
@@ -89,15 +99,19 @@ const itemTypeWorkersOptions = ref([]);
                 <QItemSection>
                     <QCheckbox
                         :label="t('components.itemsFilterPanel.mine')"
-                        v-model="params.mine"
-                        toggle-indeterminate
+                        v-model="$params.mine"
+                        :true-value="'true'"
+                        :false-value="'false'"
+                        toggle-indeterminate="true"
                         @update:model-value="searchFn()"
                     />
                 </QItemSection>
                 <QItemSection>
                     <QCheckbox
                         :label="t('components.itemsFilterPanel.hasMinPrice')"
-                        v-model="params.hasMinPrice"
+                        v-model="$params.hasMinPrice"
+                        :true-value="'true'"
+                        :false-value="'false'"
                         toggle-indeterminate
                         @update:model-value="searchFn()"
                     />

From 3a7050d6c4b2db7abfb5366a10739eb637a5fb23 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 4 Jul 2024 22:57:24 +0200
Subject: [PATCH 09/34] feat: solve ItemFixedFilterPanel

---
 src/components/ui/VnFilterPanel.vue     |  1 +
 src/pages/Item/ItemFixedPriceFilter.vue | 13 ++++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 2ea51ed8b..70e36e1db 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -110,6 +110,7 @@ async function search(evt) {
 
     store.filter.where = {};
     isLoading.value = true;
+    if (evt?.param) Object.assign(userParams.value, evt.param);
     const filter = { ...userParams.value };
     store.userParamsChanged = true;
     arrayData.reset(['skip', 'filter.skip', 'page']);
diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index 6fec09f37..4dd4d3b0a 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -24,12 +24,16 @@ const route = useRoute();
 
 const itemTypeWorkersOptions = ref([]);
 const sanitizeParam = (param) => {
-    return JSON.parse(route.query.params)[param] ? 'true' : 'false';
+    const params = JSON.parse(route.query.params);
+    return params[param] ?? 'false';
 };
 const $params = ref({});
 onMounted(() => {
     ['mine', 'hasMinPrice'].forEach((tag) => ($params.value[tag] = sanitizeParam(tag)));
 });
+const pushParam = (param) => ({
+    param: { [param]: $params.value[param] },
+});
 </script>
 
 <template>
@@ -42,6 +46,7 @@ onMounted(() => {
     />
     <ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
         <template #body="{ params, searchFn }">
+            {{ $params }}
             {{ JSON.parse(route.query.params).mine }}
             <QItem class="q-my-md">
                 <QItemSection>
@@ -102,8 +107,7 @@ onMounted(() => {
                         v-model="$params.mine"
                         :true-value="'true'"
                         :false-value="'false'"
-                        toggle-indeterminate="true"
-                        @update:model-value="searchFn()"
+                        @update:model-value="searchFn(pushParam('mine'))"
                     />
                 </QItemSection>
                 <QItemSection>
@@ -112,8 +116,7 @@ onMounted(() => {
                         v-model="$params.hasMinPrice"
                         :true-value="'true'"
                         :false-value="'false'"
-                        toggle-indeterminate
-                        @update:model-value="searchFn()"
+                        @update:model-value="searchFn(pushParam('hasMinPrice'))"
                     />
                 </QItemSection>
             </QItem>

From 32d11edb2f1ff86c5872e4fcb5d27f36d77266e4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jul 2024 14:34:38 +0200
Subject: [PATCH 10/34] updates

---
 src/pages/Item/ItemFixedPriceFilter.vue  | 5 ++---
 src/pages/Order/Card/OrderDescriptor.vue | 2 +-
 src/pages/Order/OrderLines.vue           | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index 4dd4d3b0a..6c35e5cec 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -24,7 +24,8 @@ const route = useRoute();
 
 const itemTypeWorkersOptions = ref([]);
 const sanitizeParam = (param) => {
-    const params = JSON.parse(route.query.params);
+    if (!route?.query?.params) return 'false';
+    const params = JSON.parse(route?.query?.params);
     return params[param] ?? 'false';
 };
 const $params = ref({});
@@ -46,8 +47,6 @@ const pushParam = (param) => ({
     />
     <ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
         <template #body="{ params, searchFn }">
-            {{ $params }}
-            {{ JSON.parse(route.query.params).mine }}
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnSelect
diff --git a/src/pages/Order/Card/OrderDescriptor.vue b/src/pages/Order/Card/OrderDescriptor.vue
index f70ba4520..4d84a32fc 100644
--- a/src/pages/Order/Card/OrderDescriptor.vue
+++ b/src/pages/Order/Card/OrderDescriptor.vue
@@ -60,7 +60,7 @@ const filter = {
 const data = ref(useCardDescription());
 const setData = (entity) => {
     if (!entity) return;
-    data.value = useCardDescription(entity.client.name, entity.id);
+    data.value = useCardDescription(entity?.client?.name, entity?.id);
     state.set('OrderDescriptor', entity);
 };
 
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index e66a3f7c4..3902e8758 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -190,7 +190,7 @@ const columns = computed(() => [
             {
                 title: t('delete'),
                 icon: 'delete',
-                click: (row) => confirmRemove(row.item),
+                action: (row) => confirmRemove(row),
                 isPrimary: true,
             },
         ],
@@ -272,7 +272,7 @@ const columns = computed(() => [
                 </template>
             </VnTable>
         </div>
-        <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed">
+        <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
             <QBtn fab icon="check" color="primary" @click="confirmOrder()" />
             <QTooltip>
                 {{ t('confirm') }}

From e23a30c693fbb57d639e533fbac86abb509b431e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jul 2024 16:05:19 +0200
Subject: [PATCH 11/34] feat: handle dates

---
 src/components/common/VnInputDate.vue |  1 +
 src/pages/Item/ItemFixedPrice.vue     | 20 ++------------------
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index b22de3606..60f693d18 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -122,6 +122,7 @@ watch(
                 :no-focus="true"
             >
                 <QDate
+                    v-bind="{ ...$attrs }"
                     v-model="popupDate"
                     :today-btn="true"
                     @update:model-value="
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 7fa698094..da574be3a 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -520,15 +520,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         style="max-width: 125px"
                         :show-event="false"
                         v-model="props.row.started"
-                        v-on="getRowUpdateInputEvents(props, false, 'date')"
-                        v-bind="
-                            isBigger(props.row.started)
-                                ? {
-                                      'bg-color': 'warning',
-                                      'is-outlined': true,
-                                  }
-                                : {}
-                        "
+                        :options="(date) => date < props.row.ended"
                     />
                 </QTd>
             </template>
@@ -538,15 +530,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         style="max-width: 125px"
                         :show-event="false"
                         v-model="props.row.ended"
-                        v-on="getRowUpdateInputEvents(props, false, 'date')"
-                        v-bind="
-                            isLower(props.row.started)
-                                ? {
-                                      'bg-color': 'warning',
-                                      'is-outlined': true,
-                                  }
-                                : {}
-                        "
+                        :options="(date) => date > props.row.ended"
                     />
                 </QTd>
             </template>

From a9bab6ab2c4d69257b77c9d1371d5fef42953109 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 11 Jul 2024 06:16:51 +0200
Subject: [PATCH 12/34] feat: show bad dates

---
 src/pages/Item/ItemFixedPrice.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index da574be3a..11817d3e9 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -69,7 +69,7 @@ const onFixedPricesFetched = (data) => {
         console.log(item.hasMinPrice);
         item.hasMinPrice = `${item.hasMinPrice !== 0}`;
     });
-    fixedPrices.value = data;
+    fixedPrices.value = Array(200).fill(...data);
     // el objetivo de guardar una copia de las rows es evitar guardar cambios si la data no cambió al disparar los eventos
     fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
 };
@@ -323,7 +323,17 @@ const addRow = () => {
 const openEditTableCellDialog = () => {
     editTableCellDialogRef.value.show();
 };
-
+async function showBadDates() {
+    try {
+        const { data } = await axios.get('FixedPrices/filter', {
+            params: {
+                showBadDates: true,
+            },
+        });
+    } catch (error) {
+        console.error(error);
+    }
+}
 const onEditCellDataSaved = async () => {
     rowsSelected.value = [];
     await fetchFixedPrices();
@@ -583,6 +593,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
         </QTable>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="showBadDates()" color="primary" fab icon="edit" />
+            <QTooltip>
+                {{ t('Edit fixed price(s)') }}
+            </QTooltip>
+        </QPageSticky>
         <QPageSticky v-if="rowsSelected.length" :offset="[20, 20]">
             <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
             <QTooltip>

From 8018a3ac46c1a6fb11bc8e23db9723b97b476fe2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 11 Jul 2024 10:13:50 +0200
Subject: [PATCH 13/34] fix: options QDate

---
 src/components/common/VnInputDate.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 60f693d18..9b4d2ccb6 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -122,9 +122,9 @@ watch(
                 :no-focus="true"
             >
                 <QDate
-                    v-bind="{ ...$attrs }"
                     v-model="popupDate"
                     :today-btn="true"
+                    :options="$attrs.options"
                     @update:model-value="
                         (date) => {
                             formattedDate = date;

From 4a12fd08e09f2e2ca846570db482a1171ddc3598 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 11 Jul 2024 12:29:48 +0200
Subject: [PATCH 14/34] feat: handle dates

---
 src/pages/Item/ItemFixedPrice.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 11817d3e9..a5272eee0 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -69,7 +69,7 @@ const onFixedPricesFetched = (data) => {
         console.log(item.hasMinPrice);
         item.hasMinPrice = `${item.hasMinPrice !== 0}`;
     });
-    fixedPrices.value = Array(200).fill(...data);
+    fixedPrices.value = data;
     // el objetivo de guardar una copia de las rows es evitar guardar cambios si la data no cambió al disparar los eventos
     fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
 };
@@ -530,7 +530,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         style="max-width: 125px"
                         :show-event="false"
                         v-model="props.row.started"
-                        :options="(date) => date < props.row.ended"
                     />
                 </QTd>
             </template>

From 8a4b3302cf90b6916f19cdb8a0489d6d2e75c34b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 11 Jul 2024 23:45:59 +0200
Subject: [PATCH 15/34] feat: add row

---
 src/pages/Item/ItemFixedPrice.vue | 133 ++++++++++++++++++++++++++++--
 1 file changed, 127 insertions(+), 6 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index a5272eee0..ee6e0528d 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, reactive, computed, onUnmounted, watch } from 'vue';
+import { onMounted, ref, reactive, computed, onUnmounted, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -291,8 +291,36 @@ const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice = false) => {
         console.error('Error editing price', err);
     }
 };
+const lastRow = ref(null);
+async function saveOnRowChange(_, row) {
+    if (lastRow.value && lastRow.value !== row.id) {
+        console.log('update');
+        // await upsertPrice(row);
+    }
+    lastRow.value = row.id;
+    rowsSelected.value = [row];
+}
+const tableRef = ref();
+function checkLastVisibleRow() {
+    const tableBody = tableRef.value.$el.querySelector('tbody.q-virtual-scroll__content');
+    if (!tableBody) return;
+    const rows = tableBody.querySelectorAll('tr');
+    let lastVisibleRow = null;
 
+    rows.forEach((row, index) => {
+        const rect = row.getBoundingClientRect();
+        if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
+            lastVisibleRow = index;
+        }
+    });
+
+    if (lastVisibleRow) {
+        console.log('Última fila visible:', lastVisibleRow);
+        return lastVisibleRow;
+    }
+}
 const addRow = () => {
+    const lastvisible = checkLastVisibleRow();
     if (!fixedPrices.value || fixedPrices.value.length === 0) {
         fixedPrices.value = [];
 
@@ -316,10 +344,22 @@ const addRow = () => {
         JSON.stringify(fixedPrices.value[fixedPrices.value.length - 1])
     );
     delete lastItemCopy.id;
-    fixedPricesOriginalData.value.push(lastItemCopy);
-    fixedPrices.value.push(lastItemCopy);
+    fixedPricesOriginalData.value.splice(lastvisible, 0, lastItemCopy);
+    fixedPrices.value.unshift(lastItemCopy);
+    nextTick(() => {
+        highlightNewRow(lastvisible);
+    });
 };
-
+function highlightNewRow(index) {
+    const tableBody = tableRef.value.$el.querySelector('tbody.q-virtual-scroll__content');
+    const row = tableBody.querySelectorAll('tr')[index];
+    if (row) {
+        row.classList.add('highlight');
+        setTimeout(() => {
+            row.classList.remove('highlight');
+        }, 3000); // Duración de la animación en milisegundos
+    }
+}
 const openEditTableCellDialog = () => {
     editTableCellDialogRef.value.show();
 };
@@ -359,6 +399,10 @@ const removePrice = async (id, rowIndex) => {
     }
 };
 
+function onScroll({ to, ref }) {
+    console.log(to, ref);
+}
+
 const updateMinPrice = async (value, props) => {
     // El checkbox hasMinPrice se encuentra en la misma columna que el input hasMinPrice
     // Por lo tanto le mandamos otro objeto con las mismas propiedades pero con el campo 'field' cambiado
@@ -395,7 +439,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </template>
     </RightMenu>
     <QPage class="column items-center q-pa-md">
+        {{ rowsSelected }}
         <QTable
+            ref="tableRef"
+            @virtual-scroll="onScroll"
+            virtual-scroll
             dense
             :rows="fixedPrices"
             :columns="columns"
@@ -405,6 +453,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
             :no-data-label="t('globals.noResults')"
+            @row-click="saveOnRowChange"
+            :virtual-scroll-item-size="48"
         >
             <template #top-row="{ cols }">
                 <QTr>
@@ -427,7 +477,19 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #header="props">
                 <QTr :props="props" class="bg">
-                    <QTh />
+                    <QTh>
+                        <QIcon
+                            @click.stop="addRow()"
+                            class="fill-icon-on-hover"
+                            color="primary"
+                            name="add_circle"
+                            size="sm"
+                        >
+                            <QTooltip>
+                                {{ t('Add fixed price') }}
+                            </QTooltip>
+                        </QIcon>
+                    </QTh>
                     <QTh
                         v-for="col in props.cols"
                         :key="col.name"
@@ -530,6 +592,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         style="max-width: 125px"
                         :show-event="false"
                         v-model="props.row.started"
+                        v-on="getRowUpdateInputEvents(props, false, 'date')"
+                        :options="(date) => date > props.row.ended"
+                        v-bind="
+                            isBigger(props.row.started)
+                                ? {
+                                      'bg-color': 'warning',
+                                      'is-outlined': true,
+                                  }
+                                : {}
+                        "
                     />
                 </QTd>
             </template>
@@ -539,7 +611,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         style="max-width: 125px"
                         :show-event="false"
                         v-model="props.row.ended"
-                        :options="(date) => date > props.row.ended"
+                        :options="isLower(props.row.started)"
+                        v-on="getRowUpdateInputEvents(props, false, 'date')"
+                        v-bind="
+                            isLower(props.row.started)
+                                ? {
+                                      'bg-color': 'warning',
+                                      'is-outlined': true,
+                                  }
+                                : {}
+                        "
                     />
                 </QTd>
             </template>
@@ -598,6 +679,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 {{ t('Edit fixed price(s)') }}
             </QTooltip>
         </QPageSticky>
+        <QPageSticky :offset="[20, -20]">
+            <QBtn @click="addRow()" color="primary" fab icon="add" />
+            <QTooltip>
+                {{ t('Add') }}
+            </QTooltip>
+        </QPageSticky>
         <QPageSticky v-if="rowsSelected.length" :offset="[20, 20]">
             <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
             <QTooltip>
@@ -623,6 +710,40 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 .q-field__append {
     padding: 0;
 }
+/* height or max-height is important */
+
+.q-table__top,
+.q-table__bottom,
+tbody tr:first-child td {
+    /* bg color is important for th; just specify one */
+    background-color: #00b4ff;
+}
+thead tr th {
+    position: sticky;
+    z-index: 1;
+}
+thead tr:first-child th {
+    top: 0;
+}
+
+/* this is when the loading indicator appears */
+
+/* prevent scrolling behind sticky top row on focus */
+tbody
+    /* height of all previous header rows */ {
+    scroll-margin-top: 148px;
+}
+tbody tr.highlight .q-td {
+    animation: highlight-animation 4s ease-in-out;
+}
+@keyframes highlight-animation {
+    0% {
+        background-color: $primary-light;
+    }
+    100% {
+        background-color: transparent;
+    }
+}
 </style>
 <i18n>
 es:

From 77c7a9e03ad60171b997ec2a55af01ac09a0cc4d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jul 2024 00:26:45 +0200
Subject: [PATCH 16/34] feat: remove future itemFixedPrices

---
 src/pages/Item/ItemFixedPrice.vue | 118 ++++++++++++++++++------------
 1 file changed, 71 insertions(+), 47 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index ee6e0528d..f89c50b1c 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { onMounted, ref, reactive, computed, onUnmounted, watch, nextTick } from 'vue';
+import { onMounted, ref, reactive, onUnmounted, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
@@ -21,7 +22,9 @@ import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
 import { isLower, isBigger } from 'src/filters/date.js';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import { QCheckbox } from 'quasar';
 
+const checked = ref(false);
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
@@ -302,7 +305,7 @@ async function saveOnRowChange(_, row) {
 }
 const tableRef = ref();
 function checkLastVisibleRow() {
-    const tableBody = tableRef.value.$el.querySelector('tbody.q-virtual-scroll__content');
+    const tableBody = tableRef.value.$el.querySelector('tbody');
     if (!tableBody) return;
     const rows = tableBody.querySelectorAll('tr');
     let lastVisibleRow = null;
@@ -351,7 +354,7 @@ const addRow = () => {
     });
 };
 function highlightNewRow(index) {
-    const tableBody = tableRef.value.$el.querySelector('tbody.q-virtual-scroll__content');
+    const tableBody = tableRef.value.$el.querySelector('tbody');
     const row = tableBody.querySelectorAll('tr')[index];
     if (row) {
         row.classList.add('highlight');
@@ -365,11 +368,15 @@ const openEditTableCellDialog = () => {
 };
 async function showBadDates() {
     try {
-        const { data } = await axios.get('FixedPrices/filter', {
-            params: {
-                showBadDates: true,
-            },
-        });
+        if (!checked.value) fixedPrices.value = fixedPricesOriginalData.value;
+        else {
+            const { data } = await axios.get('FixedPrices/filter', {
+                params: {
+                    showBadDates: checked.value,
+                },
+            });
+            fixedPrices.value = data;
+        }
     } catch (error) {
         console.error(error);
     }
@@ -388,6 +395,16 @@ const onWarehousesFetched = (data) => {
     warehouseField.attrs.options = data;
 };
 
+const removeFuturePrice = async () => {
+    try {
+        rowsSelected.value.forEach(({ id }) => {
+            const rowIndex = fixedPrices.value.findIndex((r) => r.id === id);
+            removePrice(id, rowIndex);
+        });
+    } catch (err) {
+        console.error('Error removing price', err);
+    }
+};
 const removePrice = async (id, rowIndex) => {
     try {
         await axios.delete(`FixedPrices/${id}`);
@@ -399,10 +416,6 @@ const removePrice = async (id, rowIndex) => {
     }
 };
 
-function onScroll({ to, ref }) {
-    console.log(to, ref);
-}
-
 const updateMinPrice = async (value, props) => {
     // El checkbox hasMinPrice se encuentra en la misma columna que el input hasMinPrice
     // Por lo tanto le mandamos otro objeto con las mismas propiedades pero con el campo 'field' cambiado
@@ -438,12 +451,20 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             />
         </template>
     </RightMenu>
+    <VnSubToolbar>
+        <template #st-data>
+            <QCheckbox
+                size="sm"
+                v-model="checked"
+                :label="t(`Show future items`)"
+                @update:model-value="showBadDates"
+            >
+            </QCheckbox>
+        </template>
+    </VnSubToolbar>
     <QPage class="column items-center q-pa-md">
-        {{ rowsSelected }}
         <QTable
             ref="tableRef"
-            @virtual-scroll="onScroll"
-            virtual-scroll
             dense
             :rows="fixedPrices"
             :columns="columns"
@@ -454,7 +475,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             class="full-width q-mt-md"
             :no-data-label="t('globals.noResults')"
             @row-click="saveOnRowChange"
-            :virtual-scroll-item-size="48"
         >
             <template #top-row="{ cols }">
                 <QTr>
@@ -489,6 +509,19 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                                 {{ t('Add fixed price') }}
                             </QTooltip>
                         </QIcon>
+                        <!-- <QIcon
+                                v-if="!(checked && rowsSelected.length > 0)"
+                            v-else-if="tableRef?.rows?.length > 0"
+                            @click.stop="removeFuturePrice()"
+                            class="fill-icon-on-hover"
+                            color="primary"
+                            name="delete"
+                            size="sm"
+                        >
+                            <QTooltip>
+                                {{ t('Add fixed price') }}
+                            </QTooltip>
+                        </QIcon>-->
                     </QTh>
                     <QTh
                         v-for="col in props.cols"
@@ -593,7 +626,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         :show-event="false"
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
-                        :options="(date) => date > props.row.ended"
                         v-bind="
                             isBigger(props.row.started)
                                 ? {
@@ -611,7 +643,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         style="max-width: 125px"
                         :show-event="false"
                         v-model="props.row.ended"
-                        :options="isLower(props.row.started)"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
                         v-bind="
                             isLower(props.row.started)
@@ -673,24 +704,38 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
         </QTable>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="showBadDates()" color="primary" fab icon="edit" />
-            <QTooltip>
-                {{ t('Edit fixed price(s)') }}
-            </QTooltip>
-        </QPageSticky>
-        <QPageSticky :offset="[20, -20]">
+        <QPageSticky :offset="[20, 0]">
             <QBtn @click="addRow()" color="primary" fab icon="add" />
             <QTooltip>
                 {{ t('Add') }}
             </QTooltip>
         </QPageSticky>
-        <QPageSticky v-if="rowsSelected.length" :offset="[20, 20]">
+        <QPageSticky v-if="rowsSelected.length" :offset="[20, 60]">
             <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
             <QTooltip>
                 {{ t('Edit fixed price(s)') }}
             </QTooltip>
         </QPageSticky>
+        <QPageSticky
+            :offset="[20, 120]"
+            v-if="tableRef?.rows?.length > 0 && checked && rowsSelected.length > 0"
+        >
+            <QBtn
+                color="primary"
+                fab
+                icon="delete"
+                @click.stop="
+                    openConfirmationModal(
+                        t('This row will be removed'),
+                        t('Do you want to clone this item?'),
+                        () => removeFuturePrice()
+                    )
+                "
+            />
+            <QTooltip>
+                {{ t('Add') }}
+            </QTooltip>
+        </QPageSticky>
         <QDialog ref="editTableCellDialogRef">
             <EditTableCellValueForm
                 edit-url="FixedPrices/editFixedPrice"
@@ -712,27 +757,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 }
 /* height or max-height is important */
 
-.q-table__top,
-.q-table__bottom,
-tbody tr:first-child td {
-    /* bg color is important for th; just specify one */
-    background-color: #00b4ff;
-}
-thead tr th {
-    position: sticky;
-    z-index: 1;
-}
-thead tr:first-child th {
-    top: 0;
-}
-
-/* this is when the loading indicator appears */
-
-/* prevent scrolling behind sticky top row on focus */
-tbody
-    /* height of all previous header rows */ {
-    scroll-margin-top: 148px;
-}
 tbody tr.highlight .q-td {
     animation: highlight-animation 4s ease-in-out;
 }

From 68192e50744b7a5e75680a32f65b4a5c887eb35a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jul 2024 01:20:36 +0200
Subject: [PATCH 17/34] perf: onRowchange

---
 src/pages/Item/ItemFixedPrice.vue | 48 +++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index f89c50b1c..32ccbc281 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -281,28 +281,54 @@ const validations = (row, rowIndex, col) => {
     );
 };
 
+async function upsertFixedPrice(row) {
+    try {
+        const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
+        return data;
+    } catch (err) {
+        console.error('Error editing price', err);
+    }
+}
 const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice = false) => {
     if (!validations(row, rowIndex, col)) return;
 
     try {
         if (resetMinPrice) row.hasMinPrice = 0;
-
-        const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
-        row = data;
+        row = await upsertFixedPrice(row);
         fixedPricesOriginalData.value[rowIndex][col.field] = row[col.field];
     } catch (err) {
         console.error('Error editing price', err);
     }
 };
-const lastRow = ref(null);
 async function saveOnRowChange(_, row) {
-    if (lastRow.value && lastRow.value !== row.id) {
-        console.log('update');
-        // await upsertPrice(row);
-    }
-    lastRow.value = row.id;
+    if (rowsSelected.value.length > 1) return;
+    if (rowsSelected.value[0]?.id === row.id) return;
+    else if (rowsSelected.value.length === 1)
+        await upsertFixedPrice(rowsSelected.value[0]);
     rowsSelected.value = [row];
+    // if (rowsSelected.value.length > 0) {
+    //     disableUnselectedRows();
+    // } else {
+    //     resetRowStates();
+    // }
+    // if (lastRow.value && lastRow.value !== row.id) {
+    //     console.log('update');
+    //     // await upsertPrice(row);
+    // }
+    // lastRow.value = row.id;
 }
+// function disableUnselectedRows() {
+//     fixedPrices.value.forEach((row) => {
+//         row.disabled = !rowsSelected.value.includes(row.id);
+//     });
+// }
+// function resetRowStates() {
+//     fixedPrices.value.forEach((row) => {
+//         row.disable = false;
+//     });
+//     // Aquí puedes guardar los cambios si es necesario
+//     console.log('Guardando cambios...');
+// }
 const tableRef = ref();
 function checkLastVisibleRow() {
     const tableBody = tableRef.value.$el.querySelector('tbody');
@@ -370,6 +396,7 @@ async function showBadDates() {
     try {
         if (!checked.value) fixedPrices.value = fixedPricesOriginalData.value;
         else {
+            rowsSelected.value = [];
             const { data } = await axios.get('FixedPrices/filter', {
                 params: {
                     showBadDates: checked.value,
@@ -539,6 +566,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     style="width: 10px; margin-left: -20px"
                     v-model="scope.selected"
                 />
+                <!--:disable="
+                        rowsSelected.length > 0 && rowsSelected[0].id !== scope.row.id
+                    "-->
             </template>
             <template #header-selection="scope">
                 <QCheckbox style="margin-left: -15px" v-model="scope.selected" />

From 5518fa98e00341cbaaa676c4053c66b0fe05fb96 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jul 2024 13:13:37 +0200
Subject: [PATCH 18/34] perf: remove icons in header slot

---
 src/pages/Item/ItemFixedPrice.vue | 27 +--------------------------
 1 file changed, 1 insertion(+), 26 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 32ccbc281..e62e7a910 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -524,32 +524,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #header="props">
                 <QTr :props="props" class="bg">
-                    <QTh>
-                        <QIcon
-                            @click.stop="addRow()"
-                            class="fill-icon-on-hover"
-                            color="primary"
-                            name="add_circle"
-                            size="sm"
-                        >
-                            <QTooltip>
-                                {{ t('Add fixed price') }}
-                            </QTooltip>
-                        </QIcon>
-                        <!-- <QIcon
-                                v-if="!(checked && rowsSelected.length > 0)"
-                            v-else-if="tableRef?.rows?.length > 0"
-                            @click.stop="removeFuturePrice()"
-                            class="fill-icon-on-hover"
-                            color="primary"
-                            name="delete"
-                            size="sm"
-                        >
-                            <QTooltip>
-                                {{ t('Add fixed price') }}
-                            </QTooltip>
-                        </QIcon>-->
-                    </QTh>
+                    <QTh />
                     <QTh
                         v-for="col in props.cols"
                         :key="col.name"

From 4cbca1ca648ed86f352f902648d364e7ae6f4ab0 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jul 2024 13:13:50 +0200
Subject: [PATCH 19/34] feat: showdate icons

---
 src/pages/Item/ItemFixedPrice.vue | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index e62e7a910..5b35670a9 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -628,7 +628,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <QTd class="col">
                     <VnInputDate
                         style="max-width: 125px"
-                        :show-event="false"
+                        :show-event="true"
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
                         v-bind="
@@ -646,7 +646,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <QTd class="col">
                     <VnInputDate
                         style="max-width: 125px"
-                        :show-event="false"
+                        :show-event="true"
                         v-model="props.row.ended"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
                         v-bind="
@@ -693,21 +693,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </QIcon>
                 </QTd>
             </template>
-            <template #bottom-row>
-                <QTd align="center">
-                    <QIcon
-                        @click.stop="addRow()"
-                        class="fill-icon-on-hover"
-                        color="primary"
-                        name="add_circle"
-                        size="sm"
-                    >
-                        <QTooltip>
-                            {{ t('Add fixed price') }}
-                        </QTooltip>
-                    </QIcon>
-                </QTd>
-            </template>
         </QTable>
         <QPageSticky :offset="[20, 0]">
             <QBtn @click="addRow()" color="primary" fab icon="add" />

From fceeaea1f526df2e478beb564c4587b284d722a4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 12 Jul 2024 15:22:29 +0200
Subject: [PATCH 20/34] feat: replace stickyButtons by subtoolbar

---
 src/pages/Item/ItemFixedPrice.vue       | 58 +++++--------------------
 src/pages/Item/ItemFixedPriceFilter.vue | 15 ++++++-
 2 files changed, 24 insertions(+), 49 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 5b35670a9..2c55e33e1 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -392,22 +392,6 @@ function highlightNewRow(index) {
 const openEditTableCellDialog = () => {
     editTableCellDialogRef.value.show();
 };
-async function showBadDates() {
-    try {
-        if (!checked.value) fixedPrices.value = fixedPricesOriginalData.value;
-        else {
-            rowsSelected.value = [];
-            const { data } = await axios.get('FixedPrices/filter', {
-                params: {
-                    showBadDates: checked.value,
-                },
-            });
-            fixedPrices.value = data;
-        }
-    } catch (error) {
-        console.error(error);
-    }
-}
 const onEditCellDataSaved = async () => {
     rowsSelected.value = [];
     await fetchFixedPrices();
@@ -480,13 +464,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     </RightMenu>
     <VnSubToolbar>
         <template #st-data>
-            <QCheckbox
-                size="sm"
-                v-model="checked"
-                :label="t(`Show future items`)"
-                @update:model-value="showBadDates"
+            <QBtn
+                v-if="rowsSelected.length"
+                @click="openEditTableCellDialog()"
+                color="primary"
+                icon="edit"
             >
-            </QCheckbox>
+                <QTooltip>
+                    {{ t('Edit fixed price(s)') }}
+                </QTooltip>
+            </QBtn>
         </template>
     </VnSubToolbar>
     <QPage class="column items-center q-pa-md">
@@ -700,32 +687,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 {{ t('Add') }}
             </QTooltip>
         </QPageSticky>
-        <QPageSticky v-if="rowsSelected.length" :offset="[20, 60]">
-            <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
-            <QTooltip>
-                {{ t('Edit fixed price(s)') }}
-            </QTooltip>
-        </QPageSticky>
-        <QPageSticky
-            :offset="[20, 120]"
-            v-if="tableRef?.rows?.length > 0 && checked && rowsSelected.length > 0"
-        >
-            <QBtn
-                color="primary"
-                fab
-                icon="delete"
-                @click.stop="
-                    openConfirmationModal(
-                        t('This row will be removed'),
-                        t('Do you want to clone this item?'),
-                        () => removeFuturePrice()
-                    )
-                "
-            />
-            <QTooltip>
-                {{ t('Add') }}
-            </QTooltip>
-        </QPageSticky>
+
         <QDialog ref="editTableCellDialogRef">
             <EditTableCellValueForm
                 edit-url="FixedPrices/editFixedPrice"
diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index 6c35e5cec..61bac2a6e 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -30,7 +30,9 @@ const sanitizeParam = (param) => {
 };
 const $params = ref({});
 onMounted(() => {
-    ['mine', 'hasMinPrice'].forEach((tag) => ($params.value[tag] = sanitizeParam(tag)));
+    ['mine', 'hasMinPrice', 'showBadDates'].forEach(
+        (tag) => ($params.value[tag] = sanitizeParam(tag))
+    );
 });
 const pushParam = (param) => ({
     param: { [param]: $params.value[param] },
@@ -109,6 +111,17 @@ const pushParam = (param) => ({
                         @update:model-value="searchFn(pushParam('mine'))"
                     />
                 </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        size="sm"
+                        v-model="checked"
+                        :label="t(`Show future items`)"
+                        :true-value="'true'"
+                        :false-value="'false'"
+                        @update:model-value="searchFn(pushParam('showBadDates'))"
+                    >
+                    </QCheckbox>
+                </QItemSection>
                 <QItemSection>
                     <QCheckbox
                         :label="t('components.itemsFilterPanel.hasMinPrice')"

From dbe6e86ba76e0e5c3a7f8950676459b57da54d39 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 13 Jul 2024 00:06:33 +0200
Subject: [PATCH 21/34] ticketComponent i18n

---
 src/pages/Ticket/Card/TicketComponents.vue | 38 +++++++++++-----------
 src/pages/Ticket/locale/en.yml             |  2 +-
 src/pages/Ticket/locale/es.yml             |  2 +-
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketComponents.vue b/src/pages/Ticket/Card/TicketComponents.vue
index 19d25d259..3954b5a62 100644
--- a/src/pages/Ticket/Card/TicketComponents.vue
+++ b/src/pages/Ticket/Card/TicketComponents.vue
@@ -71,39 +71,39 @@ const salesFilter = computed(() => ({
 
 const columns = computed(() => [
     {
-        label: t('components.item'),
+        label: t('ticketComponents.item'),
         name: 'item',
         align: 'left',
     },
     {
-        label: t('components.description'),
+        label: t('ticketComponents.description'),
         name: 'description',
         align: 'left',
     },
     {
-        label: t('components.quantity'),
+        label: t('ticketComponents.quantity'),
         name: 'quantity',
         field: 'quantity',
         align: 'left',
         format: (val) => dashIfEmpty(val),
     },
     {
-        label: t('components.serie'),
+        label: t('ticketComponents.serie'),
         name: 'serie',
         align: 'left',
     },
     {
-        label: t('components.components'),
+        label: t('ticketComponents.components'),
         name: 'components',
         align: 'left',
     },
     {
-        label: t('components.import'),
+        label: t('ticketComponents.import'),
         name: 'import',
         align: 'left',
     },
     {
-        label: t('components.total'),
+        label: t('ticketComponents.total'),
         name: 'total',
         align: 'left',
     },
@@ -184,18 +184,18 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('components.total') }}
+                        {{ t('ticketComponents.total') }}
                     </span>
                 </QCardSection>
                 <QCardSection horizontal>
                     <span class="q-mr-xs color-vn-label"
-                        >{{ t('components.baseToCommission') }}:
+                        >{{ t('ticketComponents.baseToCommission') }}:
                     </span>
                     <span>{{ toCurrency(getBase) }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
                     <span class="q-mr-xs color-vn-label"
-                        >{{ t('components.totalWithoutVat') }}:
+                        >{{ t('ticketComponents.totalWithoutVat') }}:
                     </span>
                     <span>{{ toCurrency(getTotal) }}</span>
                 </QCardSection>
@@ -208,7 +208,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('components.components') }}
+                        {{ t('ticketComponents.components') }}
                     </span>
                 </QCardSection>
                 <QCardSection
@@ -232,24 +232,24 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('components.zoneBreakdown') }}
+                        {{ t('ticketComponents.zoneBreakdown') }}
                     </span>
                 </QCardSection>
                 <QCardSection horizontal>
                     <span class="q-mr-xs color-vn-label">
-                        {{ t('components.price') }}:
+                        {{ t('ticketComponents.price') }}:
                     </span>
                     <span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
                     <span class="q-mr-xs color-vn-label">
-                        {{ t('components.bonus') }}:
+                        {{ t('ticketComponents.bonus') }}:
                     </span>
                     <span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
                     <span class="q-mr-xs color-vn-label">
-                        {{ t('components.zone') }}:
+                        {{ t('ticketComponents.zone') }}:
                     </span>
                     <span class="link">
                         {{ dashIfEmpty(ticketData?.zone?.name) }}
@@ -258,13 +258,13 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QCardSection>
                 <QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
                     <span class="q-mr-xs color-vn-label">
-                        {{ t('components.volume') }}:
+                        {{ t('ticketComponents.volume') }}:
                     </span>
                     <span>{{ ticketVolume }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
                     <span class="q-mr-xs color-vn-label">
-                        {{ t('components.packages') }}:
+                        {{ t('ticketComponents.packages') }}:
                     </span>
                     <span>{{ dashIfEmpty(ticketData?.packages) }}</span>
                 </QCardSection>
@@ -277,12 +277,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('components.theoricalCost') }}
+                        {{ t('ticketComponents.theoricalCost') }}
                     </span>
                 </QCardSection>
                 <QCardSection horizontal>
                     <span class="q-mr-xs color-vn-label">
-                        {{ t('components.totalPrice') }}:
+                        {{ t('ticketComponents.totalPrice') }}:
                     </span>
                     <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
                 </QCardSection>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index ede5480ff..e3f2f06da 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -178,7 +178,7 @@ service:
     addService: Add service
     quantityInfo: To create services with negative amounts mark the service on the source ticket and press the pay button.
     createRefundSuccess: 'The following refund ticket have been created: { ticketId }'
-components:
+ticketComponents:
     item: Item
     description: Description
     quantity: Quantity
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 1b97cd66f..a46bbd5ec 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -164,7 +164,7 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
-components:
+ticketComponents:
     item: Artículo
     description: Descripción
     quantity: Cantidad

From 9fe09bcffc955bd810184c1a0b74981229c377a5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 17 Jul 2024 11:45:56 +0200
Subject: [PATCH 22/34] Merge branch 'dev' into 7671_dense_itemFixedPrices

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

diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 3b4c81ecd..df6b564d1 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -2,7 +2,6 @@
 import { watch, computed, ref, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
-import { nextTick } from 'vue';
 
 const model = defineModel({ type: String });
 const props = defineProps({

From 0e5e7c3fda1a7664b1211248591b68eea7eb0e30 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 17 Jul 2024 12:07:50 +0200
Subject: [PATCH 23/34] feat:  with VnTable

---
 src/components/VnTable/VnColumn.vue |   2 +-
 src/pages/Item/ItemFixedPrice.vue   | 466 +++++++++++++---------------
 2 files changed, 220 insertions(+), 248 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 3af58226f..d86dd87da 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -158,7 +158,7 @@ const col = computed(() => {
 const components = computed(() => $props.components ?? defaultComponents);
 </script>
 <template>
-    <div class="row no-wrap">
+    <div class="row no-wrap" :style="$props.column.style">
         <VnComponent
             v-if="col.before"
             :prop="col.before"
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 2c55e33e1..fb9fa33f9 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { onMounted, ref, reactive, onUnmounted, watch, nextTick } from 'vue';
+import { onMounted, ref, reactive, onUnmounted, nextTick, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
-import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
@@ -13,15 +12,15 @@ import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
 import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
 
 import { useStateStore } from 'stores/useStateStore';
-import { dashIfEmpty } from 'src/filters';
+import { dashIfEmpty, toDate } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useState } from 'src/composables/useState';
 import { toCurrency } from 'filters/index';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
-import { useArrayData } from 'composables/useArrayData';
 import { isLower, isBigger } from 'src/filters/date.js';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 import { QCheckbox } from 'quasar';
 
 const checked = ref(false);
@@ -55,106 +54,106 @@ const exprBuilder = (param, value) => {
 };
 
 const params = reactive({});
-const arrayData = useArrayData('ItemFixedPrices', {
-    url: 'FixedPrices/filter',
-    userParams: params,
-    order: ['name ASC', 'itemFk'],
-    exprBuilder: exprBuilder,
-});
-const store = arrayData.store;
+// const arrayData = useArrayData('ItemFixedPrices', {
+//     url: 'FixedPrices/filter',
+//     userParams: params,
+//     order: ['name ASC', 'itemFk'],
+//     exprBuilder: exprBuilder,
+// });
+// const store = arrayData.store;
 
-const fetchFixedPrices = async () => {
-    await arrayData.fetch({ append: false });
-};
+// const fetchFixedPrices = async () => {
+//     await arrayData.fetch({ append: false });
+// };
 
-const onFixedPricesFetched = (data) => {
-    data.forEach((item) => {
-        console.log(item.hasMinPrice);
-        item.hasMinPrice = `${item.hasMinPrice !== 0}`;
-    });
-    fixedPrices.value = data;
-    // el objetivo de guardar una copia de las rows es evitar guardar cambios si la data no cambió al disparar los eventos
-    fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
-};
+// const onFixedPricesFetched = (data) => {
+//     data.forEach((item) => {
+//         console.log(item.hasMinPrice);
+//         item.hasMinPrice = `${item.hasMinPrice !== 0}`;
+//     });
+//     fixedPrices.value = data;
+//     // el objetivo de guardar una copia de las rows es evitar guardar cambios si la data no cambió al disparar los eventos
+//     fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
+// };
 
-watch(
-    () => store.data,
-    (data) => onFixedPricesFetched(data)
-);
+// watch(
+//     () => store.data,
+//     (data) => onFixedPricesFetched(data)
+// );
 
-const applyColumnFilter = async (col) => {
-    try {
-        const paramKey = col.columnFilter?.filterParamKey || col.field;
-        params[paramKey] = col.columnFilter.filterValue;
-        await arrayData.addFilter({ params });
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
+// const applyColumnFilter = async (col) => {
+//     try {
+//         const paramKey = col.columnFilter?.filterParamKey || col.field;
+//         params[paramKey] = col.columnFilter.filterValue;
+//         await arrayData.addFilter({ params });
+//     } catch (err) {
+//         console.error('Error applying column filter', err);
+//     }
+// };
 
-const getColumnInputEvents = (col) => {
-    return col.columnFilter.type === 'select'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
+// const getColumnInputEvents = (col) => {
+//     return col.columnFilter.type === 'select'
+//         ? { 'update:modelValue': () => applyColumnFilter(col) }
+//         : {
+//               'keyup.enter': () => applyColumnFilter(col),
+//           };
+// };
 
-const defaultColumnFilter = {
-    component: VnInput,
-    type: 'text',
-    filterValue: null,
-    event: getColumnInputEvents,
-    attrs: {
-        dense: true,
-    },
-};
+// const defaultColumnFilter = {
+//     component: VnInput,
+//     type: 'text',
+//     filterValue: null,
+//     event: getColumnInputEvents,
+//     attrs: {
+//         dense: true,
+//     },
+// };
 
 const defaultColumnAttrs = {
     align: 'left',
     sortable: true,
 };
 
-const columns = ref([
+const columns = computed(() => [
     {
         sortable: true,
         align: 'left',
         label: t('item.fixedPrice.itemId'),
         name: 'itemId',
-        field: 'itemFk',
         ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
+        isId: true,
+        cardVisible: true,
+        columnField: {
+            component: 'input',
+            type: 'number',
         },
     },
     {
-        label: t('globals.description'),
+        label: t('globals.name'),
         field: 'name',
         name: 'description',
         ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
-        },
+        create: true,
+        cardVisible: true,
     },
     {
         label: t('item.fixedPrice.groupingPrice'),
         field: 'rate2',
-        name: 'groupingPrice',
+        name: 'rate2',
         ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
-        },
-        format: (val) => toCurrency(val),
+        cardVisible: true,
+        class: 'expand',
+
+        style: 'max-width: 80px',
     },
     {
         label: t('item.fixedPrice.packingPrice'),
         field: 'rate3',
-        name: 'packingPrice',
+        name: 'rate3',
         ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
-        },
-        format: (val) => dashIfEmpty(val),
+        cardVisible: true,
+        class: 'expand',
+        style: 'max-width: 80px',
     },
 
     {
@@ -162,8 +161,11 @@ const columns = ref([
         field: 'minPrice',
         name: 'minPrice',
         ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
+        cardVisible: true,
+        columnField: {
+            class: 'expand',
+            component: 'input',
+            type: 'number',
         },
     },
     {
@@ -171,93 +173,40 @@ const columns = ref([
         field: 'started',
         name: 'started',
         ...defaultColumnAttrs,
-        columnFilter: null,
+        cardVisible: true,
+        component: 'date',
+        format: (row) => toDate(row.started),
     },
     {
         label: t('item.fixedPrice.ended'),
         field: 'ended',
         name: 'ended',
         ...defaultColumnAttrs,
-        columnFilter: null,
+        cardVisible: true,
+        component: 'date',
+        format: (row) => toDate(row.ended),
     },
 
     {
         label: t('item.fixedPrice.warehouse'),
         field: 'warehouseFk',
-        name: 'warehouse',
+        name: 'warehouseFk',
         ...defaultColumnAttrs,
-        columnFilter: {
-            component: VnSelect,
-            type: 'select',
-            filterValue: null,
-            event: getColumnInputEvents,
-            attrs: {
-                options: warehousesOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('delete'),
+                icon: 'delete',
+                action: (row) => confirmRemove(row),
+                isPrimary: true,
             },
-        },
+        ],
     },
-    { name: 'deleteAction', align: 'center' },
 ]);
 
-const editTableFieldsOptions = [
-    {
-        field: 'rate2',
-        label: t('item.fixedPrice.groupingPrice'),
-        component: 'input',
-        attrs: {
-            type: 'number',
-        },
-    },
-    {
-        field: 'rate3',
-        label: t('item.fixedPrice.packingPrice'),
-        component: 'input',
-        attrs: {
-            type: 'number',
-        },
-    },
-    {
-        field: 'minPrice',
-        label: t('item.fixedPrice.minPrice'),
-        component: 'input',
-        attrs: {
-            type: 'number',
-        },
-    },
-    {
-        field: 'hasMinPrice',
-        label: t('item.fixedPrice.hasMinPrice'),
-        component: 'checkbox',
-        attrs: {
-            'false-value': 0,
-            'true-value': 1,
-        },
-    },
-    {
-        field: 'started',
-        label: t('item.fixedPrice.started'),
-        component: 'date',
-    },
-    {
-        field: 'ended',
-        label: t('item.fixedPrice.ended'),
-        component: 'date',
-    },
-    {
-        field: 'warehouseFk',
-        label: t('item.fixedPrice.warehouse'),
-        component: 'select',
-        attrs: {
-            options: [],
-            'option-label': 'name',
-            'option-value': 'id',
-        },
-    },
-];
-
 const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
     return inputType === 'text'
         ? {
@@ -272,8 +221,8 @@ const validations = (row, rowIndex, col) => {
     // Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
     // Si isNew es falso no se checkea si el valor es igual a la original
     if (!isNew)
-        if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field])
-            return false;
+        // if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field])
+        return false;
 
     const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
     return requiredFields.every(
@@ -295,12 +244,12 @@ const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice = false) => {
     try {
         if (resetMinPrice) row.hasMinPrice = 0;
         row = await upsertFixedPrice(row);
-        fixedPricesOriginalData.value[rowIndex][col.field] = row[col.field];
+        // fixedPricesOriginalData.value[rowIndex][col.field] = row[col.field];
     } catch (err) {
         console.error('Error editing price', err);
     }
 };
-async function saveOnRowChange(_, row) {
+async function saveOnRowChange(row) {
     if (rowsSelected.value.length > 1) return;
     if (rowsSelected.value[0]?.id === row.id) return;
     else if (rowsSelected.value.length === 1)
@@ -331,9 +280,9 @@ async function saveOnRowChange(_, row) {
 // }
 const tableRef = ref();
 function checkLastVisibleRow() {
-    const tableBody = tableRef.value.$el.querySelector('tbody');
-    if (!tableBody) return;
-    const rows = tableBody.querySelectorAll('tr');
+    const rows = document
+        .getElementsByClassName('q-table')[0]
+        .querySelectorAll('tr.cursor-pointer');
     let lastVisibleRow = null;
 
     rows.forEach((row, index) => {
@@ -348,7 +297,7 @@ function checkLastVisibleRow() {
         return lastVisibleRow;
     }
 }
-const addRow = () => {
+const addRow = (fixedPrice = null) => {
     const lastvisible = checkLastVisibleRow();
     if (!fixedPrices.value || fixedPrices.value.length === 0) {
         fixedPrices.value = [];
@@ -368,10 +317,16 @@ const addRow = () => {
         fixedPrices.value.push({ ...newPrice });
         return;
     }
+    if (fixedPrice) {
+        lastItem.value = fixedPrice;
+        return;
+    }
 
     const lastItemCopy = JSON.parse(
         JSON.stringify(fixedPrices.value[fixedPrices.value.length - 1])
     );
+    lastItem.value = lastItemCopy;
+    // tableRef.value.create.formInitialData = lastItem;
     delete lastItemCopy.id;
     fixedPricesOriginalData.value.splice(lastvisible, 0, lastItemCopy);
     fixedPrices.value.unshift(lastItemCopy);
@@ -379,9 +334,11 @@ const addRow = () => {
         highlightNewRow(lastvisible);
     });
 };
+const lastItem = ref(null);
 function highlightNewRow(index) {
-    const tableBody = tableRef.value.$el.querySelector('tbody');
-    const row = tableBody.querySelectorAll('tr')[index];
+    const row = document
+        .getElementsByClassName('q-table')[0]
+        .querySelectorAll('tr.cursor-pointer')[index];
     if (row) {
         row.classList.add('highlight');
         setTimeout(() => {
@@ -394,18 +351,26 @@ const openEditTableCellDialog = () => {
 };
 const onEditCellDataSaved = async () => {
     rowsSelected.value = [];
-    await fetchFixedPrices();
-};
-
-const onWarehousesFetched = (data) => {
-    warehousesOptions.value = data;
-    // Actualiza las 'options' del elemento con field 'warehouseFk' en 'editTableFieldsOptions'.
-    const warehouseField = editTableFieldsOptions.find(
-        (field) => field.field === 'warehouseFk'
-    );
-    warehouseField.attrs.options = data;
 };
+/*const lastRow = ref(null);
+async function saveOnRowChange(row) {
+    if (lastRow.value && lastRow.value !== row.id) {
+        console.log('update');
+        await upsertPrice(row);
+        return;
+    }
+    lastRow.value = row.id;
+}*/
 
+// const onWarehousesFetched = (data) => {
+//     warehousesOptions.value = data;
+//     // Actualiza las 'options' del elemento con field 'warehouseFk' en 'editTableFieldsOptions'.
+//     const warehouseField = editTableFieldsOptions.find(
+//         (field) => field.field === 'warehouseFk'
+//     );
+//     warehouseField.attrs.options = data;
+// };
+import { useQuasar } from 'quasar';
 const removeFuturePrice = async () => {
     try {
         rowsSelected.value.forEach(({ id }) => {
@@ -416,43 +381,54 @@ const removeFuturePrice = async () => {
         console.error('Error removing price', err);
     }
 };
-const removePrice = async (id, rowIndex) => {
+const quasar = useQuasar();
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import FetchData from 'src/components/FetchData.vue';
+
+function confirmRemove(item) {
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            title: t('This row will be removed'),
+            message: t('Do you want to clone this item?'),
+            promise: async () => removePrice(item.id),
+        },
+    });
+}
+
+const removePrice = async (id) => {
     try {
         await axios.delete(`FixedPrices/${id}`);
-        fixedPrices.value.splice(rowIndex, 1);
-        fixedPricesOriginalData.value.splice(rowIndex, 1);
         notify(t('globals.dataSaved'), 'positive');
+        tableRef.value.reload({});
     } catch (err) {
         console.error('Error removing price', err);
     }
 };
 
-const updateMinPrice = async (value, props) => {
-    // El checkbox hasMinPrice se encuentra en la misma columna que el input hasMinPrice
-    // Por lo tanto le mandamos otro objeto con las mismas propiedades pero con el campo 'field' cambiado
-    props.row.hasMinPrice = value;
-    await upsertPrice({
-        row: props.row,
-        col: { field: 'hasMinPrice' },
-        rowIndex: props.rowIndex,
-    });
-};
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
     params.warehouseFk = user.value.warehouseFk;
-    await fetchFixedPrices();
 });
-
+function handleOnDataSave(CrudModelRef) {
+    addRow(
+        CrudModelRef.CrudModelRef.formData[CrudModelRef.CrudModelRef.formData.length - 1]
+    );
+    CrudModelRef.CrudModelRef.formData.unshift(lastItem);
+    nextTick(() => {
+        highlightNewRow(checkLastVisibleRow());
+    });
+    // CrudModelRef.value.insert(lastItem);
+}
 onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
     <FetchData
-        url="Warehouses"
-        :filter="{ where: { isDestiny: true }, order: ['name'] }"
+        @on-fetch="(data) => (warehousesOptions = data)"
         auto-load
-        @on-fetch="(data) => onWarehousesFetched(data)"
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
     />
     <RightMenu>
         <template #right-panel>
@@ -476,53 +452,39 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </QBtn>
         </template>
     </VnSubToolbar>
-    <QPage class="column items-center q-pa-md">
-        <QTable
+    <QPage>
+        {{ lastRow }}
+        {{ rowsSelected }}
+        <VnTable
+            data-key="ItemFixedPrices"
+            url="FixedPrices/filter"
+            :filter="{ where: exprBuilder }"
+            :order="['name ASC', 'itemFk DESC']"
             ref="tableRef"
             dense
-            :rows="fixedPrices"
             :columns="columns"
-            row-key="id"
-            selection="multiple"
+            default-mode="table"
+            auto-load
+            :is-editable="true"
+            :right-search="false"
+            :table="{
+                'row-key': 'id',
+                selection: 'multiple',
+            }"
             v-model:selected="rowsSelected"
-            :pagination="{ rowsPerPage: 0 }"
-            class="full-width q-mt-md"
-            :no-data-label="t('globals.noResults')"
-            @row-click="saveOnRowChange"
+            :row-click="saveOnRowChange"
+            :create-as-dialog="false"
+            :create="{
+                onDataSaved: handleOnDataSave,
+            }"
+            :use-model="true"
+            :disable-option="{ card: true }"
         >
-            <template #top-row="{ cols }">
-                <QTr>
-                    <QTd />
-                    <QTd
-                        v-for="(col, index) in cols"
-                        :key="index"
-                        style="max-width: 100px"
-                    >
-                        <component
-                            :is="col.columnFilter.component"
-                            v-if="col.columnFilter"
-                            v-model="col.columnFilter.filterValue"
-                            v-bind="col.columnFilter.attrs"
-                            v-on="col.columnFilter.event(col)"
-                            dense
-                        />
-                    </QTd>
-                </QTr>
-            </template>
-            <template #header="props">
-                <QTr :props="props" class="bg">
-                    <QTh />
-                    <QTh
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                        style="text-wrap: balance"
-                    >
-                        {{ col.label }}
-                    </QTh>
-                </QTr>
+            <template #header-selection="scope">
+                <QCheckbox v-model="scope.selected" />
             </template>
             <template #body-selection="scope">
+                {{ scope }}
                 <QCheckbox
                     flat
                     style="width: 10px; margin-left: -20px"
@@ -532,13 +494,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         rowsSelected.length > 0 && rowsSelected[0].id !== scope.row.id
                     "-->
             </template>
-            <template #header-selection="scope">
-                <QCheckbox style="margin-left: -15px" v-model="scope.selected" />
-            </template>
-            <template #body-cell-itemId="props">
+
+            <template #column-itemId="props">
                 <QTd>
                     <VnSelect
-                        style="width: 115px"
+                        style="max-width: 125px"
                         url="Items/withName"
                         hide-selected
                         option-label="id"
@@ -557,7 +517,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </VnSelect>
                 </QTd>
             </template>
-            <template #body-cell-description="{ row }">
+            <template #column-description="{ row }">
                 <QTd class="col">
                     <span class="link">
                         {{ row.name }}
@@ -566,10 +526,10 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <FetchedTags style="width: 200px" :item="row" :max-length="6" />
                 </QTd>
             </template>
-            <template #body-cell-groupingPrice="props">
+            <template #column-rate2="props">
                 <QTd class="col">
                     <VnInput
-                        style="width: 80px"
+                        style="max-width: 80px"
                         mask="###.##"
                         v-model.number="props.row.rate2"
                         v-on="getRowUpdateInputEvents(props)"
@@ -578,11 +538,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </VnInput>
                 </QTd>
             </template>
-            <template #body-cell-packingPrice="props">
+            <template #column-rate3="props">
                 <QTd class="col">
                     <VnInput
-                        mask="###.##"
                         style="width: 80px"
+                        mask="###.##"
                         v-model.number="props.row.rate3"
                         v-on="getRowUpdateInputEvents(props)"
                     >
@@ -590,31 +550,31 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </VnInput>
                 </QTd>
             </template>
-            <template #body-cell-minPrice="props">
+            <template #column-minPrice="props">
                 <QTd class="col">
-                    <div class="row">
+                    <div class="row" style="width: 130px">
                         <QCheckbox
                             :model-value="props.row.hasMinPrice"
                             @update:model-value="updateMinPrice($event, props)"
                             :true-value="'true'"
                             :false-value="'false'"
-                            :toggle-indeterminate="false"
                         />
                         <VnInput
-                            style="padding-left: -20px; width: 80px"
                             class="col"
-                            :disable="props.row.hasMinPrice === 'false'"
+                            mask="###.##"
+                            style="width: 80px"
+                            :disable="props.row.hasMinPrice === 1"
                             v-model.number="props.row.minPrice"
                             v-on="getRowUpdateInputEvents(props)"
-                            type="number"
-                        />
+                        >
+                            <template #append>€{{ props.row.hasMinPrice }}</template>
+                        </VnInput>
                     </div>
                 </QTd>
             </template>
-            <template #body-cell-started="props">
+            <template #column-started="props">
                 <QTd class="col">
                     <VnInputDate
-                        style="max-width: 125px"
                         :show-event="true"
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
@@ -629,10 +589,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     />
                 </QTd>
             </template>
-            <template #body-cell-ended="props">
+            <template #column-ended="props">
                 <QTd class="col">
                     <VnInputDate
-                        style="max-width: 125px"
                         :show-event="true"
                         v-model="props.row.ended"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
@@ -647,7 +606,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     />
                 </QTd>
             </template>
-            <template #body-cell-warehouse="props">
+            <template #column-warehouseFk="props">
                 <QTd class="col" style="max-width: 180px">
                     <VnSelect
                         :options="warehousesOptions"
@@ -659,7 +618,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     />
                 </QTd>
             </template>
-            <template #body-cell-deleteAction="{ row, rowIndex }">
+            <template #column-deleteAction="{ row, rowIndex }">
                 <QTd class="col">
                     <QIcon
                         name="delete"
@@ -680,7 +639,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </QIcon>
                 </QTd>
             </template>
-        </QTable>
+        </VnTable>
         <QPageSticky :offset="[20, 0]">
             <QBtn @click="addRow()" color="primary" fab icon="add" />
             <QTooltip>
@@ -698,11 +657,24 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </QDialog>
     </QPage>
 </template>
-<style lang="scss" scoped>
+<style lang="scss">
 .q-table th,
 .q-table td {
     padding-inline: 5px !important;
 }
+.q-table tbody td {
+    max-width: none;
+
+    .q-td.col {
+        & div.row {
+            & .q-checkbox {
+                & .q-checkbox__inner {
+                    position: relative !important;
+                }
+            }
+        }
+    }
+}
 .q-field__after,
 .q-field__append {
     padding: 0;

From ebf329bfc6ccdd8041166e5b596d479ab32f40b6 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 17 Jul 2024 20:33:55 +0200
Subject: [PATCH 24/34] feat: addRow withour dialog

---
 src/components/VnTable/VnTable.vue | 23 +++++++--
 src/pages/Item/ItemFixedPrice.vue  | 80 +++++++++++++++++-------------
 2 files changed, 66 insertions(+), 37 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 97053184a..4592a60cc 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -45,6 +45,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    createAsDialog: {
+        type: Boolean,
+        default: true,
+    },
     cardClass: {
         type: String,
         default: 'flex-one',
@@ -239,6 +243,11 @@ defineExpose({
     redirect: redirectFn,
     selected,
 });
+
+function handleOnDataSaved(_, res) {
+    if (_.onDataSaved) _.onDataSaved(this);
+    else $props.create.onDataSaved(_);
+}
 </script>
 <template>
     <QDrawer
@@ -556,8 +565,16 @@ defineExpose({
             </template>
         </CrudModel>
     </div>
-    <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
-        <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
+    <QPageSticky :offset="[20, 20]" style="z-index: 2">
+        <QBtn
+            @click="
+                () =>
+                    createAsDialog ? (showForm = !showForm) : handleOnDataSaved(create)
+            "
+            color="primary"
+            fab
+            icon="add"
+        />
         <QTooltip>
             {{ create.title }}
         </QTooltip>
@@ -566,7 +583,7 @@ defineExpose({
         <FormModelPopup
             v-bind="create"
             :model="$attrs['data-key'] + 'Create'"
-            @on-data-saved="(_, res) => create.onDataSaved(res)"
+            @on-data-saved="handleOnDataSaved"
         >
             <template #form-inputs="{ data }">
                 <div class="grid-create">
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index fb9fa33f9..758594082 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -192,6 +192,10 @@ const columns = computed(() => [
         field: 'warehouseFk',
         name: 'warehouseFk',
         ...defaultColumnAttrs,
+        component: 'select',
+        attrs: {
+            options: warehousesOptions,
+        },
     },
     {
         align: 'right',
@@ -230,16 +234,19 @@ const validations = (row, rowIndex, col) => {
     );
 };
 
-async function upsertFixedPrice(row) {
-    try {
-        const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
-        return data;
-    } catch (err) {
-        console.error('Error editing price', err);
-    }
-}
+const updateMinPrice = async (value, props) => {
+    // El checkbox hasMinPrice se encuentra en la misma columna que el input hasMinPrice
+    // Por lo tanto le mandamos otro objeto con las mismas propiedades pero con el campo 'field' cambiado
+    props.row.hasMinPrice = value;
+    await upsertPrice({
+        row: props.row,
+        col: { field: 'hasMinPrice' },
+        rowIndex: props.rowIndex,
+    });
+};
+
 const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice = false) => {
-    if (!validations(row, rowIndex, col)) return;
+    // if (!validations(row, rowIndex, col)) return;
 
     try {
         if (resetMinPrice) row.hasMinPrice = 0;
@@ -249,6 +256,14 @@ const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice = false) => {
         console.error('Error editing price', err);
     }
 };
+async function upsertFixedPrice(row) {
+    try {
+        const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
+        return data;
+    } catch (err) {
+        console.error('Error editing price', err);
+    }
+}
 async function saveOnRowChange(row) {
     if (rowsSelected.value.length > 1) return;
     if (rowsSelected.value[0]?.id === row.id) return;
@@ -299,24 +314,24 @@ function checkLastVisibleRow() {
 }
 const addRow = (fixedPrice = null) => {
     const lastvisible = checkLastVisibleRow();
-    if (!fixedPrices.value || fixedPrices.value.length === 0) {
-        fixedPrices.value = [];
+    // if (!fixedPrices.value || fixedPrices.value.length === 0) {
+    //     fixedPrices.value = [];
 
-        const today = Date.vnNew();
-        const millisecsInDay = 86400000;
-        const daysInWeek = 7;
-        const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
+    //     const today = Date.vnNew();
+    //     const millisecsInDay = 86400000;
+    //     const daysInWeek = 7;
+    //     const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
 
-        const newPrice = {
-            started: today,
-            ended: nextWeek,
-            hasMinPrice: 0,
-        };
+    //     const newPrice = {
+    //         started: today,
+    //         ended: nextWeek,
+    //         hasMinPrice: 0,
+    //     };
 
-        fixedPricesOriginalData.value.push({ ...newPrice });
-        fixedPrices.value.push({ ...newPrice });
-        return;
-    }
+    //     fixedPricesOriginalData.value.push({ ...newPrice });
+    //     fixedPrices.value.push({ ...newPrice });
+    //     return;
+    // }
     if (fixedPrice) {
         lastItem.value = fixedPrice;
         return;
@@ -326,7 +341,7 @@ const addRow = (fixedPrice = null) => {
         JSON.stringify(fixedPrices.value[fixedPrices.value.length - 1])
     );
     lastItem.value = lastItemCopy;
-    // tableRef.value.create.formInitialData = lastItem;
+    tableRef.value.create.formInitialData = lastItem;
     delete lastItemCopy.id;
     fixedPricesOriginalData.value.splice(lastvisible, 0, lastItemCopy);
     fixedPrices.value.unshift(lastItemCopy);
@@ -523,7 +538,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         {{ row.name }}
                     </span>
                     <ItemDescriptorProxy :id="row.itemFk" />
-                    <FetchedTags style="width: 200px" :item="row" :max-length="6" />
+                    <FetchedTags style="max-width: 220px" :item="row" :max-length="6" />
                 </QTd>
             </template>
             <template #column-rate2="props">
@@ -556,8 +571,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         <QCheckbox
                             :model-value="props.row.hasMinPrice"
                             @update:model-value="updateMinPrice($event, props)"
-                            :true-value="'true'"
-                            :false-value="'false'"
+                            :false-value="0"
+                            :true-value="1"
                         />
                         <VnInput
                             class="col"
@@ -640,12 +655,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
         </VnTable>
-        <QPageSticky :offset="[20, 0]">
-            <QBtn @click="addRow()" color="primary" fab icon="add" />
-            <QTooltip>
-                {{ t('Add') }}
-            </QTooltip>
-        </QPageSticky>
 
         <QDialog ref="editTableCellDialogRef">
             <EditTableCellValueForm
@@ -670,6 +679,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             & .q-checkbox {
                 & .q-checkbox__inner {
                     position: relative !important;
+                    &.q-checkbox__inner--truthy {
+                        color: var(--q-primary);
+                    }
                 }
             }
         }

From 7cbdf0d98b3cee2cc0d6f796b37dbd969e906d1a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 18 Jul 2024 15:20:44 +0200
Subject: [PATCH 25/34] feat: fix bugs and filters

---
 src/components/VnTable/VnChip.vue       |   4 +-
 src/components/VnTable/VnColumn.vue     |   4 +-
 src/components/VnTable/VnFilter.vue     |   1 +
 src/components/VnTable/VnOrder.vue      |   4 +-
 src/components/VnTable/VnTable.vue      |  18 ++-
 src/components/common/VnComponent.vue   |   5 +-
 src/components/common/VnInputDate.vue   |   1 +
 src/components/ui/VnRow.vue             |  22 +++-
 src/css/app.scss                        |  32 ++---
 src/i18n/locale/en.yml                  |   1 +
 src/i18n/locale/es.yml                  |   1 +
 src/pages/Item/ItemFixedPrice.vue       | 163 ++++++------------------
 src/pages/Item/ItemFixedPriceFilter.vue |  14 +-
 13 files changed, 101 insertions(+), 169 deletions(-)

diff --git a/src/components/VnTable/VnChip.vue b/src/components/VnTable/VnChip.vue
index 74207b943..f70ba7423 100644
--- a/src/components/VnTable/VnChip.vue
+++ b/src/components/VnTable/VnChip.vue
@@ -35,7 +35,9 @@ function stopEventPropagation(event) {
             dense
             square
         >
-            <span v-if="!col.chip.icon">{{ row[col.name] }}</span>
+            <span v-if="!col.chip.icon">
+                {{ col.format ? col.format(row) : row[col.name] }}
+            </span>
             <QIcon v-else :name="col.chip.icon" color="primary-light" />
         </QChip>
     </span>
diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index d86dd87da..9f6c6d53d 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -147,7 +147,7 @@ const col = computed(() => {
     }
     if (
         (newColumn.name.startsWith('is') || newColumn.name.startsWith('has')) &&
-        !newColumn.component
+        newColumn.component == null
     )
         newColumn.component = 'checkbox';
     if ($props.default && !newColumn.component) newColumn.component = $props.default;
@@ -158,7 +158,7 @@ const col = computed(() => {
 const components = computed(() => $props.components ?? defaultComponents);
 </script>
 <template>
-    <div class="row no-wrap" :style="$props.column.style">
+    <div class="row no-wrap">
         <VnComponent
             v-if="col.before"
             :prop="col.before"
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 15e1cc947..e6eeb713c 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -64,6 +64,7 @@ const components = {
         attrs: {
             ...defaultAttrs,
             clearable: true,
+            type: 'number',
         },
         forceAttrs,
     },
diff --git a/src/components/VnTable/VnOrder.vue b/src/components/VnTable/VnOrder.vue
index 1e1dc9e01..98c7ab392 100644
--- a/src/components/VnTable/VnOrder.vue
+++ b/src/components/VnTable/VnOrder.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useArrayData } from 'composables/useArrayData';
-const model = defineModel({ type: Object, required: true });
+const model = defineModel({ type: Object });
 const $props = defineProps({
     name: {
         type: String,
@@ -56,7 +56,7 @@ defineExpose({ orderBy });
         <span :title="label">{{ label }}</span>
         <QChip
             v-if="name"
-            :label="!vertical && model?.index"
+            :label="!vertical ? model?.index : ''"
             :icon="
                 (model?.index || hover) && !vertical
                     ? model?.direction == 'DESC'
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 4592a60cc..4e5a97b2e 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -96,9 +96,9 @@ const route = useRoute();
 const router = useRouter();
 const quasar = useQuasar();
 
-const DEFAULT_MODE = 'card';
+const CARD_MODE = 'card';
 const TABLE_MODE = 'table';
-const mode = ref(DEFAULT_MODE);
+const mode = ref(CARD_MODE);
 const selected = ref([]);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
 const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
@@ -117,13 +117,16 @@ const tableModes = [
     {
         icon: 'grid_view',
         title: t('grid view'),
-        value: DEFAULT_MODE,
+        value: CARD_MODE,
         disable: $props.disableOption?.card,
     },
 ];
 
 onMounted(() => {
-    mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
+    mode.value =
+        quasar.platform.is.mobile && !$props.disableOption?.card
+            ? CARD_MODE
+            : $props.defaultMode;
     stateStore.rightDrawer = true;
     setUserParams(route.query[$props.searchUrl]);
     columnsVisibilitySkiped.value = [
@@ -212,6 +215,7 @@ function stopEventPropagation(event) {
 }
 
 function reload(params) {
+    selected.value = [];
     CrudModelRef.value.reload(params);
 }
 
@@ -360,7 +364,7 @@ function handleOnDataSaved(_, res) {
                         />
                     </template>
                     <template #header-cell="{ col }">
-                        <QTh v-if="col.visible ?? true" auto-width>
+                        <QTh v-if="col.visible ?? true" :class="[col.columnClass]">
                             <div
                                 class="column self-start q-ml-xs ellipsis"
                                 :class="`text-${col?.align ?? 'left'}`"
@@ -385,6 +389,7 @@ function handleOnDataSaved(_, res) {
                                     :data-key="$attrs['data-key']"
                                     v-model="params[columnName(col)]"
                                     :search-url="searchUrl"
+                                    class="full-width"
                                 />
                             </div>
                         </QTh>
@@ -409,7 +414,7 @@ function handleOnDataSaved(_, res) {
                         <QTd
                             auto-width
                             class="no-margin q-px-xs"
-                            :class="[getColAlign(col), col.class, col.columnField?.class]"
+                            :class="[getColAlign(col), col.columnClass]"
                             v-if="col.visible ?? true"
                         >
                             <slot :name="`column-${col.name}`" :col="col" :row="row">
@@ -432,6 +437,7 @@ function handleOnDataSaved(_, res) {
                         >
                             <QBtn
                                 v-for="(btn, index) of col.actions"
+                                v-show="btn.show ? btn.show(row) : true"
                                 :key="index"
                                 :title="btn.title"
                                 :icon="btn.icon"
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index d7719034a..f512b846a 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -17,15 +17,17 @@ const $props = defineProps({
     },
 });
 
+let mixed;
 const componentArray = computed(() => {
     if (typeof $props.prop === 'object') return [$props.prop];
     return $props.prop;
 });
 
 function mix(toComponent) {
+    if (mixed) return mixed;
     const { component, attrs, event } = toComponent;
     const customComponent = $props.components[component];
-    return {
+    mixed = {
         component: customComponent?.component ?? component,
         attrs: {
             ...toValueAttrs(attrs),
@@ -35,6 +37,7 @@ function mix(toComponent) {
         },
         event: event ?? customComponent?.event,
     };
+    return mixed;
 }
 
 function toValueAttrs(attrs) {
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 875aba0b9..a9fa19509 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -98,6 +98,7 @@ watch(
             :class="{ required: $attrs.required }"
             :rules="$attrs.required ? [requiredFieldRule] : null"
             :clearable="false"
+            @click="isPopupOpen = true"
         >
             <template #append>
                 <QIcon
diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
index a2f89ff3f..642adedf1 100644
--- a/src/components/ui/VnRow.vue
+++ b/src/components/ui/VnRow.vue
@@ -1,18 +1,28 @@
+<script setup>
+defineProps({ wrap: { type: Boolean, default: false } });
+</script>
 <template>
-    <div class="vn-row q-gutter-md q-mb-md">
-        <slot></slot>
+    <div class="vn-row q-gutter-md q-mb-md" :class="{ wrap }">
+        <slot />
     </div>
 </template>
-<style lang="scss" scopped>
+<style lang="scss" scoped>
 .vn-row {
     display: flex;
-    > * {
-        flex: 1;
+    &.wrap {
+        flex-wrap: wrap;
+    }
+    &:not(.wrap) {
+        > :slotted(*) {
+            flex: 1;
+        }
     }
 }
 @media screen and (max-width: 800px) {
     .vn-row {
-        flex-direction: column;
+        &:not(.wrap) {
+            flex-direction: column;
+        }
     }
 }
 </style>
diff --git a/src/css/app.scss b/src/css/app.scss
index 504718ff5..43ec730b9 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -233,27 +233,23 @@ input::-webkit-inner-spin-button {
 }
 
 .q-table {
-    thead,
-    tbody {
-        th {
-            .q-select {
-                max-width: 120px;
-            }
-        }
-        td {
-            padding: 1px 10px 1px 10px;
-            max-width: 100px;
-            div span {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
+    th,
+    td {
+        padding: 1px 10px 1px 10px;
+        max-width: 100px;
+        div span {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
         }
-        .expand {
-            max-width: 400px;
-        }
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .shrink {
+        min-width: 65px;
+    }
+    .expand {
+        max-width: 200px;
     }
 }
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 6943252c9..5ea072d49 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1271,6 +1271,7 @@ components:
         active: Is active
         visible: Is visible
         floramondo: Is floramondo
+        showBadDates: Show future items
     userPanel:
         copyToken: Token copied to clipboard
         settings: Settings
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index f32562313..306a86d13 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1252,6 +1252,7 @@ components:
         active: Activo
         visible: Visible
         floramondo: Floramondo
+        showBadDates: Ver items a futuro
     userPanel:
         copyToken: Token copiado al portapapeles
         settings: Configuración
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 758594082..948cd1f23 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -9,13 +9,14 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
+import { useQuasar } from 'quasar';
 import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
+import { tMobile } from 'src/composables/tMobile';
 
 import { useStateStore } from 'stores/useStateStore';
-import { dashIfEmpty, toDate } from 'src/filters';
+import { toDate } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useState } from 'src/composables/useState';
-import { toCurrency } from 'filters/index';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import { isLower, isBigger } from 'src/filters/date.js';
@@ -23,7 +24,6 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import { QCheckbox } from 'quasar';
 
-const checked = ref(false);
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
@@ -54,61 +54,6 @@ const exprBuilder = (param, value) => {
 };
 
 const params = reactive({});
-// const arrayData = useArrayData('ItemFixedPrices', {
-//     url: 'FixedPrices/filter',
-//     userParams: params,
-//     order: ['name ASC', 'itemFk'],
-//     exprBuilder: exprBuilder,
-// });
-// const store = arrayData.store;
-
-// const fetchFixedPrices = async () => {
-//     await arrayData.fetch({ append: false });
-// };
-
-// const onFixedPricesFetched = (data) => {
-//     data.forEach((item) => {
-//         console.log(item.hasMinPrice);
-//         item.hasMinPrice = `${item.hasMinPrice !== 0}`;
-//     });
-//     fixedPrices.value = data;
-//     // el objetivo de guardar una copia de las rows es evitar guardar cambios si la data no cambió al disparar los eventos
-//     fixedPricesOriginalData.value = JSON.parse(JSON.stringify(data));
-// };
-
-// watch(
-//     () => store.data,
-//     (data) => onFixedPricesFetched(data)
-// );
-
-// const applyColumnFilter = async (col) => {
-//     try {
-//         const paramKey = col.columnFilter?.filterParamKey || col.field;
-//         params[paramKey] = col.columnFilter.filterValue;
-//         await arrayData.addFilter({ params });
-//     } catch (err) {
-//         console.error('Error applying column filter', err);
-//     }
-// };
-
-// const getColumnInputEvents = (col) => {
-//     return col.columnFilter.type === 'select'
-//         ? { 'update:modelValue': () => applyColumnFilter(col) }
-//         : {
-//               'keyup.enter': () => applyColumnFilter(col),
-//           };
-// };
-
-// const defaultColumnFilter = {
-//     component: VnInput,
-//     type: 'text',
-//     filterValue: null,
-//     event: getColumnInputEvents,
-//     attrs: {
-//         dense: true,
-//     },
-// };
-
 const defaultColumnAttrs = {
     align: 'left',
     sortable: true,
@@ -123,6 +68,7 @@ const columns = computed(() => [
         ...defaultColumnAttrs,
         isId: true,
         cardVisible: true,
+        columnClass: 'shrink',
         columnField: {
             component: 'input',
             type: 'number',
@@ -131,6 +77,7 @@ const columns = computed(() => [
     {
         label: t('globals.name'),
         field: 'name',
+        columnClass: 'shrink',
         name: 'description',
         ...defaultColumnAttrs,
         create: true,
@@ -142,9 +89,6 @@ const columns = computed(() => [
         name: 'rate2',
         ...defaultColumnAttrs,
         cardVisible: true,
-        class: 'expand',
-
-        style: 'max-width: 80px',
     },
     {
         label: t('item.fixedPrice.packingPrice'),
@@ -152,12 +96,11 @@ const columns = computed(() => [
         name: 'rate3',
         ...defaultColumnAttrs,
         cardVisible: true,
-        class: 'expand',
-        style: 'max-width: 80px',
     },
 
     {
         label: t('item.fixedPrice.minPrice'),
+        class: 'expand',
         field: 'minPrice',
         name: 'minPrice',
         ...defaultColumnAttrs,
@@ -172,16 +115,17 @@ const columns = computed(() => [
         label: t('item.fixedPrice.started'),
         field: 'started',
         name: 'started',
-        ...defaultColumnAttrs,
+        format: ({ started }) => toDate(started),
         cardVisible: true,
+        ...defaultColumnAttrs,
         component: 'date',
-        format: (row) => toDate(row.started),
     },
     {
         label: t('item.fixedPrice.ended'),
         field: 'ended',
         name: 'ended',
         ...defaultColumnAttrs,
+        columnClass: 'expand',
         cardVisible: true,
         component: 'date',
         format: (row) => toDate(row.ended),
@@ -270,29 +214,7 @@ async function saveOnRowChange(row) {
     else if (rowsSelected.value.length === 1)
         await upsertFixedPrice(rowsSelected.value[0]);
     rowsSelected.value = [row];
-    // if (rowsSelected.value.length > 0) {
-    //     disableUnselectedRows();
-    // } else {
-    //     resetRowStates();
-    // }
-    // if (lastRow.value && lastRow.value !== row.id) {
-    //     console.log('update');
-    //     // await upsertPrice(row);
-    // }
-    // lastRow.value = row.id;
 }
-// function disableUnselectedRows() {
-//     fixedPrices.value.forEach((row) => {
-//         row.disabled = !rowsSelected.value.includes(row.id);
-//     });
-// }
-// function resetRowStates() {
-//     fixedPrices.value.forEach((row) => {
-//         row.disable = false;
-//     });
-//     // Aquí puedes guardar los cambios si es necesario
-//     console.log('Guardando cambios...');
-// }
 const tableRef = ref();
 function checkLastVisibleRow() {
     const rows = document
@@ -367,25 +289,6 @@ const openEditTableCellDialog = () => {
 const onEditCellDataSaved = async () => {
     rowsSelected.value = [];
 };
-/*const lastRow = ref(null);
-async function saveOnRowChange(row) {
-    if (lastRow.value && lastRow.value !== row.id) {
-        console.log('update');
-        await upsertPrice(row);
-        return;
-    }
-    lastRow.value = row.id;
-}*/
-
-// const onWarehousesFetched = (data) => {
-//     warehousesOptions.value = data;
-//     // Actualiza las 'options' del elemento con field 'warehouseFk' en 'editTableFieldsOptions'.
-//     const warehouseField = editTableFieldsOptions.find(
-//         (field) => field.field === 'warehouseFk'
-//     );
-//     warehouseField.attrs.options = data;
-// };
-import { useQuasar } from 'quasar';
 const removeFuturePrice = async () => {
     try {
         rowsSelected.value.forEach(({ id }) => {
@@ -405,11 +308,21 @@ function confirmRemove(item) {
         component: VnConfirm,
         componentProps: {
             title: t('This row will be removed'),
-            message: t('Do you want to clone this item?'),
+            message: t('Do you want to remove?'),
             promise: async () => removePrice(item.id),
         },
     });
 }
+function confirmRemoveFuturePrice(item) {
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            title: t('This row will be removed'),
+            message: t('Do you want to remove?'),
+            promise: async () => removeFuturePrice(item.id),
+        },
+    });
+}
 
 const removePrice = async (id) => {
     try {
@@ -433,7 +346,6 @@ function handleOnDataSave(CrudModelRef) {
     nextTick(() => {
         highlightNewRow(checkLastVisibleRow());
     });
-    // CrudModelRef.value.insert(lastItem);
 }
 onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
@@ -465,12 +377,20 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     {{ t('Edit fixed price(s)') }}
                 </QTooltip>
             </QBtn>
+            <QBtn
+                :label="tMobile('globals.remove')"
+                color="primary"
+                icon="delete"
+                flat
+                @click="confirmRemoveFuturePrice"
+                :title="t('globals.remove')"
+                v-if="rowsSelected.length"
+            />
         </template>
     </VnSubToolbar>
     <QPage>
-        {{ lastRow }}
-        {{ rowsSelected }}
         <VnTable
+            :default-remove="false"
             data-key="ItemFixedPrices"
             url="FixedPrices/filter"
             :filter="{ where: exprBuilder }"
@@ -500,14 +420,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #body-selection="scope">
                 {{ scope }}
-                <QCheckbox
-                    flat
-                    style="width: 10px; margin-left: -20px"
-                    v-model="scope.selected"
-                />
-                <!--:disable="
-                        rowsSelected.length > 0 && rowsSelected[0].id !== scope.row.id
-                    "-->
+                <QCheckbox flat v-model="scope.selected" />
             </template>
 
             <template #column-itemId="props">
@@ -538,13 +451,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         {{ row.name }}
                     </span>
                     <ItemDescriptorProxy :id="row.itemFk" />
-                    <FetchedTags style="max-width: 220px" :item="row" :max-length="6" />
+                    <FetchedTags
+                        style="width: max-content; max-width: 220px"
+                        :item="row"
+                        :max-length="6"
+                    />
                 </QTd>
             </template>
             <template #column-rate2="props">
                 <QTd class="col">
                     <VnInput
-                        style="max-width: 80px"
                         mask="###.##"
                         v-model.number="props.row.rate2"
                         v-on="getRowUpdateInputEvents(props)"
@@ -556,7 +472,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <template #column-rate3="props">
                 <QTd class="col">
                     <VnInput
-                        style="width: 80px"
                         mask="###.##"
                         v-model.number="props.row.rate3"
                         v-on="getRowUpdateInputEvents(props)"
@@ -577,12 +492,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         <VnInput
                             class="col"
                             mask="###.##"
-                            style="width: 80px"
                             :disable="props.row.hasMinPrice === 1"
                             v-model.number="props.row.minPrice"
                             v-on="getRowUpdateInputEvents(props)"
                         >
-                            <template #append>€{{ props.row.hasMinPrice }}</template>
+                            <template #append>€</template>
                         </VnInput>
                     </div>
                 </QTd>
@@ -590,6 +504,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <template #column-started="props">
                 <QTd class="col">
                     <VnInputDate
+                        style="min-width: 147px"
                         :show-event="true"
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
@@ -607,6 +522,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <template #column-ended="props">
                 <QTd class="col">
                     <VnInputDate
+                        style="min-width: 147px"
                         :show-event="true"
                         v-model="props.row.ended"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
@@ -691,7 +607,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 .q-field__append {
     padding: 0;
 }
-/* height or max-height is important */
 
 tbody tr.highlight .q-td {
     animation: highlight-animation 4s ease-in-out;
diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index 61bac2a6e..81d9fe308 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -24,8 +24,7 @@ const route = useRoute();
 
 const itemTypeWorkersOptions = ref([]);
 const sanitizeParam = (param) => {
-    if (!route?.query?.params) return 'false';
-    const params = JSON.parse(route?.query?.params);
+    const params = JSON.parse(route?.query?.table);
     return params[param] ?? 'false';
 };
 const $params = ref({});
@@ -110,19 +109,16 @@ const pushParam = (param) => ({
                         :false-value="'false'"
                         @update:model-value="searchFn(pushParam('mine'))"
                     />
-                </QItemSection>
-                <QItemSection>
+
                     <QCheckbox
-                        size="sm"
-                        v-model="checked"
-                        :label="t(`Show future items`)"
+                        v-model="$params.showBadDates"
+                        :label="t(`components.itemsFilterPanel.showBadDates`)"
                         :true-value="'true'"
                         :false-value="'false'"
                         @update:model-value="searchFn(pushParam('showBadDates'))"
                     >
                     </QCheckbox>
-                </QItemSection>
-                <QItemSection>
+
                     <QCheckbox
                         :label="t('components.itemsFilterPanel.hasMinPrice')"
                         v-model="$params.hasMinPrice"

From cfa5b84f4ec9f2fa06d94aef3e8586e0f1139c9c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 2 Sep 2024 09:56:52 +0200
Subject: [PATCH 26/34] feat

---
 src/pages/Item/ItemFixedPriceFilter.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index 81d9fe308..9b3c7f052 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -23,16 +23,16 @@ import { useRoute } from 'vue-router';
 const route = useRoute();
 
 const itemTypeWorkersOptions = ref([]);
-const sanitizeParam = (param) => {
-    const params = JSON.parse(route?.query?.table);
-    return params[param] ?? 'false';
-};
+// const sanitizeParam = (param) => {
+//     const params = JSON.parse(route?.query?.table);
+//     return params[param] ?? 'false';
+// };
 const $params = ref({});
-onMounted(() => {
-    ['mine', 'hasMinPrice', 'showBadDates'].forEach(
-        (tag) => ($params.value[tag] = sanitizeParam(tag))
-    );
-});
+// onMounted(() => {
+//     ['mine', 'hasMinPrice', 'showBadDates'].forEach(
+//         (tag) => ($params.value[tag] = sanitizeParam(tag))
+//     );
+// });
 const pushParam = (param) => ({
     param: { [param]: $params.value[param] },
 });

From 970c8473a218bc41b0ac2848be82ba534985e3a3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 2 Sep 2024 11:28:13 +0200
Subject: [PATCH 27/34] fet: updates

---
 src/components/VnTable/VnTable.vue |  1 +
 src/pages/Item/ItemFixedPrice.vue  | 75 ++++++++++++++++++++----------
 2 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 23099698c..ab4702722 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -278,6 +278,7 @@ function parseOrder(urlOrders) {
 
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
 defineExpose({
+    create: createForm,
     reload,
     redirect: redirectFn,
     selected,
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 948cd1f23..cfd2d91fb 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -68,7 +68,6 @@ const columns = computed(() => [
         ...defaultColumnAttrs,
         isId: true,
         cardVisible: true,
-        columnClass: 'shrink',
         columnField: {
             component: 'input',
             type: 'number',
@@ -77,7 +76,6 @@ const columns = computed(() => [
     {
         label: t('globals.name'),
         field: 'name',
-        columnClass: 'shrink',
         name: 'description',
         ...defaultColumnAttrs,
         create: true,
@@ -119,13 +117,14 @@ const columns = computed(() => [
         cardVisible: true,
         ...defaultColumnAttrs,
         component: 'date',
+        columnClass: 'shrink',
     },
     {
         label: t('item.fixedPrice.ended'),
         field: 'ended',
         name: 'ended',
         ...defaultColumnAttrs,
-        columnClass: 'expand',
+        columnClass: 'shrink',
         cardVisible: true,
         component: 'date',
         format: (row) => toDate(row.ended),
@@ -254,22 +253,49 @@ const addRow = (fixedPrice = null) => {
     //     fixedPrices.value.push({ ...newPrice });
     //     return;
     // }
-    if (fixedPrice) {
-        lastItem.value = fixedPrice;
+    if (!fixedPrice) {
+        const today = Date.vnNew();
+        const millisecsInDay = 86400000;
+        const daysInWeek = 7;
+        const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
+
+        // lastItem.value = {
+        lastItem.value = {
+            started: today,
+            ended: nextWeek,
+            hasMinPrice: 0,
+        };
+
         return;
     }
 
-    const lastItemCopy = JSON.parse(
-        JSON.stringify(fixedPrices.value[fixedPrices.value.length - 1])
-    );
-    lastItem.value = lastItemCopy;
-    tableRef.value.create.formInitialData = lastItem;
-    delete lastItemCopy.id;
-    fixedPricesOriginalData.value.splice(lastvisible, 0, lastItemCopy);
-    fixedPrices.value.unshift(lastItemCopy);
-    nextTick(() => {
-        highlightNewRow(lastvisible);
-    });
+    const lastItemCopy = {
+        itemFk: fixedPrice.itemFk,
+        name: fixedPrice.name,
+        subName: fixedPrice.subName,
+        value5: fixedPrice.value5,
+        value6: fixedPrice.value6,
+        value7: fixedPrice.value7,
+        value8: fixedPrice.value8,
+        value9: fixedPrice.value9,
+        value10: fixedPrice.value10,
+        warehouseFk: fixedPrice.warehouseFk,
+        rate2: fixedPrice.rate2,
+        rate3: fixedPrice.rate3,
+        hasMinPrice: fixedPrice.hasMinPrice,
+        minPrice: fixedPrice.minPrice,
+        started: fixedPrice.started,
+        ended: fixedPrice.ended,
+    };
+    // lastItem.value = lastItemCopy;
+    // tableRef.value.create.onDataSaved(lastItem);
+    return lastItemCopy;
+    // delete lastItemCopy.id;
+    // fixedPricesOriginalData.value.splice(lastvisible, 0, lastItemCopy);
+    // fixedPrices.value.unshift(lastItemCopy);
+    // nextTick(() => {
+    //     highlightNewRow(lastvisible);
+    // });
 };
 const lastItem = ref(null);
 function highlightNewRow(index) {
@@ -338,11 +364,9 @@ onMounted(async () => {
     stateStore.rightDrawer = true;
     params.warehouseFk = user.value.warehouseFk;
 });
-function handleOnDataSave(CrudModelRef) {
-    addRow(
-        CrudModelRef.CrudModelRef.formData[CrudModelRef.CrudModelRef.formData.length - 1]
-    );
-    CrudModelRef.CrudModelRef.formData.unshift(lastItem);
+function handleOnDataSave({ CrudModelRef }) {
+    const roww = addRow(CrudModelRef.formData[CrudModelRef.formData.length - 1]);
+    CrudModelRef.formData.unshift(lastItem);
     nextTick(() => {
         highlightNewRow(checkLastVisibleRow());
     });
@@ -426,7 +450,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <template #column-itemId="props">
                 <QTd>
                     <VnSelect
-                        style="max-width: 125px"
+                        style="max-width: 100px"
                         url="Items/withName"
                         hide-selected
                         option-label="id"
@@ -504,7 +528,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <template #column-started="props">
                 <QTd class="col">
                     <VnInputDate
-                        style="min-width: 147px"
+                        class="vnInputDate"
                         :show-event="true"
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
@@ -522,7 +546,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <template #column-ended="props">
                 <QTd class="col">
                     <VnInputDate
-                        style="min-width: 147px"
+                        class="vnInputDate"
                         :show-event="true"
                         v-model="props.row.ended"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
@@ -591,6 +615,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     max-width: none;
 
     .q-td.col {
+        & .vnInputDate {
+            min-width: 130px;
+        }
         & div.row {
             & .q-checkbox {
                 & .q-checkbox__inner {

From 7892e68e1b433f33e15fa524c3e5c961a18220c4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 2 Sep 2024 15:03:47 +0200
Subject: [PATCH 28/34] feat: updates

---
 src/pages/Item/ItemFixedPrice.vue | 68 +++++++++++++++++--------------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index cfd2d91fb..41cfa0676 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -233,8 +233,9 @@ function checkLastVisibleRow() {
         return lastVisibleRow;
     }
 }
-const addRow = (fixedPrice = null) => {
-    const lastvisible = checkLastVisibleRow();
+const addRow = (original = null) => {
+    // const original = checkLastVisibleRow();
+    let copy = null;
     // if (!fixedPrices.value || fixedPrices.value.length === 0) {
     //     fixedPrices.value = [];
 
@@ -253,52 +254,53 @@ const addRow = (fixedPrice = null) => {
     //     fixedPrices.value.push({ ...newPrice });
     //     return;
     // }
-    if (!fixedPrice) {
+    if (!original) {
         const today = Date.vnNew();
         const millisecsInDay = 86400000;
         const daysInWeek = 7;
         const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
 
         // lastItem.value = {
-        lastItem.value = {
+        copy = {
             started: today,
             ended: nextWeek,
             hasMinPrice: 0,
         };
 
-        return;
+        // return;
     }
 
-    const lastItemCopy = {
-        itemFk: fixedPrice.itemFk,
-        name: fixedPrice.name,
-        subName: fixedPrice.subName,
-        value5: fixedPrice.value5,
-        value6: fixedPrice.value6,
-        value7: fixedPrice.value7,
-        value8: fixedPrice.value8,
-        value9: fixedPrice.value9,
-        value10: fixedPrice.value10,
-        warehouseFk: fixedPrice.warehouseFk,
-        rate2: fixedPrice.rate2,
-        rate3: fixedPrice.rate3,
-        hasMinPrice: fixedPrice.hasMinPrice,
-        minPrice: fixedPrice.minPrice,
-        started: fixedPrice.started,
-        ended: fixedPrice.ended,
+    copy = {
+        $index: original.$index - 1,
+        itemFk: original.itemFk,
+        name: original.name,
+        subName: original.subName,
+        value5: original.value5,
+        value6: original.value6,
+        value7: original.value7,
+        value8: original.value8,
+        value9: original.value9,
+        value10: original.value10,
+        warehouseFk: original.warehouseFk,
+        rate2: original.rate2,
+        rate3: original.rate3,
+        hasMinPrice: original.hasMinPrice,
+        minPrice: original.minPrice,
+        started: Date.vnNew(),
+        ended: Date.vnNew(),
     };
     // lastItem.value = lastItemCopy;
     // tableRef.value.create.onDataSaved(lastItem);
-    return lastItemCopy;
+    // nextTick(() => {
+    //     highlightNewRow(fixedPrice);
+    // });
     // delete lastItemCopy.id;
     // fixedPricesOriginalData.value.splice(lastvisible, 0, lastItemCopy);
     // fixedPrices.value.unshift(lastItemCopy);
-    // nextTick(() => {
-    //     highlightNewRow(lastvisible);
-    // });
+    return { original, copy };
 };
 const lastItem = ref(null);
-function highlightNewRow(index) {
+function highlightNewRow({ $index: index }) {
     const row = document
         .getElementsByClassName('q-table')[0]
         .querySelectorAll('tr.cursor-pointer')[index];
@@ -365,10 +367,11 @@ onMounted(async () => {
     params.warehouseFk = user.value.warehouseFk;
 });
 function handleOnDataSave({ CrudModelRef }) {
-    const roww = addRow(CrudModelRef.formData[CrudModelRef.formData.length - 1]);
-    CrudModelRef.formData.unshift(lastItem);
+    const { original, copy } = addRow(CrudModelRef.formData[checkLastVisibleRow()]);
+    // CrudModelRef.formData.unshift(roww);
+    CrudModelRef.formData.splice(original.$index, 0, copy);
     nextTick(() => {
-        highlightNewRow(checkLastVisibleRow());
+        highlightNewRow(original);
     });
 }
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -415,10 +418,13 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     <QPage>
         <VnTable
             :default-remove="false"
+            :default-reset="false"
+            :default-save="false"
             data-key="ItemFixedPrices"
             url="FixedPrices/filter"
-            :filter="{ where: exprBuilder }"
             :order="['name ASC', 'itemFk DESC']"
+            save-url="FixedPrices/crud"
+            :filter="{ where: { warehouseFk: user.warehouseFk } }"
             ref="tableRef"
             dense
             :columns="columns"

From 9bb298bbebf6dfe3c099a284e2866f0d8d8c82cb Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 6 Sep 2024 13:14:46 +0200
Subject: [PATCH 29/34] feat: handle create row

---
 src/components/CrudModel.vue                 |   4 +-
 src/components/VnTable/VnTable.vue           |   6 ++
 src/i18n/locale/en.yml                       |   2 +
 src/i18n/locale/es.yml                       |   2 +
 src/pages/Item/ItemFixedPrice.vue            | 107 +++++++++++--------
 src/pages/Item/ItemFixedPriceFilter.vue      |  10 +-
 src/pages/Order/Card/OrderDescriptorMenu.vue |   4 +-
 7 files changed, 84 insertions(+), 51 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 33c831e3f..0386e037b 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -189,11 +189,11 @@ async function saveChanges(data) {
     });
 }
 
-async function insert() {
+async function insert(pushData = $props.dataRequired) {
     const $index = formData.value.length
         ? formData.value[formData.value.length - 1].$index + 1
         : 0;
-    formData.value.push(Object.assign({ $index }, $props.dataRequired));
+    formData.value.push(Object.assign({ $index }, pushData));
     hasChanges.value = true;
 }
 
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 2f173cd85..20482c494 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -89,6 +89,10 @@ const $props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    crudModel: {
+        type: Object,
+        default: () => ({}),
+    },
     tableHeight: {
         type: String,
         default: '90vh',
@@ -369,6 +373,7 @@ function handleOnDataSaved(_, res) {
             <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
         <template #body="{ rows }">
+            {{ rows }}
             <QTable
                 v-bind="table"
                 class="vnTable"
@@ -384,6 +389,7 @@ function handleOnDataSaved(_, res) {
                 @virtual-scroll="
                     (event) =>
                         event.index > rows.length - 2 &&
+                        ($props.crudModel?.paginate ?? true) &&
                         CrudModelRef.vnPaginateRef.paginate()
                 "
                 @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 0b0737332..ec2627e61 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -40,6 +40,8 @@ globals:
     noChanges: No changes to save
     changesToSave: You have changes pending to save
     confirmRemove: You are about to delete this row. Are you sure?
+    rowWillBeRemoved: This row will be removed
+    sureToContinue: Are you sure you want to continue?
     rowAdded: Row added
     rowRemoved: Row removed
     pleaseWait: Please wait...
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 819510cf6..5eb703021 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -39,6 +39,8 @@ globals:
     noChanges: Sin cambios que guardar
     changesToSave: Tienes cambios pendientes de guardar
     confirmRemove: Vas a eliminar este registro. ¿Continuar?
+    rowWillBeRemoved: Esta linea se eliminará
+    sureToContinue: ¿Seguro que quieres continuar?
     rowAdded: Fila añadida
     rowRemoved: Fila eliminada
     pleaseWait: Por favor espera...
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 537b9fe57..2085e7665 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -55,14 +55,12 @@ const exprBuilder = (param, value) => {
 
 const params = reactive({});
 const defaultColumnAttrs = {
-    align: 'left',
-    sortable: true,
+    align: 'right',
+    sortable: false,
 };
 
 const columns = computed(() => [
     {
-        sortable: true,
-        align: 'left',
         label: t('item.fixedPrice.itemId'),
         name: 'itemId',
         ...defaultColumnAttrs,
@@ -72,6 +70,7 @@ const columns = computed(() => [
             component: 'input',
             type: 'number',
         },
+        columnClass: 'shrink',
     },
     {
         label: t('globals.name'),
@@ -98,8 +97,8 @@ const columns = computed(() => [
 
     {
         label: t('item.fixedPrice.minPrice'),
-        class: 'expand',
         field: 'minPrice',
+        columnClass: 'shrink',
         name: 'minPrice',
         ...defaultColumnAttrs,
         cardVisible: true,
@@ -116,17 +115,23 @@ const columns = computed(() => [
         format: ({ started }) => toDate(started),
         cardVisible: true,
         ...defaultColumnAttrs,
-        component: 'date',
-        columnClass: 'shrink',
+        columnField: {
+            component: 'date',
+            class: 'shrink',
+        },
+        columnClass: 'expand',
     },
     {
         label: t('item.fixedPrice.ended'),
         field: 'ended',
         name: 'ended',
         ...defaultColumnAttrs,
-        columnClass: 'shrink',
         cardVisible: true,
-        component: 'date',
+        columnField: {
+            component: 'date',
+            class: 'shrink',
+        },
+        columnClass: 'expand',
         format: (row) => toDate(row.ended),
     },
 
@@ -135,7 +140,14 @@ const columns = computed(() => [
         field: 'warehouseFk',
         name: 'warehouseFk',
         ...defaultColumnAttrs,
-        component: 'select',
+        columnClass: 'shrink',
+        columnFilter: {
+            component: 'select',
+        },
+        columnField: {
+            component: 'select',
+            class: 'expand',
+        },
         attrs: {
             options: warehousesOptions,
         },
@@ -230,8 +242,8 @@ function checkLastVisibleRow() {
 
     if (lastVisibleRow) {
         console.log('Última fila visible:', lastVisibleRow);
-        return lastVisibleRow;
     }
+    return lastVisibleRow;
 }
 const addRow = (original = null) => {
     // const original = checkLastVisibleRow();
@@ -262,33 +274,34 @@ const addRow = (original = null) => {
 
         // lastItem.value = {
         copy = {
+            id: 0,
             started: today,
             ended: nextWeek,
             hasMinPrice: 0,
+            $index: 0,
         };
 
         // return;
-    }
-
-    copy = {
-        $index: original.$index - 1,
-        itemFk: original.itemFk,
-        name: original.name,
-        subName: original.subName,
-        value5: original.value5,
-        value6: original.value6,
-        value7: original.value7,
-        value8: original.value8,
-        value9: original.value9,
-        value10: original.value10,
-        warehouseFk: original.warehouseFk,
-        rate2: original.rate2,
-        rate3: original.rate3,
-        hasMinPrice: original.hasMinPrice,
-        minPrice: original.minPrice,
-        started: Date.vnNew(),
-        ended: Date.vnNew(),
-    };
+    } else
+        copy = {
+            $index: original.$index - 1,
+            itemFk: original.itemFk,
+            name: original.name,
+            subName: original.subName,
+            value5: original.value5,
+            value6: original.value6,
+            value7: original.value7,
+            value8: original.value8,
+            value9: original.value9,
+            value10: original.value10,
+            warehouseFk: original.warehouseFk,
+            rate2: original.rate2,
+            rate3: original.rate3,
+            hasMinPrice: original.hasMinPrice,
+            minPrice: original.minPrice,
+            started: Date.vnNew(),
+            ended: Date.vnNew(),
+        };
     // lastItem.value = lastItemCopy;
     // tableRef.value.create.onDataSaved(lastItem);
     // nextTick(() => {
@@ -330,13 +343,14 @@ const removeFuturePrice = async () => {
 const quasar = useQuasar();
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'src/components/FetchData.vue';
+import CrudModel from 'src/components/CrudModel.vue';
 
 function confirmRemove(item) {
     quasar.dialog({
         component: VnConfirm,
         componentProps: {
-            title: t('This row will be removed'),
-            message: t('Do you want to remove?'),
+            title: t('globals.rowWillBeRemoved'),
+            message: t('globals.confirmDeletion'),
             promise: async () => removePrice(item.id),
         },
     });
@@ -345,8 +359,8 @@ function confirmRemoveFuturePrice(item) {
     quasar.dialog({
         component: VnConfirm,
         componentProps: {
-            title: t('This row will be removed'),
-            message: t('Do you want to remove?'),
+            title: t('globals.rowWillBeRemoved'),
+            message: t('globals.confirmDeletion'),
             promise: async () => removeFuturePrice(item.id),
         },
     });
@@ -369,9 +383,14 @@ onMounted(async () => {
 function handleOnDataSave({ CrudModelRef }) {
     const { original, copy } = addRow(CrudModelRef.formData[checkLastVisibleRow()]);
     // CrudModelRef.formData.unshift(roww);
-    CrudModelRef.formData.splice(original.$index, 0, copy);
+    if (original) {
+        CrudModelRef.formData.splice(original?.$index ?? 0, 0, copy);
+    } else {
+        CrudModelRef.insert(copy);
+        // CrudModelRef.reload();
+    }
     nextTick(() => {
-        highlightNewRow(original);
+        highlightNewRow(original ?? { $index: 0 });
     });
 }
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -436,6 +455,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 'row-key': 'id',
                 selection: 'multiple',
             }"
+            :crud-model="{
+                paginate: false,
+            }"
             v-model:selected="rowsSelected"
             :row-click="saveOnRowChange"
             :create-as-dialog="false"
@@ -511,7 +533,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #column-minPrice="props">
                 <QTd class="col">
-                    <div class="row" style="width: 130px">
+                    <div class="row" style="width: 115px">
                         <QCheckbox
                             :model-value="props.row.hasMinPrice"
                             @update:model-value="updateMinPrice($event, props)"
@@ -567,8 +589,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
             <template #column-warehouseFk="props">
-                <QTd class="col" style="max-width: 180px">
+                <QTd class="col">
                     <VnSelect
+                        style="max-width: 150px"
                         :options="warehousesOptions"
                         hide-selected
                         option-label="name"
@@ -615,13 +638,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 .q-table th,
 .q-table td {
     padding-inline: 5px !important;
+    // text-align: -webkit-right;
 }
 .q-table tbody td {
     max-width: none;
 
     .q-td.col {
         & .vnInputDate {
-            min-width: 130px;
+            min-width: 90px;
         }
         & div.row {
             & .q-checkbox {
@@ -656,7 +680,6 @@ tbody tr.highlight .q-td {
 es:
     Add fixed price: Añadir precio fijado
     Edit fixed price(s): Editar precio(s) fijado(s)
-    This row will be removed: Esta linea se eliminará
     Are you sure you want to continue?: ¿Seguro que quieres continuar?
     Delete: Eliminar
 </i18n>
diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index 9b3c7f052..f2e83ba3a 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -14,10 +14,6 @@ defineProps({
         type: String,
         required: true,
     },
-    warehousesOptions: {
-        type: Array,
-        default: () => [],
-    },
 });
 import { useRoute } from 'vue-router';
 const route = useRoute();
@@ -39,6 +35,12 @@ const pushParam = (param) => ({
 </script>
 
 <template>
+    <FetchData
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+    />
     <FetchData
         url="TicketRequests/getItemTypeWorker"
         limit="30"
diff --git a/src/pages/Order/Card/OrderDescriptorMenu.vue b/src/pages/Order/Card/OrderDescriptorMenu.vue
index 2e36aa3c5..2695da4e5 100644
--- a/src/pages/Order/Card/OrderDescriptorMenu.vue
+++ b/src/pages/Order/Card/OrderDescriptorMenu.vue
@@ -23,7 +23,7 @@ function confirmRemove() {
         .dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('confirmDeletion'),
+                title: t('globals.confirmDeletion'),
                 message: t('confirmDeletionMessage'),
                 promise: remove,
             },
@@ -52,12 +52,10 @@ async function remove() {
 <i18n>
 en:
     deleteOrder: Delete order
-    confirmDeletion: Confirm deletion
     confirmDeletionMessage: Are you sure you want to delete this order?
 
 es:
     deleteOrder: Eliminar pedido
-    confirmDeletion: Confirmar eliminación
     confirmDeletionMessage: Seguro que quieres eliminar este pedido?
 
 </i18n>

From a8057b47dcde8623fa8b9902349884002a146409 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 6 Sep 2024 14:06:30 +0200
Subject: [PATCH 30/34] feat: updates

---
 src/components/VnTable/VnTable.vue      |   1 -
 src/pages/Item/ItemFixedPrice.vue       | 111 ++++++++----------------
 src/pages/Item/ItemFixedPriceFilter.vue |  46 +++++-----
 3 files changed, 63 insertions(+), 95 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 20482c494..6745a2f49 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -373,7 +373,6 @@ function handleOnDataSaved(_, res) {
             <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
         <template #body="{ rows }">
-            {{ rows }}
             <QTable
                 v-bind="table"
                 class="vnTable"
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 2085e7665..e042cb859 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -2,7 +2,6 @@
 import { onMounted, ref, reactive, onUnmounted, nextTick, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
@@ -12,7 +11,8 @@ import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
 import { useQuasar } from 'quasar';
 import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
 import { tMobile } from 'src/composables/tMobile';
-
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import FetchData from 'src/components/FetchData.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
@@ -33,30 +33,13 @@ const { notify } = useNotify();
 const editTableCellDialogRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
-const fixedPricesOriginalData = ref([]);
 const warehousesOptions = ref([]);
 const rowsSelected = ref([]);
 
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'name':
-            return { 'i.name': { like: `%${value}%` } };
-        case 'itemFk':
-        case 'warehouseFk':
-        case 'rate2':
-        case 'rate3':
-            param = `fp.${param}`;
-            return { [param]: value };
-        case 'minPrice':
-            param = `i.${param}`;
-            return { [param]: value };
-    }
-};
-
 const params = reactive({});
 const defaultColumnAttrs = {
-    align: 'right',
-    sortable: false,
+    align: 'left',
+    sortable: true,
 };
 
 const columns = computed(() => [
@@ -86,6 +69,16 @@ const columns = computed(() => [
         name: 'rate2',
         ...defaultColumnAttrs,
         cardVisible: true,
+        columnField: {
+            class: 'expand',
+            component: 'input',
+            type: 'number',
+        },
+        columnFilter: {
+            class: 'expand',
+            component: 'input',
+            type: 'number',
+        },
     },
     {
         label: t('item.fixedPrice.packingPrice'),
@@ -93,6 +86,16 @@ const columns = computed(() => [
         name: 'rate3',
         ...defaultColumnAttrs,
         cardVisible: true,
+        columnField: {
+            class: 'expand',
+            component: 'input',
+            type: 'number',
+        },
+        columnFilter: {
+            class: 'expand',
+            component: 'input',
+            type: 'number',
+        },
     },
 
     {
@@ -107,6 +110,11 @@ const columns = computed(() => [
             component: 'input',
             type: 'number',
         },
+        columnFilter: {
+            class: 'expand',
+            component: 'input',
+            type: 'number',
+        },
     },
     {
         label: t('item.fixedPrice.started'),
@@ -119,6 +127,9 @@ const columns = computed(() => [
             component: 'date',
             class: 'shrink',
         },
+        columnFilter: {
+            component: 'date',
+        },
         columnClass: 'expand',
     },
     {
@@ -131,6 +142,9 @@ const columns = computed(() => [
             component: 'date',
             class: 'shrink',
         },
+        columnFilter: {
+            component: 'date',
+        },
         columnClass: 'expand',
         format: (row) => toDate(row.ended),
     },
@@ -175,20 +189,6 @@ const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
         : { 'update:modelValue': () => upsertPrice(props, resetMinPrice) };
 };
 
-const validations = (row, rowIndex, col) => {
-    const isNew = !row.id;
-    // Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
-    // Si isNew es falso no se checkea si el valor es igual a la original
-    if (!isNew)
-        // if (fixedPricesOriginalData.value[rowIndex][col.field] == row[col.field])
-        return false;
-
-    const requiredFields = ['itemFk', 'started', 'ended', 'rate2', 'rate3'];
-    return requiredFields.every(
-        (field) => row[field] !== null && row[field] !== undefined
-    );
-};
-
 const updateMinPrice = async (value, props) => {
     // El checkbox hasMinPrice se encuentra en la misma columna que el input hasMinPrice
     // Por lo tanto le mandamos otro objeto con las mismas propiedades pero con el campo 'field' cambiado
@@ -246,33 +246,13 @@ function checkLastVisibleRow() {
     return lastVisibleRow;
 }
 const addRow = (original = null) => {
-    // const original = checkLastVisibleRow();
     let copy = null;
-    // if (!fixedPrices.value || fixedPrices.value.length === 0) {
-    //     fixedPrices.value = [];
-
-    //     const today = Date.vnNew();
-    //     const millisecsInDay = 86400000;
-    //     const daysInWeek = 7;
-    //     const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
-
-    //     const newPrice = {
-    //         started: today,
-    //         ended: nextWeek,
-    //         hasMinPrice: 0,
-    //     };
-
-    //     fixedPricesOriginalData.value.push({ ...newPrice });
-    //     fixedPrices.value.push({ ...newPrice });
-    //     return;
-    // }
     if (!original) {
         const today = Date.vnNew();
         const millisecsInDay = 86400000;
         const daysInWeek = 7;
         const nextWeek = new Date(today.getTime() + daysInWeek * millisecsInDay);
 
-        // lastItem.value = {
         copy = {
             id: 0,
             started: today,
@@ -280,8 +260,6 @@ const addRow = (original = null) => {
             hasMinPrice: 0,
             $index: 0,
         };
-
-        // return;
     } else
         copy = {
             $index: original.$index - 1,
@@ -302,17 +280,8 @@ const addRow = (original = null) => {
             started: Date.vnNew(),
             ended: Date.vnNew(),
         };
-    // lastItem.value = lastItemCopy;
-    // tableRef.value.create.onDataSaved(lastItem);
-    // nextTick(() => {
-    //     highlightNewRow(fixedPrice);
-    // });
-    // delete lastItemCopy.id;
-    // fixedPricesOriginalData.value.splice(lastvisible, 0, lastItemCopy);
-    // fixedPrices.value.unshift(lastItemCopy);
     return { original, copy };
 };
-const lastItem = ref(null);
 function highlightNewRow({ $index: index }) {
     const row = document
         .getElementsByClassName('q-table')[0]
@@ -341,9 +310,6 @@ const removeFuturePrice = async () => {
     }
 };
 const quasar = useQuasar();
-import VnConfirm from 'components/ui/VnConfirm.vue';
-import FetchData from 'src/components/FetchData.vue';
-import CrudModel from 'src/components/CrudModel.vue';
 
 function confirmRemove(item) {
     quasar.dialog({
@@ -382,18 +348,17 @@ onMounted(async () => {
 });
 function handleOnDataSave({ CrudModelRef }) {
     const { original, copy } = addRow(CrudModelRef.formData[checkLastVisibleRow()]);
-    // CrudModelRef.formData.unshift(roww);
     if (original) {
         CrudModelRef.formData.splice(original?.$index ?? 0, 0, copy);
     } else {
         CrudModelRef.insert(copy);
-        // CrudModelRef.reload();
     }
     nextTick(() => {
         highlightNewRow(original ?? { $index: 0 });
     });
 }
 onUnmounted(() => (stateStore.rightDrawer = false));
+const itemFixedPriceFilterRef = ref();
 </script>
 
 <template>
@@ -407,7 +372,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         <template #right-panel>
             <ItemFixedPriceFilter
                 data-key="ItemFixedPrices"
-                :warehouses-options="warehousesOptions"
+                ref="itemFixedPriceFilterRef"
             />
         </template>
     </RightMenu>
@@ -443,7 +408,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             url="FixedPrices/filter"
             :order="['name ASC', 'itemFk DESC']"
             save-url="FixedPrices/crud"
-            :filter="{ where: { warehouseFk: user.warehouseFk } }"
+            :user-params="{ warehouseFk: user.warehouseFk }"
             ref="tableRef"
             dense
             :columns="columns"
diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index f2e83ba3a..b9fdc57be 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -9,38 +9,36 @@ import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
 
 const { t } = useI18n();
 
-defineProps({
+const props = defineProps({
     dataKey: {
         type: String,
         required: true,
     },
 });
-import { useRoute } from 'vue-router';
-const route = useRoute();
 
 const itemTypeWorkersOptions = ref([]);
-// const sanitizeParam = (param) => {
-//     const params = JSON.parse(route?.query?.table);
-//     return params[param] ?? 'false';
-// };
 const $params = ref({});
-// onMounted(() => {
-//     ['mine', 'hasMinPrice', 'showBadDates'].forEach(
-//         (tag) => ($params.value[tag] = sanitizeParam(tag))
-//     );
-// });
 const pushParam = (param) => ({
     param: { [param]: $params.value[param] },
 });
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'name':
+            return { 'i.name': { like: `%${value}%` } };
+        case 'itemFk':
+        case 'warehouseFk':
+        case 'rate2':
+        case 'rate3':
+            param = `fp.${param}`;
+            return { [param]: value };
+        case 'minPrice':
+            param = `i.${param}`;
+            return { [param]: value };
+    }
+};
 </script>
 
 <template>
-    <FetchData
-        @on-fetch="(data) => (warehousesOptions = data)"
-        auto-load
-        url="Warehouses"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
-    />
     <FetchData
         url="TicketRequests/getItemTypeWorker"
         limit="30"
@@ -48,7 +46,11 @@ const pushParam = (param) => ({
         :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
         @on-fetch="(data) => (itemTypeWorkersOptions = data)"
     />
-    <ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
+    <ItemsFilterPanel
+        :data-key="props.dataKey"
+        :custom-tags="['tags']"
+        search-url="table"
+    >
         <template #body="{ params, searchFn }">
             <QItem class="q-my-md">
                 <QItemSection>
@@ -69,9 +71,11 @@ const pushParam = (param) => ({
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnSelect
+                        url="Warehouses"
+                        auto-load
+                        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
                         :label="t('components.itemsFilterPanel.warehouseFk')"
                         v-model="params.warehouseFk"
-                        :options="warehousesOptions"
                         option-label="name"
                         option-value="id"
                         dense

From 31b8088b5f36bbf2af200e1be615dc7677249f54 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 6 Sep 2024 14:41:38 +0200
Subject: [PATCH 31/34] perf: improve ItemFixedPricefilterPanel

---
 src/components/ItemsFilterPanel.vue     |  4 ++--
 src/pages/Item/ItemFixedPriceFilter.vue | 31 ++++++++-----------------
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/components/ItemsFilterPanel.vue b/src/components/ItemsFilterPanel.vue
index 743c2c9d1..8449f9354 100644
--- a/src/components/ItemsFilterPanel.vue
+++ b/src/components/ItemsFilterPanel.vue
@@ -159,8 +159,8 @@ const removeTag = (index, params, search) => {
     />
     <VnFilterPanel
         :data-key="props.dataKey"
-        :expr-builder="exprBuilder"
-        :custom-tags="customTags"
+        :expr-builder="props.exprBuilder"
+        :custom-tags="props.customTags"
     >
         <template #tags="{ tag, formatFn }">
             <strong v-if="tag.label === 'categoryFk'">
diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index b9fdc57be..84eefaed3 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -17,10 +17,6 @@ const props = defineProps({
 });
 
 const itemTypeWorkersOptions = ref([]);
-const $params = ref({});
-const pushParam = (param) => ({
-    param: { [param]: $params.value[param] },
-});
 const exprBuilder = (param, value) => {
     switch (param) {
         case 'name':
@@ -46,11 +42,7 @@ const exprBuilder = (param, value) => {
         :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
         @on-fetch="(data) => (itemTypeWorkersOptions = data)"
     />
-    <ItemsFilterPanel
-        :data-key="props.dataKey"
-        :custom-tags="['tags']"
-        search-url="table"
-    >
+    <ItemsFilterPanel :data-key="props.dataKey" :custom-tags="['tags']">
         <template #body="{ params, searchFn }">
             <QItem class="q-my-md">
                 <QItemSection>
@@ -110,27 +102,24 @@ const exprBuilder = (param, value) => {
                 <QItemSection>
                     <QCheckbox
                         :label="t('components.itemsFilterPanel.mine')"
-                        v-model="$params.mine"
-                        :true-value="'true'"
-                        :false-value="'false'"
-                        @update:model-value="searchFn(pushParam('mine'))"
+                        v-model="params.mine"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
                     />
 
                     <QCheckbox
-                        v-model="$params.showBadDates"
+                        v-model="params.showBadDates"
                         :label="t(`components.itemsFilterPanel.showBadDates`)"
-                        :true-value="'true'"
-                        :false-value="'false'"
-                        @update:model-value="searchFn(pushParam('showBadDates'))"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
                     >
                     </QCheckbox>
 
                     <QCheckbox
                         :label="t('components.itemsFilterPanel.hasMinPrice')"
-                        v-model="$params.hasMinPrice"
-                        :true-value="'true'"
-                        :false-value="'false'"
-                        @update:model-value="searchFn(pushParam('hasMinPrice'))"
+                        v-model="params.hasMinPrice"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>

From 3276548f883cc9355d19ce839ba529dc781ab74b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 6 Sep 2024 14:47:29 +0200
Subject: [PATCH 32/34] fix: editTableOptions

---
 src/pages/Item/ItemFixedPrice.vue | 79 +++++++++++++++++++++++++------
 1 file changed, 64 insertions(+), 15 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index e042cb859..c5d7014f3 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -180,6 +180,61 @@ const columns = computed(() => [
     },
 ]);
 
+const editTableFieldsOptions = [
+    {
+        field: 'rate2',
+        label: t('item.fixedPrice.groupingPrice'),
+        component: 'input',
+        attrs: {
+            type: 'number',
+        },
+    },
+    {
+        field: 'rate3',
+        label: t('item.fixedPrice.packingPrice'),
+        component: 'input',
+        attrs: {
+            type: 'number',
+        },
+    },
+    {
+        field: 'minPrice',
+        label: t('item.fixedPrice.minPrice'),
+        component: 'input',
+        attrs: {
+            type: 'number',
+        },
+    },
+    {
+        field: 'hasMinPrice',
+        label: t('item.fixedPrice.hasMinPrice'),
+        component: 'checkbox',
+        attrs: {
+            'false-value': 0,
+            'true-value': 1,
+        },
+    },
+    {
+        field: 'started',
+        label: t('item.fixedPrice.started'),
+        component: 'date',
+    },
+    {
+        field: 'ended',
+        label: t('item.fixedPrice.ended'),
+        component: 'date',
+    },
+    {
+        field: 'warehouseFk',
+        label: t('item.fixedPrice.warehouse'),
+        component: 'select',
+        attrs: {
+            options: [],
+            'option-label': 'name',
+            'option-value': 'id',
+        },
+    },
+];
 const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
     return inputType === 'text'
         ? {
@@ -298,11 +353,12 @@ const openEditTableCellDialog = () => {
 };
 const onEditCellDataSaved = async () => {
     rowsSelected.value = [];
+    tableRef.value.reload();
 };
 const removeFuturePrice = async () => {
     try {
         rowsSelected.value.forEach(({ id }) => {
-            const rowIndex = fixedPrices.value.findIndex((r) => r.id === id);
+            const rowIndex = fixedPrices.value.findIndex(({ id }) => id === id);
             removePrice(id, rowIndex);
         });
     } catch (err) {
@@ -311,27 +367,18 @@ const removeFuturePrice = async () => {
 };
 const quasar = useQuasar();
 
-function confirmRemove(item) {
+function confirmRemove(item, isFuture) {
+    const promise = async () =>
+        isFuture ? removeFuturePrice(item.id) : removePrice(item.id);
     quasar.dialog({
         component: VnConfirm,
         componentProps: {
             title: t('globals.rowWillBeRemoved'),
             message: t('globals.confirmDeletion'),
-            promise: async () => removePrice(item.id),
+            promise,
         },
     });
 }
-function confirmRemoveFuturePrice(item) {
-    quasar.dialog({
-        component: VnConfirm,
-        componentProps: {
-            title: t('globals.rowWillBeRemoved'),
-            message: t('globals.confirmDeletion'),
-            promise: async () => removeFuturePrice(item.id),
-        },
-    });
-}
-
 const removePrice = async (id) => {
     try {
         await axios.delete(`FixedPrices/${id}`);
@@ -393,7 +440,7 @@ const itemFixedPriceFilterRef = ref();
                 color="primary"
                 icon="delete"
                 flat
-                @click="confirmRemoveFuturePrice"
+                @click="(row) => confirmRemove(row, true)"
                 :title="t('globals.remove')"
                 v-if="rowsSelected.length"
             />
@@ -597,6 +644,8 @@ const itemFixedPriceFilterRef = ref();
                 @on-data-saved="onEditCellDataSaved()"
             />
         </QDialog>
+        {{ rowsSelected }}
+        **{{ editTableFieldsOptions }}
     </QPage>
 </template>
 <style lang="scss">

From 754f04794396e9da4c9192497706bb6e977bbdce Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 7 Sep 2024 21:55:08 +0200
Subject: [PATCH 33/34] perf: order components

---
 src/pages/Item/ItemFixedPrice.vue | 41 ++++++++++++-------------------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index c5d7014f3..951dbf4b2 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -24,24 +24,31 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import { QCheckbox } from 'quasar';
 
+const quasar = useQuasar();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const state = useState();
 const { notify } = useNotify();
-
+const tableRef = ref();
 const editTableCellDialogRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
 const warehousesOptions = ref([]);
 const rowsSelected = ref([]);
 
+const itemFixedPriceFilterRef = ref();
+
 const params = reactive({});
 const defaultColumnAttrs = {
     align: 'left',
     sortable: true,
 };
-
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    params.warehouseFk = user.value.warehouseFk;
+});
+onUnmounted(() => (stateStore.rightDrawer = false));
 const columns = computed(() => [
     {
         label: t('item.fixedPrice.itemId'),
@@ -255,13 +262,12 @@ const updateMinPrice = async (value, props) => {
     });
 };
 
-const upsertPrice = async ({ row, col, rowIndex }, resetMinPrice = false) => {
+const upsertPrice = async ({ row }, resetMinPrice = false) => {
     // if (!validations(row, rowIndex, col)) return;
 
     try {
         if (resetMinPrice) row.hasMinPrice = 0;
         row = await upsertFixedPrice(row);
-        // fixedPricesOriginalData.value[rowIndex][col.field] = row[col.field];
     } catch (err) {
         console.error('Error editing price', err);
     }
@@ -281,14 +287,11 @@ async function saveOnRowChange(row) {
         await upsertFixedPrice(rowsSelected.value[0]);
     rowsSelected.value = [row];
 }
-const tableRef = ref();
+
 function checkLastVisibleRow() {
-    const rows = document
-        .getElementsByClassName('q-table')[0]
-        .querySelectorAll('tr.cursor-pointer');
     let lastVisibleRow = null;
 
-    rows.forEach((row, index) => {
+    getTableRows().forEach((row, index) => {
         const rect = row.getBoundingClientRect();
         if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
             lastVisibleRow = index;
@@ -337,10 +340,10 @@ const addRow = (original = null) => {
         };
     return { original, copy };
 };
+const getTableRows = () =>
+    document.getElementsByClassName('q-table')[0].querySelectorAll('tr.cursor-pointer');
 function highlightNewRow({ $index: index }) {
-    const row = document
-        .getElementsByClassName('q-table')[0]
-        .querySelectorAll('tr.cursor-pointer')[index];
+    const row = getTableRows()[index];
     if (row) {
         row.classList.add('highlight');
         setTimeout(() => {
@@ -365,8 +368,6 @@ const removeFuturePrice = async () => {
         console.error('Error removing price', err);
     }
 };
-const quasar = useQuasar();
-
 function confirmRemove(item, isFuture) {
     const promise = async () =>
         isFuture ? removeFuturePrice(item.id) : removePrice(item.id);
@@ -389,10 +390,6 @@ const removePrice = async (id) => {
     }
 };
 
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-    params.warehouseFk = user.value.warehouseFk;
-});
 function handleOnDataSave({ CrudModelRef }) {
     const { original, copy } = addRow(CrudModelRef.formData[checkLastVisibleRow()]);
     if (original) {
@@ -404,8 +401,6 @@ function handleOnDataSave({ CrudModelRef }) {
         highlightNewRow(original ?? { $index: 0 });
     });
 }
-onUnmounted(() => (stateStore.rightDrawer = false));
-const itemFixedPriceFilterRef = ref();
 </script>
 
 <template>
@@ -629,7 +624,7 @@ const itemFixedPriceFilterRef = ref();
                         "
                     >
                         <QTooltip class="text-no-wrap">
-                            {{ t('Delete') }}
+                            {{ t('globals.delete') }}
                         </QTooltip>
                     </QIcon>
                 </QTd>
@@ -644,8 +639,6 @@ const itemFixedPriceFilterRef = ref();
                 @on-data-saved="onEditCellDataSaved()"
             />
         </QDialog>
-        {{ rowsSelected }}
-        **{{ editTableFieldsOptions }}
     </QPage>
 </template>
 <style lang="scss">
@@ -694,6 +687,4 @@ tbody tr.highlight .q-td {
 es:
     Add fixed price: Añadir precio fijado
     Edit fixed price(s): Editar precio(s) fijado(s)
-    Are you sure you want to continue?: ¿Seguro que quieres continuar?
-    Delete: Eliminar
 </i18n>

From 53e6c67ff9b310b972e19ebfb6939233467704a6 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 8 Sep 2024 12:56:40 +0200
Subject: [PATCH 34/34] perf: minor clean code

---
 src/pages/Item/ItemFixedPrice.vue | 41 ++++++++++++++-----------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 951dbf4b2..59a3e74db 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -263,8 +263,6 @@ const updateMinPrice = async (value, props) => {
 };
 
 const upsertPrice = async ({ row }, resetMinPrice = false) => {
-    // if (!validations(row, rowIndex, col)) return;
-
     try {
         if (resetMinPrice) row.hasMinPrice = 0;
         row = await upsertFixedPrice(row);
@@ -272,6 +270,7 @@ const upsertPrice = async ({ row }, resetMinPrice = false) => {
         console.error('Error editing price', err);
     }
 };
+
 async function upsertFixedPrice(row) {
     try {
         const { data } = await axios.patch('FixedPrices/upsertFixedPrice', row);
@@ -280,6 +279,7 @@ async function upsertFixedPrice(row) {
         console.error('Error editing price', err);
     }
 }
+
 async function saveOnRowChange(row) {
     if (rowsSelected.value.length > 1) return;
     if (rowsSelected.value[0]?.id === row.id) return;
@@ -298,11 +298,9 @@ function checkLastVisibleRow() {
         }
     });
 
-    if (lastVisibleRow) {
-        console.log('Última fila visible:', lastVisibleRow);
-    }
     return lastVisibleRow;
 }
+
 const addRow = (original = null) => {
     let copy = null;
     if (!original) {
@@ -340,8 +338,10 @@ const addRow = (original = null) => {
         };
     return { original, copy };
 };
+
 const getTableRows = () =>
     document.getElementsByClassName('q-table')[0].querySelectorAll('tr.cursor-pointer');
+
 function highlightNewRow({ $index: index }) {
     const row = getTableRows()[index];
     if (row) {
@@ -354,10 +354,12 @@ function highlightNewRow({ $index: index }) {
 const openEditTableCellDialog = () => {
     editTableCellDialogRef.value.show();
 };
+
 const onEditCellDataSaved = async () => {
     rowsSelected.value = [];
     tableRef.value.reload();
 };
+
 const removeFuturePrice = async () => {
     try {
         rowsSelected.value.forEach(({ id }) => {
@@ -368,6 +370,7 @@ const removeFuturePrice = async () => {
         console.error('Error removing price', err);
     }
 };
+
 function confirmRemove(item, isFuture) {
     const promise = async () =>
         isFuture ? removeFuturePrice(item.id) : removePrice(item.id);
@@ -380,6 +383,7 @@ function confirmRemove(item, isFuture) {
         },
     });
 }
+
 const removePrice = async (id) => {
     try {
         await axios.delete(`FixedPrices/${id}`);
@@ -389,6 +393,13 @@ const removePrice = async (id) => {
         console.error('Error removing price', err);
     }
 };
+const dateStyle = (date) =>
+    date
+        ? {
+              'bg-color': 'warning',
+              'is-outlined': true,
+          }
+        : {};
 
 function handleOnDataSave({ CrudModelRef }) {
     const { original, copy } = addRow(CrudModelRef.formData[checkLastVisibleRow()]);
@@ -566,14 +577,7 @@ function handleOnDataSave({ CrudModelRef }) {
                         :show-event="true"
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
-                        v-bind="
-                            isBigger(props.row.started)
-                                ? {
-                                      'bg-color': 'warning',
-                                      'is-outlined': true,
-                                  }
-                                : {}
-                        "
+                        v-bind="dateStyle(isBigger(props.row.started))"
                     />
                 </QTd>
             </template>
@@ -584,14 +588,7 @@ function handleOnDataSave({ CrudModelRef }) {
                         :show-event="true"
                         v-model="props.row.ended"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
-                        v-bind="
-                            isLower(props.row.started)
-                                ? {
-                                      'bg-color': 'warning',
-                                      'is-outlined': true,
-                                  }
-                                : {}
-                        "
+                        v-bind="dateStyle(isLower(props.row.started))"
                     />
                 </QTd>
             </template>
@@ -617,7 +614,7 @@ function handleOnDataSave({ CrudModelRef }) {
                         color="primary"
                         @click.stop="
                             openConfirmationModal(
-                                t('This row will be removed'),
+                                t('globals.rowWillBeRemoved'),
                                 t('Do you want to clone this item?'),
                                 () => removePrice(row.id, rowIndex)
                             )