Skip to content

Commit 48130ff

Browse files
iyilm4ziyilm4z
committed
Migrate roles creation and edition to @angular/material components
1 parent caa591b commit 48130ff

11 files changed

+443
-404
lines changed

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,6 @@ import { AboutComponent } from '@app/about/about.component';
2020
import { UsersComponent } from '@app/users/users.component';
2121
import { CreateUserComponent } from '@app/users/create-user/create-user.component';
2222
import { EditUserComponent } from './users/edit-user/edit-user.component';
23-
import { RolesComponent } from '@app/roles/roles.component';
24-
import { CreateRoleComponent } from '@app/roles/create-role/create-role.component';
25-
import { EditRoleComponent } from './roles/edit-role/edit-role.component';
2623
import { TenantsComponent } from '@app/tenants/tenants.component';
2724
import { TopBarComponent } from '@app/layout/topbar.component';
2825
import { TopBarLanguageSwitchComponent } from '@app/layout/topbar-languageswitch.component';
@@ -32,6 +29,11 @@ import { SideBarFooterComponent } from '@app/layout/sidebar-footer.component';
3229
import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
3330
import { CreateTenantDialogComponent } from './tenants/create-tenant/create-tenant-dialog.component';
3431
import { EditTenantDialogComponent } from './tenants/edit-tenant/edit-tenant-dialog.component';
32+
// roles
33+
import { RolesComponent } from "@app/roles/roles.component";
34+
import { CreateRoleDialogComponent } from "@app/roles/create-role/create-role-dialog.component";
35+
import { EditRoleDialogComponent } from "./roles/edit-role/edit-role-dialog.component";
36+
3537

3638
@NgModule({
3739
declarations: [
@@ -44,16 +46,16 @@ import { EditTenantDialogComponent } from './tenants/edit-tenant/edit-tenant-dia
4446
UsersComponent,
4547
CreateUserComponent,
4648
EditUserComponent,
47-
RolesComponent,
48-
CreateRoleComponent,
49-
EditRoleComponent,
5049
TopBarComponent,
5150
TopBarLanguageSwitchComponent,
5251
SideBarUserAreaComponent,
5352
SideBarNavComponent,
5453
SideBarFooterComponent,
55-
RightSideBarComponent
56-
54+
RightSideBarComponent,
55+
// roles
56+
RolesComponent,
57+
CreateRoleDialogComponent,
58+
EditRoleDialogComponent
5759
],
5860
imports: [
5961
CommonModule,
@@ -72,7 +74,12 @@ import { EditTenantDialogComponent } from './tenants/edit-tenant/edit-tenant-dia
7274
],
7375
entryComponents: [
7476
CreateTenantDialogComponent,
75-
EditTenantDialogComponent
77+
EditTenantDialogComponent,
78+
79+
// roles
80+
RolesComponent,
81+
CreateRoleDialogComponent,
82+
EditRoleDialogComponent
7683
]
7784
})
7885
export class AppModule { }

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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 name="permission"
37+
[value]="permission.name"
38+
[checked]="checkPermission(permission.name)"
39+
[disabled]="role.isStatic"
40+
style="padding-bottom: 5px">{{ permission.displayName }}</mat-checkbox>
41+
</div>
42+
</div>
43+
</ng-template>
44+
</div>
45+
</div>
46+
</mat-dialog-content>
47+
<div mat-dialog-actions
48+
align="end">
49+
<button mat-button
50+
type="button"
51+
[disabled]="saving"
52+
(click)="close()">{{ "Cancel" | localize }}</button>
53+
<button mat-flat-button
54+
type="submit"
55+
flex="15"
56+
color="primary"
57+
[disabled]="!createRoleForm.form.valid || saving">{{ "Save" | localize }}</button>
58+
</div>
59+
</form>

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { Component, Injector, OnInit } from "@angular/core";
2+
import { MatDialogRef } from "@angular/material";
3+
import { finalize } from "rxjs/operators";
4+
import {
5+
RoleServiceProxy,
6+
CreateRoleDto,
7+
ListResultDtoOfPermissionDto,
8+
PermissionDto
9+
} from "@shared/service-proxies/service-proxies";
10+
import { AppComponentBase } from "@shared/app-component-base";
11+
12+
@Component({
13+
selector: "create-role-dialog",
14+
templateUrl: "create-role-dialog.component.html",
15+
styles: [
16+
`
17+
mat-form-field {
18+
width: 100%;
19+
}
20+
`
21+
]
22+
})
23+
export class CreateRoleDialogComponent extends AppComponentBase
24+
implements OnInit {
25+
active: boolean = false;
26+
saving: boolean = false;
27+
28+
role: CreateRoleDto = new CreateRoleDto();
29+
permissions: PermissionDto[] = [];
30+
31+
constructor(
32+
injector: Injector,
33+
private _roleService: RoleServiceProxy,
34+
private _dialogRef: MatDialogRef<CreateRoleDialogComponent>
35+
) {
36+
super(injector);
37+
}
38+
39+
ngOnInit(): void {
40+
this._roleService
41+
.getAllPermissions()
42+
.subscribe((permissions: ListResultDtoOfPermissionDto) => {
43+
this.active = true;
44+
this.permissions = permissions.items;
45+
});
46+
}
47+
48+
checkPermission(permissionName: string): boolean {
49+
// return default permission check state
50+
return true;
51+
}
52+
53+
getCheckedPermissions(): string[] {
54+
const permissions = <string[]>[];
55+
$(this._dialogRef["_containerInstance"]["_elementRef"].nativeElement)
56+
.find("[name=permission]")
57+
.each(function(index: number, elem: Element) {
58+
if ($(elem).is(":checked") === true) {
59+
permissions.push(elem.getAttribute("value").valueOf());
60+
}
61+
});
62+
return permissions;
63+
}
64+
65+
save(): void {
66+
this.saving = true;
67+
68+
this.role.permissions = this.getCheckedPermissions();
69+
70+
this._roleService
71+
.create(this.role)
72+
.pipe(
73+
finalize(() => {
74+
this.saving = false;
75+
})
76+
)
77+
.subscribe(() => {
78+
this.notify.info(this.l("SavedSuccessfully"));
79+
this.close(true);
80+
});
81+
}
82+
83+
close(result: any): void {
84+
this.active = false;
85+
this._dialogRef.close(result);
86+
}
87+
}

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

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

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

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

0 commit comments

Comments
 (0)