From: Dan Brown <redacted>
Date: Sat, 10 Dec 2022 14:48:19 +0000 (+0000)
Subject: Improved user-permissions adding ux
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/93cbd3b8aacd52ba352899db41e859c363d1ef1b

Improved user-permissions adding ux

- Reset input after user selection.
- Corrected permission row title text for user rows.
---

diff --git a/resources/js/components/entity-permissions.js b/resources/js/components/entity-permissions.js
index 189b859b7..35c2d25ef 100644
--- a/resources/js/components/entity-permissions.js
+++ b/resources/js/components/entity-permissions.js
@@ -86,6 +86,10 @@ export class EntityPermissions extends Component {
 
         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) {
diff --git a/resources/js/components/user-select.js b/resources/js/components/user-select.js
index d4d88a633..b383d7a6f 100644
--- a/resources/js/components/user-select.js
+++ b/resources/js/components/user-select.js
@@ -8,6 +8,9 @@ export class UserSelect extends Component {
         this.input = this.$refs.input;
         this.userInfoContainer = this.$refs.userInfo;
 
+        this.initialValue = this.input.value;
+        this.initialContent = this.userInfoContainer.innerHTML;
+
         onChildEvent(this.container, 'a.dropdown-search-item', 'click', this.selectUser.bind(this));
     }
 
@@ -19,6 +22,13 @@ export class UserSelect extends Component {
         this.hide();
     }
 
+    reset() {
+        this.input.value = this.initialValue;
+        this.userInfoContainer.innerHTML = this.initialContent;
+        this.input.dispatchEvent(new Event('change', {bubbles: true}));
+        this.hide();
+    }
+
     hide() {
         /** @var {Dropdown} **/
         const dropdown = window.$components.firstOnElement(this.container, 'dropdown');
diff --git a/resources/lang/en/common.php b/resources/lang/en/common.php
index c74dcc907..2e044b3b5 100644
--- a/resources/lang/en/common.php
+++ b/resources/lang/en/common.php
@@ -18,6 +18,7 @@ return [
     'name' => 'Name',
     'description' => 'Description',
     'role' => 'Role',
+    'user' => 'User',
     'cover_image' => 'Cover image',
     'cover_image_description' => 'This image should be approx 440x250px.',
 
diff --git a/resources/views/form/entity-permissions-row.blade.php b/resources/views/form/entity-permissions-row.blade.php
index bb9f204a0..579c5568b 100644
--- a/resources/views/form/entity-permissions-row.blade.php
+++ b/resources/views/form/entity-permissions-row.blade.php
@@ -10,7 +10,7 @@ $inheriting - Boolean if the current row should be marked as inheriting default
 
 <div component="permissions-table" class="item-list-row flex-container-row justify-space-between wrap">
     <div class="gap-x-m flex-container-row items-center px-l py-m flex">
-        <div class="text-large" title="{{  $modelType === 'fallback' ? trans('entities.permissions_role_everyone_else') : trans('common.role') }}">
+        <div class="text-large" title="{{  $modelType === 'fallback' ? trans('entities.permissions_role_everyone_else') : ($modelType === 'role' ? trans('common.role') : trans('common.user')) }}">
             @icon($modelType === 'fallback' ? 'groups' : ($modelType === 'role' ? 'role' : 'user'))
         </div>
         <span>