Added Loading Spinner and Searchbox Hint Message To Search Main and Filter View

apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-main-side-view/pickup-shelf-out-main-side-view.component.html

@@ -1,11 +1,11 @@
 <div class="rounded py-10 px-4 text-center shadow-[0_-2px_24px_0_#dce2e9] h-full">
-  <h1 class="text-[1.625rem] font-bold">Bestellpostensuche</h1>
-  <p class="text-lg mt-2 mb-6">
+  <h1 class="text-[1.625rem] font-bold">Warenausgabe</h1>
+  <p class="text-lg mt-2 mb-10">
     Suchen Sie den Bestellposten via <br />
-    Kundenname, ISBN/EAN, Bestellnummer, <br />
-    Vorgang ID, Abholscheinnummer, <br />
-    Abholfachnummer, Kundenkartennummer oder scannen Sie <br />
-    die Kundenkarte.
+    Kundenname, Bestellnummer, Vorgang ID, <br />
+    Abholscheinnummer, Abholfachnummer,<br />
+    Kundenkartennummer oder scannen Sie die <br />
+    Kundenkarte.
   </p>
   <ng-container *ngIf="filter$ | async; let filter">
     <shared-filter-filter-group-main
@@ -18,7 +18,10 @@
         class="block w-full mr-3 desktop-large:mx-auto"
         *ngIf="filter$ | async; let filter"
         [inputGroup]="filter?.input | group: 'main'"
+        [hint]="searchboxHint$ | async"
+        [loading]="fetching$ | async"
         (search)="search(filter)"
+        [showDescription]="false"
         [scanner]="true"
       ></shared-filter-input-group-main>
       <button

apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-main-side-view/pickup-shelf-out-main-side-view.component.ts

@@ -4,7 +4,7 @@ import { Filter, FilterInputGroupMainComponent, FilterModule } from '@shared/com
 import { AsyncPipe, NgIf } from '@angular/common';
 import { IconModule } from '@shared/components/icon';
 import { EnvironmentService } from '@core/environment';
-import { combineLatest } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { isEqual } from 'lodash';
 
@@ -38,6 +38,10 @@ export class PickupShelfOutMainSideViewComponent implements OnInit {
     })
   );
 
+  fetching$: Observable<boolean> = this.store.fetching$;
+
+  searchboxHint$ = this.store.searchboxHint$;
+
   constructor(private _environment: EnvironmentService) {}
 
   ngOnInit() {}

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-filter/pickup-shelf-filter.component.html

@@ -15,16 +15,22 @@
 
     <div class="pickup-shelf-filter-content-main -mt-14 desktop-small:-mt-8 desktop-large:-mt-12">
       <h1 class="text-h3 text-[1.625rem] font-bold text-center pt-6 pb-10">Filter</h1>
-      <shared-filter [filter]="filter" (search)="applyFilter(filter)" [scanner]="true"></shared-filter>
+      <shared-filter
+        [filter]="filter"
+        [loading]="fetching$ | async"
+        (search)="applyFilter(filter)"
+        [hint]="searchboxHint$ | async"
+        [scanner]="true"
+      ></shared-filter>
     </div>
 
     <div class="cta-wrapper">
-      <button class="cta-reset-filter" (click)="resetFilter()">
+      <button class="cta-reset-filter" [disabled]="fetching$ | async" (click)="resetFilter()">
         Filter zurücksetzen
       </button>
 
-      <button class="cta-apply-filter" (click)="applyFilter(filter)">
-        <ui-spinner [show]="false">
+      <button [disabled]="(fetching$ | async) || !hasSelectedOptions(filter)" class="cta-apply-filter" (click)="applyFilter(filter)">
+        <ui-spinner [show]="fetching$ | async">
           Filter anwenden
         </ui-spinner>
       </button>

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-filter/pickup-shelf-filter.component.ts

@@ -8,6 +8,7 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 import { PickUpShelfOutNavigationService } from '@shared/services';
 import { IconModule } from '@shared/components/icon';
 import { UiSpinnerModule } from '@ui/spinner';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'page-pickup-shelf-filter',
@@ -27,6 +28,10 @@ export class PickupShelfFilterComponent {
     return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'side')?.snapshot?.routeConfig?.path;
   }
 
+  fetching$: Observable<boolean> = this.store.fetching$;
+
+  searchboxHint$ = this.store.searchboxHint$;
+
   get showFilterClose$() {
     return this._environment.matchDesktopLarge$.pipe(map((matches) => !(matches && this.sideOutlet === 'search')));
   }
@@ -66,4 +71,13 @@ export class PickupShelfFilterComponent {
   clearFilter(filter: Filter) {
     this.store.setQueryParams({});
   }
+
+  hasSelectedOptions(filter: Filter) {
+    // Is Query available
+    const hasInputOptions = !!filter.input.find((input) => !!input.input.find((fi) => fi.hasFilterInputOptionsSelected()));
+
+    // Are filter or filterChips selected
+    const hasFilterOptions = !!filter.filter.find((input) => !!input.input.find((fi) => fi.hasFilterInputOptionsSelected()));
+    return hasInputOptions || hasFilterOptions;
+  }
 }

apps/page/pickup-shelf/src/lib/store/pickup-shelf.store.ts

@@ -13,7 +13,7 @@ import { ToasterService } from '@shared/shell';
 import { UiModalService } from '@ui/modal';
 
 import * as Selectors from './pickup-shelf.selectors';
-import { Subject } from 'rxjs';
+import { Subject, combineLatest } from 'rxjs';
 import { CacheService } from '@core/cache';
 import { Filter } from '@shared/components/filter';
 
@@ -67,10 +67,16 @@ export class PickupShelfStore extends ComponentStore<PickupShelfState> implement
 
   readonly listHits$ = this.select(Selectors.selectListHits);
 
+  readonly fetching$ = this.select(Selectors.selectFetchingList);
+
   get listHits() {
     return this.get(Selectors.selectListHits);
   }
 
+  searchboxHint$ = combineLatest([this.fetching$, this.listHits$]).pipe(
+    map(([fetching, hits]) => (hits === 0 && !fetching ? 'Keine Suchergebnisse' : ''))
+  );
+
   constructor() {
     // Nicht entfernen sonst wird der Store nicht initialisiert
     super({});