feat: TT-344 add pagination to time-entries tab

Author: bytesantiago

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

@@ -42,9 +42,15 @@
       </div>
     </div>
   </ng-template>
+  
   <ng-template #listView>
     <div id="listView">
-      <table class="table table-sm table-striped mb-0" *ngIf="timeEntriesDataSource$ | async as dataSource">
+      <table 
+        class="table table-sm table-striped mb-0"
+        datatable
+        [dtTrigger]="dtTrigger"
+        [dtOptions]="dtOptions" 
+        *ngIf="(timeEntriesDataSource$ | async) as dataSource">
         <thead class="thead-blue">
           <tr class="d-flex">
             <th class="col">Date</th>
@@ -95,6 +101,7 @@
     </div>
   </ng-template>
 </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.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,12 @@ 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 = {};
+  dtTrigger: Subject<any> = new Subject();
+  @ViewChild(DataTableDirective, { static: false })
+  dtElement: DataTableDirective;
+  rerenderTableSubscription: Subscription;
   entryId: string;
   entry: Entry;
   activeTimeEntry: Entry;
@@ -52,9 +58,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 +73,31 @@ 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.rerenderDataTable();
+    });
   }
+
+  ngAfterViewInit(): void {
+    this.rerenderDataTable();
+  }
+
+  ngOnDestroy(): void {
+    this.rerenderTableSubscription.unsubscribe();
+    this.entriesSubscription.unsubscribe();
+  }
+
+  private rerenderDataTable(): void {
+    if (this.dtElement && this.dtElement.dtInstance) {
+      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
+          dtInstance.destroy();
+          this.dtTrigger.next();
+      });
+    } else {
+        this.dtTrigger.next();
+    }
+  }
+
   newEntry() {
     if (this.wasEditingExistingTimeEntry) {
       this.entry = null;