fix: #395 Make the activity required when clocking-out

Author: DiegoTinitana

src/app/modules/time-clock/components/entry-fields/entry-fields.component.html

@@ -3,24 +3,39 @@
     <div class="input-group-prepend">
       <span class="input-group-text span-width">Activity</span>
     </div>
-    <select id="activitiesSelect" (blur)="onSubmit()" class="form-control" formControlName="activity_id">
+    <select
+      id="activitiesSelect"
+      (blur)="onSubmit()"
+      class="form-control"
+      formControlName="activity_id"
+      [class.is-invalid]="activity_id.invalid && activity_id.touched"
+      required
+    >
       <option value="-1"></option>
-      <option *ngFor="let activity of activities" value="{{activity.id}}">{{ activity.name }}</option>
+      <option *ngFor="let activity of activities" value="{{ activity.id }}">{{ activity.name }}</option>
     </select>
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
       <span class="input-group-text span-width">Ticket URI</span>
     </div>
-    <input (blur)="onSubmit()" type="text" id="uri" formControlName="uri" class="form-control" aria-label="Small"
-           aria-describedby="inputGroup-sizing-sm"/>
+    <input
+      (blur)="onSubmit()"
+      type="text"
+      id="uri"
+      formControlName="uri"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
   </div>
-  <app-technologies (technologyAdded)="onTechnologyAdded($event)"
-                    (technologyRemoved)="onTechnologyRemoved($event)"
-                    [selectedTechnologies]="selectedTechnologies">
+  <app-technologies
+    (technologyAdded)="onTechnologyAdded($event)"
+    (technologyRemoved)="onTechnologyRemoved($event)"
+    [selectedTechnologies]="selectedTechnologies"
+  >
   </app-technologies>
 
-
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
       <span class="input-group-text span-width">Description</span>
@@ -31,8 +46,8 @@
       formControlName="description"
       class="form-control"
       id="NotesTextarea"
-      rows="2">
+      rows="2"
+    >
     </textarea>
   </div>
-
 </form>

src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts

@@ -58,6 +58,10 @@ export class EntryFieldsComponent implements OnInit {
     });
   }
 
+    get activity_id() {
+    return this.entryForm.get('activity_id');
+  }
+
   setDataToUpdate(entryData: NewEntry) {
     if (entryData) {
       this.entryForm.patchValue({

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

@@ -81,8 +81,7 @@ describe('TimeClockComponent', () => {
   it('clockOut dispatch a StopTimeEntryRunning action', () => {
     spyOn(store, 'dispatch');
 
-    component.clockOut();
-
+    component.stopEntry();
     expect(store.dispatch).toHaveBeenCalledWith(new StopTimeEntryRunning('id'));
   });
 });

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

@@ -2,23 +2,25 @@ import { getActiveTimeEntry } from './../store/entry.selectors';
 import { StopTimeEntryRunning } from './../store/entry.actions';
 import { Entry } from './../../shared/models/entry.model';
 import { Store, select } from '@ngrx/store';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service';
 import { Subscription } from 'rxjs';
+import { EntryFieldsComponent } from '../components/entry-fields/entry-fields.component';
 
 @Component({
   selector: 'app-time-clock',
   templateUrl: './time-clock.component.html',
   styleUrls: ['./time-clock.component.scss'],
 })
 export class TimeClockComponent implements OnInit {
+  @ViewChild(EntryFieldsComponent)
+  entryFieldsComponent: EntryFieldsComponent;
   username: string;
   areFieldsVisible = false;
   activeTimeEntry: Entry;
   actionsSubscription: Subscription;
 
-  constructor(private azureAdB2CService: AzureAdB2CService, private store: Store<Entry>) {
-  }
+  constructor(private azureAdB2CService: AzureAdB2CService, private store: Store<Entry>) {}
 
   ngOnInit() {
     this.username = this.azureAdB2CService.isLogin() ? this.azureAdB2CService.getName() : '';
@@ -32,8 +34,16 @@ export class TimeClockComponent implements OnInit {
     });
   }
 
-  clockOut() {
+  stopEntry() {
     this.store.dispatch(new StopTimeEntryRunning(this.activeTimeEntry.id));
     this.areFieldsVisible = false;
   }
+
+  clockOut() {
+    if (this.entryFieldsComponent.entryForm.valid) {
+      this.stopEntry();
+    } else {
+      this.entryFieldsComponent.entryForm.get('activity_id').markAsTouched();
+    }
+  }
 }