feat: #569 create a user store and consume the service of users

Author: PaulRC-ioet

src/app/app.module.ts

@@ -55,6 +55,7 @@ import { ProjectTypeListComponent } from './modules/customer-management/componen
 // tslint:disable-next-line: max-line-length
 import { CreateProjectTypeComponent } from './modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component';
 import { CustomerEffects } from './modules/customer-management/store/customer-management.effects';
+import { UserEffects } from './modules/users/store/user.effects';
 import { EntryEffects } from './modules/time-clock/store/entry.effects';
 import { InjectTokenInterceptor } from './modules/shared/interceptors/inject.token.interceptor';
 import { SubstractDatePipe } from './modules/shared/pipes/substract-date/substract-date.pipe';
@@ -148,6 +149,7 @@ const maskConfig: Partial<IConfig> = {
       TechnologyEffects,
       ProjectTypeEffects,
       EntryEffects,
+      UserEffects,
     ]),
     ToastrModule.forRoot()
   ],

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

@@ -1,4 +1,4 @@
-<table class="table table-sm table-bordered table-striped mb-0" datatable>
+<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>
@@ -7,18 +7,15 @@
       <th class="col-3 text-center">Options</th>
     </tr>
   </thead>
-  <tbody>
-    <tr class="d-flex">
-      <td class="col-sm-3">[email protected]</td>
-      <td class="col-sm-3">Paul Rocha</td>
-      <td class="col-sm-3">Intern</td>
-      <td class="col-sm-3 text-center">
-        <button type="button" class="btn btn-sm btn-primary">
-          <i class="fa fa-pencil fa-xs"></i>
-        </button>
-        <button type="button" class="btn btn-sm btn-danger ml-2">
-          <i class="fa fa-trash-alt fa-xs"></i>
-        </button>
+  <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.name}}" [(ngModel)]="user.role" (click)="changeSwitch()"/>
+          <label class="custom-control-label" for="{{user.name}}"></label>
       </td>
     </tr>
   </tbody>

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

@@ -1,25 +1,81 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
+import { NgxPaginationModule } from 'ngx-pagination';
 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' }],
+    isLoading: false,
+    message: '',
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ UsersListComponent ]
-    })
-    .compileComponents();
+      imports: [NgxPaginationModule, DataTablesModule],
+      declarations: [UsersListComponent],
+      providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(UsersListComponent);
     component = fixture.componentInstance;
+    store = TestBed.inject(MockStore);
+    store.setState(state);
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('when the component is initialized the load User action is triggered', () => {
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new LoadUsers());
+  });
+
+  it('on success load users, the user list should be populated', () => {
+    const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
+    const action = {
+      type: UserActionTypes.LOAD_USERS_SUCCESS,
+      payload: state.data,
+    };
+
+    actionSubject.next(action);
+
+    expect(component.users).toEqual(state.data);
+  });
+
+  it('on success load users, the datatable should be reloaded', async () => {
+    const actionSubject = TestBed.inject(ActionsSubject);
+    const action = {
+      type: UserActionTypes.LOAD_USERS_SUCCESS,
+      payload: state.data,
+    };
+    spyOn(component.dtElement.dtInstance, 'then');
+
+    actionSubject.next(action);
+
+    expect(component.dtElement.dtInstance.then).toHaveBeenCalled();
+  });
+
+  afterEach(() => {
+    component.dtTrigger.unsubscribe();
+    component.loadUsersSubscription.unsubscribe();
+    fixture.destroy();
+  });
 });

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

@@ -1,15 +1,59 @@
-import { Component, OnInit } from '@angular/core';
-
+import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { ActionsSubject, select, Store } from '@ngrx/store';
+import { DataTableDirective } from 'angular-datatables';
+import { Observable, Subject, Subscription } from 'rxjs';
+import { delay, filter } from 'rxjs/operators';
+import { User } from '../../models/users';
+import { LoadUsers, UserActionTypes } from '../../store/user.actions';
+import { getIsLoading } from '../../store/user.selectors';
 @Component({
   selector: 'app-users-list',
   templateUrl: './users-list.component.html',
-  styleUrls: ['./users-list.component.css']
+  styleUrls: ['./users-list.component.css'],
 })
-export class UsersListComponent implements OnInit {
+export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
+  users: User[] = [];
+  isLoading$: Observable<boolean>;
+  loadUsersSubscription: Subscription;
+  dtTrigger: Subject<any> = new Subject();
+  @ViewChild(DataTableDirective, { static: false })
+  dtElement: DataTableDirective;
 
-  constructor() { }
+  constructor(private store: Store<User>, private actionsSubject$: ActionsSubject) {
+    this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
+  }
 
   ngOnInit(): void {
+    this.loadUsersSubscription = this.actionsSubject$
+      .pipe(filter((action: any) => action.type === UserActionTypes.LOAD_USERS_SUCCESS))
+      .subscribe((action) => {
+        this.users = action.payload;
+        this.rerenderDataTable();
+      });
+    this.store.dispatch(new LoadUsers());
   }
 
+  ngAfterViewInit(): void {
+    this.rerenderDataTable();
+  }
+
+  ngOnDestroy() {
+    this.loadUsersSubscription.unsubscribe();
+    this.dtTrigger.unsubscribe();
+  }
+
+  private rerenderDataTable(): void {
+    if (this.dtElement && this.dtElement.dtInstance) {
+      this.dtElement.dtInstance.then((dtInstances: DataTables.Api) => {
+        dtInstances.destroy();
+        this.dtTrigger.next();
+      });
+    } else {
+      this.dtTrigger.next();
+    }
+  }
+
+  changeSwitch() {
+    console.log('ENTROOO');
+  }
 }

src/app/modules/users/models/users.ts

@@ -0,0 +1,8 @@
+export interface User {
+  name: string;
+  email: string;
+  role?: string;
+  id: string;
+  tenand_id?: string;
+  deleted?: string;
+}

src/app/modules/users/services/users.service.spec.ts

@@ -0,0 +1,34 @@
+import { inject, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { UsersService } from './users.service';
+
+describe('UsersService', () => {
+  let service: UsersService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [HttpClientTestingModule] });
+    service = TestBed.inject(UsersService);
+    httpMock = TestBed.inject(HttpTestingController);
+    service.baseUrl = 'users';
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('services are ready to used', inject(
+    [HttpClientTestingModule, UsersService],
+    (httpClient: HttpClientTestingModule, userService: UsersService) => {
+      expect(httpClient).toBeTruthy();
+      expect(userService).toBeTruthy();
+    }
+  ));
+
+  it('load all users', () => {
+    service.loadUsers().subscribe();
+
+    const loadUserRequest = httpMock.expectOne(service.baseUrl);
+    expect(loadUserRequest.request.method).toBe('GET');
+  });
+});

src/app/modules/users/services/users.service.ts

@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from './../../../../environments/environment';
+@Injectable({
+  providedIn: 'root',
+})
+export class UsersService {
+  constructor(private http: HttpClient) {}
+
+  baseUrl = `${environment.timeTrackerApiUrl}/users`;
+
+  loadUsers(): Observable<any> {
+    return this.http.get(this.baseUrl);
+  }
+}

src/app/modules/users/store/index.ts

@@ -0,0 +1,2 @@
+export * from './user.actions';
+export * from './user.reducers';

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

@@ -0,0 +1,13 @@
+import * as actions from './user.actions';
+
+describe('UserActions', () => {
+  it('LoadUsersSuccess type is UserActionTypes.LOAD_USERS_SUCCESS', () => {
+    const action = new actions.LoadUsersSuccess([]);
+    expect(action.type).toEqual(actions.UserActionTypes.LOAD_USERS_SUCCESS);
+  });
+
+  it('LoadUsersFail type is UserActionTypes.LOAD_USERS_FAIL', () => {
+    const action = new actions.LoadUsersFail('error');
+    expect(action.type).toEqual(actions.UserActionTypes.LOAD_USERS_FAIL);
+  });
+});

src/app/modules/users/store/user.actions.ts

@@ -0,0 +1,24 @@
+import { Action } from '@ngrx/store';
+import { User } from '../models/users';
+
+export enum UserActionTypes {
+  LOAD_USERS = '[User] LOAD_USERS',
+  LOAD_USERS_SUCCESS = '[User] LOAD_USERS_SUCCESS',
+  LOAD_USERS_FAIL = '[User] LOAD_USERS_FAIL',
+}
+
+export class LoadUsers implements Action {
+  public readonly type = UserActionTypes.LOAD_USERS;
+}
+
+export class LoadUsersSuccess implements Action {
+  readonly type = UserActionTypes.LOAD_USERS_SUCCESS;
+  constructor(readonly payload: User[]) {}
+}
+
+export class LoadUsersFail implements Action {
+  public readonly type = UserActionTypes.LOAD_USERS_FAIL;
+  constructor(public error: string) {}
+}
+
+export type UserActions = LoadUsers | LoadUsersSuccess | LoadUsersFail;