Browse Source

Updated FMRepeatInput.

too many changes to explain :D
tags/0.2.0
Florian Bouillon 2 months ago
parent
commit
a0da525b6d
Signed by: Avior <florian.bouillon@delta-wings.net> GPG Key ID: B143FF27EF555D16
1 changed files with 103 additions and 31 deletions
  1. +103
    -31
      modules/FMRepeatInput.ts

+ 103
- 31
modules/FMRepeatInput.ts View File

@@ -9,56 +9,128 @@ import FMInput from "../FMInput"
*/
export default class FMRepeatInput extends FMInput {

elements: FMInput[][] = []

private template: HTMLElement

private addBtn: HTMLElement

constructor(element: HTMLDivElement, form: FormManager) {
super(element, form)

//fetch Template
let template: HTMLElement = element.querySelector(".fmr-template")
template.style.display = "none"
this.template = element.querySelector(".fmr-template")
this.template.style.display = "none"

//fetch add button
let addBtn = element.querySelector(".fmr-add")
addBtn.addEventListener("click", () => {
let node = element.insertBefore(template.cloneNode(true), addBtn) as HTMLElement
node.classList.remove("fmr-template")
node.classList.add("fmr-element")
node.style.display = ""
let del = node.querySelector(".fmr-del")
del.addEventListener("click", () => {
node.remove()
})
this.addBtn = element.querySelector(".fmr-add")
this.addBtn.addEventListener("click", () => {
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})
}

loopInputs(): FMInput[][] {
let inputs: FMInput[][] = []
this.element.querySelectorAll(".fmr-element").forEach((pouet: HTMLElement) => {
let subElement: FMInput[] = []
pouet.querySelectorAll("[data-input]").forEach((localElement: HTMLElement) => {
subElement.push(this.form.getInit(localElement))
});
inputs.push(subElement)
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.add("fmr-element")
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")
del.addEventListener("click", () => {
if (!del.hasAttribute("disabled")) {
let id = this.element.querySelectorAll(".fmr-element").length-1
this.elements.splice(id)
node.remove()
}
})
return inputs
}

setValue(value: any[][]) {
for (const index in value) {
setValue(value: any[][]|string) {
//remove every elements
this.element.querySelectorAll(".fmr-element").forEach(el => {
el.remove()
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 element = value[index];
console.log(index,element, value)
const el = value[index];

if (this.element.querySelectorAll(".fmr-element").length <= index) {
//add element
if ((el as any) == "") continue
this.addLine(el)
continue
}
// update element
}
}
}

getValue(): any[][] {
let values: any[][] = []
let elements = this.loopInputs()
for (const line of elements) {
let lineArray: any[] = []
getValue(): any[any] {
let values = []
for (const line of this.elements) {
let lineArray: any = {}
//one element repeat
if (line.length == 1) {
for (const col of line) {
values.push(col.getValue())
}
continue
}
// multi elements repeat
for (const col of line) {
lineArray.push(col.getValue())
// if ()
lineArray[col.getName()] = col.getValue()
}
values.push(lineArray)
}


Loading…
Cancel
Save