Skip to content

Commit caa591b

Browse files
author
Vitor Durante
committed
Migrate tenant creation and edition to @angular/material components
1 parent 5228b27 commit caa591b

13 files changed

+264
-261
lines changed

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

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,36 +24,36 @@ import { RolesComponent } from '@app/roles/roles.component';
2424
import { CreateRoleComponent } from '@app/roles/create-role/create-role.component';
2525
import { EditRoleComponent } from './roles/edit-role/edit-role.component';
2626
import { TenantsComponent } from '@app/tenants/tenants.component';
27-
import { CreateTenantComponent } from './tenants/create-tenant/create-tenant.component';
28-
import { EditTenantComponent } from './tenants/edit-tenant/edit-tenant.component';
2927
import { TopBarComponent } from '@app/layout/topbar.component';
3028
import { TopBarLanguageSwitchComponent } from '@app/layout/topbar-languageswitch.component';
3129
import { SideBarUserAreaComponent } from '@app/layout/sidebar-user-area.component';
3230
import { SideBarNavComponent } from '@app/layout/sidebar-nav.component';
3331
import { SideBarFooterComponent } from '@app/layout/sidebar-footer.component';
3432
import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
33+
import { CreateTenantDialogComponent } from './tenants/create-tenant/create-tenant-dialog.component';
34+
import { EditTenantDialogComponent } from './tenants/edit-tenant/edit-tenant-dialog.component';
3535

3636
@NgModule({
3737
declarations: [
3838
AppComponent,
3939
HomeComponent,
4040
AboutComponent,
4141
TenantsComponent,
42-
CreateTenantComponent,
43-
EditTenantComponent,
42+
CreateTenantDialogComponent,
43+
EditTenantDialogComponent,
4444
UsersComponent,
45-
CreateUserComponent,
46-
EditUserComponent,
47-
RolesComponent,
48-
CreateRoleComponent,
49-
EditRoleComponent,
45+
CreateUserComponent,
46+
EditUserComponent,
47+
RolesComponent,
48+
CreateRoleComponent,
49+
EditRoleComponent,
5050
TopBarComponent,
5151
TopBarLanguageSwitchComponent,
5252
SideBarUserAreaComponent,
5353
SideBarNavComponent,
5454
SideBarFooterComponent,
5555
RightSideBarComponent
56-
56+
5757
],
5858
imports: [
5959
CommonModule,
@@ -69,6 +69,10 @@ import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
6969
],
7070
providers: [
7171

72+
],
73+
entryComponents: [
74+
CreateTenantDialogComponent,
75+
EditTenantDialogComponent
7276
]
7377
})
7478
export class AppModule { }

‎angular/src/app/tenants/create-tenant/create-tenant-dialog.component.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<form autocomplete="off"
2+
#createTenantForm="ngForm"
3+
(ngSubmit)="save()">
4+
<h1 mat-dialog-title>{{ "CreateNewTenant" | localize }}</h1>
5+
<mat-dialog-content>
6+
<mat-form-field>
7+
<input matInput
8+
name="TenancyName"
9+
[(ngModel)]="tenant.tenancyName"
10+
required
11+
minlength="2"
12+
maxlength="64"
13+
[placeholder]="'TenancyName' | localize">
14+
</mat-form-field>
15+
<mat-form-field>
16+
<input matInput
17+
name="Name"
18+
[(ngModel)]="tenant.name"
19+
required
20+
maxlength="128"
21+
[placeholder]="'Name' | localize">
22+
</mat-form-field>
23+
<mat-form-field>
24+
<input matInput
25+
name="ConnectionString"
26+
[(ngModel)]="tenant.connectionString"
27+
maxlength="1024"
28+
[placeholder]="'DatabaseConnectionString' | localize">
29+
</mat-form-field>
30+
<mat-form-field>
31+
<input matInput
32+
type="email"
33+
name="AdminEmailAddress"
34+
[(ngModel)]="tenant.adminEmailAddress"
35+
required
36+
maxlength="256"
37+
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$"
38+
[placeholder]="'AdminEmailAddress' | localize">
39+
</mat-form-field>
40+
<div class="checkbox-wrapper">
41+
<mat-checkbox name="IsActive"
42+
[(ngModel)]="tenant.isActive"
43+
style="padding-bottom: 5px">{{ "IsActive" | localize }}</mat-checkbox>
44+
</div>
45+
46+
<p>{{ "DefaultPasswordIs" | localize }} 123qwe</p>
47+
</mat-dialog-content>
48+
<div mat-dialog-actions
49+
align="end">
50+
<button mat-button
51+
type="button"
52+
[disabled]="saving"
53+
(click)="close()">{{ "Cancel" | localize }}</button>
54+
<button mat-flat-button
55+
type="submit"
56+
flex="15"
57+
color="primary"
58+
[disabled]="!createTenantForm.form.valid || saving">{{ "Save" | localize }}</button>
59+
</div>
60+
</form>

‎angular/src/app/tenants/create-tenant/create-tenant-dialog.component.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
3+
import { Component, Injector, OnInit } from '@angular/core';
4+
import { AppComponentBase } from '@shared/app-component-base';
5+
import { MatDialogRef, MatSnackBar } from '@angular/material';
6+
import { CreateTenantDto, TenantServiceProxy } from '@shared/service-proxies/service-proxies';
7+
import { finalize } from 'rxjs/operators';
8+
@Component({
9+
selector: 'create-tenant-dialog',
10+
templateUrl: 'create-tenant-dialog.component.html',
11+
styles: [`
12+
mat-form-field {
13+
width: 100%
14+
}
15+
`]
16+
})
17+
export class CreateTenantDialogComponent extends AppComponentBase implements OnInit {
18+
19+
saving: boolean = false;
20+
tenant: CreateTenantDto = null;
21+
22+
constructor(
23+
injector: Injector,
24+
public dialogRef: MatDialogRef<CreateTenantDialogComponent>,
25+
private _tenantService: TenantServiceProxy) {
26+
super(injector);
27+
}
28+
29+
ngOnInit(): void {
30+
this.tenant = new CreateTenantDto();
31+
this.tenant.isActive = true;
32+
}
33+
34+
save(): void {
35+
this.saving = true;
36+
this._tenantService.create(this.tenant)
37+
.pipe(finalize(() => { this.saving = false; }))
38+
.subscribe(() => {
39+
this.notify.info(this.l('SavedSuccessfully'));
40+
this.close(true);
41+
})
42+
}
43+
44+
close(result: any): void {
45+
this.dialogRef.close(result);
46+
}
47+
}

‎angular/src/app/tenants/create-tenant/create-tenant.component.html

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

‎angular/src/app/tenants/create-tenant/create-tenant.component.ts

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

‎angular/src/app/tenants/edit-tenant/edit-tenant-dialog.component.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<form autocomplete="off"
2+
#createTenantForm="ngForm"
3+
(ngSubmit)="save()"
4+
*ngIf="active">
5+
<h1 mat-dialog-title>{{ "EditTenant" | localize }}</h1>
6+
<mat-dialog-content>
7+
<mat-form-field>
8+
<input matInput
9+
name="TenancyName"
10+
[(ngModel)]="tenant.tenancyName"
11+
required
12+
minlength="2"
13+
maxlength="64"
14+
[placeholder]="'TenancyName' | localize">
15+
</mat-form-field>
16+
<mat-form-field>
17+
<input matInput
18+
name="Name"
19+
[(ngModel)]="tenant.name"
20+
required
21+
maxlength="128"
22+
[placeholder]="'Name' | localize">
23+
</mat-form-field>
24+
<div class="checkbox-wrapper">
25+
<mat-checkbox name="IsActive"
26+
[(ngModel)]="tenant.isActive"
27+
style="padding-bottom: 5px">{{ "IsActive" | localize }}</mat-checkbox>
28+
</div>
29+
</mat-dialog-content>
30+
<div mat-dialog-actions
31+
align="end">
32+
<button mat-button
33+
type="button"
34+
[disabled]="saving"
35+
(click)="close()">{{ "Cancel" | localize }}</button>
36+
<button mat-flat-button
37+
type="submit"
38+
flex="15"
39+
color="primary"
40+
[disabled]="!createTenantForm.form.valid || saving">{{ "Save" | localize }}</button>
41+
</div>
42+
</form>

‎angular/src/app/tenants/edit-tenant/edit-tenant-dialog.component.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
2+
3+
import { Component, Injector, OnInit, Inject } from '@angular/core';
4+
import { AppComponentBase } from '@shared/app-component-base';
5+
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
6+
import { CreateTenantDto, TenantServiceProxy, TenantDto } from '@shared/service-proxies/service-proxies';
7+
import { finalize } from 'rxjs/operators';
8+
@Component({
9+
selector: 'edit-tenant-dialog',
10+
templateUrl: 'edit-tenant-dialog.component.html',
11+
styles: [`
12+
mat-form-field {
13+
width: 100%
14+
}
15+
`]
16+
})
17+
export class EditTenantDialogComponent extends AppComponentBase implements OnInit {
18+
19+
active: boolean = false;
20+
saving: boolean = false;
21+
tenant: TenantDto = null;
22+
23+
constructor(
24+
injector: Injector,
25+
public dialogRef: MatDialogRef<EditTenantDialogComponent>,
26+
@Inject(MAT_DIALOG_DATA) public id: number,
27+
private _tenantService: TenantServiceProxy) {
28+
super(injector);
29+
}
30+
31+
ngOnInit(): void {
32+
this._tenantService.get(this.id)
33+
.pipe(finalize(() => {
34+
this.active = true;
35+
}))
36+
.subscribe((result: TenantDto) => {
37+
this.tenant = result;
38+
});
39+
}
40+
41+
save(): void {
42+
this.saving = true;
43+
this._tenantService.update(this.tenant)
44+
.pipe(finalize(() => { this.saving = false; }))
45+
.subscribe(() => {
46+
this.notify.info(this.l('SavedSuccessfully'));
47+
this.close(true);
48+
})
49+
}
50+
51+
close(result: any): void {
52+
this.active = false;
53+
this.dialogRef.close(result);
54+
}
55+
}

0 commit comments

Comments
 (0)