mirror of
https://github.com/dzeiocom/FormManager.git
synced 2025-04-23 03:12:14 +00:00
Updated FMRepeatInput.
too many changes to explain :D
This commit is contained in:
parent
835a2747e8
commit
a0da525b6d
@ -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)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user