diff options
Diffstat (limited to 'client/src/app/admin/users/user-list')
4 files changed, 76 insertions, 0 deletions
diff --git a/client/src/app/admin/users/user-list/index.ts b/client/src/app/admin/users/user-list/index.ts new file mode 100644 index 000000000..51fbefa80 --- /dev/null +++ b/client/src/app/admin/users/user-list/index.ts | |||
@@ -0,0 +1 @@ | |||
export * from './user-list.component'; | |||
diff --git a/client/src/app/admin/users/user-list/user-list.component.html b/client/src/app/admin/users/user-list/user-list.component.html new file mode 100644 index 000000000..2aca05f2b --- /dev/null +++ b/client/src/app/admin/users/user-list/user-list.component.html | |||
@@ -0,0 +1,24 @@ | |||
1 | <table class="table table-hover"> | ||
2 | <thead> | ||
3 | <tr> | ||
4 | <th>Id</th> | ||
5 | <th>Username</th> | ||
6 | <th class="text-right">Remove</th> | ||
7 | </tr> | ||
8 | </thead> | ||
9 | |||
10 | <tbody> | ||
11 | <tr *ngFor="let user of users"> | ||
12 | <td>{{ user.id }}</td> | ||
13 | <td>{{ user.username }}</td> | ||
14 | <td class="text-right"> | ||
15 | <span class="glyphicon glyphicon-remove" *ngIf="!user.isAdmin()" (click)="removeUser(user)"></span> | ||
16 | </td> | ||
17 | </tr> | ||
18 | </tbody> | ||
19 | </table> | ||
20 | |||
21 | <a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']"> | ||
22 | <span class="glyphicon glyphicon-plus"></span> | ||
23 | Add user | ||
24 | </a> | ||
diff --git a/client/src/app/admin/users/user-list/user-list.component.scss b/client/src/app/admin/users/user-list/user-list.component.scss new file mode 100644 index 000000000..e9f61e900 --- /dev/null +++ b/client/src/app/admin/users/user-list/user-list.component.scss | |||
@@ -0,0 +1,7 @@ | |||
1 | .glyphicon-remove { | ||
2 | cursor: pointer; | ||
3 | } | ||
4 | |||
5 | .add-user { | ||
6 | margin-top: 10px; | ||
7 | } | ||
diff --git a/client/src/app/admin/users/user-list/user-list.component.ts b/client/src/app/admin/users/user-list/user-list.component.ts new file mode 100644 index 000000000..598daa42a --- /dev/null +++ b/client/src/app/admin/users/user-list/user-list.component.ts | |||
@@ -0,0 +1,44 @@ | |||
1 | import { Component, OnInit } from '@angular/core'; | ||
2 | import { ROUTER_DIRECTIVES } from '@angular/router'; | ||
3 | |||
4 | import { User } from '../../../shared'; | ||
5 | import { UserService } from '../shared'; | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-user-list', | ||
9 | template: require('./user-list.component.html'), | ||
10 | styles: [ require('./user-list.component.scss') ], | ||
11 | directives: [ ROUTER_DIRECTIVES ] | ||
12 | }) | ||
13 | export class UserListComponent implements OnInit { | ||
14 | totalUsers: number; | ||
15 | users: User[]; | ||
16 | |||
17 | constructor(private userService: UserService) {} | ||
18 | |||
19 | ngOnInit() { | ||
20 | this.getUsers(); | ||
21 | } | ||
22 | |||
23 | getUsers() { | ||
24 | this.userService.getUsers().subscribe( | ||
25 | ({ users, totalUsers }) => { | ||
26 | this.users = users; | ||
27 | this.totalUsers = totalUsers; | ||
28 | }, | ||
29 | |||
30 | err => alert(err) | ||
31 | ); | ||
32 | } | ||
33 | |||
34 | |||
35 | removeUser(user: User) { | ||
36 | if (confirm('Are you sure?')) { | ||
37 | this.userService.removeUser(user).subscribe( | ||
38 | () => this.getUsers(), | ||
39 | |||
40 | err => alert(err) | ||
41 | ); | ||
42 | } | ||
43 | } | ||
44 | } | ||