mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-21 13:57:48 +00:00
updte role management: replace permissions by privileges
This commit is contained in:
parent
2c0cd88ca6
commit
55c993df71
@ -310,6 +310,7 @@ import { NodesMenuConfirmationDialogComponent } from './components/project-map/n
|
||||
import { ConfirmationDeleteAllProjectsComponent } from './components/projects/confirmation-delete-all-projects/confirmation-delete-all-projects.component';
|
||||
import { ProjectMapLockConfirmationDialogComponent } from './components/project-map/project-map-menu/project-map-lock-confirmation-dialog/project-map-lock-confirmation-dialog.component';
|
||||
import { PrivilegeComponent } from './components/role-management/role-detail/privilege/privilege.component';
|
||||
import { GroupPrivilegesPipe } from './components/role-management/role-detail/privilege/group-privileges.pipe';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -533,6 +534,7 @@ import { PrivilegeComponent } from './components/role-management/role-detail/pri
|
||||
ConfirmationDeleteAllProjectsComponent,
|
||||
ProjectMapLockConfirmationDialogComponent,
|
||||
PrivilegeComponent,
|
||||
GroupPrivilegesPipe,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
@ -0,0 +1,8 @@
|
||||
import { GroupPrivilegesPipe } from './group-privileges.pipe';
|
||||
|
||||
describe('GroupPrivilegesPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new GroupPrivilegesPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
@ -0,0 +1,31 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import {Privilege} from "@models/api/Privilege";
|
||||
|
||||
@Pipe({
|
||||
name: 'groupPrivileges'
|
||||
})
|
||||
export class GroupPrivilegesPipe implements PipeTransform {
|
||||
|
||||
transform(privileges: Privilege[]) {
|
||||
if(privileges) {
|
||||
const groups: { [index: string]: {verb: string, privilege: Privilege}[]} = {}
|
||||
privileges.forEach((privilege) => {
|
||||
const [name, verb] = privilege.name.split(".");
|
||||
if(!groups.hasOwnProperty(name)) {
|
||||
groups[name] = [{verb, privilege}];
|
||||
} else {
|
||||
groups[name].push({verb, privilege});
|
||||
}
|
||||
});
|
||||
|
||||
const output: {key: string; values: {verb: string; privilege: Privilege}[]}[] = [];
|
||||
for(const [ key, values] of Object.entries(groups)) {
|
||||
output.push({key, values});
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
@ -10,21 +10,33 @@
|
||||
<button *ngIf="editMode" mat-raised-button color="primary" (click)="close()">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngFor="let privilege of privileges">
|
||||
<div class="privilege">
|
||||
<mat-checkbox
|
||||
*ngIf="editMode"
|
||||
[checked]="ownedPrivilegesList.includes(privilege.privilege_id)"
|
||||
(change)="onPrivilegeChange($event.checked, privilege)"></mat-checkbox>
|
||||
<div *ngIf="editMode; else actualPrivileges">
|
||||
<div
|
||||
[ngClass]="{add: changer.isAdded(privilege.privilege_id), delete: changer.isDeleted(privilege.privilege_id)}">
|
||||
{{privilege.name}}</div>
|
||||
<div *ngFor="let privilegeName of privileges | groupPrivileges">
|
||||
<div *ngIf="editMode; else normalMode">
|
||||
<div class="privilege">
|
||||
<div class="key">{{privilegeName.key}}:</div>
|
||||
<div class="values">
|
||||
<div class="box" *ngFor="let privilegeVerb of privilegeName.values">
|
||||
<mat-checkbox
|
||||
(change)="onPrivilegeChange($event.checked, privilegeVerb.privilege)"
|
||||
[checked]="ownedPrivilegesList.includes(privilegeVerb.privilege.privilege_id)"></mat-checkbox>
|
||||
<div
|
||||
[ngClass]="{add: changer.isAdded(privilegeVerb.privilege.privilege_id), delete: changer.isDeleted(privilegeVerb.privilege.privilege_id)}">
|
||||
{{privilegeVerb.verb}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #actualPrivileges>
|
||||
<div *ngIf="ownedPrivilegesList.includes(privilege.privilege_id)">{{privilege.name}}</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<ng-template #normalMode>
|
||||
<div class="privilege" *ngIf="ownedPrivilegesName.includes(privilegeName.key)">
|
||||
<div class="key">{{privilegeName.key}}:</div>
|
||||
<div class="values">
|
||||
<div *ngFor="let privilegeVerb of privilegeName.values">
|
||||
<div [ngClass]="{box: ownedPrivilegesList.includes(privilegeVerb.privilege.privilege_id)}"
|
||||
*ngIf="ownedPrivilegesList.includes(privilegeVerb.privilege.privilege_id)">{{privilegeVerb.verb}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -7,6 +7,14 @@
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.privileges {
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
justify-content: center;
|
||||
}
|
||||
@ -15,11 +23,40 @@
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.privilege {
|
||||
.box > mat-checkbox {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-left: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.privilege {
|
||||
width: 32vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
justify-content: center;
|
||||
border: solid white 1px;
|
||||
}
|
||||
|
||||
.key {
|
||||
color: gray;
|
||||
display: flex;
|
||||
width: 15%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.values {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.values > div {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.add {
|
||||
|
@ -12,9 +12,16 @@ export class PrivilegeComponent implements OnInit {
|
||||
|
||||
@Input() disable = true;
|
||||
@Input() privileges: Privilege[] = [];
|
||||
@Input() ownedPrivilegesList: string[] = []
|
||||
@Input() set ownedPrivilege(privileges: Privilege[]) {
|
||||
if(privileges) {
|
||||
this.ownedPrivilegesName = privileges.map((p: Privilege) => p.name.split(".")[0])
|
||||
this.ownedPrivilegesList = privileges.map((p: Privilege) => p.privilege_id);
|
||||
}
|
||||
}
|
||||
@Output() update: EventEmitter<IPrivilegesChange> = new EventEmitter<IPrivilegesChange>();
|
||||
|
||||
ownedPrivilegesName: string[] = [];
|
||||
ownedPrivilegesList: string[] = [];
|
||||
changer = new PrivilegeChange(this.ownedPrivilegesList);
|
||||
private editModeState = false;
|
||||
|
||||
|
@ -40,7 +40,7 @@
|
||||
<mat-divider [vertical]="true"></mat-divider>
|
||||
<app-privilege
|
||||
[disable]="($role | async)?.is_builtin"
|
||||
[ownedPrivilegesList]="$ownedPrivilegesId | async"
|
||||
[ownedPrivilege]="$ownedPrivilegesId | async"
|
||||
[privileges]="privileges | async"
|
||||
(update)="onPrivilegesUpdate($event)"></app-privilege>
|
||||
</div>
|
||||
|
@ -10,13 +10,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.privileges {
|
||||
width: 35vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -45,6 +39,7 @@
|
||||
justify-content: space-between;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
.header > div {
|
||||
font-size: 2em;
|
||||
|
@ -33,8 +33,8 @@ export class RoleDetailComponent implements OnInit {
|
||||
controller: Controller;
|
||||
$role: ReplaySubject<Role> = new ReplaySubject<Role>(1);
|
||||
editRoleForm: UntypedFormGroup;
|
||||
$ownedPrivilegesId: Observable<string[]> = this.$role.pipe(map((role: Role) => {
|
||||
return role.privileges.map((p: Privilege) => p.privilege_id);
|
||||
$ownedPrivilegesId: Observable<Privilege[]> = this.$role.pipe(map((role: Role) => {
|
||||
return role.privileges
|
||||
}));
|
||||
|
||||
privileges: Observable<Privilege[]>;
|
||||
|
Loading…
Reference in New Issue
Block a user