Skip to content

Commit c8df8ee

Browse files
iyilm4ziyilm4z
committed
indentation and refactoring applied to role components
1 parent d9290d9 commit c8df8ee

File tree

6 files changed

+264
-208
lines changed

6 files changed

+264
-208
lines changed

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

Lines changed: 73 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,76 @@
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>
1+
<form autocomplete="off" #createRoleForm="ngForm" (ngSubmit)="save()">
2+
<h1 mat-dialog-title>{{ "CreateNewRole" | localize }}</h1>
3+
<mat-dialog-content style="width:600px;height:300px;">
4+
<mat-tab-group>
5+
<mat-tab [label]="'RoleDetails' | localize">
6+
<br />
7+
<div class="row-fluid">
8+
<div class="col-md-12">
9+
<mat-form-field>
10+
<input
11+
matInput
12+
name="Name"
13+
[placeholder]="'Name' | localize"
14+
[(ngModel)]="role.name"
15+
required
16+
minlength="2"
17+
maxlength="32"
18+
/>
19+
</mat-form-field>
20+
<mat-form-field>
21+
<input
22+
matInput
23+
name="DisplayName"
24+
[placeholder]="'DisplayName' | localize"
25+
[(ngModel)]="role.displayName"
26+
required
27+
minlength="2"
28+
maxlength="32"
29+
/>
30+
</mat-form-field>
31+
<mat-form-field>
32+
<textarea
33+
matInput
34+
name="Description"
35+
[placeholder]="'RoleDescription' | localize"
36+
[(ngModel)]="role.description"
37+
></textarea>
38+
</mat-form-field>
39+
</div>
40+
</div>
41+
</mat-tab>
42+
<mat-tab [label]="'RolePermissions' | localize">
43+
<br />
44+
<div class="row-fluid">
45+
<ng-template ngFor let-permission [ngForOf]="permissions">
46+
<div class="col-md-6">
47+
<div class="checkbox-wrapper">
48+
<mat-checkbox
49+
[checked]="isPermissionChecked(permission.name)"
50+
[disabled]="role.isStatic"
51+
(change)="onPermissionChange(permission, $event)"
52+
>
53+
{{ permission.displayName }}
54+
</mat-checkbox>
55+
</div>
4256
</div>
57+
</ng-template>
4358
</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>
59+
</mat-tab>
60+
</mat-tab-group>
61+
</mat-dialog-content>
62+
<div mat-dialog-actions align="end">
63+
<button mat-button type="button" [disabled]="saving" (click)="close()">
64+
{{ "Cancel" | localize }}
65+
</button>
66+
<button
67+
mat-flat-button
68+
type="submit"
69+
flex="15"
70+
color="primary"
71+
[disabled]="!createRoleForm.form.valid || saving"
72+
>
73+
{{ "Save" | localize }}
74+
</button>
75+
</div>
5776
</form>

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
import { Component, Injector, OnInit } from '@angular/core';
2-
import {
3-
MatDialogRef,
4-
MatCheckboxChange
5-
} from '@angular/material';
2+
import { MatDialogRef, MatCheckboxChange } from '@angular/material';
3+
import { finalize } from 'rxjs/operators';
64
import * as _ from 'lodash';
5+
import { AppComponentBase } from '@shared/app-component-base';
76
import {
87
RoleServiceProxy,
98
RoleDto,
109
ListResultDtoOfPermissionDto,
1110
PermissionDto,
1211
CreateRoleDto
1312
} from '@shared/service-proxies/service-proxies';
14-
import { AppComponentBase } from '@shared/app-component-base';
15-
import { finalize } from 'rxjs/operators';
1613

1714
@Component({
1815
templateUrl: 'create-role-dialog.component.html',
@@ -29,12 +26,12 @@ import { finalize } from 'rxjs/operators';
2926
})
3027
export class CreateRoleDialogComponent extends AppComponentBase
3128
implements OnInit {
29+
saving = false;
3230
role: RoleDto = new RoleDto();
3331
permissions: PermissionDto[] = [];
3432
grantedPermissionNames: string[] = [];
3533
checkedPermissionsMap: { [key: string]: boolean } = {};
3634
defaultPermissionCheckedStatus = true;
37-
saving = false;
3835

3936
constructor(
4037
injector: Injector,
@@ -55,7 +52,9 @@ export class CreateRoleDialogComponent extends AppComponentBase
5552

5653
setInitialPermissionsStatus(): void {
5754
_.map(this.permissions, item => {
58-
this.checkedPermissionsMap[item.name] = this.defaultPermissionCheckedStatus
55+
this.checkedPermissionsMap[item.name] = this.isPermissionChecked(
56+
item.name
57+
);
5958
});
6059
}
6160

@@ -71,7 +70,7 @@ export class CreateRoleDialogComponent extends AppComponentBase
7170

7271
getCheckedPermissions(): string[] {
7372
const permissions: string[] = [];
74-
_.forEach(this.checkedPermissionsMap, function (value, key) {
73+
_.forEach(this.checkedPermissionsMap, function(value, key) {
7574
if (value) {
7675
permissions.push(key);
7776
}
@@ -82,18 +81,19 @@ export class CreateRoleDialogComponent extends AppComponentBase
8281
save(): void {
8382
this.saving = true;
8483

85-
const role = new RoleDto();
86-
role.permissions = this.getCheckedPermissions();
87-
role.init(this.role);
84+
this.role.permissions = this.getCheckedPermissions();
8885

89-
const createRole = new CreateRoleDto();
90-
createRole.init(role);
91-
this._roleService.create(createRole)
86+
const role_ = new CreateRoleDto();
87+
role_.init(this.role);
88+
89+
this._roleService
90+
.create(role_)
9291
.pipe(
9392
finalize(() => {
9493
this.saving = false;
9594
})
96-
).subscribe(() => {
95+
)
96+
.subscribe(() => {
9797
this.notify.info(this.l('SavedSuccessfully'));
9898
this.close(true);
9999
});

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

Lines changed: 73 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,76 @@
1-
<form autocomplete="off"
2-
#editRoleForm="ngForm"
3-
(ngSubmit)="save()">
4-
<h1 mat-dialog-title>{{ "EditRole" | 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>
1+
<form autocomplete="off" #editRoleForm="ngForm" (ngSubmit)="save()">
2+
<h1 mat-dialog-title>{{ "EditRole" | localize }}</h1>
3+
<mat-dialog-content style="width:600px;height:300px;">
4+
<mat-tab-group>
5+
<mat-tab [label]="'RoleDetails' | localize">
6+
<br />
7+
<div class="row-fluid">
8+
<div class="col-md-12">
9+
<mat-form-field>
10+
<input
11+
matInput
12+
name="Name"
13+
[placeholder]="'Name' | localize"
14+
[(ngModel)]="role.name"
15+
required
16+
minlength="2"
17+
maxlength="32"
18+
/>
19+
</mat-form-field>
20+
<mat-form-field>
21+
<input
22+
matInput
23+
name="DisplayName"
24+
[placeholder]="'DisplayName' | localize"
25+
[(ngModel)]="role.displayName"
26+
required
27+
minlength="2"
28+
maxlength="32"
29+
/>
30+
</mat-form-field>
31+
<mat-form-field>
32+
<textarea
33+
matInput
34+
name="Description"
35+
[placeholder]="'RoleDescription' | localize"
36+
[(ngModel)]="role.description"
37+
></textarea>
38+
</mat-form-field>
39+
</div>
40+
</div>
41+
</mat-tab>
42+
<mat-tab [label]="'RolePermissions' | localize">
43+
<br />
44+
<div class="row-fluid">
45+
<ng-template ngFor let-permission [ngForOf]="permissions">
46+
<div class="col-md-6">
47+
<div class="checkbox-wrapper">
48+
<mat-checkbox
49+
[checked]="isPermissionChecked(permission.name)"
50+
[disabled]="role.isStatic"
51+
(change)="onPermissionChange(permission, $event)"
52+
>
53+
{{ permission.displayName }}
54+
</mat-checkbox>
55+
</div>
4256
</div>
57+
</ng-template>
4358
</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]="!editRoleForm.form.valid || saving">{{ "Save" | localize }}</button>
56-
</div>
59+
</mat-tab>
60+
</mat-tab-group>
61+
</mat-dialog-content>
62+
<div mat-dialog-actions align="end">
63+
<button mat-button type="button" [disabled]="saving" (click)="close()">
64+
{{ "Cancel" | localize }}
65+
</button>
66+
<button
67+
mat-flat-button
68+
type="submit"
69+
flex="15"
70+
color="primary"
71+
[disabled]="!editRoleForm.form.valid || saving"
72+
>
73+
{{ "Save" | localize }}
74+
</button>
75+
</div>
5776
</form>

0 commit comments

Comments
 (0)