A powerfull Form Manager https://dze.io
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

74 lines
1.8 KiB

  1. import { FMAssignInterface } from './../Interfaces';
  2. import FormManager from "../FormManager"
  3. import FMInput from "../FMInput"
  4. /**
  5. *
  6. * @class FMRepeatInput
  7. * @extends {FMInput}
  8. */
  9. export default class FMRepeatInput extends FMInput {
  10. constructor(element: HTMLDivElement, form: FormManager) {
  11. super(element, form)
  12. //fetch Template
  13. let template: HTMLElement = element.querySelector(".fmr-template")
  14. template.style.display = "none"
  15. //fetch add button
  16. let addBtn = element.querySelector(".fmr-add")
  17. addBtn.addEventListener("click", () => {
  18. let node = element.insertBefore(template.cloneNode(true), addBtn) as HTMLElement
  19. node.classList.remove("fmr-template")
  20. node.classList.add("fmr-element")
  21. node.style.display = ""
  22. let del = node.querySelector(".fmr-del")
  23. del.addEventListener("click", () => {
  24. node.remove()
  25. })
  26. })
  27. }
  28. loopInputs(): FMInput[][] {
  29. let inputs: FMInput[][] = []
  30. this.element.querySelectorAll(".fmr-element").forEach((pouet: HTMLElement) => {
  31. let subElement: FMInput[] = []
  32. pouet.querySelectorAll("[data-input]").forEach((localElement: HTMLElement) => {
  33. subElement.push(this.form.getInit(localElement))
  34. });
  35. inputs.push(subElement)
  36. })
  37. return inputs
  38. }
  39. setValue(value: any[][]) {
  40. for (const index in value) {
  41. if (value.hasOwnProperty(index)) {
  42. const element = value[index];
  43. console.log(index,element, value)
  44. }
  45. }
  46. }
  47. getValue(): any[][] {
  48. let values: any[][] = []
  49. let elements = this.loopInputs()
  50. for (const line of elements) {
  51. let lineArray: any[] = []
  52. for (const col of line) {
  53. lineArray.push(col.getValue())
  54. }
  55. values.push(lineArray)
  56. }
  57. return values
  58. }
  59. }
  60. export const FMRepeatInputAssignment: FMAssignInterface = {
  61. input: FMRepeatInput,
  62. classes: "fm-repeat",
  63. tagName: "div"
  64. }