Merged PR 859: #2205 Reservations Implemented Notification for Empty Result List

#2205 Reservations Implemented Notification for Empty Result List

apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.html

@@ -2,7 +2,13 @@
   <div class="hits">{{ hits$ | async }} Titel</div>
 </div>
 
-<ui-scroll-container [loading]="loading$ | async" (reachEnd)="loadMore()" [deltaEnd]="150" [itemLength]="itemLength$ | async">
+<ui-scroll-container
+  *ngIf="!(listEmpty$ | async); else emptyMessage"
+  [loading]="loading$ | async"
+  (reachEnd)="loadMore()"
+  [deltaEnd]="150"
+  [itemLength]="itemLength$ | async"
+>
   <shared-goods-in-out-order-group *ngFor="let bueryNumberGroup of items$ | async | groupBy: byBuyerNumberFn">
     <ng-container *ngFor="let orderNumberGroup of bueryNumberGroup.items | groupBy: byOrderNumberFn; let lastOrderNumber = last">
       <ng-container
@@ -31,6 +37,13 @@
   </shared-goods-in-out-order-group>
 </ui-scroll-container>
 
+<ng-template #emptyMessage>
+  <div class="empty-message">
+    Es sind im Moment keine Artikel vorhanden, die<br />
+    Reserviert werden sollen.
+  </div>
+</ng-template>
+
 <div class="actions" *ngIf="actions$ | async; let actions">
   <button
     [disabled]="(changeActionLoader$ | async) || (loading$ | async)"

apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss

@@ -10,6 +10,10 @@
   }
 }
 
+.empty-message {
+  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card;
+}
+
 .divider {
   @apply h-px-2;
 }

apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.ts

@@ -27,6 +27,11 @@ export class GoodsInReservationComponent implements OnInit, OnDestroy {
 
   loading$ = this._store.loading$.pipe(shareReplay());
 
+  listEmpty$ = combineLatest([this.loading$, this.hits$]).pipe(
+    map(([loading, hits]) => !loading && hits === 0),
+    shareReplay()
+  );
+
   takeAwayAvailabilities$ = this._store.takeAwayAvailabilities$.pipe(shareReplay());
 
   selectedOrderItemSubsetIds$ = this._store.selectedOrderItemSubsetIds$;