Skip to content

Commit c6f16b6

Browse files
author
Vitor Durante
committed
Migrate users page to @angular/material components
1 parent 9d00d22 commit c6f16b6

File tree

1 file changed

+55
-29
lines changed

1 file changed

+55
-29
lines changed

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

Lines changed: 55 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,96 @@
1-
<div class="row clearfix" [@routerTransition]>
1+
<div class="row clearfix"
2+
[@routerTransition]>
23
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
34
<div class="card main-content">
45
<div class="header">
56
<h2>
67
{{ 'Users' | localize }}
78
</h2>
89
<ul class="header-dropdown m-r--5">
9-
<i class="fa fa-spin fa-spinner" *ngIf="isTableLoading"></i>
10-
<li class="dropdown">
11-
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
12-
<i class="material-icons">more_vert</i>
13-
</a>
14-
<ul class="dropdown-menu pull-right">
15-
<li><a href="javascript:void(0);" class=" waves-effect waves-block()" (click)="refresh();"><i class="material-icons">refresh</i> {{ 'Refresh' | localize }}</a></li>
16-
</ul>
10+
<li>
11+
<button mat-icon-button
12+
[matMenuTriggerFor]="headerMenu"
13+
style="bottom: 10px;">
14+
<mat-icon>more_vert</mat-icon>
15+
</button>
16+
<mat-menu #headerMenu="matMenu">
17+
<button mat-menu-item
18+
(click)="refresh()">
19+
<mat-icon>refresh</mat-icon>
20+
<span>{{ 'Refresh' | localize }}</span>
21+
</button>
22+
</mat-menu>
1723
</li>
1824
</ul>
1925
</div>
2026
<div class="body table-responsive">
2127

22-
<!-- ******************************************************** -->
23-
<table class="table table-hover table-striped">
28+
<!-- ******************************************************** -->
29+
<table class="table table-hover table-striped" [busy]="isTableLoading">
2430
<thead>
2531
<tr>
32+
<th>{{ 'Actions' | localize }}</th>
2633
<th>{{ 'UserName' | localize }}</th>
2734
<th>{{ 'FullName' | localize }}</th>
2835
<th>{{ 'EmailAddress' | localize }}</th>
2936
<th>
3037
<div style="text-align:center">{{ 'IsActive' | localize }}</div>
3138
</th>
32-
<th>{{ 'Actions' | localize }}</th>
3339
</tr>
3440
</thead>
3541
<tbody>
3642
<tr *ngFor="let user of users | paginate: { id: 'server', itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItems }">
43+
<td>
44+
<button mat-icon-button
45+
[matMenuTriggerFor]="actionsMenu">
46+
<mat-icon>menu</mat-icon>
47+
</button>
48+
<mat-menu #actionsMenu="matMenu">
49+
<button mat-menu-item
50+
(click)="editUser(user)">
51+
<mat-icon>edit</mat-icon>
52+
<span>{{ 'Edit' | localize }}</span>
53+
</button>
54+
<button mat-menu-item
55+
(click)="delete(user)">
56+
<mat-icon>delete</mat-icon>
57+
<span>{{ 'Delete' | localize }}</span>
58+
</button>
59+
</mat-menu>
60+
</td>
3761
<td>{{user.userName}}</td>
3862
<td>{{user.fullName}}</td>
3963
<td>{{user.emailAddress}}</td>
4064
<td align="center">
41-
<i class="material-icons" *ngIf="user.isActive" style="color:green;">check_box</i>
42-
<i class="material-icons" *ngIf="!user.isActive" style="color:red;">indeterminate_check_box</i>
43-
</td>
44-
<td class="dropdown">
45-
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
46-
<i class="material-icons">menu</i>
47-
</a>
48-
<ul class="dropdown-menu pull-right">
49-
<li><a href="javascript:void(0);" class="waves-effect waves-block" (click)="editUser(user)"><i class="material-icons">create</i>{{ 'Edit' | localize }}</a></li>
50-
<li><a href="javascript:void(0);" class="waves-effect waves-block" (click)="delete(user)"><i class="material-icons">delete_sweep</i>{{ 'Delete' | localize }}</a></li>
51-
</ul>
65+
<i class="material-icons"
66+
*ngIf="user.isActive"
67+
style="color:green;">check_box</i>
68+
<i class="material-icons"
69+
*ngIf="!user.isActive"
70+
style="color:red;">indeterminate_check_box</i>
5271
</td>
5372
</tr>
5473
</tbody>
5574
</table>
56-
<!-- ******************************************************** -->
75+
<!-- ******************************************************** -->
5776

58-
<div class="text-align: center;" *ngIf="totalItems > pageSize">
59-
<abp-pagination-controls (pageChange)="getDataPage($event)" id="server"></abp-pagination-controls>
77+
<div class="text-align: center;"
78+
*ngIf="totalItems > pageSize">
79+
<abp-pagination-controls (pageChange)="getDataPage($event)"
80+
id="server"></abp-pagination-controls>
6081
</div>
61-
<button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createUser()">
82+
<button type="button"
83+
data-toggle="modal"
84+
class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right"
85+
(click)="createUser()">
6286
<i class="material-icons">add</i>
6387
</button>
6488
</div>
6589
</div>
6690
</div>
6791
</div>
6892

69-
<create-user-modal #createUserModal (modalSave)="refresh()"></create-user-modal>
70-
<edit-user-modal #editUserModal (modalSave)="refresh()"></edit-user-modal>
93+
<create-user-modal #createUserModal
94+
(modalSave)="refresh()"></create-user-modal>
95+
<edit-user-modal #editUserModal
96+
(modalSave)="refresh()"></edit-user-modal>

0 commit comments

Comments
 (0)