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
--- 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 @@
</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
--- 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{
margin: 0 10px;
font-size: 0.75em;
+}
+
+.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/jobs-list/jobs-list.component.ts b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts
index 097e450..fce9e61 100644
--- 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 @@
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
--- 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 @@
<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
--- 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
--- 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 @@
} 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
--- 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 @@
}
hasProducers(): boolean {
- return this.producers().length > 0;
+ return this.producersDataSource.data.length > 0;
}
}