roles quick search

client/res/templates/role/table-edit.tpl

@@ -1,4 +1,15 @@
 
+<div class="button-container">
+    <input
+        type="text"
+        maxlength="64"
+        placeholder="{{translate 'Search'}}"
+        data-name="quick-search"
+        class="form-control"
+        spellcheck="false"
+    >
+</div>
+
 <div class="panel panel-default">
     <div class="panel-heading">
         <h4 class="panel-title">{{translate 'Scope Level' scope='Role'}}</h4>
@@ -14,9 +25,12 @@
                     {{/each}}
                 </tr>
                 {{#each tableDataList}}
-                <tr>
-                    <td><b>{{translate name category='scopeNamesPlural'}}</b></td>
-
+                <tr data-name="{{name}}" class="item-row">
+                    <td>
+                        <div class="detail-field-container">
+                            <b>{{translate name category='scopeNamesPlural'}}</b>
+                        </div>
+                    </td>
                     <td>
                         <select
                             name="{{name}}"
@@ -77,8 +91,12 @@
                     <th style="width: 33%"></th>
                 </tr>
                 {{#each fieldTableDataList}}
-                    <tr>
-                        <td><b>{{translate name category='scopeNamesPlural'}}</b></td>
+                    <tr data-name="{{name}}" class="item-row">
+                        <td>
+                            <div class="detail-field-container">
+                                <b>{{translate name category='scopeNamesPlural'}}</b>
+                            </div>
+                        </td>
                         <td><button
                             type="button"
                             class="btn btn-link btn-sm action"
@@ -89,9 +107,13 @@
                         <td colspan="3"></td>
                     </tr>
                     {{#each list}}
-                    <tr>
+                    <tr data-name="{{../name}}" class="item-row">
                         <td></td>
-                        <td><b>{{translate name category='fields' scope=../name}}</b></td>
+                        <td>
+                            <div class="detail-field-container">
+                                <b>{{translate name category='fields' scope=../name}}</b>
+                            </div>
+                        </td>
                         {{#each list}}
                         <td>
                             <select

client/res/templates/role/table.tpl

@@ -1,4 +1,15 @@
 
+<div class="button-container negate-no-side-margin">
+    <input
+        type="text"
+        maxlength="64"
+        placeholder="{{translate 'Search'}}"
+        data-name="quick-search"
+        class="form-control"
+        spellcheck="false"
+    >
+</div>
+
 <div class="panel panel-default">
     <div class="panel-heading">
         <h4 class="panel-title">{{translate 'Scope Level' scope='Role'}}</h4>
@@ -14,7 +25,7 @@
                     {{/each}}
                 </tr>
                 {{#each tableDataList}}
-                <tr>
+                <tr data-name="{{name}}" class="item-row">
                     <td><b>{{translate name category='scopeNamesPlural'}}</b></td>
 
                     <td>
@@ -71,14 +82,14 @@
                 </tr>
                 {{#each fieldTableDataList}}
                     {{#if list.length}}
-                    <tr>
+                    <tr data-name="{{name}}" class="item-row">
                         <td><b>{{translate name category='scopeNamesPlural'}}</b></td>
                         <td></td>
                         <td colspan="3"></td>
                     </tr>
                     {{/if}}
                     {{#each list}}
-                    <tr>
+                    <tr data-name="{{../name}}" class="item-row">
                         <td></td>
                         <td><b>{{translate name category='fields' scope=../name}}</b></td>
                         {{#each list}}

client/src/views/role/record/table.js

@@ -97,6 +97,10 @@ class RoleRecordTableView extends View {
     }
 
     events = {
+        /** @this FieldManagerListView */
+        'keyup input[data-name="quick-search"]': function (e) {
+            this.processQuickSearch(e.currentTarget.value);
+        },
         /** @this RoleRecordTableView */
         'click .action[data-action="addField"]': function (e) {
             const scope = $(e.currentTarget).data().scope;
@@ -282,7 +286,7 @@ class RoleRecordTableView extends View {
             this.setupData();
 
             if (this.isRendered()) {
-                this.reRender();
+                this.reRenderPreserveSearch();
             }
         });
 
@@ -478,6 +482,8 @@ class RoleRecordTableView extends View {
     }
 
     afterRender() {
+        this.$quickSearch = this.$el.find('input[data-name="quick-search"]');
+
         if (this.mode === 'edit') {
             this.scopeList.forEach(scope => {
                 const $read = this.$el.find('select[name="' + scope + '-read"]');
@@ -666,7 +672,9 @@ class RoleRecordTableView extends View {
                     });
                 });
 
-                this.reRender();
+                const searchText = this.$quickSearch.val();
+
+                this.reRenderPreserveSearch();
             });
         });
     }
@@ -690,11 +698,21 @@ class RoleRecordTableView extends View {
             if (~index) {
                 scopeData.list.splice(index, 1);
 
-                this.reRender();
+                this.reRenderPreserveSearch();
             }
         });
     }
 
+    reRenderPreserveSearch() {
+        const searchText = this.$quickSearch.val();
+
+        this.reRender()
+            .then(() => {
+                this.$quickSearch.val(searchText);
+                this.processQuickSearch(searchText);
+            });
+    }
+
     initStickyHeader(type) {
         const $sticky = this.$el.find('.sticky-header-' + type);
         const $window = $(window);
@@ -801,6 +819,72 @@ class RoleRecordTableView extends View {
             $o.css('color', color);
         });
     }
+
+    processQuickSearch(text) {
+        text = text.trim();
+
+        //const $noData = this.$noData;
+
+        //$noData.addClass('hidden');
+
+        if (!text) {
+            this.$el.find('table tr.item-row').removeClass('hidden');
+
+            return;
+        }
+
+        const matchedList = [];
+
+        const lowerCaseText = text.toLowerCase();
+
+        this.scopeList.forEach(/** string */item => {
+            let matched = false;
+
+            const translation = this.getLanguage().translate(item, 'scopeNamesPlural');
+
+            if (
+                translation.toLowerCase().indexOf(lowerCaseText) === 0 ||
+                item.toLowerCase().indexOf(lowerCaseText) === 0
+            ) {
+                matched = true;
+            }
+
+            if (!matched) {
+                const wordList = translation.split(' ')
+                    .concat(translation.split(' '));
+
+                wordList.forEach((word) => {
+                    if (word.toLowerCase().indexOf(lowerCaseText) === 0) {
+                        matched = true;
+                    }
+                });
+            }
+
+            if (matched) {
+                matchedList.push(item);
+            }
+        });
+
+        if (matchedList.length === 0) {
+            this.$el.find('table tr.item-row').addClass('hidden');
+
+            //$noData.removeClass('hidden');
+
+            return;
+        }
+
+        this.scopeList.forEach(/** string */item => {
+            const $row = this.$el.find(`table tr.item-row[data-name="${item}"]`);
+
+            if (!~matchedList.indexOf(item)) {
+                $row.addClass('hidden');
+
+                return;
+            }
+
+            $row.removeClass('hidden');
+        });
+    }
 }
 
 export default RoleRecordTableView;

client/src/views/user/modals/access.js

@@ -95,6 +95,7 @@ define('views/user/modals/access', ['views/modal'], function (Dep) {
                     fieldData: fieldTable,
                 },
                 final: true,
+                selector: '.user-access-table',
             });
 
             this.headerText = this.translate('Access');

frontend/less/espo/elements/modal.less

@@ -238,6 +238,11 @@
 .modal-body > .no-side-margin {
     margin-left: -@panel-padding;
     margin-right: -@panel-padding;
+
+    > .negate-no-side-margin {
+        margin-left: @panel-padding;
+        margin-right: @panel-padding;
+    }
 }
 
 .modal.in .modal.in {