feat: #418 Improve reports table

* Reducing font size
* Removing some columns from UI
* Moving search button so that it can be displayed on low resolution screens

Author: Juan Gabriel Guzman

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -9,16 +9,16 @@
     >
       <thead class="thead-blue">
         <tr class="d-flex">
-          <th class="col md-col">ID</th>
+          <th class="hidden-col" >ID</th>
           <th class="col md-col">User email</th>
           <th class="col sm-col">Date</th>
-          <th class="col sm-col">Duration (hours)</th>
-          <th class="col sm-col">Time in</th>
-          <th class="col sm-col">Time out</th>
+          <th class="col x-sm-col" title="Duration (hours)">Duration (hours)</th>
+          <th class="col x-sm-col" title="Time in">Time in</th>
+          <th class="col x-sm-col" title="Time out">Time out</th>
           <th class="col md-col">Project</th>
-          <th class="col lg-col">Project ID</th>
+          <th class="hidden-col">Project ID</th>
           <th class="col md-col">Customer</th>
-          <th class="col lg-col">Customer ID</th>
+          <th class="hidden-col">Customer ID</th>
           <th class="col md-col">Activity</th>
           <th class="col lg-col">Ticket</th>
           <th class="col lg-col">Description</th>
@@ -33,24 +33,24 @@
           class="d-flex"
           *ngFor="let entry of dataSource.data"
         >
-          <td class="col md-col multiline-col">{{ entry.id }}</td>
-          <td class="col md-col multiline-col">{{ entry.owner_email }}</td>
+          <td class="hidden-col">{{ entry.id }}</td>
+          <td class="col md-col">{{ entry.owner_email }}</td>
           <td class="col sm-col">
             {{ entry.start_date | date: 'MM/dd/yyyy' }}
           </td>
-          <td class="col sm-col">
+          <td class="col x-sm-col">
             {{ entry.end_date | substractDate: entry.start_date }}
           </td>
-          <td class="col sm-col">{{ entry.start_date | date: 'HH:mm' }}</td>
-          <td class="col sm-col">{{ entry.end_date | date: 'HH:mm' }}</td>
+          <td class="col x-sm-col">{{ entry.start_date | date: 'HH:mm' }}</td>
+          <td class="col x-sm-col">{{ entry.end_date | date: 'HH:mm' }}</td>
           <td class="col md-col">{{ entry.project_name }}</td>
-          <td class="col md-col">{{ entry.project_id }}</td>
+          <td class="hidden-col">{{ entry.project_id }}</td>
           <td class="col md-col">{{ entry.customer_name }}</td>
-          <td class="col md-col">{{ entry.customer_id }}</td>
+          <td class="hidden-col">{{ entry.customer_id }}</td>
           <td class="col md-col">{{ entry.activity_name }}</td>
           <td class="col lg-col">{{ entry.uri }}</td>
-          <td class="col lg-col multiline-col">{{ entry.description }}</td>
-          <td class="col lg-col multiline-col">{{ entry.technologies }}</td>
+          <td class="col lg-col">{{ entry.description }}</td>
+          <td class="col lg-col">{{ entry.technologies }}</td>
         </tr>
       </tbody>
     </table>

src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss

@@ -2,12 +2,18 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: small;
+}
+.x-sm-col{
+  width: 5em;
+  max-width: 7em;
 }
 
 .sm-col{
   width: 6em;
   max-width: 8em;
 }
+
 .md-col{
   width: 9em;
 }
@@ -17,3 +23,6 @@
   overflow: hidden;
   white-space: normal;
 }
+.hidden-col{
+  display: none;
+}

src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts

@@ -6,6 +6,7 @@ import * as moment from 'moment';
 import { Observable, Subject } from 'rxjs';
 import { Entry } from 'src/app/modules/shared/models';
 import { DataSource } from 'src/app/modules/shared/models/data-source.model';
+
 import { EntryState } from '../../../time-clock/store/entry.reducer';
 import { getReportDataSource } from '../../../time-clock/store/entry.selectors';
 
@@ -20,7 +21,11 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     paging: false,
     dom: 'Bfrtip',
     buttons: [
-      'colvis',
+      {
+        extend: 'colvis',
+        columns: ':not(.hidden-col)',
+
+      },
       'print',
       {
         extend: 'excel',

src/app/modules/reports/components/time-range-form/time-range-form.component.html

@@ -1,21 +1,29 @@
 <form [formGroup]="reportForm" (ngSubmit)="onSubmit()">
   <div class="row">
-    <div class="col">
+    <div class="col col-md-3">
       <div class="input-group">
         <app-input-label text="Start Date"></app-input-label>
-        <app-input-date formControlName="startDate" id="startDate" required="true"></app-input-date>
+        <app-input-date
+          formControlName="startDate"
+          id="startDate"
+          required="true"
+        ></app-input-date>
       </div>
     </div>
-    <div class="col">
+    <div class="col col-md-3">
       <div class="input-group">
         <app-input-label text="End Date"></app-input-label>
-        <app-input-date formControlName="endDate" id="endDate" required="true"></app-input-date>
+        <app-input-date
+          formControlName="endDate"
+          id="endDate"
+          required="true"
+        ></app-input-date>
       </div>
     </div>
-    <div class="col">
-      <button type="submit" class="btn btn-primary float-right">Search</button>
+  </div>
+  <div class="row pt-4">
+    <div class="col-md-3 offset-md-6">
+      <button type="submit" class="btn btn-primary">Search</button>
     </div>
   </div>
 </form>
-
-