From 4434fe137fcdaf226d1d39252a925afa0fd13e1a Mon Sep 17 00:00:00 2001
From: Juan Gabriel Guzman <jguzman@ioet.com>
Date: Sat, 30 May 2020 13:09:53 -0500
Subject: [PATCH] feat: #310 Improving css on the eport page

---
 .../activity-list.component.html              |  2 +-
 .../customer-list.component.html              |  2 +-
 .../project-type-list.component.html          |  2 +-
 .../project-list/project-list.component.html  |  2 +-
 .../time-entries-table.component.html         | 54 ++++++++++---------
 .../time-entries-table.component.scss         |  2 +-
 .../time-range-form.component.html            | 41 +++++++-------
 .../reports/pages/reports.component.html      |  7 ++-
 .../reports/pages/reports.component.spec.ts   |  2 -
 .../time-clock/store/entry.effects.spec.ts    | 13 -----
 .../pages/time-entries.component.html         |  4 +-
 src/styles/colors.scss                        |  2 +-
 12 files changed, 59 insertions(+), 74 deletions(-)

diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.html b/src/app/modules/activities-management/components/activity-list/activity-list.component.html
index 22ebd1fc8..fdbc81cfa 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.html
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.html
@@ -1,6 +1,6 @@
 <div class="activity-list">
   <table class="table table-sm table-bordered table-striped">
-    <thead class="thead-orange">
+    <thead class="thead-blue">
       <tr class="d-flex">
         <th class="col-9">Activity</th>
         <th class="col-3 text-center"></th>
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
index d028e0386..0f1d093e2 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html
@@ -1,5 +1,5 @@
 <table *ngIf="customers" class="table table-sm table-bordered table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
-  <thead class="thead-orange">
+  <thead class="thead-blue">
     <tr class="d-flex">
       <th class="col-9">Name</th>
       <th class="col-3 text-center">Options</th>
diff --git a/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html b/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html
index f51b8bd98..ee29811a6 100644
--- a/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html
+++ b/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html
@@ -1,6 +1,6 @@
 <div class="project-type-list-div">
   <table class="table table-sm table-bordered table-striped">
-    <thead class="thead-orange">
+    <thead class="thead-blue">
       <tr class="d-flex">
         <th class="col-9">Project type</th>
         <th class="col-3 text-center"></th>
diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html
index 59474aaed..8ba4da16e 100644
--- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html
+++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html
@@ -1,6 +1,6 @@
 <div class="project-list">
   <table class="table table-sm table-bordered table-striped">
-    <thead class="thead-orange">
+    <thead class="thead-blue">
       <tr class="d-flex">
         <th class="col-9">Project</th>
         <th class="col-3 text-center"></th>
diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html
index a90e44c8e..e53a623e6 100644
--- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html
+++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html
@@ -1,27 +1,29 @@
-<div class="container-flex m-5">
-<table class="table table-sm table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
-  <thead class="thead-orange">
-  <tr class="d-flex">
-    <th class="col md-col">Date</th>
-    <th class="col sm-col">Duration</th>
-    <th class="col md-col">Project</th>
-    <th class="col md-col">Ticket</th>
-    <th class="col lg-col" >Description</th>
-    <th class="col lg-col">Technologies</th>
-  </tr>
-  </thead>
-  <tbody>
-  <tr
-    class="d-flex"
-    *ngFor="let entry of data"
-  >
-    <td class="col md-col"> {{ entry.start_date | date: 'dd/MM/yyyy' }} </td>
-    <td class="col sm-col"> {{ entry.end_date | substractDate: entry.start_date }} </td>
-    <td class="col md-col"> {{ entry.project_name }} </td>
-    <td class="col md-col"> {{ entry.uri }} </td>
-    <td class="col lg-col multiline-col"> {{ entry.description }} </td>
-    <td class="col lg-col multiline-col"> {{ entry.technologies }} </td>
-  </tr>
-  </tbody>
-</table>
+<div class="row mt-5">
+  <div class="col">
+    <table class="table table-sm table-striped" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
+      <thead class="thead-blue">
+      <tr class="d-flex">
+        <th class="col md-col">Date</th>
+        <th class="col sm-col">Duration</th>
+        <th class="col md-col">Project</th>
+        <th class="col md-col">Ticket</th>
+        <th class="col lg-col">Description</th>
+        <th class="col lg-col">Technologies</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr
+        class="d-flex"
+        *ngFor="let entry of data"
+      >
+        <td class="col md-col"> {{ entry.start_date | date: 'dd/MM/yyyy' }} </td>
+        <td class="col sm-col"> {{ entry.end_date | substractDate: entry.start_date }} </td>
+        <td class="col md-col"> {{ entry.project_name }} </td>
+        <td class="col md-col"> {{ entry.uri }} </td>
+        <td class="col lg-col multiline-col"> {{ entry.description }} </td>
+        <td class="col lg-col multiline-col"> {{ entry.technologies }} </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss
index ce619a2f8..0c82fad79 100644
--- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss
+++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss
@@ -7,7 +7,7 @@
 }
 
 .lg-col{
-  min-width: 20em;
+  width: 15em;
 }
 
 .multiline-col{
diff --git a/src/app/modules/reports/components/time-range-form/time-range-form.component.html b/src/app/modules/reports/components/time-range-form/time-range-form.component.html
index be620c6c4..58586c188 100644
--- a/src/app/modules/reports/components/time-range-form/time-range-form.component.html
+++ b/src/app/modules/reports/components/time-range-form/time-range-form.component.html
@@ -1,26 +1,25 @@
-<div class="container-flex">
-  <form [formGroup]="reportForm" (ngSubmit)="onSubmit()">
-    <div class="row">
-      <div class="col">
-        <div class="input-group">
-          <app-input-label text="Start Date"></app-input-label>
-          <app-input-date formControlName="startDate" required="true"></app-input-date>
-        </div>
-      </div>
-      <div class="col">
-        <div class="input-group">
-          <app-input-label text="End Date"></app-input-label>
-          <app-input-date formControlName="endDate" required="true"></app-input-date>
-        </div>
+<form [formGroup]="reportForm" (ngSubmit)="onSubmit()">
+  <div class="row">
+    <div class="col">
+      <div class="input-group">
+        <app-input-label text="Start Date"></app-input-label>
+        <app-input-date formControlName="startDate" required="true"></app-input-date>
       </div>
     </div>
-    <div class="row">
-      <div class="col">
-        <button type="submit" class="btn btn-primary float-right"
-                [disabled]="!(reportForm.touched && reportForm.valid)">Search
-        </button>
+    <div class="col">
+      <div class="input-group">
+        <app-input-label text="End Date"></app-input-label>
+        <app-input-date formControlName="endDate" required="true"></app-input-date>
       </div>
     </div>
-  </form>
-</div>
+  </div>
+  <div class="row mt-3">
+    <div class="col">
+      <button type="submit" class="btn btn-primary float-right"
+              [disabled]="!(reportForm.touched && reportForm.valid)">Search
+      </button>
+    </div>
+  </div>
+</form>
+
 
diff --git a/src/app/modules/reports/pages/reports.component.html b/src/app/modules/reports/pages/reports.component.html
index 8e6224080..661823546 100644
--- a/src/app/modules/reports/pages/reports.component.html
+++ b/src/app/modules/reports/pages/reports.component.html
@@ -1,4 +1,3 @@
-<div class="w-100">
-  <app-time-range-form></app-time-range-form>
-  <app-time-entries-table></app-time-entries-table>
-</div>
+<app-time-range-form></app-time-range-form>
+<app-time-entries-table></app-time-entries-table>
+
diff --git a/src/app/modules/reports/pages/reports.component.spec.ts b/src/app/modules/reports/pages/reports.component.spec.ts
index e1036e336..672f49257 100644
--- a/src/app/modules/reports/pages/reports.component.spec.ts
+++ b/src/app/modules/reports/pages/reports.component.spec.ts
@@ -36,10 +36,8 @@ describe('ReportsComponent', () => {
     fixture.detectChanges();
 
     const compile = fixture.debugElement.nativeElement;
-    const div = compile.querySelector('div');
     const reportForm = compile.querySelector('app-time-range-form');
     const reportDataTable = compile.querySelector('app-time-entries-table');
-    expect(div).toBeTruthy();
     expect(reportForm).toBeTruthy();
     expect(reportDataTable).toBeTruthy();
   }));
diff --git a/src/app/modules/time-clock/store/entry.effects.spec.ts b/src/app/modules/time-clock/store/entry.effects.spec.ts
index b1fa2fa44..ad61041d7 100644
--- a/src/app/modules/time-clock/store/entry.effects.spec.ts
+++ b/src/app/modules/time-clock/store/entry.effects.spec.ts
@@ -47,19 +47,6 @@ describe('TimeEntryActionEffects', () => {
     expect(service.loadEntriesByTimeRange).toHaveBeenCalledWith(timeRange);
   });
 
-  it('When the service fails, then LOAD_ENTRIES_BY_TIME_RANGE_FAIL should be triggered', async () => {
-    const timeRange: TimeEntriesTimeRange = {start_date: new Date(), end_date: new Date()};
-    actions$ = of({type: EntryActionTypes.LOAD_ENTRIES_BY_TIME_RANGE, timeRange});
-    const serviceSpy = spyOn(service, 'loadEntriesByTimeRange');
-    serviceSpy.and.throwError('error getting time entries');
-
-    effects.loadEntriesByTimeRange$.subscribe(action => {
-      expect(action.type).toEqual(EntryActionTypes.LOAD_ENTRIES_BY_TIME_RANGE_FAIL);
-    });
-
-    expect(service.loadEntriesByTimeRange).toHaveBeenCalledWith(timeRange);
-  });
-
   // TODO Implement the remaining unit tests for the other effects.
 
 });
diff --git a/src/app/modules/time-entries/pages/time-entries.component.html b/src/app/modules/time-entries/pages/time-entries.component.html
index 3326c5fc2..0da931c48 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.html
+++ b/src/app/modules/time-entries/pages/time-entries.component.html
@@ -1,4 +1,4 @@
-<div class="container-time-entries">
+<div>
   <div class="row">
     <div class="col">
       <button
@@ -17,7 +17,7 @@
     <div style="height: 15px;"></div>
 
     <table class="table table-sm table-striped mb-0">
-      <thead class="thead-orange">
+      <thead class="thead-blue">
         <tr class="d-flex">
           <th class="col">Date</th>
           <th class="col">Time in - out</th>
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 592a0a85f..22b9fbbf3 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -37,7 +37,7 @@ $info: #00BAEE;
 }
 
 
-.thead-orange {
+.thead-blue {
   background-color: $primary;
   color: white;
 }