Add readonly utility function (eclipsesource#1371)

eneufeld · edgarmueller · commit 2abb9c71fbae · 2019-05-17T11:36:10.000+02:00
* Add support for angular renderers
* Add button to set/unset readonly in example
diff --git a/packages/angular-material/example/app/app.component.ts b/packages/angular-material/example/app/app.component.ts
@@ -24,7 +24,14 @@
 */
 import { NgRedux, select } from '@angular-redux/store';
 import { Component } from '@angular/core';
-import { Actions, JsonFormsState, setLocale } from '@jsonforms/core';
+import {
+  Actions,
+  getUiSchema,
+  JsonFormsState,
+  setLocale,
+  setReadonly,
+  unsetReadonly
+} from '@jsonforms/core';
 import { ExampleDescription } from '@jsonforms/examples';
 import { Observable } from 'rxjs';
 @Component({
@@ -48,13 +55,17 @@ import { Observable } from 'rxjs';
       <button (click)="changeLocale('de-DE')">Change locale to de-DE</button>
       <button (click)="changeLocale('en-US')">Change locale to en-US</button>
       Current locale: {{ currentLocale }}
+      <button (click)="setReadonly()">
+        {{ readonly ? 'Unset' : 'Set' }} Readonly
+      </button>
     </div>
     <jsonforms-outlet></jsonforms-outlet>
   `
 })
 export class AppComponent {
   @select(['examples', 'data']) readonly exampleData$: Observable<any>;
   currentLocale = 'en-US';
+  private readonly = false;
 
   constructor(
     private ngRedux: NgRedux<
@@ -80,4 +91,15 @@ export class AppComponent {
     this.currentLocale = locale;
     this.ngRedux.dispatch(setLocale(locale));
   }
+
+  setReadonly() {
+    const uischema = getUiSchema(this.ngRedux.getState());
+    if (this.readonly) {
+      unsetReadonly(uischema);
+    } else {
+      setReadonly(uischema);
+    }
+    this.readonly = !this.readonly;
+    this.ngRedux.dispatch(Actions.setUISchema(uischema));
+  }
 }
diff --git a/packages/angular-material/example/app/store.ts b/packages/angular-material/example/app/store.ts
@@ -32,7 +32,7 @@ export const rootReducer: Reducer<JsonFormsState> = combineReducers({
   examples: (state: ExampleDescription[] = []) => state
 });
 
-export const initialState: any = {
+export const initialState = {
   jsonforms: {
     renderers: angularMaterialRenderers
   },
diff --git a/packages/angular-material/src/controls/boolean.renderer.ts b/packages/angular-material/src/controls/boolean.renderer.ts
@@ -44,7 +44,7 @@ import {
       <mat-checkbox
         (change)="onChange($event)"
         [checked]="isChecked()"
-        [disabled]="!enabled"
+        [disabled]="!isEnabled()"
         [id]="id"
       >
         {{ label }}
diff --git a/packages/angular-material/src/controls/range.renderer.ts b/packages/angular-material/src/controls/range.renderer.ts
@@ -42,7 +42,7 @@ import {
       <mat-slider
         [value]="data || scopedSchema.default"
         (change)="onChange($event)"
-        [disabled]="!enabled"
+        [disabled]="!isEnabled()"
         [max]="max"
         [min]="min"
         [step]="multipleOf"
diff --git a/packages/angular-material/src/controls/toggle.renderer.ts b/packages/angular-material/src/controls/toggle.renderer.ts
@@ -41,7 +41,7 @@ import {
       <mat-slide-toggle
         (change)="onChange($event)"
         [checked]="isChecked()"
-        [disabled]="!enabled"
+        [disabled]="!isEnabled()"
         [id]="id"
       >
         {{ label }}
diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/other/master-detail/master.ts
@@ -37,6 +37,7 @@ import {
   mapStateToArrayControlProps,
   RankedTester,
   rankWith,
+  setReadonly,
   uiTypeIs
 } from '@jsonforms/core';
 
@@ -75,6 +76,7 @@ export const removeSchemaKeywords = (path: string) => {
               class="button hide"
               (click)="onDeleteClick(i)"
               [ngClass]="{ show: highlightedIdx == i }"
+              *ngIf="isEnabled()"
             >
               <mat-icon mat-list-icon>delete</mat-icon>
             </button>
@@ -85,6 +87,7 @@ export const removeSchemaKeywords = (path: string) => {
           color="primary"
           class="add-button"
           (click)="onAddClick()"
+          *ngIf="isEnabled()"
         >
           <mat-icon aria-label="Add item to list">add</mat-icon>
         </button>
@@ -173,6 +176,9 @@ export class MasterListComponent extends JsonFormsArrayControl {
         props.path,
         'VerticalLayout'
       );
+    if (!this.isEnabled()) {
+      setReadonly(detailUISchema);
+    }
 
     const masterItems = (data || []).map((d: any, index: number) => {
       const labelRefInstancePath = removeSchemaKeywords(
diff --git a/packages/angular-material/src/other/object.renderer.ts b/packages/angular-material/src/other/object.renderer.ts
@@ -35,6 +35,7 @@ import {
   JsonFormsState,
   RankedTester,
   rankWith,
+  setReadonly,
   UISchemaElement
 } from '@jsonforms/core';
 
@@ -69,6 +70,9 @@ export class ObjectControlRenderer extends JsonFormsControlWithDetail {
     } else {
       (this.detailUiSchema as GroupLayout).label = startCase(props.path);
     }
+    if (!this.isEnabled()) {
+      setReadonly(this.detailUiSchema);
+    }
   }
 }
 export const ObjectControlRendererTester: RankedTester = rankWith(
diff --git a/packages/angular/src/abstract-control.ts b/packages/angular/src/abstract-control.ts
@@ -109,7 +109,7 @@ export abstract class JsonFormsAbstractControl<
         this.data = data;
         this.error = errors;
         this.enabled = enabled;
-        this.enabled ? this.form.enable() : this.form.disable();
+        this.isEnabled() ? this.form.enable() : this.form.disable();
         this.hidden = !visible;
         this.scopedSchema = schema;
         this.rootSchema = rootSchema;
@@ -138,6 +138,13 @@ export abstract class JsonFormsAbstractControl<
     }
   }
 
+  isEnabled(): boolean {
+    return (
+      this.enabled &&
+      (this.uischema.options ? !this.uischema.options.readonly : true)
+    );
+  }
+
   protected getOwnProps(): OwnPropsOfControl {
     const props: OwnPropsOfControl = {
       uischema: this.uischema,
diff --git a/packages/core/src/generators/uischema.ts b/packages/core/src/generators/uischema.ts
@@ -29,6 +29,7 @@ import { JsonSchema } from '../models/jsonSchema';
 import {
   ControlElement,
   isGroup,
+  isLayout,
   LabelElement,
   Layout,
   UISchemaElement
@@ -54,9 +55,6 @@ export const createControlElement = (ref: string): ControlElement => ({
   scope: ref
 });
 
-const isLayout = (uischema: UISchemaElement): uischema is Layout =>
-  (uischema as Layout).elements !== undefined;
-
 /**
  * Wraps the given {@code uiSchema} in a Layout if there is none already.
  * @param uischema The ui schema to wrap in a layout.
diff --git a/packages/core/src/models/uischema.ts b/packages/core/src/models/uischema.ts
@@ -137,7 +137,7 @@ export interface UISchemaElement {
   /**
    * Any additional options.
    */
-  options?: any;
+  options?: { [key: string]: any };
 }
 
 /**
@@ -245,3 +245,6 @@ export interface Categorization extends UISchemaElement {
 
 export const isGroup = (layout: Layout): layout is GroupLayout =>
   layout.type === 'Group';
+
+export const isLayout = (uischema: UISchemaElement): uischema is Layout =>
+  (uischema as Layout).elements !== undefined;
diff --git a/packages/core/src/util/index.ts b/packages/core/src/util/index.ts
@@ -142,3 +142,4 @@ export * from './Formatted';
 export * from './ids';
 export * from './validator';
 export * from './combinators';
+export * from './uischema';
diff --git a/packages/core/src/util/uischema.ts b/packages/core/src/util/uischema.ts
@@ -0,0 +1,56 @@
+/*
+  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 isEmpty from 'lodash/isEmpty';
+import { isLayout, UISchemaElement } from '../models/uischema';
+
+export type IterateCallback = (uischema: UISchemaElement) => void;
+
+const setReadonlyPropertyValue = (value: boolean): IterateCallback => (
+  child: UISchemaElement
+): void => {
+  if (!child.options) {
+    child.options = {};
+  }
+  child.options.readonly = value;
+};
+export const setReadonly = (uischema: UISchemaElement): void => {
+  iterateSchema(uischema, setReadonlyPropertyValue(true));
+};
+export const unsetReadonly = (uischema: UISchemaElement): void => {
+  iterateSchema(uischema, setReadonlyPropertyValue(false));
+};
+export const iterateSchema = (
+  uischema: UISchemaElement,
+  toApply: IterateCallback
+): void => {
+  if (isEmpty(uischema)) {
+    return;
+  }
+  if (isLayout(uischema)) {
+    uischema.elements.forEach(child => iterateSchema(child, toApply));
+    return;
+  }
+  toApply(uischema);
+};

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ import {`
`44`	`44`	`<mat-checkbox`
`45`	`45`	`(change)="onChange($event)"`
`46`	`46`	`[checked]="isChecked()"`
`47`		`- [disabled]="!enabled"`
	`47`	`+ [disabled]="!isEnabled()"`
`48`	`48`	`[id]="id"`
`49`	`49`	`>`
`50`	`50`	`{{ label }}`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ import {`
`41`	`41`	`<mat-slide-toggle`
`42`	`42`	`(change)="onChange($event)"`
`43`	`43`	`[checked]="isChecked()"`
`44`		`- [disabled]="!enabled"`
	`44`	`+ [disabled]="!isEnabled()"`
`45`	`45`	`[id]="id"`
`46`	`46`	`>`
`47`	`47`	`{{ label }}`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ import {`
`35`	`35`	`JsonFormsState,`
`36`	`36`	`RankedTester,`
`37`	`37`	`rankWith,`
	`38`	`+ setReadonly,`
`38`	`39`	`UISchemaElement`
`39`	`40`	`} from '@jsonforms/core';`
`40`	`41`
`@@ -69,6 +70,9 @@ export class ObjectControlRenderer extends JsonFormsControlWithDetail {`
`69`	`70`	`} else {`
`70`	`71`	`(this.detailUiSchema as GroupLayout).label = startCase(props.path);`
`71`	`72`	`}`
	`73`	`+ if (!this.isEnabled()) {`
	`74`	`+ setReadonly(this.detailUiSchema);`
	`75`	`+ }`
`72`	`76`	`}`
`73`	`77`	`}`
`74`	`78`	`export const ObjectControlRendererTester: RankedTester = rankWith(`