Added Draggable attribute on ReapeatInput

Signed-off-by: Florian Bouillon <florian.bouillon@delta-wings.net>

src/modules/RepeatInput.ts

@@ -77,6 +77,48 @@ export default class RepeatInput extends DefaultInput {
 		let node = this.element.children.item(this.element.childElementCount-2) as HTMLElement
 		node.classList.add("fmr-element")
 		node.style.display = ""
+		if ('draggable' in this.element.dataset) {
+			node.draggable = true
+			node.addEventListener('dragstart', (ev) => {
+				ev.dataTransfer?.setData('text', JSON.stringify({index: getNodePosition(this.element, node), name: this.getName()}))
+			})
+			node.addEventListener('drop', (ev) => {
+				ev.preventDefault()
+
+				if (!ev.dataTransfer?.getData('text')) {
+					return
+				}
+
+				const transferData = JSON.parse(ev.dataTransfer.getData('text'))
+
+				if (transferData.name !== this.getName()) {
+					return
+				}
+
+				const otherItemPos = transferData.index
+				const currentItemPos = getNodePosition(this.element, node)
+
+				const val = this.getValue()
+				const item = val[otherItemPos]
+
+				// First Part slice
+				const firstPart = val.slice(undefined, currentItemPos)
+				const secondPart = val.slice(currentItemPos)
+
+				// Second part remove item
+				const frstpIndex = firstPart.indexOf(item)
+				const scndPIndex = secondPart.indexOf(item)
+				if (frstpIndex !== -1) {
+					firstPart.splice(frstpIndex, 1)
+				} else if (scndPIndex !== -1) {
+					secondPart.splice(scndPIndex, 1)
+				}
+
+				//third part merge all
+				this.form.setValue(this.getName(), firstPart.concat(item, ...secondPart))
+			})
+			node.addEventListener('dragover', (ev) => ev.preventDefault())
+		}
 
 		// loop through inputs ot init them
 		let sub: InputAbstract[] = [];
@@ -90,9 +132,11 @@ export default class RepeatInput extends DefaultInput {
 			}
 			sub.push(input)
 
+			const name = input.getName()
+
 			// if values is a named array
-			if (values != undefined && values[input.getName()] != undefined) {
-				input.setValue(values[input.getName()])
+			if (values !== undefined && typeof values === 'object' && name in values) {
+				input.setValue(values[name])
 				return
 			}
 
@@ -116,24 +160,22 @@ export default class RepeatInput extends DefaultInput {
 		//remove every elements
 		this.element.querySelectorAll(".fmr-element").forEach(el => {
 			el.remove()
-			this.elements = []
 		})
+		this.elements = []
 		//ef string finish function
 		if (typeof(value) == "string") return
 
 		//create each line
 		for (const indexStr in value) {
 			let index = parseInt(indexStr)
-			if (value.hasOwnProperty(index)) {
-				const el = value[index];
+			if (!Object.prototype.hasOwnProperty.call(value, index)) {
+				continue
+			}
+			const el = value[index];
 
-				if (this.element.querySelectorAll(".fmr-element").length <= index) {
-					//add element
-					if (!el) continue
-					this.addLine(el)
-					continue
-				}
-				// update element
+			if (this.element.querySelectorAll(".fmr-element").length <= index) {
+				this.addLine(el)
+				continue
 			}
 		}
 	}
@@ -146,7 +188,6 @@ export default class RepeatInput extends DefaultInput {
 			for (let i = 0; i < line.length; i++) {
 				const col = line[i];
 				if (!col.element.hasAttribute('data-ignore')) {
-					console.log(col)
 					realLine.push(col)
 				}
 			}
@@ -168,7 +209,6 @@ export default class RepeatInput extends DefaultInput {
 	}
 
 	public verify(): boolean {
-		console.log(this.elements.length)
 		if (this.element.hasAttribute('required') && this.elements.length === 0) {
 			return false
 		}
@@ -186,3 +226,16 @@ export default class RepeatInput extends DefaultInput {
 		tagName: "div"
 	}
 }
+
+function getNodePosition(parent: HTMLElement, node: HTMLElement) {
+	for (const index in parent.children) {
+		if (!Object.prototype.hasOwnProperty.call(parent.children, index)) {
+			continue
+		}
+		const child = parent.children[index];
+		if (child === node) {
+			return parseInt(index)
+		}
+	}
+	return 0
+}