From ae1f6adbdda412440e73ad6e4c583b59b88b969d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Agneray?= <francois.agneray@lam.fr>
Date: Tue, 16 Aug 2022 16:18:27 +0200
Subject: [PATCH] Fixed bug: Datatable draggable columns
---
.../result/datatable.component.scss | 6 +++-
.../components/result/datatable.component.ts | 31 ++++++++++++++-----
2 files changed, 29 insertions(+), 8 deletions(-)
diff --git a/client/src/app/instance/search/components/result/datatable.component.scss b/client/src/app/instance/search/components/result/datatable.component.scss
index 2894dff1..6c389ef5 100644
--- a/client/src/app/instance/search/components/result/datatable.component.scss
+++ b/client/src/app/instance/search/components/result/datatable.component.scss
@@ -12,7 +12,11 @@ table th:not(.select) {
cursor: move;
}
-.over {
+.over-left {
+ border-left: 3px dotted #666;
+}
+
+.over-right {
border-right: 3px dotted #666;
}
diff --git a/client/src/app/instance/search/components/result/datatable.component.ts b/client/src/app/instance/search/components/result/datatable.component.ts
index 46ca4651..d391ab1a 100644
--- a/client/src/app/instance/search/components/result/datatable.component.ts
+++ b/client/src/app/instance/search/components/result/datatable.component.ts
@@ -70,8 +70,9 @@ export class DatatableComponent implements OnInit, OnChanges {
const table = document.getElementById('datatable');
let dragSrcEl;
- let outputSrcId;
- let clonedOutputList;
+ let outputSrcId: number;
+ let clonedOutputList: number[];
+ let direction = '';
const updateOutputList = this.updateOutputList;
const getOutputList = () => [...this.outputList];
@@ -90,22 +91,40 @@ export class DatatableComponent implements OnInit, OnChanges {
function handleDragOver(e) {
e.preventDefault();
+
+ let rect = this.getBoundingClientRect();
+ let posisitionX = e.pageX;
+
+ let half = rect.x + (rect.width / 2);
+
+ if (posisitionX < half) {
+ this.classList.remove('over-right');
+ this.classList.add('over-left');
+ direction = 'left';
+ } else {
+ this.classList.remove('over-left');
+ this.classList.add('over-right');
+ direction = 'right';
+ }
+
return false;
}
function handleDragEnter(e) {
- this.classList.add('over');
+
}
function handleDragLeave(e) {
- this.classList.remove('over');
+ this.classList.remove('over-left');
+ this.classList.remove('over-right');
}
function handleDragEnd(e) {
this.style.opacity = '1';
items.forEach(function (item) {
- item.classList.remove('over');
+ item.classList.remove('over-left');
+ item.classList.remove('over-right');
});
}
@@ -118,8 +137,6 @@ export class DatatableComponent implements OnInit, OnChanges {
const index = clonedOutputList.indexOf(outputSrcId);
clonedOutputList.splice(index, 1);
- console.log(clonedOutputList);
-
// Add src attribute ID
for (let i = 0; i < items.length; i++) {
if (items[i] === this) {
--
GitLab