diff --git a/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/PermissionManagementModal.cshtml b/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/PermissionManagementModal.cshtml index 15fbc9b1f8..08ab0910df 100644 --- a/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/PermissionManagementModal.cshtml +++ b/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/PermissionManagementModal.cshtml @@ -11,48 +11,74 @@ Layout = null; } -
+ - - - -
- - - - @for (var i = 0; i < Model.Groups.Count; i++) - { - var group = Model.Groups[i]; - -
-
- -
- @for (var j = 0; j < group.Permissions.Count; j++) - { - var permission = group.Permissions[j]; - - - } + + + + +
+
+
+ + +
+
+
+ +
+
+
+ Permission Group + + + @for (var i = 0; i < Model.Groups.Count; i++) + { + var group = Model.Groups[i]; + +
+
+ +
+ @for (var j = 0; j < group.Permissions.Count; j++) + { + var permission = group.Permissions[j]; + + + } +
-
- - } - + + } + + + + + + + + \ No newline at end of file diff --git a/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.css b/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.css index 2d47ccd927..004ae2cf27 100644 --- a/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.css +++ b/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.css @@ -1,12 +1,31 @@ -.custom-scroll-container > .col-4 { - overflow: hidden; - overflow-y: auto; - max-height: 499px; +fieldset legend { + float: none; + width: auto; +} + +.lpx-scroll-pills-container ul { display: block; - position: relative; - z-index: 123; + max-height: 500px; + overflow-y: auto; +} + +.lpx-scroll-pills-container .tab-content { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.lpx-scroll-pills-container ul li { + border: 1px solid #e8eef3; + margin-bottom: 10px; + border-radius: 10px; +} + +.lpx-scroll-pills-container ul li a.active { + color: #fff !important; + border-color: #6c5dd3 !important; + background-color: #6c5dd3 !important; } -.custom-scroll-content { - max-height: 440px; +.lpx-theme-dark .lpx-scroll-pills-container ul li { + border: 1px solid #23262a; } diff --git a/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js b/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js index 298ad3791f..3723eda932 100644 --- a/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js +++ b/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js @@ -286,6 +286,58 @@ var abp = abp || {}; }); } + $permissionSearchInput = $('#permission-search'); + + $permissionSearchInput.keyup(throttle(function() { + var searchTerm = $permissionSearchInput.val().toLowerCase(); + filterTabs(searchTerm); + }, 300)); + + function filterTabs(searchTerm) { + var $tabs = $('#PermissionsTabs .nav-link'); + $tabs.each(function(i) { + var $tabItem = $(this); + var $tab = $tabItem.parent(); + + if (!searchTerm) { + $tab.show(); + return; + } + + var tabName = $tabItem.find('small').text().toLowerCase(); + + var tabContentFilters = $($tabItem.attr('href')).find('[data-filter-text]'); + let includedInTabContent = false; + tabContentFilters.each(function(i) { + var permissionName = $(this).attr('data-filter-text').toLowerCase(); + includedInTabContent = permissionName.includes(searchTerm); + if (includedInTabContent === true) { + return false; + } + }); + + if(includedInTabContent || tabName.includes(searchTerm)) { + $tab.show(); + } else { + $tab.hide(); + } + }); + } + + function throttle(mainFunction, delay) { + let timerFlag = null; // Variable to keep track of the timer + + // Returning a throttled version + return (...args) => { + if (timerFlag === null) { // If there is no timer currently running + mainFunction(...args); // Execute the main function + timerFlag = setTimeout(() => { // Set a timer to clear the timerFlag after the specified delay + timerFlag = null; // Clear the timerFlag to allow the main function to be executed again + }, delay); + } + }; + } + }; }; })(jQuery);