fix: #566 Datepicker for departure date in entry form

Author: Guido Quezada

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

@@ -86,23 +86,6 @@
       />
     </div>
 
-    <label class="col-12 col-sm-2" *ngIf="!goingToWorkOnThis">Date out:</label>
-    <div class="col-12 col-sm-4" *ngIf="!goingToWorkOnThis">
-      <input
-        formControlName="departure_date"
-        id="departure_date"
-        type="date"
-        class="form-control"
-        aria-label="Small"
-        aria-describedby="inputGroup-sizing-sm"
-        [class.is-invalid]="departure_date.invalid && departure_date.touched"
-        required
-      />
-    </div>
-  </div>
-
-
-  <div class="form-group row">
     <label class="col-12 col-sm-2">Time in:</label>
     <div class="col-12 col-sm-4">
       <input
@@ -122,11 +105,27 @@
         aria-describedby="inputGroup-sizing-sm"
       />
     </div>
+  </div>
 
-    <label class="col-12 col-sm-2"  *ngIf="!goingToWorkOnThis">Time out:</label>
-    <div class="col-12 col-sm-4"  *ngIf="!goingToWorkOnThis">
+
+  <div class="form-group row" *ngIf="!goingToWorkOnThis">
+    <label class="col-12 col-sm-2">Date out:</label>
+    <div class="col-12 col-sm-4">
+      <input
+        formControlName="departure_date"
+        id="departure_date"
+        type="date"
+        class="form-control"
+        aria-label="Small"
+        aria-describedby="inputGroup-sizing-sm"
+        [class.is-invalid]="departure_date.invalid && departure_date.touched"
+        required
+      />
+    </div>
+
+    <label class="col-12 col-sm-2">Time out:</label>
+    <div class="col-12 col-sm-4">
       <input
-        *ngIf="!goingToWorkOnThis"
         [clearIfNotMatch]="true"
         [showMaskTyped]="true"
         [dropSpecialCharacters]="false"

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

@@ -321,6 +321,28 @@ describe('DetailsFieldsComponent', () => {
     expect(toastrServiceStub.error).toHaveBeenCalled();
   });
 
+  it('when entry_date is in the future and departure_date is OK then throws an error', () => {
+    spyOn(toastrServiceStub, 'error');
+
+    const futureDate = moment().add(1, 'days').format('YYYY-MM-DD');
+    const currentDate = moment().format('YYYY-MM-DD');
+    component.entryForm.setValue({ ...formValues, entry_date: futureDate, departure_date: currentDate });
+    component.onSubmit();
+
+    expect(toastrServiceStub.error).toHaveBeenCalled();
+  });
+
+  it('when entry_date is OK and departure_date is in the future then throws an error future', () => {
+    spyOn(toastrServiceStub, 'error');
+
+    const futureDate = moment().add(1, 'days').format('YYYY-MM-DD');
+    const currentDate = moment().format('YYYY-MM-DD');
+    component.entryForm.setValue({ ...formValues, entry_date: currentDate, departure_date: futureDate });
+    component.onSubmit();
+
+    expect(toastrServiceStub.error).toHaveBeenCalled();
+  });
+
   it('should emit projectSelected event', () => {
     spyOn(component.projectSelected, 'emit');
     const item = {

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

@@ -17,6 +17,7 @@ import { TechnologyState } from '../../store/technology.reducers';
 import { EntryActionTypes } from './../../../time-clock/store/entry.actions';
 import { SaveEntryEvent } from './save-entry-event';
 import { ProjectSelectedEvent } from './project-selected-event';
+import { get } from 'lodash';
 
 
 type Merged = TechnologyState & ProjectState & ActivityState & EntryState;
@@ -130,10 +131,10 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         project_id: this.entryToEdit.project_id,
         activity_id: this.entryToEdit.activity_id,
         description: this.entryToEdit.description,
-        entry_date: this.entryToEdit.start_date ? formatDate(this.entryToEdit.start_date, 'yyyy-MM-dd', 'en') : '',
-        departure_date: formatDate(this.entryToEdit.end_date ? this.entryToEdit.end_date : new Date(), 'yyyy-MM-dd', 'en'),
-        start_hour: this.entryToEdit.start_date ? formatDate(this.entryToEdit.start_date, 'HH:mm:ss', 'en') : '00:00:00',
-        end_hour: this.entryToEdit.end_date ? formatDate(this.entryToEdit.end_date, 'HH:mm:ss', 'en') : '00:00:00',
+        entry_date: formatDate(get(this.entryToEdit, 'start_date', '') , 'yyyy-MM-dd', 'en'),
+        departure_date: formatDate(get(this.entryToEdit, 'end_date'), 'yyyy-MM-dd', 'en'),
+        start_hour: formatDate(get(this.entryToEdit, 'start_date', '00:00:00'), 'HH:mm:ss', 'en'),
+        end_hour: formatDate(get(this.entryToEdit, 'end_date', '00:00:00'), 'HH:mm:ss', 'en'),
         uri: this.entryToEdit.uri,
         technology: '',
       });
@@ -200,7 +201,6 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       this.toastrService.warning('Make sure to select a project and activity');
       return;
     }
-    // start&end date same for now
     const entryDate = this.entryForm.value.entry_date;
     const departureDate = this.entryForm.value.departure_date;
     const entry = {
@@ -217,7 +217,8 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       delete entry.end_date;
     }
     const isEntryDateInTheFuture = moment(entryDate).isAfter(moment());
-    if (isEntryDateInTheFuture) {
+    const isDepartureDateInTheFuture = moment(departureDate).isAfter(moment());
+    if (isEntryDateInTheFuture || isDepartureDateInTheFuture) {
       this.toastrService.error('You cannot start a time-entry in the future');
       return;
     }

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

@@ -356,7 +356,8 @@ describe('TimeEntriesComponent', () => {
       uri : 'http://testing.is.fun',
       activity_id : 'sss',
       project_id : 'id',
-      start_date : new Date(new Date().setHours(0, 0, 0, 0))
+      start_date : new Date(new Date().setHours(0, 0, 0, 0)),
+      end_date : new Date(new Date().setHours(0, 0, 0, 0))
     };
     state.timeEntriesDataSource.data = [ lastEntry ];
     mockEntriesSelector = store.overrideSelector(getTimeEntriesDataSource, state.timeEntriesDataSource);

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

@@ -126,7 +126,8 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
           uri : dataToUse.uri ? dataToUse.uri : '',
           activity_id : dataToUse.activity_id,
           project_id : dataToUse.project_id,
-          start_date : startDate
+          start_date : startDate,
+          end_date : startDate
         };
         this.entry = entry;
       }