feat: ioet#204 Extracting inline css to scss file

Author: Juan Gabriel Guzman

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

@@ -2,25 +2,25 @@
 <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" style="max-width: 8em">Date</th>
-    <th class="col" style="max-width: 6.2em">Duration</th>
-    <th class="col">Project</th>
-    <th class="col">Ticket</th>
-    <th class="col" style="min-width: 20em">Description</th>
-    <th class="col" style="min-width: 20em">Technologies</th>
+    <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" style="max-width: 8em"> {{ entry.start_date | date: 'dd/MM/yyyy' }} </td>
-    <td class="col" style="max-width: 6.2em"> {{ entry.end_date | substractDate: entry.start_date }} </td>
-    <td class="col"> {{ entry.project_name }} </td>
-    <td class="col"> {{ entry.uri }} </td>
-    <td class="col" style="min-width: 20em"> {{ entry.description }} </td>
-    <td class="col" style="word-break: break-all; min-width: 20em"> {{ entry.technologies }} </td>
+    <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>

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

@@ -0,0 +1,16 @@
+
+.sm-col{
+  max-width: 6.2em
+}
+.md-col{
+  max-width: 8em
+}
+
+.lg-col{
+  min-width: 20em;
+}
+
+.multiline-col{
+  word-break: break-all;
+
+}

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

@@ -61,11 +61,10 @@ describe('Reports Page', () => {
       expect(component.data).toEqual(state.entriesForReport);
     });
 
-    fit('after the component is initialized it should initialize the table', () => {
+    it('after the component is initialized it should initialize the table', () => {
       spyOn(component.dtTrigger, 'next');
 
       component.ngAfterViewInit();
-      // fixture.detectChanges();
 
       expect(component.dtTrigger.next).toHaveBeenCalled();
     });

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

@@ -8,13 +8,14 @@ import {DataTableDirective} from 'angular-datatables';
 @Component({
   selector: 'app-time-entries-table',
   templateUrl: './time-entries-table.component.html',
+  styleUrls: ['./time-entries-table.component.scss']
 })
 export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewInit {
 
   data = [];
   const;
   dtOptions: any = {
-    scrollY: '790px',
+    scrollY: '600px',
     paging: false,
     dom: 'Bfrtip',
     buttons: [
@@ -48,18 +49,12 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   }
 
   private rerenderDataTable(): void {
-    console.log('1', this.dtElement);
-    console.log('1', this.dtElement);
     if (this.dtElement && this.dtElement.dtInstance) {
-      console.log('2');
       this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
-        console.log('3');
-
         dtInstance.destroy();
         this.dtTrigger.next();
       });
     } else {
-      console.log('4');
       this.dtTrigger.next();
     }
   }

src/app/modules/time-clock/store/entry.actions.ts

@@ -200,4 +200,4 @@ export type EntryActions =
   | DefaultEntry
   | LoadEntriesByTimeRange
   | LoadEntriesByTimeRangeSuccess
-  | LoadEntriesByTimeRangeFail
+  | LoadEntriesByTimeRangeFail;

src/app/modules/time-clock/store/entry.reducer.spec.ts

@@ -1,8 +1,7 @@
-import {TimeEntriesSummary, TimeDetails} from '../models/time.entry.summary';
-import {NewEntry, Entry} from './../../shared/models';
+import {TimeDetails, TimeEntriesSummary} from '../models/time.entry.summary';
+import {Entry, NewEntry} from './../../shared/models';
 import * as actions from './entry.actions';
 import {entryReducer, EntryState} from './entry.reducer';
-import {init} from 'protractor/built/launcher';
 
 describe('entryReducer', () => {
 

src/styles/colors.scss

@@ -71,7 +71,6 @@ General Datatable adjustment styles
 .dt-buttons {
   .dt-button {
     background-image: linear-gradient($info);
-    color: white;
   }
   .dt-button:hover:not(.disabled){
     background-image: linear-gradient($info);