WIP: established functionality of number range filter

Author: christophscheuing

src/app/core/basic-datatypes/number/number-range-filter/number-range-filter.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, SimpleChanges } from "@angular/core";
 import { Entity } from "../../../entity/model/entity";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import {
@@ -24,27 +24,40 @@ export class NumberRangeFilterComponent<T extends Entity> {
   @Input() filterConfig: NumberFilter<T>;
 
   formControl: FormControl<NumericRange>;
+  from: number;
+  to: number;
 
-  private validatorFunction: ValidatorFn = (): ValidationErrors | null => {
-    if (
-      this.formControl.value.from &&
-      this.formControl.value.to &&
-      this.formControl.value.from === this.formControl.value.to
-    ) {
-      return {
-        sameValue: "The from value is the same as the to value.",
-      };
-    } else {
-      return null;
-    }
-  };
-
-  constructor() {
-    this.formControl = new FormControl<NumericRange>({ from: 0, to: 1 });
-    this.formControl.addValidators([this.validatorFunction]);
+  // private validatorFunction: ValidatorFn = (): ValidationErrors | null => {
+  //   if (
+  //     this.formControl.value.from &&
+  //     this.formControl.value.to &&
+  //     this.formControl.value.from === this.formControl.value.to
+  //   ) {
+  //     return {
+  //       sameValue: "The from value is the same as the to value.",
+  //     };
+  //   } else {
+  //     return null;
+  //   }
+  // };
 
+  ngOnInit() {
+    console.log("filterConfig", this.filterConfig);
+    this.formControl = new FormControl<NumericRange>({
+      from: Number(this.filterConfig.selectedOptionValues[0]),
+      to: Number(this.filterConfig.selectedOptionValues[1]),
+    });
     this.formControl.valueChanges.subscribe((value) => {
       console.log(this.formControl.valid, this.formControl.errors);
+
+      this.filterConfig.selectedOptionValues = [
+        this.formControl.value.from?.toString() ?? "",
+        this.formControl.value.to?.toString() ?? "",
+      ];
+
+      this.filterConfig.selectedOptionChange.emit(
+        this.filterConfig.selectedOptionValues,
+      );
     });
   }
 }

src/app/core/basic-datatypes/number/number-range-filter/range-input/range-input.component.ts

@@ -69,7 +69,7 @@ export class RangeInputComponent extends CustomFormControlDirective<NumericRange
   private validatorFunction: ValidatorFn = (): ValidationErrors | null => {
     if (this.value.from && this.value.to && this.value.from > this.value.to) {
       return {
-        fromGreaterThanTo: "The from value is greater than the to value.",
+        fromGreaterThanTo: "The 'from' value is greater than the 'to' value.",
       };
     } else {
       return null;

src/app/core/config/config-fix.ts

@@ -478,7 +478,7 @@ export const defaultJsonConfig = {
           "label": $localize`:Label of schools filter:School`
         },
         {
-          "id": "numbers",
+          "id": "schoolClass",
           "type": "numbers",
           "label": "Classes"
         }

src/app/core/entity-list/EntityListConfig.ts

@@ -72,6 +72,7 @@ export interface GroupConfig {
 export type FilterConfig<T = any> =
   | BasicFilterConfig
   | BooleanFilterConfig
+  | NumberFilterConfig
   | PrebuiltFilterConfig<T>
   | ConfigurableEnumFilterConfig<T>;
 
@@ -86,10 +87,7 @@ export interface BooleanFilterConfig extends BasicFilterConfig {
   true: string;
   false: string;
 }
-export interface NumberFilterConfig extends BasicFilterConfig {
-  true: string;
-  false: string;
-}
+export interface NumberFilterConfig extends BasicFilterConfig {}
 
 export interface PrebuiltFilterConfig<T> extends BasicFilterConfig {
   options: FilterSelectionOption<T>[];

src/app/core/filter/filters/numberFilter.ts

@@ -1,6 +1,6 @@
 import { Entity } from "../../entity/model/entity";
 import { DateRangeFilterConfigOption } from "../../entity-list/EntityListConfig";
-import { DateRange } from "@angular/material/datepicker";
+import { DateRange, NumberRange } from "@angular/material/datepicker";
 import { calculateDateRange } from "../../basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component";
 import moment from "moment";
 import { DataFilter, Filter } from "./filters";
@@ -20,34 +20,39 @@ export class NumberFilter<T extends Entity> extends Filter<T> {
     // public rangeOptions: DateRangeFilterConfigOption[],
   ) {
     super(name, label);
-    // this.selectedOptionValues = [];
+    this.selectedOptionValues = [];
   }
 
   /**
    * Returns the date range according to the selected option or dates
    */
-  // getDateRange(): DateRange<Date> {
-  //   const selectedOption = this.getSelectedOption();
-  //   if (selectedOption) {
-  //     return calculateDateRange(selectedOption);
+  // getNumberRange(): NumberRange<Number> {
+  //   // const selectedOption = this.getSelectedOption();
+  //   // if (selectedOption) {
+  //   //   return calculateDateRange(selectedOption);
+  //   // }
+  //   const values = this.selectedOptionValues;
+  //   if (values?.length == 2) {
+  //     return new NumberRange(values[0], values[1]);
   //   }
-  //   const dates = this.selectedOptionValues;
-  //   if (dates?.length == 2) {
-  //     return this.getDateRangeFromDateStrings(dates[0], dates[1]);
-  //   }
-  //   return new DateRange(undefined, undefined);
+  //   return new NumberRange(undefined, undefined);
   // }
 
   getFilter(): DataFilter<T> {
-    // const range = this.getDateRange();
-    const filterObject: { $gte?: string; $lte?: string } = {};
+    console.log("Peter this.selectedOptionValues", this.selectedOptionValues);
+
+    // const range = this.getNumberRange();
+    const filterObject: { $gte?: number; $lte?: number } = {};
     if (this.selectedOptionValues[0]) {
-      filterObject.$gte = this.selectedOptionValues[0];
+      filterObject.$gte = Number(this.selectedOptionValues[0]);
     }
     if (this.selectedOptionValues[1]) {
-      filterObject.$lte = this.selectedOptionValues[1];
+      filterObject.$lte = Number(this.selectedOptionValues[1]);
     }
     if (filterObject.$gte || filterObject.$lte) {
+      console.log("Peter data filter", {
+        [this.name]: filterObject,
+      } as DataFilter<T>);
       return {
         [this.name]: filterObject,
       } as DataFilter<T>;

src/environments/environment.ts

@@ -32,7 +32,7 @@ export const environment = {
   remoteLoggingDsn: undefined, // only set for production mode in environment.prod.ts
   /** The following settings can be overridden by the `config.json` if present, see {@link AppSettings} */
   demo_mode: true,
-  session_type: SessionType.mock,
+  session_type: SessionType.local,
   account_url: "https://accounts.aam-digital.net",
   email: undefined,
 };