Tt 318 improve column visibility section (#740)

* style: TT-318 Improve column visibility

* style: TT-318 Improve column visibility option

* style: TT-318 Improving the print option

* style: TT-318 Improving functionality in CSV and Excel buttons

* style: TT-318 Deleting unnecessary variables

* code-smell: TT-318 Fixing a code smell and rebase from master

Co-authored-by: Edgar Guaman <[email protected]>

Author: edgardavid2015

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

@@ -2,7 +2,6 @@ import { formatDate } from '@angular/common';
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { DataTableDirective } from 'angular-datatables';
-import * as moment from 'moment';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { Entry } from 'src/app/modules/shared/models';
 import { DataSource } from 'src/app/modules/shared/models/data-source.model';
@@ -22,38 +21,31 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     buttons: [
       {
         extend: 'colvis',
-        columns: ':not(.hidden-col)',
+        columns: ':not(.hidden-col),visible'
+      },
+      {
+        extend: 'print',
+        exportOptions: {
+          columns: ':visible'
+          }
       },
-      'print',
       {
         extend: 'excel',
         exportOptions: {
-          format: {
-            body: (data, row, column, node) => {
-              return column === 3 ?
-              moment.duration(data).asHours().toFixed(4).slice(0, -1) :
-              data;
-            },
-          },
+          columns: ':visible'
         },
         text: 'Excel',
-        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`,
+        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
       },
       {
         extend: 'csv',
         exportOptions: {
-          format: {
-            body: (data, row, column, node) => {
-              return column === 3 ?
-              moment.duration(data).asHours().toFixed(4).slice(0, -1) :
-              data;
-            },
-          },
+          columns: ':visible'
         },
         text: 'CSV',
-        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`,
+        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
       },
-    ],
+    ]
   };
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, { static: false })

src/styles.scss

@@ -61,3 +61,32 @@ Overwritten calendar style
 .cal-header .cal-cell {
   border: 0.1px solid lighten($primary-text, 30%);
 }
+
+@media (max-width: 640px) {
+  div.dt-buttons {
+    text-align: start !important;
+  }
+  .dataTables_wrapper .dataTables_filter {
+    text-align: start !important;
+  }
+  div.dt-button-collection {
+    position: fixed !important;
+    top: 250px !important;
+    margin-left: 50px !important;
+    overflow-y: scroll !important;
+    max-height: 300px !important;
+    button.active:not(.disabled) {
+    background: $primary !important;
+    box-shadow: none !important;
+  }
+  }
+}
+
+@media (min-width: 576px) {
+  div.dt-button-collection {
+    button.active:not(.disabled) {
+    background: $primary !important;
+    box-shadow: none !important;
+  }
+  }
+}