Skip to content

Commit 5b5d6cf

Browse files
ismcagdasismcagdas
committed
#14: users page implemented.
1 parent dc452aa commit 5b5d6cf

File tree

10 files changed

+215
-4
lines changed

10 files changed

+215
-4
lines changed

‎angular/src/account/account.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { NgModule, APP_INITIALIZER } from '@angular/core';
33
import { FormsModule } from '@angular/forms';
44
import { HttpModule, JsonpModule } from '@angular/http';
5-
import { ModalModule } from 'ng2-bootstrap/modal';
5+
import { ModalModule } from 'ng2-bootstrap';
66

77
import { AbpModule } from '@abp/abp.module';
88

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { AppComponent } from './app.component';
44
import { AppRouteGuard } from '@shared/common/auth/auth-route-guard';
55
import { HomeComponent } from './home/home.component';
66
import { AboutComponent } from './about/about.component';
7+
import { UsersComponent } from './users/users.component';
8+
import { TenantsComponent } from './tenants/tenants.component';
79

810
@NgModule({
911
imports: [
@@ -13,6 +15,8 @@ import { AboutComponent } from './about/about.component';
1315
component: AppComponent,
1416
children: [
1517
{ path: 'home', component: HomeComponent, canActivate: [AppRouteGuard] },
18+
{ path: 'users', component: UsersComponent, canActivate: [AppRouteGuard] },
19+
{ path: 'tenants', component: TenantsComponent, canActivate: [AppRouteGuard] },
1620
{ path: 'about', component: AboutComponent }
1721
]
1822
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,19 @@ import { AppConsts } from '@shared/AppConsts';
1818

1919
import { HomeComponent } from '@app/home/home.component';
2020
import { AboutComponent } from '@app/about/about.component';
21+
import { UsersComponent } from '@app/users/users.component';
22+
import { CreateUserModalComponent } from '@app/users/create-user-modal.component';
23+
import { TenantsComponent } from '@app/tenants/tenants.component';
24+
2125

2226
@NgModule({
2327
declarations: [
2428
AppComponent,
2529
HomeComponent,
26-
AboutComponent
30+
AboutComponent,
31+
UsersComponent,
32+
CreateUserModalComponent,
33+
TenantsComponent
2734
],
2835
imports: [
2936
ngCommon.CommonModule,

‎angular/src/app/tenants/tenants.component.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title></title>
6+
</head>
7+
<body>
8+
Tenants...
9+
</body>
10+
</html>

‎angular/src/app/tenants/tenants.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, Injector, AfterViewInit } from '@angular/core';
2+
import { AppComponentBase } from '@shared/common/app-component-base';
3+
import { appModuleAnimation } from '@shared/animations/routerTransition';
4+
5+
@Component({
6+
templateUrl: './tenants.component.html',
7+
animations: [appModuleAnimation()]
8+
})
9+
export class TenantsComponent extends AppComponentBase {
10+
11+
constructor(
12+
injector: Injector
13+
) {
14+
super(injector);
15+
}
16+
}

‎angular/src/app/users/create-user-modal.component.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<div bsModal #createUserModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" [config]="{backdrop: 'static'}">
2+
<div class="modal-dialog">
3+
4+
<div class="modal-content">
5+
6+
<form *ngIf="active" #createUserForm="ngForm" novalidate (ngSubmit)="save()">
7+
8+
<div class="modal-header">
9+
<button type="button" class="close" (click)="close()" aria-label="Close">
10+
<span aria-hidden="true">&times;</span>
11+
</button>
12+
<h4 class="modal-title">
13+
<span>{{l("ChangeTenant")}}</span>
14+
</h4>
15+
</div>
16+
17+
<div class="modal-body">
18+
<div class="form-group">
19+
<label>{{l("UserName")}}</label>
20+
<input class="form-control" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2">
21+
</div>
22+
<div class="form-group">
23+
<label>{{l("Name")}}</label>
24+
<input type="text" name="Name" class="form-control" [(ngModel)]="user.name" required maxlength="32">
25+
</div>
26+
<div class="form-group">
27+
<label>{{l("Surname")}}</label>
28+
<input type="text" name="Surname" class="form-control" [(ngModel)]="user.surname" required maxlength="32">
29+
</div>
30+
<div class="form-group">
31+
<label>{{l("EmailAddress")}}</label>
32+
<input type="email" name="EmailAddress" class="form-control" [(ngModel)]="user.emailAddress" maxlength="256" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$">
33+
</div>
34+
<div class="form-group">
35+
<label>{{l("Password")}}</label>
36+
<input type="password" name="Password" class="form-control" [(ngModel)]="user.password" required maxlength="32">
37+
</div>
38+
<div class="checkbox">
39+
<label>
40+
<input type="checkbox" name="IsActive" value="true" value="true" [(ngModel)]="user.isActive" checked="checked"> {{l("IsActive")}}
41+
</label>
42+
</div>
43+
</div>
44+
45+
<div class="modal-footer">
46+
<button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">{{l("Cancel")}}</button>
47+
<button type="submit" class="btn btn-primary blue" [disabled]="!createUserForm.form.valid"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button>
48+
</div>
49+
50+
</form>
51+
52+
</div>
53+
</div>
54+
</div>

‎angular/src/app/users/create-user-modal.component.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Component, ViewChild, Injector, Output, EventEmitter, ElementRef } from '@angular/core';
2+
import { ModalDirective } from 'ng2-bootstrap';
3+
import { UserServiceProxy, CreateUserInput } from '@shared/service-proxies/service-proxies';
4+
import { AppComponentBase } from '@shared/common/app-component-base';
5+
import { AppConsts } from '@shared/AppConsts';
6+
7+
import * as _ from "lodash";
8+
9+
@Component({
10+
selector: 'createUserModal',
11+
templateUrl: './create-user-modal.component.html'
12+
})
13+
export class CreateUserModalComponent extends AppComponentBase {
14+
15+
@ViewChild('createUserModal') modal: ModalDirective;
16+
17+
@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
18+
19+
active: boolean = false;
20+
saving: boolean = false;
21+
user: CreateUserInput = null;
22+
23+
constructor(
24+
injector: Injector,
25+
private _userService: UserServiceProxy
26+
) {
27+
super(injector);
28+
}
29+
30+
show(): void {
31+
this.active = true;
32+
this.modal.show();
33+
this.user = new CreateUserInput({ isActive: false });
34+
}
35+
36+
save(): void {
37+
38+
this.saving = true;
39+
this._userService.createUser(this.user)
40+
.finally(() => { this.saving = false; })
41+
.subscribe(() => {
42+
this.notify.info(this.l('SavedSuccessfully'));
43+
this.close();
44+
this.modalSave.emit(null);
45+
});
46+
}
47+
48+
close(): void {
49+
this.active = false;
50+
this.modal.hide();
51+
}
52+
}

‎angular/src/app/users/users.component.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div>
2+
<h1>{{l('Users')}}</h1>
3+
<div class="row">
4+
<div class="col-md-12">
5+
<button data-toggle="modal" data-target="#createUserModal" class="btn btn-primary pull-right" (click)="createUser()"><i class="fa fa-plus"></i> {{l('CreateNewUser')}}</button>
6+
<table class="table">
7+
<thead>
8+
<tr>
9+
<th>{{l('UserName')}}</th>
10+
<th>{{l('FullName')}}</th>
11+
<th>{{l('EmailAddress')}}</th>
12+
<th>{{l('IsActive')}}</th>
13+
</tr>
14+
</thead>
15+
<tbody>
16+
<tr *ngFor="let user of users">
17+
<td>{{user.userName}}</td>
18+
<td>{{user.fullName}}</td>
19+
<td>{{user.emailAddress}}</td>
20+
<td>{{user.isActive ? l('Yes') : l('No')}}</td>
21+
</tr>
22+
</tbody>
23+
</table>
24+
</div>
25+
</div>
26+
</div>
27+
<createUserModal #createUserModal (modalSave)="getUsers()"></createUserModal>

‎angular/src/app/users/users.component.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Component, Injector, OnInit, ViewChild } from '@angular/core';
2+
import { AppComponentBase } from '@shared/common/app-component-base';
3+
import { appModuleAnimation } from '@shared/animations/routerTransition';
4+
import { UserServiceProxy, UserListDto } from '@shared/service-proxies/service-proxies';
5+
6+
import { CreateUserModalComponent } from './create-user-modal.component';
7+
8+
@Component({
9+
templateUrl: './users.component.html',
10+
animations: [appModuleAnimation()]
11+
})
12+
export class UsersComponent extends AppComponentBase implements OnInit {
13+
14+
@ViewChild('createUserModal') createUserModal: CreateUserModalComponent;
15+
users: UserListDto[] = [];
16+
17+
constructor(
18+
injector: Injector,
19+
private _userService: UserServiceProxy
20+
) {
21+
super(injector);
22+
}
23+
24+
ngOnInit() {
25+
this.getUsers();
26+
}
27+
28+
getUsers(): void {
29+
this._userService.getUsers()
30+
.subscribe((result) => {
31+
this.users = result.items;
32+
});
33+
}
34+
35+
createUser(): void {
36+
console.log("creat it...");
37+
this.createUserModal.show();
38+
}
39+
}

‎angular/src/root.module.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,19 @@ import { API_BASE_URL } from '@shared/service-proxies/service-proxies';
1313

1414
import { RootComponent } from './root.component';
1515
import { AppPreBootstrap } from './AppPreBootstrap';
16+
import { ModalModule } from 'ng2-bootstrap';
17+
1618

1719
export function appInitializerFactory(injector: Injector) {
1820
return () => {
19-
console.log("appInitializerFactory");
21+
2022
abp.ui.setBusy();
2123
return new Promise<boolean>((resolve, reject) => {
2224
AppPreBootstrap.run(() => {
2325
var appSessionService: AppSessionService = injector.get(AppSessionService);
2426
appSessionService.init().then(
2527
(result) => {
2628
abp.ui.clearBusy();
27-
console.log("session init");
2829
resolve(result);
2930
},
3031
(err) => {
@@ -45,6 +46,7 @@ export function getRemoteServiceBaseUrl(): string {
4546
imports: [
4647
BrowserModule,
4748
SharedModule.forRoot(),
49+
ModalModule.forRoot(),
4850
AbpModule,
4951
ServiceProxyModule,
5052
RootRoutingModule

0 commit comments

Comments
 (0)