Checkbox Init Implementation, Small Improvements

libs/feature/return/pages/src/lib/main/main-page.component.html

@@ -11,3 +11,7 @@
   inputKey="qs"
   (search)="onSearch()"
 ></filter-search-bar-input>
+
+<!-- TODO: Hier eine Filter Group komponente erstellen die die Buttons nach jeweiligem InputType rendert und anzeigt -->
+<!-- <filter-checkbox-input inputKey="receipt_type"></filter-checkbox-input> -->
+<!-- <filter-datepicker-input inputKey="receipt_date"></filter-datepicker-input> -->

libs/feature/return/pages/src/lib/main/main-page.component.ts

@@ -2,7 +2,11 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ReturnSearchStore } from '@feature/return/services';
 import { injectActivatedProcessId } from '@isa/core/process';
-import { FilterService, SearchBarInputComponent } from '@isa/shared/filter';
+import {
+  FilterService,
+  SearchBarInputComponent,
+  CheckboxInputComponent,
+} from '@isa/shared/filter';
 
 @Component({
   selector: 'lib-return-main-page',
@@ -10,7 +14,7 @@ import { FilterService, SearchBarInputComponent } from '@isa/shared/filter';
   styleUrls: ['./main-page.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [SearchBarInputComponent],
+  imports: [SearchBarInputComponent, CheckboxInputComponent],
 })
 export class MainPageComponent {
   #route = inject(ActivatedRoute);

libs/feature/return/services/src/lib/return-search.store.ts

@@ -26,7 +26,6 @@ export type ReturnSearchEntity = {
   items?: ReceiptListItem[];
   hits?: number;
   error?: string | unknown;
-  scrollPos?: number;
 };
 
 const config = entityConfig({
@@ -41,20 +40,6 @@ export const ReturnSearchStore = signalStore(
     getEntity(processId: number): ReturnSearchEntity | undefined {
       return store.entities().find((e) => e.processId === processId);
     },
-    setScrollPos(processId: number, scrollPos: number) {
-      patchState(
-        store,
-        updateEntity(
-          {
-            id: processId,
-            changes: {
-              scrollPos,
-            },
-          },
-          config,
-        ),
-      );
-    },
   })),
   withMethods((store) => ({
     _getQueryToken({

libs/shared/filter/src/lib/inputs/checkbox-input/checkbox-input.component.html

@@ -0,0 +1,6 @@
+@let inp = input();
+@if (inp) {
+  <ui-checkbox [appearance]="appearance()">
+    <input type="checkbox" />
+  </ui-checkbox>
+}

libs/shared/filter/src/lib/inputs/checkbox-input/checkbox-input.component.ts

@@ -0,0 +1,77 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { IconButtonComponent } from '@isa/ui/buttons';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { isaActionCheck } from '@isa/icons';
+import {
+  FilterService,
+  CheckboxFilterInput,
+  CheckboxFilterInputOption,
+} from '../../core';
+import { InputType } from '../../types';
+import { CheckboxAppearance, CheckboxComponent } from '@isa/ui/input-controls';
+
+@Component({
+  selector: 'filter-checkbox-input',
+  templateUrl: './checkbox-input.component.html',
+  styleUrls: ['./checkbox-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    IconButtonComponent,
+    NgIconComponent,
+    ReactiveFormsModule,
+    CheckboxComponent,
+  ],
+  host: {
+    '[class]': "['filter-checkbox-input', appearanceClass()]",
+  },
+  providers: [provideIcons({ isaActionCheck })],
+})
+export class CheckboxInputComponent {
+  readonly filterService = inject(FilterService);
+
+  //   control = new FormArray();
+
+  inputKey = input.required<string>();
+  appearance = input<CheckboxAppearance>(CheckboxAppearance.Bullet);
+
+  appearanceClass = computed(
+    () => `filter-checkbox-input__${this.appearance()}`,
+  );
+
+  input = computed<CheckboxFilterInput>(() => {
+    const inputs = this.filterService.inputs();
+    const input = inputs.find(
+      (input) =>
+        input.key === this.inputKey() && input.type === InputType.Checkbox,
+    ) as CheckboxFilterInput;
+
+    if (!input) {
+      throw new Error(`Input not found for key: ${this.inputKey()}`);
+    }
+
+    const options = input.options;
+    console.log(input);
+
+    // this.control.setValue(input.value);
+
+    return input;
+  });
+
+  //   options = computed<CheckboxFilterInputOption[]>(() => {
+  //     const options = this.input().options as CheckboxFilterInputOption[];
+
+  //     if (!options) {
+  //       throw new Error(`Options not found for key: ${this.inputKey()}`);
+  //     }
+  //   });
+}

libs/shared/filter/src/lib/inputs/checkbox-input/index.ts

@@ -0,0 +1 @@
+export * from './checkbox-input.component';

libs/shared/filter/src/lib/inputs/index.ts

@@ -1 +1,2 @@
 export * from './search-bar-input';
+export * from './checkbox-input';

libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts

@@ -31,7 +31,6 @@ import { Platform } from '@angular/cdk/platform';
     IconButtonComponent,
     NgIconComponent,
     ReactiveFormsModule,
-    IconButtonComponent,
     UiSearchBarClearComponent,
   ],
   host: {