refactor(*): football plans table populated through ngrx workflow

feat(ngrx actions): football-training-plans action are created

feat(ngrx store): football training plans is created

angular.json

@@ -491,6 +491,31 @@
                     }
                 }
             }
+        },
+        "ngrx-actions-football-training-plans": {
+            "projectType": "library",
+            "root": "libs/ngrx-actions/football-training-plans",
+            "sourceRoot": "libs/ngrx-actions/football-training-plans/src",
+            "prefix": "plan-it",
+            "architect": {
+                "lint": {
+                    "builder": "@nrwl/linter:eslint",
+                    "options": {
+                        "lintFilePatterns": [
+                            "libs/ngrx-actions/football-training-plans/src/**/*.ts",
+                            "libs/ngrx-actions/football-training-plans/src/**/*.html"
+                        ]
+                    }
+                },
+                "test": {
+                    "builder": "@nrwl/jest:jest",
+                    "outputs": ["coverage/libs/ngrx-actions/football-training-plans"],
+                    "options": {
+                        "jestConfig": "libs/ngrx-actions/football-training-plans/jest.config.js",
+                        "passWithNoTests": true
+                    }
+                }
+            }
         }
     }
 }

jest.config.js

@@ -12,6 +12,7 @@ module.exports = {
         '<rootDir>/libs/ui-components/navigation-cards',
         '<rootDir>/libs/ngrx-core/configuration',
         '<rootDir>/libs/ngrx-actions/football-plan-configuration',
+        '<rootDir>/libs/ngrx-actions/football-training-plans',
         '<rootDir>/libs/ngrx-store/football-plan-configuration',
         '<rootDir>/libs/ngrx-store/states',
         '<rootDir>/libs/ngrx-store/football',

libs/features/football-plans/src/lib/football-plan-editor/football-plan-editor.component.spec.ts

@@ -20,7 +20,7 @@ import { TrainingPlansService } from '@plan-it/training-plans-api';
 import { getFootballConfigurations } from '@plan-it/ngrx-actions/football-configuration';
 import { PlanConfigurationType } from '@plan-it/types/plan-configuration';
 import { TrainingPlan } from '@plan-it/types/training-plan';
-import { FootballState, initialState as footballPlanConfigurationInitialState } from '@plan-it/ngrx-store/football';
+import { FootballPlanConfigurationState, FootballState } from '@plan-it/ngrx-store/football';
 
 import { FootballPlanEditorComponent } from './football-plan-editor.component';
 
@@ -36,6 +36,14 @@ describe('FootballPlanFormComponent', () => {
     const mockTrainingPlansService: Spy<TrainingPlansService> = createSpyFromClass(TrainingPlansService, ['addPlan']);
     let store: Store<FootballState>;
 
+    const initialState = (): FootballPlanConfigurationState => {
+        return {
+            configuration: { ageClasses: [], levels: [] },
+            loading: false,
+            error: false,
+        };
+    };
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [MockModule(ReactiveFormsModule), NoopAnimationsModule],
@@ -60,7 +68,7 @@ describe('FootballPlanFormComponent', () => {
                 provideMockStore({
                     initialState: {
                         football: {
-                            footballPlanConfiguration: footballPlanConfigurationInitialState(),
+                            footballPlanConfiguration: initialState(),
                         },
                     },
                 }),

libs/features/football-plans/src/lib/football-plan-table/football-plans-table.component.html

@@ -1,5 +1,5 @@
 <div class="mat-elevation-z8">
-    <table mat-table class="football-plans_table" aria-label="Football training plans">
+    <table mat-table [dataSource]="footballPlans$ | async" class="football-plans_table" aria-label="Football training plans">
         <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef>{{ 'PLANS.column.name' | translate }}</th>
             <td mat-cell *matCellDef="let row">{{ row.name }}</td>

libs/features/football-plans/src/lib/football-plan-table/football-plans-table.component.spec.ts

@@ -1,5 +1,4 @@
 import { MockComponent, MockPipe, ngMocks } from 'ng-mocks';
-import { of } from 'rxjs';
 
 import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
@@ -9,6 +8,10 @@ import { MatTableModule } from '@angular/material/table';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslatePipe } from '@ngx-translate/core';
 import { TrainingPlansService } from '@plan-it/training-plans-api';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { FootballState, FootballTrainingPlansState } from '@plan-it/ngrx-store/football';
+import { getFootballTrainingPlans } from '@plan-it/ngrx-actions/football-training-plans';
+import { TrainingPlan } from '@plan-it/types/training-plan';
 
 import { FootballPlansTableComponent } from './football-plans-table.component';
 
@@ -21,11 +24,43 @@ class TestWrapperComponent {
 
 describe('FootballPlansTableComponentComponent', () => {
     let fixture: ComponentFixture<TestWrapperComponent>;
+    let store: MockStore<FootballState>;
 
     const plans = [
-        { id: 'id', name: 'Plany', ageClass: 'U18', level: 4, creator: 'Konci' },
-        { id: 'id2', name: 'Awesome plan', ageClass: 'U14', level: 3, creator: 'Majom' },
-    ];
+        {
+            id: 'id',
+            ageClass: 'U18',
+            description: 'desc',
+            goal: 'goal',
+            level: 4,
+            name: 'Plany',
+            steps: [
+                {
+                    name: 'stepName',
+                    description: '',
+                },
+            ],
+        },
+        {
+            id: 'id2',
+            ageClass: 'U20',
+            description: 'description',
+            goal: 'goal',
+            level: 3,
+            name: 'Awesome plan',
+            steps: [],
+        },
+    ] as TrainingPlan[];
+
+    const initialState = (): FootballTrainingPlansState => {
+        return {
+            selectedPlanId: null,
+            loading: false,
+            error: false,
+            ids: plans.map((plan: TrainingPlan) => plan.id),
+            entities: { id: plans[0], id2: plans[1] },
+        };
+    };
 
     beforeEach(
         waitForAsync(() => {
@@ -42,17 +77,24 @@ describe('FootballPlansTableComponentComponent', () => {
                     {
                         provide: TrainingPlansService,
                         useValue: {
-                            getPlans$: () => of(plans),
                             deletePlan: jasmine.createSpy(),
                         },
                     },
+                    provideMockStore({
+                        initialState: {
+                            football: {
+                                footballTrainingPlans: initialState(),
+                            } as Partial<FootballState>,
+                        },
+                    }),
                 ],
             }).compileComponents();
         })
     );
 
     beforeEach(() => {
         fixture = TestBed.createComponent(TestWrapperComponent);
+        store = TestBed.inject(MockStore);
     });
 
     const element = () => fixture.nativeElement.querySelector('pi-football-plans-table');
@@ -61,26 +103,32 @@ describe('FootballPlansTableComponentComponent', () => {
     const paginator = () => ngMocks.find(fixture.debugElement, MatPaginator).componentInstance;
 
     describe('Initializing', () => {
+        let spyDispatch: jasmine.Spy;
         beforeEach(() => {
+            spyDispatch = spyOn(store, 'dispatch').and.callThrough();
             fixture.detectChanges();
         });
 
         it('should be created', () => {
             expect(element()).toBeTruthy();
         });
 
+        it('should trigger football plans fetching', () => {
+            expect(spyDispatch).toHaveBeenCalledWith(
+                getFootballTrainingPlans({
+                    pageEvent: {
+                        length: 10,
+                        pageSize: 10,
+                        pageIndex: 0,
+                    },
+                })
+            );
+        });
+
         it('should have the table', () => {
             expect(table()).toExist();
         });
 
-        // it('should have the table rows', (done: DoneCallback) => {
-        //     fixture.beforeEachStable().then(() => {
-        //         fixture.detectChanges();
-        //         expect(tableRows().length).toEqual(plans.length);
-        //         done();
-        //     });
-        // });
-
         it('should have the table header column with translation keys', () => {
             const columns = fixture.componentInstance.component.displayedColumns;
             expect(tableHeaderColumns()[0].innerHTML).toContain(columns[0]);

libs/features/football-plans/src/lib/football-plan-table/football-plans-table.component.ts

@@ -1,13 +1,14 @@
 import { Subscription } from 'rxjs';
 
+import { Store, select } from '@ngrx/store';
+import { FootballState } from '@plan-it/ngrx-store/football';
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatTable } from '@angular/material/table';
 import { Router } from '@angular/router';
+import { selectFootballTrainingPlans } from '@plan-it/ngrx-store/football';
 import { TrainingPlansService } from '@plan-it/training-plans-api';
 import { TrainingPlanId } from '@plan-it/types/training-plan';
-
-import { FootballPlansTableDatasource, PlanTableItem } from './football-plans-table-datasource';
+import { getFootballTrainingPlans } from '@plan-it/ngrx-actions/football-training-plans';
 
 @Component({
     selector: 'pi-football-plans-table',
@@ -16,34 +17,41 @@ import { FootballPlansTableDatasource, PlanTableItem } from './football-plans-ta
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FootballPlansTableComponent implements OnInit, AfterViewInit, OnDestroy {
-    @ViewChild(MatTable, { static: false }) table!: MatTable<PlanTableItem>;
     @ViewChild(MatPaginator, { static: false }) paginator!: MatPaginator;
 
-    dataSource!: FootballPlansTableDatasource;
+    footballPlans$ = this.store.pipe(select(selectFootballTrainingPlans));
+
     displayedColumns = ['name', 'ageClass', 'level', 'actions'];
 
     private readonly subscriptions = new Subscription();
 
     constructor(
+        private readonly store: Store<FootballState>,
         private readonly trainingPlansService: TrainingPlansService,
         private readonly changeDetectorRef: ChangeDetectorRef,
         private readonly router: Router
     ) {}
 
     ngOnInit(): void {
-        this.dataSource = new FootballPlansTableDatasource(this.trainingPlansService);
-        this.dataSource.loadPlans({
-            length: 10,
-            pageSize: 10,
-            pageIndex: 0,
-        });
+        this.store.dispatch(
+            getFootballTrainingPlans({
+                pageEvent: {
+                    length: 10,
+                    pageSize: 10,
+                    pageIndex: 0,
+                },
+            })
+        );
     }
 
     ngAfterViewInit(): void {
-        this.table.dataSource = this.dataSource;
         this.changeDetectorRef.markForCheck();
 
-        this.subscriptions.add(this.paginator.page.subscribe((pageEvent: PageEvent) => this.dataSource.loadPlans(pageEvent)));
+        this.subscriptions.add(
+            this.paginator.page.subscribe((pageEvent: PageEvent) => {
+                this.store.dispatch(getFootballTrainingPlans({ pageEvent }));
+            })
+        );
     }
 
     ngOnDestroy(): void {

libs/ngrx-actions/football-training-plans/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+    "extends": ["../../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts"],
+            "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+            "parserOptions": { "project": ["libs/ngrx-actions/training-plans/tsconfig.*?.json"] },
+            "rules": {
+                "@angular-eslint/directive-selector": ["error", { "type": "attribute", "prefix": "pi", "style": "camelCase" }],
+                "@angular-eslint/component-selector": ["error", { "type": "element", "prefix": "pi", "style": "kebab-case" }]
+            }
+        },
+        { "files": ["*.html"], "extends": ["plugin:@nrwl/nx/angular-template"], "rules": {} }
+    ]
+}

libs/ngrx-actions/football-training-plans/README.md

@@ -0,0 +1,7 @@
+# ngrx-actions-training-plans
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ngrx-actions-training-plans` to execute the unit tests.

libs/ngrx-actions/football-training-plans/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+    displayName: 'ngrx-actions-football-training-plans',
+    preset: '../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    globals: {
+        'ts-jest': {
+            tsConfig: '<rootDir>/tsconfig.spec.json',
+            stringifyContentPathRegex: '\\.(html|svg)$',
+            astTransformers: {
+                before: ['jest-preset-angular/build/InlineFilesTransformer', 'jest-preset-angular/build/StripStylesTransformer'],
+            },
+        },
+    },
+    coverageDirectory: '../../../coverage/libs/ngrx-actions/football-training-plans',
+    snapshotSerializers: [
+        'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+        'jest-preset-angular/build/AngularSnapshotSerializer.js',
+        'jest-preset-angular/build/HTMLCommentSerializer.js',
+    ],
+};