Updated FMRepeatInput.

too many changes to explain :D
This commit is contained in:
Florian Bouillon 2019-10-08 17:38:11 +02:00
parent 835a2747e8
commit a0da525b6d
No known key found for this signature in database
GPG Key ID: B143FF27EF555D16

View File

@ -9,56 +9,128 @@ import FMInput from "../FMInput"
*/ */
export default class FMRepeatInput extends FMInput { export default class FMRepeatInput extends FMInput {
elements: FMInput[][] = []
private template: HTMLElement
private addBtn: HTMLElement
constructor(element: HTMLDivElement, form: FormManager) { constructor(element: HTMLDivElement, form: FormManager) {
super(element, form) super(element, form)
//fetch Template //fetch Template
let template: HTMLElement = element.querySelector(".fmr-template") this.template = element.querySelector(".fmr-template")
template.style.display = "none" this.template.style.display = "none"
//fetch add button //fetch add button
let addBtn = element.querySelector(".fmr-add") this.addBtn = element.querySelector(".fmr-add")
addBtn.addEventListener("click", () => { this.addBtn.addEventListener("click", () => {
let node = element.insertBefore(template.cloneNode(true), addBtn) as HTMLElement if (!this.addBtn.hasAttribute("disabled")) this.addLine()
})
//Observer to handle attributes changes
const observer = new MutationObserver((mutationList: any, observer: any) => {
for (let mutation of mutationList) {
if (mutation.type === 'attributes' && mutation.attributeName === "disabled") {
this.element.querySelectorAll(".fmr-add, .fmr-del").forEach((el: HTMLElement) => {
if (this.element.hasAttribute("disabled")) el.style.display = "none"
else el.style.display = ""
})
if (this.element.hasAttribute("disabled")) this.addBtn.setAttribute("disabled", "")
else this.addBtn.removeAttribute("disabled")
for (const iterator of this.elements) {
for (const i2 of iterator) {
if (this.element.hasAttribute("disabled")) {
i2.element.setAttribute("disabled", "")
continue
}
i2.element.removeAttribute("disabled")
}
}
}
}
})
observer.observe(this.element, {attributes: true})
}
addLine(values?: any[]|any) {
// the new line
let node = this.element.insertBefore(this.template.cloneNode(true), this.addBtn) as HTMLElement
node.classList.remove("fmr-template") node.classList.remove("fmr-template")
node.classList.add("fmr-element") node.classList.add("fmr-element")
node.style.display = "" node.style.display = ""
// loop through inputs ot init them
let sub: FMInput[] = []
node.querySelectorAll("[data-input]").forEach((el: HTMLElement) => {
let input = this.form.getInit(el)
if (this.element.hasAttribute("disabled")) {
input.element.disabled = true
}
sub.push(input)
// if values is a named array
if (values != undefined && values[input.getName()] != undefined) {
input.setValue(values[input.getName()])
}
// if value is a single string/number/etc
if (typeof(values) != "object" && values != undefined) {
input.setValue(values)
}
})
this.elements.push(sub)
// get the delete button
let del = node.querySelector(".fmr-del") let del = node.querySelector(".fmr-del")
del.addEventListener("click", () => { del.addEventListener("click", () => {
if (!del.hasAttribute("disabled")) {
let id = this.element.querySelectorAll(".fmr-element").length-1
this.elements.splice(id)
node.remove() node.remove()
}
}) })
})
} }
loopInputs(): FMInput[][] { setValue(value: any[][]|string) {
let inputs: FMInput[][] = [] //remove every elements
this.element.querySelectorAll(".fmr-element").forEach((pouet: HTMLElement) => { this.element.querySelectorAll(".fmr-element").forEach(el => {
let subElement: FMInput[] = [] el.remove()
pouet.querySelectorAll("[data-input]").forEach((localElement: HTMLElement) => { this.elements = []
subElement.push(this.form.getInit(localElement))
});
inputs.push(subElement)
}) })
return inputs //ef string finish function
} if (typeof(value) == "string") return
setValue(value: any[][]) { //create each line
for (const index in value) { for (const indexStr in value) {
let index = parseInt(indexStr)
if (value.hasOwnProperty(index)) { if (value.hasOwnProperty(index)) {
const element = value[index]; const el = value[index];
console.log(index,element, value)
if (this.element.querySelectorAll(".fmr-element").length <= index) {
//add element
if ((el as any) == "") continue
this.addLine(el)
continue
}
// update element
} }
} }
} }
getValue(): any[][] { getValue(): any[any] {
let values: any[][] = [] let values = []
let elements = this.loopInputs() for (const line of this.elements) {
for (const line of elements) { let lineArray: any = {}
let lineArray: any[] = [] //one element repeat
if (line.length == 1) {
for (const col of line) { for (const col of line) {
lineArray.push(col.getValue()) values.push(col.getValue())
}
continue
}
// multi elements repeat
for (const col of line) {
// if ()
lineArray[col.getName()] = col.getValue()
} }
values.push(lineArray) values.push(lineArray)
} }