fix(filter): show "select all" and "clear" buttons to facilitate comp…

…lex filter settings (#2245)

closes #2222

---------

Co-authored-by: Sebastian Leidig <sebastian@aam-digital.com>

src/app/core/filter/list-filter/list-filter.component.html

@@ -1,11 +1,22 @@
 <mat-form-field appearance="fill" class="full-width">
   <mat-label>{{ filterConfig.label || filterConfig.name }}</mat-label>
+
   <mat-select
     [id]="filterConfig.name"
     [(value)]="selectedOptions"
     (valueChange)="selectedOptionChange.emit($event)"
     multiple
   >
+    <!-- SELECT ALL / CLEAR -->
+    <div class="flex-row">
+      <button mat-flat-button i18n class="util-button" (click)="selectAll()">
+        Select All
+      </button>
+      <button mat-flat-button i18n class="util-button" (click)="deselectAll()">
+        Clear
+      </button>
+    </div>
+
     @for (option of filterConfig.options; track option.key) {
       <mat-option
         [value]="option.key"

src/app/core/filter/list-filter/list-filter.component.scss

@@ -0,0 +1,5 @@
+.util-button {
+  flex-basis: 50%;
+  border-radius: 0;
+  font-size: 0.8rem;
+}

src/app/core/filter/list-filter/list-filter.component.ts

@@ -6,17 +6,21 @@ import { BorderHighlightDirective } from "../../common-components/border-highlig
 import { JsonPipe, NgForOf } from "@angular/common";
 import { ReactiveFormsModule } from "@angular/forms";
 import { SelectableFilter } from "../filters/filters";
+import { MatButtonModule } from "@angular/material/button";
 
 @Component({
   selector: "app-list-filter",
   templateUrl: "./list-filter.component.html",
+  styleUrls: ["./list-filter.component.scss"],
   imports: [
     MatFormFieldModule,
     MatSelectModule,
     ReactiveFormsModule,
     BorderHighlightDirective,
     NgForOf,
     JsonPipe,
+    MatButtonModule,
+    ReactiveFormsModule,
   ],
   standalone: true,
 })
@@ -25,4 +29,16 @@ export class ListFilterComponent<E extends Entity> {
   filterConfig: SelectableFilter<E>;
   @Input() selectedOptions: string[];
   @Output() selectedOptionChange: EventEmitter<string[]> = new EventEmitter();
+
+  selectAll() {
+    this.selectedOptions = this.filterConfig.options.map(
+      (option) => option.key,
+    );
+    this.selectedOptionChange.emit(this.selectedOptions);
+  }
+
+  deselectAll() {
+    this.selectedOptions = [];
+    this.selectedOptionChange.emit(this.selectedOptions);
+  }
 }

src/app/core/filter/list-filter/list-filter.stories.ts

@@ -0,0 +1,37 @@
+import { applicationConfig, Meta, StoryFn } from "@storybook/angular";
+import { StorybookBaseModule } from "../../../utils/storybook-base.module";
+import { importProvidersFrom } from "@angular/core";
+import { ListFilterComponent } from "./list-filter.component";
+import { Entity } from "../../entity/model/entity";
+import { FilterConfig } from "../../entity-list/EntityListConfig";
+
+export default {
+  title: "Core/> App Layout/Filter",
+  component: ListFilterComponent<Entity>,
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(StorybookBaseModule)],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn<ListFilterComponent<Entity>> = (
+  args: ListFilterComponent<Entity>,
+) => ({
+  component: ListFilterComponent<Entity>,
+  props: args,
+});
+
+const filterConfig: FilterConfig = {
+  id: "isActive",
+  label: "Active",
+  options: [
+    { key: "true", label: "Yes", filter: { isActive: true } },
+    { key: "false", label: "No", filter: { isActive: false } },
+  ],
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  filterConfig,
+};