fix: #569 fix PR comments by Rene

Author: PaulRC-ioet

src/app/modules/users/components/users-list/users-list.component.html

@@ -1,20 +1,24 @@
 <table *ngIf="users" class="table table-sm table-bordered table-striped mb-0" datatable [dtTrigger]="dtTrigger">
   <thead class="thead-blue">
     <tr class="d-flex">
-      <th class="col-3">User Email</th>
-      <th class="col-3">Names</th>
-      <th class="col-3">Role</th>
-      <th class="col-3 text-center">Options</th>
+      <th class="col-4">User Email</th>
+      <th class="col-4">Names</th>
+      <th class="col-4 text-center">Admin Role</th>
     </tr>
   </thead>
   <app-loading-bar *ngIf="isLoading$ | async"></app-loading-bar>
   <tbody *ngIf="(isLoading$ | async) === false">
     <tr class="d-flex" *ngFor="let user of users">
-      <td class="col-sm-3">{{ user.email }}</td>
-      <td class="col-sm-3">{{ user.name }}</td>
-      <td class="col-sm-3">{{ user.role }}</td>
-      <td class="col-sm-3 text-center custom-control custom-switch">
-        <input type="checkbox" class="custom-control-input" id="{{ user.id }}" />
+      <td class="col-sm-4">{{ user.email }}</td>
+      <td class="col-sm-4">{{ user.name }}</td>
+      <td class="col-sm-4 text-center custom-control custom-switch">
+        <input
+          type="checkbox"
+          class="custom-control-input"
+          id="{{ user.id }}"
+          [(ngModel)]="user.role"
+          (change)="switchToAdmin(user.id)"
+        />
         <label class="custom-control-label" for="{{ user.id }}"></label>
       </td>
     </tr>

src/app/modules/users/components/users-list/users-list.component.spec.ts

@@ -6,16 +6,15 @@ import { UsersListComponent } from './users-list.component';
 import { UserActionTypes, UserState, LoadUsers } from '../../store';
 import { ActionsSubject } from '@ngrx/store';
 import { DataTablesModule } from 'angular-datatables';
-import { act } from '@ngrx/effects';
 
 describe('UsersListComponent', () => {
   let component: UsersListComponent;
   let fixture: ComponentFixture<UsersListComponent>;
   let store: MockStore<UserState>;
   const actionSub: ActionsSubject = new ActionsSubject();
 
-  const state = {
-    data: [{ name: 'name', email: 'email', role: 'role', id: 'id', tenand_id: 'tenand id', deleted: 'delete' }],
+  const state: UserState = {
+    data: [{ name: 'name', email: 'email', role: 'role', id: 'id', tenant_id: 'tenant id', deleted: 'delete' }],
     isLoading: false,
     message: '',
   };

src/app/modules/users/components/users-list/users-list.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActionsSubject, select, Store } from '@ngrx/store';
 import { DataTableDirective } from 'angular-datatables';
 import { Observable, Subject, Subscription } from 'rxjs';
@@ -52,4 +52,8 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
       this.dtTrigger.next();
     }
   }
+
+  switchToAdmin(userId: string) {
+    console.log('Upcoming change to' + userId);
+  }
 }

src/app/modules/users/pages/users.component.ts

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

src/app/modules/users/store/user.effects.spec.ts

@@ -12,7 +12,7 @@ describe('UserEffects', () => {
   let actions$: Observable<Action>;
   let effects: UserEffects;
   let service: UsersService;
-  let toastrService;
+  let toastrService: ToastrService;
   const user = { id: 'id', name: 'name', email: 'email' };
 
   beforeEach(() => {
@@ -30,7 +30,7 @@ describe('UserEffects', () => {
     expect(effects).toBeTruthy();
   });
 
-  it('should return a list of users when the action LOAD_USERS call succeeds', async () => {
+  it('action type is LOAD_USER_SUCCESS when service is executed sucessfully', async () => {
     actions$ = of({ type: UserActionTypes.LOAD_USERS });
     const serviceSpy = spyOn(service, 'loadUsers');
     serviceSpy.and.returnValue(of(user));
@@ -40,7 +40,7 @@ describe('UserEffects', () => {
     });
   });
 
-  it('should return an error when the action LOAD_USERS call fails', async () => {
+  it('action type is LOAD_USER_FAIL when service fail in execution', async () => {
     actions$ = of({ type: UserActionTypes.LOAD_USERS });
     const serviceSpy = spyOn(service, 'loadUsers');
     serviceSpy.and.returnValue(throwError({ error: { message: 'fail!' } }));

src/app/modules/users/store/user.reducer.spec.ts

@@ -11,7 +11,7 @@ describe('userReducer', () => {
     expect(state.isLoading).toEqual(true);
   });
 
-  it('on LoadUserSucess, isLoading is false and state has data', () => {
+  it('on LoadUserSuccess, isLoading is false and state has data', () => {
     const data = [];
     const action = new actions.LoadUsersSuccess(data);
     const state = userReducer(initialState, action);