From df3072a5a14d962173b543f8b9a770468d90f3fa Mon Sep 17 00:00:00 2001
From: Max Horsche <horsche@li.plus>
Date: Tue, 30 Jan 2024 19:25:56 +0000
Subject: [PATCH] feat: added select control renderer for string and array of
 enums and oneOf

---
 .../example/app/app.component.ts              |   4 +-
 .../src/library/controls/select.renderer.ts   | 195 ++++++++++++++++++
 .../angular-material/src/library/index.ts     |   5 +
 .../angular-material/src/library/module.ts    |   2 +
 packages/examples/src/examples/enum-multi.ts  |  14 ++
 5 files changed, 219 insertions(+), 1 deletion(-)
 create mode 100644 packages/angular-material/src/library/controls/select.renderer.ts

diff --git a/packages/angular-material/example/app/app.component.ts b/packages/angular-material/example/app/app.component.ts
index ecf04458a..ac0a02292 100644
--- a/packages/angular-material/example/app/app.component.ts
+++ b/packages/angular-material/example/app/app.component.ts
@@ -58,7 +58,9 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
   selector: 'app-root',
   template: `
     <h1>Angular Material Examples</h1>
-    Data: {{ selectedExample.data | json }}
+    <p>Data: {{ selectedExample.data | json }}</p>
+    <p>Schema: {{ selectedExample.schema | json }}</p>
+    <p>UI Schema: {{ selectedExample.uischema | json }}</p>
     <div>
       Example:
       <select (change)="onChange($event)">
diff --git a/packages/angular-material/src/library/controls/select.renderer.ts b/packages/angular-material/src/library/controls/select.renderer.ts
new file mode 100644
index 000000000..9662f6521
--- /dev/null
+++ b/packages/angular-material/src/library/controls/select.renderer.ts
@@ -0,0 +1,195 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { MatSelectChange } from '@angular/material/select';
+import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import {
+  Actions,
+  composeWithUi,
+  ControlElement,
+  OwnPropsOfControl,
+  RankedTester,
+  rankWith,
+  or,
+  and,
+  optionIs,
+  isEnumControl,
+  isOneOfEnumControl,
+  JsonSchema,
+  resolveSchema,
+  uiTypeIs,
+  schemaSubPathMatches,
+  hasType,
+  schemaMatches,
+} from '@jsonforms/core';
+
+@Component({
+  selector: 'SelectControlRenderer',
+  template: `
+    <mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
+      <mat-label>{{ label }}</mat-label>
+      <mat-select
+        (selectionChange)="onSelect($event)"
+        [id]="id"
+        [formControl]="form"
+        [multiple]="multiple"
+        (focus)="focused = true"
+        (focusout)="focused = false"
+      >
+        <mat-option *ngIf="!multiple"> <i>None</i> </mat-option>
+        <mat-option
+          *ngFor="let option of optionElements"
+          [value]="option.const"
+          [disabled]="option.disabled ? true : false"
+        >
+          {{ option.label }}
+        </mat-option>
+      </mat-select>
+      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
+        description
+      }}</mat-hint>
+      <mat-error>{{ error }}</mat-error>
+    </mat-form-field>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: row;
+      }
+      mat-form-field {
+        flex: 1 1 auto;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectControlRenderer extends JsonFormsControl implements OnInit {
+  @Input() options: OptionOfSelect[];
+  multiple = false;
+  optionElements: OptionOfSelect[] = [];
+  focused = false;
+  constructor(jsonformsService: JsonFormsAngularService) {
+    super(jsonformsService);
+  }
+  getEventValue = (event: any) => event.target.value || undefined;
+
+  ngOnInit() {
+    super.ngOnInit();
+    let scope: JsonSchema = this.scopedSchema;
+
+    /* allow multiple selections for array type control */
+    if (scope.items) {
+      this.multiple = true;
+      /* change scope to items of the array */
+      scope = scope.items as JsonSchema;
+    }
+    console.log(scope);
+
+    if (this.options) {
+      this.optionElements = this.options;
+    } else {
+      /* Used for enum types */
+      if (scope.enum) {
+        this.optionElements = scope.enum.map((el) => {
+          return { const: el, label: el };
+        });
+      }
+      /* Used for oneOf types */
+      if (scope.oneOf) {
+        this.optionElements = scope.oneOf.map((el) => {
+          return {
+            const: el.const,
+            label: el.title ? el.title : el.const,
+            // disabled: el.readOnly ? true : false,
+          };
+        });
+      }
+    }
+  }
+
+  onSelect(ev: MatSelectChange) {
+    const path = composeWithUi(this.uischema as ControlElement, this.path);
+    this.jsonFormsService.updateCore(Actions.update(path, () => ev.value));
+    this.triggerValidation();
+  }
+
+  protected getOwnProps(): OwnPropsOfSelect {
+    return {
+      ...super.getOwnProps(),
+      options: this.options,
+    };
+  }
+}
+
+const hasOneOfItems = (schema: JsonSchema): boolean =>
+  schema.oneOf !== undefined &&
+  schema.oneOf.length > 0 &&
+  (schema.oneOf as JsonSchema[]).every((entry: JsonSchema) => {
+    return entry.const !== undefined;
+  });
+
+const hasEnumItems = (schema: JsonSchema): boolean =>
+  schema.type === 'string' && schema.enum !== undefined;
+
+export const SelectControlRendererTester: RankedTester = rankWith(
+  5,
+  /* Can be used for simple Enums or OneOf, autocomplete functionallity needs autocomplete.rederer */
+  or(
+    and(or(isEnumControl, isOneOfEnumControl), optionIs('autocomplete', false)),
+    and(
+      uiTypeIs('Control'),
+      and(
+        schemaMatches(
+          (schema) =>
+            hasType(schema, 'array') &&
+            !Array.isArray(schema.items) &&
+            schema.uniqueItems === true
+        ),
+        schemaSubPathMatches('items', (schema, rootSchema) => {
+          const resolvedSchema = schema.$ref
+            ? resolveSchema(rootSchema, schema.$ref, rootSchema)
+            : schema;
+          return hasOneOfItems(resolvedSchema) || hasEnumItems(resolvedSchema);
+        })
+      )
+    )
+  )
+);
+
+interface OptionOfSelect {
+  const: string;
+  label?: string;
+  disabled?: boolean;
+}
+
+interface OwnPropsOfSelect extends OwnPropsOfControl {
+  options: OptionOfSelect[];
+}
diff --git a/packages/angular-material/src/library/index.ts b/packages/angular-material/src/library/index.ts
index 64c286e7d..0f02773e0 100644
--- a/packages/angular-material/src/library/index.ts
+++ b/packages/angular-material/src/library/index.ts
@@ -45,6 +45,10 @@ import {
   RangeControlRenderer,
   RangeControlRendererTester,
 } from './controls/range.renderer';
+import {
+  SelectControlRenderer,
+  SelectControlRendererTester,
+} from './controls/select.renderer';
 import {
   DateControlRenderer,
   DateControlRendererTester,
@@ -104,6 +108,7 @@ export const angularMaterialRenderers: {
   { tester: TextAreaRendererTester, renderer: TextAreaRenderer },
   { tester: NumberControlRendererTester, renderer: NumberControlRenderer },
   { tester: RangeControlRendererTester, renderer: RangeControlRenderer },
+  { tester: SelectControlRendererTester, renderer: SelectControlRenderer },
   { tester: DateControlRendererTester, renderer: DateControlRenderer },
   { tester: ToggleControlRendererTester, renderer: ToggleControlRenderer },
   { tester: enumControlTester, renderer: AutocompleteControlRenderer },
diff --git a/packages/angular-material/src/library/module.ts b/packages/angular-material/src/library/module.ts
index 519322408..5286d74a9 100644
--- a/packages/angular-material/src/library/module.ts
+++ b/packages/angular-material/src/library/module.ts
@@ -50,6 +50,7 @@ import { BooleanControlRenderer } from './controls/boolean.renderer';
 import { DateControlRenderer } from './controls/date.renderer';
 import { NumberControlRenderer } from './controls/number.renderer';
 import { RangeControlRenderer } from './controls/range.renderer';
+import { SelectControlRenderer } from './controls/select.renderer';
 import { TextAreaRenderer } from './controls/textarea.renderer';
 import { TextControlRenderer } from './controls/text.renderer';
 import { ToggleControlRenderer } from './controls/toggle.renderer';
@@ -96,6 +97,7 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
     TextControlRenderer,
     NumberControlRenderer,
     RangeControlRenderer,
+    SelectControlRenderer,
     DateControlRenderer,
     ToggleControlRenderer,
     VerticalLayoutRenderer,
diff --git a/packages/examples/src/examples/enum-multi.ts b/packages/examples/src/examples/enum-multi.ts
index 5a7b235b4..38014f777 100644
--- a/packages/examples/src/examples/enum-multi.ts
+++ b/packages/examples/src/examples/enum-multi.ts
@@ -56,10 +56,24 @@ export const uischema = {
       type: 'Control',
       scope: '#/properties/oneOfMultiEnum',
     },
+    {
+      type: 'Control',
+      scope: '#/properties/oneOfMultiEnum',
+      options: {
+        autocomplete: false,
+      },
+    },
     {
       type: 'Control',
       scope: '#/properties/multiEnum',
     },
+    {
+      type: 'Control',
+      scope: '#/properties/multiEnum',
+      options: {
+        autocomplete: false,
+      },
+    },
   ],
 };