Splitscreen Search Main Design

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

@@ -1,3 +1,11 @@
 :host {
-  @apply block;
+  @apply block bg-white h-split-screen-tablet desktop-small:h-split-screen-desktop;
+}
+
+.page-search-main__filter:active {
+  @apply bg-[#596470] text-white ml-px-5;
+}
+
+::ng-deep page-pickup-shelf-out-main-side-view ui-filter-filter-group-main .ui-filter-chip:not(.selected) {
+  @apply bg-glitter;
 }

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

@@ -1,4 +1,4 @@
-<div class="text-center pt-10 px-8 rounded-card side-view-shadow grow">
+<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">
     Suchen Sie den Bestellposten via <br />
@@ -7,11 +7,30 @@
     Abholfachnummer, Kundenkartennummer oder scannen Sie <br />
     die Kundenkarte.
   </p>
-  <!-- <shared-filter-input-group-main
-      *ngIf="filter$ | async; let filter"
-      [inputGroup]="filter?.input | group: 'main'"
-      (search)="search(filter)"
-      [loading]="fetching$ | async"
-      [hint]="message$ | async"
-    ></shared-filter-input-group-main> -->
+  <ng-container *ngIf="filter$ | async; let filter">
+    <shared-filter-filter-group-main
+      class="mb-8 w-full"
+      *ngIf="!(isDesktop$ | async)"
+      [inputGroup]="filter?.filter | group: 'main'"
+    ></shared-filter-filter-group-main>
+    <div class="flex flex-row px-12 justify-center desktop-large:px-0">
+      <shared-filter-input-group-main
+        class="block w-full mr-3 desktop-large:mx-auto"
+        *ngIf="filter$ | async; let filter"
+        [inputGroup]="filter?.input | group: 'main'"
+        (search)="search(filter)"
+        [scanner]="true"
+      ></shared-filter-input-group-main>
+      <button
+        type="button"
+        *ngIf="!(isDesktop$ | async)"
+        (click)="showFilter.emit()"
+        class="page-pickup-shelf-out-main__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
+        [class.active]="hasFilter$ | async"
+      >
+        <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
+        Filter
+      </button>
+    </div>
+  </ng-container>
 </div>

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

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, ViewChild, inject } from '@angular/core';
+import { PickupShelfStore } from '../../store';
+import { Filter, FilterInputGroupMainComponent, FilterModule } from '@shared/components/filter';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { IconModule } from '@shared/components/icon';
+import { EnvironmentService } from '@core/environment';
+import { combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { isEqual } from 'lodash';
 
 @Component({
   selector: 'page-pickup-shelf-out-main-side-view',
@@ -7,9 +15,35 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page-pickup-shelf-out-main-side-view' },
+  imports: [FilterModule, AsyncPipe, NgIf, IconModule],
 })
 export class PickupShelfOutMainSideViewComponent implements OnInit {
-  constructor() {}
+  @Output() showFilter = new EventEmitter<void>();
+
+  @ViewChild(FilterInputGroupMainComponent, { static: false })
+  sharedFilterInputGroupMain: FilterInputGroupMainComponent;
+
+  store = inject(PickupShelfStore);
+
+  filter$ = this.store.filter$;
+
+  get isDesktop$() {
+    return this._environment.matchDesktopLarge$;
+  }
+
+  hasFilter$ = combineLatest([this.filter$, this.store.defaultFilter$]).pipe(
+    map(([filter, defaultFilter]) => {
+      const filterQueryParams = filter?.getQueryParams();
+      return !isEqual(filterQueryParams, Filter.create(defaultFilter).getQueryParams());
+    })
+  );
+
+  constructor(private _environment: EnvironmentService) {}
 
   ngOnInit() {}
+
+  search(filter: Filter) {
+    this.store.setQueryParams(filter.getQueryParams());
+    this.store.fetchList();
+  }
 }

apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-main/pickup-shelf-out-main.component.css

@@ -1,3 +1,7 @@
 :host {
+  @apply block h-split-screen-tablet desktop-small:h-split-screen-desktop;
+}
+
+.show-filter {
   @apply block;
 }

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

@@ -1 +1,6 @@
-<page-pickup-shelf-filter></page-pickup-shelf-filter>
+<div class="hidden desktop-large:block" [class.show-filter]="showFilter">
+  <page-pickup-shelf-filter (showFilter)="showFilter = false"></page-pickup-shelf-filter>
+</div>
+<div class="desktop-large:hidden" [class.hidden]="showFilter">
+  <page-pickup-shelf-out-main-side-view (showFilter)="showFilter = true"></page-pickup-shelf-out-main-side-view>
+</div>

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

@@ -1,5 +1,7 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { PickupShelfFilterComponent } from '../../shared/pickup-shelf-filter/pickup-shelf-filter.component';
+import { PickupShelfOutMainSideViewComponent } from '../pickup-shelf-out-main-side-view/pickup-shelf-out-main-side-view.component';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'page-pickup-shelf-out-main',
@@ -8,8 +10,18 @@ import { PickupShelfFilterComponent } from '../../shared/pickup-shelf-filter/pic
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page-pickup-shelf-out-main' },
   standalone: true,
-  imports: [PickupShelfFilterComponent],
+  imports: [PickupShelfFilterComponent, PickupShelfOutMainSideViewComponent],
 })
-export class PickupShelfOutMainComponent {
-  constructor() {}
+export class PickupShelfOutMainComponent implements OnInit {
+  showFilter: boolean = false;
+
+  get sideOutlet() {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'side')?.snapshot?.routeConfig?.path;
+  }
+
+  constructor(private _activatedRoute: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.showFilter = this.sideOutlet !== 'search';
+  }
 }

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

@@ -1,7 +1,29 @@
 :host {
-  @apply block bg-white p-4;
+  @apply block bg-white h-split-screen-tablet desktop-small:h-split-screen-desktop;
 }
 
-h1 {
-  @apply text-2xl font-bold text-center pb-6;
+.cta-wrapper {
+  @apply text-center whitespace-nowrap absolute bottom-8 left-1/2 -translate-x-1/2;
+}
+
+.cta-reset-filter,
+.cta-apply-filter {
+  @apply text-lg font-bold px-6 py-[0.85rem] rounded-full border-solid border-2 border-brand outline-none mx-2;
+}
+
+.cta-reset-filter:disabled,
+.cta-apply-filter:disabled {
+  @apply bg-inactive-branch border-inactive-branch cursor-not-allowed text-white;
+}
+
+.cta-reset-filter {
+  @apply bg-white text-brand;
+}
+
+.cta-apply-filter {
+  @apply text-white bg-brand;
+}
+
+::ng-deep page-pickup-shelf-filter shared-filter shared-filter-input-group-main {
+  @apply desktop-large:hidden px-16;
 }

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

@@ -1,9 +1,33 @@
-<div class="text-right">
-  <button type="button" (click)="clearFilter()">Alle Filter entfernen</button>
-</div>
-<h1>Filter</h1>
-<div *ngIf="filter$ | async; let filter">
-  <shared-filter [filter]="filter" (search)="applyFilter(filter)"></shared-filter>
-  <button type="button" (click)="resetFilter()">Filter zurücksetzen</button>
-  <button type="button" (click)="applyFilter(filter)">Filter anwenden</button>
-</div>
+<ng-container *ngIf="filter$ | async; let filter">
+  <div class="pickup-shelf-search-filter-content relative mx-auto p-4">
+    <div class="w-full flex flex-row justify-end items-center">
+      <button (click)="clearFilter(filter)" class="text-[#0556B4] p-4">Alle Filter entfernen</button>
+      <a
+        *ngIf="showFilterClose$ | async"
+        (click)="showFilter.emit()"
+        class="text-black p-4 outline-none border-none bg-transparent"
+        [routerLink]="closeFilterRoute"
+        queryParamsHandling="preserve"
+      >
+        <shared-icon icon="close" [size]="25"></shared-icon>
+      </a>
+    </div>
+
+    <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>
+    </div>
+
+    <div class="cta-wrapper">
+      <button class="cta-reset-filter" (click)="resetFilter()">
+        Filter zurücksetzen
+      </button>
+
+      <button class="cta-apply-filter" (click)="applyFilter(filter)">
+        <ui-spinner [show]="false">
+          Filter anwenden
+        </ui-spinner>
+      </button>
+    </div>
+  </div>
+</ng-container>

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

@@ -1,7 +1,13 @@
-import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, Output, EventEmitter } from '@angular/core';
 import { Filter, FilterModule } from '@shared/components/filter';
 import { PickupShelfStore } from '../../store';
 import { AsyncPipe, NgIf } from '@angular/common';
+import { EnvironmentService } from '@core/environment';
+import { map } from 'rxjs/operators';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { PickUpShelfOutNavigationService } from '@shared/services';
+import { IconModule } from '@shared/components/icon';
+import { UiSpinnerModule } from '@ui/spinner';
 
 @Component({
   selector: 'page-pickup-shelf-filter',
@@ -10,14 +16,43 @@ import { AsyncPipe, NgIf } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page-pickup-shelf-filter' },
   standalone: true,
-  imports: [FilterModule, AsyncPipe, NgIf],
+  imports: [FilterModule, AsyncPipe, NgIf, RouterLink, IconModule, UiSpinnerModule],
 })
 export class PickupShelfFilterComponent {
   store = inject(PickupShelfStore);
 
   filter$ = this.store.filter$;
 
-  constructor() {}
+  get sideOutlet() {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'side')?.snapshot?.routeConfig?.path;
+  }
+
+  get showFilterClose$() {
+    return this._environment.matchDesktopLarge$.pipe(map((matches) => !(matches && this.sideOutlet === 'search')));
+  }
+
+  get closeFilterRoute() {
+    return this._navigation.defaultRoute({ processId: this.store.processId }).path;
+    // const processId = Number(this._activatedRoute?.parent?.snapshot?.data?.processId);
+    // const itemId = this._activatedRoute.snapshot.params.id;
+    // if (!itemId) {
+    //   if (this.sideOutlet === 'search') {
+    //     return this._navigationService.getArticleSearchBasePath(processId).path;
+    //   } else if (this.primaryOutlet === 'results' || this.sideOutlet === 'results') {
+    //     return this._navigationService.getArticleSearchResultsPath(processId).path;
+    //   }
+    // } else {
+    //   return this._navigationService.getArticleDetailsPath({ processId, itemId }).path;
+    // }
+  }
+
+  @Output() showFilter = new EventEmitter<void>();
+
+  constructor(
+    private _environment: EnvironmentService,
+    private _activatedRoute: ActivatedRoute,
+    private _navigation: PickUpShelfOutNavigationService
+  ) {}
 
   resetFilter() {
     this.store.setQueryParams(undefined);
@@ -28,7 +63,7 @@ export class PickupShelfFilterComponent {
     this.store.fetchList();
   }
 
-  clearFilter() {
+  clearFilter(filter: Filter) {
     this.store.setQueryParams({});
   }
 }

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

@@ -38,6 +38,12 @@ export class PickupShelfStore extends ComponentStore<PickupShelfState> implement
     return this.get(Selectors.selectFilter);
   }
 
+  readonly defaultFilter$ = this.select(Selectors.selectDefaultFilter);
+
+  get defaultFilter() {
+    return this.get(Selectors.selectDefaultFilter);
+  }
+
   readonly list$ = this.select(Selectors.selectList);
 
   readonly queryParams$ = this.select(Selectors.selectQueryParams);