fix: TT 20 calculate time difference when new entries added

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

@@ -137,6 +137,17 @@
         </div>
       </div>
 
+      <div class="form-group row" *ngIf="!goingToWorkOnThis">
+        <label class="col-12 col-sm-2">Total Hours:</label>
+        <div class="col-12 col-sm-4">
+          <span class="border-tag"
+            [class.border-tag--disabled]="!(project_id.value && project_name.value)"
+            >
+            {{ this.getTimeDifference() }}
+          </span>
+        </div>
+      </div>
+
       <app-technologies
         (technologyAdded)="onTechnologiesUpdated($event)"
         (technologyRemoved)="onTechnologiesUpdated($event)"

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

@@ -108,3 +108,10 @@ input[type="date"]::-webkit-clear-button {
   background-color: #e9ecef;
   opacity: 1;
 }
+
+.border-tag {
+  border: 1px solid $primary;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}

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

@@ -512,6 +512,38 @@ describe('DetailsFieldsComponent', () => {
     expect(endDateInput.id).toEqual('end_date');
     expect(endDateInput.max).toEqual(expectedDate);
   });
+
+  const diffParams = [
+    {
+      case: 'positive should return correctly diff',
+      entryDates: {
+        start_date: '2021-04-15',
+        end_date: '2021-04-15',
+        start_hour: '18:05',
+        end_hour: '19:00',
+      },
+      expectedTimeDiff: '00:55',
+    },
+    {
+      case: 'negative should return 00:00',
+      entryDates: {
+        start_date: '2021-04-15',
+        end_date: '2021-04-14',
+        start_hour: '18:05',
+        end_hour: '17:00',
+      },
+      expectedTimeDiff: '00:00',
+    },
+  ];
+  diffParams.map((param) => {
+    it(`if [start_date, start_hour] and [end_date, end_hour] diff is ${param.case}`, () => {
+      component.entryForm.setValue({ ...formValues, ...param.entryDates });
+      const timeDiff = component.getTimeDifference();
+
+      expect(timeDiff).toBe(param.expectedTimeDiff);
+    });
+  });
+
   /*
    TODO As part of https://github.com/ioet/time-tracker-ui/issues/424 a new parameter was added to the details-field-component,
    and now these couple of tests are failing. A solution to this error might be generate a Test Wrapper Component. More details here:

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

@@ -130,6 +130,17 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     this.end_date.setValue($event);
   }
 
+  getTimeDifference(): string {
+    const startDate = moment(`${this.start_date.value} ${this.start_hour.value}`);
+    const endDate = moment(`${this.end_date.value} ${this.end_hour.value}`);
+    if (startDate <= endDate) {
+      const diffDate = endDate.diff(startDate);
+      const duration = moment.duration(diffDate);
+      return moment.utc(duration.asMilliseconds()).format('HH:mm');
+    }
+    return '00:00';
+  }
+
   ngOnChanges(): void {
     this.goingToWorkOnThis = this.entryToEdit ? this.entryToEdit.running : false;
     this.shouldRestartEntry = false;