From 2693f259d4617e4fbedaf10558a052efb09abaef Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 13 Feb 2024 10:17:24 -0300
Subject: [PATCH 01/10] Add drag and drop do Travel Extra Community table

---
 src/pages/Travel/ExtraCommunity.vue | 150 ++++++++++++++++++++++------
 1 file changed, 117 insertions(+), 33 deletions(-)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 4cbb850e1..42c5480f4 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -47,6 +47,10 @@ const arrayData = useArrayData('ExtraCommunity', {
 });
 
 const rows = computed(() => arrayData.store.data || []);
+const draggedRowIndex = ref(null);
+const targetRowIndex = ref(null);
+const entryRowIndex = ref(null);
+const draggedEntry = ref(null);
 
 const tableColumnComponents = {
     id: {
@@ -263,6 +267,56 @@ onMounted(async () => {
     landedTo.value.setHours(23, 59, 59, 59);
     await getData();
 });
+
+const handleDragStart = (event, rowIndex, entryIndex) => {
+    draggedRowIndex.value = rowIndex;
+    entryRowIndex.value = entryIndex;
+    event.dataTransfer.effectAllowed = 'move';
+};
+
+const handleDragEnter = (_, targetIndex) => {
+    targetRowIndex.value = targetIndex;
+};
+
+const handleDragOver = (e) => {
+    e.preventDefault();
+};
+
+const saveRowDrop = async (targetRowIndex) => {
+    const entryId = draggedEntry.value.id;
+    const travelId = rows.value[targetRowIndex].id;
+    await axios.patch(`Entries/${entryId}`, { travelFk: travelId });
+};
+
+const moveRow = async (draggedRowIndex, targetRowIndex, entryIndex) => {
+    try {
+        if (draggedRowIndex === targetRowIndex) return;
+        // Remover entry de la row original
+        draggedEntry.value = rows.value[draggedRowIndex].entries.splice(entryIndex, 1)[0];
+        //Si la row de destino por alguna razón no tiene la propiedad entry la creamos
+        if (!rows.value[targetRowIndex].entries) rows.value[targetRowIndex].entries = [];
+        // Añadir entry a la row de destino
+        rows.value[targetRowIndex].entries.push(draggedEntry.value);
+
+        await saveRowDrop(targetRowIndex);
+    } catch (err) {
+        cleanDragAndDropData();
+        console.error('Error moving row', err);
+    }
+};
+
+const handleDrop = () => {
+    if (!draggedRowIndex.value && !targetRowIndex.value) return;
+    moveRow(draggedRowIndex.value, targetRowIndex.value, entryRowIndex.value);
+    cleanDragAndDropData();
+};
+
+const cleanDragAndDropData = () => {
+    draggedRowIndex.value = null;
+    targetRowIndex.value = null;
+    entryRowIndex.value = null;
+    draggedEntry.value = null;
+};
 </script>
 
 <template>
@@ -302,18 +356,23 @@ onMounted(async () => {
             row-key="clientId"
             :pagination="{ rowsPerPage: 0 }"
             class="full-width"
+            table-style="user-select: none;"
         >
             <template #body="props">
                 <QTr
                     :props="props"
-                    @click="navigateToTravelId(props.row.id)"
                     class="cursor-pointer bg-vn-primary-row"
+                    @click="navigateToTravelId(props.row.id)"
+                    @dragenter="handleDragEnter($event, props.rowIndex)"
+                    @dragover="handleDragOver($event)"
+                    @drop="handleDrop()"
                 >
                     <QTd
                         v-for="col in props.cols"
                         :key="col.name"
                         :props="props"
                         @click="stopEventPropagation($event, col)"
+                        :class="{ 'dashed-border': targetRowIndex === props.rowIndex }"
                     >
                         <component
                             :is="tableColumnComponents[col.name].component"
@@ -367,47 +426,72 @@ onMounted(async () => {
                         </component>
                     </QTd>
                 </QTr>
+
                 <QTr
-                    v-for="entry in props.row.entries"
-                    :key="entry.id"
+                    v-for="(entry, index) in props.row.entries"
+                    :key="index"
                     :props="props"
-                    class="bg-vn-secondary-row"
+                    class="bg-vn-secondary-row cursor-pointer"
+                    @dragstart="handleDragStart($event, props.rowIndex, index)"
+                    @dragenter="handleDragEnter($event, props.rowIndex)"
+                    @dragover="handleDragOver($event)"
+                    @drop="handleDrop()"
+                    :draggable="true"
+                    :class="{
+                        'dragged-row':
+                            entryRowIndex === index && props.rowIndex === draggedRowIndex,
+                    }"
                 >
-                    <QTd class="row justify-center">
-                        <QBtn flat color="primary">{{ entry.id }} </QBtn>
-                        <EntryDescriptorProxy :id="entry.id" />
-                    </QTd>
-                    <QTd>
-                        <QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn>
-                        <SupplierDescriptorProxy :id="entry.supplierFk" />
-                    </QTd>
-                    <QTd></QTd>
-                    <QTd
-                        ><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.reference }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.stickers }}</span></QTd
-                    >
-                    <QTd></QTd>
-                    <QTd
-                        ><span>{{ entry.loadedkg }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.volumeKg }}</span></QTd
-                    >
-                    <QTd></QTd>
-                    <QTd></QTd>
-                    <QTd></QTd>
-                    <QTd></QTd>
+                    <template v-if="entry">
+                        <QTd class="row justify-center">
+                            <QBtn flat color="primary">{{ entry.id }} </QBtn>
+                            <EntryDescriptorProxy :id="entry.id" />
+                        </QTd>
+                        <QTd>
+                            <QBtn flat color="primary" dense>{{
+                                entry.supplierName
+                            }}</QBtn>
+                            <SupplierDescriptorProxy :id="entry.supplierFk" />
+                        </QTd>
+                        <QTd></QTd>
+                        <QTd
+                            ><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
+                        >
+                        <QTd
+                            ><span>{{ entry.reference }}</span></QTd
+                        >
+                        <QTd
+                            ><span>{{ entry.stickers }}</span></QTd
+                        >
+                        <QTd></QTd>
+                        <QTd
+                            ><span>{{ entry.loadedkg }}</span></QTd
+                        >
+                        <QTd
+                            ><span>{{ entry.volumeKg }}</span></QTd
+                        >
+                        <QTd></QTd>
+                        <QTd></QTd>
+                        <QTd></QTd>
+                        <QTd></QTd>
+                    </template>
                 </QTr>
             </template>
         </QTable>
     </QPage>
 </template>
 
+<style scoped lang="scss">
+.dashed-border {
+    border-bottom: 1px dashed #ccc !important;
+    border-top: 1px dashed #ccc !important;
+}
+
+.dragged-row {
+    background-color: $secondary;
+}
+</style>
+
 <i18n>
 en:
     searchExtraCommunity: Search for extra community shipping

From ca06140a8da66be7cdd231f3e074a2660880eb40 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 13 Feb 2024 10:49:27 -0300
Subject: [PATCH 02/10] remove v-if

---
 src/pages/Travel/ExtraCommunity.vue | 62 ++++++++++++++---------------
 1 file changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 42c5480f4..0cf3e04ca 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -442,39 +442,35 @@ const cleanDragAndDropData = () => {
                             entryRowIndex === index && props.rowIndex === draggedRowIndex,
                     }"
                 >
-                    <template v-if="entry">
-                        <QTd class="row justify-center">
-                            <QBtn flat color="primary">{{ entry.id }} </QBtn>
-                            <EntryDescriptorProxy :id="entry.id" />
-                        </QTd>
-                        <QTd>
-                            <QBtn flat color="primary" dense>{{
-                                entry.supplierName
-                            }}</QBtn>
-                            <SupplierDescriptorProxy :id="entry.supplierFk" />
-                        </QTd>
-                        <QTd></QTd>
-                        <QTd
-                            ><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
-                        >
-                        <QTd
-                            ><span>{{ entry.reference }}</span></QTd
-                        >
-                        <QTd
-                            ><span>{{ entry.stickers }}</span></QTd
-                        >
-                        <QTd></QTd>
-                        <QTd
-                            ><span>{{ entry.loadedkg }}</span></QTd
-                        >
-                        <QTd
-                            ><span>{{ entry.volumeKg }}</span></QTd
-                        >
-                        <QTd></QTd>
-                        <QTd></QTd>
-                        <QTd></QTd>
-                        <QTd></QTd>
-                    </template>
+                    <QTd class="row justify-center">
+                        <QBtn flat color="primary">{{ entry.id }} </QBtn>
+                        <EntryDescriptorProxy :id="entry.id" />
+                    </QTd>
+                    <QTd>
+                        <QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn>
+                        <SupplierDescriptorProxy :id="entry.supplierFk" />
+                    </QTd>
+                    <QTd></QTd>
+                    <QTd
+                        ><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
+                    >
+                    <QTd
+                        ><span>{{ entry.reference }}</span></QTd
+                    >
+                    <QTd
+                        ><span>{{ entry.stickers }}</span></QTd
+                    >
+                    <QTd></QTd>
+                    <QTd
+                        ><span>{{ entry.loadedkg }}</span></QTd
+                    >
+                    <QTd
+                        ><span>{{ entry.volumeKg }}</span></QTd
+                    >
+                    <QTd></QTd>
+                    <QTd></QTd>
+                    <QTd></QTd>
+                    <QTd></QTd>
                 </QTr>
             </template>
         </QTable>

From fbe8c912f60767cec05d6b7069b6e409b0fd6f68 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Feb 2024 09:55:18 -0300
Subject: [PATCH 03/10] Fix dragend status

---
 src/pages/Travel/ExtraCommunity.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 0cf3e04ca..5fd33a061 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -306,7 +306,13 @@ const moveRow = async (draggedRowIndex, targetRowIndex, entryIndex) => {
 };
 
 const handleDrop = () => {
-    if (!draggedRowIndex.value && !targetRowIndex.value) return;
+    if (
+        !draggedRowIndex.value &&
+        draggedRowIndex.value !== 0 &&
+        !targetRowIndex.value &&
+        draggedRowIndex.value !== 0
+    )
+        return;
     moveRow(draggedRowIndex.value, targetRowIndex.value, entryRowIndex.value);
     cleanDragAndDropData();
 };
@@ -357,6 +363,7 @@ const cleanDragAndDropData = () => {
             :pagination="{ rowsPerPage: 0 }"
             class="full-width"
             table-style="user-select: none;"
+            @dragend="cleanDragAndDropData()"
         >
             <template #body="props">
                 <QTr

From 60d24914092c1274e46bbb47ccd50dd8a27de6c3 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Feb 2024 18:20:54 -0300
Subject: [PATCH 04/10] change drag status color

---
 src/css/quasar.variables.scss       | 1 +
 src/pages/Travel/ExtraCommunity.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 6a3700561..58b202522 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -13,6 +13,7 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary: #ec8916;
+$primary-light: lighten($primary, 35%);
 $secondary: #26a69a;
 $accent: #9c27b0;
 $white: #fff;
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 5fd33a061..ce8747fb1 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -491,7 +491,7 @@ const cleanDragAndDropData = () => {
 }
 
 .dragged-row {
-    background-color: $secondary;
+    background-color: $primary-light;
 }
 </style>
 

From e29801a47eba2324f7e8ca7c80ac45f0cbee8ab2 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Feb 2024 22:14:44 -0300
Subject: [PATCH 05/10] General improvements and handle params changes in
 VnFilterPanel

---
 src/components/ui/VnFilterPanel.vue       | 16 +++++++++++++-
 src/pages/Travel/ExtraCommunityFilter.vue | 26 +++++++++--------------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 7504e819e..722462d4a 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -1,7 +1,8 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
+import { useRoute } from 'vue-router';
 import toDate from 'filters/toDate';
 
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
@@ -52,6 +53,7 @@ const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
 const arrayData = useArrayData(props.dataKey, {
     exprBuilder: props.exprBuilder,
 });
+const route = useRoute();
 const store = arrayData.store;
 const userParams = ref({});
 
@@ -63,6 +65,18 @@ onMounted(() => {
     emit('init', { params: userParams.value });
 });
 
+watch(
+    () => route.query.params,
+    (val) => {
+        if (!val) {
+            userParams.value = {};
+        } else {
+            const parsedParams = JSON.parse(val);
+            userParams.value = { ...parsedParams };
+        }
+    }
+);
+
 const isLoading = ref(false);
 async function search() {
     isLoading.value = true;
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index cac8e093d..0b8975165 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -65,7 +65,7 @@ const decrement = (paramsObj, key) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
                     <VnInput label="id" v-model="params.id" is-outlined />
@@ -116,6 +116,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.agencyModeFk')"
                         v-model="params.agencyModeFk"
+                        @update:model-value="searchFn()"
                         :options="agenciesOptions"
                         option-value="agencyFk"
                         option-label="name"
@@ -129,8 +130,9 @@ const decrement = (paramsObj, key) => {
             <QItem>
                 <QItemSection>
                     <VnInputDate
-                        v-model="params.shippedFrom"
                         :label="t('params.shippedFrom')"
+                        v-model="params.shippedFrom"
+                        @update:model-value="searchFn()"
                         is-outlined
                     />
                 </QItemSection>
@@ -138,8 +140,9 @@ const decrement = (paramsObj, key) => {
             <QItem>
                 <QItemSection>
                     <VnInputDate
-                        v-model="params.landedTo"
                         :label="t('params.landedTo')"
+                        v-model="params.landedTo"
+                        @update:model-value="searchFn()"
                         is-outlined
                     />
                 </QItemSection>
@@ -149,6 +152,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.warehouseOutFk')"
                         v-model="params.warehouseOutFk"
+                        @update:model-value="searchFn()"
                         :options="warehousesOptions"
                         option-value="id"
                         option-label="name"
@@ -164,6 +168,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.warehouseInFk')"
                         v-model="params.warehouseInFk"
+                        @update:model-value="searchFn()"
                         :options="warehousesOptions"
                         option-value="id"
                         option-label="name"
@@ -179,6 +184,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('supplier.pageTitles.supplier')"
                         v-model="params.cargoSupplierFk"
+                        @update:model-value="searchFn()"
                         :options="suppliersOptions"
                         option-value="id"
                         option-label="name"
@@ -194,6 +200,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.continent')"
                         v-model="params.continent"
+                        @update:model-value="searchFn()"
                         :options="continentsOptions"
                         option-value="code"
                         option-label="name"
@@ -208,19 +215,6 @@ const decrement = (paramsObj, key) => {
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.input-number >>> input[type='number'] {
-    -moz-appearance: textfield;
-}
-
-.input-number >>> input::-webkit-outer-spin-button,
-.input-number >>> input::-webkit-inner-spin-button {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-}
-</style>
-
 <i18n>
 en:
     params:

From 08e39232e2bb5d8b0975c56b8b626ea3bf7190d7 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Feb 2024 22:18:54 -0300
Subject: [PATCH 06/10] add dashed border to first and last child to drop row

---
 src/pages/Travel/ExtraCommunity.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index ce8747fb1..6440d43cb 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -488,6 +488,14 @@ const cleanDragAndDropData = () => {
 .dashed-border {
     border-bottom: 1px dashed #ccc !important;
     border-top: 1px dashed #ccc !important;
+
+    &:first-child {
+        border-left: 1px dashed #ccc !important;
+    }
+
+    &:last-child {
+        border-right: 1px dashed #ccc !important;
+    }
 }
 
 .dragged-row {

From c322bfb46c5d8e395636fda7639386e409500c65 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 15 Feb 2024 14:23:01 -0300
Subject: [PATCH 07/10] general improvements

---
 src/pages/Travel/ExtraCommunity.vue | 105 +++++++++++++++++-----------
 1 file changed, 63 insertions(+), 42 deletions(-)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 6440d43cb..c7191a432 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
-import { QBtn, QField, QPopupEdit } from 'quasar';
+import { QBtn } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -47,6 +47,7 @@ const arrayData = useArrayData('ExtraCommunity', {
 });
 
 const rows = computed(() => arrayData.store.data || []);
+const originalRowDataCopy = ref(null);
 const draggedRowIndex = ref(null);
 const targetRowIndex = ref(null);
 const entryRowIndex = ref(null);
@@ -59,7 +60,12 @@ const tableColumnComponents = {
     },
     cargoSupplierNickname: {
         component: QBtn,
-        attrs: { flat: true, color: 'primary', dense: true },
+        attrs: {
+            flat: true,
+            color: 'primary',
+            dense: true,
+            class: 'supplier-name-button',
+        },
     },
     agencyModeName: {
         component: 'span',
@@ -70,16 +76,24 @@ const tableColumnComponents = {
         attrs: {},
     },
     ref: {
-        component: QField,
-        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
+        component: VnInput,
+        attrs: { dense: true },
+        event: (val, field, rowIndex) => ({
+            'keyup.enter': () => saveFieldValue(val, field, rowIndex),
+            blur: () => saveFieldValue(val, field, rowIndex),
+        }),
     },
     stickers: {
         component: 'span',
         attrs: {},
     },
     kg: {
-        component: QField,
-        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
+        component: VnInput,
+        attrs: { dense: true },
+        event: (val, field, rowIndex) => ({
+            'keyup.enter': () => saveFieldValue(val, field, rowIndex),
+            blur: () => saveFieldValue(val, field, rowIndex),
+        }),
     },
     loadedKg: {
         component: 'span',
@@ -203,7 +217,7 @@ const columns = computed(() => [
         align: 'left',
         showValue: true,
         sortable: true,
-        format: (value) => toDate(value.substring(0, 10)),
+        format: (value) => toDate(value),
     },
     {
         label: t('globals.wareHouseIn'),
@@ -220,7 +234,7 @@ const columns = computed(() => [
         align: 'left',
         showValue: true,
         sortable: true,
-        format: (value) => toDate(value.substring(0, 10)),
+        format: (value) => toDate(value),
     },
 ]);
 
@@ -239,9 +253,12 @@ const openReportPdf = () => {
 
 const saveFieldValue = async (val, field, index) => {
     try {
+        if (originalRowDataCopy.value[index][field] == val) return;
+
         const id = rows.value[index].id;
         const params = { [field]: val };
         await axios.patch(`Travels/${id}`, params);
+        originalRowDataCopy.value[index][field] = val;
     } catch (err) {
         console.error('Error updating travel');
     }
@@ -266,6 +283,9 @@ onMounted(async () => {
     landedTo.value.setDate(landedTo.value.getDate() + 7);
     landedTo.value.setHours(23, 59, 59, 59);
     await getData();
+
+    // el objetivo de esto es guardar una copia de los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
+    originalRowDataCopy.value = JSON.parse(JSON.stringify(rows.value));
 });
 
 const handleDragStart = (event, rowIndex, entryIndex) => {
@@ -380,47 +400,34 @@ const cleanDragAndDropData = () => {
                         :props="props"
                         @click="stopEventPropagation($event, col)"
                         :class="{ 'dashed-border': targetRowIndex === props.rowIndex }"
+                        auto-width
                     >
                         <component
                             :is="tableColumnComponents[col.name].component"
                             v-bind="tableColumnComponents[col.name].attrs"
+                            v-model="rows[props.rowIndex][col.field]"
+                            v-on="
+                                tableColumnComponents[col.name].event
+                                    ? tableColumnComponents[col.name].event(
+                                          rows[props.rowIndex][col.field],
+                                          col.field,
+                                          props.rowIndex
+                                      )
+                                    : {}
+                            "
                         >
-                            <!-- Editable 'ref' and 'kg' QField slot -->
-                            <template
-                                v-if="col.name === 'ref' || col.name === 'kg'"
-                                #control
-                            >
-                                <div
-                                    class="self-center full-width no-outline"
-                                    tabindex="0"
-                                >
-                                    {{ col.value }}
-                                </div>
-                                <QPopupEdit
-                                    :key="col.name"
-                                    v-model="col.value"
-                                    label-set="Save"
-                                    label-cancel="Close"
-                                >
-                                    <VnInput
-                                        v-model="rows[props.pageIndex][col.field]"
-                                        dense
-                                        autofocus
-                                        @keyup.enter="
-                                            saveFieldValue(
-                                                rows[props.pageIndex][col.field],
-                                                col.field,
-                                                props.rowIndex
-                                            )
-                                        "
-                                    />
-                                </QPopupEdit>
-                            </template>
-
                             <template v-if="col.showValue">
-                                {{ col.value }}
+                                <span
+                                    :class="[
+                                        'text-left',
+                                        {
+                                            'supplier-name':
+                                                col.name === 'cargoSupplierNickname',
+                                        },
+                                    ]"
+                                    >{{ col.value }}</span
+                                >
                             </template>
-
                             <!-- Main Row Descriptors -->
                             <TravelDescriptorProxy
                                 v-if="col.name === 'id'"
@@ -501,6 +508,20 @@ const cleanDragAndDropData = () => {
 .dragged-row {
     background-color: $primary-light;
 }
+
+.supplier-name {
+    display: flex;
+    max-width: 150px;
+
+    @media (max-width: $breakpoint-md-max) {
+        max-width: 100px;
+    }
+}
+
+.supplier-name-button {
+    white-space: normal;
+    width: max-content;
+}
 </style>
 
 <i18n>

From 0761860b374df83c489de94d8d970e464b36271d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 16 Feb 2024 09:24:31 -0300
Subject: [PATCH 08/10] Improve drag and drop borders status

---
 src/pages/Travel/ExtraCommunity.vue | 78 ++++++++++++++++++-----------
 1 file changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index c7191a432..ec5cc613b 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -384,6 +384,7 @@ const cleanDragAndDropData = () => {
             class="full-width"
             table-style="user-select: none;"
             @dragend="cleanDragAndDropData()"
+            :separator="!targetRowIndex && targetRowIndex !== 0 ? 'horizontal' : 'none'"
         >
             <template #body="props">
                 <QTr
@@ -393,13 +394,19 @@ const cleanDragAndDropData = () => {
                     @dragenter="handleDragEnter($event, props.rowIndex)"
                     @dragover="handleDragOver($event)"
                     @drop="handleDrop()"
+                    :class="{
+                        'dashed-border --top --left --right':
+                            targetRowIndex === props.rowIndex,
+                        '--bottom':
+                            targetRowIndex === props.rowIndex &&
+                            (!props.row.entries || props.row.entries.length === 0),
+                    }"
                 >
                     <QTd
                         v-for="col in props.cols"
                         :key="col.name"
                         :props="props"
                         @click="stopEventPropagation($event, col)"
-                        :class="{ 'dashed-border': targetRowIndex === props.rowIndex }"
                         auto-width
                     >
                         <component
@@ -454,9 +461,13 @@ const cleanDragAndDropData = () => {
                     :class="{
                         'dragged-row':
                             entryRowIndex === index && props.rowIndex === draggedRowIndex,
+                        'dashed-border --left --right': targetRowIndex === props.rowIndex,
+                        '--bottom':
+                            targetRowIndex === props.rowIndex &&
+                            index === props.row.entries.length - 1,
                     }"
                 >
-                    <QTd class="row justify-center">
+                    <QTd>
                         <QBtn flat color="primary">{{ entry.id }} </QBtn>
                         <EntryDescriptorProxy :id="entry.id" />
                     </QTd>
@@ -464,27 +475,27 @@ const cleanDragAndDropData = () => {
                         <QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn>
                         <SupplierDescriptorProxy :id="entry.supplierFk" />
                     </QTd>
+                    <QTd />
+                    <QTd>
+                        <span>{{ toCurrency(entry.invoiceAmount) }}</span>
+                    </QTd>
+                    <QTd>
+                        <span>{{ entry.reference }}</span>
+                    </QTd>
+                    <QTd>
+                        <span>{{ entry.stickers }}</span>
+                    </QTd>
                     <QTd></QTd>
-                    <QTd
-                        ><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.reference }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.stickers }}</span></QTd
-                    >
-                    <QTd></QTd>
-                    <QTd
-                        ><span>{{ entry.loadedkg }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.volumeKg }}</span></QTd
-                    >
-                    <QTd></QTd>
-                    <QTd></QTd>
-                    <QTd></QTd>
-                    <QTd></QTd>
+                    <QTd>
+                        <span>{{ entry.loadedkg }}</span>
+                    </QTd>
+                    <QTd>
+                        <span>{{ entry.volumeKg }}</span>
+                    </QTd>
+                    <QTd />
+                    <QTd />
+                    <QTd />
+                    <QTd />
                 </QTr>
             </template>
         </QTable>
@@ -492,16 +503,25 @@ const cleanDragAndDropData = () => {
 </template>
 
 <style scoped lang="scss">
-.dashed-border {
-    border-bottom: 1px dashed #ccc !important;
-    border-top: 1px dashed #ccc !important;
+::v-deep .q-table {
+    border-collapse: collapse;
+}
 
-    &:first-child {
-        border-left: 1px dashed #ccc !important;
+.dashed-border {
+    &.--left {
+        border-left: 1px dashed #ccc;
     }
 
-    &:last-child {
-        border-right: 1px dashed #ccc !important;
+    &.--right {
+        border-right: 1px dashed #ccc;
+    }
+
+    &.--top {
+        border-top: 1px dashed #ccc;
+    }
+
+    &.--bottom {
+        border-bottom: 1px dashed #ccc;
     }
 }
 

From f230090711e7086121fa9682ba4ac87acaf72482 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 16 Feb 2024 15:00:24 -0300
Subject: [PATCH 09/10] Add scroll when dragging elements

---
 src/pages/Travel/ExtraCommunity.vue | 59 +++++++++++++++++++++++++----
 1 file changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index ec5cc613b..e0142542f 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -298,10 +298,6 @@ const handleDragEnter = (_, targetIndex) => {
     targetRowIndex.value = targetIndex;
 };
 
-const handleDragOver = (e) => {
-    e.preventDefault();
-};
-
 const saveRowDrop = async (targetRowIndex) => {
     const entryId = draggedEntry.value.id;
     const travelId = rows.value[targetRowIndex].id;
@@ -334,6 +330,7 @@ const handleDrop = () => {
     )
         return;
     moveRow(draggedRowIndex.value, targetRowIndex.value, entryRowIndex.value);
+    stopScroll();
     cleanDragAndDropData();
 };
 
@@ -343,6 +340,53 @@ const cleanDragAndDropData = () => {
     entryRowIndex.value = null;
     draggedEntry.value = null;
 };
+
+const scrollInterval = ref(null);
+
+const startScroll = (direction) => {
+    if (!scrollInterval.value) {
+        scrollInterval.value = requestAnimationFrame(() => scroll(direction));
+    }
+};
+
+const stopScroll = () => {
+    if (scrollInterval.value) {
+        cancelAnimationFrame(scrollInterval.value);
+        scrollInterval.value = null;
+    }
+};
+
+const scroll = (direction) => {
+    const yOffset = direction === 'up' ? -2 : 2; // Ajusta la velocidad del scroll
+    window.scrollBy(0, yOffset);
+
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.body.offsetHeight;
+
+    if (
+        (direction === 'up' && window.scrollY > 0) ||
+        (direction === 'down' && windowHeight + window.scrollY < documentHeight)
+    ) {
+        scrollInterval.value = requestAnimationFrame(() => scroll(direction));
+    } else {
+        stopScroll();
+    }
+};
+
+const handleDrag = (event) => {
+    const y = event.clientY;
+    const windowHeight = window.innerHeight;
+    const nearTop = y < 150;
+    const nearBottom = y > windowHeight - 100;
+
+    if (nearTop) {
+        startScroll('up');
+    } else if (nearBottom) {
+        startScroll('down');
+    } else {
+        stopScroll();
+    }
+};
 </script>
 
 <template>
@@ -383,7 +427,8 @@ const cleanDragAndDropData = () => {
             :pagination="{ rowsPerPage: 0 }"
             class="full-width"
             table-style="user-select: none;"
-            @dragend="cleanDragAndDropData()"
+            @drag="handleDrag($event)"
+            @dragend="handleDrop($event)"
             :separator="!targetRowIndex && targetRowIndex !== 0 ? 'horizontal' : 'none'"
         >
             <template #body="props">
@@ -392,7 +437,7 @@ const cleanDragAndDropData = () => {
                     class="cursor-pointer bg-vn-primary-row"
                     @click="navigateToTravelId(props.row.id)"
                     @dragenter="handleDragEnter($event, props.rowIndex)"
-                    @dragover="handleDragOver($event)"
+                    @dragover.prevent
                     @drop="handleDrop()"
                     :class="{
                         'dashed-border --top --left --right':
@@ -455,7 +500,7 @@ const cleanDragAndDropData = () => {
                     class="bg-vn-secondary-row cursor-pointer"
                     @dragstart="handleDragStart($event, props.rowIndex, index)"
                     @dragenter="handleDragEnter($event, props.rowIndex)"
-                    @dragover="handleDragOver($event)"
+                    @dragover.prevent
                     @drop="handleDrop()"
                     :draggable="true"
                     :class="{

From 433444c869b35c94c4903c4287bf429bcc9a0ce8 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 19 Feb 2024 09:23:44 -0300
Subject: [PATCH 10/10] Improvements and corrections

---
 src/pages/Entry/Card/EntryDescriptor.vue |  2 +-
 src/pages/Travel/ExtraCommunity.vue      | 59 ++++++++++++++++++------
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/pages/Entry/Card/EntryDescriptor.vue b/src/pages/Entry/Card/EntryDescriptor.vue
index 32421f9bc..6680bdc46 100644
--- a/src/pages/Entry/Card/EntryDescriptor.vue
+++ b/src/pages/Entry/Card/EntryDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index e0142542f..e7805a7ed 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { QBtn } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -46,8 +46,8 @@ const arrayData = useArrayData('ExtraCommunity', {
     },
 });
 
-const rows = computed(() => arrayData.store.data || []);
-const originalRowDataCopy = ref(null);
+const rows = ref([]);
+const originalRowDataCopy = ref([]);
 const draggedRowIndex = ref(null);
 const targetRowIndex = ref(null);
 const entryRowIndex = ref(null);
@@ -89,7 +89,7 @@ const tableColumnComponents = {
     },
     kg: {
         component: VnInput,
-        attrs: { dense: true },
+        attrs: { dense: true, type: 'number', min: 0, class: 'input-number' },
         event: (val, field, rowIndex) => ({
             'keyup.enter': () => saveFieldValue(val, field, rowIndex),
             blur: () => saveFieldValue(val, field, rowIndex),
@@ -242,6 +242,22 @@ async function getData() {
     await arrayData.fetch({ append: false });
 }
 
+const onStoreDataChange = () => {
+    const newData = JSON.parse(JSON.stringify(arrayData.store.data)) || [];
+    rows.value = newData;
+    // el objetivo de esto es guardar una copia de los valores iniciales de todas las rows para corroborar si la data cambio antes de guardar los cambios
+    originalRowDataCopy.value = JSON.parse(JSON.stringify(newData));
+};
+
+watch(
+    arrayData.store,
+    () => {
+        if (!arrayData.store.data) return;
+        onStoreDataChange();
+    },
+    { deep: true, immediate: true }
+);
+
 const openReportPdf = () => {
     const params = {
         ...arrayData.store.userParams,
@@ -253,11 +269,13 @@ const openReportPdf = () => {
 
 const saveFieldValue = async (val, field, index) => {
     try {
+        // Evitar la solicitud de guardado si el valor no ha cambiado
         if (originalRowDataCopy.value[index][field] == val) return;
 
         const id = rows.value[index].id;
         const params = { [field]: val };
         await axios.patch(`Travels/${id}`, params);
+        // Actualizar la copia de los datos originales con el nuevo valor
         originalRowDataCopy.value[index][field] = val;
     } catch (err) {
         console.error('Error updating travel');
@@ -269,6 +287,7 @@ const navigateToTravelId = (id) => {
 };
 
 const stopEventPropagation = (event, col) => {
+    // Detener la propagación del evento de los siguientes elementos para evitar el click sobre la row que dispararía  la función navigateToTravelId
     if (!['ref', 'id', 'cargoSupplierNickname', 'kg'].includes(col.name)) return;
     event.preventDefault();
     event.stopPropagation();
@@ -283,17 +302,16 @@ onMounted(async () => {
     landedTo.value.setDate(landedTo.value.getDate() + 7);
     landedTo.value.setHours(23, 59, 59, 59);
     await getData();
-
-    // el objetivo de esto es guardar una copia de los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
-    originalRowDataCopy.value = JSON.parse(JSON.stringify(rows.value));
 });
 
+// Handler del evento @dragstart (inicio del drag) y guarda información inicial
 const handleDragStart = (event, rowIndex, entryIndex) => {
     draggedRowIndex.value = rowIndex;
     entryRowIndex.value = entryIndex;
     event.dataTransfer.effectAllowed = 'move';
 };
 
+// Handler del evento @dragenter (cuando haces drag sobre une elemento y lo arrastras sobre un posible target de drop) y actualiza el targetIndex
 const handleDragEnter = (_, targetIndex) => {
     targetRowIndex.value = targetIndex;
 };
@@ -321,6 +339,13 @@ const moveRow = async (draggedRowIndex, targetRowIndex, entryIndex) => {
     }
 };
 
+// Handler de cuando haces un drop tanto dentro como fuera de la tabla para limpiar acciones y data
+const handleDragEnd = () => {
+    stopScroll();
+    cleanDragAndDropData();
+};
+
+// Handler del evento @drop (cuando soltas el elemento draggeado sobre un target)
 const handleDrop = () => {
     if (
         !draggedRowIndex.value &&
@@ -330,8 +355,7 @@ const handleDrop = () => {
     )
         return;
     moveRow(draggedRowIndex.value, targetRowIndex.value, entryRowIndex.value);
-    stopScroll();
-    cleanDragAndDropData();
+    handleDragEnd();
 };
 
 const cleanDragAndDropData = () => {
@@ -344,6 +368,7 @@ const cleanDragAndDropData = () => {
 const scrollInterval = ref(null);
 
 const startScroll = (direction) => {
+    // Iniciar el scroll en la dirección especificada
     if (!scrollInterval.value) {
         scrollInterval.value = requestAnimationFrame(() => scroll(direction));
     }
@@ -357,12 +382,14 @@ const stopScroll = () => {
 };
 
 const scroll = (direction) => {
-    const yOffset = direction === 'up' ? -2 : 2; // Ajusta la velocidad del scroll
+    // Controlar el desplazamiento en la dirección especificada
+    const yOffset = direction === 'up' ? -2 : 2;
     window.scrollBy(0, yOffset);
 
     const windowHeight = window.innerHeight;
     const documentHeight = document.body.offsetHeight;
 
+    // Verificar si se alcanzaron los límites de la ventana para detener el desplazamiento
     if (
         (direction === 'up' && window.scrollY > 0) ||
         (direction === 'down' && windowHeight + window.scrollY < documentHeight)
@@ -373,9 +400,13 @@ const scroll = (direction) => {
     }
 };
 
-const handleDrag = (event) => {
+// Handler del scroll mientras se hace el drag de una row
+const handleDragScroll = (event) => {
+    // Obtener la posición y dimensiones del cursor
     const y = event.clientY;
     const windowHeight = window.innerHeight;
+
+    // Verificar si el cursor está cerca del borde superior o inferior de la ventana
     const nearTop = y < 150;
     const nearBottom = y > windowHeight - 100;
 
@@ -427,8 +458,8 @@ const handleDrag = (event) => {
             :pagination="{ rowsPerPage: 0 }"
             class="full-width"
             table-style="user-select: none;"
-            @drag="handleDrag($event)"
-            @dragend="handleDrop($event)"
+            @drag="handleDragScroll($event)"
+            @dragend="handleDragEnd($event)"
             :separator="!targetRowIndex && targetRowIndex !== 0 ? 'horizontal' : 'none'"
         >
             <template #body="props">
@@ -548,7 +579,7 @@ const handleDrag = (event) => {
 </template>
 
 <style scoped lang="scss">
-::v-deep .q-table {
+:deep(.q-table) {
     border-collapse: collapse;
 }