Merge branch 'master' into 19-change-app-colors

Author: daros10

package-lock.json

@@ -20,6 +20,9 @@
     "@angular/platform-browser": "~9.0.3",
     "@angular/platform-browser-dynamic": "~9.0.3",
     "@angular/router": "~9.0.3",
+    "@ngrx/effects": "^9.0.0",
+    "@ngrx/store": "^9.0.0",
+    "@ngrx/store-devtools": "^9.0.0",
     "bootstrap": "^4.4.1",
     "jquery": "^3.4.1",
     "minimist": "^1.2.5",

package.json

@@ -3,6 +3,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -28,6 +31,8 @@ import { FilterProjectPipe } from './modules/shared/pipes/filter-project/filter-
 import { SearchProjectComponent } from './modules/shared/components/search-project/search-project.component';
 import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
+import { ActivityEffects } from './modules/activities-management/store/activity-management.effects';
+import { activityManagementReducer } from './modules/activities-management/store';
 
 @NgModule({
   declarations: [
@@ -56,7 +61,19 @@ import { LoginComponent } from './modules/login/login.component';
     FilterProjectPipe,
     SearchProjectComponent,
   ],
-  imports: [CommonModule, BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, HttpClientModule],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    AppRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    StoreModule.forRoot({ activities: activityManagementReducer }),
+    EffectsModule.forRoot([ActivityEffects]),
+    StoreDevtoolsModule.instrument({
+      maxAge: 15, // Retains last 15 states
+    }),
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/app.module.ts

@@ -1,16 +1,29 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 
+import { allActivities } from './../../store/activity-management.selectors';
+import { ActivityState } from './../../store/activity-management.reducers';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivityListComponent } from './activity-list.component';
 
 describe('ActivityListComponent', () => {
   let component: ActivityListComponent;
   let fixture: ComponentFixture<ActivityListComponent>;
+  let mockActivitiesSelector;
+
+  const state = { data: [{id: 'id', name: 'name', description: 'description'}], isLoading: false, message: '' };
+
+  let store: MockStore<ActivityState>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ActivityListComponent ]
+      declarations: [ ActivityListComponent ],
+      providers: [ provideMockStore({ initialState: state }) ]
     })
     .compileComponents();
+
+    store = TestBed.inject(MockStore);
+
+    mockActivitiesSelector = store.overrideSelector( allActivities, state );
   }));
 
   beforeEach(() => {
@@ -22,4 +35,21 @@ describe('ActivityListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('onInit, LoadActivities action is dispatched', () => {
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+
+    expect(store.dispatch).toHaveBeenCalled();
+  });
+
+  it('onInit, activities field is populated with data from store', () => {
+    component.ngOnInit();
+
+    expect(component.activities).toBe(state.data);
+  });
+
+  afterEach(() => { fixture.destroy(); });
+
 });

src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts

@@ -1,16 +1,28 @@
-import { Input } from '@angular/core';
+import { Input, OnInit } from '@angular/core';
 import { Component } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+
+import { allActivities } from '../../store';
+import { LoadActivities } from './../../store/activity-management.actions';
+import { ActivityState } from './../../store/activity-management.reducers';
 import { Activity } from '../../../shared/models';
 
-@Component({
-  selector: 'app-activity-list',
-  templateUrl: './activity-list.component.html',
-  styleUrls: ['./activity-list.component.scss']
-})
-export class ActivityListComponent {
+@Component({selector: 'app-activity-list', templateUrl: './activity-list.component.html', styleUrls: ['./activity-list.component.scss']})
+export class ActivityListComponent implements OnInit {
+
+  @Input()activities: Activity[] = [];
+  public isLoading: boolean;
+
+  constructor(private store: Store<ActivityState>) { }
 
-  @Input() activities: Activity[] = [];
+  ngOnInit() {
+    this.store.dispatch(new LoadActivities());
+    const activities$ = this.store.pipe(select(allActivities));
 
-  constructor() { }
+    activities$.subscribe(response => {
+      this.isLoading = response.isLoading;
+      this.activities = response.data;
+    });
+  }
 
 }

src/app/modules/activities-management/components/activity-list/activity-list.component.ts

@@ -3,8 +3,15 @@
     <h1 class="card-title">Activity</h1>
     <div class="form-group">
       <label for="name">Name:</label>
-      <input class="form-control" id="name" type="text" formControlName="name" required />
-      <div class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
+      <input
+        class="form-control"
+        id="name"
+        type="text"
+        formControlName="name"
+        [class.is-invalid]="name.invalid && name.touched"
+        required
+      />
+      <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
         Activity name is required.
       </div>
     </div>

src/app/modules/activities-management/components/create-activity/create-activity.component.html

@@ -5,10 +5,9 @@ import { Activity } from '../../../shared/models';
 @Component({
   selector: 'app-create-activity',
   templateUrl: './create-activity.component.html',
-  styleUrls: ['./create-activity.component.scss']
+  styleUrls: ['./create-activity.component.scss'],
 })
 export class CreateActivityComponent {
-
   activityForm: FormGroup;
 
   @Input()
@@ -17,7 +16,7 @@ export class CreateActivityComponent {
   constructor(private formBuilder: FormBuilder) {
     this.activityForm = this.formBuilder.group({
       name: ['', Validators.required],
-      description: ['']
+      description: [''],
     });
   }
 
@@ -35,5 +34,4 @@ export class CreateActivityComponent {
   get description() {
     return this.activityForm.get('description');
   }
-
 }

src/app/modules/activities-management/components/create-activity/create-activity.component.ts

@@ -1,5 +1,6 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
 import { Activity } from '../../shared/models';
 import { ActivityService } from './activity.service';
 
@@ -28,14 +29,15 @@ describe('Activity Service', () => {
     expect(httpClient).toBeTruthy();
   }));
 
-  it('activities are read using GET from assets/activities.json URL', () => {
+  it('activities are read using GET from baseUrl', () => {
     const activitiesFoundSize = activities.length;
+    service.baseUrl = 'foo';
     service
       .getActivities()
       .subscribe(activitiesInResponse => {
         expect(activitiesInResponse.length).toBe(activitiesFoundSize);
       });
-    const getActivitiesRequest = httpMock.expectOne('assets/activities.json');
+    const getActivitiesRequest = httpMock.expectOne(service.baseUrl);
     expect(getActivitiesRequest.request.method).toBe('GET');
     getActivitiesRequest.flush(activities);
   });

src/app/modules/activities-management/services/activity.service.spec.ts

@@ -1,18 +1,20 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
+
+import { environment } from './../../../../environments/environment';
 import { Activity } from '../../shared/models';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ActivityService {
 
-  url = 'assets/activities.json';
+  baseUrl = `${environment.timeTrackerApiUrl}/activities`;
 
   constructor(private http: HttpClient) {}
 
   getActivities(): Observable<Activity[]> {
-    return this.http.get<Activity[]>(this.url);
+    return this.http.get<Activity[]>(this.baseUrl);
   }
 }

src/app/modules/activities-management/services/activity.service.ts

@@ -0,0 +1,16 @@
+import { LoadActivitiesFail } from './activity-management.actions';
+import { LoadActivitiesSuccess, ActivityManagementActionTypes } from './activity-management.actions';
+
+describe('LoadActivitiesSuccess', () => {
+
+  it('LoadActivitiesSuccess type is ActivityManagementActionTypes.LoadActivitiesSuccess', () => {
+    const loadActivitiesSuccess = new LoadActivitiesSuccess([]);
+    expect(loadActivitiesSuccess.type).toEqual(ActivityManagementActionTypes.LoadActivitiesSuccess);
+  });
+
+  it('LoadActivitiesFail type is ActivityManagementActionTypes.LoadActivitiesFail', () => {
+    const loadActivitiesFail = new LoadActivitiesFail('error');
+    expect(loadActivitiesFail.type).toEqual(ActivityManagementActionTypes.LoadActivitiesFail);
+  });
+
+});