updte role management: replace permissions by privileges

This commit is contained in:
Sylvain MATHIEU OBS 2023-09-19 11:43:46 +02:00
parent 2c0cd88ca6
commit 55c993df71
9 changed files with 118 additions and 26 deletions

View File

@ -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,

View File

@ -0,0 +1,8 @@
import { GroupPrivilegesPipe } from './group-privileges.pipe';
describe('GroupPrivilegesPipe', () => {
it('create an instance', () => {
const pipe = new GroupPrivilegesPipe();
expect(pipe).toBeTruthy();
});
});

View File

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

View File

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

View File

@ -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 {

View File

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

View File

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

View File

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

View File

@ -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[]>;