From 1135860b5dec45e5f73f59fa8d1b378a0b0d70d1 Mon Sep 17 00:00:00 2001
From: Nikita Naumenko <naumenkoniki@gmail.com>
Date: Sat, 8 May 2021 09:42:26 +0300
Subject: [PATCH 1/2] Add support many nested forms

---
 index.html   | 135 +++++++++++++++++++++++++++++++++++++++++++++++++++
 src/index.ts |   4 +-
 2 files changed, 138 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 9efc983..55f9691 100644
--- a/index.html
+++ b/index.html
@@ -202,6 +202,141 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
       </section>
     </div>
 
+    <div class="relative h-full max-w-5xl mx-auto px-4">
+      <section class="mt-16">
+        <form data-controller="nested-form">
+          <template data-nested-form-target="template" data-model-template="todo">
+            <div class="mt-4 nested-form-wrapper" data-new-record="true">
+              <label for="NEW_RECORD" class="block text-sm font-medium leading-5 text-gray-700">New todo</label>
+              <div class="mt-1 flex relative rounded-md shadow-sm">
+                <input
+                  id="NEW_RECORD"
+                  name="user[todos_attributes][NEW_RECORD][description]"
+                  class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                  placeholder="Your todo"
+                />
+
+                <button
+                  class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
+                  type="button"
+                  data-action="nested-form#remove"
+                  title="Remove todo"
+                >
+                  X
+                </button>
+
+                <input type="hidden" name="user[todos_attributes][NEW_RECORD][_destroy]" />
+              </div>
+            </div>
+          </template>
+
+          <template data-nested-form-target="template" data-model-template="note">
+            <div class="mt-4 nested-form-wrapper" data-new-record="true">
+              <label for="NEW_RECORD" class="block text-sm font-medium leading-5 text-gray-700">New note</label>
+              <div class="mt-1 flex relative rounded-md shadow-sm">
+                <input
+                  id="NEW_RECORD"
+                  type="text"
+                  name="user[note_attributes][NEW_RECORD][description]"
+                  class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                  placeholder="Your note"
+                />
+
+                <button
+                  class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
+                  type="button"
+                  data-action="nested-form#remove"
+                  title="Remove note"
+                >
+                  X
+                </button>
+
+                <input type="hidden" name="user[note_attributes][NEW_RECORD][_destroy]" />
+              </div>
+            </div>
+          </template>
+
+          <div class="mt-4 nested-form-wrapper" data-new-record="false">
+            <label for="todo-1" class="block text-sm font-medium leading-5 text-gray-700">Your todo</label>
+            <div class="mt-1 flex relative rounded-md shadow-sm">
+              <input
+                id="todo-1"
+                name="user[todos_attributes][0][description]"
+                class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                value="Pet the cat"
+              />
+
+              <button
+                class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
+                type="button"
+                data-action="nested-form#remove"
+                title="Remove todo"
+              >
+                X
+              </button>
+
+              <input type="hidden" name="user[todos_attributes][0][_destroy]" />
+            </div>
+          </div>
+
+          <div id="nested-form-target-todo" data-nested-form-target="target" data-model-target="todo"></div>
+
+          <button
+            id="nested-form-button-todo"
+            type="button"
+            data-action="nested-form#add"
+            data-model="todo"
+            class="mt-4 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow nested-form-action"
+          >
+            Add todo
+          </button>
+
+          <div class="mt-4 nested-form-wrapper" data-new-record="false">
+            <label for="todo-1" class="block text-sm font-medium leading-5 text-gray-700">Your note</label>
+            <div class="mt-1 flex relative rounded-md shadow-sm">
+              <input
+                id="note-1"
+                type="text"
+                name="user[notes_attributes][0][description]"
+                class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                value="Buy fancy food for cat"
+              />
+
+              <button
+                class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
+                type="button"
+                data-action="nested-form#remove"
+                title="Remove note"
+              >
+                X
+              </button>
+
+              <input type="hidden" name="user[notes_attributes][0][_destroy]" />
+            </div>
+          </div>
+
+          <div id="nested-form-target-note" data-nested-form-target="target" data-model-target="note"></div>
+
+          <button
+            id="nested-form-button-note"
+            type="button"
+            data-action="nested-form#add"
+            data-model="note"
+            class="mt-4 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow nested-form-action"
+          >
+            Add note
+          </button>
+
+          <button
+            type="submit"
+            class="mt-4 bg-indigo-600 hover:bg-indigo-400 text-white font-semibold py-2 px-4 border rounded shadow"
+          >
+            Save
+          </button>
+        </form>
+      </section>
+    </div>
+
     <!-- This example requires Tailwind CSS v2.0+ -->
     <footer class="bg-white">
       <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
diff --git a/src/index.ts b/src/index.ts
index 0f19902..fe1fcdc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,11 +8,13 @@ export default class extends Controller {
 
   static targets = ['target', 'template']
   static values = {
-    wrapperSelector: String
+    wrapperSelector: String,
+    actionSelector: String
   }
 
   initialize (): void {
     this.wrapperSelector = this.wrapperSelectorValue || '.nested-form-wrapper'
+    this.actionSelector = this.actionSelectorValue || '.nested-form-action'
   }
 
   add (e: Event) {

From 11f2406c6da974a36bdf5abd893393075b1e19b5 Mon Sep 17 00:00:00 2001
From: Nikita Naumenko <naumenkoniki@gmail.com>
Date: Sun, 11 Jul 2021 16:20:04 +0300
Subject: [PATCH 2/2] use ts

---
 spec/index.test.ts | 34 +++++++++++++++++++++++++++++++---
 src/index.ts       | 25 +++++++++++++++++++++++--
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/spec/index.test.ts b/spec/index.test.ts
index f4084ec..1c94cef 100644
--- a/spec/index.test.ts
+++ b/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')
+  })
 })
diff --git a/src/index.ts b/src/index.ts
index fe1fcdc..aa3397c 100644
--- a/src/index.ts
+++ b/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 {