improve role table ui

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

@@ -25,7 +25,7 @@
                         {{#each ../list}}
                             <td>
                                 {{#if levelList}}
-                                <select name="{{name}}" class="form-control" data-scope="{{../../name}}"{{#ifNotEqual ../../access 'enabled'}} disabled{{/ifNotEqual}}>
+                                <select name="{{name}}" class="form-control{{#ifNotEqual ../../../access 'enabled'}} hidden{{/ifNotEqual}}" data-scope="{{../../name}}"{{#ifNotEqual ../../access 'enabled'}} disabled{{/ifNotEqual}}>
                                 {{options levelList level field='levelList' scope='Role'}}
                                 </select>
                                 {{/if}}

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

@@ -37,16 +37,7 @@ Espo.define('views/role/record/edit', 'views/record/edit', function (Dep) {
         isWide: true,
 
         events: _.extend({
-            'change select[data-type="access"]': function (e) {
-                var scope = $(e.currentTarget).attr('name');
-                var $dropdowns = this.$el.find('select[data-scope="' + scope + '"]');
 
-                if ($(e.currentTarget).val() == 'enabled') {
-                    $dropdowns.removeAttr('disabled');
-                } else {
-                    $dropdowns.attr('disabled', 'disabled');
-                }
-            }
         }, Dep.prototype.events),
 
         fetch: function () {

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

@@ -106,6 +106,23 @@ Espo.define('views/role/record/table', 'view', function (Dep) {
                 var scope = $(e.currentTarget).data().scope;
                 var field = $(e.currentTarget).data().field;
                 this.removeField(scope, field);
+            },
+            'change select[data-type="access"]': function (e) {
+                var scope = $(e.currentTarget).attr('name');
+                var $dropdowns = this.$el.find('select[data-scope="' + scope + '"]');
+
+                if ($(e.currentTarget).val() == 'enabled') {
+                    $dropdowns.removeAttr('disabled');
+                    $dropdowns.removeClass('hidden');
+                    $dropdowns.each(function (i, select) {
+                        $select = $(select);
+                        $select.find('option').last().prop('selected', true);
+                        $select.trigger('change');
+                    });
+                } else {
+                    $dropdowns.attr('disabled', 'disabled');
+                    $dropdowns.addClass('hidden');
+                }
             }
         },