• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

eclipsesource / jsonforms / 5679494411

pending completion
5679494411

push

github

lucas-koehler
angular-material: Fix unfocused description display for number renderer

The template had a bug closing the ngIf that checks whether the description
is shown too early. This lead to a DOMException and the description to never be shown.

Fix #2166

110 of 179 branches covered (61.45%)

305 of 362 relevant lines covered (84.25%)

13.81 hits per line

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

30.95
/packages/angular-material/src/layouts/array-layout.renderer.ts
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 {
32
  JsonFormsAngularService,
33
  JsonFormsAbstractControl,
34
} from '@jsonforms/angular';
35
import {
36
  ArrayLayoutProps,
37
  ArrayTranslations,
38
  createDefaultValue,
39
  findUISchema,
40
  isObjectArrayWithNesting,
41
  JsonFormsState,
42
  mapDispatchToArrayControlProps,
43
  mapStateToArrayLayoutProps,
44
  OwnPropsOfRenderer,
45
  Paths,
46
  RankedTester,
47
  rankWith,
48
  setReadonly,
49
  StatePropsOfArrayLayout,
50
  UISchemaElement,
51
  UISchemaTester,
52
  unsetReadonly,
53
} from '@jsonforms/core';
54

55
@Component({
56
  selector: 'app-array-layout-renderer',
57
  template: `
58
    <div fxLayout="column" fxLayoutGap="16px" [fxHide]="hidden">
59
      <div [ngClass]="'array-layout-toolbar'">
60
        <h2 [ngClass]="['mat-h2', 'array-layout-title']">{{ label }}</h2>
61
        <span fxFlex></span>
62
        <mat-icon
63
          *ngIf="this.error?.length"
64
          color="warn"
65
          matBadge="{{
66
            this.error.split(
67
              '
68
'
69
            ).length
70
          }}"
71
          matBadgeColor="warn"
72
          matTooltip="{{ this.error }}"
73
          matTooltipClass="error-message-tooltip"
74
        >
75
          error_outline
76
        </mat-icon>
77
        <span fxFlex></span>
78
        <button
79
          mat-button
80
          matTooltip="{{ translations.addTooltip }}"
81
          [disabled]="!isEnabled()"
82
          (click)="add()"
83
          attr.aria-label="{{ translations.addAriaLabel }}"
84
        >
85
          <mat-icon>add</mat-icon>
86
        </button>
87
      </div>
88
      <p *ngIf="noData">{{ translations.noDataMessage }}</p>
89
      <div
90
        *ngFor="
91
          let item of [].constructor(data);
92
          let idx = index;
93
          trackBy: trackByFn;
94
          last as last;
95
          first as first
96
        "
97
      >
98
        <mat-card>
99
          <mat-card-content>
100
            <jsonforms-outlet [renderProps]="getProps(idx)"></jsonforms-outlet>
101
          </mat-card-content>
102
          <mat-card-actions *ngIf="isEnabled()">
103
            <button
104
              *ngIf="uischema?.options?.showSortButtons"
105
              class="item-up"
106
              mat-button
107
              [disabled]="first"
108
              (click)="up(idx)"
109
              attr.aria-label="{{ translations.upAriaLabel }}"
110
              matTooltip="{{ translations.up }}"
111
              matTooltipPosition="right"
112
            >
113
              <mat-icon>arrow_upward</mat-icon>
114
            </button>
115
            <button
116
              *ngIf="uischema?.options?.showSortButtons"
117
              class="item-down"
118
              mat-button
119
              [disabled]="last"
120
              (click)="down(idx)"
121
              attr.aria-label="{{ translations.downAriaLabel }}"
122
              matTooltip="{{ translations.down }}"
123
              matTooltipPosition="right"
124
            >
125
              <mat-icon>arrow_downward</mat-icon>
126
            </button>
127
            <button
128
              mat-button
129
              color="warn"
130
              (click)="remove(idx)"
131
              attr.aria-label="{{ translations.removeAriaLabel }}"
132
              matTooltip="{{ translations.removeTooltip }}"
133
              matTooltipPosition="right"
134
            >
135
              <mat-icon>delete</mat-icon>
136
            </button>
137
          </mat-card-actions>
138
        </mat-card>
139
      </div>
140
    </div>
141
  `,
142
  styles: [
143
    `
144
      .array-layout-toolbar {
145
        display: flex;
146
        align-items: center;
147
      }
148
      .array-layout-title {
149
        margin: 0;
150
      }
151
      ::ng-deep .error-message-tooltip {
152
        white-space: pre-line;
153
      }
154
    `,
155
  ],
156
  changeDetection: ChangeDetectionStrategy.OnPush,
157
})
158
export class ArrayLayoutRenderer
1✔
159
  extends JsonFormsAbstractControl<StatePropsOfArrayLayout>
1✔
160
  implements OnInit, OnDestroy
161
{
162
  noData: boolean;
163
  translations: ArrayTranslations;
164
  addItem: (path: string, value: any) => () => void;
165
  moveItemUp: (path: string, index: number) => () => void;
166
  moveItemDown: (path: string, index: number) => () => void;
167
  removeItems: (path: string, toDelete: number[]) => () => void;
168
  uischemas: {
169
    tester: UISchemaTester;
170
    uischema: UISchemaElement;
171
  }[];
172
  constructor(jsonFormsService: JsonFormsAngularService) {
173
    super(jsonFormsService);
×
174
  }
175
  mapToProps(state: JsonFormsState): StatePropsOfArrayLayout {
1✔
176
    const props = mapStateToArrayLayoutProps(state, this.getOwnProps());
×
177
    return { ...props };
×
178
  }
179
  remove(index: number): void {
1✔
180
    this.removeItems(this.propsPath, [index])();
×
181
  }
182
  add(): void {
1✔
183
    this.addItem(this.propsPath, createDefaultValue(this.scopedSchema))();
×
184
  }
185
  up(index: number): void {
1✔
186
    this.moveItemUp(this.propsPath, index)();
×
187
  }
188
  down(index: number): void {
1✔
189
    this.moveItemDown(this.propsPath, index)();
×
190
  }
191
  ngOnInit() {
1✔
192
    super.ngOnInit();
×
193
    const { addItem, removeItems, moveUp, moveDown } =
×
194
      mapDispatchToArrayControlProps(
×
195
        this.jsonFormsService.updateCore.bind(this.jsonFormsService)
196
      );
197
    this.addItem = addItem;
×
198
    this.moveItemUp = moveUp;
×
199
    this.moveItemDown = moveDown;
×
200
    this.removeItems = removeItems;
×
201
  }
202
  mapAdditionalProps(props: ArrayLayoutProps) {
1✔
203
    this.translations = props.translations;
×
204
    this.noData = !props.data || props.data === 0;
×
205
    this.uischemas = props.uischemas;
×
206
  }
207
  getProps(index: number): OwnPropsOfRenderer {
1✔
208
    const uischema = findUISchema(
×
209
      this.uischemas,
210
      this.scopedSchema,
211
      this.uischema.scope,
212
      this.propsPath,
213
      undefined,
214
      this.uischema,
215
      this.rootSchema
216
    );
217
    if (this.isEnabled()) {
×
218
      unsetReadonly(uischema);
×
219
    } else {
220
      setReadonly(uischema);
×
221
    }
222
    return {
×
223
      schema: this.scopedSchema,
224
      path: Paths.compose(this.propsPath, `${index}`),
225
      uischema,
226
    };
227
  }
228
  trackByFn(index: number) {
1✔
229
    return index;
×
230
  }
231
}
1✔
232

233
export const ArrayLayoutRendererTester: RankedTester = rankWith(
1✔
234
  4,
235
  isObjectArrayWithNesting
236
);
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc