feat: #566 Datepicker for Date out

Author: Guido Quezada

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

@@ -72,8 +72,8 @@
 
 
   <div class="form-group row">
-    <label class="col-12 col-sm-2 col-form-label">Date:</label>
-    <div class="col-12 col-sm-10">
+    <label class="col-12 col-sm-2">Date in:</label>
+    <div class="col-12 col-sm-4">
       <input
         formControlName="entry_date"
         id="entry_date"
@@ -85,6 +85,20 @@
         required
       />
     </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>
 
 

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

@@ -67,6 +67,7 @@ describe('DetailsFieldsComponent', () => {
     activity_id: '',
     uri: '',
     entry_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
+    departure_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
     start_hour: '00:00:00',
     end_hour: '00:00:00',
     description: '',
@@ -109,6 +110,7 @@ describe('DetailsFieldsComponent', () => {
       activity_id: 'a1',
       uri: 'ticketUri',
       entry_date: '',
+      departure_date: '',
       start_hour: '00:00:10',
       end_hour: '00:00:11',
       description: '',
@@ -177,6 +179,7 @@ describe('DetailsFieldsComponent', () => {
       activity_id: '',
       uri: '',
       entry_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
+      departure_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
       start_hour: '00:00:00',
       end_hour: '00:00:00',
       description: '',
@@ -213,6 +216,7 @@ describe('DetailsFieldsComponent', () => {
       activity_id: 'a1',
       uri: '',
       entry_date: '2020-02-05',
+      departure_date: '2020-02-05',
       start_hour: '00:00:01',
       end_hour: '00:01:01',
       description: '',
@@ -287,7 +291,7 @@ describe('DetailsFieldsComponent', () => {
     component.goingToWorkOnThis = true;
     spyOn(component.saveEntry, 'emit');
 
-    component.entryForm.setValue({ ...formValues, entry_date: '2020-06-11' });
+    component.entryForm.setValue({ ...formValues, entry_date: '2020-06-11', departure_date: '2020-06-11' });
 
     component.onSubmit();
 
@@ -311,7 +315,7 @@ describe('DetailsFieldsComponent', () => {
     spyOn(toastrServiceStub, 'error');
 
     const futureDate = moment().add(1, 'days').format('YYYY-MM-DD');
-    component.entryForm.setValue({ ...formValues, entry_date: futureDate });
+    component.entryForm.setValue({ ...formValues, entry_date: futureDate, departure_date: futureDate });
     component.onSubmit();
 
     expect(toastrServiceStub.error).toHaveBeenCalled();

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

@@ -49,6 +49,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       activity_id: ['', Validators.required],
       description: '',
       entry_date: '',
+      departure_date: '',
       start_hour: '',
       end_hour: '',
       uri: '',
@@ -130,6 +131,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         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',
         uri: this.entryToEdit.uri,
@@ -148,6 +150,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       activity_id: '',
       description: '',
       entry_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
+      departure_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
       start_hour: '00:00:00',
       end_hour: '00:00:00',
       uri: '',
@@ -175,6 +178,10 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     return this.entryForm.get('entry_date');
   }
 
+  get departure_date() {
+    return this.entryForm.get('departure_date');
+  }
+
   get start_hour() {
     return this.entryForm.get('start_hour');
   }
@@ -195,13 +202,14 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     }
     // start&end date same for now
     const entryDate = this.entryForm.value.entry_date;
+    const departureDate = this.entryForm.value.departure_date;
     const entry = {
       project_id: this.entryForm.value.project_id,
       activity_id: this.entryForm.value.activity_id,
       technologies: this.selectedTechnologies ? this.selectedTechnologies : [],
       description: this.entryForm.value.description,
       start_date: new Date(`${entryDate}T${this.entryForm.value.start_hour.trim()}`).toISOString(),
-      end_date: new Date(`${entryDate}T${this.entryForm.value.end_hour.trim()}`).toISOString(),
+      end_date: new Date(`${departureDate}T${this.entryForm.value.end_hour.trim()}`).toISOString(),
       uri: this.entryForm.value.uri,
       timezone_offset: new Date().getTimezoneOffset(),
     };