angular-material: Translate enum for AutocompleteControlRenderer

Author: daniel-shuy

packages/angular-material/src/library/controls/autocomplete.renderer.ts

@@ -34,10 +34,15 @@ import {
   Actions,
   composeWithUi,
   ControlElement,
+  EnumOption,
   isEnumControl,
+  JsonFormsState,
+  mapStateToEnumControlProps,
   OwnPropsOfControl,
+  OwnPropsOfEnum,
   RankedTester,
   rankWith,
+  StatePropsOfControl,
 } from '@jsonforms/core';
 import type { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
@@ -67,12 +72,13 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
         autoActiveFirstOption
         #auto="matAutocomplete"
         (optionSelected)="onSelect($event)"
+        [displayWith]="displayFn"
       >
         <mat-option
           *ngFor="let option of filteredOptions | async"
           [value]="option"
         >
-          {{ option }}
+          {{ option.label }}
         </mat-option>
       </mat-autocomplete>
       <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
@@ -105,16 +111,39 @@ export class AutocompleteControlRenderer
   extends JsonFormsControl
   implements OnInit
 {
-  @Input() options: string[];
-  filteredOptions: Observable<string[]>;
+  @Input() options?: EnumOption[] | string[];
+  valuesToTranslatedOptions?: Map<string, EnumOption>;
+  filteredOptions: Observable<EnumOption[]>;
   shouldFilter: boolean;
   focused = false;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }
+
+  protected mapToProps(
+    state: JsonFormsState
+  ): StatePropsOfControl & OwnPropsOfEnum {
+    return mapStateToEnumControlProps(state, this.getOwnProps());
+  }
+
   getEventValue = (event: any) => event.target.value;
 
+  onChange(ev: any) {
+    const eventValue = this.getEventValue(ev);
+    const option = Array.from(this.valuesToTranslatedOptions?.values()).find(
+      (option) => option.label === eventValue
+    );
+    if (!option) {
+      super.onChange(ev);
+    }
+
+    this.jsonFormsService.updateCore(
+      Actions.update(this.propsPath, () => option.value)
+    );
+    this.triggerValidation();
+  }
+
   ngOnInit() {
     super.ngOnInit();
     this.shouldFilter = false;
@@ -124,6 +153,12 @@ export class AutocompleteControlRenderer
     );
   }
 
+  mapAdditionalProps(_props: StatePropsOfControl & OwnPropsOfEnum) {
+    this.valuesToTranslatedOptions = new Map(
+      _props.options.map((option) => [option.value, option])
+    );
+  }
+
   updateFilter(event: any) {
     // ENTER
     if (event.keyCode === 13) {
@@ -136,30 +171,67 @@ export class AutocompleteControlRenderer
   onSelect(ev: MatAutocompleteSelectedEvent) {
     const path = composeWithUi(this.uischema as ControlElement, this.path);
     this.shouldFilter = false;
-    this.jsonFormsService.updateCore(
-      Actions.update(path, () => ev.option.value)
-    );
+    const option: EnumOption = ev.option.value;
+    this.jsonFormsService.updateCore(Actions.update(path, () => option.value));
     this.triggerValidation();
   }
 
-  filter(val: string): string[] {
-    return (this.options || this.scopedSchema.enum || []).filter(
-      (option) =>
-        !this.shouldFilter ||
-        !val ||
-        option.toLowerCase().indexOf(val.toLowerCase()) === 0
+  // use arrow function to bind "this" reference
+  displayFn = (option?: string | EnumOption): string => {
+    if (!option) {
+      return '';
+    }
+
+    if (typeof option === 'string') {
+      if (!this.valuesToTranslatedOptions) {
+        return '';
+      }
+
+      // if no option matches, it is a manual input
+      return this.valuesToTranslatedOptions.get(option)?.label ?? option;
+    }
+
+    return option?.label ?? '';
+  };
+
+  filter(val: string | EnumOption | undefined): EnumOption[] {
+    const options = Array.from(this.valuesToTranslatedOptions?.values() || []);
+
+    if (!val || !this.shouldFilter) {
+      return options;
+    }
+
+    const label = typeof val === 'string' ? val : val.label;
+    return options.filter((option) =>
+      option.label.toLowerCase().startsWith(label.toLowerCase())
     );
   }
-  protected getOwnProps(): OwnPropsOfAutoComplete {
+  protected getOwnProps(): OwnPropsOfControl & OwnPropsOfEnum {
     return {
       ...super.getOwnProps(),
-      options: this.options,
+      options: this.stringOptionsToEnumOptions(this.options),
     };
   }
-}
 
-export const enumControlTester: RankedTester = rankWith(2, isEnumControl);
+  /**
+   * For {@link options} input backwards compatibility
+   */
+  protected stringOptionsToEnumOptions(
+    options: typeof this.options
+  ): EnumOption[] | undefined {
+    if (!options) {
+      return undefined;
+    }
 
-interface OwnPropsOfAutoComplete extends OwnPropsOfControl {
-  options: string[];
+    return options.every((item) => typeof item === 'string')
+      ? options.map((str) => {
+          return {
+            label: str,
+            value: str,
+          } satisfies EnumOption;
+        })
+      : options;
+  }
 }
+
+export const enumControlTester: RankedTester = rankWith(2, isEnumControl);

packages/angular-material/test/autocomplete-control.spec.ts

@@ -44,15 +44,26 @@ import {
   setupMockStore,
   getJsonFormsService,
 } from './common';
-import { ControlElement, JsonSchema, Actions } from '@jsonforms/core';
+import {
+  ControlElement,
+  JsonSchema,
+  Actions,
+  JsonFormsCore,
+  EnumOption,
+} from '@jsonforms/core';
 import { AutocompleteControlRenderer } from '../src';
 import { JsonFormsAngularService } from '@jsonforms/angular';
 import { ErrorObject } from 'ajv';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing';
 
-const data = { foo: 'A' };
+const data = {
+  foo: {
+    label: 'A',
+    value: 'a',
+  },
+};
 const schema: JsonSchema = {
   type: 'object',
   properties: {
@@ -107,7 +118,10 @@ describe('Autocomplete control Base Tests', () => {
     component.ngOnInit();
     fixture.detectChanges();
     tick();
-    expect(component.data).toBe('A');
+    expect(component.data).toEqual({
+      label: 'A',
+      value: 'a',
+    });
     expect(inputElement.value).toBe('A');
     expect(inputElement.disabled).toBe(false);
   }));
@@ -120,10 +134,20 @@ describe('Autocomplete control Base Tests', () => {
     component.ngOnInit();
     fixture.detectChanges();
     tick();
-    getJsonFormsService(component).updateCore(Actions.update('foo', () => 'B'));
+    getJsonFormsService(component).updateCore(
+      Actions.update('foo', () => {
+        return {
+          label: 'B',
+          value: 'b',
+        } satisfies EnumOption;
+      })
+    );
     tick();
     fixture.detectChanges();
-    expect(component.data).toBe('B');
+    expect(component.data).toEqual({
+      label: 'B',
+      value: 'b',
+    } satisfies EnumOption);
     expect(inputElement.value).toBe('B');
   }));
 
@@ -165,11 +189,28 @@ describe('Autocomplete control Base Tests', () => {
     component.ngOnInit();
     fixture.detectChanges();
     tick();
-    getJsonFormsService(component).updateCore(Actions.update('foo', () => 'A'));
-    getJsonFormsService(component).updateCore(Actions.update('bar', () => 'B'));
+    getJsonFormsService(component).updateCore(
+      Actions.update('foo', () => {
+        return {
+          label: 'A',
+          value: 'a',
+        } satisfies EnumOption;
+      })
+    );
+    getJsonFormsService(component).updateCore(
+      Actions.update('bar', () => {
+        return {
+          label: 'B',
+          value: 'b',
+        } satisfies EnumOption;
+      })
+    );
     fixture.detectChanges();
     tick();
-    expect(component.data).toBe('A');
+    expect(component.data).toEqual({
+      label: 'A',
+      value: 'a',
+    } satisfies EnumOption);
     expect(inputElement.value).toBe('A');
   }));
   // store needed as we evaluate the calculated enabled value to disable/enable the control
@@ -252,7 +293,10 @@ describe('AutoComplete control Input Event Tests', () => {
     const event = spy.calls.mostRecent()
       .args[0] as MatAutocompleteSelectedEvent;
 
-    expect(event.option.value).toBe('B');
+    expect(event.option.value).toEqual({
+      label: 'B',
+      value: 'B',
+    } satisfies EnumOption);
     expect(inputElement.value).toBe('B');
   }));
   it('options should prefer own props', fakeAsync(async () => {
@@ -277,9 +321,58 @@ describe('AutoComplete control Input Event Tests', () => {
 
     const event = spy.calls.mostRecent()
       .args[0] as MatAutocompleteSelectedEvent;
-    expect(event.option.value).toBe('Y');
+    expect(event.option.value).toEqual({
+      label: 'Y',
+      value: 'Y',
+    } satisfies EnumOption);
     expect(inputElement.value).toBe('Y');
   }));
+  it('should render translated enum correctly', fakeAsync(async () => {
+    setupMockStore(fixture, { uischema, schema, data });
+    const state: JsonFormsCore = {
+      data,
+      schema,
+      uischema,
+    };
+    getJsonFormsService(component).init({
+      core: state,
+      i18n: {
+        translate: (key, defaultMessage) => {
+          const translations: { [key: string]: string } = {
+            'foo.A': 'Translated A',
+            'foo.B': 'Translated B',
+            'foo.C': 'Translated C',
+          };
+          return translations[key] ?? defaultMessage;
+        },
+      },
+    });
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
+    component.ngOnInit();
+    fixture.detectChanges();
+    const spy = spyOn(component, 'onSelect');
+
+    await (await loader.getHarness(MatAutocompleteHarness)).focus();
+    fixture.detectChanges();
+
+    await (
+      await loader.getHarness(MatAutocompleteHarness)
+    ).selectOption({
+      text: 'Translated B',
+    });
+    fixture.detectChanges();
+    tick();
+
+    const event = spy.calls.mostRecent()
+      .args[0] as MatAutocompleteSelectedEvent;
+    expect(event.option.value).toEqual({
+      label: 'Translated B',
+      value: 'B',
+    } satisfies EnumOption);
+    expect(inputElement.value).toBe('Translated B');
+  }));
 });
 describe('AutoComplete control Error Tests', () => {
   let fixture: ComponentFixture<AutocompleteControlRenderer>;