From ba9bf47a417948f9b9558217fd4c71bdb377efde Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Wed, 11 Jun 2025 06:18:55 -0500
Subject: [PATCH] Refactored a lot of code to move towards signals. Everything
 is generic. Only thing left is the logic for determining which controls to
 show and the localization pipes.

---
 .../app/_pipes/generic-filter-field.pipe.ts   | 12 +++
 .../metadata-builder.component.html           |  4 +-
 .../metadata-builder.component.ts             | 10 +-
 .../metadata-filter-row.component.html        | 15 +--
 .../metadata-filter-row.component.ts          | 99 +++++++++++++------
 .../app/metadata-filter/filter-settings.ts    | 10 +-
 .../metadata-filter.component.html            |  8 +-
 .../metadata-filter.component.ts              | 62 +++++-------
 .../_services/filter-utilities.service.ts     | 39 +++++++-
 9 files changed, 166 insertions(+), 93 deletions(-)
 create mode 100644 UI/Web/src/app/_pipes/generic-filter-field.pipe.ts

diff --git a/UI/Web/src/app/_pipes/generic-filter-field.pipe.ts b/UI/Web/src/app/_pipes/generic-filter-field.pipe.ts
new file mode 100644
index 000000000..8b326aafe
--- /dev/null
+++ b/UI/Web/src/app/_pipes/generic-filter-field.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'genericFilterField'
+})
+export class GenericFilterFieldPipe implements PipeTransform {
+
+  transform(value: unknown, ...args: unknown[]): unknown {
+    return null;
+  }
+
+}
diff --git a/UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.html b/UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.html
index 907944aeb..1fe4aca29 100644
--- a/UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.html
+++ b/UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.html
@@ -24,7 +24,7 @@
           @for (filterStmt of filter.statements; track filterStmt; let i = $index) {
             <div class="row mb-2">
               <div class="col-md-10">
-                <app-metadata-row-filter [index]="i + 100" [preset]="filterStmt" [availableFields]="availableFilterFields" (filterStatement)="updateFilter(i, $event)">
+                <app-metadata-row-filter [preset]="filterStmt" [entityType]="entityType()" (filterStatement)="updateFilter(i, $event)">
                   <div class="col-md-1 ms-2">
                     @if (i < (filter.statements.length - 1) && filter.statements.length > 1) {
                       <button type="button" class="btn btn-icon" #removeBtn [ngbTooltip]="t('remove-rule', {num: i})" (click)="removeFilter(i)">
@@ -59,7 +59,7 @@
           @for (filterStmt of filter.statements; track filterStmt; let i = $index) {
             <div class="row mb-3">
               <div class="col-md-12">
-                <app-metadata-row-filter [index]="i" [preset]="filterStmt" [availableFields]="availableFilterFields" (filterStatement)="updateFilter(i, $event)">
+                <app-metadata-row-filter [preset]="filterStmt" [entityType]="entityType()" (filterStatement)="updateFilter(i, $event)">
                   <div class="col-md-1 ms-2 col-1">
                     @if (i < (filter.statements.length - 1) && filter.statements.length > 1) {
                       <button type="button" class="btn btn-icon" #removeBtn [ngbTooltip]="t('remove-rule')" (click)="removeFilter(i)">
diff --git a/UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.ts b/UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.ts
index 5f39055c5..b9f35db3b 100644
--- a/UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.ts
+++ b/UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.ts
@@ -5,6 +5,7 @@ import {
   DestroyRef,
   EventEmitter,
   inject,
+  input,
   Input,
   OnInit,
   Output
@@ -18,10 +19,10 @@ import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular
 import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
 import {FilterCombination} from "../../../_models/metadata/v2/filter-combination";
 import {FilterUtilitiesService} from "../../../shared/_services/filter-utilities.service";
-import {allSeriesFilterFields} from "../../../_models/metadata/v2/filter-field";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {distinctUntilChanged, tap} from "rxjs/operators";
 import {translate, TranslocoDirective} from "@jsverse/transloco";
+import {ValidFilterEntity} from "../../filter-settings";
 
 @Component({
   selector: 'app-metadata-builder',
@@ -36,14 +37,14 @@ import {translate, TranslocoDirective} from "@jsverse/transloco";
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MetadataBuilderComponent implements OnInit {
+export class MetadataBuilderComponent<TFilter extends number = number, TSort extends number = number> implements OnInit {
 
   @Input({required: true}) filter!: FilterV2<number>;
   /**
    * The number of statements that can be. 0 means unlimited. -1 means none.
    */
   @Input() statementLimit = 0;
-  @Input() availableFilterFields = allSeriesFilterFields;
+  entityType = input.required<ValidFilterEntity>();
   @Output() update: EventEmitter<FilterV2<number>> = new EventEmitter<FilterV2<number>>();
   @Output() apply: EventEmitter<void> = new EventEmitter<void>();
 
@@ -52,7 +53,6 @@ export class MetadataBuilderComponent implements OnInit {
   protected readonly utilityService = inject(UtilityService);
   protected readonly filterUtilityService = inject(FilterUtilitiesService);
   private readonly  destroyRef = inject(DestroyRef);
-  protected readonly Breakpoint = Breakpoint;
 
   formGroup: FormGroup = new FormGroup({});
 
@@ -84,4 +84,6 @@ export class MetadataBuilderComponent implements OnInit {
     this.update.emit(this.filter);
   }
 
+  protected readonly Breakpoint = Breakpoint;
+
 }
diff --git a/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.html b/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.html
index f82f36a42..a91796358 100644
--- a/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.html
+++ b/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.html
@@ -3,7 +3,7 @@
         <div class="row g-0">
             <div class="col-md-3 me-2 col-10 mb-2">
                 <select class="form-select me-2" formControlName="input">
-                  @for (field of availableFields; track field) {
+                  @for (field of filterFieldOptions(); track field) {
                     <option [value]="field">{{field | filterField}}</option>
                   }
                 </select>
@@ -18,7 +18,7 @@
             </div>
 
             <div class="col-md-4 col-10 mb-2">
-              @if (IsEmptySelected) {
+              @if (isEmptySelected()) {
                 @if (predicateType$ | async; as predicateType) {
                   @switch (predicateType) {
                     @case (PredicateType.Text) {
@@ -50,7 +50,7 @@
                         <select2 [data]="opts"
                                  formControlName="filterValue"
                                  [hideSelectedItems]="true"
-                                 [multiple]="MultipleDropdownAllowed"
+                                 [multiple]="isMultiSelectDropdownAllowed()"
                                  [infiniteScroll]="true"
                                  [resettable]="true">
                         </select2>
@@ -62,10 +62,11 @@
             </div>
 
             <div class="col pt-2 ms-2">
-              @if (UiLabel !== null) {
-                <span class="text-muted">{{t(UiLabel.unit)}}</span>
-                @if (UiLabel.tooltip) {
-                  <i class="fa fa-info-circle ms-1" aria-hidden="true" [ngbTooltip]="t(UiLabel.tooltip)"></i>
+              @let label = uiLabel();
+              @if (label !== null) {
+                <span class="text-muted">{{t(label.unit)}}</span>
+                @if (label.tooltip) {
+                  <i class="fa fa-info-circle ms-1" aria-hidden="true" [ngbTooltip]="t(label.tooltip)"></i>
                 }
               }
             </div>
diff --git a/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.ts b/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.ts
index d17df39fb..83c87c2cc 100644
--- a/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.ts
+++ b/UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.ts
@@ -2,28 +2,34 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
   DestroyRef,
   EventEmitter,
   inject,
+  Injector,
+  input,
   Input,
   OnInit,
   Output,
+  Signal,
 } from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {FilterStatement} from '../../../_models/metadata/v2/filter-statement';
-import {BehaviorSubject, distinctUntilChanged, filter, Observable, of, startWith, switchMap, tap} from 'rxjs';
+import {BehaviorSubject, distinctUntilChanged, filter, map, Observable, of, startWith, switchMap, tap} from 'rxjs';
 import {MetadataService} from 'src/app/_services/metadata.service';
 import {FilterComparison} from 'src/app/_models/metadata/v2/filter-comparison';
-import {allSeriesFilterFields, FilterField} from 'src/app/_models/metadata/v2/filter-field';
+import {FilterField} from 'src/app/_models/metadata/v2/filter-field';
 import {AsyncPipe} from "@angular/common";
 import {FilterFieldPipe} from "../../../_pipes/filter-field.pipe";
 import {FilterComparisonPipe} from "../../../_pipes/filter-comparison.pipe";
-import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
+import {takeUntilDestroyed, toSignal} from "@angular/core/rxjs-interop";
 import {Select2, Select2Option} from "ng-select2-component";
 import {NgbDate, NgbDateParserFormatter, NgbInputDatepicker, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
 import {TranslocoDirective, TranslocoService} from "@jsverse/transloco";
 import {MangaFormatPipe} from "../../../_pipes/manga-format.pipe";
 import {AgeRatingPipe} from "../../../_pipes/age-rating.pipe";
+import {ValidFilterEntity} from "../../filter-settings";
+import {FilterUtilitiesService} from "../../../shared/_services/filter-utilities.service";
 
 enum PredicateType {
   Text = 1,
@@ -131,31 +137,25 @@ const BooleanComparisons = [
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MetadataFilterRowComponent implements OnInit {
-
-  protected readonly FilterComparison = FilterComparison;
-  protected readonly PredicateType = PredicateType;
+export class MetadataFilterRowComponent<TFilter extends number = number, TSort extends number = number> implements OnInit {
 
   private readonly cdRef = inject(ChangeDetectorRef);
   private readonly destroyRef = inject(DestroyRef);
   private readonly dateParser = inject(NgbDateParserFormatter);
   private readonly metadataService = inject(MetadataService);
   private readonly translocoService = inject(TranslocoService);
+  private readonly filterUtilitiesService = inject(FilterUtilitiesService);
+  private readonly injector = inject(Injector);
 
-
-  @Input() index: number = 0; // This is only for debugging
   /**
    * Slightly misleading as this is the initial state and will be updated on the filterStatement event emitter
    */
-  @Input() preset!: FilterStatement<number>;
-  @Input() availableFields: Array<FilterField> = allSeriesFilterFields;
-  @Output() filterStatement = new EventEmitter<FilterStatement<number>>();
+  @Input() preset!: FilterStatement<TFilter>;
+  entityType = input.required<ValidFilterEntity>();
+  @Output() filterStatement = new EventEmitter<FilterStatement<TFilter>>();
 
 
-  formGroup: FormGroup = new FormGroup({
-    'comparison': new FormControl<FilterComparison>(FilterComparison.Equal, []),
-    'filterValue': new FormControl<string | number>('', []),
-  });
+  formGroup!: FormGroup;
   validComparisons$: BehaviorSubject<FilterComparison[]> = new BehaviorSubject([FilterComparison.Equal] as FilterComparison[]);
   predicateType$: BehaviorSubject<PredicateType> = new BehaviorSubject(PredicateType.Text as PredicateType);
   dropdownOptions$ = of<Select2Option[]>([]);
@@ -164,25 +164,57 @@ export class MetadataFilterRowComponent implements OnInit {
   private readonly mangaFormatPipe = new MangaFormatPipe(this.translocoService);
   private readonly ageRatingPipe = new AgeRatingPipe();
 
-  get IsEmptySelected() {
-    return parseInt(this.formGroup.get('comparison')?.value + '', 10) !== FilterComparison.IsEmpty;
-  }
 
+  private comparisonSignal!: Signal<FilterComparison>;
+  private inputSignal!: Signal<TFilter>;
 
-  get UiLabel(): FilterRowUi | null {
-    const field = parseInt(this.formGroup.get('input')!.value, 10) as FilterField;
-    if (!unitLabels.has(field)) return null;
-    return unitLabels.get(field) as FilterRowUi;
-  }
-
-  get MultipleDropdownAllowed() {
-    const comp = parseInt(this.formGroup.get('comparison')?.value, 10) as FilterComparison;
-    return comp === FilterComparison.Contains || comp === FilterComparison.NotContains || comp === FilterComparison.MustContains;
-  }
+  isEmptySelected: Signal<boolean> = computed(() => false);
+  uiLabel: Signal<FilterRowUi | null> = computed(() => null);
+  isMultiSelectDropdownAllowed: Signal<boolean> = computed(() => false);
 
+  sortFieldOptions = computed(() => []);
+  filterFieldOptions = computed(() => []);
 
   ngOnInit() {
-    this.formGroup.addControl('input', new FormControl<FilterField>(FilterField.SeriesName, []));
+
+    this.formGroup = new FormGroup({
+      'comparison': new FormControl<FilterComparison>(FilterComparison.Equal, []),
+      'filterValue': new FormControl<string | number>('', []),
+      'input': new FormControl<TFilter>(this.filterUtilitiesService.getDefaultFilterField<TFilter>(this.entityType()), [])
+    });
+
+    this.comparisonSignal = toSignal<FilterComparison>(
+      this.formGroup.get('comparison')!.valueChanges.pipe(
+        startWith(this.formGroup.get('comparison')!.value),
+        map(d => parseInt(d + '', 10) as FilterComparison)
+      )
+      , {requireSync: true, injector: this.injector});
+    this.inputSignal = toSignal<TFilter>(
+      this.formGroup.get('input')!.valueChanges.pipe(
+        startWith(this.formGroup.get('input')!.value),
+        map(d => parseInt(d + '', 10) as TFilter)
+      )
+      , {requireSync: true, injector: this.injector});
+
+    this.isEmptySelected = computed(() => this.comparisonSignal() !== FilterComparison.IsEmpty);
+    this.uiLabel = computed(() => {
+      if (!unitLabels.has(this.inputSignal())) return null;
+      return unitLabels.get(this.inputSignal()) as FilterRowUi;
+    });
+
+    this.isMultiSelectDropdownAllowed = computed(() => {
+      return this.comparisonSignal() === FilterComparison.Contains || this.comparisonSignal() === FilterComparison.NotContains || this.comparisonSignal() === FilterComparison.MustContains;
+    });
+
+    this.sortFieldOptions = computed(() => {
+      return this.filterUtilitiesService.getSortFields(this.entityType());
+    });
+    this.filterFieldOptions = computed(() => {
+      return this.filterUtilitiesService.getFilterFields(this.entityType());
+    });
+
+
+    //this.formGroup.addControl('input', new FormControl<FilterField>(FilterField.SeriesName, []));
 
     this.formGroup.get('input')?.valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe((val: string) => this.handleFieldChange(val));
     this.populateFromPreset();
@@ -215,7 +247,7 @@ export class MetadataFilterRowComponent implements OnInit {
   propagateFilterUpdate() {
     const stmt = {
       comparison: parseInt(this.formGroup.get('comparison')?.value, 10) as FilterComparison,
-      field: parseInt(this.formGroup.get('input')?.value, 10) as FilterField,
+      field: parseInt(this.formGroup.get('input')?.value, 10) as TFilter,
       value: this.formGroup.get('filterValue')?.value!
     };
 
@@ -252,7 +284,7 @@ export class MetadataFilterRowComponent implements OnInit {
       this.formGroup.get('filterValue')?.patchValue(this.dateParser.parse(val));
     }
     else if (DropdownFields.includes(this.preset.field)) {
-      if (this.MultipleDropdownAllowed || val.includes(',')) {
+      if (this.isMultiSelectDropdownAllowed() || val.includes(',')) {
         this.formGroup.get('filterValue')?.patchValue(val.split(',').map(d => parseInt(d, 10)));
       } else {
         if (this.preset.field === FilterField.Languages) {
@@ -383,4 +415,7 @@ export class MetadataFilterRowComponent implements OnInit {
   updateIfDateFilled() {
     this.propagateFilterUpdate();
   }
+
+  protected readonly FilterComparison = FilterComparison;
+  protected readonly PredicateType = PredicateType;
 }
diff --git a/UI/Web/src/app/metadata-filter/filter-settings.ts b/UI/Web/src/app/metadata-filter/filter-settings.ts
index d2ab26614..c9a253d26 100644
--- a/UI/Web/src/app/metadata-filter/filter-settings.ts
+++ b/UI/Web/src/app/metadata-filter/filter-settings.ts
@@ -4,6 +4,11 @@ import {PersonSortField} from "../_models/metadata/v2/person-sort-field";
 import {PersonFilterField} from "../_models/metadata/v2/person-filter-field";
 import {FilterField} from "../_models/metadata/v2/filter-field";
 
+/**
+ * The set of entities that are supported for rich filtering. Each entity must have its own distinct SortField and FilterField enums.
+ */
+export type ValidFilterEntity = 'series' | 'person';
+
 export class FilterSettingsBase<TFilter extends number = number, TSort extends number = number> {
     presetsV2: FilterV2<TFilter, TSort> | undefined;
     sortDisabled = false;
@@ -12,20 +17,21 @@ export class FilterSettingsBase<TFilter extends number = number, TSort extends n
      */
     statementLimit: number = 0;
     saveDisabled: boolean = false;
+    type: ValidFilterEntity = 'series';
 }
 
 /**
  * Filter Settings for Series entity
  */
 export class SeriesFilterSettings extends FilterSettingsBase<FilterField, SortField> {
-  type = 'sortField';
+  type: ValidFilterEntity = 'series';
 }
 
 /**
  * Filter Settings for People entity
  */
 export class PersonFilterSettings extends FilterSettingsBase<PersonFilterField, PersonSortField> {
-  type = 'personSortField';
+  type: ValidFilterEntity = 'person';
 }
 
 
diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.html b/UI/Web/src/app/metadata-filter/metadata-filter.component.html
index add2b4e94..6e5189728 100644
--- a/UI/Web/src/app/metadata-filter/metadata-filter.component.html
+++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.html
@@ -26,8 +26,8 @@
       <div class="filter-section mx-auto pb-3">
         <div class="row justify-content-center g-0">
           <app-metadata-builder [filter]="filterV2"
-                                [availableFilterFields]="allFilterFields"
-                                [statementLimit]="filterSettings.statementLimit"
+                                [entityType]="filterSettings().type"
+                                [statementLimit]="filterSettings().statementLimit"
                                 (update)="handleFilters($event)">
           </app-metadata-builder>
         </div>
@@ -41,7 +41,7 @@
             </div>
             <div class="col-md-3 col-sm-9">
               <label for="sort-options" class="form-label">{{t('sort-by-label')}}</label>
-              <app-sort-button [disabled]="filterSettings.sortDisabled" (update)="updateSortOrder($event)" [isAscending]="isAscendingSort" />
+              <app-sort-button [disabled]="filterSettings().sortDisabled" (update)="updateSortOrder($event)" [isAscending]="isAscendingSort" />
               <select id="sort-options" class="form-select" formControlName="sortField" style="height: 38px;">
                 @for(field of allSortFields; track field.value) {
                   <option [value]="field.value">{{field.title}}</option>
@@ -76,7 +76,7 @@
       <button class="btn btn-primary col-6" (click)="apply()"><i class="fa-solid fa-play me-1" aria-hidden="true"></i>{{t('apply')}}</button>
     </div>
     <div class="col-md-2 col-sm-6 mt-4 pt-2">
-      <button class="btn btn-primary col-12" (click)="save()" [disabled]="filterSettings.saveDisabled || !this.sortGroup.get('name')?.value">
+      <button class="btn btn-primary col-12" (click)="save()" [disabled]="filterSettings().saveDisabled || !this.sortGroup.get('name')?.value">
         <i class="fa-solid fa-floppy-disk" aria-hidden="true"></i>
         {{t('save')}}
       </button>
diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
index 317160d66..d6e362425 100644
--- a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
+++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
@@ -5,6 +5,7 @@ import {
   computed,
   ContentChild,
   DestroyRef,
+  effect,
   EventEmitter,
   inject,
   input,
@@ -25,15 +26,14 @@ import {AsyncPipe, NgClass, NgTemplateOutlet} from '@angular/common';
 import {translate, TranslocoModule, TranslocoService} from "@jsverse/transloco";
 import {SortFieldPipe} from "../_pipes/sort-field.pipe";
 import {MetadataBuilderComponent} from "./_components/metadata-builder/metadata-builder.component";
-import {allSeriesFilterFields, FilterField} from "../_models/metadata/v2/filter-field";
+import {FilterField} from "../_models/metadata/v2/filter-field";
 import {FilterService} from "../_services/filter.service";
 import {ToastrService} from "ngx-toastr";
 import {animate, style, transition, trigger} from "@angular/animations";
 import {SortButtonComponent} from "../_single-module/sort-button/sort-button.component";
-import {FilterUtilitiesService} from "../shared/_services/filter-utilities.service";
 import {FilterSettingsBase} from "./filter-settings";
-import {allPersonSortFields} from "../_models/metadata/v2/person-sort-field";
-import {allPersonFilterFields} from "../_models/metadata/v2/person-filter-field";
+import {FilterUtilitiesService} from "../shared/_services/filter-utilities.service";
+
 
 @Component({
   selector: 'app-metadata-filter',
@@ -57,16 +57,16 @@ import {allPersonFilterFields} from "../_models/metadata/v2/person-filter-field"
     MetadataBuilderComponent, NgClass, SortButtonComponent]
 })
 export class MetadataFilterComponent<TFilter extends number = number, TSort extends number = number> implements OnInit {
-  protected readonly allFilterFields = allSeriesFilterFields;
+
 
   private readonly destroyRef = inject(DestroyRef);
-  private readonly filterUtilityService = inject(FilterUtilitiesService);
   public readonly utilityService = inject(UtilityService);
   private readonly cdRef = inject(ChangeDetectorRef);
   private readonly toastr = inject(ToastrService);
   private readonly filterService = inject(FilterService);
   protected readonly toggleService = inject(ToggleService);
   protected readonly translocoService = inject(TranslocoService);
+  protected readonly filterUtilitiesService = inject(FilterUtilitiesService);
   private readonly sortFieldPipe = new SortFieldPipe(this.translocoService);
 
   protected readonly allSortFields = allSeriesSortFields.map(f => {
@@ -78,26 +78,8 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
    * This toggles the opening/collapsing of the metadata filter code
    */
   @Input() filterOpen: EventEmitter<boolean> = new EventEmitter();
-  /**
-   * Should filtering be shown on the page
-   */
-  @Input() filteringDisabled: boolean = false;
-  //@Input({required: true}) filterSettings!: FilterSettings<T>;
 
-  @Input({required: true}) filterSettings!: FilterSettingsBase<TFilter, TSort>;
-  /**
-   * Entity type derives the Sort and Filter fields
-   */
-  entityType = input<'series' | 'person'>('series');
-
-  sortFieldOptions = computed(() => {
-    if (this.entityType() === 'series') return allSeriesSortFields;
-    return allPersonSortFields;
-  });
-  filterFieldOptions = computed(() => {
-    if (this.entityType() === 'series') return allSeriesFilterFields;
-    return allPersonFilterFields;
-  });
+  filterSettings = input.required<FilterSettingsBase<TFilter, TSort>>();
 
   @Output() applyFilter: EventEmitter<FilterEvent> = new EventEmitter();
   @ContentChild('[ngbCollapse]') collapse!: NgbCollapse;
@@ -116,16 +98,22 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
 
   fullyLoaded: boolean = false;
   filterV2: FilterV2<FilterField> | undefined;
+  sortFieldOptions = computed(() => {
+    return this.filterUtilitiesService.getSortFields(this.filterSettings().type);
+  });
+  filterFieldOptions = computed(() => {
+    return this.filterUtilitiesService.getFilterFields(this.filterSettings().type);
+  });
 
 
+  constructor() {
+    effect(() => {
+      console.log('setting type: ', this.filterSettings().type);
+    })
+  }
 
 
   ngOnInit(): void {
-    if (this.filterSettings === undefined) {
-      this.filterSettings = new FilterSettingsBase<TFilter, TSort>();
-      this.cdRef.markForCheck();
-    }
-
     if (this.filterOpen) {
       this.filterOpen.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(openState => {
         this.filteringCollapsed = !openState;
@@ -179,17 +167,17 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
   loadFromPresetsAndSetup() {
     this.fullyLoaded = false;
 
-    this.filterV2 = this.deepClone(this.filterSettings.presetsV2);
+    this.filterV2 = this.deepClone(this.filterSettings().presetsV2);
 
     const defaultSortField = this.sortFieldOptions()[0];
 
     this.sortGroup = new FormGroup({
-      sortField: new FormControl({value: this.filterV2?.sortOptions?.sortField || defaultSortField, disabled: this.filterSettings.sortDisabled}, []),
+      sortField: new FormControl({value: this.filterV2?.sortOptions?.sortField || defaultSortField, disabled: this.filterSettings().sortDisabled}, []),
       limitTo: new FormControl(this.filterV2?.limitTo || 0, []),
       name: new FormControl(this.filterV2?.name || '', [])
     });
-    if (this.filterSettings?.presetsV2?.sortOptions) {
-      this.isAscendingSort = this.filterSettings?.presetsV2?.sortOptions!.isAscending;
+    if (this.filterSettings()?.presetsV2?.sortOptions) {
+      this.isAscendingSort = this.filterSettings()?.presetsV2?.sortOptions!.isAscending || true;
     }
 
 
@@ -212,7 +200,7 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
 
 
   updateSortOrder(isAscending: boolean) {
-    if (this.filterSettings.sortDisabled) return;
+    if (this.filterSettings().sortDisabled) return;
     this.isAscendingSort = isAscending;
 
     if (this.filterV2?.sortOptions === null) {
@@ -258,10 +246,6 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
     this.cdRef.markForCheck();
   }
 
-  setToggle(event: any) {
-    this.toggleService.set(!this.filteringCollapsed);
-  }
-
 
   protected readonly Breakpoint = Breakpoint;
 }
diff --git a/UI/Web/src/app/shared/_services/filter-utilities.service.ts b/UI/Web/src/app/shared/_services/filter-utilities.service.ts
index 0ffbb76f3..cacabd9d8 100644
--- a/UI/Web/src/app/shared/_services/filter-utilities.service.ts
+++ b/UI/Web/src/app/shared/_services/filter-utilities.service.ts
@@ -1,18 +1,20 @@
 import {inject, Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot, Params, Router} from '@angular/router';
-import {SortField} from 'src/app/_models/metadata/series-filter';
+import {allSeriesSortFields, SortField} from 'src/app/_models/metadata/series-filter';
 import {MetadataService} from "../../_services/metadata.service";
 import {FilterV2} from "../../_models/metadata/v2/filter-v2";
 import {FilterStatement} from "../../_models/metadata/v2/filter-statement";
 import {FilterCombination} from "../../_models/metadata/v2/filter-combination";
-import {FilterField} from "../../_models/metadata/v2/filter-field";
+import {allSeriesFilterFields, FilterField} from "../../_models/metadata/v2/filter-field";
 import {FilterComparison} from "../../_models/metadata/v2/filter-comparison";
 import {HttpClient} from "@angular/common/http";
 import {TextResonse} from "../../_types/text-response";
 import {environment} from "../../../environments/environment";
 import {map, tap} from "rxjs/operators";
 import {Observable, of, switchMap} from "rxjs";
-import {PersonFilterField} from "../../_models/metadata/v2/person-filter-field";
+import {allPersonFilterFields, PersonFilterField} from "../../_models/metadata/v2/person-filter-field";
+import {allPersonSortFields} from "../../_models/metadata/v2/person-sort-field";
+import {ValidFilterEntity} from "../../metadata-filter/filter-settings";
 
 
 @Injectable({
@@ -119,4 +121,35 @@ export class FilterUtilitiesService {
       field: PersonFilterField.Name
     }
   }
+
+  getSortFields<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return allSeriesSortFields as unknown as T[];
+      case 'person':
+        return allPersonSortFields as unknown as T[];
+      default:
+        return [] as T[];
+    }
+  }
+
+  getFilterFields<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return allSeriesFilterFields as unknown as T[];
+      case 'person':
+        return allPersonFilterFields as unknown as T[];
+      default:
+        return [] as T[];
+    }
+  }
+
+  getDefaultFilterField<T extends number>(type: ValidFilterEntity) {
+    switch (type) {
+      case 'series':
+        return FilterField.SeriesName as unknown as T;
+      case 'person':
+        return PersonFilterField.Role as unknown as T;
+    }
+  }
 }