Skip to content

Commit dad0920

Browse files
iyilm4ziyilm4z
committed
app module's role comps done
1 parent f79e347 commit dad0920

File tree

8 files changed

+431
-361
lines changed

8 files changed

+431
-361
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { HttpClientModule } from '@angular/common/http';
77
import { ModalModule } from 'ngx-bootstrap/modal';
88
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
99
import { CollapseModule } from 'ngx-bootstrap/collapse';
10+
import { TabsModule } from 'ngx-bootstrap/tabs';
1011
import { NgxPaginationModule } from 'ngx-pagination';
1112

1213
import { AppRoutingModule } from './app-routing.module';
@@ -83,6 +84,7 @@ import { SidebarMenuComponent } from './layout/sidebar-menu.component';
8384
ModalModule.forChild(),
8485
BsDropdownModule,
8586
CollapseModule,
87+
TabsModule,
8688
AbpModule,
8789
AppRoutingModule,
8890
ServiceProxyModule,

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

Lines changed: 92 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,103 @@
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]="'Details' | 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>
1+
<form
2+
class="form-horizontal"
3+
autocomplete="off"
4+
#createRoleForm="ngForm"
5+
(ngSubmit)="save()"
6+
>
7+
<abp-modal-header
8+
[title]="'CreateNewRole' | localize"
9+
(onCloseClick)="bsModalRef.hide()"
10+
></abp-modal-header>
11+
<div class="modal-body">
12+
<tabset>
13+
<tab [heading]="'Details' | localize" class="pt-3 px-2">
14+
<div class="form-group row required">
15+
<label class="col-md-3 col-form-label" for="name">
16+
{{ "Name" | localize }}
17+
</label>
18+
<div class="col-md-9">
19+
<input
20+
type="text"
21+
class="form-control"
22+
name="name"
23+
id="name"
24+
required
25+
minlength="2"
26+
maxlength="32"
27+
[(ngModel)]="role.name"
28+
#nameModel="ngModel"
29+
#nameEl
30+
/>
31+
<abp-validation-summary
32+
[control]="nameModel"
33+
[controlEl]="nameEl"
34+
></abp-validation-summary>
3935
</div>
4036
</div>
41-
</mat-tab>
42-
<mat-tab [label]="'Permissions' | localize">
43-
<br />
44-
<div class="row-fluid">
45-
<ng-template ngFor let-permission [ngForOf]="permissions">
37+
<div class="form-group row required">
38+
<label class="col-md-3 col-form-label" for="displayName">
39+
{{ "DisplayName" | localize }}
40+
</label>
41+
<div class="col-md-9">
42+
<input
43+
type="text"
44+
class="form-control"
45+
name="displayName"
46+
id="displayName"
47+
required
48+
minlength="2"
49+
maxlength="32"
50+
[(ngModel)]="role.displayName"
51+
#displayNameModel="ngModel"
52+
#displayNameEl
53+
/>
54+
<abp-validation-summary
55+
[control]="displayNameModel"
56+
[controlEl]="displayNameEl"
57+
></abp-validation-summary>
58+
</div>
59+
</div>
60+
<div class="form-group row mb-0">
61+
<label class="col-md-3 col-form-label" for="description">
62+
{{ "RoleDescription" | localize }}
63+
</label>
64+
<div class="col-md-9">
65+
<textarea
66+
type="text"
67+
class="form-control"
68+
name="description"
69+
id="description"
70+
[(ngModel)]="role.description"
71+
>
72+
</textarea>
73+
</div>
74+
</div>
75+
</tab>
76+
<tab [heading]="'Permissions' | localize" class="pt-3 px-2">
77+
<div class="form-group row mb-0">
78+
<ng-container *ngFor="let permission of permissions; let i = index">
4679
<div class="col-md-6">
47-
<div class="checkbox-wrapper">
48-
<mat-checkbox
80+
<div class="custom-control custom-checkbox">
81+
<input
82+
type="checkbox"
83+
class="custom-control-input"
84+
[id]="'permission_' + i"
4985
[checked]="isPermissionChecked(permission.name)"
50-
[disabled]="role.isStatic"
5186
(change)="onPermissionChange(permission, $event)"
52-
>
87+
/>
88+
<label class="custom-control-label" [for]="'permission_' + i">
5389
{{ permission.displayName }}
54-
</mat-checkbox>
90+
</label>
5591
</div>
5692
</div>
57-
</ng-template>
93+
</ng-container>
5894
</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(false)">
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>
95+
</tab>
96+
</tabset>
7597
</div>
98+
<abp-modal-footer
99+
[cancelDisabled]="saving"
100+
[saveDisabled]="!createRoleForm.form.valid || saving"
101+
(onCancelClick)="bsModalRef.hide()"
102+
></abp-modal-footer>
76103
</form>

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

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,39 @@
1-
import { Component, Injector, OnInit } from '@angular/core';
2-
import { MatDialogRef, MatCheckboxChange } from '@angular/material';
1+
import {
2+
Component,
3+
Injector,
4+
OnInit,
5+
EventEmitter,
6+
Output,
7+
} from '@angular/core';
38
import { finalize } from 'rxjs/operators';
9+
import { BsModalRef } from 'ngx-bootstrap/modal';
410
import * as _ from 'lodash';
511
import { AppComponentBase } from '@shared/app-component-base';
612
import {
713
RoleServiceProxy,
814
RoleDto,
9-
1015
PermissionDto,
1116
CreateRoleDto,
1217
PermissionDtoListResultDto
1318
} from '@shared/service-proxies/service-proxies';
1419

1520
@Component({
16-
templateUrl: 'create-role-dialog.component.html',
17-
styles: [
18-
`
19-
mat-form-field {
20-
width: 100%;
21-
}
22-
mat-checkbox {
23-
padding-bottom: 5px;
24-
}
25-
`
26-
]
21+
templateUrl: 'create-role-dialog.component.html'
2722
})
2823
export class CreateRoleDialogComponent extends AppComponentBase
2924
implements OnInit {
3025
saving = false;
31-
role: RoleDto = new RoleDto();
26+
role = new RoleDto();
3227
permissions: PermissionDto[] = [];
33-
grantedPermissionNames: string[] = [];
3428
checkedPermissionsMap: { [key: string]: boolean } = {};
3529
defaultPermissionCheckedStatus = true;
3630

31+
@Output() onSave = new EventEmitter<any>();
32+
3733
constructor(
3834
injector: Injector,
3935
private _roleService: RoleServiceProxy,
40-
private _dialogRef: MatDialogRef<CreateRoleDialogComponent>
36+
public bsModalRef: BsModalRef
4137
) {
4238
super(injector);
4339
}
@@ -52,7 +48,7 @@ export class CreateRoleDialogComponent extends AppComponentBase
5248
}
5349

5450
setInitialPermissionsStatus(): void {
55-
_.map(this.permissions, item => {
51+
_.map(this.permissions, (item) => {
5652
this.checkedPermissionsMap[item.name] = this.isPermissionChecked(
5753
item.name
5854
);
@@ -65,8 +61,8 @@ export class CreateRoleDialogComponent extends AppComponentBase
6561
return this.defaultPermissionCheckedStatus;
6662
}
6763

68-
onPermissionChange(permission: PermissionDto, $event: MatCheckboxChange) {
69-
this.checkedPermissionsMap[permission.name] = $event.checked;
64+
onPermissionChange(permission: PermissionDto, $event) {
65+
this.checkedPermissionsMap[permission.name] = $event.target.checked;
7066
}
7167

7268
getCheckedPermissions(): string[] {
@@ -82,25 +78,21 @@ export class CreateRoleDialogComponent extends AppComponentBase
8278
save(): void {
8379
this.saving = true;
8480

85-
this.role.grantedPermissions = this.getCheckedPermissions();
86-
87-
const role_ = new CreateRoleDto();
88-
role_.init(this.role);
81+
const role = new CreateRoleDto();
82+
role.init(this.role);
83+
role.grantedPermissions = this.getCheckedPermissions();
8984

9085
this._roleService
91-
.create(role_)
86+
.create(role)
9287
.pipe(
9388
finalize(() => {
9489
this.saving = false;
9590
})
9691
)
9792
.subscribe(() => {
9893
this.notify.info(this.l('SavedSuccessfully'));
99-
this.close(true);
94+
this.bsModalRef.hide();
95+
this.onSave.emit();
10096
});
10197
}
102-
103-
close(result: any): void {
104-
this._dialogRef.close(result);
105-
}
10698
}

0 commit comments

Comments
 (0)