TT-304 Handle message: the data could not be load (#728)

* fix: TT-304 Handle message: the data could not be load

* test: TT-304 Creating a unit test to coverage the new feature

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

* refactor: TT-304 Handle message: Making readonly variables, new methods, and tests

* test: TT-304 Handle message: Editing and creating unit tests

* refactor: TT-304 Handle message: Editing methods and unit tests associated

* refactor: TT-304 Handle message: Rewriting method and unit tests for that method

* refactor: TT-304 Handle message: New approach for the ticket

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

Author: edgardavid2015

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

@@ -54,8 +54,14 @@
             <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>
           <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.ts

@@ -38,6 +38,8 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
   selectedYear: number;
   selectedMonthAsText: string;
   isActiveEntryOverlapping = false;
+  readonly NO_DATA_MESSAGE: string = 'No data available in table';
+  timeEntry: DataSource<Entry>;
   constructor(
     private store: Store<EntryState>,
     private toastrService: ToastrService,