MINOR: add BIMDataTable canDragOverRow props & logic (#283)

bimdata · Mar 29, 2023 · b0a19d4 · b0a19d4
1 parent e0eca9c
commit b0a19d4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue b/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue
@@ -35,13 +35,17 @@
             </th>
           </tr>
         </thead>
-        <tbody>
+        <tbody @dragleave="onDragleave">
           <tr
             v-for="{ key, data } of computedRows"
             :key="`body-row-${key}`"
             v-show="displayedRows.includes(key)"
             :style="{ height: `${rowHeight}px` }"
-            @drop="$emit('row-drop', { data, event: $event })"
+            @drop="onDrop(data, $event)"
+            @dragover="onDragover(key, data, $event)"
+            :class="{
+              'bimdata-table__row--drag-overed': dragOveredRowKey === key,
+            }"
           >
             <td class="cell-checkbox" v-if="selectable">
               <BIMDataCheckbox
@@ -164,6 +168,10 @@ export default {
       type: String,
       default: "auto",
     },
+    canDragOverRow: {
+      type: Function,
+      default: () => false,
+    },
   },
   emits: [
     "update:selection",
@@ -249,6 +257,22 @@ export default {
       { immediate: true }
     );
 
+    const onDrop = (data, event) => {
+      if (props.canDragOverRow(data)) {
+        emit("row-drop", { data, event });
+      }
+    };
+    const dragOveredRowKey = ref(null);
+    const onDragover = (key, data, event) => {
+      if (props.canDragOverRow(data)) {
+        event.preventDefault();
+        dragOveredRowKey.value = key;
+      }
+    };
+    const onDragleave = () => {
+      dragOveredRowKey.value = null;
+    };
+
     return {
       // References
       computedRows,
@@ -257,7 +281,11 @@ export default {
       pageIndexEnd,
       pageIndexStart,
       rowSelection,
+      dragOveredRowKey,
       // Methods
+      onDrop,
+      onDragover,
+      onDragleave,
       toggleAll,
       toggleRow,
     };

diff --git a/src/web/views/Components/Table/props-data.js b/src/web/views/Components/Table/props-data.js
@@ -96,4 +96,12 @@ export default [
     "Use this prop to set table-layout css property (e.g. 'auto' or 'fixed').",
     "",
   ],
+  [
+    "canDragOverRow",
+    "Function",
+    "",
+    "row => false",
+    "If returns true, a 'bimdata-table__row--drag-overed' class is added on the row on drag over, and the `row-drop` event is emitted on drop.",
+    "",
+  ],
 ];