X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/d5de28c444e26360ad14b4b044046ccab4f2ec8d..refs/pull/3099/head:/resources/js/components/add-remove-rows.js

diff --git a/resources/js/components/add-remove-rows.js b/resources/js/components/add-remove-rows.js
index 81eeb43c4..9a5f019c5 100644
--- a/resources/js/components/add-remove-rows.js
+++ b/resources/js/components/add-remove-rows.js
@@ -1,4 +1,5 @@
 import {onChildEvent} from "../services/dom";
+import {uniqueId} from "../services/util";
 
 /**
  * AddRemoveRows
@@ -11,21 +12,43 @@ class AddRemoveRows {
         this.modelRow = this.$refs.model;
         this.addButton = this.$refs.add;
         this.removeSelector = this.$opts.removeSelector;
+        this.rowSelector = this.$opts.rowSelector;
         this.setupListeners();
     }
 
     setupListeners() {
-        this.addButton.addEventListener('click', e => {
-            const clone = this.modelRow.cloneNode(true);
-            clone.classList.remove('hidden');
-            this.modelRow.parentNode.insertBefore(clone, this.modelRow);
-        });
+        this.addButton.addEventListener('click', this.add.bind(this));
 
         onChildEvent(this.$el, this.removeSelector, 'click', (e) => {
-            const row = e.target.closest('tr');
+            const row = e.target.closest(this.rowSelector);
             row.remove();
         });
     }
+
+    // For external use
+    add() {
+        const clone = this.modelRow.cloneNode(true);
+        clone.classList.remove('hidden');
+        this.setClonedInputNames(clone);
+        this.modelRow.parentNode.insertBefore(clone, this.modelRow);
+        window.components.init(clone);
+    }
+
+    /**
+     * Update the HTML names of a clone to be unique if required.
+     * Names can use placeholder values. For exmaple, a model row
+     * may have name="tags[randrowid][name]".
+     * These are the available placeholder values:
+     * - randrowid - An random string ID, applied the same across the row.
+     * @param {HTMLElement} clone
+     */
+    setClonedInputNames(clone) {
+        const rowId = uniqueId();
+        const randRowIdElems = clone.querySelectorAll(`[name*="randrowid"]`);
+        for (const elem of randRowIdElems) {
+            elem.name = elem.name.split('randrowid').join(rowId);
+        }
+    }
 }
 
 export default AddRemoveRows;
\ No newline at end of file