fix: TT-304 Handle message: A new approach for the ticket

Author: Edgar Guaman

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

@@ -42,7 +42,7 @@
   </ng-template>
   <ng-template #listView>
     <div id="listView">
-      <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" *ngIf="timeEntriesDataSource$ | async as dataSource">
         <thead class="thead-blue">
           <tr class="d-flex">
             <th class="col">Date</th>
@@ -54,8 +54,14 @@
             <th class="col"></th>
           </tr>
         </thead>
+        <tr *ngIf="dataSource.isLoading">
+          <td class="text-center" colspan="7">No data available in table</td>
+        </tr>
         <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
         <tbody *ngIf="!dataSource.isLoading">
+          <tr *ngIf="dataSource?.data.length === 0">
+            <td class="text-center" colspan="7">No data available in table</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>

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

@@ -668,11 +668,4 @@ describe('TimeEntriesComponent', () => {
 
     expect(HTMLTimeEntriesView).not.toBeNull();
   });
-
-  it('after the component is initialized it should initialize the table', () => {
-    spyOn(component.dtTrigger, 'next');
-    component.ngAfterViewInit();
-
-    expect(component.dtTrigger.next).toHaveBeenCalled();
-  });
 });

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

@@ -1,7 +1,7 @@
-import { Component, OnDestroy, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActionsSubject, select, Store } from '@ngrx/store';
 import { ToastrService } from 'ngx-toastr';
-import { Observable, Subscription, Subject } from 'rxjs';
+import { Observable, Subscription } 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';
@@ -14,13 +14,12 @@ import { EntryActionTypes } from './../../time-clock/store/entry.actions';
 import { getActiveTimeEntry, getTimeEntriesDataSource } from './../../time-clock/store/entry.selectors';
 import { CookieService } from 'ngx-cookie-service';
 import { FeatureToggle } from './../../../../environments/enum';
-import { DataTableDirective } from 'angular-datatables';
 @Component({
   selector: 'app-time-entries',
   templateUrl: './time-entries.component.html',
   styleUrls: ['./time-entries.component.scss'],
 })
-export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
+export class TimeEntriesComponent implements OnInit, OnDestroy {
   entryId: string;
   entry: Entry;
   activeTimeEntry: Entry;
@@ -39,11 +38,6 @@ export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
   selectedYear: number;
   selectedMonthAsText: string;
   isActiveEntryOverlapping = false;
-  dtOptions: any = {};
-  dtTrigger: Subject<any> = new Subject();
-  @ViewChild(DataTableDirective, { static: false })
-  dtElement: DataTableDirective;
-  rerenderTableSubscription: Subscription;
   constructor(
     private store: Store<EntryState>,
     private toastrService: ToastrService,
@@ -55,18 +49,8 @@ export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
   }
   ngOnDestroy(): void {
     this.entriesSubscription.unsubscribe();
-    this.rerenderTableSubscription.unsubscribe();
-    this.dtTrigger.unsubscribe();
   }
   ngOnInit(): void {
-    this.dtOptions = {
-      scrollY: '325px',
-      paging: false,
-      responsive: true,
-    };
-    this.rerenderTableSubscription = this.timeEntriesDataSource$.subscribe((ds) => {
-      this.rerenderDataTable();
-    });
     this.loadActiveEntry();
     this.isFeatureToggleCalendarActive = (this.cookiesService.get(FeatureToggle.TIME_TRACKER_CALENDAR) === 'true');
     this.entriesSubscription = this.actionsSubject$.pipe(
@@ -81,9 +65,6 @@ export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
       this.store.dispatch(new entryActions.LoadEntries(this.selectedMonth, this.selectedYear));
     });
   }
-  ngAfterViewInit(): void {
-    this.rerenderDataTable();
-  }
   newEntry() {
     if (this.wasEditingExistingTimeEntry) {
       this.entry = null;
@@ -235,15 +216,4 @@ export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
       });
     }
   }
-
-  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();
-    }
-  }
 }