use ts

Author: NikitaNaumenko

spec/index.test.ts

@@ -12,19 +12,32 @@ describe('#nestedForm', (): void => {
 
     document.body.innerHTML = `
       <form data-controller="nested-form">
-        <template data-nested-form-target="template">
+        <template data-nested-form-target="template" data-model-template="todo">
           <div class="nested-form-wrapper" data-new-record="true">
             <label for="NEW_RECORD">New todo</label>
           </div>
         </template>
 
+        <template data-nested-form-target="template" data-model-template="note">
+          <div class="nested-form-wrapper" data-new-record="true">
+            <label for="NEW_RECORD">New note</label>
+          </div>
+        </template>
+
         <div>
           <label>Your todo</label>
         </div>
 
-        <div data-nested-form-target="target"></div>
+       <div id="nested-form-target-todo" data-nested-form-target="target" data-model-target="todo"></div>
+       <button type="button" data-action="nested-form#add" data-model="todo" class="nested-form-action">Add todo</button>
+
+        <div>
+          <label>Your note</label>
+        </div>
+
+       <div id="nested-form-target-note" data-nested-form-target="target" data-model-target="note"></div>
 
-        <button type="button" data-action="nested-form#add">Add todo</button>
+       <button type="button" data-action="nested-form#add" data-model="note" class="nested-form-action">Add note</button>
       </form>
     `
   })
@@ -39,4 +52,19 @@ describe('#nestedForm', (): void => {
 
     expect(target.previousElementSibling.innerHTML).toContain('New todo')
   })
+
+  it('should toggle with many nested forms', (): void => {
+    const todoButton: HTMLButtonElement = document.querySelector('[data-model="todo"]')
+    const todoTarget: HTMLElement = document.querySelector('#nested-form-target-todo')
+    const noteButton: HTMLButtonElement = document.querySelector('[data-model="note"]')
+    const noteTarget: HTMLElement = document.querySelector('#nested-form-target-note')
+
+    expect(todoTarget.previousElementSibling.innerHTML).toContain('Your todo')
+    todoButton.click()
+    expect(todoTarget.previousElementSibling.innerHTML).toContain('New todo')
+
+    expect(noteTarget.previousElementSibling.innerHTML).toContain('Your note')
+    noteButton.click()
+    expect(noteTarget.previousElementSibling.innerHTML).toContain('New note')
+  })
 })

src/index.ts

@@ -5,6 +5,10 @@ export default class extends Controller {
   templateTarget: HTMLElement
   wrapperSelectorValue: string
   wrapperSelector: string
+  actionSelector: string
+  actionSelectorValue: string
+  templateTargets: HTMLElement[]
+  targetTargets: HTMLElement[]
 
   static targets = ['target', 'template']
   static values = {
@@ -20,8 +24,25 @@ export default class extends Controller {
   add (e: Event) {
     e.preventDefault()
 
-    const content: string = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
-    this.targetTarget.insertAdjacentHTML('beforebegin', content)
+    // @ts-ignore
+    const actionSelector: HTMLElement = e.target.closest(this.actionSelector)
+    const insertHTML = (target: HTMLElement, content: string) => {
+      target.insertAdjacentHTML('beforebegin', content)
+    }
+
+    const stringifyTimestamp: string = new Date().getTime().toString()
+
+    if (actionSelector) {
+      const model = actionSelector.dataset.model
+      const templateTarget = this.templateTargets.find(el => el.dataset.modelTemplate === model)
+      const target = this.targetTargets.find(el => el.dataset.modelTarget === model)
+      const content = templateTarget.innerHTML.replace(/NEW_RECORD/g, stringifyTimestamp)
+      insertHTML(target, content)
+    } else {
+      const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, stringifyTimestamp)
+      this.targetTarget.insertAdjacentHTML('beforebegin', content)
+      insertHTML(this.targetTarget, content)
+    }
   }
 
   remove (e: Event): void {