all: smoother empty tables (fixes #7882) (#7883)

Co-authored-by: dogi <[email protected]>
open-learning-exchange · Dec 6, 2024 · af73fc9 · af73fc9
1 parent cf3f47c
commit af73fc9
Show file tree

Hide file tree

Showing 28 changed files with 51 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.83",
+  "version": "0.15.84",
   "myplanet": {
-    "latest": "v0.21.28",
-    "min": "v0.20.28"
+    "latest": "v0.21.29",
+    "min": "v0.20.29"
   },
   "scripts": {
     "ng": "ng",

diff --git a/src/app/courses/courses.component.html b/src/app/courses/courses.component.html
@@ -104,7 +104,7 @@
     </ng-container>
   </ng-template>
 
-  <div [ngClass]="{ 'view-container view-full-height view-table': !isForm }" *ngIf="!emptyData; else notFoundMessage">
+  <div [ngClass]="{ 'view-container view-full-height view-table': !isForm }">
     <mat-table #table [dataSource]="courses" matSort [matSortDisableClear]="true" [trackBy]="trackById">
       <ng-container matColumnDef="select">
         <mat-header-cell *matHeaderCellDef>
@@ -231,15 +231,14 @@ <h3 class="header">
       </ng-container>
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{highlight:selection.isSelected(row._id)}"></mat-row>
+      <tr class="mat-row" *matNoDataRow>
+        <td><div class="view-container" i18n>No Course Found</div></td>
+      </tr>
     </mat-table>
-
     <mat-paginator #paginator
       [pageSize]="50"
       [pageSizeOptions]="[5, 10, 20, 50, 100, 200]"
       (page)="onPaginateChange($event)">
     </mat-paginator>
   </div>
-  <ng-template #notFoundMessage>
-    <div class="view-container" i18n>No Course Found</div>
-  </ng-template>
 </div>
diff --git a/src/app/courses/courses.component.ts b/src/app/courses/courses.component.ts
@@ -88,7 +88,6 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
   userShelf: any = [];
   private onDestroy$ = new Subject<void>();
   planetType = this.planetConfiguration.planetType;
-  emptyData = false;
   isAuthorized = false;
   tagFilter = new FormControl([]);
   tagFilterValue = [];
@@ -158,7 +157,6 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
       this.userShelf = this.userService.shelf;
       this.courses.data = this.setupList(courses, this.userShelf.courseIds)
         .filter((course: any) => this.excludeIds.indexOf(course._id) === -1);
-      this.emptyData = !this.courses.data.length;
       this.dialogsLoadingService.stop();
     });
     this.selection.changed.subscribe(({ source }) => {
@@ -335,7 +333,6 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
 
   removeFilteredFromSelection() {
     this.selection.deselect(...selectedOutOfFilter(this.courses.filteredData, this.selection, this.paginator));
-    this.emptyData = this.courses.filteredData.length === 0;
   }
 
   onSearchChange({ items, category }) {

diff --git a/src/app/courses/enroll-courses/courses-enroll.component.html b/src/app/courses/enroll-courses/courses-enroll.component.html
@@ -13,10 +13,5 @@
     </button>
   </mat-toolbar>
 
-  <ng-container *ngIf="!emptyData; else notFoundMessage">
-    <planet-users-table [users]="members" [(tableState)]="tableState" [displayedColumns]="userTableColumns" [shouldOpenProfileDialog]="true" containerClass="view-container view-full-height view-table"></planet-users-table>
-  </ng-container>
-  <ng-template #notFoundMessage>
-    <div class="view-container" i18n>No User Found</div>
-  </ng-template>
+  <planet-users-table [users]="members" [(tableState)]="tableState" [displayedColumns]="userTableColumns" [shouldOpenProfileDialog]="true" containerClass="view-container view-full-height view-table"></planet-users-table>
 </div>
diff --git a/src/app/courses/enroll-courses/courses-enroll.component.ts b/src/app/courses/enroll-courses/courses-enroll.component.ts
@@ -22,7 +22,6 @@ export class CoursesEnrollComponent {
   course: any;
   members: any[] = [];
   tableState = new TableState();
-  emptyData = false;
   userTableColumns = [
     'profile',
     'name',
@@ -82,7 +81,6 @@ export class CoursesEnrollComponent {
         ),
         planet: planets.find(planet => planet.doc.code === user.doc.planetCode)
       })).filter(doc => doc.planet !== undefined && (doc.activityDates.createdDate || shelfUsers.find((u: any) => u._id === doc._id)));
-    this.emptyData = this.members.length === 0;
   }
 
   exportCSV() {

diff --git a/src/app/feedback/feedback.component.html b/src/app/feedback/feedback.component.html
@@ -63,7 +63,7 @@
     </mat-toolbar-row>
   </mat-toolbar>
 
-  <div class="view-container view-full-height view-table" *ngIf="!emptyData; else notFoundMessage">
+  <div class="view-container view-full-height view-table">
     <mat-table #table [dataSource]="feedback" matSort [matSortDisableClear]="true">
       <!-- Title Column -->
       <ng-container matColumnDef="title">
@@ -148,12 +148,11 @@
         </mat-cell>
       </ng-container>
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns" class="cursor-pointer" [routerLink]="['view', row._id]">
-      </mat-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns" class="cursor-pointer" [routerLink]="['view', row._id]"></mat-row>
+      <tr class="mat-row" *matNoDataRow>
+        <td><div class="view-container" i18n>No Feedback Found</div></td>
+      </tr>
     </mat-table>
     <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[5, 10, 20, 50, 100, 200]" i18n></mat-paginator>
   </div>
-  <ng-template #notFoundMessage>
-    <div class="view-container" i18n>No Feedback Found</div>
-  </ng-template>
 </div>
diff --git a/src/app/feedback/feedback.component.ts b/src/app/feedback/feedback.component.ts
@@ -53,7 +53,6 @@ export class FeedbackComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
   user: any = {};
   private onDestroy$ = new Subject<void>();
-  emptyData = false;
   users = [];
   deviceType: DeviceType;
   deviceTypes: typeof DeviceType = DeviceType;
@@ -115,7 +114,6 @@ export class FeedbackComponent implements OnInit, AfterViewInit, OnDestroy {
     const selector = !this.user.isUserAdmin ? { 'owner': this.user.name } : { '_id': { '$gt': null } };
     this.couchService.findAll(this.dbName, findDocuments(selector, 0, [ { 'openTime': 'desc' } ])).subscribe((feedbackData: any[]) => {
       this.feedback.data = feedbackData.map(feedback => ({ ...feedback, user: this.users.find(u => u.doc.name === feedback.owner) }));
-      this.emptyData = !this.feedback.data.length;
       this.dialogsLoadingService.stop();
     }, (error) => this.message = $localize`There is a problem of getting data.`);
   }

diff --git a/src/app/health/health-list.component.html b/src/app/health/health-list.component.html
@@ -10,10 +10,5 @@
 </mat-toolbar>
 
 <div class="space-container">
-  <ng-container *ngIf="!emptyData; else notFoundMessage">
-    <planet-users-table #table [users]="users" [search]="searchValue" [filter]="{}" [(tableState)]="tableState" [displayedColumns]="displayedColumns" containerClass="view-container view-full-height no-toolbar view-table" (tableDataChange)="tableDataChange($event)"></planet-users-table>
-  </ng-container>
-  <ng-template #notFoundMessage>
-    <div class="view-container" i18n>No User Found</div>
-  </ng-template>
+  <planet-users-table #table [users]="users" [search]="searchValue" [filter]="{}" [(tableState)]="tableState" [displayedColumns]="displayedColumns" containerClass="view-container view-full-height no-toolbar view-table" (tableDataChange)="tableDataChange($event)"></planet-users-table>
 </div>
diff --git a/src/app/health/health-list.component.ts b/src/app/health/health-list.component.ts
@@ -16,7 +16,6 @@ export class HealthListComponent implements OnInit, OnDestroy {
   users: any[] = [];
   displayedColumns = [ 'profile', 'name', 'contact', 'birthDate', 'lastVisit' ];
   tableState = new TableState();
-  emptyData = true;
   healthRequests: string[] = [];
 
   constructor(
@@ -29,7 +28,6 @@ export class HealthListComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.usersService.usersListener().pipe(takeUntil(this.onDestroy$)).subscribe(users => {
       this.users = users;
-      this.emptyData = this.users.length === 0;
     });
     this.usersService.requestUserData();
   }

diff --git a/src/app/manager-dashboard/certifications/certifications.component.html b/src/app/manager-dashboard/certifications/certifications.component.html
@@ -15,7 +15,7 @@
   <mat-toolbar class="primary-color font-size-1">
     <a i18n mat-mini-fab routerLink="add"><mat-icon>add</mat-icon></a>
   </mat-toolbar>
-  <div *ngIf="!emptyData; else notFoundMessage" class="view-container view-full-height view-table">
+  <div class="view-container view-full-height view-table">
     <mat-table #table [dataSource]="certifications" matSort [matSortDisableClear]="true">
       <ng-container matColumnDef="name">
         <mat-header-cell i18n *matHeaderCellDef mat-sort-header="name">Certification Name</mat-header-cell>
@@ -34,13 +34,13 @@
       </ng-container>
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row class="cursor-pointer" *matRowDef="let row; columns: displayedColumns;" [routerLink]="[ 'view/' + row._id ]"></mat-row>
+      <tr class="mat-row" *matNoDataRow>
+        <td><div i18n class="view-container" i18n>No Certifications Found</div></td>
+      </tr>
     </mat-table>
     <mat-paginator #paginator
       [pageSize]="50"
       [pageSizeOptions]="[5, 10, 20, 50, 100, 200]">
     </mat-paginator>
   </div>
-  <ng-template #notFoundMessage>
-    <div i18n class="view-container" i18n>No Certifications Found</div>
-  </ng-template>
 </div>
diff --git a/src/app/manager-dashboard/certifications/certifications.component.ts b/src/app/manager-dashboard/certifications/certifications.component.ts
@@ -13,7 +13,6 @@ export class CertificationsComponent implements OnInit, AfterViewInit {
 
   certifications = new MatTableDataSource();
   selection = new SelectionModel(true, []);
-  emptyData = false;
   displayedColumns = [
     'name',
     'action'
@@ -54,7 +53,6 @@ export class CertificationsComponent implements OnInit, AfterViewInit {
   getCertifications() {
     this.certificationsService.getCertifications().subscribe((certifications: any) => {
       this.certifications.data = certifications;
-      this.emptyData = !this.certifications.data.length;
     });
   }
 

diff --git a/src/app/manager-dashboard/manager-fetch.component.html b/src/app/manager-dashboard/manager-fetch.component.html
@@ -11,7 +11,7 @@
     </button>
   </mat-toolbar>
 
-  <div class="view-container view-full-height view-table" *ngIf="!emptyData; else notFoundMessage">
+  <div class="view-container view-full-height view-table">
     <mat-table #table [dataSource]="pushedItems" matSort>
       <ng-container matColumnDef="select">
         <mat-header-cell *matHeaderCellDef>
@@ -41,6 +41,9 @@
       </ng-container>
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns;" class="cursor-pointer" [ngClass]="{highlight:selection.isSelected(row._id)}" (click)="selection.toggle(row._id)"></mat-row>
+      <tr class="mat-row" *matNoDataRow>
+        <td><div class="view-container" i18n>No Record Found</div></td>
+      </tr>
     </mat-table>
 
     <mat-paginator #paginator
@@ -49,7 +52,4 @@
       (page)="onPaginateChange($event)">
     </mat-paginator>
   </div>
-  <ng-template #notFoundMessage>
-    <div class="view-container" i18n>No Record Found</div>
-  </ng-template>
 </div>
diff --git a/src/app/manager-dashboard/manager-fetch.component.ts b/src/app/manager-dashboard/manager-fetch.component.ts
@@ -32,7 +32,6 @@ export class ManagerFetchComponent implements OnInit, AfterViewInit {
   planetConfiguration = this.stateService.configuration;
   displayedColumns = [ 'select', 'item', 'date' ];
   pushedItems = new MatTableDataSource();
-  emptyData = false;
 
   constructor(
     private couchService: CouchService,
@@ -46,7 +45,6 @@ export class ManagerFetchComponent implements OnInit, AfterViewInit {
   ngOnInit() {
     this.managerService.getPushedList().subscribe((pushedList: any) => {
       this.pushedItems.data = pushedList;
-      this.emptyData = !this.pushedItems.data.length;
     });
   }
 

diff --git a/src/app/meetups/meetups.component.html b/src/app/meetups/meetups.component.html
@@ -34,7 +34,7 @@
     </ng-container>
   </mat-toolbar>
 
-  <div class="view-container view-full-height view-table" *ngIf="!emptyData; else notFoundMessage">
+  <div class="view-container view-full-height view-table">
     <mat-table #table [dataSource]="meetups" matSort [matSortDisableClear]="true">
       <ng-container matColumnDef="select">
         <mat-header-cell *matHeaderCellDef>
@@ -103,14 +103,14 @@ <h3 class="header">
       </ng-container>
       <mat-header-row *matHeaderRowDef="displayedColumns" class="hide"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{highlight:selection.isSelected(row._id)}"></mat-row>
+      <tr class="mat-row" *matNoDataRow>
+        <td><div class="view-container" i18n>No Meetups Found</div></td>
+      </tr>
     </mat-table>
     <mat-paginator #paginator
       [pageSize]="50"
       [pageSizeOptions]="[5, 10, 20, 50, 100, 200]"
       (page)="onPaginateChange($event)">
     </mat-paginator>
   </div>
-  <ng-template #notFoundMessage>
-    <div class="view-container" i18n>No Meetups Found</div>
-  </ng-template>
 </div>
diff --git a/src/app/meetups/meetups.component.ts b/src/app/meetups/meetups.component.ts
@@ -43,7 +43,6 @@ export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
   getOpts = this.parent ? { domain: this.stateService.configuration.parentDomain } : {};
   pageEvent: PageEvent;
   currentUser = this.userService.get();
-  emptyData = false;
   selectedNotJoined = 0;
   selectedJoined = 0;
   isAuthorized = false;
@@ -69,7 +68,6 @@ export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
       // Sort in descending createdDate order, so the new meetup can be shown on the top
       meetups.sort((a, b) => b.createdDate - a.createdDate);
       this.meetups.data = meetups;
-      this.emptyData = !this.meetups.data.length;
       this.dialogsLoadingService.stop();
     });
     this.meetupService.updateMeetups({ opts: this.getOpts });

diff --git a/src/app/notifications/notifications.component.html b/src/app/notifications/notifications.component.html
@@ -11,7 +11,7 @@
       </mat-select>
     </mat-form-field>
   </mat-toolbar>
-  <ng-container *ngIf="!emptyData; else notFoundMessage">
+  <ng-container>
     <mat-table #table [dataSource]="notifications">
       <ng-container matColumnDef="message">
         <mat-cell *matCellDef="let element" (click)="readNotification(element)">
@@ -37,13 +37,13 @@
         </mat-cell>
       </ng-container>
       <mat-row *matRowDef="let row; columns: displayedColumns;" ></mat-row>
+      <tr class="mat-row" *matNoDataRow>
+        <td><div class="view-container" i18n>No Notification Found</div></td>
+      </tr>
     </mat-table>
     <mat-paginator #paginator
       [pageSize]="50"
       [pageSizeOptions]="[5, 10, 20, 50, 100, 200]">
     </mat-paginator>
   </ng-container>
-  <ng-template #notFoundMessage>
-    <div class="view-container" i18n>No Notification Found</div>
-  </ng-template>
 </div>
diff --git a/src/app/notifications/notifications.component.ts b/src/app/notifications/notifications.component.ts
@@ -22,7 +22,6 @@ export class NotificationsComponent implements OnInit, AfterViewInit {
   notifications = new MatTableDataSource<any>();
   displayedColumns = [ 'message', 'read' ];
   private onDestroy$ = new Subject<void>();
-  emptyData = false;
   notificationStatus = [ 'All', 'Read', 'Unread' ];
   filter = { 'status': '' };
   anyUnread = true;
@@ -65,7 +64,6 @@ export class NotificationsComponent implements OnInit, AfterViewInit {
     .subscribe(notifications => {
        this.notifications.data = notifications;
        this.anyUnread = this.notifications.data.some(notification => notification.status === 'unread');
-       this.emptyData = !this.notifications.data.length;
     }, (err) => console.log(err.error.reason));
   }
 

diff --git a/src/app/resources/resources.component.html b/src/app/resources/resources.component.html
@@ -103,7 +103,7 @@
     </mat-menu>
   </ng-template>
 
-  <div class="view-container view-full-height view-table" [ngClass]="{'view-with-search':showFilters}" *ngIf="!emptyData; else notFoundMessage">
+  <div class="view-container view-full-height view-table" [ngClass]="{'view-with-search':showFilters}">
     <mat-table #table [dataSource]="resources" [matSortActive]="initialSort" matSortDirection="desc" matSort [matSortDisableClear]="true" [trackBy]="trackById">
       <ng-container matColumnDef="select">
         <mat-header-cell *matHeaderCellDef>
@@ -208,14 +208,14 @@ <h3 class="header">
       </ng-container>
       <mat-header-row *matHeaderRowDef="displayedColumns" class="hide"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{highlight:selection.isSelected(row._id)}"></mat-row>
+      <tr class="mat-row" *matNoDataRow>
+        <td><div class="view-container" i18n>No Resource Found</div></td>
+      </tr>
     </mat-table>
     <mat-paginator #paginator
       [pageSize]="50"
       [pageSizeOptions]="[5, 10, 20, 50, 100, 200]"
       (page)="onPaginateChange($event)">
     </mat-paginator>
   </div>
-  <ng-template #notFoundMessage>
-    <div class="view-container" i18n>No Resource Found</div>
-  </ng-template>
 </div>
diff --git a/src/app/resources/resources.component.ts b/src/app/resources/resources.component.ts
@@ -71,7 +71,6 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
     this.removeFilteredFromSelection();
   }
   myView = this.route.snapshot.data.view;
-  emptyData = false;
   selectedNotAdded = 0;
   selectedAdded = 0;
   selectedSync = [];
@@ -138,7 +137,6 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
             (resource.doc.private === true && (resource.doc.privateFor || {}).users === this.userService.get()._id) :
             resource.doc.private !== true)
       );
-      this.emptyData = !this.resources.data.length;
       this.resources.paginator = this.paginator;
       this.dialogsLoadingService.stop();
     });
@@ -168,7 +166,6 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
 
   removeFilteredFromSelection() {
     this.selection.deselect(...selectedOutOfFilter(this.resources.filteredData, this.selection, this.paginator));
-    this.emptyData = this.resources.filteredData.length === 0;
   }