tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #20893 from abpframework/permission-management-modal-html 

Permission management modal html
pull/20919/head
Alper Ebiçoğlu 2 years ago
committed by GitHub
parent
10f630e008 303b9fb3e9
commit
17467de535
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
3 changed files with 144 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 104
      modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/PermissionManagementModal.cshtml
  2. 35
      modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.css
  3. 52
      modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js

104
modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/PermissionManagementModal.cshtml
View File

@ -11,48 +11,74 @@
Layout = null;
}
<form method="post" asp-page="/AbpPermissionManagement/PermissionManagementModal" data-script-class="abp.modals.PermissionManagement" id="PermissionManagementForm">
<form method="post" asp-page="/AbpPermissionManagement/PermissionManagementModal"
data-script-class="abp.modals.PermissionManagement" id="PermissionManagementForm">
<abp-modal size="Large">
<abp-modal-header title="@(L["Permissions"].Value) - @(HttpUtility.HtmlEncode(Model.EntityDisplayName))"></abp-modal-header>
<abp-modal-body class="custom-scroll-container">
<abp-input asp-for="SelectAllInAllTabs" check-box-hidden-input-render-mode="CheckBoxHiddenInputRenderMode.None" label="@L["SelectAllInAllTabs"].Value" disabled="@Model.Groups.All(group => group.IsDisabled(Model.ProviderName))"/>
<hr class="my-2"/>
<input asp-for="@Model.ProviderKey"/>
<input asp-for="@Model.ProviderName"/>
<abp-tabs name="PermissionsTabs" tab-style="PillVertical" vertical-header-size="_4" class="custom-scroll-container">
@for (var i = 0; i < Model.Groups.Count; i++)
{
var group = Model.Groups[i];
<abp-tab title="@group.DisplayName" name="v-pills-tab-@group.GetNormalizedGroupName()">
<div class="w-100" style="max-height: 640px;overflow-y: auto">
<div class="ps-1">
<abp-input asp-for="@group.IsAllPermissionsGranted"
check-box-hidden-input-render-mode="CheckBoxHiddenInputRenderMode.None"
name="SelectAllInThisTab"
id="SelectAllInThisTab-@group.GetNormalizedGroupName()"
data-tab-id="v-pills-tab-@group.GetNormalizedGroupName()"
label="@L["SelectAllInThisTab"].Value"
disabled="@group.IsDisabled(Model.ProviderName)" />
<hr class="mb-3"/>
@for (var j = 0; j < group.Permissions.Count; j++)
{
var permission = group.Permissions[j];
<abp-input asp-for="@permission.IsGranted"
check-box-hidden-input-render-mode="CheckBoxHiddenInputRenderMode.None"
abp-id-name="@Model.Groups[i].Permissions[j].IsGranted"
label="@permission.GetShownName(Model.ProviderName)"
disabled="@permission.IsDisabled(Model.ProviderName)"
group-data-permission-name="@permission.Name"
group-data-parent-name="@(permission.ParentName ?? "")"
group-style="margin-inline-start: @(permission.Depth * 20)px"/>
<input asp-for="@permission.Name" abp-id-name="@Model.Groups[i].Permissions[j].Name"/>
}
<abp-modal-header
title="@(L["Permissions"].Value) - @(HttpUtility.HtmlEncode(Model.EntityDisplayName))"></abp-modal-header>
<input asp-for="@Model.ProviderKey" />
<input asp-for="@Model.ProviderName" />
<abp-modal-body class="">
<div class="row d-flex align-items-center mb-2">
<div class="col">
<div class="input-group mb-2">
<span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="permission-search" placeholder="Filter" aria-label="Username"
aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-auto">
<abp-input asp-for="SelectAllInAllTabs"
check-box-hidden-input-render-mode="CheckBoxHiddenInputRenderMode.None"
label="@L["SelectAllInAllTabs"].Value"
disabled="@Model.Groups.All(group => group.IsDisabled(Model.ProviderName))" />
</div>
</div>
<fieldset class="border rounded-4 p-3">
<legend class="px-1 h5 mb-0">Permission Group</legend>
<abp-tabs name="PermissionsTabs" class="lpx-scroll-pills-container" tab-style="PillVertical"
vertical-header-size="_4">
@for (var i = 0; i < Model.Groups.Count; i++)
{
var group = Model.Groups[i];
<abp-tab title="@group.DisplayName" name="v-pills-tab-@group.GetNormalizedGroupName()">
<div class="w-100" style="height: 500px;overflow-y: auto">
<div class="ps-1">
<abp-input asp-for="@group.IsAllPermissionsGranted"
check-box-hidden-input-render-mode="CheckBoxHiddenInputRenderMode.None"
name="SelectAllInThisTab" id="SelectAllInThisTab-@group.GetNormalizedGroupName()"
data-tab-id="v-pills-tab-@group.GetNormalizedGroupName()"
label="@L["SelectAllInThisTab"].Value"
disabled="@group.IsDisabled(Model.ProviderName)" />
<hr class="mb-3" />
@for (var j = 0; j < group.Permissions.Count; j++)
{
var permission = group.Permissions[j];
<abp-input asp-for="@permission.IsGranted"
check-box-hidden-input-render-mode="CheckBoxHiddenInputRenderMode.None"
abp-id-name="@Model.Groups[i].Permissions[j].IsGranted"
label="@permission.GetShownName(Model.ProviderName)"
disabled="@permission.IsDisabled(Model.ProviderName)"
group-data-filter-text="@permission.GetShownName(Model.ProviderName)"
group-data-permission-name="@permission.Name"
group-data-parent-name="@(permission.ParentName ?? "")"
group-style="margin-inline-start: @(permission.Depth * 20)px" />
<input asp-for="@permission.Name" abp-id-name="@Model.Groups[i].Permissions[j].Name" />
}
</div>
</div>
</div>
</abp-tab>
}
</abp-tabs>
</abp-tab>
}
</abp-tabs>
</fieldset>
</abp-modal-body>
<abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
</abp-modal>
</form>

35
modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.css
View File

@ -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;
}

52
modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js
View File

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

Write Preview
Loading…
Cancel
Save