fix: #225 apply filter

Author: enriquezrene

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

@@ -125,11 +125,11 @@
       <label for="NotesTextarea">Description</label>
       <textarea formControlName="description" class="form-control" id="NotesTextarea" rows="3"></textarea>
     </div>
-    <div [ngClass]="{ hidden: formType !== 'entries' }" class="modal-footer">
+    <div class="modal-footer">
+      <button type="submit" class="btn btn-primary">Save</button>
       <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
         Close
       </button>
-      <button type="submit" class="btn btn-primary">Save changes</button>
     </div>
   </form>
 </div>

src/app/modules/shared/pipes/substract-date/substract-date.pipe.spec.ts

@@ -14,4 +14,22 @@ describe('SubstractDatePipe', () => {
 
     expect(diff).toBe('02:20');
   });
+
+  it('returns --:-- if fromDate is null', () => {
+    const fromDate = null;
+    const substractDate = new Date('2011-04-11T08:00:30Z');
+
+    const diff = new SubstractDatePipe().transform(fromDate, substractDate);
+
+    expect(diff).toBe('--:--');
+  });
+
+  it('returns --:-- if substractDate is null', () => {
+    const substractDate = null;
+    const fromDate = new Date('2011-04-11T08:00:30Z');
+
+    const diff = new SubstractDatePipe().transform(fromDate, substractDate);
+
+    expect(diff).toBe('--:--');
+  });
 });

src/app/modules/shared/pipes/substract-date/substract-date.pipe.ts

@@ -1,17 +1,20 @@
 import { Pipe, PipeTransform } from '@angular/core';
-
+import * as moment from 'moment';
 @Pipe({
   name: 'substractDate'
 })
 export class SubstractDatePipe implements PipeTransform {
 
   transform(fromDate: Date, substractDate: Date): string {
-    const difference = fromDate.valueOf() - substractDate.valueOf();
 
-    const minutes = Math.floor((difference / (1000 * 60)) % 60);
-    const hours = Math.floor(difference / (1000 * 60 * 60) % 24);
+    if (fromDate === null || substractDate === null ) {
+      return '--:--';
+    }
 
-    return `${this.formatTime(hours)}:${this.formatTime(minutes)}`;
+    const startDate = moment(substractDate, 'YYYY-MM-DD HH:mm:ss');
+    const endDate = moment(fromDate, 'YYYY-MM-DD HH:mm:ss');
+    const duration: any = moment.duration(endDate.diff(startDate));
+    return `${this.formatTime(duration._data.hours)}:${this.formatTime(duration._data.minutes)}`;
   }
 
   formatTime(time: number): string {

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

@@ -8,71 +8,54 @@
         data-target="#editRecordsByDate"
         class="btn btn-primary"
       >
-        <i class="fa fa-plus-square"></i> New Entry
+        Add new entry
       </button>
     </div>
   </div>
-  <div class="card">
+  <div style="height: 15px;"></div>
     <app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
-    <div class="row m-0 header-entries">
-      <div class="col">Project</div>
-      <div class="col">Duration</div>
-      <div class="col">Date</div>
-      <div class="col-2">Actions</div>
-    </div>
-    <!--Accordion wrapper-->
-    <div
-      *ngIf="dataByMonth.length > 0; else emptyState"
-      class="accordion accordion-container"
-      role="tablist"
-      aria-multiselectable="true"
-    >
-      <div class="card" *ngFor="let entry of dataByMonth | groupByDate; let rowIndex = index">
+    <div style="height: 15px;"></div>
 
-        <!-- Card body -->
-        <div
-          *ngFor="let item of entry.details"
-          [id]="'entry' + rowIndex"
-          class="collapse show"
-          role="tabpanel"
-          aria-labelledby="heading10"
+    <table class="table table-sm table-striped mb-0">
+      <thead class="thead-orange">
+        <tr class="d-flex">
+          <th class="col">Date</th>
+          <th class="col">Duration</th>
+          <th class="col">Ticket</th>
+          <th class="col"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          class="d-flex"
+          *ngFor="let entry of dataByMonth"
         >
-          <div class="row m-0 entries">
-            <div class="col">
-              {{ item.id }}
-            </div>
-            <div class="col">
-              {{ item.time }}
-            </div>
-            <div class="col">
-              {{ item.start_date | date: 'dd/MM/yyyy' }}
-            </div>
-            <div class="col-2">
-              <button
-                class="btn btn-sm btn-small"
+          <td class="col"> {{ entry.start_date | date: 'dd/MM/yyyy' }} </td>
+          <td class="col"> {{ entry.end_date | substractDate: entry.start_date }} </td>
+          <td class="col"> {{ entry.uri }} </td>
+          <td class="col">
+            <button
+                class="btn btn-sm btn-secondary"
                 data-toggle="modal"
                 data-target="#editRecordsByDate"
-                (click)="editEntry(item.id)"
+                (click)="editEntry(entry.id)"
               >
                 <i class="fa fa-edit"></i>
               </button>
               <button
-                class="btn btn-sm btn-small"
+                class="btn btn-sm btn-danger ml-2"
                 data-toggle="modal"
                 data-target="#deleteModal"
-                (click)="openModal(item)"
+                (click)="openModal(entry)"
               >
                 <i class="fa fa-trash"></i>
               </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <ng-template #emptyState>
-      <app-empty-state></app-empty-state>
-    </ng-template>
-  </div>
+          </td>
+
+        </tr>
+      </tbody>
+    </table>
+
 </div>
 <div class="modal fade" id="editRecordsByDate" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">

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

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import * as moment from 'moment';
 import { Entry } from '../../shared/models';
 import { EntryState } from '../../time-clock/store/entry.reducer';
 import { allEntries } from '../../time-clock/store/entry.selectors';
@@ -28,14 +27,7 @@ export class TimeEntriesComponent implements OnInit {
       this.entryList = response;
       this.dataByMonth = this.entryList.reduce((acc: any, entry: any) => {
         if (new Date(entry.start_date).getMonth() === new Date().getMonth()) {
-          let time: any = '-';
-          if (entry.start_date && entry.end_date) {
-            const startDate = moment(entry.start_date, 'YYYY-MM-DD HH:mm:ss');
-            const endDate = moment(entry.end_date, 'YYYY-MM-DD HH:mm:ss');
-            const duration: any = moment.duration(endDate.diff(startDate));
-            time = `${duration._data.hours} hh : ${duration._data.minutes} mm`;
-          }
-          const item = { ...entry, time };
+          const item = { ...entry };
           return [...acc, item];
         }
         return [];