TT-71 fix: spinner for loading (advances)

Author: Guido Quezada

package.json

@@ -45,6 +45,7 @@
     "ngx-mask": "^9.1.2",
     "ngx-material-timepicker": "^5.5.3",
     "ngx-pagination": "^5.0.0",
+    "ngx-spinner": "^10.0.1",
     "ngx-toastr": "^12.0.1",
     "rxjs": "~6.6.3",
     "tslib": "^1.10.0",

src/app/app.module.ts

@@ -3,7 +3,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ToastrModule } from 'ngx-toastr';
 import { CommonModule, DatePipe } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, Component } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataTablesModule } from 'angular-datatables';
@@ -13,6 +13,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
+import { NgxSpinnerModule } from "ngx-spinner";
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -139,6 +140,7 @@ const maskConfig: Partial<IConfig> = {
     ReactiveFormsModule,
     HttpClientModule,
     NgxPaginationModule,
+    NgxSpinnerModule,
     DataTablesModule,
     AutocompleteLibModule,
     NgxMaterialTimepickerModule,
@@ -171,5 +173,6 @@ const maskConfig: Partial<IConfig> = {
     CookieService,
   ],
   bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule { }

src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts

@@ -72,7 +72,6 @@ export class EntryFieldsComponent implements OnInit {
           this.store.dispatch(new entryActions.LoadEntriesSummary());
         } else {
           this.store.dispatch(new entryActions.UpdateEntryRunning({ ...this.newData, ...this.entryForm.value }));
-          this.store.dispatch(new LoadActiveEntry());
           this.store.dispatch(new entryActions.LoadEntriesSummary());
         }
       });

src/app/modules/time-clock/pages/time-clock.component.html

@@ -1,4 +1,12 @@
 <app-time-entries-summary></app-time-entries-summary>
+<ngx-spinner
+  bdColor = "rgba(0, 0, 0, 0.7)"
+  size = "default"
+  type = "pacman"
+  [fullScreen] = "true"
+  >
+  <p style="color: #ffff" > Loading... </p>
+</ngx-spinner>
 
 <div class="col-12 col-md-9 px-0">
 
@@ -15,7 +23,7 @@
   </div>
 
   <app-project-list-hover></app-project-list-hover>
-  <div *ngIf="areFieldsVisible">
+  <div *ngIf="areFieldsVisible">  <!-- no recomendable-->
     <app-entry-fields></app-entry-fields>
   </div>
 

src/app/modules/time-clock/pages/time-clock.component.ts

@@ -7,7 +7,8 @@ import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service';
 import { EntryFieldsComponent } from '../components/entry-fields/entry-fields.component';
 import { Entry } from './../../shared/models/entry.model';
 import { EntryActionTypes, LoadEntriesSummary, StopTimeEntryRunning } from './../store/entry.actions';
-import { getActiveTimeEntry } from './../store/entry.selectors';
+import { getActiveTimeEntry, getIsLoading } from './../store/entry.selectors';
+import { NgxSpinnerService } from "ngx-spinner";
 @Component({
   selector: 'app-time-clock',
   templateUrl: './time-clock.component.html',
@@ -26,7 +27,8 @@ export class TimeClockComponent implements OnInit, OnDestroy {
     private azureAdB2CService: AzureAdB2CService,
     private store: Store<Entry>,
     private toastrService: ToastrService,
-    private actionsSubject$: ActionsSubject
+    private actionsSubject$: ActionsSubject,
+    private spinner: NgxSpinnerService,
   ) {}
 
   ngOnDestroy(): void {
@@ -44,6 +46,14 @@ export class TimeClockComponent implements OnInit, OnDestroy {
       }
     });
 
+    this.store.pipe(select(getIsLoading)).subscribe((isLoading) => {
+      if (isLoading) {
+        this.spinner.show();
+      } else {
+        this.spinner.hide();
+      }
+    });
+
     this.reloadSummariesOnClockOut();
 
   }

src/app/modules/time-clock/store/entry.reducer.ts

@@ -6,6 +6,7 @@ import { EntryActions, EntryActionTypes } from './entry.actions';
 export interface EntryState {
   active: Entry;
   isLoading: boolean;
+  isLoading2: boolean;
   message: string;
   createError: boolean;
   updateError: boolean;
@@ -20,6 +21,7 @@ const emptyTimeEntriesSummary: TimeEntriesSummary = { day: emptyTimeDetails, wee
 export const initialState = {
   active: null,
   isLoading: false,
+  isLoading2: false,
   message: '',
   createError: null,
   updateError: null,
@@ -56,19 +58,24 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
       return {
         ...state,
         isLoading: true,
+        isLoading2: true,
       };
     }
     case EntryActionTypes.LOAD_ACTIVE_ENTRY_SUCCESS:
       return {
         ...state,
         active: action.payload,
         isLoading: false,
+        isLoading2: false,
       };
     case EntryActionTypes.LOAD_ACTIVE_ENTRY_FAIL: {
+      console.log('jjsjd');
+
       return {
         ...state,
         active: null,
         isLoading: false,
+        isLoading2: false,
         message: 'Something went wrong fetching active entry!',
       };
     }
@@ -93,6 +100,8 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
       };
 
     case EntryActionTypes.LOAD_ENTRIES_FAIL: {
+      console.log('here');
+
       return {
         ...state,
         message: 'Something went wrong fetching entries!',
@@ -210,6 +219,7 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
       return {
         ...state,
         isLoading: true,
+        isLoading2: true,
       };
     }
 
@@ -221,10 +231,27 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
       };
     }
 
+    case EntryActionTypes.UPDATE_ENTRY_RUNNING: {
+      console.log('UPDATE_ENTRY_RUNNING ');
+
+      return {
+        ...state,
+        isLoading2: true,
+      };
+    }
+
+    case EntryActionTypes.SWITCH_TIME_ENTRY: {
+      return {
+        ...state,
+        isLoading2: true,
+      };
+    }
+
     case EntryActionTypes.STOP_TIME_ENTRY_RUNNING: {
       return {
         ...state,
         isLoading: true,
+        isLoading2: true,
       };
     }
 
@@ -233,7 +260,15 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
         ...state,
         active: null,
         isLoading: false,
-        message: 'You clocked-out successfully',
+        isLoading2: false,
+        message: 'You clocked-out successfullys',
+      };
+    }
+
+    case EntryActionTypes.CLOCK_IN: {
+      return {
+        ...state,
+        isLoading2: true,
       };
     }
 

src/app/modules/time-clock/store/entry.selectors.ts

@@ -9,6 +9,8 @@ export const getActiveTimeEntry = createSelector(getEntryState, (state: EntrySta
 
 export const getCreateError = createSelector(getEntryState, (state: EntryState) => state?.createError);
 
+export const getIsLoading = createSelector(getEntryState, (state: EntryState) => state?.isLoading2);
+
 export const getUpdateError = createSelector(getEntryState, (state: EntryState) => state?.updateError);
 
 export const getStatusMessage = createSelector(getEntryState, (state: EntryState) => state?.message);