4697399193

Build Type

push

github

Committed by GitHub

Commit Message

Array translations for react vanilla, angular-material, vue (#2129)

Run Details

110 of 179 branches covered (61.45%)

3 of 3 new or added lines in 3 files covered. (100.0%)

299 of 353 relevant lines covered (84.7%)

14.08 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

31.71

/packages/angular-material/src/layouts/array-layout.renderer.ts

/*
  The MIT License

  Copyright (c) 2017-2020 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,
  OnDestroy,
  OnInit
} from '@angular/core';
import { JsonFormsAngularService, JsonFormsAbstractControl } from '@jsonforms/angular';
import {
  ArrayLayoutProps,
  ArrayTranslations,
  createDefaultValue,
  findUISchema,
  isObjectArrayWithNesting,
  JsonFormsState,
  mapDispatchToArrayControlProps,
  mapStateToArrayLayoutProps,
  OwnPropsOfRenderer,
  Paths,
  RankedTester,
  rankWith,
  setReadonly,
  StatePropsOfArrayLayout,
  UISchemaElement,
  UISchemaTester,
  unsetReadonly
} from '@jsonforms/core';

@Component({
  selector: 'app-array-layout-renderer',
  template: `
    <div fxLayout="column" fxLayoutGap="16px" [fxHide]="hidden">
      <div [ngClass]="'array-layout-toolbar'">
        <h2 [ngClass]="['mat-h2', 'array-layout-title']">{{ label }}</h2>
        <span fxFlex></span>
        <mat-icon
          *ngIf="this.error?.length"
          color="warn"
          matBadge="{{ this.error.split('\n').length }}"
          matBadgeColor="warn"
          matTooltip="{{ this.error }}"
          matTooltipClass="error-message-tooltip"
          >
            error_outline
        </mat-icon>
        <span fxFlex></span>
        <button
          mat-button
          matTooltip="{{ translations.addTooltip }}"
          [disabled]="!isEnabled()"
          (click)="add()"
          attr.aria-label="{{ translations.addAriaLabel }}"
        >
          <mat-icon>add</mat-icon>
        </button>
      </div>
      <p *ngIf="noData">{{ translations.noDataMessage }}</p>
      <div
        *ngFor="
          let item of [].constructor(data);
          let idx = index;
          trackBy: trackByFn;
          last as last;
          first as first
        "
      >
        <mat-card>
          <mat-card-content>
            <jsonforms-outlet [renderProps]="getProps(idx)"></jsonforms-outlet>
          </mat-card-content>
          <mat-card-actions *ngIf="isEnabled()">
          <button
              *ngIf="uischema?.options?.showSortButtons"
              class="item-up"
              mat-button
              [disabled]="first"
              (click)="up(idx)"
              attr.aria-label="{{ translations.upAriaLabel }}"
              matTooltip="{{ translations.up }}"
              matTooltipPosition="right"
            >
              <mat-icon>arrow_upward</mat-icon>
            </button>
            <button
              *ngIf="uischema?.options?.showSortButtons"
              class="item-down"
              mat-button
              [disabled]="last"
              (click)="down(idx)"
              attr.aria-label="{{ translations.downAriaLabel }}"
              matTooltip="{{ translations.down }}"
              matTooltipPosition="right"
            >
              <mat-icon>arrow_downward</mat-icon>
            </button>
            <button
              mat-button
              color="warn"
              (click)="remove(idx)"
              attr.aria-label="{{ translations.removeAriaLabel }}"
              matTooltip="{{ translations.removeTooltip }}"
              matTooltipPosition="right"
            >
              <mat-icon>delete</mat-icon>
            </button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>
  `,
  styles: [
    `.array-layout-toolbar {
       display: flex;
       align-items: center;
      }
      .array-layout-title {
        margin: 0;
      }
      ::ng-deep .error-message-tooltip {
        white-space: pre-line;
      }
      `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ArrayLayoutRenderer
  extends JsonFormsAbstractControl<StatePropsOfArrayLayout>
  implements OnInit, OnDestroy {
  noData: boolean;
  translations: ArrayTranslations;
  addItem: (path: string, value: any) => () => void;
  moveItemUp: (path: string, index: number) => () => void;
  moveItemDown: (path: string, index: number) => () => void;
  removeItems: (path: string, toDelete: number[]) => () => void;
  uischemas: {
    tester: UISchemaTester;
    uischema: UISchemaElement;
  }[];
  constructor(jsonFormsService: JsonFormsAngularService) {
    super(jsonFormsService);
  }
  mapToProps(state: JsonFormsState): StatePropsOfArrayLayout {
    const props = mapStateToArrayLayoutProps(state, this.getOwnProps());
    return { ...props };
  }
  remove(index: number): void {
    this.removeItems(this.propsPath, [index])();
  }
  add(): void {
    this.addItem(this.propsPath, createDefaultValue(this.scopedSchema))();
  }
  up(index: number): void {
    this.moveItemUp(this.propsPath, index)();
  }
  down(index: number): void {
    this.moveItemDown(this.propsPath, index)();
  }
  ngOnInit() {
    super.ngOnInit();
    const { addItem, removeItems, moveUp, moveDown } = mapDispatchToArrayControlProps(
      this.jsonFormsService.updateCore.bind(this.jsonFormsService)
    );
    this.addItem = addItem;
    this.moveItemUp = moveUp;
    this.moveItemDown = moveDown;
    this.removeItems = removeItems;
  }
  mapAdditionalProps(props: ArrayLayoutProps) {
    this.translations = props.translations;
    this.noData = !props.data || props.data === 0;
    this.uischemas = props.uischemas;
  }
  getProps(index: number): OwnPropsOfRenderer {
    const uischema = findUISchema(
      this.uischemas,
      this.scopedSchema,
      this.uischema.scope,
      this.propsPath,
      undefined,
      this.uischema,
      this.rootSchema
    );
    if (this.isEnabled()) {
      unsetReadonly(uischema);
    } else {
      setReadonly(uischema);
    }
    return {
      schema: this.scopedSchema,
      path: Paths.compose(this.propsPath, `${index}`),
      uischema
    };
  }
  trackByFn(index: number) {
    return index;
  }
}

export const ArrayLayoutRendererTester: RankedTester = rankWith(
  4,
  isObjectArrayWithNesting
);

1	/*
2	The MIT License
3
4	Copyright (c) 2017-2020 EclipseSource Munich
5	https://github.com/eclipsesource/jsonforms
6
7	Permission is hereby granted, free of charge, to any person obtaining a copy
8	of this software and associated documentation files (the "Software"), to deal
9	in the Software without restriction, including without limitation the rights
10	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11	copies of the Software, and to permit persons to whom the Software is
12	furnished to do so, subject to the following conditions:
13
14	The above copyright notice and this permission notice shall be included in
15	all copies or substantial portions of the Software.
16
17	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23	THE SOFTWARE.
24	*/
25	import {
26	ChangeDetectionStrategy,
27	Component,
28	OnDestroy,
29	OnInit
30	} from '@angular/core';
31	import { JsonFormsAngularService, JsonFormsAbstractControl } from '@jsonforms/angular';
32	import {
33	ArrayLayoutProps,
34	ArrayTranslations,
35	createDefaultValue,
36	findUISchema,
37	isObjectArrayWithNesting,
38	JsonFormsState,
39	mapDispatchToArrayControlProps,
40	mapStateToArrayLayoutProps,
41	OwnPropsOfRenderer,
42	Paths,
43	RankedTester,
44	rankWith,
45	setReadonly,
46	StatePropsOfArrayLayout,
47	UISchemaElement,
48	UISchemaTester,
49	unsetReadonly
50	} from '@jsonforms/core';
51
52	@Component({
53	selector: 'app-array-layout-renderer',
54	template: `
55	<div fxLayout="column" fxLayoutGap="16px" [fxHide]="hidden">
56	<div [ngClass]="'array-layout-toolbar'">
57	<h2 [ngClass]="['mat-h2', 'array-layout-title']">{{ label }}</h2>
58	<span fxFlex></span>
59	<mat-icon
60	*ngIf="this.error?.length"
61	color="warn"
62	matBadge="{{ this.error.split('\n').length }}"
63	matBadgeColor="warn"
64	matTooltip="{{ this.error }}"
65	matTooltipClass="error-message-tooltip"
66	>
67	error_outline
68	</mat-icon>
69	<span fxFlex></span>
70	<button
71	mat-button
72	matTooltip="{{ translations.addTooltip }}"
73	[disabled]="!isEnabled()"
74	(click)="add()"
75	attr.aria-label="{{ translations.addAriaLabel }}"
76	>
77	<mat-icon>add</mat-icon>
78	</button>
79	</div>
80	<p *ngIf="noData">{{ translations.noDataMessage }}</p>
81	<div
82	*ngFor="
83	let item of [].constructor(data);
84	let idx = index;
85	trackBy: trackByFn;
86	last as last;
87	first as first
88	"
89	>
90	<mat-card>
91	<mat-card-content>
92	<jsonforms-outlet [renderProps]="getProps(idx)"></jsonforms-outlet>
93	</mat-card-content>
94	<mat-card-actions *ngIf="isEnabled()">
95	<button
96	*ngIf="uischema?.options?.showSortButtons"
97	class="item-up"
98	mat-button
99	[disabled]="first"
100	(click)="up(idx)"
101	attr.aria-label="{{ translations.upAriaLabel }}"
102	matTooltip="{{ translations.up }}"
103	matTooltipPosition="right"
104	>
105	<mat-icon>arrow_upward</mat-icon>
106	</button>
107	<button
108	*ngIf="uischema?.options?.showSortButtons"
109	class="item-down"
110	mat-button
111	[disabled]="last"
112	(click)="down(idx)"
113	attr.aria-label="{{ translations.downAriaLabel }}"
114	matTooltip="{{ translations.down }}"
115	matTooltipPosition="right"
116	>
117	<mat-icon>arrow_downward</mat-icon>
118	</button>
119	<button
120	mat-button
121	color="warn"
122	(click)="remove(idx)"
123	attr.aria-label="{{ translations.removeAriaLabel }}"
124	matTooltip="{{ translations.removeTooltip }}"
125	matTooltipPosition="right"
126	>
127	<mat-icon>delete</mat-icon>
128	</button>
129	</mat-card-actions>
130	</mat-card>
131	</div>
132	</div>
133	`,
134	styles: [
135	`.array-layout-toolbar {
136	display: flex;
137	align-items: center;
138	}
139	.array-layout-title {
140	margin: 0;
141	}
142	::ng-deep .error-message-tooltip {
143	white-space: pre-line;
144	}
145	`
146	],
147	changeDetection: ChangeDetectionStrategy.OnPush
148	})
149	export class ArrayLayoutRenderer	1✔
150	extends JsonFormsAbstractControl<StatePropsOfArrayLayout>	1✔
151	implements OnInit, OnDestroy {
152	noData: boolean;
153	translations: ArrayTranslations;
154	addItem: (path: string, value: any) => () => void;
155	moveItemUp: (path: string, index: number) => () => void;
156	moveItemDown: (path: string, index: number) => () => void;
157	removeItems: (path: string, toDelete: number[]) => () => void;
158	uischemas: {
159	tester: UISchemaTester;
160	uischema: UISchemaElement;
161	}[];
162	constructor(jsonFormsService: JsonFormsAngularService) {
163	super(jsonFormsService);	×
164	}
165	mapToProps(state: JsonFormsState): StatePropsOfArrayLayout {	1✔
166	const props = mapStateToArrayLayoutProps(state, this.getOwnProps());	×
167	return { ...props };	×
168	}
169	remove(index: number): void {	1✔
170	this.removeItems(this.propsPath, [index])();	×
171	}
172	add(): void {	1✔
173	this.addItem(this.propsPath, createDefaultValue(this.scopedSchema))();	×
174	}
175	up(index: number): void {	1✔
176	this.moveItemUp(this.propsPath, index)();	×
177	}
178	down(index: number): void {	1✔
179	this.moveItemDown(this.propsPath, index)();	×
180	}
181	ngOnInit() {	1✔
182	super.ngOnInit();	×
183	const { addItem, removeItems, moveUp, moveDown } = mapDispatchToArrayControlProps(	×
184	this.jsonFormsService.updateCore.bind(this.jsonFormsService)
185	);
186	this.addItem = addItem;	×
187	this.moveItemUp = moveUp;	×
188	this.moveItemDown = moveDown;	×
189	this.removeItems = removeItems;	×
190	}
191	mapAdditionalProps(props: ArrayLayoutProps) {	1✔
192	this.translations = props.translations;	×
193	this.noData = !props.data \|\| props.data === 0;	×
194	this.uischemas = props.uischemas;	×
195	}
196	getProps(index: number): OwnPropsOfRenderer {	1✔
197	const uischema = findUISchema(	×
198	this.uischemas,
199	this.scopedSchema,
200	this.uischema.scope,
201	this.propsPath,
202	undefined,
203	this.uischema,
204	this.rootSchema
205	);
206	if (this.isEnabled()) {	×
207	unsetReadonly(uischema);	×
208	} else {
209	setReadonly(uischema);	×
210	}
211	return {	×
212	schema: this.scopedSchema,
213	path: Paths.compose(this.propsPath, `${index}`),
214	uischema
215	};
216	}
217	trackByFn(index: number) {	1✔
218	return index;	×
219	}
220	}	1✔
221
222	export const ArrayLayoutRendererTester: RankedTester = rankWith(	1✔
223	4,
224	isObjectArrayWithNesting
225	);

eclipsesource / jsonforms / 4697399193

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous