Tta 180 integrate time tracker with auth app

README.md

@@ -134,7 +134,7 @@ In any case, the app will automatically reload if you change anything in the sou
   - **test**: Adding missing tests or correcting existing tests.
 
   ### Example
-    fix: TT-48 implement semantic versioning
+    fix: TTA-48 implement semantic versioning
 
     Prefix to use in the space fix:
     `(fix: |feat: |perf: |build: |ci: |docs: |refactor: |style: |test: )`
@@ -146,9 +146,9 @@ In any case, the app will automatically reload if you change anything in the sou
 | `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br>`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release |
 
 ### Branch names format
-For example if your task in Jira is **TT-48 implement semantic versioning** your branch name is:
+For example if your task in Jira is **TTA-48 implement semantic versioning** your branch name is:
 ```
-   TT-48-implement-semantic-versioning
+   TTA-48-implement-semantic-versioning
 ```
 
 ## Code scaffolding

package.json

@@ -1,6 +1,6 @@
 {
   "name": "time-tracker",
-  "version": "1.75.19",
+  "version": "1.75.24",
   "scripts": {
     "preinstall": "npx npm-force-resolutions",
     "ng": "ng",
@@ -117,7 +117,7 @@
   "config": {
     "commit-message-validator": {
       "pattern": "^(fix: TTA-|feat: TTA-|perf: TTA-|build: TTA-|ci: TTA-|docs: TTA-|refactor: TTA-|style: TTA-|test: TTA-|code-smell: TTA-)[0-9].*",
-      "errorMessage": "Your commit message needs to start with fix: , feat:, or perf: followed by any commit message, e.g. fix: TT-43 any commit message."
+      "errorMessage": "\nYour commit message must comply with the following pattern:\n ^(fix: TTA-|feat: TTA-|perf: TTA-|build: TTA-|ci: TTA-|docs: TTA-|refactor: TTA-|style: TTA-|test: TTA-|code-smell: TTA-)[0-9].*\n followed by any commit message.\n\n Example:\n fix: TTA-43 any commit message\n"
     }
   },
   "resolutions": {

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

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 } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataTablesModule } from 'angular-datatables';
@@ -14,6 +14,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
@@ -95,6 +97,8 @@ import { SearchUserComponent } from './modules/shared/components/search-user/sea
 import { TimeRangeCustomComponent } from './modules/reports/components/time-range-custom/time-range-custom.component';
 import { TimeRangeHeaderComponent } from './modules/reports/components/time-range-custom/time-range-header/time-range-header.component';
 import { TimeRangeOptionsComponent } from './modules/reports/components/time-range-custom/time-range-options/time-range-options.component';
+import { SpinnerOverlayComponent } from './modules/shared/components/spinner-overlay/spinner-overlay.component';
+import { SpinnerInterceptor } from './modules/shared/interceptors/spinner.interceptor';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -154,6 +158,7 @@ const maskConfig: Partial<IConfig> = {
     TimeRangeCustomComponent,
     TimeRangeHeaderComponent,
     TimeRangeOptionsComponent,
+    SpinnerOverlayComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),
@@ -172,6 +177,7 @@ const maskConfig: Partial<IConfig> = {
     DataTablesModule,
     AutocompleteLibModule,
     NgxMaterialTimepickerModule,
+    MatProgressSpinnerModule,
     UiSwitchModule,
     DragDropModule,
     MatIconModule,
@@ -206,6 +212,11 @@ const maskConfig: Partial<IConfig> = {
       useClass: InjectTokenInterceptor,
       multi: true,
     },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: SpinnerInterceptor,
+      multi: true,
+    },
     DatePipe,
     CookieService,
     {provide: Window, useValue: window}

src/app/modules/shared/components/spinner-overlay/spinner-overlay.component.scss

@@ -0,0 +1,5 @@
+@use "../../../../../styles/colors.scss" as colors;
+
+:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
+    stroke: colors.$warning;
+}

src/app/modules/shared/components/spinner-overlay/spinner-overlay.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpinnerOverlayComponent } from './spinner-overlay.component';
+
+describe('SpinnerOverlayComponent', () => {
+  let component: SpinnerOverlayComponent;
+  let fixture: ComponentFixture<SpinnerOverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SpinnerOverlayComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SpinnerOverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/shared/components/spinner-overlay/spinner-overlay.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-spinner-overlay',
+  template: '<mat-spinner diameter="80"></mat-spinner>',
+  styleUrls: ['./spinner-overlay.component.scss'],
+})
+
+export class SpinnerOverlayComponent {
+  constructor() {}
+}

src/app/modules/shared/interceptors/spinner.interceptor.spec.ts

@@ -0,0 +1,49 @@
+
+
+import { Overlay } from '@angular/cdk/overlay';
+import { TestBed } from '@angular/core/testing';
+import { SpinnerInterceptor } from './spinner.interceptor';
+import { HttpHandler, HttpRequest, HttpResponse, HttpEvent } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { SpinnerOverlayService } from '../services/spinner-overlay.service';
+
+
+describe('SpinnerInterceptorService test', () => {
+  TestBed.configureTestingModule({
+    providers: [
+      SpinnerInterceptor,
+      Overlay
+    ],
+  });
+
+    class MockHttpHandler implements HttpHandler {
+      handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+        return of(new HttpResponse());
+      }
+    }
+
+  let overlay: Overlay;
+  let httpHandler: HttpHandler;
+  let spinnerInterceptor: SpinnerInterceptor;
+
+  beforeEach(() => {
+    overlay = jasmine.createSpyObj('Overlay', ['create']);
+    httpHandler = new MockHttpHandler();
+    spinnerInterceptor = new SpinnerInterceptor(new SpinnerOverlayService(overlay));
+  });
+
+  it('should be created', () => {
+    expect(spinnerInterceptor).toBeTruthy();
+  });
+
+  it('if request is made then spinnerInterceptor is called', () => {
+    const request = new HttpRequest('GET', '/recent');
+    spyOn(spinnerInterceptor, 'intercept');
+
+    spinnerInterceptor.intercept(request, httpHandler);
+
+    expect(spinnerInterceptor.intercept).toHaveBeenCalledWith(request, httpHandler);
+
+  });
+
+});

src/app/modules/shared/interceptors/spinner.interceptor.ts

@@ -0,0 +1,30 @@
+import {
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { SpinnerOverlayService } from '../services/spinner-overlay.service';
+
+@Injectable()
+export class SpinnerInterceptor implements HttpInterceptor {
+  constructor(private readonly spinnerOverlayService: SpinnerOverlayService) {}
+
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    if(req.url.endsWith('recent')){
+      const spinnerSubscription: Subscription = this.spinnerOverlayService.spinner$.subscribe();
+    return next
+      .handle(req)
+      .pipe(finalize(() => spinnerSubscription.unsubscribe()));
+    }else{
+      return next.handle(req);
+    }
+
+  }
+}

src/app/modules/shared/services/spinner-overlay.service.spec.ts

@@ -0,0 +1,66 @@
+import { TestBed } from '@angular/core/testing';
+import { Overlay } from '@angular/cdk/overlay';
+
+import { SpinnerOverlayService } from './spinner-overlay.service';
+import { SpinnerInterceptor } from '../interceptors/spinner.interceptor';
+import { HttpEvent, HttpHandler, HttpRequest, HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { ComponentPortal } from 'ngx-toastr';
+
+
+describe('SpinnerOverlayService test', () => {
+
+  class MockHttpHandler extends HttpHandler {
+    handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+      return of(new HttpResponse());
+    }
+  }
+
+  let spinnerService: SpinnerOverlayService;
+  let spinnerInterceptor: SpinnerInterceptor;
+  let mockHttpHandler: HttpHandler;
+  let overlayRef: any;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        Overlay,
+        SpinnerInterceptor,
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: SpinnerInterceptor,
+          multi: true,
+        },
+      ],
+    });
+    spinnerService = TestBed.inject(SpinnerOverlayService);
+    spinnerInterceptor = TestBed.inject(SpinnerInterceptor);
+    mockHttpHandler = new MockHttpHandler();
+    overlayRef = spinnerService.overlayRef;
+  });
+
+  it('should be created', () => {
+    expect(spinnerService).toBeTruthy();
+  });
+
+  it('if request is made then spinnerService is show', () => {
+    const request = new HttpRequest('GET', '/recent');
+    spyOn(spinnerService, 'show');
+
+    spinnerInterceptor.intercept(request, mockHttpHandler);
+
+    expect(spinnerService.show).toHaveBeenCalled();
+    expect(ComponentPortal).toBeTruthy();
+  });
+
+
+  it('if hide calls detach method of overlayRef and then sets it to undefined', () => {
+    spyOn(spinnerService, 'hide');
+
+    spinnerService.hide();
+
+    expect(spinnerService.hide).toHaveBeenCalled();
+    expect(overlayRef).toBeUndefined();
+  });
+
+});

src/app/modules/shared/services/spinner-overlay.service.ts

@@ -0,0 +1,44 @@
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Injectable } from '@angular/core';
+import { defer, NEVER } from 'rxjs';
+import { finalize, share } from 'rxjs/operators';
+import { SpinnerOverlayComponent } from './../components/spinner-overlay/spinner-overlay.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SpinnerOverlayService {
+  public overlayRef: OverlayRef = undefined;
+  static spinner$: any;
+
+  constructor(private readonly overlay: Overlay) {}
+
+  public readonly spinner$ = defer(() => {
+    this.show();
+    return NEVER.pipe(
+      finalize(() => {
+        this.hide();
+      })
+    );
+  }).pipe(share());
+
+  public show(): void {
+    Promise.resolve(null).then(() => {
+      this.overlayRef = this.overlay.create({
+        positionStrategy: this.overlay
+          .position()
+          .global()
+          .centerHorizontally()
+          .centerVertically(),
+        hasBackdrop: true,
+      });
+      this.overlayRef.attach(new ComponentPortal(SpinnerOverlayComponent));
+    });
+  }
+
+  public hide(): void {
+    this.overlayRef.detach();
+    this.overlayRef = undefined;
+  }
+}

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

@@ -45,6 +45,9 @@ export class EntryEffects {
     mergeMap(() =>
       this.entryService.summary().pipe(
         map((response) => {
+          if (!response){
+            this.toastrService.warning('Your summary information could not be loaded');
+          }
           return new actions.LoadEntriesSummarySuccess(response);
         }),
         catchError((error) => {

src/environments/environment.prodlegacy.ts

@@ -2,7 +2,7 @@ import { EnvironmentType } from './enum';
 
 export const environment = {
   production: EnvironmentType.TT_PROD_LEGACY,
-  timeTrackerApiUrl:  process.env["API_URL"],
+  timeTrackerApiUrl: process.env["API_URL"],
   stackexchangeApiUrl: 'https://api.stackexchange.com',
 };