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] 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;
     }
 }