X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/b37e84dc101e8ca5c80bcd731adb9cc19b9e08ab..refs/pull/3908/head:/resources/js/components/entity-permissions.js

diff --git a/resources/js/components/entity-permissions.js b/resources/js/components/entity-permissions.js
index d4a616ff1..61ab98a98 100644
--- a/resources/js/components/entity-permissions.js
+++ b/resources/js/components/entity-permissions.js
@@ -10,6 +10,8 @@ export class EntityPermissions extends Component {
         this.everyoneInheritToggle = this.$refs.everyoneInherit;
         this.roleSelect = this.$refs.roleSelect;
         this.roleContainer = this.$refs.roleContainer;
+        this.userContainer = this.$refs.userContainer;
+        this.userSelectContainer = this.$refs.userSelectContainer;
 
         this.setupListeners();
     }
@@ -18,7 +20,7 @@ export class EntityPermissions extends Component {
         // "Everyone Else" inherit toggle
         this.everyoneInheritToggle.addEventListener('change', event => {
             const inherit = event.target.checked;
-            const permissions = document.querySelectorAll('input[name^="permissions[0]["]');
+            const permissions = document.querySelectorAll('input[name^="permissions[fallback]"]');
             for (const permission of permissions) {
                 permission.disabled = inherit;
                 permission.checked = false;
@@ -28,7 +30,7 @@ export class EntityPermissions extends Component {
         // Remove role row button click
         this.container.addEventListener('click', event => {
             const button = event.target.closest('button');
-            if (button && button.dataset.roleId) {
+            if (button && button.dataset.modelType) {
                 this.removeRowOnButtonClick(button)
             }
         });
@@ -40,6 +42,14 @@ export class EntityPermissions extends Component {
                 this.addRoleRow(roleId);
             }
         });
+
+        // User select change
+        this.userSelectContainer.querySelector('input[name="user_select"]').addEventListener('change', event => {
+            const userId = event.target.value;
+            if (userId) {
+                this.addUserRow(userId);
+            }
+        });
     }
 
     async addRoleRow(roleId) {
@@ -52,23 +62,50 @@ export class EntityPermissions extends Component {
         }
 
         // Get and insert new row
-        const resp = await window.$http.get(`/permissions/form-row/${this.entityType}/${roleId}`);
+        const resp = await window.$http.get(`/permissions/role-form-row/${this.entityType}/${roleId}`);
         const row = htmlToDom(resp.data);
         this.roleContainer.append(row);
 
         this.roleSelect.disabled = false;
     }
 
+    async addUserRow(userId) {
+        const exists = this.userContainer.querySelector(`[name^="permissions[user][${userId}]"]`) !== null;
+        if (exists) {
+            return;
+        }
+
+        const toggle = this.userSelectContainer.querySelector('.dropdown-search-toggle-select');
+        toggle.classList.add('disabled');
+        this.userContainer.style.pointerEvents = 'none';
+
+        // Get and insert new row
+        const resp = await window.$http.get(`/permissions/user-form-row/${this.entityType}/${userId}`);
+        const row = htmlToDom(resp.data);
+        this.userContainer.append(row);
+
+        toggle.classList.remove('disabled');
+        this.userContainer.style.pointerEvents = null;
+
+        /** @var {UserSelect} **/
+        const userSelect = window.$components.firstOnElement(this.userSelectContainer.querySelector('.dropdown-search'), 'user-select');
+        userSelect.reset();
+    }
+
     removeRowOnButtonClick(button) {
         const row = button.closest('.item-list-row');
-        const roleId = button.dataset.roleId;
-        const roleName = button.dataset.roleName;
+        const modelId = button.dataset.modelId;
+        const modelName = button.dataset.modelName;
+        const modelType = button.dataset.modelType;
 
         const option = document.createElement('option');
-        option.value = roleId;
-        option.textContent = roleName;
+        option.value = modelId;
+        option.textContent = modelName;
+
+        if (modelType === 'role') {
+            this.roleSelect.append(option);
+        }
 
-        this.roleSelect.append(option);
         row.remove();
     }