TT-582 Improve the summary section of the time-clock page and the clock out button (#824)

* style: TT-582 improve the summary section with a new row with information of actual clock in register and clock out button

* fix: TT-582 add missing unit test to confirm that clockout function in TimeEntriesSummaryComponent emits an event

* style: TT-582 add a border radius to current elapsed time box

Co-authored-by: David Cadena <[email protected]>

Author: LuisMS7

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.css

@@ -0,0 +1,25 @@
+.current-elapsed-time-box{
+  border-color: #FF5E0A;
+  border-width: 2px;
+  background-color: #FF5E0A;
+  color: white;
+  border-radius: .25rem;
+}
+
+.clock-out{
+  text-align: center;
+}
+
+.bt-clock-out{
+  background: #00baee;
+  color: #fff;
+  padding: 7px 20px;
+}
+
+.bt-clock-out:hover{
+  background: #10a5ce;
+  box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.56);
+  -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.56);
+  -moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.56);
+  color: #fff;
+}

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.html

@@ -1,22 +1,43 @@
+<div *ngIf="areFieldsVisible" class="row pb-4">
+  <div class="col-2 d-flex align-items-center">
+    <p class="card-title text-left" style="margin: 0; padding: 0;">
+      You clocked in at
+      <strong>{{ activeTimeEntry?.start_date | date:'shortTime' }}</strong>
+    </p>
+  </div>
+  <div class="col-2 col-sm-3">
+    <div class="current-elapsed-time-box d-flex flex-column justify-content-center align-items-center" style="width: 50%">
+      <h6>Current</h6>
+      <h3>{{ currentWorkingTime }}</h3>
+    </div>
+  </div>
+  <div class="col-7 clock-out">
+    <button
+      class="btn bt-clock-out"
+      type="button"
+      (click)="clockOut()">
+        Clock Out
+    </button>
+  </div>
+</div>
+
 <h6 class="text-left"><strong>Summary</strong></h6>
 <hr class="mb-4" />
 <div class ="container px-0">
+
   <div class="row pb-4">
-    <div class="col-12 col-sm-3">
-      <h6>Current</h6>
-      <h3>{{ currentWorkingTime }}</h3>
-    </div>
-    <div class="col-12 col-sm-3">
+    <div class="col-12 col-sm-4">
       <h6>Day</h6>
       <h3>{{ timeEntriesSummary?.day | timeDetails }}</h3>
     </div>
-    <div class="col-12 col-sm-3">
+    <div class="col-12 col-sm-4">
       <h6>Week</h6>
       <h3>{{ timeEntriesSummary?.week | timeDetails }}</h3>
     </div>
-    <div class="col-12 col-sm-3">
+    <div class="col-12 col-sm-4">
       <h6>Month</h6>
       <h3>{{ timeEntriesSummary?.month | timeDetails }}</h3>
     </div>
   </div>
+
 </div>

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.spec.ts

@@ -148,4 +148,11 @@ describe('TimeEntriesSummaryComponent', () => {
     discardPeriodicTasks();
   }));
 
+  it('clockOut should emits event', () => {
+    spyOn(component.clockoutEvent, 'emit');
+    component.clockOut();
+
+    expect(component.clockoutEvent.emit).toHaveBeenCalled();
+  });
+
 });

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.ts

@@ -5,9 +5,10 @@ import { Entry } from './../../../shared/models/entry.model';
 import { TimeEntriesSummary } from '../../models/time.entry.summary';
 import { LoadEntriesSummary, LoadActiveEntry, EntryActionTypes } from './../../store/entry.actions';
 import { EntryState } from './../../store/entry.reducer';
-import { Store, ActionsSubject } from '@ngrx/store';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Store, ActionsSubject, select } from '@ngrx/store';
+import { Component, OnInit, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
 import * as moment from 'moment';
+import { getActiveTimeEntry } from '../../store/entry.selectors';
 
 @Component({
   selector: 'app-time-entries-summary',
@@ -16,6 +17,10 @@ import * as moment from 'moment';
 })
 export class TimeEntriesSummaryComponent implements OnInit, OnDestroy {
 
+  @Input() activeTimeEntry: Entry;
+  @Input() areFieldsVisible = false;
+  @Output() clockoutEvent = new EventEmitter<void>();
+
   timeEntriesSummary: TimeEntriesSummary;
   currentWorkingTime: string;
   destroyed$ = new Subject<boolean>();
@@ -103,4 +108,9 @@ export class TimeEntriesSummaryComponent implements OnInit, OnDestroy {
       });
     }
   }
+
+  clockOut(): void {
+    this.clockoutEvent.emit();
+  }
+
 }

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

@@ -1,13 +1,9 @@
-<app-time-entries-summary></app-time-entries-summary>
+<app-time-entries-summary (clockoutEvent)="clockOut()" [activeTimeEntry]="activeTimeEntry" [areFieldsVisible]="areFieldsVisible"></app-time-entries-summary>
 
 <div class="col-12 col-md-9 px-0">
 
   <div class="row pb-4">
     <div class="col-12">
-      <p *ngIf="areFieldsVisible" class="card-title text-left">
-        You clocked in at
-        <strong>{{ activeTimeEntry?.start_date | date:'shortTime' }}</strong>
-      </p>
       <p *ngIf="!areFieldsVisible" class="card-title text-left">
         Hi <strong>{{ username }}</strong>, please select a project to clock-in.
       </p>
@@ -19,7 +15,4 @@
     <app-entry-fields></app-entry-fields>
   </div>
 
-  <div class="form-group">
-    <button *ngIf="areFieldsVisible" class="btn btn-primary btn-block" type="button" (click)="clockOut()">Clock Out</button>
-  </div>
 </div>