Merge pull request #7526 from opf/feature/30728-Add-no-results-box-for-card-view

[30728] Add "no results" box for card view

[ci skip]

frontend/src/app/components/wp-card-view/wp-card-view.component.html

@@ -71,3 +71,8 @@
   </div>
 </div>
 
+<div *ngIf="showEmptyResultsBox && isResultEmpty">
+  <no-results [title]="text.noResults.title" [description]="text.noResults.description"></no-results>
+</div>
+
+

frontend/src/app/components/wp-card-view/wp-card-view.component.ts

@@ -54,6 +54,8 @@ export class WorkPackageCardViewComponent  implements OnInit {
   @Input() public orientation:CardViewOrientation = 'vertical';
   /** Whether cards are removable */
   @Input() public cardsRemovable:boolean = false;
+  /** Whether a notification box shall be shown when there are no WP to display */
+  @Input() public showEmptyResultsBox:boolean = false;
 
   /** Container reference */
   @ViewChild('container') public container:ElementRef;
@@ -62,11 +64,16 @@ export class WorkPackageCardViewComponent  implements OnInit {
 
   public trackByHref = AngularTrackingHelpers.trackByHrefAndProperty('lockVersion');
   public query:QueryResource;
-  private _workPackages:WorkPackageResource[];
+  private _workPackages:WorkPackageResource[] = [];
+  public isResultEmpty:boolean = false;
   public columns:QueryColumn[];
   public text = {
     removeCard: this.I18n.t('js.card.remove_from_list'),
     addNewCard:  this.I18n.t('js.card.add_new'),
+    noResults: {
+      title: this.I18n.t('js.work_packages.no_results.title'),
+      description: this.I18n.t('js.work_packages.no_results.description')
+    },
   };
 
   /** Inline create / reference properties */
@@ -141,6 +148,7 @@ export class WorkPackageCardViewComponent  implements OnInit {
     ).subscribe((query:QueryResource) => {
       this.query = query;
       this.workPackages = query.results.elements;
+      this.isResultEmpty = this.workPackages.length === 0;
       this.cdRef.detectChanges();
     });
   }

frontend/src/app/components/wp-grid/wp-grid.component.ts

@@ -42,7 +42,8 @@ import {componentDestroyed, untilComponentDestroyed} from "ng2-rx-componentdestr
                   [cardsRemovable]="false"
                   [highlightingMode]="highlightingMode"
                   [showStatusButton]="true"
-                  [orientation]="gridOrientation">
+                  [orientation]="gridOrientation"
+                  [showEmptyResultsBox]="true">
     </wp-card-view>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/app/modules/common/no-results/no-results.component.html

@@ -1,4 +1,5 @@
 <i class="icon-info1" aria-hidden="true"></i>
-<span class="generic-table--no-results-title"
-      [textContent]="title">
+<span class="generic-table--no-results-title">
+  {{ title }}
+  <span *ngIf="description" [textContent]="description"></span>
 </span>

frontend/src/app/modules/common/no-results/no-results.component.ts

@@ -34,8 +34,8 @@ import {Component, Input, HostBinding} from '@angular/core';
 })
 
 export class NoResultsComponent {
-  @Input()
-  title:string;
+  @Input() title:string;
+  @Input() description:string;
 
   @HostBinding('class.generic-table--no-results-container') setHostClass = true;
 }