Skip to content

Commit 2841083

Browse files
iyilm4ziyilm4z
committed
Migrate role's listing, creation and edition
1 parent e14ce5e commit 2841083

File tree

7 files changed

+302
-162
lines changed

7 files changed

+302
-162
lines changed

‎angular/src/app/app.module.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ import { CreateTenantDialogComponent } from './tenants/create-tenant/create-tena
3131
import { EditTenantDialogComponent } from './tenants/edit-tenant/edit-tenant-dialog.component';
3232
// roles
3333
import { RolesComponent } from '@app/roles/roles.component';
34-
import { CreateOrEditRoleDialogComponent } from '@app/roles/create-or-edit-role-dialog.component';
34+
import { CreateRoleDialogComponent } from './roles/create-role/create-role-dialog.component';
35+
import { EditRoleDialogComponent } from './roles/edit-role/edit-role-dialog.component';
3536

3637
@NgModule({
3738
declarations: [
@@ -49,10 +50,11 @@ import { CreateOrEditRoleDialogComponent } from '@app/roles/create-or-edit-role-
4950
SideBarUserAreaComponent,
5051
SideBarNavComponent,
5152
SideBarFooterComponent,
52-
RightSideBarComponent,
53+
RightSideBarComponent,
5354
// roles
5455
RolesComponent,
55-
CreateOrEditRoleDialogComponent
56+
CreateRoleDialogComponent,
57+
EditRoleDialogComponent
5658
],
5759
imports: [
5860
CommonModule,
@@ -72,10 +74,9 @@ import { CreateOrEditRoleDialogComponent } from '@app/roles/create-or-edit-role-
7274
entryComponents: [
7375
CreateTenantDialogComponent,
7476
EditTenantDialogComponent,
75-
7677
// roles
77-
RolesComponent,
78-
CreateOrEditRoleDialogComponent
78+
CreateRoleDialogComponent,
79+
EditRoleDialogComponent
7980
]
8081
})
8182
export class AppModule { }

‎angular/src/app/roles/create-or-edit-role-dialog.component.ts

Lines changed: 0 additions & 144 deletions
This file was deleted.

‎angular/src/app/roles/create-role/create-role-dialog.component.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<form autocomplete="off"
2+
#createRoleForm="ngForm"
3+
(ngSubmit)="save()">
4+
<h1 mat-dialog-title>{{ "CreateNewRole" | localize }}</h1>
5+
<mat-dialog-content>
6+
<mat-form-field>
7+
<input matInput
8+
name="Name"
9+
[placeholder]="'Name' | localize"
10+
[(ngModel)]="role.name"
11+
required
12+
minlength="2"
13+
maxlength="32">
14+
</mat-form-field>
15+
<mat-form-field>
16+
<input matInput
17+
name="DisplayName"
18+
[placeholder]="'DisplayName' | localize"
19+
[(ngModel)]="role.displayName"
20+
required
21+
minlength="2"
22+
maxlength="32">
23+
</mat-form-field>
24+
<mat-form-field>
25+
<textarea matInput
26+
name="Description"
27+
[placeholder]="'RoleDescription' | localize"
28+
[(ngModel)]="role.description"></textarea>
29+
</mat-form-field>
30+
<div class="row clearfix">
31+
<div class="col-sm-12">
32+
<h4>{{ "Permissions" | localize }}</h4>
33+
<ng-template ngFor let-permission [ngForOf]="permissions">
34+
<div class="col-sm-6">
35+
<div class="checkbox-wrapper">
36+
<mat-checkbox [checked]="isPermissionChecked(permission.name)"
37+
[disabled]="role.isStatic"
38+
(change)="onPermissionChange(permission, $event)">{{ permission.displayName }}</mat-checkbox>
39+
</div>
40+
</div>
41+
</ng-template>
42+
</div>
43+
</div>
44+
</mat-dialog-content>
45+
<div mat-dialog-actions
46+
align="end">
47+
<button mat-button
48+
type="button"
49+
[disabled]="saving"
50+
(click)="close()">{{ "Cancel" | localize }}</button>
51+
<button mat-flat-button
52+
type="submit"
53+
flex="15"
54+
color="primary"
55+
[disabled]="!createRoleForm.form.valid || saving">{{ "Save" | localize }}</button>
56+
</div>
57+
</form>

‎angular/src/app/roles/create-role/create-role-dialog.component.ts

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { Component, Injector, OnInit } from '@angular/core';
2+
import {
3+
MatDialogRef,
4+
MatCheckboxChange
5+
} from '@angular/material';
6+
import * as _ from 'lodash';
7+
import {
8+
RoleServiceProxy,
9+
RoleDto,
10+
ListResultDtoOfPermissionDto,
11+
PermissionDto,
12+
CreateRoleDto
13+
} from '@shared/service-proxies/service-proxies';
14+
import { AppComponentBase } from '@shared/app-component-base';
15+
import { finalize } from 'rxjs/operators';
16+
17+
@Component({
18+
templateUrl: 'create-role-dialog.component.html',
19+
styles: [
20+
`
21+
mat-form-field {
22+
width: 100%;
23+
}
24+
mat-checkbox {
25+
padding-bottom: 5px;
26+
}
27+
`
28+
]
29+
})
30+
export class CreateRoleDialogComponent extends AppComponentBase
31+
implements OnInit {
32+
role: RoleDto = new RoleDto();
33+
permissions: PermissionDto[] = [];
34+
grantedPermissionNames: string[] = [];
35+
checkedPermissionsMap: { [key: string]: boolean } = {};
36+
defaultPermissionCheckedStatus = true;
37+
saving = false;
38+
39+
constructor(
40+
injector: Injector,
41+
private _roleService: RoleServiceProxy,
42+
private _dialogRef: MatDialogRef<CreateRoleDialogComponent>
43+
) {
44+
super(injector);
45+
}
46+
47+
ngOnInit(): void {
48+
this._roleService
49+
.getAllPermissions()
50+
.subscribe((result: ListResultDtoOfPermissionDto) => {
51+
this.permissions = result.items;
52+
this.setInitialPermissionsStatus();
53+
});
54+
}
55+
56+
setInitialPermissionsStatus(): void {
57+
_.map(this.permissions, item => {
58+
this.checkedPermissionsMap[item.name] = this.defaultPermissionCheckedStatus
59+
});
60+
}
61+
62+
isPermissionChecked(permissionName: string): boolean {
63+
// just return default permission checked status
64+
// it's better to use a setting
65+
return this.defaultPermissionCheckedStatus;
66+
}
67+
68+
onPermissionChange(permission: PermissionDto, $event: MatCheckboxChange) {
69+
this.checkedPermissionsMap[permission.name] = $event.checked;
70+
}
71+
72+
getCheckedPermissions(): string[] {
73+
const permissions: string[] = [];
74+
_.forEach(this.checkedPermissionsMap, function (value, key) {
75+
if (value) {
76+
permissions.push(key);
77+
}
78+
});
79+
return permissions;
80+
}
81+
82+
save(): void {
83+
this.saving = true;
84+
85+
const role = new RoleDto();
86+
role.permissions = this.getCheckedPermissions();
87+
role.init(this.role);
88+
89+
const createRole = new CreateRoleDto();
90+
createRole.init(role);
91+
this._roleService.create(createRole)
92+
.pipe(
93+
finalize(() => {
94+
this.saving = false;
95+
})
96+
).subscribe(() => {
97+
this.notify.info(this.l('SavedSuccessfully'));
98+
this.close(true);
99+
});
100+
}
101+
102+
close(result: any): void {
103+
this._dialogRef.close(result);
104+
}
105+
}

‎angular/src/app/roles/create-or-edit-role-dialog.component.html renamed to ‎angular/src/app/roles/edit-role/edit-role-dialog.component.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<form autocomplete="off"
22
#editRoleForm="ngForm"
33
(ngSubmit)="save()">
4-
<h1 mat-dialog-title *ngIf="!role.id">{{"CreateNewRole" | localize}}</h1>
5-
<h1 mat-dialog-title *ngIf="role.id">{{"EditRole" | localize}}: {{permissionName}}</h1>
4+
<h1 mat-dialog-title>{{ "EditRole" | localize }}</h1>
65
<mat-dialog-content>
76
<mat-form-field>
87
<input matInput
@@ -30,7 +29,7 @@ <h1 mat-dialog-title *ngIf="role.id">{{"EditRole" | localize}}: {{permissionName
3029
</mat-form-field>
3130
<div class="row clearfix">
3231
<div class="col-sm-12">
33-
<h4>{{ 'Permissions' | localize }}</h4>
32+
<h4>{{ "Permissions" | localize }}</h4>
3433
<ng-template ngFor let-permission [ngForOf]="permissions">
3534
<div class="col-sm-6">
3635
<div class="checkbox-wrapper">
@@ -48,11 +47,11 @@ <h4>{{ 'Permissions' | localize }}</h4>
4847
<button mat-button
4948
type="button"
5049
[disabled]="saving"
51-
(click)="close()">{{ 'Cancel' | localize }}</button>
50+
(click)="close()">{{ "Cancel" | localize }}</button>
5251
<button mat-flat-button
5352
type="submit"
5453
flex="15"
5554
color="primary"
56-
[disabled]="!editRoleForm.form.valid || saving">{{ 'Save' | localize }}</button>
55+
[disabled]="!editRoleForm.form.valid || saving">{{ "Save" | localize }}</button>
5756
</div>
5857
</form>

0 commit comments

Comments
 (0)