#85 reading activities with api

src/app/modules/time-clock/pages/time-clock.component.html

@@ -36,9 +36,11 @@ <h6 class="text-left"><strong>Projects</strong></h6>
       <br />
       <form *ngIf="!isClockIn || showFields">
         <div class="form-group row">
-          <label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
+          <label for="activitiesSelect" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
           <div class="col-sm-10">
-            <input type="text" class="form-control" />
+            <select id="activitiesSelect" class="form-control">
+              <option *ngFor="let activity of activities;">{{activity.name}}</option>
+            </select>
           </div>
         </div>
         <div class="form-group row">
@@ -61,12 +63,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
             <button *ngIf="isClockIn" class="btn btn-primary" type="button" (click)="employeClockIn()">
               Clock In
             </button>
-            <button
-              *ngIf="!isClockIn"
-              class="btn btn-primary"
-              type="button"
-              (click)="employeClockOut()"
-            >
+            <button *ngIf="!isClockIn" class="btn btn-primary" type="button" (click)="employeClockOut()">
               Clock Out
             </button>
           </div>

src/app/modules/time-clock/pages/time-clock.component.spec.ts

@@ -1,3 +1,4 @@
+import { LoadActivities } from '../../activities-management/store/activity-management.actions';
 import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
@@ -49,6 +50,14 @@ describe('TimeClockComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('onInit, LoadActivities action is dispatched', () => {
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new LoadActivities());
+  });
+
   it('Service injected via inject(...) and TestBed.get(...) should be the same instance', inject(
     [ProjectService],
     (injectService: ProjectService) => {

src/app/modules/time-clock/pages/time-clock.component.ts

@@ -1,3 +1,8 @@
+import { LoadActivities } from '../../activities-management/store/activity-management.actions';
+import { ActivityState } from '../../activities-management/store/activity-management.reducers';
+import { Store, select } from '@ngrx/store';
+import { allActivities } from '../../activities-management/store';
+import { Activity } from 'src/app/modules/shared/models';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -25,7 +30,9 @@ export class TimeClockComponent implements OnInit {
   isClockInEnable = false;
   isHidenForm = true;
 
-  constructor() {
+  activities: Activity[] = [];
+
+  constructor(private store: Store<ActivityState>) {
     this.isClockIn = true;
     this.isEnterTechnology = false;
     this.hourCounterRealTime = 0;
@@ -36,6 +43,14 @@ export class TimeClockComponent implements OnInit {
     this.seconds = 0;
   }
 
+  ngOnInit() {
+    this.store.dispatch(new LoadActivities());
+    const activities$ = this.store.pipe(select(allActivities));
+    activities$.subscribe((response) => {
+      this.activities = response;
+    });
+  }
+
   employeClockIn(): boolean {
     this.isClockInEnable = true;
     this.isClockIn = !this.isClockIn;
@@ -119,5 +134,4 @@ export class TimeClockComponent implements OnInit {
     this.isClockInEnable = false;
   }
 
-  ngOnInit(): void {}
 }