fix: #145 use details-fields component on Time Clock page

Author: jorgecod

src/app/modules/shared/components/details-fields/details-fields.component.html

@@ -24,13 +24,9 @@
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Activity</span>
     </div>
-    <input
-      formControlName="activity"
-      type="text"
-      class="form-control"
-      aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm"
-    />
+    <select id="activitiesSelect" class="form-control">
+      <option *ngFor="let activity of activities">{{ activity.name }}</option>
+    </select>
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
@@ -76,7 +72,7 @@
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="form-group text-left">
     <label for="NotesTextarea">Notes</label>
     <textarea formControlName="comments" class="form-control" id="NotesTextarea" rows="3"></textarea>
   </div>

src/app/modules/shared/components/details-fields/details-fields.component.spec.ts

@@ -27,6 +27,12 @@ describe('DetailsFieldsComponent', () => {
       technologyList: { items: [{ name: 'java' }] },
       isLoading: false,
     },
+    activities: {
+      data: [{ id: 'fc5fab41-a21e-4155-9d05-511b956ebd05', tenant_id: 'ioet', deleted: null, name: 'Training 2' }],
+      isLoading: false,
+      message: 'Data fetch successfully!',
+      activityIdToEdit: '',
+    },
   };
 
   const initialData = {

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -14,14 +14,15 @@ import { Store, select } from '@ngrx/store';
 import * as actions from '../../store/technology.actions';
 
 import { allTechnologies } from '../../store/technology.selectors';
-import { Technology, Project } from '../../models';
+import { Technology, Project, Activity } from '../../models';
 
 import { ProjectState } from '../../../project-management/store/project.reducer';
 import { TechnologyState } from '../../store/technology.reducers';
+import { LoadActivities, ActivityState, allActivities } from '../../../activities-management/store';
 import { allProjects } from '../../../project-management/store/project.selectors';
 import * as projectActions from '../../../project-management/store/project.actions';
 
-type Merged = TechnologyState & ProjectState;
+type Merged = TechnologyState & ProjectState & ActivityState;
 
 @Component({
   selector: 'app-details-fields',
@@ -39,6 +40,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   selectedTechnology: string[] = [];
   isLoading = false;
   listProjects: Project[] = [];
+  activities: Activity[] = [];
   keyword = 'name';
   showlist: boolean;
 
@@ -68,6 +70,12 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     projects$.subscribe((response) => {
       this.listProjects = response.projectList;
     });
+
+    this.store.dispatch(new LoadActivities());
+    const activities$ = this.store.pipe(select(allActivities));
+    activities$.subscribe((response) => {
+      this.activities = response;
+    });
   }
 
   ngOnChanges(): void {

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss

@@ -23,8 +23,9 @@
 
 .autocomplete::ng-deep .autocomplete-container {
   border: 1px solid #ced4da;
-  border-radius: 0.25rem;
+  border-radius: 0 0.25rem 0.25rem 0;
   box-shadow: none;
+  height: 2rem;
 
   .input-container {
     height: 100%;

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

@@ -15,7 +15,7 @@
       </p>
       <h6 class="text-left"><strong>Totals</strong></h6>
       <hr />
-      <div class="row">
+      <div class="row pb-4">
         <div class="col-4">
           <h6>Current</h6>
           <h3>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
@@ -29,33 +29,14 @@ <h6>Week</h6>
           <h3>14:00</h3>
         </div>
       </div>
-      <div class="form-group row">
-        <label for="activitiesSelect" class="col-sm-2 col-form-label text-center"><strong>Project</strong></label>
-        <div class="col-sm-10">
-          <app-project-list-hover (showFields)="setShowFields($event)"></app-project-list-hover>
+      <div class="input-group input-group-sm mb-3 flex-nowrap">
+        <div class="input-group-prepend">
+          <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
         </div>
+        <app-project-list-hover class="w-100" (showFields)="setShowFields($event)"></app-project-list-hover>
       </div>
       <form *ngIf="!isClockIn || showFields">
-        <div class="form-group row">
-          <label for="activitiesSelect" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
-          <div class="col-sm-10">
-            <select id="activitiesSelect" class="form-control">
-              <option *ngFor="let activity of activities">{{ activity.name }}</option>
-            </select>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" />
-          </div>
-        </div>
-        <div class="form-group row">
-          <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
-          <div class="col-sm-10">
-            <input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control" />
-          </div>
-        </div>
+        <app-details-fields></app-details-fields>
       </form>
       <hr />
       <div class="container">

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

@@ -14,3 +14,9 @@
 .text-clock-in-color {
   color: $modal-button-secondary;
 }
+
+.span-width {
+  width: 6rem;
+  background-image: $background-pantone;
+  color: white;
+}

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

@@ -1,4 +1,3 @@
-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';
@@ -50,14 +49,6 @@ 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,9 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { Store, select } from '@ngrx/store';
-
-import { LoadActivities, ActivityState, allActivities } from '../../activities-management/store/';
-import { Activity } from 'src/app/modules/shared/models';
-
 
 @Component({
   selector: 'app-time-clock',
@@ -30,9 +25,7 @@ export class TimeClockComponent implements OnInit {
   isClockInEnable = false;
   isHidenForm = true;
 
-  activities: Activity[] = [];
-
-  constructor(private store: Store<ActivityState>) {
+  constructor() {
     this.isClockIn = true;
     this.isEnterTechnology = false;
     this.hourCounterRealTime = 0;
@@ -43,13 +36,7 @@ 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;
-    });
-  }
+  ngOnInit() {}
 
   employeClockIn(): boolean {
     this.isClockInEnable = true;
@@ -133,5 +120,4 @@ export class TimeClockComponent implements OnInit {
     this.execOnlyOneTimeCounter = false;
     this.isClockInEnable = false;
   }
-
 }