Improved user-permissions adding ux

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

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) {

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');

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.',
 

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>