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

add: search for the permission modal

pull/21123/head
sumeyyeKurtulus 2 years ago
parent
324503677d
commit
98591e8fcd
2 changed files with 130 additions and 68 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. 147
      npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
  2. 51
      npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts

147
npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
View File

@ -7,8 +7,20 @@
</h4>
</ng-template>
<ng-template #abpBody>
<div class="row">
<div class="col-md-4 scroll-in-modal">
<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"
[(ngModel)]="filter"
/>
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<input
#selectAllInAllTabsRef
@ -24,78 +36,83 @@
'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization
}}</label>
</div>
<hr class="mt-2 mb-2" />
<div class="overflow-auto">
<ul class="nav nav-pills flex-column">
@for (group of data.groups; track $index) {
<li class="nav-item">
@if ({ assignedCount: getAssignedCount(group.name) }; as count) {
<a
class="nav-link pointer"
[class.active]="selectedGroup?.name === group?.name"
(click)="onChangeGroup(group)"
(select)="setDisabled(group.permissions)"
>
<div [class.font-weight-bold]="count.assignedCount">
{{ group?.displayName }}
@if (count.assignedCount > 0) {
<span>({{ count.assignedCount }})</span>
}
</div>
</a>
}
</li>
}
</ul>
</div>
</div>
<div class="col-md-8 scroll-in-modal">
<div class="ps-1">
<div class="form-check mb-2">
<input
#selectAllInThisTabsRef
type="checkbox"
id="select-all-in-this-tabs"
name="select-all-in-this-tabs"
class="form-check-input"
[(ngModel)]="selectThisTab"
[disabled]="disableSelectAllTab"
(click)="onClickSelectThisTab()"
/>
<label class="form-check-label" for="select-all-in-this-tabs">{{
'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
}}</label>
</div>
<fieldset class="border rounded-4 p-3">
<legend class="px-1 h5 mb-0">{{ 'Permission Group' }}</legend>
<div class="row">
<div class="col-md-4">
<div class="overflow-auto lpx-scroll-pills-container scroll-in-modal">
<ul class="nav nav-pills flex-column">
@for (group of permissionGroups; track $index) {
<li class="border nav-item">
@if ({ assignedCount: getAssignedCount(group.name) }; as count) {
<a
class="nav-link pointer"
[class.active]="selectedGroup?.name === group?.name"
(click)="onChangeGroup(group)"
(select)="setDisabled(group.permissions)"
>
<div [class.font-weight-bold]="count.assignedCount">
{{ group?.displayName }}
@if (count.assignedCount > 0) {
<span>({{ count.assignedCount }})</span>
}
</div>
</a>
}
</li>
}
</ul>
</div>
<hr class="my-2" />
@for (permission of selectedGroupPermissions; track $index; let i = $index) {
<div [ngStyle]="permission.style" class="form-check mb-2">
</div>
<div class="col-md-8 scroll-in-modal">
<div class="ps-1">
<div class="form-check mb-2">
<input
#permissionCheckbox
#selectAllInThisTabsRef
type="checkbox"
[checked]="getChecked(permission.name)"
[value]="getChecked(permission.name)"
[attr.id]="permission.name"
id="select-all-in-this-tabs"
name="select-all-in-this-tabs"
class="form-check-input"
[disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
(click)="onClickCheckbox(permission, permissionCheckbox.value)"
[(ngModel)]="selectThisTab"
[disabled]="disableSelectAllTab"
(click)="onClickSelectThisTab()"
/>
<label class="form-check-label" [attr.for]="permission.name"
>{{ permission.displayName }}
@if (!hideBadges) {
@for (provider of permission.grantedProviders; track $index) {
<span class="badge bg-primary text-dark"
>{{ provider.providerName }}: {{ provider.providerKey }}</span
>
}
}
</label>
<label class="form-check-label" for="select-all-in-this-tabs">{{
'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
}}</label>
</div>
}
<hr class="my-2" />
@for (permission of selectedGroupPermissions; track $index; let i = $index) {
<div [ngStyle]="permission.style" class="form-check mb-2">
<input
#permissionCheckbox
type="checkbox"
[checked]="getChecked(permission.name)"
[value]="getChecked(permission.name)"
[attr.id]="permission.name"
class="form-check-input"
[disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
(click)="onClickCheckbox(permission, permissionCheckbox.value)"
/>
<label class="form-check-label" [attr.for]="permission.name"
>{{ permission.displayName }}
@if (!hideBadges) {
@for (provider of permission.grantedProviders; track $index) {
<span class="badge bg-primary text-dark"
>{{ provider.providerName }}: {{ provider.providerKey }}</span
>
}
}
</label>
</div>
}
</div>
</div>
</div>
</div>
</fieldset>
</ng-template>
<ng-template #abpFooter>
<button type="button" class="btn btn-outline-primary" abpClose>

51
npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
View File

@ -19,7 +19,7 @@ import {
TrackByFunction,
ViewChildren,
} from '@angular/core';
import { concat, of } from 'rxjs';
import { BehaviorSubject, concat, of } from 'rxjs';
import { finalize, switchMap, take, tap } from 'rxjs/operators';
import { PermissionManagement } from '../models/permission-management';
@ -41,10 +41,38 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
max-height: 70vh;
overflow-y: scroll;
}
.scroll-in-modal {
overflow: auto;
max-height: calc(100vh - 15rem);
}
fieldset legend {
float: none;
width: auto;
}
.lpx-scroll-pills-container ul {
display: block;
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 {
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;
}
`,
],
})
@ -121,6 +149,10 @@ export class PermissionManagementComponent
selectedGroupPermissions: PermissionWithStyle[] = [];
filter = '';
permissionGroupSubject = new BehaviorSubject<PermissionGroupDto[]>(null);
trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
getChecked(name: string) {
@ -364,9 +396,11 @@ export class PermissionManagementComponent
return this.service.get(this.providerName, this.providerKey).pipe(
tap((permissionRes: GetPermissionListResultDto) => {
const { groups } = permissionRes;
this.data = permissionRes;
this.permissions = getPermissions(permissionRes.groups);
this.setSelectedGroup(permissionRes.groups[0]);
this.permissionGroupSubject.next(groups);
this.permissions = getPermissions(groups);
this.setSelectedGroup(groups[0]);
this.disabledSelectAllInAllTabs = this.permissions.every(
per =>
per.isGranted &&
@ -401,6 +435,17 @@ export class PermissionManagementComponent
return false;
}
get permissionGroups(): PermissionGroupDto[] {
const permissionGroups = this.permissionGroupSubject.getValue();
if (!permissionGroups) {
return;
}
const search = this.filter.toLowerCase();
return permissionGroups.filter(group =>
group.permissions.some(permission => permission.displayName.toLowerCase().includes(search)),
);
}
}
function findParentPermissions(

Write Preview
Loading…
Cancel
Save