feat: #452 Adding loading bar

src/app/app.module.ts

@@ -67,6 +67,7 @@ import { InputDateComponent } from './modules/shared/components/input-date/input
 import { TimeRangeFormComponent } from './modules/reports/components/time-range-form/time-range-form.component';
 import { TimeEntriesTableComponent } from './modules/reports/components/time-entries-table/time-entries-table.component';
 import { DialogComponent } from './modules/shared/components/dialog/dialog.component';
+import { LoadingBarComponent } from './modules/shared/components/loading-bar/loading-bar.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -114,6 +115,7 @@ const maskConfig: Partial<IConfig> = {
     TimeRangeFormComponent,
     TimeEntriesTableComponent,
     DialogComponent,
+    LoadingBarComponent
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -6,11 +6,16 @@
         <th class="col-3 text-center"></th>
       </tr>
     </thead>
-    <tbody>
+    <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
+    <tbody *ngIf="((isLoading$ | async) === ( false || null || undefined))">
       <tr class="d-flex" *ngFor="let activity of activities">
         <td class="col-sm-9">{{ activity.name }}</td>
         <td class="col-sm-3 text-center">
-          <button type="button" class="btn btn-sm btn-primary" (click)="updateActivity(activity.id)">
+          <button
+            type="button"
+            class="btn btn-sm btn-primary"
+            (click)="updateActivity(activity.id)"
+          >
             <i class="fa fa-pencil fa-xs"></i>
           </button>
           <button

src/app/modules/activities-management/components/activity-list/activity-list.component.ts

@@ -6,6 +6,9 @@ import { LoadActivities, DeleteActivity, SetActivityToEdit } from './../../store
 import { ActivityState } from './../../store/activity-management.reducers';
 import { allActivities } from '../../store';
 import { Activity } from '../../../shared/models';
+import { Observable } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import { getIsLoading } from 'src/app/modules/activities-management/store/activity-management.selectors';
 
 @Component({
   selector: 'app-activity-list',
@@ -18,7 +21,10 @@ export class ActivityListComponent implements OnInit {
   activityToDelete: Activity;
   message: string;
   idToDelete: string;
-  constructor(private store: Store<ActivityState>) {}
+  isLoading$: Observable<boolean>;
+  constructor(private store: Store<ActivityState>) {
+    this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
+  }
 
   ngOnInit() {
     this.store.dispatch(new LoadActivities());

src/app/modules/activities-management/components/create-activity/create-activity.component.spec.ts

@@ -7,7 +7,7 @@ import {
   ActivityState,
   CreateActivity,
   UpdateActivity,
-  activityIdtoEdit,
+  activityIdToEdit,
   allActivities,
   ResetActivityToEdit,
 } from '../../store';
@@ -74,7 +74,7 @@ describe('CreateActivityComponent', () => {
       activityIdToEdit: '1',
     };
 
-    activityIdtoEditMock = store.overrideSelector(activityIdtoEdit, currentState.activityIdToEdit);
+    activityIdtoEditMock = store.overrideSelector(activityIdToEdit, currentState.activityIdToEdit);
     allActivitiesMock = store.overrideSelector(allActivities, currentState.data);
     getActivityByIdMock = store.overrideSelector(allActivitiesMock, activityIdtoEditMock);
 

src/app/modules/activities-management/store/activity-management.reducers.ts

@@ -71,10 +71,10 @@ export function activityManagementReducer(state: ActivityState = initialState, a
     }
 
     case ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS: {
-      const activites = state.data.filter((activity) => activity.id !== action.activityId);
+      const activities = state.data.filter((activity) => activity.id !== action.activityId);
       return {
         ...state,
-        data: activites,
+        data: activities,
         isLoading: false,
         message: 'Activity removed successfully!',
       };

src/app/modules/activities-management/store/activity-management.selectors.spec.ts

@@ -4,7 +4,7 @@ describe('ActivityManagement Selectors', () => {
 
   it('reads activityIdtoEdit from state', () => {
     const activityId = 'id';
-    const activityIdFound = selectors.activityIdtoEdit.projector({ activityIdToEdit: activityId });
+    const activityIdFound = selectors.activityIdToEdit.projector({ activityIdToEdit: activityId });
     expect(activityIdFound).toBe(activityId);
   });
 

src/app/modules/activities-management/store/activity-management.selectors.ts

@@ -8,14 +8,18 @@ export const allActivities = createSelector(getActivityState, (state: ActivitySt
   return state.data;
 });
 
-export const activityIdtoEdit = createSelector(getActivityState, (state: ActivityState) => {
+export const activityIdToEdit = createSelector(getActivityState, (state: ActivityState) => {
   return state.activityIdToEdit;
 });
 
-export const getActivityById = createSelector(allActivities, activityIdtoEdit, (activities, activityId) => {
+export const getActivityById = createSelector(allActivities, activityIdToEdit, (activities, activityId) => {
   if (activities && activityId) {
     return activities.find((activity) => {
       return activity.id === activityId;
     });
   }
 });
+
+export const getIsLoading = createSelector(getActivityState, (state: ActivityState) => {
+  return state.isLoading;
+});

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -11,11 +11,16 @@
       <th class="col-3 text-center">Options</th>
     </tr>
   </thead>
-  <tbody>
+  <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
+  <tbody *ngIf="((isLoading$ | async) === (false || null || undefined))">
     <tr class="d-flex" *ngFor="let customer of customers">
       <td class="col-sm-9">{{ customer.name }}</td>
       <td class="col-sm-3 text-center">
-        <button (click)="editCustomer(customer.id)" type="button" class="btn btn-sm btn-primary">
+        <button
+          (click)="editCustomer(customer.id)"
+          type="button"
+          class="btn btn-sm btn-primary"
+        >
           <i class="fa fa-pencil fa-xs"></i>
         </button>
         <button

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -1,16 +1,17 @@
 import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, AfterViewInit} from '@angular/core';
-import {ActionsSubject, Store} from '@ngrx/store';
+import {ActionsSubject, select, Store} from '@ngrx/store';
 
-import {Subject, Subscription} from 'rxjs';
+import {Observable, Subject, Subscription} from 'rxjs';
 import {
   CustomerManagementActionTypes,
   DeleteCustomer,
   LoadCustomers,
   SetCustomerToEdit
 } from './../../../../store/customer-management.actions';
 import {Customer} from './../../../../../shared/models/customer.model';
-import {filter} from 'rxjs/operators';
+import {delay, filter} from 'rxjs/operators';
 import {DataTableDirective} from 'angular-datatables';
+import { getIsLoading } from 'src/app/modules/customer-management/store/customer-management.selectors';
 
 @Component({
   selector: 'app-customer-list',
@@ -32,8 +33,11 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   showModal = false;
   idToDelete: string;
   message: string;
+  isLoading$: Observable<boolean>;
 
-  constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) { }
+  constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) {
+    this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
+  }
 
   ngOnInit(): void {
     this.dtOptions = {

src/app/modules/customer-management/components/projects/components/store/project.selectors.ts

@@ -15,3 +15,7 @@ export const getProjects = createSelector(getProjectState, (state: ProjectState)
 export const getProjectToEdit = createSelector(getProjectState, (state: ProjectState) => {
   return state.projectToEdit;
 });
+
+export const getIsLoading = createSelector(getProjectState, (state: ProjectState) => {
+  return state.isLoading;
+});

src/app/modules/customer-management/store/customer-management.selectors.ts

@@ -34,3 +34,8 @@ export const getCustomerUnderEdition = createSelector(allCustomers, customerIdto
     });
   }
 });
+
+
+export const getIsLoading = createSelector(getCustomerState, (state: CustomerState) => {
+  return state.isLoading;
+});

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -1,6 +1,11 @@
 <div class="row mt-5">
   <div class="col">
-    <table class="table table-sm table-striped" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
+    <table
+      class="table table-sm table-striped"
+      datatable
+      [dtTrigger]="dtTrigger"
+      [dtOptions]="dtOptions"
+    >
       <thead class="thead-blue">
       <tr class="d-flex">
         <th class="col md-col">ID</th>
@@ -19,7 +24,8 @@
         <th class="col lg-col">Technologies</th>
       </tr>
       </thead>
-      <tbody>
+      <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
+      <tbody *ngIf="(isLoading$ | async) === false ">
       <tr
         class="d-flex"
         *ngFor="let entry of data"

src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts

@@ -1,8 +1,9 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MockStore, provideMockStore} from '@ngrx/store/testing';
-import {EntryState} from '../../../time-clock/store/entry.reducer';
-import {TimeEntriesTableComponent} from './time-entries-table.component';
-import {entriesForReport} from '../../../time-clock/store/entry.selectors';
+import { AsyncPipe } from '@angular/common';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { EntryState } from '../../../time-clock/store/entry.reducer';
+import { entriesForReport } from '../../../time-clock/store/entry.selectors';
+import { TimeEntriesTableComponent } from './time-entries-table.component';
 
 describe('Reports Page', () => {
   describe('TimeEntriesTableComponent', () => {
@@ -23,19 +24,25 @@ describe('Reports Page', () => {
 
     const state = {
       active: timeEntry,
-      entryList: [timeEntry],
       isLoading: false,
       message: '',
       createError: false,
       updateError: false,
       timeEntriesSummary: null,
-      entriesForReport: [timeEntry],
+      timeEntriesDataSource: {
+        data: [timeEntry],
+        isLoading: false
+      },
+      reportDataSource: {
+        data: [timeEntry],
+        isLoading: false
+      }
     };
 
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [],
-        declarations: [],
+        declarations: [TimeEntriesTableComponent, AsyncPipe],
         providers: [provideMockStore({initialState: state})],
       }).compileComponents();
       store = TestBed.inject(MockStore);
@@ -47,23 +54,23 @@ describe('Reports Page', () => {
       component = fixture.componentInstance;
       fixture.detectChanges();
       store.setState(state);
-      geTimeEntriesSelectorMock = store.overrideSelector(entriesForReport, state.entriesForReport);
+      geTimeEntriesSelectorMock = store.overrideSelector(entriesForReport, state.reportDataSource.data);
     });
 
-    it('component should be created', () => {
+    it('component should be created', async () => {
       expect(component).toBeTruthy();
     });
 
-    it('on success load time entries, the report should be populated', () => {
+    it('on success load time entries, the report should be populated', async () => {
       component.ngOnInit();
       fixture.detectChanges();
 
-      expect(component.data).toEqual(state.entriesForReport);
+      expect(component.data).toEqual(state.reportDataSource.data);
     });
 
-    it('after the component is initialized it should initialize the table', () => {
-      spyOn(component.dtTrigger, 'next');
+    it('after the component is initialized it should initialize the table', async () => {
 
+      spyOn(component.dtTrigger, 'next');
       component.ngAfterViewInit();
 
       expect(component.dtTrigger.next).toHaveBeenCalled();

src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts

@@ -2,8 +2,8 @@ import { formatDate } from '@angular/common';
 import {AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {select, Store} from '@ngrx/store';
 import {EntryState} from '../../../time-clock/store/entry.reducer';
-import {entriesForReport} from '../../../time-clock/store/entry.selectors';
-import {Subject} from 'rxjs';
+import {entriesForReport, getIsLoadingReportData} from '../../../time-clock/store/entry.selectors';
+import {Subject, Observable} from 'rxjs';
 import {DataTableDirective} from 'angular-datatables';
 import * as moment from 'moment';
 
@@ -54,8 +54,10 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, {static: false})
   dtElement: DataTableDirective;
+  isLoading$: Observable<boolean>;
 
   constructor(private store: Store<EntryState>) {
+    this.isLoading$ = this.store.pipe(select(getIsLoadingReportData));
   }
 
   ngOnInit(): void {
@@ -64,6 +66,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
       this.data = response;
       this.rerenderDataTable();
     });
+
   }
 
   ngAfterViewInit(): void {

src/app/modules/shared/components/loading-bar/loading-bar.component.html

@@ -0,0 +1,5 @@
+<div class="wrapper">
+  <div class="progressbar">
+    <div class="stylization"></div>
+  </div>
+</div>