Adding 'no records found' when table is empty

Issue-ID: NONRTRIC-555
Signed-off-by: ychacon <yennifer.chacon@est.tech>
Change-Id: Ia3c3915c37d3d3105812b1d75072957d8b37a594

diff --git a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.html b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.html
index 619011d..a54e763 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.html
+++ b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.html
@@ -103,9 +103,19 @@ limitations under the License.
             </mat-header-cell>
             <mat-cell *matCellDef="let job"> {{job.status}} </mat-cell>
         </ng-container>
-        <mat-header-row *matHeaderRowDef="['jobId', 'prodIds', 'typeId', 'owner', 'targetUri', 'status']"></mat-header-row>
+        
+        <ng-container matColumnDef="noRecordsFound">
+            <mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="['jobId', 'prodIds', 'typeId', 'owner', 'targetUri', 'status']" [ngClass]="{'display-none': !this.hasJobs()}">
+        </mat-header-row>
         <mat-row *matRowDef="let row; columns: ['jobId', 'prodIds', 'typeId', 'owner', 'targetUri', 'status'];"></mat-row>
+
+        <mat-footer-row *matFooterRowDef="['noRecordsFound']" [ngClass]="{'display-none': this.hasJobs()}">
+        </mat-footer-row>
+
     </mat-table>
-    <mat-paginator [length]="jobs()?.length" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons
+    <mat-paginator [length]="this.jobsNumber()" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons
         class="ei-coordinator-table mat-elevation-z8"></mat-paginator>
 </div>
\ No newline at end of file

diff --git a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.scss b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.scss
index 18f2410..c131630 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.scss
+++ b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.scss
@@ -33,4 +33,12 @@
 .polling-checkbox{\r
     margin: 0 10px;\r
     font-size: 0.75em;\r
+}\r
+\r
+.display-none {\r
+    display: none;\r
+  }\r
+\r
+.spinner-container mat-spinner {\r
+margin: 0 auto 0 auto;\r
 }
\ No newline at end of file

diff --git a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts
index 097e450..fce9e61 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts
+++ b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts
@@ -280,8 +280,12 @@ export class JobsListComponent implements OnInit {
     this.refresh$.next("");
   }
 
+  jobsNumber() : number {
+    return this.jobsDataSource.data.length;
+  }
+
   hasJobs(): boolean {
-    return this.jobs().length > 0;
+    return this.jobsNumber() > 0;
   }
 
 }

diff --git a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.html b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.html
index 37b405a..cd79b6e 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.html
+++ b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.html
@@ -63,7 +63,16 @@ limitations under the License.
       <mat-cell *matCellDef="let producer"> {{this.getProducerStatus(producer)}} </mat-cell>
     </ng-container>
 
-    <mat-header-row *matHeaderRowDef="['id', 'types', 'status']"></mat-header-row>
+    <ng-container matColumnDef="noRecordsFound">
+      <mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="['id', 'types', 'status']" [ngClass]="{'display-none': !this.hasProducers()}">
+    </mat-header-row>
     <mat-row *matRowDef="let row; columns: ['id', 'types', 'status'];"></mat-row>
+
+    <mat-footer-row *matFooterRowDef="['noRecordsFound']" [ngClass]="{'display-none': this.hasProducers()}">
+    </mat-footer-row>
+
   </mat-table>
 </div>

diff --git a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.scss b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.scss
index a94c1a5..56c891d 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.scss
+++ b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.scss
@@ -27,4 +27,10 @@
 .mat-form-field {
   font-size: 14px;
   width: 100%;
+}
+.display-none {
+  display: none;
+}
+.spinner-container mat-spinner {
+  margin: 0 auto 0 auto;
 }
\ No newline at end of file

diff --git a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.spec.ts b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.spec.ts
index 5846ffd..cc3b255 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.spec.ts
+++ b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.spec.ts
@@ -73,8 +73,10 @@ describe('ProducersListComponent', () => {
       } as Producer;
 
       setServiceSpy();
+
       component.loadProducers();
       const actualProducers: Producer[] = component.producers();
+      expect(actualProducers.length).toEqual(2);
       expect(actualProducers).toEqual([producer1, producer2]);
     });
 

diff --git a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts
index 5fe0c85..64f4ef2 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts
+++ b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts
@@ -171,7 +171,7 @@ export class ProducersListComponent implements OnInit {
   }
 
   hasProducers(): boolean {
-    return this.producers().length > 0;
+    return this.producersDataSource.data.length > 0;
   }
 
 }