Merged PR 1867: #4769 Remi 3.0 - Remission – Scannen und Suchen

- feat(remission-list): Zwischencommit
- feat(ui-input-controls): Adjusted Dropdown Styling and Added Droption Option Disable Class, Refs: #4769
- feat(remission): implement remission list feature shell and category select
- Merge branch 'develop' into feature/4769-Remission-Liste

libs/shared/filter/src/index.ts

@@ -5,3 +5,4 @@ export * from './lib/actions';
 export * from './lib/menus/filter-menu';
 export * from './lib/menus/input-menu';
 export * from './lib/order-by';
+export * from './lib/controls-panel';

libs/shared/filter/src/lib/controls-panel/controls-panel.component.html

@@ -0,0 +1,38 @@
+<div class="w-full flex flex-row justify-between items-start">
+  <filter-search-bar-input
+    class="flex flex-row gap-4 h-12"
+    [appearance]="'results'"
+    inputKey="qs"
+    (triggerSearch)="triggerSearch.emit()"
+    data-what="search-input"
+  ></filter-search-bar-input>
+
+  <div class="flex flex-row gap-4 items-center">
+    <filter-filter-menu-button
+      (applied)="triggerSearch.emit()"
+      [rollbackOnClose]="true"
+    ></filter-filter-menu-button>
+
+    @if (mobileBreakpoint()) {
+      <ui-icon-button
+        type="button"
+        (click)="showOrderByToolbarMobile.set(!showOrderByToolbarMobile())"
+        [class.active]="showOrderByToolbarMobile()"
+        data-what="sort-button-mobile"
+        name="isaActionSort"
+      ></ui-icon-button>
+    } @else {
+      <filter-order-by-toolbar
+        (toggled)="triggerSearch.emit()"
+      ></filter-order-by-toolbar>
+    }
+  </div>
+</div>
+
+@if (mobileBreakpoint() && showOrderByToolbarMobile()) {
+  <filter-order-by-toolbar
+    class="w-full"
+    (toggled)="triggerSearch.emit()"
+    data-what="sort-toolbar-mobile"
+  ></filter-order-by-toolbar>
+}

libs/shared/filter/src/lib/controls-panel/controls-panel.component.scss

@@ -0,0 +1,3 @@
+.filter-controls-panel {
+  @apply flex flex-col gap-4;
+}

libs/shared/filter/src/lib/controls-panel/controls-panel.component.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  linkedSignal,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SearchBarInputComponent } from '../inputs';
+import { FilterMenuButtonComponent } from '../menus/filter-menu';
+import { provideIcons } from '@ng-icons/core';
+import { isaActionFilter, isaActionSort } from '@isa/icons';
+import { IconButtonComponent } from '@isa/ui/buttons';
+import { OrderByToolbarComponent } from '../order-by';
+import { Breakpoint, breakpoint } from '@isa/ui/layout';
+
+@Component({
+  selector: 'filter-controls-panel',
+  templateUrl: './controls-panel.component.html',
+  styleUrls: ['./controls-panel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SearchBarInputComponent,
+    FilterMenuButtonComponent,
+    IconButtonComponent,
+    OrderByToolbarComponent,
+  ],
+  host: {
+    '[class]': "['filter-controls-panel']",
+  },
+  providers: [provideIcons({ isaActionSort, isaActionFilter })],
+})
+export class FilterControlsPanelComponent {
+  triggerSearch = output<void>();
+
+  /** Signal tracking whether the viewport is at tablet size or above */
+  mobileBreakpoint = breakpoint([Breakpoint.Tablet]);
+
+  /**
+   * Signal controlling the visibility of the order-by toolbar on mobile
+   * Initially shows toolbar when NOT on mobile
+   */
+  showOrderByToolbarMobile = linkedSignal(() => !this.mobileBreakpoint());
+}

libs/shared/filter/src/lib/controls-panel/index.ts

@@ -0,0 +1 @@
+export * from './controls-panel.component';

libs/shared/filter/src/lib/menus/input-menu/input-menu-button.component.ts

@@ -8,7 +8,11 @@ import {
   output,
 } from '@angular/core';
 import { FilterInput, FilterService } from '../../core';
-import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import {
+  Overlay,
+  CdkOverlayOrigin,
+  CdkConnectedOverlay,
+} from '@angular/cdk/overlay';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { isaActionChevronDown, isaActionChevronUp } from '@isa/icons';
 import { FilterInputMenuComponent } from './input-menu.component';
@@ -23,7 +27,12 @@ import { FilterInputMenuComponent } from './input-menu.component';
   templateUrl: './input-menu-button.component.html',
   styleUrls: ['./input-menu-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIconComponent, FilterInputMenuComponent, CdkOverlayOrigin, CdkConnectedOverlay],
+  imports: [
+    NgIconComponent,
+    FilterInputMenuComponent,
+    CdkOverlayOrigin,
+    CdkConnectedOverlay,
+  ],
   providers: [provideIcons({ isaActionChevronDown, isaActionChevronUp })],
 })
 export class FilterInputMenuButtonComponent {