Refactor client. part 1. Mainly for Exercises

fitness-tracker/appsettings.json

@@ -5,6 +5,7 @@
         "scopes":["User.Read.All"]
     },
     "azureSettings" :{
+        "baseAddress":"https://login.microsoftonline.com/",
         "clientId": "5a7b6d1a-39a3-4045-8d48-c3b4d48c9f2c",
         "tenantId": "a0935d2d-0d4f-4b48-9f05-1793bcb764c0",
         "api": "api://fd7c3ed7-d3f1-4637-b82a-3a9d0ce64eb3/",

fitness-tracker/src/app/app.component.ts

@@ -43,7 +43,9 @@ export class AppComponent implements OnInit, OnDestroy{
     this.msalService.logout();
   }
 
-  getProfile() {
+  // remove unused code
+
+  /*getProfile() {
     this.profile$ = this.msalService.getProfile();
   }
 
@@ -59,5 +61,5 @@ export class AppComponent implements OnInit, OnDestroy{
     this.msalService.getUsers(params)
       .pipe(takeUntil(this._onDestroy$))
       .subscribe((users) => (this.users = users.value));;
-  }
+  }*/
 }

fitness-tracker/src/app/app.module.ts

@@ -15,11 +15,13 @@ import { CoreModule } from './core/core.module';
 import { MsalAuthModule } from './msal/msal.module';
 import { MSALAuthguard } from './msal/msal-authguard';
 import { MsalGuard, MsalRedirectComponent } from '@azure/msal-angular';
+import { ExercisesModule } from './exercises/exercises.module';
+import { BrowserModule } from '@angular/platform-browser';
 
 const appRoute: Routes = [
-    {path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule), canLoad: [MSALAuthguard, MsalGuard]},
-    {path: 'logs', loadChildren: () => import('./logs/logs.module').then(m => m.LogsModule), canLoad: [MSALAuthguard, MsalGuard]},
-    //{path: 'login', component: AuthAccountLoginComponent},
+    {path: 'exercises', loadChildren: () => import('./exercises/exercises.module').then(m => m.ExercisesModule)},
+    /*{path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule), canLoad: [MSALAuthguard, MsalGuard]},
+    {path: 'logs', loadChildren: () => import('./logs/logs.module').then(m => m.LogsModule), canLoad: [MSALAuthguard, MsalGuard]},*/
     {path: 'register', component: AuthAccountRegisterComponent},
     {path: 'welcome', component: WelcomeComponent},
     {path: 'auth', component: MsalRedirectComponent },
@@ -35,12 +37,11 @@ const appRoute: Routes = [
     WelcomeComponent
   ],
   imports: [
-    UsersModule,
-    LogsModule,
     CoreModule,
+    ExercisesModule,  
     MsalAuthModule.forRoot(),
     ToastrModule.forRoot(), 
-    RouterModule.forRoot(appRoute),
+    RouterModule.forRoot(appRoute)
   ],
   providers: [
     MSALAuthguard,

fitness-tracker/src/app/auth/auth-account/auth-account-register.component.ts

@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 
 import { IUserAccount } from 'src/app/shared/models/user';
 import { NotificationService } from 'src/app/core/services/notification.service';
-import { propertyLengthGuard, passwordGuard, confirmedValidator } from 'src/app/shared/custom-validators';
+import { propertyLengthGuard, passwordGuard, confirmedValidator } from 'src/app/shared/validators/custom-validators';
 import { AuthStore } from '../auth.store';
 
 let validationMessages = {

fitness-tracker/src/app/core/core.module.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from "@angular/common";
 import { HttpClientModule} from "@angular/common/http";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@@ -10,6 +11,7 @@ import { NavBarComponent } from "./nav-bar/nav-bar.component";
         NavBarComponent
     ],
     imports:[
+        CommonModule,
         BrowserModule, 
         RouterModule,
         HttpClientModule,

fitness-tracker/src/app/core/nav-bar/nav-bar.component.html

@@ -9,10 +9,10 @@
       <div class="navbar-collapse collapse d-sm-inline-flex justify-content-end" [ngClass]="{ show: isExpanded }">
         <ul class='nav nav-pills ml-auto' *ngIf="!loggedIn">
           <li><a class='nav-link' [routerLink]="['/register']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Register</a></li>
-          <li><a class='nav-link' [routerLink]="['/welcome']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Login</a></li>
+          <li><a class='nav-link' (click)="login()" [routerLink]="['/welcome']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Login</a></li>
         </ul>
         <ul class='nav nav-pills ml-auto' *ngIf="loggedIn">
-          <li><a class='nav-link' (click)="logout()" [routerLink]="['/welcome']" routerLinkActive="active">Log out</a></li>
+          <li><a class='nav-link' (click)="logout()" [routerLink]="['/welcome']" routerLinkActive="active" >Log out</a></li>
         </ul>
       </div>
     </div>

fitness-tracker/src/app/exercises/exercise.service.ts

@@ -0,0 +1,16 @@
+import { HttpClientService } from '../core/services/httpclient.service';
+import { Inject, Injectable } from '@angular/core';
+import { shareReplay, map } from 'rxjs/operators';
+import { Exercise } from '../shared/models/exercise';
+import { APP_SERVER } from '../core/services/appsettings.services';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ExerciseService{
+    constructor(private httpClientService:HttpClientService, @Inject(APP_SERVER)private appServer: string ){}
+
+    getExercises(){
+        return this.httpClientService.get<Exercise[]>(`${this.appServer}exercise`).pipe(shareReplay());
+    }
+}

fitness-tracker/src/app/shared/stores/exerciseStore.ts → fitness-tracker/src/app/exercises/exerciseStore.ts

@@ -1,23 +1,24 @@
 import { BehaviorSubject, Observable } from 'rxjs';
-import { IExercise } from 'src/app/shared/models/exercise';
 import { tap } from 'rxjs/operators';
-import { ExerciseService } from '../../core/services/exerciseService';
 import { Injectable } from '@angular/core';
 
+import { ExerciseService } from './exercise.service';
+import { Exercise } from '../shared/models/exercise';
+
 @Injectable({
     providedIn: 'root'
 })
 export class ExerciseStore{
 
-    private _exerciseList: BehaviorSubject<IExercise[]> = new BehaviorSubject(null);
-    public exerciseList$:Observable<IExercise[]> = this._exerciseList.asObservable();
+    private _exerciseList: BehaviorSubject<Exercise[]> = new BehaviorSubject(null);
+    public exerciseList$:Observable<Exercise[]> = this._exerciseList.asObservable();
 
     constructor(private exerciseService:ExerciseService){}
 
-    public getExercises():Observable<IExercise[]>{
+    public getExercises():Observable<Exercise[]>{
         return this.exerciseService.getExercises()
             .pipe(tap({
-                next:(exercises:IExercise[]) => {
+                next:(exercises:Exercise[]) => {
                     this._exerciseList.next(exercises)
                 }
             }));

fitness-tracker/src/app/exercises/exercises.component.html

@@ -0,0 +1,19 @@
+<div class="card">
+    <div class="card-header">
+        <h3>{{pageTitle}}</h3>
+    </div>
+    <div class="col-lg-12 table-responsive">  
+        <table class="table table-striped">  
+            <thead>  
+                <tr>  
+                    <th>Exercises</th>
+                </tr>  
+            </thead>  
+            <tbody>  
+                <tr *ngFor="let exercise of exercises$ | async ">  
+                    <td>{{exercise.Name}}</td>
+                </tr>  
+            </tbody>  
+        </table>  
+    </div>  
+</div>

fitness-tracker/src/app/exercises/exercises.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from "@angular/core";
+import { Observable } from "rxjs";
+import { Exercise } from "../shared/models/exercise";
+import { ExerciseStore } from "./exerciseStore";
+
+@Component({
+    templateUrl: './exercises.component.html'
+})
+export class ExercisesComponent implements OnInit{
+    pageTitle:string = 'Exercises';
+
+    exercises$?: Observable<Exercise[]>;
+
+    constructor(private exerciseStore:ExerciseStore){}
+
+    ngOnInit(): void {
+      console.log("ExercisesComponent.ngOnInit");
+
+      this.exercises$ = this.exerciseStore.getExercises()
+    }
+}

fitness-tracker/src/app/exercises/exercises.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import {ExercisesComponent} from "./exercises.component"
+import { ExercisesRoutingModule } from "./exercises.routing.module";
+
+@NgModule({
+    declarations:[
+        ExercisesComponent     
+    ],
+    imports:[
+        CommonModule,
+        ExercisesRoutingModule,
+    ]
+})
+export class ExercisesModule {}

fitness-tracker/src/app/exercises/exercises.routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+import { ExercisesComponent } from "./exercises.component";
+
+const routes: Routes = [
+    {path: 'exercises', component: ExercisesComponent}
+]
+
+@NgModule({
+    imports:[
+        RouterModule.forChild(routes)
+    ],
+    exports:[
+        RouterModule
+    ]
+})
+export class ExercisesRoutingModule{}
+

fitness-tracker/src/app/home/welcome.component.html

@@ -42,7 +42,7 @@ <h4>Exercises</h4>
             <div class="card-body">
               <h4 class="card-title">Exercise Guide</h4>
               <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
-              <a href="#" class="btn btn-primary">View</a>
+              <a class="btn btn-primary" [routerLink]="['/exercises/exercises']" routerLinkActive="active"  [routerLinkActiveOptions]="{exact:true}">View</a>              
             </div>
             <div class="card-body">
               <h4 class="card-title">Cardio</h4>

fitness-tracker/src/app/logs/log-create/log-create.component.ts

@@ -1,17 +1,16 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Router, ActivatedRoute} from '@angular/router';
 import { Subject, Observable } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { UUID } from 'angular2-uuid';
 
 import { LogService } from '../log.service';
 import { NotificationService } from 'src/app/core/services/notification.service';
-import { ILog, ILogExercise, ISaveLog, ISingleLog, SaveLog, SingleLog, } from 'src/app/shared/models/log';
-import { IExercise } from 'src/app/shared/models/exercise';
+import { ILog, ISaveLog, ISingleLog, SaveLog } from 'src/app/shared/models/log';
 import { AuthStore } from 'src/app/auth';
 import { IUser } from 'src/app/shared/models/user';
-import { ExerciseStore } from 'src/app/shared/stores/exerciseStore';
+import { ExerciseStore } from 'src/app/exercises/exerciseStore';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Exercise } from 'src/app/shared/models/exercise';
 
 @Component({
     selector: 'log-create',
@@ -21,18 +20,18 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 export class LogCreateComponent implements OnInit, OnDestroy{
 
-    exercises$: Observable<IExercise[]> 
-    exercises: IExercise[]
+    exercises$: Observable<Exercise[]> 
+    exercises: Exercise[]
 
     exerciseForm:FormGroup  
 
     log:ISingleLog
 
-    ex:IExercise
+    ex:Exercise
 
     errorMessage:string = ""
     logCreatedOn:string
-    exercise:IExercise;
+    exercise:Exercise;
 
     date:string;
 

fitness-tracker/src/app/msal/msal.module.ts

@@ -13,7 +13,7 @@ import {
 
 import { MSALGuardConfigFactory, MSALInstanceFactory, MSALInterceptorConfigFactory } from "./msal";
 import { MsalAuthService } from "./msal.service";
-import { AZURE_SETTINGS, MICROSOFT_GRAPH_SETTINGS } from "../core/services/appsettings-services";
+import { AZURE_SETTINGS, MICROSOFT_GRAPH_SETTINGS } from "../core/services/appsettings.services";
 
 @NgModule()
 export class MsalAuthModule{

fitness-tracker/src/app/msal/msal.service.ts

@@ -3,7 +3,7 @@ import { MsalService } from "@azure/msal-angular";
 import { AuthenticationResult } from "@azure/msal-browser";
 import * as MicrosoftGraph from "@microsoft/microsoft-graph-types";
 import { BehaviorSubject, Observable } from "rxjs";
-import { MICROSOFT_GRAPH_SETTINGS } from "../core/services/appsettings-services";
+import { MICROSOFT_GRAPH_SETTINGS } from "../core/services/appsettings.services";
 
 import { HttpClientService } from "../core/services/httpclient.service";
 import { MicrosoftGraphSettings } from "./models/microsoftgraph-settings";

fitness-tracker/src/app/shared/models/exercise.ts

@@ -1,17 +1,8 @@
-export function createExercise(exercise?:IExercise){
-    return new Exercise(exercise);
-}
-
-export interface IExercise{
-    exerciseId: number;
-    name: string;
-}
-
-class Exercise implements IExercise{
+export class Exercise{
     exerciseId: number;
     name: string;
 
-    constructor(init?: Partial<IExercise>){
+    constructor(init?: Partial<Exercise>){
         if(init){
             Object.assign(this, init)
         }

fitness-tracker/src/app/shared/custom-validators.ts → fitness-tracker/src/app/shared/validators/custom-validators.ts

@@ -1,5 +1,5 @@
 import { AbstractControl, FormGroup } from '@angular/forms';
-import { patternValidator } from './string-helper';
+import { patternValidator } from '../string-helper';
 
 export function passwordGuard(num:number) : {[key:string]: any} | null{