Skip to content

Commit 4e8222e

Browse files
hikalkanhikalkan
committed
User list and create modal completed.
1 parent 7fc89f1 commit 4e8222e

File tree

4 files changed

+82
-48
lines changed

4 files changed

+82
-48
lines changed

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

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<div bsModal #createUserModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" [config]="{backdrop: 'static'}">
1+
<div bsModal #createUserModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" [config]="{backdrop: 'static'}">
22
<div class="modal-dialog">
33

4-
<div class="modal-content">
4+
<div #modalContent class="modal-content">
55

66
<form *ngIf="active" #createUserForm="ngForm" novalidate (ngSubmit)="save()">
77

@@ -15,36 +15,45 @@ <h4 class="modal-title">
1515
</div>
1616

1717
<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">
18+
<div class="form-group form-float">
19+
<div class="form-line">
20+
<input class="form-control" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2">
21+
<label class="form-label">{{l("UserName")}}</label>
22+
</div>
2123
</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">
24+
<div class="form-group form-float">
25+
<div class="form-line">
26+
<input type="text" name="Name" class="form-control" [(ngModel)]="user.name" required maxlength="32">
27+
<label class="form-label">{{l("Name")}}</label>
28+
</div>
2529
</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">
30+
<div class="form-group form-float">
31+
<div class="form-line">
32+
<input type="text" name="Surname" class="form-control" [(ngModel)]="user.surname" required maxlength="32">
33+
<label class="form-label">{{l("Surname")}}</label>
34+
</div>
2935
</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,})+$">
36+
<div class="form-group form-float">
37+
<div class="form-line">
38+
<input type="email" name="EmailAddress" class="form-control" [(ngModel)]="user.emailAddress" maxlength="256" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$">
39+
<label class="form-label">{{l("EmailAddress")}}</label>
40+
</div>
3341
</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">
42+
<div class="form-group form-float">
43+
<div class="form-line">
44+
<input type="password" name="Password" class="form-control" [(ngModel)]="user.password" required maxlength="32">
45+
<label class="form-label">{{l("Password")}}</label>
46+
</div>
3747
</div>
3848
<div class="checkbox">
39-
<label>
40-
<input type="checkbox" name="IsActive" value="true" value="true" [(ngModel)]="user.isActive" checked="checked"> {{l("IsActive")}}
41-
</label>
49+
<input type="checkbox" name="IsActive" value="true" id="CreateUserIsActive" [(ngModel)]="user.isActive" class="filled-in" checked />
50+
<label for="CreateUserIsActive">{{l("IsActive")}}</label>
4251
</div>
4352
</div>
4453

4554
<div class="modal-footer">
4655
<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>
56+
<button type="submit" class="btn btn-primary blue" [disabled]="!createUserForm.form.valid">{{l("Save")}}</button>
4857
</div>
4958

5059
</form>

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { ModalDirective } from 'ngx-bootstrap';
33
import { UserServiceProxy, CreateUserInput } from '@shared/service-proxies/service-proxies';
44
import { AppComponentBase } from '@shared/app-component-base';
5-
import { AppConsts } from '@shared/AppConsts';
5+
import { NgForm } from '@angular/forms';
66

77
import * as _ from "lodash";
88

@@ -13,6 +13,7 @@ import * as _ from "lodash";
1313
export class CreateUserModalComponent extends AppComponentBase {
1414

1515
@ViewChild('createUserModal') modal: ModalDirective;
16+
@ViewChild('modalContent') modalContent: ElementRef;
1617

1718
@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
1819

@@ -30,7 +31,11 @@ export class CreateUserModalComponent extends AppComponentBase {
3031
show(): void {
3132
this.active = true;
3233
this.modal.show();
33-
this.user = new CreateUserInput({ isActive: false });
34+
this.user = new CreateUserInput({ isActive: true });
35+
}
36+
37+
onShown(): void {
38+
($ as any).AdminBSB.input.activate($(this.modalContent.nativeElement));
3439
}
3540

3641
save(): void {

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

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,47 @@
1-
<div [@routerTransition]>
2-
<h1>{{l('Users')}}</h1>
3-
<div class="row">
4-
<div class="col-md-12">
5-
<button data-toggle="modal" 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>
1+
<div class="row clearfix" [@routerTransition]>
2+
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
3+
<div class="card">
4+
<div class="header">
5+
<h2>
6+
{{l('Users')}}
7+
</h2>
8+
<ul class="header-dropdown m-r--5">
9+
<li class="dropdown">
10+
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
11+
<i class="material-icons">more_vert</i>
12+
</a>
13+
<ul class="dropdown-menu pull-right">
14+
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Action</a></li>
15+
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Another action</a></li>
16+
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Something else here</a></li>
17+
</ul>
18+
</li>
19+
</ul>
20+
</div>
21+
<div class="body table-responsive">
22+
<table class="table">
23+
<thead>
24+
<tr>
25+
<th>{{l('UserName')}}</th>
26+
<th>{{l('FullName')}}</th>
27+
<th>{{l('EmailAddress')}}</th>
28+
<th>{{l('IsActive')}}</th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<tr *ngFor="let user of users">
33+
<td>{{user.userName}}</td>
34+
<td>{{user.fullName}}</td>
35+
<td>{{user.emailAddress}}</td>
36+
<td>{{user.isActive ? l('Yes') : l('No')}}</td>
37+
</tr>
38+
</tbody>
39+
</table>
40+
<button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createUser()">
41+
<i class="material-icons">add</i>
42+
</button>
43+
</div>
2444
</div>
2545
</div>
2646
</div>
27-
<createUserModal #createUserModal (modalSave)="getUsers()"></createUserModal>
47+
<createUserModal #createUserModal (modalSave)="getUsers()"></createUserModal>

‎aspnet-core/src/AbpCompanyName.AbpProjectName.Web.Mvc/Views/Users/Index.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
<label class="form-label">@L("Password")</label>
104104
</div>
105105
</div>
106-
<div class="demo-checkbox">
106+
<div class="checkbox">
107107
<input type="checkbox" name="IsActive" value="true" id="CreateUserIsActive" class="filled-in" checked />
108108
<label for="CreateUserIsActive">@L("IsActive")</label>
109109
</div>

0 commit comments

Comments
 (0)