Tt 344 add pagination where feature is not available

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

@@ -16,7 +16,6 @@ import { getReportDataSource } from '../../../time-clock/store/entry.selectors';
 export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewInit {
   dtOptions: any = {
     scrollY: '590px',
-    paging: false,
     dom: 'Bfrtip',
     buttons: [
       {

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

@@ -23,78 +23,82 @@
   <app-month-picker [selectedDate]="selectedDate" (dateSelected)="dateSelected($event)"></app-month-picker>
   <div style="height: 15px"></div>
 
-  <div *ngIf="displayGridView; then gridView; else listView"></div>
-  <ng-template #gridView>
-    <div id="gridView">
-      <div *ngIf="timeEntriesDataSource$ | async as dataSource">
-        <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
-        <app-calendar
-          *ngIf="!dataSource.isLoading"
-          [timeEntries$]="timeEntriesDataSource$"
-          [currentDate]="selectedDate.toDate()"
-          [calendarView]="calendarView"
-          (changeDate)="changeDate($event)"
-          (changeView)="changeView($event)"
-          (viewModal)="editEntry($event.id)"
-          (deleteTimeEntry)="openModal($event.timeEntry)"
-        >
-        </app-calendar>
-      </div>
+
+  <div id="gridView" [hidden]="!displayGridView">
+    <div *ngIf="timeEntriesDataSource$ | async as dataSource">
+      <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
+      <app-calendar
+        *ngIf="!dataSource.isLoading"
+        [timeEntries$]="timeEntriesDataSource$"
+        [currentDate]="selectedDate.toDate()"
+        [calendarView]="calendarView"
+        (changeDate)="changeDate($event)"
+        (changeView)="changeView($event)"
+        (viewModal)="editEntry($event.id)"
+        (deleteTimeEntry)="openModal($event.timeEntry)"
+      >
+      </app-calendar>
     </div>
-  </ng-template>
-  <ng-template #listView>
-    <div id="listView">
-      <table class="table table-sm table-striped mb-0" *ngIf="timeEntriesDataSource$ | async as dataSource">
-        <thead class="thead-blue">
-          <tr class="d-flex">
-            <th class="col">Date</th>
-            <th class="col">Time in - out</th>
-            <th class="col">Duration</th>
-            <th class="col">Customer</th>
-            <th class="col">Project</th>
-            <th class="col">Activity</th>
-            <th class="col"></th>
-          </tr>
-        </thead>
-        <tr *ngIf="dataSource.isLoading">
+  </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">
+      <caption></caption>
+      <thead class="thead-blue">
+        <tr class="d-flex">
+          <th class="col">Date</th>
+          <th class="col">Time in - out</th>
+          <th class="col">Duration</th>
+          <th class="col">Customer</th>
+          <th class="col">Project</th>
+          <th class="col">Activity</th>
+          <th class="col"></th>
+        </tr>
+      </thead>
+      <tr *ngIf="dataSource.isLoading">
+        <td class="text-center" colspan="7">{{NO_DATA_MESSAGE}}</td>
+      </tr>
+      <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
+      <tbody *ngIf="!dataSource.isLoading">
+        <tr *ngIf="!dataSource?.data.length">
           <td class="text-center" colspan="7">{{NO_DATA_MESSAGE}}</td>
         </tr>
-        <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
-        <tbody *ngIf="!dataSource.isLoading">
-          <tr *ngIf="!dataSource?.data.length">
-            <td class="text-center" colspan="7">{{NO_DATA_MESSAGE}}</td>
-          </tr>
-          <tr class="d-flex" *ngFor="let entry of dataSource.data">
-            <td class="col">{{ entry.start_date | date: 'MM/dd/yyyy' }}</td>
-            <td class="col">{{ entry.start_date | date: 'HH:mm' }} - {{ entry.end_date | date: 'HH:mm' }}</td>
-            <td class="col">{{ entry.end_date | substractDate: entry.start_date }}</td>
-            <td class="col">{{ entry.customer_name }}</td>
-            <td class="col">{{ entry.project_name }}</td>
-            <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>
-              <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>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </ng-template>
+        <tr class="d-flex" *ngFor="let entry of dataSource.data">
+          <td class="col">{{ entry.start_date | date: 'MM/dd/yyyy' }}</td>
+          <td class="col">{{ entry.start_date | date: 'HH:mm' }} - {{ entry.end_date | date: 'HH:mm' }}</td>
+          <td class="col">{{ entry.end_date | substractDate: entry.start_date }}</td>
+          <td class="col">{{ entry.customer_name }}</td>
+          <td class="col">{{ entry.project_name }}</td>
+          <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>
+            <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>
+          </td>
+        </tr>
+      </tbody>
+    </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)">

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

@@ -133,6 +133,13 @@ describe('TimeEntriesComponent', () => {
     });
   }));
 
+  it('should initialize the table when the component is initialized', () => {
+    spyOn(component.dtTrigger, 'next');
+    component.ngAfterViewInit();
+
+    expect(component.dtTrigger.next).toHaveBeenCalled();
+  });
+
   it('when create time entries, the time entries should be queried', () => {
     const currentMonth = new Date().getMonth() + 1;
     const year = new Date().getFullYear();

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

@@ -1,7 +1,8 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActionsSubject, select, Store } from '@ngrx/store';
+import { DataTableDirective } from 'angular-datatables';
 import { ToastrService } from 'ngx-toastr';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, Subject } from 'rxjs';
 import { delay, filter } from 'rxjs/operators';
 import { ProjectSelectedEvent } from '../../shared/components/details-fields/project-selected-event';
 import { SaveEntryEvent } from '../../shared/components/details-fields/save-entry-event';
@@ -20,7 +21,15 @@ import { CalendarView } from 'angular-calendar';
   templateUrl: './time-entries.component.html',
   styleUrls: ['./time-entries.component.scss'],
 })
-export class TimeEntriesComponent implements OnInit, OnDestroy {
+export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
+  dtOptions: any = {
+    order: [[ 0, 'desc' ]],
+    destroy: true,
+  };
+  dtTrigger: Subject<any> = new Subject();
+  @ViewChild(DataTableDirective, { static: false })
+  dtElement: DataTableDirective;
+  rerenderTableSubscription: Subscription;
   entryId: string;
   entry: Entry;
   activeTimeEntry: Entry;
@@ -52,9 +61,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
     this.actualDate = new Date();
     this.timeEntriesDataSource$ = this.store.pipe(delay(0), select(getTimeEntriesDataSource));
   }
-  ngOnDestroy(): void {
-    this.entriesSubscription.unsubscribe();
-  }
+
   ngOnInit(): void {
     this.loadActiveEntry();
     this.isFeatureToggleCalendarActive = (this.cookiesService.get(FeatureToggle.TIME_TRACKER_CALENDAR) === 'true');
@@ -69,7 +76,20 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       this.loadActiveEntry();
       this.store.dispatch(new entryActions.LoadEntries(this.selectedMonth, this.selectedYear));
     });
+    this.rerenderTableSubscription = this.timeEntriesDataSource$.subscribe((ds) => {
+      this.dtTrigger.next();
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.dtTrigger.next();
+  }
+
+  ngOnDestroy(): void {
+    this.rerenderTableSubscription.unsubscribe();
+    this.entriesSubscription.unsubscribe();
   }
+
   newEntry() {
     if (this.wasEditingExistingTimeEntry) {
       this.entry = null;

src/styles.scss

@@ -16,7 +16,7 @@ body {
   width: 100vw;
   margin: 0;
   padding: 0;
-  overflow-x: hidden;
+  overflow-x: scroll;
   overflow-y: hidden;
 }