Add drag and drop do Travel Extra Community table

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,18 +426,31 @@ onMounted(async () => {
                         </component>
                     </QTd>
                 </QTr>
+
                 <QTr
-                    v-for="entry in props.row.entries"
+                    v-for="(entry, index) in props.row.entries"
-                    :key="entry.id"
+                    :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,
+                    }"
                 >
+                    <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>
+                            <QBtn flat color="primary" dense>{{
+                                entry.supplierName
+                            }}</QBtn>
                             <SupplierDescriptorProxy :id="entry.supplierFk" />
                         </QTd>
                         <QTd></QTd>
@@ -402,12 +474,24 @@ onMounted(async () => {
                         <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