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 189b859b7119c58c3db7d3ce0c1ba6c1eed9ad10..35c2d25ef101dcfe433f6688cdbc20bbdbe63a4f 100644 (file)
--- 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 d4d88a633c115ab06a9bd718e32ca41090efc109..b383d7a6ff18966ccf1a9e4b0e05c978fbfd4899 100644 (file)
--- 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 c74dcc90775219416dfe1e56cd0c2d9c577c6f4d..2e044b3b53f8689f6214a1191286bfdae03ef016 100644 (file)
--- 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 bb9f204a09d85062425eb837d6620b2b17b192a7..579c5568b8eff5a0ad6392e06bcd6b047d717e4f 100644 (file)
--- 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>