TT-664 fix bad UX

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

@@ -1,6 +1,5 @@
 <div class="row scroll-table mt-5 ml-0">
     <app-search-user [users]="users" (selectedUserId)="user($event)"></app-search-user>
-
     <table class="table table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" *ngIf="(reportDataSource$ | async) as dataSource">
         <thead class="thead-blue">
             <tr class="d-flex">
@@ -23,26 +22,26 @@
         <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
         <tbody *ngIf="!dataSource.isLoading">
             <tr class="d-flex col-height" *ngFor="let entry of dataSource.data">
-                <td class="hidden-col">{{ entry.id }}</td>
-                <td class="col md-col">{{ entry.owner_email }}</td>
-                <td class="col sm-col">
+                 <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>
+                 <td class="col sm-col">
                     {{ entry.end_date | substractDate: entry.start_date }}
-                </td>
-                <td class="col x-sm-col">{{ dateTimeOffset.parseDateTimeOffset(entry.start_date,entry.timezone_offset) }}</td>
-                <td class="col x-sm-col">{{ dateTimeOffset.parseDateTimeOffset(entry.end_date , entry.timezone_offset) }}</td>
-                <td class="col md-col">{{ entry.project_name }}</td>
-                <td class="hidden-col">{{ entry.project_id }}</td>
-                <td class="col md-col">{{ entry.customer_name }}</td>
-                <td class="hidden-col">{{ entry.customer_id }}</td>
-                <td class="col md-col">{{ entry.activity_name }}</td>
-                <td class="col lg-col">
+                 </td>
+                 <td class="col x-sm-col">{{ dateTimeOffset.parseDateTimeOffset(entry.start_date,entry.timezone_offset) }}</td>
+                 <td class="col x-sm-col">{{ dateTimeOffset.parseDateTimeOffset(entry.end_date , entry.timezone_offset) }}</td>
+                 <td class="col md-col">{{ entry.project_name }}</td>
+                 <td class="hidden-col">{{ entry.project_id }}</td>
+                 <td class="col md-col">{{ entry.customer_name }}</td>
+                 <td class="hidden-col">{{ entry.customer_id }}</td>
+                 <td class="col md-col">{{ entry.activity_name }}</td>
+                 <td class="col lg-col">
                     <ng-container *ngIf="entry.uri !== null">
                         <a [class.is-url]="isURL(entry.uri)" (click)="openURLInNewTab(entry.uri)">
-              {{ entry.uri }}
-            </a>
+                        {{ entry.uri }}
+                        </a>
                     </ng-container>
                 </td>
                 <td class="col lg-scroll">{{ entry.description }}</td>
@@ -55,6 +54,6 @@
                 </td>
             </tr>
         </tbody>
-    </table>
+    </table>    
 </div>
 <div class="alert alert-dark mt-3">Total: {{this.resultSum.hours}} hours, {{this.resultSum.minutes}} minutes</div>

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

@@ -26,18 +26,19 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   selectOptionNames = [15, 30, 50, 100, 'All'];
   users: User[] = [];
   dtOptions: any = {
-    scrollY: '590px',
-    dom: '<"d-flex justify-content-between"B<"d-flex"<"mr-5"l>f>>rtip',
+    bScrollCollapse: true,
     pageLength: 30,
     lengthMenu: [this.selectOptionValues, this.selectOptionNames],
     buttons: [
       {
         text: 'Column Visibility' + ' ▼',
-        extend: 'colvis',
-        columns: ':not(.hidden-col)'
+        extend: 'colvis'
       },
       {
-        extend: 'print'
+        extend: 'print',
+        exportOptions: {
+          columns: ':visible'
+        }
       },
       {
         extend: 'excel',
@@ -88,7 +89,6 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   ngOnInit(): void {
     this.rerenderTableSubscription = this.reportDataSource$.subscribe((ds) => {
       this.sumDates(ds.data);
-      this.rerenderDataTable();
     });
     this.uploadUsers();
   }
@@ -102,14 +102,15 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     this.dtTrigger.unsubscribe();
   }
 
-  private rerenderDataTable(): void {
+  private rerenderDataTable(): any {
     if (this.dtElement && this.dtElement.dtInstance) {
       this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
         dtInstance.destroy();
         this.dtTrigger.next();
       });
     } else {
       this.dtTrigger.next();
+      return;
     }
   }
 
@@ -151,6 +152,4 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   user(userId: string){
     this.selectedUserId.emit(userId);
   }
-
-}
-
+}

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

@@ -8,7 +8,6 @@
           required="true"
         ></app-input-date>
     </div>
-
     <label class="col-12 col-md-2 col-form-label my-1">End date:</label>
     <div class="col-12 col-sm-6 col-md-3 my-1">
     <app-input-date
@@ -17,7 +16,6 @@
           required="true"
       ></app-input-date>
     </div>
-
     <div class="col-12 col-md-2 my-1">
       <button type="submit" class="btn btn-primary">Search</button>
     </div>

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

@@ -1,18 +1,16 @@
 <div>
     <div>
         <button type="button" (click)="newEntry()" data-toggle="modal" data-target="#editRecordsByDate" class="btn btn-primary">
-      Add new entry
-    </button>
-        <button type="button" (click)="onDisplayModeChange()" class="btn btn-primary float-right" *ngIf="isFeatureToggleCalendarActive">
-      <em class="fas fa-list" *ngIf="displayGridView"></em>
-      <em class="fas fa-th" *ngIf="!displayGridView"></em>
-    </button>
+        Add new entry
+        </button>
+            <button type="button" (click)="onDisplayModeChange()" class="btn btn-primary float-right" *ngIf="isFeatureToggleCalendarActive">
+                <em class="fas fa-list" *ngIf="displayGridView"></em>
+                <em class="fas fa-th" *ngIf="!displayGridView"></em>
+            </button>
     </div>
     <div style="height: 15px"></div>
     <app-month-picker [selectedDate]="selectedDate" (dateSelected)="dateSelected($event)"></app-month-picker>
     <div style="height: 15px"></div>
-
-
     <div id="gridView" [hidden]="!displayGridView">
         <div *ngIf="timeEntriesDataSource$ | async as dataSource">
             <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
@@ -21,9 +19,8 @@
             </app-calendar>
         </div>
     </div>
-
     <div id="listView" [hidden]="displayGridView">
-        <table class="table table-sm table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" *ngIf="(timeEntriesDataSource$ | async) as dataSource">
+        <table  class="table table-sm table-striped mb-0 " datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" *ngIf="(timeEntriesDataSource$ | async) as dataSource">
             <caption></caption>
             <thead class="thead-blue">
                 <tr class="d-flex">
@@ -47,30 +44,29 @@
                     <td class="col">{{ entry.activity_name }}</td>
                     <td class="col">
                         <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editRecordsByDate" (click)="editEntry(entry.id)">
-              <i class="fa fa-edit fa-xs"></i>
-            </button>
+                            <i class="fa fa-edit fa-xs"></i>
+                        </button>
                         <button class="btn btn-sm btn-danger ml-2" data-toggle="modal" data-target="#deleteModal" (click)="openModal(entry)">
-              <i class="fa fa-trash fa-xs"></i>
-            </button>
+                            <i class="fa fa-trash fa-xs"></i>
+                        </button>
                     </td>
                 </tr>
             </tbody>
-        </table>
+        </table>      
     </div>
 </div>
-
 <div class="modal fade" id="editRecordsByDate" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
         <div class="modal-content" cdkDrag (cdkDragEnded)="resetDraggablePosition($event)">
             <div class="modal-header">
                 <h5 class="modal-title">{{ entryId ? 'Edit Entry' : 'New Entry' }}</h5>
                 <div>
                     <button class="btn shadow-none" data-bs-toggle="tooltip" title="Clean form values" (click)="detailsFields.cleanFieldsForm()">
-            <em class="fa fa-eraser"> </em>
-          </button>
+                        <em class="fa fa-eraser"> </em>
+                    </button>
                     <button class="btn shadow-none" data-bs-toggle="tooltip" title="Drag modal" cdkDragHandle>
-            <em class="fa fa-grip-vertical"></em>
-          </button>
+                        <em class="fa fa-grip-vertical"></em>
+                    </button>              
                 </div>
             </div>
             <div class="modal-body">
@@ -80,6 +76,5 @@ <h5 class="modal-title">{{ entryId ? 'Edit Entry' : 'New Entry' }}</h5>
         </div>
     </div>
 </div>
-
 <app-dialog *ngIf="showModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true" [body]="message" [title]="'Delete Entry'" (closeModalEvent)="removeEntry()">
 </app-dialog>

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

@@ -255,4 +255,4 @@ export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
       });
     }
   }
-}
+}

src/styles.scss

@@ -68,6 +68,11 @@ Overwritten calendar style
   border: 0.1px solid lighten($primary-text, 30%);
 }
 
+.buttons-columnVisibility
+{
+  background: $primary-disable !important;
+}
+
 @media (max-width: 640px) {
   div.dt-buttons {
     text-align: start !important;

src/styles/colors.scss

@@ -2,6 +2,7 @@ $font-size-base: 0.9rem;
 
 $dark: #5c4e63;
 $primary: #00baee;
+$primary-disable: #9ecedbe7;
 $secondary: #555164;
 $success: #00cc6c;
 $warning: #ff5e0a;