update routing

apps/fantalytic-public/src/app/app.config.ts

@@ -25,17 +25,33 @@ const routes: Route[] = [
   },
   {
     path: 'fantasy-football',
-    loadChildren: () =>
-      import('../app/fantasy-football/const/fantasy-football-routes.const').then(
-        (m) => m.FANTASY_FOOTBALL_ROUTES
-      ),
+    loadComponent: () => import('../app/fantasy-football/fantasy-football.component').then((a) => a.FantasyFootballComponent),
     canActivate: [MobileCheckerService],
     providers: [
       importProvidersFrom(
-        StoreModule.forFeature('fantasyFootball', fantasyFootballReducer),
+        StoreModule.forFeature('fantasy-football', fantasyFootballReducer),
         EffectsModule.forFeature([FantasyFootballEffects]),
       )      
     ],
+    children: [
+    {
+        path: 'stats',
+        loadComponent: () => import('../app/fantasy-football/components/stats/stats.component').then(c => c.StatsComponent)
+      },
+      {
+        path: 'compare',
+        loadComponent: () => import('../app/fantasy-football/components/compare-players/compare-players.component').then(c => c.ComparePlayersComponent)
+      },
+      {
+        path: 'scores',
+        loadComponent: () => import('../app/fantasy-football/components/scores/scores.component').then(c => c.ScoresComponent)
+      },
+      {
+          path: '',
+          pathMatch: 'full',
+          redirectTo: 'stats'
+      }
+  ]
   },
   {
     path: '',

apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.html

@@ -1,3 +1,3 @@
 <div class="sidebar-container">
-    <button color="primary" *ngFor="let item of SIDEBAR_ITEM_MAP" mat-raised-button (click)="sideBarEvent.emit(item.path)">{{item.label}}</button>
+    <button class="pmt-white" color="primary" *ngFor="let item of SIDEBAR_ITEM_MAP" mat-raised-button (click)="sideBarEvent.emit(item.path)">{{item.label}}</button>
 </div>  

apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.scss

@@ -5,4 +5,5 @@
     button {
         margin-bottom: 1rem;
     }
-}
+}
+

apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.html

@@ -0,0 +1 @@
+<p>scores works!</p>

apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.spec.ts

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

apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'pmt-scores',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './scores.component.html',
+  styleUrls: ['./scores.component.scss'],
+})
+export class ScoresComponent {}

apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.html

@@ -0,0 +1,33 @@
+<section class="m-2" *ngIf="fantasyFootballState$ | async as state">
+  <mat-sidenav-container autosize >
+    <mat-sidenav-content>
+        <div class="filter-container">
+            <div class="position-container">
+                <span>Position</span>
+                <button [ngClass]="{'active': (currentPosition$ | async) === 'QB'}" (click)="updatePosition('QB')" mat-button>QB</button>
+                <button [ngClass]="{'active': (currentPosition$ | async) === 'RB'}" (click)="updatePosition('RB')" mat-button>RB</button>
+                <button [ngClass]="{'active': (currentPosition$ | async) === 'WR'}" (click)="updatePosition('WR')" mat-button>WR / TE</button>
+                <button [ngClass]="{'active': (currentPosition$ | async) === 'DEF'}" (click)="updatePosition('DEF')" mat-button>DEF</button>
+            </div>
+            <div class="year-container">
+                <span>Year</span>
+                <button [ngClass]="{'active': (currentYear$ | async) === year}" (click)="filterByYear(year)" mat-button *ngFor="let year of ALL_YEARS">{{year}}</button>
+            </div>
+        </div>
+        <div class="grid-container" *ngIf="state.gridConfig">
+            <ag-grid-angular #statGrid
+                class="ag-theme-alpine"
+                [columnDefs]="state.gridConfig.colDef"
+                [rowData]="state.selectedRowData"
+                rowSelection="multiple"
+                [defaultColDef]="DEFAULT_COL_DEF_SETTINGS"
+                (rowSelected)="handleUpdatedRowSelected()"></ag-grid-angular>
+
+        </div>
+    </mat-sidenav-content>
+    <mat-sidenav #drawer mode="side" position="end">
+        <pmt-fantasy-football-sidebar (sideBarEvent)="handleSidebarEvent($event)"></pmt-fantasy-football-sidebar>
+    </mat-sidenav>
+  </mat-sidenav-container>
+</section>
+

apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.scss

@@ -0,0 +1,3 @@
+ag-grid-angular {
+  height: 50vh;
+}

apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.spec.ts

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

apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.ts

@@ -0,0 +1,83 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { FantasyFootballState, PositionTypes } from '@pmt/fantalytic-shared';
+import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
+import { Observable, Subject } from 'rxjs';
+import { DEFAULT_COL_DEF_SETTINGS } from '../../../const/grid.const';
+import { setPositionType, updateSelectedPlayers, updateYearFilter } from '../../ngrx/actions/fantasy-football.actions';
+import { getSelectedYear, getPosition, getFantasyFootballState } from '../../ngrx/selectors/fantasy-football.selectors';
+import { MatButtonModule } from '@angular/material/button';
+import { FantasyFootballSidebarComponent } from '../fantasy-football-sidebar/fantasy-football-sidebar.component';
+
+@Component({
+  selector: 'pmt-stats',
+  standalone: true,
+  imports: [ 
+    CommonModule,
+    AgGridModule,
+    MatButtonModule,
+    MatSidenavModule,
+    FantasyFootballSidebarComponent,
+  ],
+  templateUrl: './stats.component.html',
+  styleUrls: ['./stats.component.scss'],
+})
+export class StatsComponent implements OnInit, OnDestroy {
+
+  @ViewChild('statGrid')
+  statGrid!: AgGridAngular;
+
+  @ViewChild('drawer')
+  drawer!: MatSidenav;
+
+  fantasyFootballState$!: Observable<FantasyFootballState>;
+  currentYear$ = this._store.select(getSelectedYear);
+  currentPosition$ = this._store.select(getPosition);
+
+  readonly DEFAULT_COL_DEF_SETTINGS = DEFAULT_COL_DEF_SETTINGS;
+  readonly ALL_YEARS = [2018,2019,2020,2021,2022];
+
+  private _compDestroyedSub$ = new Subject<void>();
+
+  constructor(private _store: Store<FantasyFootballState>, private _router: Router) {}
+
+  ngOnInit(): void {
+      this._store.dispatch(setPositionType(PositionTypes.QB));
+      this.fantasyFootballState$ = this._store.select(getFantasyFootballState);
+  }
+
+  ngOnDestroy(): void {
+      this._compDestroyedSub$.next();
+  }
+
+  gridReady(): void {
+    this.statGrid.api.sizeColumnsToFit();
+  }
+
+  handleUpdatedRowSelected(): void {
+    const selectedPlayers = this.statGrid.api.getSelectedNodes().map(node => node.data.player);
+    this._store.dispatch(updateSelectedPlayers(selectedPlayers));
+    if (selectedPlayers.length) {
+      this.drawer.open();
+    } else {
+      this.drawer.close();
+    }
+
+  }
+
+  updatePosition(position: string): void {
+    this.drawer.close();
+    this._store.dispatch(setPositionType(position as PositionTypes));
+  }
+
+  handleSidebarEvent(path: string): void {
+    this._router.navigate(['fantasy-football', path]);
+  }
+
+  filterByYear(year: number): void {
+    this._store.dispatch(updateYearFilter(year));
+  }
+}

apps/fantalytic-public/src/app/fantasy-football/const/fantasy-football-routes.const.ts

@@ -1,10 +1,6 @@
 import { Route } from "@angular/router";
 
-export const FANTASY_FOOTBALL_ROUTES: Route[] = [
-    {
-        path: 'compare',
-        loadComponent: () => import('../components/compare-players/compare-players.component').then(c => c.ComparePlayersComponent)
-    },
+export const FANTASY_FOOTBALL_ROUTES: Route[] = [    
     {
         path: '',
         pathMatch: 'full',

apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.html

@@ -1,35 +1,10 @@
 
-<main class="main-container" *ngIf="fantasyFootballState$ | async as state">
-    <mat-sidenav-container autosize>
-        <mat-sidenav-content>
-            <div class="filter-container">
-                <div class="position-container">
-                    <span>Position</span>
-                    <button [ngClass]="{'active': (currentPosition$ | async) === 'QB'}" (click)="updatePosition('QB')" mat-button>QB</button>
-                    <button [ngClass]="{'active': (currentPosition$ | async) === 'RB'}" (click)="updatePosition('RB')" mat-button>RB</button>
-                    <button [ngClass]="{'active': (currentPosition$ | async) === 'WR'}" (click)="updatePosition('WR')" mat-button>WR / TE</button>
-                    <button [ngClass]="{'active': (currentPosition$ | async) === 'DEF'}" (click)="updatePosition('DEF')" mat-button>DEF</button>
-                </div>
-                <div class="year-container">
-                    <span>Year</span>
-                    <button [ngClass]="{'active': (currentYear$ | async) === year}" (click)="filterByYear(year)" mat-button *ngFor="let year of ALL_YEARS">{{year}}</button>
-                </div>
-            </div>
-            <div class="grid-container" *ngIf="state.gridConfig">
-                <ag-grid-angular #statGrid
-                    class="ag-theme-alpine"
-                    [columnDefs]="state.gridConfig.colDef"
-                    [rowData]="state.selectedRowData"
-                    rowSelection="multiple"
-                    [defaultColDef]="DEFAULT_COL_DEF_SETTINGS"
-                    (rowSelected)="handleUpdatedRowSelected()"></ag-grid-angular>
-
-            </div>
-        </mat-sidenav-content>
-        <mat-sidenav #drawer mode="side" position="end">
-            <pmt-fantasy-football-sidebar (sideBarEvent)="handleSidebarEvent($event)"></pmt-fantasy-football-sidebar>
-        </mat-sidenav>
-    </mat-sidenav-container>
+<main class="main-container flex flex-col">
+    <div class="w-full inline-flex m-2">
+        <button mat-button routerLink="/fantasy-football/stats" routerLinkActive="underline" class="mr-2 cursor-pointer">Stats</button>
+        <button mat-button routerLink="/fantasy-football/scores" routerLinkActive="underline" class="cursor-pointer">Scores</button>
+    </div>
+    <router-outlet></router-outlet>
 
 </main>
 

apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.scss

@@ -1,35 +0,0 @@
-.main-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    mat-sidenav-container {
-        width: 100vw;
-    }
-}
-
-.filter-container {
-    grid-column: 1 / 3;
-    display: inline-flex;
-    margin: 1rem;
-    .position-container, .year-container {
-        background-color: #ccc;
-        margin-right: 1rem;
-    }
-    span, div, a {
-        padding: 1.5rem;
-    }
-}
-
-.grid-container {
-    height: 70vh;
-    width: 90vw;
-    grid-column: 2 / 3;
-    margin: 1rem;
-    ag-grid-angular {
-        height: 100%;
-        width: 100%;
-    }
-}
-
-.active {
-    text-decoration: underline;
-}