31.6. Users Table Component Base Implementation (#31)

support-portal-frontend/src/app/app.module.ts

@@ -18,7 +18,6 @@ import {UsersComponent} from './component/management/users/users.component';
 import {SettingsComponent} from './component/management/settings/settings.component';
 import {ProfileComponent} from './component/management/profile/profile.component';
 import {UsersTableComponent} from './component/management/users/users-table/users-table.component';
-import {UserRowComponent} from './component/management/users/users-table/user-row/user-row.component';
 import {UserViewComponent} from './component/management/users/user-view/user-view.component';
 import {UserEditComponent} from './component/management/users/user-edit/user-edit.component';
 
@@ -33,7 +32,6 @@ import {UserEditComponent} from './component/management/users/user-edit/user-edi
     SettingsComponent,
     ProfileComponent,
     UsersTableComponent,
-    UserRowComponent,
     UserViewComponent,
     UserEditComponent
   ],

support-portal-frontend/src/app/component/management/users/users-table/user-row/user-row.component.html

@@ -1 +0,0 @@
-<p>user-row works!</p>

support-portal-frontend/src/app/component/management/users/users-table/user-row/user-row.component.ts

@@ -1,15 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-
-@Component({
-  selector: 'app-user-row',
-  templateUrl: './user-row.component.html',
-  styleUrls: ['./user-row.component.css']
-})
-export class UserRowComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

support-portal-frontend/src/app/component/management/users/users-table/users-table.component.html

@@ -1,2 +1,41 @@
-<p>users-table works!</p>
+<table class="table table-hover">
-<app-user-row class="row" *ngFor="let i of [1,2,3]"></app-user-row>
+  <thead class="table-borderless">
+  <tr class="text-center">
+    <th>Photo</th>
+    <th>User ID</th>
+    <th>First Name</th>
+    <th>Last Name</th>
+    <th>Username</th>
+    <th>Email</th>
+    <th>Status</th>
+    <th>Actions</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr class="text-center" *ngFor="let user of users">
+    <td (click)="onSelectUser(user)">
+      <img height="40" width="40" src="{{user?.profileImageUrl}}"
+           class="rounded-circle img-fluid img-thumbnail" alt=""/>
+    </td>
+    <td (click)="onSelectUser(user)">{{user.userId}}</td>
+    <td (click)="onSelectUser(user)">{{user.firstName}}</td>
+    <td (click)="onSelectUser(user)">{{user.lastName}}</td>
+    <td (click)="onSelectUser(user)">{{user.username}}</td>
+    <td (click)="onSelectUser(user)">{{user.email}}</td>
+    <td (click)="onSelectUser(user)">
+    <span class="badge" [ngClass]="{ 'bg-success': user?.active, 'bg-danger': !user?.active }">
+      {{user?.active ? 'Active' : 'Inactive'}}
+    </span>
+    </td>
+    <td class="">
+      <div class="btn-group">
+        <button class="btn btn-outline-info" (click)="onEditUser(user)"><i class="fas fa-edit"></i></button>
+        <button *ngIf="isAdmin" class="btn btn-outline-danger" (click)="onDeleteUser(user)"><i
+          class="fas fa-trash"></i>
+        </button>
+      </div>
+    </td>
+  </tr>
+
+  </tbody>
+</table>

support-portal-frontend/src/app/component/management/users/users-table/users-table.component.ts

@@ -1,15 +1,75 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {User} from "../../../../model/user";
+import {NotificationType} from "../../../../notification/notification-type";
+import {HttpErrorResponse} from "@angular/common/http";
+import {SubSink} from "subsink";
+import {UserService} from "../../../../service/user.service";
+import {NotificationService} from "../../../../service/notification.service";
+import {AuthenticationService} from "../../../../service/authentication.service";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'app-users-table',
   templateUrl: './users-table.component.html',
   styleUrls: ['./users-table.component.css']
 })
-export class UsersTableComponent implements OnInit {
+export class UsersTableComponent implements OnInit, OnDestroy {
 
-  constructor() { }
+  public users: User[] = [];
+
+  public refreshing: boolean;
+  private subs = new SubSink();
+
+  constructor(private userService: UserService,
+              private notificationService: NotificationService,
+              private authenticationService: AuthenticationService,
+              private router: Router) {
+  }
 
   ngOnInit(): void {
+    this.getUsers(true);
+  }
+
+  ngOnDestroy(): void {
+    this.subs.unsubscribe();
+  }
+
+  public getUsers(showNotification: boolean) {
+    this.refreshing = true;
+
+    this.subs.sink = this.userService.getAllUsers()
+      .subscribe(
+        usersPage => {
+          this.users = usersPage.content;
+          this.userService.addUsersToLocalStorage(this.users);
+          if (showNotification)
+            this.notificationService.notify(NotificationType.SUCCESS, `${this.users.length} users loaded successfully`)
+        },
+        (errorResponse: HttpErrorResponse) => {
+          this.notificationService.notify(NotificationType.ERROR, errorResponse.error.message);
+          this.refreshing = false;
+        },
+        () => {
+          this.refreshing = false;
+        }
+      );
+
+  }
+
+  public get isAdmin(): boolean {
+    return this.authenticationService.isLoggedUserHasRoleAdmin();
+  }
+
+  onSelectUser(user: User) {
+    console.log(`User ${user.username} is selected`);
+  }
+
+  onEditUser(user: User) {
+    console.log(`User ${user.username} is clicked to be edited`);
+  }
+
+  onDeleteUser(user: User) {
+    console.log(`User ${user.username} is clicked to be deleted`);
   }
 
 }

support-portal-frontend/src/app/component/management/users/users.component.html

@@ -1,3 +1,4 @@
-<p>users works!</p>
+<div class="tab-pane fade show active" id="users">
-<app-users-table></app-users-table>
+  <app-users-table></app-users-table>
-<router-outlet></router-outlet>
+  <router-outlet></router-outlet>
+</div>