Fixed toggle controls on added content permission role rows

diff --git a/resources/js/components/entity-permissions.js b/resources/js/components/entity-permissions.js
index 917dcc72de016b7716bdd2c290ea2a989cb5407d..c67c85f19a699ef43fad99c7d300b6f4b8851b58 100644 (file)
--- a/resources/js/components/entity-permissions.js
+++ b/resources/js/components/entity-permissions.js
@@ -1,6 +1,8 @@
 /**
  * @extends {Component}
  */
+import {htmlToDom} from "../services/dom";
+
 class EntityPermissions {
 
     setup() {
@@ -53,11 +55,8 @@ class EntityPermissions {
 
         // Get and insert new row
         const resp = await window.$http.get(`/permissions/form-row/${this.entityType}/${roleId}`);
-        const wrap = document.createElement('div');
-        wrap.innerHTML = resp.data;
-        const row = wrap.children[0];
+        const row = htmlToDom(resp.data);
         this.roleContainer.append(row);
-        window.components.init(row);
 
         this.roleSelect.disabled = false;
     }

diff --git a/resources/js/services/dom.js b/resources/js/services/dom.js
index 7a7b2c9bcfce6ce3ae0daf532a9d4be05f8229b7..eb5f6a8530d512c6a4a965baa57d2b24a14c7d51 100644 (file)
--- a/resources/js/services/dom.js
+++ b/resources/js/services/dom.js
@@ -117,4 +117,17 @@ export function removeLoading(element) {
     for (const el of loadingEls) {
         el.remove();
     }
+}
+
+/**
+ * Convert the given html data into a live DOM element.
+ * Initiates any components defined in the data.
+ * @param {String} html
+ * @returns {Element}
+ */
+export function htmlToDom(html) {
+    const wrap = document.createElement('div');
+    wrap.innerHTML = html;
+    window.components.init(wrap);
+    return wrap.children[0];
 }
\ No newline at end of file