ngx-material-entity 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/classes/base-builder.class.d.ts +35 -0
- package/classes/entity-service.class.d.ts +1 -1
- package/classes/entity-utilities.class.d.ts +36 -3
- package/components/confirm-dialog/confirm-dialog-data.builder.d.ts +10 -11
- package/components/confirm-dialog/confirm-dialog-data.d.ts +4 -0
- package/components/confirm-dialog/confirm-dialog.component.d.ts +11 -0
- package/components/input/{array-table/add-array-item-dialog/add-array-item-dialog-data.builder.d.ts → add-array-item-dialog-data.builder.d.ts} +11 -7
- package/components/input/{array-table/add-array-item-dialog/add-array-item-dialog-data.d.ts → add-array-item-dialog-data.d.ts} +5 -2
- package/components/input/input.component.d.ts +100 -7
- package/components/input/input.module.d.ts +6 -4
- package/components/table/create-dialog/create-dialog-data.builder.d.ts +9 -8
- package/components/table/create-dialog/create-entity-dialog-data.builder.d.ts +9 -3
- package/components/table/create-dialog/create-entity-dialog.component.d.ts +15 -3
- package/components/table/edit-dialog/edit-dialog-data.builder.d.ts +9 -11
- package/components/table/edit-dialog/edit-entity-dialog.builder.d.ts +9 -3
- package/components/table/edit-dialog/edit-entity-dialog.component.d.ts +19 -3
- package/components/table/table-data.builder.d.ts +20 -9
- package/components/table/table-data.d.ts +14 -2
- package/components/table/table.component.d.ts +46 -0
- package/components/table/table.module.d.ts +3 -1
- package/decorators/array/array-decorator-internal.data.d.ts +13 -2
- package/decorators/array/array-decorator.data.d.ts +21 -12
- package/decorators/array/array.decorator.d.ts +1 -1
- package/decorators/base/property-decorator-internal.data.d.ts +16 -3
- package/decorators/base/property-decorator.data.d.ts +26 -5
- package/decorators/boolean/boolean-decorator-internal.data.d.ts +9 -0
- package/decorators/boolean/boolean-decorator.data.d.ts +9 -0
- package/decorators/boolean/boolean.decorator.d.ts +1 -1
- package/decorators/number/number-decorator-internal.data.d.ts +6 -0
- package/decorators/number/number-decorator.data.d.ts +6 -0
- package/decorators/number/number.decorator.d.ts +1 -1
- package/decorators/object/object-decorator-internal.data.d.ts +3 -0
- package/decorators/object/object-decorator.data.d.ts +3 -0
- package/decorators/object/object.decorator.d.ts +1 -1
- package/decorators/string/string-decorator-internal.data.d.ts +12 -0
- package/decorators/string/string-decorator.data.d.ts +12 -0
- package/decorators/string/string.decorator.d.ts +1 -1
- package/esm2020/classes/base-builder.class.mjs +43 -0
- package/esm2020/classes/entity-service.class.mjs +2 -2
- package/esm2020/classes/entity-utilities.class.mjs +81 -33
- package/esm2020/components/confirm-dialog/confirm-dialog-data.builder.mjs +15 -48
- package/esm2020/components/confirm-dialog/confirm-dialog-data.mjs +1 -1
- package/esm2020/components/confirm-dialog/confirm-dialog.component.mjs +13 -2
- package/esm2020/components/get-validation-error-message.function.mjs +5 -1
- package/esm2020/components/input/add-array-item-dialog-data.builder.mjs +30 -0
- package/esm2020/components/input/add-array-item-dialog-data.mjs +2 -0
- package/esm2020/components/input/input.component.mjs +170 -31
- package/esm2020/components/input/input.module.mjs +19 -9
- package/esm2020/components/table/create-dialog/create-dialog-data.builder.mjs +18 -40
- package/esm2020/components/table/create-dialog/create-entity-dialog-data.builder.mjs +15 -7
- package/esm2020/components/table/create-dialog/create-entity-dialog.component.mjs +24 -17
- package/esm2020/components/table/create-dialog/create-entity-dialog.module.mjs +20 -4
- package/esm2020/components/table/edit-dialog/edit-dialog-data.builder.mjs +23 -63
- package/esm2020/components/table/edit-dialog/edit-entity-dialog.builder.mjs +15 -7
- package/esm2020/components/table/edit-dialog/edit-entity-dialog.component.mjs +35 -24
- package/esm2020/components/table/table-data.builder.mjs +30 -14
- package/esm2020/components/table/table-data.mjs +1 -1
- package/esm2020/components/table/table.component.mjs +57 -10
- package/esm2020/components/table/table.module.mjs +12 -4
- package/esm2020/decorators/array/array-decorator-internal.data.mjs +15 -4
- package/esm2020/decorators/array/array-decorator.data.mjs +1 -1
- package/esm2020/decorators/array/array.decorator.mjs +2 -2
- package/esm2020/decorators/base/property-decorator-internal.data.mjs +28 -5
- package/esm2020/decorators/base/property-decorator.data.mjs +1 -1
- package/esm2020/decorators/boolean/boolean-decorator-internal.data.mjs +12 -1
- package/esm2020/decorators/boolean/boolean-decorator.data.mjs +1 -1
- package/esm2020/decorators/boolean/boolean.decorator.mjs +2 -2
- package/esm2020/decorators/number/number-decorator-internal.data.mjs +7 -1
- package/esm2020/decorators/number/number-decorator.data.mjs +1 -1
- package/esm2020/decorators/number/number.decorator.mjs +2 -2
- package/esm2020/decorators/object/object-decorator-internal.data.mjs +4 -1
- package/esm2020/decorators/object/object-decorator.data.mjs +1 -1
- package/esm2020/decorators/object/object.decorator.mjs +2 -2
- package/esm2020/decorators/string/string-decorator-internal.data.mjs +13 -1
- package/esm2020/decorators/string/string-decorator.data.mjs +1 -1
- package/esm2020/decorators/string/string.decorator.mjs +2 -2
- package/esm2020/public-api.mjs +1 -1
- package/fesm2015/ngx-material-entity.mjs +708 -703
- package/fesm2015/ngx-material-entity.mjs.map +1 -1
- package/fesm2020/ngx-material-entity.mjs +750 -723
- package/fesm2020/ngx-material-entity.mjs.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +0 -1
- package/components/input/array-table/add-array-item-dialog/add-array-item-dialog.component.d.ts +0 -22
- package/components/input/array-table/add-array-item-dialog/add-array-item-dialog.module.d.ts +0 -12
- package/components/input/array-table/array-table.component.d.ts +0 -34
- package/components/input/array-table/array-table.module.d.ts +0 -19
- package/components/input/internal-input/internal-input.component.d.ts +0 -54
- package/components/input/internal-input/internal-input.module.d.ts +0 -16
- package/esm2020/components/input/array-table/add-array-item-dialog/add-array-item-dialog-data.builder.mjs +0 -33
- package/esm2020/components/input/array-table/add-array-item-dialog/add-array-item-dialog-data.mjs +0 -2
- package/esm2020/components/input/array-table/add-array-item-dialog/add-array-item-dialog.component.mjs +0 -45
- package/esm2020/components/input/array-table/add-array-item-dialog/add-array-item-dialog.module.mjs +0 -22
- package/esm2020/components/input/array-table/array-table.component.mjs +0 -119
- package/esm2020/components/input/array-table/array-table.module.mjs +0 -66
- package/esm2020/components/input/internal-input/internal-input.component.mjs +0 -70
- package/esm2020/components/input/internal-input/internal-input.module.mjs +0 -54
|
@@ -6,37 +6,36 @@ import * as i0 from '@angular/core';
|
|
|
6
6
|
import { Component, Inject, NgModule, Input, ViewChild } from '@angular/core';
|
|
7
7
|
import * as i1 from '@angular/material/dialog';
|
|
8
8
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i6 from '@angular/material/checkbox';
|
|
10
10
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
11
11
|
import * as i3 from '@angular/material/button';
|
|
12
12
|
import { MatButtonModule } from '@angular/material/button';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i11 from '@angular/common';
|
|
14
14
|
import { CommonModule } from '@angular/common';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i13 from '@angular/forms';
|
|
16
16
|
import { FormsModule } from '@angular/forms';
|
|
17
|
-
import * as
|
|
17
|
+
import * as i9 from '@angular/material/table';
|
|
18
|
+
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
19
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
20
|
+
import * as i2 from '@angular/material/form-field';
|
|
18
21
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
19
|
-
import * as
|
|
22
|
+
import * as i3$1 from '@angular/material/autocomplete';
|
|
20
23
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
21
|
-
import * as
|
|
22
|
-
import * as
|
|
24
|
+
import * as i4 from '@angular/material/core';
|
|
25
|
+
import * as i5 from '@angular/material/select';
|
|
23
26
|
import { MatSelectModule } from '@angular/material/select';
|
|
24
|
-
import * as
|
|
27
|
+
import * as i7 from '@angular/material/slide-toggle';
|
|
25
28
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
26
|
-
import
|
|
27
|
-
import * as i4$1 from '@angular/material/table';
|
|
28
|
-
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
29
|
-
import * as i8 from '@angular/material/input';
|
|
30
|
-
import { MatInputModule } from '@angular/material/input';
|
|
31
|
-
import * as i10 from '@angular/cdk/text-field';
|
|
32
|
-
import * as i8$1 from '@angular/material/chips';
|
|
29
|
+
import * as i10 from '@angular/material/chips';
|
|
33
30
|
import { MatChipsModule } from '@angular/material/chips';
|
|
34
|
-
import * as
|
|
31
|
+
import * as i12 from '@angular/material/input';
|
|
32
|
+
import { MatInputModule } from '@angular/material/input';
|
|
33
|
+
import * as i14 from '@angular/cdk/text-field';
|
|
35
34
|
import { MatIconModule } from '@angular/material/icon';
|
|
36
35
|
import * as i7$1 from '@angular/material/paginator';
|
|
37
36
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
38
37
|
import { MatSort } from '@angular/material/sort';
|
|
39
|
-
import * as i4$
|
|
38
|
+
import * as i4$1 from '@angular/material/menu';
|
|
40
39
|
import { MatMenuModule } from '@angular/material/menu';
|
|
41
40
|
|
|
42
41
|
/**
|
|
@@ -73,21 +72,47 @@ var DecoratorTypes;
|
|
|
73
72
|
DecoratorTypes["ARRAY_STRING_AUTOCOMPLETE_CHIPS"] = "arrayStringAutocompleteChips";
|
|
74
73
|
})(DecoratorTypes || (DecoratorTypes = {}));
|
|
75
74
|
|
|
76
|
-
|
|
75
|
+
/**
|
|
76
|
+
* The internal Position. Sets default values and validates user input.
|
|
77
|
+
*/
|
|
78
|
+
class PositionInternal {
|
|
77
79
|
constructor(data) {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
+
this.validateInput(data);
|
|
81
|
+
this.row = data?.row ? data.row : -1;
|
|
82
|
+
this.order = data?.order ? data.order : -1;
|
|
83
|
+
}
|
|
84
|
+
validateInput(data) {
|
|
85
|
+
if (data?.order) {
|
|
86
|
+
if (data.order < 1) {
|
|
87
|
+
throw new Error('order must be at least 1');
|
|
88
|
+
}
|
|
89
|
+
if (data.order > 12) {
|
|
90
|
+
throw new Error('order cannot be bigger than 12 (the minimum value for a bootstrap column)');
|
|
91
|
+
}
|
|
80
92
|
}
|
|
93
|
+
if (data?.row && (data.row < 1)) {
|
|
94
|
+
throw new Error('row must be at least 1');
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* The internal PropertyDecoratorConfig. Sets default values.
|
|
100
|
+
*/
|
|
101
|
+
class PropertyDecoratorConfigInternal {
|
|
102
|
+
constructor(data) {
|
|
81
103
|
this.display = data.display != undefined ? data.display : true;
|
|
82
104
|
this.displayName = data.displayName;
|
|
83
105
|
this.required = data.required != undefined ? data.required : true;
|
|
84
106
|
this.omitForCreate = data.omitForCreate != undefined ? data.omitForCreate : false;
|
|
85
107
|
this.omitForUpdate = data.omitForUpdate != undefined ? data.omitForUpdate : false;
|
|
86
108
|
this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 6, 12];
|
|
87
|
-
this.
|
|
109
|
+
this.position = new PositionInternal(data.position);
|
|
88
110
|
}
|
|
89
111
|
}
|
|
90
112
|
|
|
113
|
+
/**
|
|
114
|
+
* The internal DropdownStringDecoratorConfig. Sets default values.
|
|
115
|
+
*/
|
|
91
116
|
class DropdownStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
92
117
|
constructor(data) {
|
|
93
118
|
super(data);
|
|
@@ -95,6 +120,9 @@ class DropdownStringDecoratorConfigInternal extends PropertyDecoratorConfigInter
|
|
|
95
120
|
this.dropdownValues = data.dropdownValues;
|
|
96
121
|
}
|
|
97
122
|
}
|
|
123
|
+
/**
|
|
124
|
+
* The internal DefaultStringDecoratorConfig. Sets default values.
|
|
125
|
+
*/
|
|
98
126
|
class DefaultStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
99
127
|
constructor(data) {
|
|
100
128
|
super(data);
|
|
@@ -104,6 +132,9 @@ class DefaultStringDecoratorConfigInternal extends PropertyDecoratorConfigIntern
|
|
|
104
132
|
this.regex = data.regex;
|
|
105
133
|
}
|
|
106
134
|
}
|
|
135
|
+
/**
|
|
136
|
+
* The internal TextboxStringDecoratorConfig. Sets default values.
|
|
137
|
+
*/
|
|
107
138
|
class TextboxStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
108
139
|
constructor(data) {
|
|
109
140
|
super(data);
|
|
@@ -112,6 +143,9 @@ class TextboxStringDecoratorConfigInternal extends PropertyDecoratorConfigIntern
|
|
|
112
143
|
this.maxLength = data.maxLength;
|
|
113
144
|
}
|
|
114
145
|
}
|
|
146
|
+
/**
|
|
147
|
+
* The internal AutocompleteStringDecoratorConfig. Sets default values.
|
|
148
|
+
*/
|
|
115
149
|
class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
116
150
|
constructor(data) {
|
|
117
151
|
super(data);
|
|
@@ -124,7 +158,7 @@ class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigI
|
|
|
124
158
|
}
|
|
125
159
|
|
|
126
160
|
/**
|
|
127
|
-
* Decorator for setting and getting string
|
|
161
|
+
* Decorator for setting and getting string Property metadata.
|
|
128
162
|
*
|
|
129
163
|
* @param metadata - The metadata of the string property.
|
|
130
164
|
* @returns The method that defines the metadata.
|
|
@@ -174,8 +208,8 @@ class EntityUtilities {
|
|
|
174
208
|
*/
|
|
175
209
|
static getOmitForUpdate(entity) {
|
|
176
210
|
const res = [];
|
|
177
|
-
for (const key of
|
|
178
|
-
const metadata =
|
|
211
|
+
for (const key of EntityUtilities.keysOf(entity)) {
|
|
212
|
+
const metadata = EntityUtilities.getPropertyMetadata(entity, key);
|
|
179
213
|
if (metadata.omitForUpdate) {
|
|
180
214
|
res.push(key);
|
|
181
215
|
}
|
|
@@ -190,8 +224,8 @@ class EntityUtilities {
|
|
|
190
224
|
*/
|
|
191
225
|
static getOmitForCreate(entity) {
|
|
192
226
|
const res = [];
|
|
193
|
-
for (const key of
|
|
194
|
-
const metadata =
|
|
227
|
+
for (const key of EntityUtilities.keysOf(entity)) {
|
|
228
|
+
const metadata = EntityUtilities.getPropertyMetadata(entity, key);
|
|
195
229
|
if (metadata.omitForCreate) {
|
|
196
230
|
res.push(key);
|
|
197
231
|
}
|
|
@@ -284,7 +318,7 @@ class EntityUtilities {
|
|
|
284
318
|
* Also checks all the validators given by the metadata ("required", "maxLength" etc.).
|
|
285
319
|
*
|
|
286
320
|
* @param entity - The entity to validate.
|
|
287
|
-
* @param omit - Whether to check for
|
|
321
|
+
* @param omit - Whether to check for creating or editing validity.
|
|
288
322
|
* @returns Whether or not the entity is valid.
|
|
289
323
|
*/
|
|
290
324
|
static isEntityValid(entity, omit) {
|
|
@@ -309,7 +343,6 @@ class EntityUtilities {
|
|
|
309
343
|
const metadata = this.getPropertyMetadata(entity, key, type);
|
|
310
344
|
const metadataDefaultString = metadata;
|
|
311
345
|
const metadataTextboxString = metadata;
|
|
312
|
-
const metadataAutocompleteString = metadata;
|
|
313
346
|
const metadataDefaultNumber = metadata;
|
|
314
347
|
const objectProperty = entity[key];
|
|
315
348
|
const metadataEntityArray = metadata;
|
|
@@ -324,7 +357,14 @@ class EntityUtilities {
|
|
|
324
357
|
return false;
|
|
325
358
|
}
|
|
326
359
|
switch (type) {
|
|
360
|
+
case DecoratorTypes.BOOLEAN_DROPDOWN:
|
|
361
|
+
case DecoratorTypes.BOOLEAN_CHECKBOX:
|
|
362
|
+
case DecoratorTypes.BOOLEAN_TOGGLE:
|
|
363
|
+
return true;
|
|
364
|
+
case DecoratorTypes.STRING_DROPDOWN:
|
|
365
|
+
return true;
|
|
327
366
|
case DecoratorTypes.STRING:
|
|
367
|
+
case DecoratorTypes.STRING_AUTOCOMPLETE:
|
|
328
368
|
if (metadataDefaultString.maxLength
|
|
329
369
|
&& entity[key].length > metadataDefaultString.maxLength) {
|
|
330
370
|
return false;
|
|
@@ -338,20 +378,6 @@ class EntityUtilities {
|
|
|
338
378
|
return false;
|
|
339
379
|
}
|
|
340
380
|
break;
|
|
341
|
-
case DecoratorTypes.STRING_AUTOCOMPLETE:
|
|
342
|
-
if (metadataAutocompleteString.maxLength
|
|
343
|
-
&& entity[key].length > metadataAutocompleteString.maxLength) {
|
|
344
|
-
return false;
|
|
345
|
-
}
|
|
346
|
-
if (metadataAutocompleteString.minLength
|
|
347
|
-
&& entity[key].length < metadataAutocompleteString.minLength) {
|
|
348
|
-
return false;
|
|
349
|
-
}
|
|
350
|
-
if (metadataAutocompleteString.regex
|
|
351
|
-
&& !entity[key].match(metadataAutocompleteString.regex)) {
|
|
352
|
-
return false;
|
|
353
|
-
}
|
|
354
|
-
break;
|
|
355
381
|
case DecoratorTypes.STRING_TEXTBOX:
|
|
356
382
|
if (metadataTextboxString.maxLength
|
|
357
383
|
&& entity[key].length > metadataTextboxString.maxLength) {
|
|
@@ -362,6 +388,8 @@ class EntityUtilities {
|
|
|
362
388
|
return false;
|
|
363
389
|
}
|
|
364
390
|
break;
|
|
391
|
+
case DecoratorTypes.NUMBER_DROPDOWN:
|
|
392
|
+
return true;
|
|
365
393
|
case DecoratorTypes.NUMBER:
|
|
366
394
|
if (metadataDefaultNumber.max && entity[key] > metadataDefaultNumber.max) {
|
|
367
395
|
return false;
|
|
@@ -436,31 +464,29 @@ class EntityUtilities {
|
|
|
436
464
|
* @returns 0 if both values have the same order, a negative value if X, a positive value if Y.
|
|
437
465
|
*/
|
|
438
466
|
static compareOrder(a, b, entity) {
|
|
439
|
-
const metadataA = EntityUtilities.getPropertyMetadata(entity, a
|
|
440
|
-
const metadataB = EntityUtilities.getPropertyMetadata(entity, b
|
|
441
|
-
if (metadataA.order === -1) {
|
|
442
|
-
if (metadataB.order === -1) {
|
|
467
|
+
const metadataA = EntityUtilities.getPropertyMetadata(entity, a);
|
|
468
|
+
const metadataB = EntityUtilities.getPropertyMetadata(entity, b);
|
|
469
|
+
if (metadataA.position.order === -1) {
|
|
470
|
+
if (metadataB.position.order === -1) {
|
|
443
471
|
return 0;
|
|
444
472
|
}
|
|
445
473
|
return 1;
|
|
446
474
|
}
|
|
447
|
-
else if (metadataB.order === -1) {
|
|
475
|
+
else if (metadataB.position.order === -1) {
|
|
448
476
|
return -1;
|
|
449
477
|
}
|
|
450
|
-
return ((metadataA.order) - (metadataB.order));
|
|
478
|
+
return ((metadataA.position.order) - (metadataB.position.order));
|
|
451
479
|
}
|
|
452
480
|
/**
|
|
453
481
|
* Gets the bootstrap column values for "lg", "md", "sm".
|
|
454
482
|
*
|
|
455
483
|
* @param entity - Entity to get the bootstrap column values of the key.
|
|
456
484
|
* @param key - Key of the property to get bootstrap column values from.
|
|
457
|
-
* @param type - Defines for which
|
|
485
|
+
* @param type - Defines for which screen size the column values should be returned.
|
|
458
486
|
* @returns Bootstrap column value.
|
|
459
487
|
*/
|
|
460
488
|
static getWidth(entity, key, type) {
|
|
461
|
-
const
|
|
462
|
-
const metadata = EntityUtilities.getPropertyMetadata(entity, key, propertyType);
|
|
463
|
-
metadata.defaultWidths = metadata.defaultWidths;
|
|
489
|
+
const metadata = EntityUtilities.getPropertyMetadata(entity, key);
|
|
464
490
|
switch (type) {
|
|
465
491
|
case 'lg':
|
|
466
492
|
return metadata.defaultWidths[0];
|
|
@@ -481,11 +507,67 @@ class EntityUtilities {
|
|
|
481
507
|
Reflect.set(entity, key, Reflect.get(entityPriorChanges, key));
|
|
482
508
|
}
|
|
483
509
|
}
|
|
510
|
+
/**
|
|
511
|
+
* Gets the rows that are used to display the given entity.
|
|
512
|
+
*
|
|
513
|
+
* @param entity - The entity to get the rows from.
|
|
514
|
+
* @param hideOmitForCreate - Whether or not keys with the metadata omitForCreate should be filtered out.
|
|
515
|
+
* @param hideOmitForEdit - Whether or not keys with the metadata omitForUpdate should be filtered out.
|
|
516
|
+
* @returns The sorted Rows containing the row number and the keys to display in that row.
|
|
517
|
+
*/
|
|
518
|
+
static getEntityRows(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
|
|
519
|
+
const res = [];
|
|
520
|
+
const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit);
|
|
521
|
+
const numberOfRows = EntityUtilities.getNumberOfRows(keys, entity);
|
|
522
|
+
for (let i = 1; i <= numberOfRows; i++) {
|
|
523
|
+
const row = {
|
|
524
|
+
row: i,
|
|
525
|
+
keys: EntityUtilities.getKeysForRow(keys, entity, i)
|
|
526
|
+
};
|
|
527
|
+
res.push(row);
|
|
528
|
+
}
|
|
529
|
+
const lastRow = {
|
|
530
|
+
row: numberOfRows + 1,
|
|
531
|
+
keys: EntityUtilities.getKeysForRow(keys, entity, -1)
|
|
532
|
+
};
|
|
533
|
+
res.push(lastRow);
|
|
534
|
+
return res;
|
|
535
|
+
}
|
|
536
|
+
static getKeysForRow(keys, entity, i) {
|
|
537
|
+
return keys
|
|
538
|
+
.filter(k => EntityUtilities.getPropertyMetadata(entity, k).position.row === i)
|
|
539
|
+
.sort((a, b) => EntityUtilities.compareOrder(a, b, entity));
|
|
540
|
+
}
|
|
541
|
+
static getNumberOfRows(keys, entity) {
|
|
542
|
+
return keys
|
|
543
|
+
.map(k => EntityUtilities.getPropertyMetadata(entity, k).position.row)
|
|
544
|
+
.sort((a, b) => (a > b ? -1 : 1))[0];
|
|
545
|
+
}
|
|
546
|
+
/**
|
|
547
|
+
* Gets the keys of the provided entity correctly typed.
|
|
548
|
+
*
|
|
549
|
+
* @param entity - The entity to get the keys of.
|
|
550
|
+
* @param hideOmitForCreate - Whether or not keys with the metadata omitForCreate should be filtered out.
|
|
551
|
+
* @param hideOmitForEdit - Whether or not keys with the metadata omitForUpdate should be filtered out.
|
|
552
|
+
* @returns An array of keys of the entity.
|
|
553
|
+
*/
|
|
554
|
+
static keysOf(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
|
|
555
|
+
let keys = Reflect.ownKeys(entity);
|
|
556
|
+
if (hideOmitForCreate) {
|
|
557
|
+
const omitForCreateKeys = EntityUtilities.getOmitForCreate(entity);
|
|
558
|
+
keys = keys.filter(k => !omitForCreateKeys.includes(k));
|
|
559
|
+
}
|
|
560
|
+
if (hideOmitForEdit) {
|
|
561
|
+
const omitForUpdateKeys = EntityUtilities.getOmitForUpdate(entity);
|
|
562
|
+
keys = keys.filter(k => !omitForUpdateKeys.includes(k));
|
|
563
|
+
}
|
|
564
|
+
return keys;
|
|
565
|
+
}
|
|
484
566
|
}
|
|
485
567
|
_a = EntityUtilities;
|
|
486
|
-
// eslint-disable-next-line @typescript-eslint/member-ordering
|
|
568
|
+
// eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc
|
|
487
569
|
EntityUtilities.construct = _a.new;
|
|
488
|
-
// eslint-disable-next-line @typescript-eslint/member-ordering
|
|
570
|
+
// eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc
|
|
489
571
|
EntityUtilities.build = _a.new;
|
|
490
572
|
|
|
491
573
|
/**
|
|
@@ -526,7 +608,7 @@ class EntityService {
|
|
|
526
608
|
return e;
|
|
527
609
|
}
|
|
528
610
|
/**
|
|
529
|
-
* Gets all existing entities and pushes them to the
|
|
611
|
+
* Gets all existing entities and pushes them to the entities array.
|
|
530
612
|
*
|
|
531
613
|
* @returns A Promise of all received Entities.
|
|
532
614
|
*/
|
|
@@ -561,6 +643,52 @@ class EntityService {
|
|
|
561
643
|
}
|
|
562
644
|
}
|
|
563
645
|
|
|
646
|
+
/**
|
|
647
|
+
* The abstract BaseBuilder class.
|
|
648
|
+
*/
|
|
649
|
+
class BaseBuilder {
|
|
650
|
+
constructor(data) {
|
|
651
|
+
this.validateInput(data);
|
|
652
|
+
this.inputData = data;
|
|
653
|
+
this.data = this.generateBaseData(data);
|
|
654
|
+
return this;
|
|
655
|
+
}
|
|
656
|
+
/**
|
|
657
|
+
* Used to validate the user input in the constructor.
|
|
658
|
+
*
|
|
659
|
+
* @param data - The user input.
|
|
660
|
+
*/
|
|
661
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
662
|
+
validateInput(data) {
|
|
663
|
+
// By default, no validation is done
|
|
664
|
+
}
|
|
665
|
+
;
|
|
666
|
+
/**
|
|
667
|
+
* Sets the value for the given key if no user value was provided.
|
|
668
|
+
*
|
|
669
|
+
* @param key - The key to set the default value for.
|
|
670
|
+
* @param value - The value to set when nothing was provided.
|
|
671
|
+
* @returns The Builder.
|
|
672
|
+
*/
|
|
673
|
+
withDefault(key, value) {
|
|
674
|
+
if (!this.inputData || !this.inputData[key]) {
|
|
675
|
+
this.data[key] = value;
|
|
676
|
+
}
|
|
677
|
+
return this;
|
|
678
|
+
}
|
|
679
|
+
/**
|
|
680
|
+
* Method used to get the final build value after applying all chaining.
|
|
681
|
+
*
|
|
682
|
+
* @returns The build value.
|
|
683
|
+
*/
|
|
684
|
+
getResult() {
|
|
685
|
+
return this.data;
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
/**
|
|
690
|
+
* The internal ConfirmDialogData. Requires all default values the user can leave out.
|
|
691
|
+
*/
|
|
564
692
|
class ConfirmDialogDataInternal {
|
|
565
693
|
constructor(text, type, confirmButtonLabel, cancelButtonLabel, title, requireConfirmation, confirmationText) {
|
|
566
694
|
this.text = text;
|
|
@@ -572,13 +700,18 @@ class ConfirmDialogDataInternal {
|
|
|
572
700
|
this.confirmationText = confirmationText;
|
|
573
701
|
}
|
|
574
702
|
}
|
|
575
|
-
|
|
703
|
+
/**
|
|
704
|
+
* The Builder for the ConfirmDialogData. Sets default values.
|
|
705
|
+
*/
|
|
706
|
+
class ConfirmDialogDataBuilder extends BaseBuilder {
|
|
576
707
|
constructor(data) {
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
708
|
+
super(data);
|
|
709
|
+
}
|
|
710
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
711
|
+
generateBaseData(data) {
|
|
712
|
+
return new ConfirmDialogDataInternal(data?.text ? data.text : ['Do you really want to do this?'], data?.type ? data.type : 'default', data?.confirmButtonLabel ? data.confirmButtonLabel : 'Confirm', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.title ? data.title : 'Confirmation', data?.requireConfirmation ? data.requireConfirmation : false, data?.confirmationText);
|
|
581
713
|
}
|
|
714
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
582
715
|
validateInput(data) {
|
|
583
716
|
if (!data) {
|
|
584
717
|
return;
|
|
@@ -594,50 +727,13 @@ class ConfirmDialogDataBuilder {
|
|
|
594
727
|
throw new Error('The "cancelButtonLabel" will never be shown because "type" is set to "info-only"');
|
|
595
728
|
}
|
|
596
729
|
}
|
|
597
|
-
withDefaultText(text) {
|
|
598
|
-
if (!this.dataInput?.text) {
|
|
599
|
-
this.confirmDialogData.text = text;
|
|
600
|
-
}
|
|
601
|
-
return this;
|
|
602
|
-
}
|
|
603
|
-
withDefaultType(type) {
|
|
604
|
-
if (!this.dataInput?.type) {
|
|
605
|
-
this.confirmDialogData.type = type;
|
|
606
|
-
}
|
|
607
|
-
return this;
|
|
608
|
-
}
|
|
609
|
-
withDefaultConfirmButtonLabel(label) {
|
|
610
|
-
if (!this.dataInput?.confirmButtonLabel) {
|
|
611
|
-
this.confirmDialogData.confirmButtonLabel = label;
|
|
612
|
-
}
|
|
613
|
-
return this;
|
|
614
|
-
}
|
|
615
|
-
withDefaultCancelButtonLabel(label) {
|
|
616
|
-
if (!this.dataInput?.cancelButtonLabel) {
|
|
617
|
-
this.confirmDialogData.cancelButtonLabel = label;
|
|
618
|
-
}
|
|
619
|
-
return this;
|
|
620
|
-
}
|
|
621
|
-
withDefaultTitle(title) {
|
|
622
|
-
if (!this.dataInput?.title) {
|
|
623
|
-
this.confirmDialogData.title = title;
|
|
624
|
-
}
|
|
625
|
-
return this;
|
|
626
|
-
}
|
|
627
|
-
withDefaultRequireConfirmation(requireConfirmation) {
|
|
628
|
-
if (this.dataInput?.requireConfirmation === undefined) {
|
|
629
|
-
this.confirmDialogData.requireConfirmation = requireConfirmation;
|
|
630
|
-
}
|
|
631
|
-
return this;
|
|
632
|
-
}
|
|
633
|
-
withDefaultConfirmationText(confirmationText) {
|
|
634
|
-
if (!this.dataInput?.confirmationText) {
|
|
635
|
-
this.confirmDialogData.confirmationText = confirmationText;
|
|
636
|
-
}
|
|
637
|
-
return this;
|
|
638
|
-
}
|
|
639
730
|
}
|
|
640
731
|
|
|
732
|
+
/**
|
|
733
|
+
* The Dialog used whenever confirmation by the user is required (e.g. When the user tries to delete an entity).
|
|
734
|
+
*
|
|
735
|
+
* Can be customized with the MAT_DIALOG_DATA "inputData". Customization options are defined in "ConfirmDialogData".
|
|
736
|
+
*/
|
|
641
737
|
class NgxMatEntityConfirmDialogComponent {
|
|
642
738
|
constructor(dialogRef, inputData) {
|
|
643
739
|
this.dialogRef = dialogRef;
|
|
@@ -645,18 +741,24 @@ class NgxMatEntityConfirmDialogComponent {
|
|
|
645
741
|
this.confirm = false;
|
|
646
742
|
}
|
|
647
743
|
ngOnInit() {
|
|
648
|
-
this.data = new ConfirmDialogDataBuilder(this.inputData).
|
|
744
|
+
this.data = new ConfirmDialogDataBuilder(this.inputData).getResult();
|
|
649
745
|
this.dialogRef.disableClose = true;
|
|
650
746
|
}
|
|
747
|
+
/**
|
|
748
|
+
* Closes the dialog with value 1 to signal that the action should be run.
|
|
749
|
+
*/
|
|
651
750
|
confirmAction() {
|
|
652
751
|
this.dialogRef.close(1);
|
|
653
752
|
}
|
|
753
|
+
/**
|
|
754
|
+
* Closes the dialog.
|
|
755
|
+
*/
|
|
654
756
|
cancel() {
|
|
655
757
|
this.dialogRef.close();
|
|
656
758
|
}
|
|
657
759
|
}
|
|
658
760
|
NgxMatEntityConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
659
|
-
NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityConfirmDialogComponent, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type:
|
|
761
|
+
NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityConfirmDialogComponent, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
|
|
660
762
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, decorators: [{
|
|
661
763
|
type: Component,
|
|
662
764
|
args: [{ selector: 'ngx-mat-entity-confirm-dialog', template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
|
|
@@ -707,11 +809,18 @@ function getValidationErrorMessage(model) {
|
|
|
707
809
|
else if (model.hasError('required')) {
|
|
708
810
|
return 'required';
|
|
709
811
|
}
|
|
812
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
813
|
+
else if (model.hasError('pattern') && model.getError('pattern').requiredPattern === '^true$') {
|
|
814
|
+
return 'needs to be selected';
|
|
815
|
+
}
|
|
710
816
|
else {
|
|
711
817
|
return 'invalid input';
|
|
712
818
|
}
|
|
713
819
|
}
|
|
714
820
|
|
|
821
|
+
/**
|
|
822
|
+
* The internal CreateDialogData. Requires all default values the user can leave out.
|
|
823
|
+
*/
|
|
715
824
|
class CreateDialogDataInternal {
|
|
716
825
|
constructor(title, createButtonLabel, cancelButtonLabel, createRequiresConfirmDialog, confirmCreateDialogData) {
|
|
717
826
|
this.title = title;
|
|
@@ -721,50 +830,27 @@ class CreateDialogDataInternal {
|
|
|
721
830
|
this.confirmCreateDialogData = confirmCreateDialogData;
|
|
722
831
|
}
|
|
723
832
|
}
|
|
724
|
-
|
|
833
|
+
/**
|
|
834
|
+
* The Builder for the CreateDialogData. Sets default values.
|
|
835
|
+
*/
|
|
836
|
+
class CreateDialogDataBuilder extends BaseBuilder {
|
|
725
837
|
constructor(data) {
|
|
726
|
-
|
|
727
|
-
this.dataInput = data;
|
|
728
|
-
const confirmCreateDialogData = new ConfirmDialogDataBuilder(data?.confirmCreateDialogData)
|
|
729
|
-
.withDefaultConfirmButtonLabel('Create')
|
|
730
|
-
.withDefaultText(['Do you really want to create this entity?'])
|
|
731
|
-
.withDefaultTitle('Create')
|
|
732
|
-
.confirmDialogData;
|
|
733
|
-
this.createDialogData = new CreateDialogDataInternal(data?.title ? data.title : 'Create', data?.createButtonLabel ? data.createButtonLabel : 'Create', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.createRequiresConfirmDialog ? data.createRequiresConfirmDialog : false, confirmCreateDialogData);
|
|
734
|
-
return this;
|
|
735
|
-
}
|
|
736
|
-
withDefaultTitle(title) {
|
|
737
|
-
if (!this.dataInput?.title) {
|
|
738
|
-
this.createDialogData.title = title;
|
|
739
|
-
}
|
|
740
|
-
return this;
|
|
741
|
-
}
|
|
742
|
-
withDefaultCreateButtonLabel(label) {
|
|
743
|
-
if (!this.dataInput?.createButtonLabel) {
|
|
744
|
-
this.createDialogData.createButtonLabel = label;
|
|
745
|
-
}
|
|
746
|
-
return this;
|
|
747
|
-
}
|
|
748
|
-
withDefaultCancelButtonLabel(label) {
|
|
749
|
-
if (!this.dataInput?.cancelButtonLabel) {
|
|
750
|
-
this.createDialogData.cancelButtonLabel = label;
|
|
751
|
-
}
|
|
752
|
-
return this;
|
|
753
|
-
}
|
|
754
|
-
withDefaultCreateRequiresConfirmDialog(createRequiresConfirmDialog) {
|
|
755
|
-
if (this.dataInput?.createRequiresConfirmDialog === undefined) {
|
|
756
|
-
this.createDialogData.createRequiresConfirmDialog = createRequiresConfirmDialog;
|
|
757
|
-
}
|
|
758
|
-
return this;
|
|
838
|
+
super(data);
|
|
759
839
|
}
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
840
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
841
|
+
generateBaseData(data) {
|
|
842
|
+
const confirmCreateDialogData = new ConfirmDialogDataBuilder(data?.confirmCreateDialogData)
|
|
843
|
+
.withDefault('confirmButtonLabel', 'create')
|
|
844
|
+
.withDefault('text', ['Do you really want to create this entity?'])
|
|
845
|
+
.withDefault('title', 'Create')
|
|
846
|
+
.getResult();
|
|
847
|
+
return new CreateDialogDataInternal(data?.title ? data.title : 'Create', data?.createButtonLabel ? data.createButtonLabel : 'Create', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.createRequiresConfirmDialog ? data.createRequiresConfirmDialog : false, confirmCreateDialogData);
|
|
765
848
|
}
|
|
766
849
|
}
|
|
767
850
|
|
|
851
|
+
/**
|
|
852
|
+
* The internal AddArrayItemDialogData. Requires all default values the user can leave out.
|
|
853
|
+
*/
|
|
768
854
|
class AddArrayItemDialogDataInternal {
|
|
769
855
|
constructor(entity, createDialogData, getValidationErrorMessage) {
|
|
770
856
|
this.entity = entity;
|
|
@@ -772,35 +858,46 @@ class AddArrayItemDialogDataInternal {
|
|
|
772
858
|
this.getValidationErrorMessage = getValidationErrorMessage;
|
|
773
859
|
}
|
|
774
860
|
}
|
|
775
|
-
|
|
861
|
+
/**
|
|
862
|
+
* The Builder for the AddArrayItemDialogData. Sets default values.
|
|
863
|
+
*/
|
|
864
|
+
class AddArrayItemDialogDataBuilder extends BaseBuilder {
|
|
776
865
|
constructor(data) {
|
|
777
|
-
|
|
778
|
-
const createDialogData = new CreateDialogDataBuilder(data.createDialogData)
|
|
779
|
-
.withDefaultCreateButtonLabel('Add')
|
|
780
|
-
.withDefaultTitle('Add to array')
|
|
781
|
-
.createDialogData;
|
|
782
|
-
this.addArrayItemDialogData = new AddArrayItemDialogDataInternal(data.entity, createDialogData, data.getValidationErrorMessage ? data.getValidationErrorMessage : getValidationErrorMessage);
|
|
783
|
-
return this;
|
|
784
|
-
}
|
|
785
|
-
withDefaultCreateDialogData(createDialogData) {
|
|
786
|
-
if (!this.dataInput.createDialogData) {
|
|
787
|
-
this.addArrayItemDialogData.createDialogData = createDialogData;
|
|
788
|
-
}
|
|
789
|
-
return this;
|
|
866
|
+
super(data);
|
|
790
867
|
}
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
868
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
869
|
+
generateBaseData(data) {
|
|
870
|
+
const createDialogData = new CreateDialogDataBuilder(data.createDialogData)
|
|
871
|
+
.withDefault('createButtonLabel', 'Add')
|
|
872
|
+
.withDefault('title', 'Add to array')
|
|
873
|
+
.getResult();
|
|
874
|
+
return new AddArrayItemDialogDataInternal(data.entity, createDialogData, data.getValidationErrorMessage ? data.getValidationErrorMessage : getValidationErrorMessage);
|
|
796
875
|
}
|
|
797
876
|
}
|
|
798
877
|
|
|
799
|
-
|
|
800
|
-
|
|
878
|
+
/**
|
|
879
|
+
* The default input component. It gets the metadata of the property from the given @Input "entity" and @Input "propertyKey"
|
|
880
|
+
* and displays the input field accordingly.
|
|
881
|
+
*
|
|
882
|
+
* You can also define a method that generates error-messages and if the input should be hidden when its metadata says
|
|
883
|
+
* that it should be omitted for creating or updating.
|
|
884
|
+
* The last part being mostly relevant if you want to use this component inside an ngFor.
|
|
885
|
+
*/
|
|
886
|
+
class NgxMatEntityInputComponent {
|
|
887
|
+
constructor(dialog) {
|
|
888
|
+
this.dialog = dialog;
|
|
889
|
+
this.chipsInput = '';
|
|
890
|
+
this.selection = new SelectionModel(true, []);
|
|
801
891
|
this.DecoratorTypes = DecoratorTypes;
|
|
892
|
+
this.EntityUtilities = EntityUtilities;
|
|
802
893
|
this.getWidth = EntityUtilities.getWidth;
|
|
803
894
|
}
|
|
895
|
+
/**
|
|
896
|
+
* This is needed for the inputs to work inside an ngFor.
|
|
897
|
+
*
|
|
898
|
+
* @param index - The index of the element in the ngFor.
|
|
899
|
+
* @returns The index.
|
|
900
|
+
*/
|
|
804
901
|
trackByFn(index) {
|
|
805
902
|
return index;
|
|
806
903
|
}
|
|
@@ -816,283 +913,143 @@ class NgxMatEntityInternalInputComponent {
|
|
|
816
913
|
this.metadataDefaultString = this.metadata;
|
|
817
914
|
this.metadataTextboxString = this.metadata;
|
|
818
915
|
this.metadataAutocompleteString = this.metadata;
|
|
916
|
+
this.autocompleteStrings = this.metadataAutocompleteString.autocompleteValues;
|
|
917
|
+
this.filteredAutocompleteStrings = cloneDeep(this.autocompleteStrings);
|
|
819
918
|
this.metadataDropdownString = this.metadata;
|
|
820
919
|
this.metadataDropdownBoolean = this.metadata;
|
|
920
|
+
if ((this.type === DecoratorTypes.BOOLEAN_CHECKBOX || this.type === DecoratorTypes.BOOLEAN_TOGGLE)
|
|
921
|
+
&& this.entity[this.propertyKey] === undefined) {
|
|
922
|
+
this.entity[this.propertyKey] = false;
|
|
923
|
+
}
|
|
821
924
|
this.metadataDefaultNumber = this.metadata;
|
|
822
925
|
this.metadataDropdownNumber = this.metadata;
|
|
823
926
|
this.metadataDefaultObject = this.metadata;
|
|
824
927
|
this.objectProperty = this.entity[this.propertyKey];
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
if (!
|
|
831
|
-
|
|
832
|
-
|
|
928
|
+
if (this.type === DecoratorTypes.OBJECT) {
|
|
929
|
+
this.objectPropertyRows = EntityUtilities.getEntityRows(this.objectProperty, this.hideOmitForCreate, this.hideOmitForEdit);
|
|
930
|
+
}
|
|
931
|
+
this.metadataEntityArray = this.metadata;
|
|
932
|
+
if (this.type === DecoratorTypes.ARRAY) {
|
|
933
|
+
if (!this.entity[this.propertyKey]) {
|
|
934
|
+
this.entity[this.propertyKey] = [];
|
|
935
|
+
}
|
|
936
|
+
this.entityArrayValues = this.entity[this.propertyKey];
|
|
937
|
+
if (this.metadataEntityArray.createInline === undefined) {
|
|
938
|
+
this.metadataEntityArray.createInline = true;
|
|
939
|
+
}
|
|
940
|
+
if (!this.metadataEntityArray.createInline && !this.metadataEntityArray.createDialogData) {
|
|
941
|
+
this.metadataEntityArray.createDialogData = {
|
|
942
|
+
title: 'Add'
|
|
943
|
+
};
|
|
833
944
|
}
|
|
945
|
+
// TODO
|
|
946
|
+
const givenDisplayColumns = this.metadataEntityArray.displayColumns.map((v) => v.displayName);
|
|
947
|
+
if (givenDisplayColumns.find((s) => s === 'select')) {
|
|
948
|
+
throw new Error(`The name "select" for a display column is reserved.
|
|
949
|
+
Please choose a different name.`);
|
|
950
|
+
}
|
|
951
|
+
this.displayedColumns = ['select'].concat(givenDisplayColumns);
|
|
952
|
+
this.dataSource = new MatTableDataSource();
|
|
953
|
+
this.dataSource.data = this.entityArrayValues;
|
|
954
|
+
this.arrayItem = new this.metadataEntityArray.EntityClass();
|
|
955
|
+
this.arrayItemInlineRows = EntityUtilities.getEntityRows(this.arrayItem, this.hideOmitForCreate === false ? false : true, this.hideOmitForEdit ? true : false);
|
|
956
|
+
this.arrayItemPriorChanges = cloneDeep(this.arrayItem);
|
|
957
|
+
this.dialogInputData = {
|
|
958
|
+
entity: this.arrayItem,
|
|
959
|
+
createDialogData: this.metadataEntityArray.createDialogData,
|
|
960
|
+
getValidationErrorMessage: this.getValidationErrorMessage
|
|
961
|
+
};
|
|
962
|
+
this.dialogData = new AddArrayItemDialogDataBuilder(this.dialogInputData).getResult();
|
|
963
|
+
this.arrayItemDialogRows = EntityUtilities.getEntityRows(this.dialogData.entity, true);
|
|
964
|
+
}
|
|
965
|
+
this.metadataStringChipsArray = this.metadata;
|
|
966
|
+
if ((this.type === DecoratorTypes.ARRAY_STRING_CHIPS || this.type === DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS)
|
|
967
|
+
&& this.entity[this.propertyKey]?.length) {
|
|
968
|
+
this.stringChipsArrayValues = this.entity[this.propertyKey];
|
|
969
|
+
}
|
|
970
|
+
this.metadataAutocompleteStringChipsArray = this.metadata;
|
|
971
|
+
if (!this.getValidationErrorMessage) {
|
|
972
|
+
this.getValidationErrorMessage = getValidationErrorMessage;
|
|
834
973
|
}
|
|
835
|
-
return res.sort((a, b) => EntityUtilities.compareOrder(a, b, this.objectProperty));
|
|
836
974
|
}
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
NgxMatEntityInternalInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityInternalInputComponent, selector: "ngx-mat-entity-internal-input", inputs: { entity: "entity", propertyKey: "propertyKey", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", getValidationErrorMessage: "getValidationErrorMessage" }, ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of metadataAutocompleteString.autocompleteValues\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field>\n <mat-checkbox [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n {{metadata.displayName}}\n </mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field>\n <mat-slide-toggle [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n {{metadata.displayName}}\n </mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <div class=\"row\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-internal-input\n *ngFor=\"let key of getObjectProperties(); let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-internal-input>\n </div>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}}is not known.</div>\n</div>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: NgxMatEntityInternalInputComponent, selector: "ngx-mat-entity-internal-input", inputs: ["entity", "propertyKey", "hideOmitForCreate", "hideOmitForEdit", "getValidationErrorMessage"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i12.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i12.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i10.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i12.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i12.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
}
|
|
854
|
-
|
|
855
|
-
class NgxMatEntityAddArrayItemDialogComponent {
|
|
856
|
-
constructor(inputData, dialogRef) {
|
|
857
|
-
this.inputData = inputData;
|
|
858
|
-
this.dialogRef = dialogRef;
|
|
859
|
-
this.EntityUtilities = EntityUtilities;
|
|
860
|
-
this.getWidth = EntityUtilities.getWidth;
|
|
975
|
+
/**
|
|
976
|
+
* Tries to add an item to the array.
|
|
977
|
+
* Does this either inline if the "createInline"-metadata is set to true
|
|
978
|
+
* or in a separate dialog if it is set to false.
|
|
979
|
+
*/
|
|
980
|
+
add() {
|
|
981
|
+
if (this.metadataEntityArray.createInline) {
|
|
982
|
+
this.entityArrayValues.push(cloneDeep(this.arrayItem));
|
|
983
|
+
this.dataSource.data = this.entityArrayValues;
|
|
984
|
+
EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
|
|
985
|
+
}
|
|
986
|
+
else {
|
|
987
|
+
this.addArrayItemDialogRef = this.dialog.open(this.addArrayItemDialog, {
|
|
988
|
+
data: this.dialogData,
|
|
989
|
+
autoFocus: false,
|
|
990
|
+
restoreFocus: false
|
|
991
|
+
});
|
|
992
|
+
}
|
|
861
993
|
}
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
994
|
+
/**
|
|
995
|
+
* Adds the array item defined in the dialog.
|
|
996
|
+
*/
|
|
997
|
+
addArrayItem() {
|
|
998
|
+
this.addArrayItemDialogRef.close();
|
|
999
|
+
this.entityArrayValues.push(cloneDeep(this.arrayItem));
|
|
1000
|
+
this.dataSource.data = this.entityArrayValues;
|
|
1001
|
+
EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
|
|
866
1002
|
}
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
1003
|
+
/**
|
|
1004
|
+
* Cancels adding the array item defined in the dialog.
|
|
1005
|
+
*/
|
|
1006
|
+
cancelAddArrayItem() {
|
|
1007
|
+
this.addArrayItemDialogRef.close();
|
|
1008
|
+
EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
|
|
872
1009
|
}
|
|
873
|
-
|
|
874
|
-
|
|
1010
|
+
/**
|
|
1011
|
+
* Removes all selected entries from the array.
|
|
1012
|
+
*/
|
|
1013
|
+
remove() {
|
|
1014
|
+
this.selection.selected.forEach(s => {
|
|
1015
|
+
this.entityArrayValues.splice(this.entityArrayValues.indexOf(s), 1);
|
|
1016
|
+
});
|
|
1017
|
+
this.dataSource.data = this.entityArrayValues;
|
|
1018
|
+
this.selection.clear();
|
|
875
1019
|
}
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
}
|
|
886
|
-
type: Inject,
|
|
887
|
-
args: [MAT_DIALOG_DATA]
|
|
888
|
-
}] }, { type: i1.MatDialogRef }]; } });
|
|
889
|
-
|
|
890
|
-
class EntityArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
891
|
-
constructor(data) {
|
|
892
|
-
super(data);
|
|
893
|
-
this.createDialogData = data.createDialogData;
|
|
894
|
-
this.displayStyle = data.displayStyle;
|
|
895
|
-
this.itemType = data.itemType;
|
|
896
|
-
this.EntityClass = data.EntityClass;
|
|
897
|
-
this.displayColumns = data.displayColumns;
|
|
898
|
-
this.createInline = data.createInline != undefined ? data.createInline : true;
|
|
899
|
-
this.missingErrorMessage = data.missingErrorMessage ? data.missingErrorMessage : 'Needs to contain at least one value';
|
|
900
|
-
this.defaultWidths = data.defaultWidths ? data.defaultWidths : [12, 12, 12];
|
|
901
|
-
}
|
|
902
|
-
}
|
|
903
|
-
class StringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
904
|
-
constructor(data) {
|
|
905
|
-
super(data);
|
|
906
|
-
this.deleteHtml = data.deleteHtml;
|
|
907
|
-
this.displayStyle = data.displayStyle;
|
|
908
|
-
this.itemType = data.itemType;
|
|
909
|
-
this.maxLength = data.maxLength;
|
|
910
|
-
this.minLength = data.minLength;
|
|
911
|
-
this.regex = data.regex;
|
|
912
|
-
this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
|
|
913
|
-
}
|
|
914
|
-
}
|
|
915
|
-
class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
916
|
-
constructor(data) {
|
|
917
|
-
super(data);
|
|
918
|
-
this.autocompleteValues = data.autocompleteValues;
|
|
919
|
-
this.deleteHtml = data.deleteHtml;
|
|
920
|
-
this.displayStyle = data.displayStyle;
|
|
921
|
-
this.itemType = data.itemType;
|
|
922
|
-
this.maxLength = data.maxLength;
|
|
923
|
-
this.minLength = data.minLength;
|
|
924
|
-
this.regex = data.regex;
|
|
925
|
-
this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
|
|
926
|
-
}
|
|
927
|
-
}
|
|
928
|
-
|
|
929
|
-
class NgxMatEntityArrayTableComponent {
|
|
930
|
-
constructor(dialog) {
|
|
931
|
-
this.dialog = dialog;
|
|
932
|
-
this.selection = new SelectionModel(true, []);
|
|
933
|
-
this.getWidth = EntityUtilities.getWidth;
|
|
934
|
-
this.EntityUtilities = EntityUtilities;
|
|
935
|
-
}
|
|
936
|
-
trackByFn(index) {
|
|
937
|
-
return index;
|
|
938
|
-
}
|
|
939
|
-
ngOnInit() {
|
|
940
|
-
const givenDisplayColumns = this.metadata.displayColumns.map((v) => v.displayName);
|
|
941
|
-
this.validateInput(givenDisplayColumns);
|
|
942
|
-
this.displayedColumns = ['select'].concat(givenDisplayColumns);
|
|
943
|
-
this.dataSource = new MatTableDataSource();
|
|
944
|
-
this.dataSource.data = this.arrayItems;
|
|
945
|
-
this.arrayItem = new this.metadata.EntityClass();
|
|
946
|
-
this.arrayItemPriorChanges = cloneDeep(this.arrayItem);
|
|
947
|
-
}
|
|
948
|
-
validateInput(givenDisplayColumns) {
|
|
949
|
-
if (givenDisplayColumns.find((s) => s === 'select')) {
|
|
950
|
-
throw new Error(`The name "select" for a display column is reserved.
|
|
951
|
-
Please choose a different name.`);
|
|
952
|
-
}
|
|
953
|
-
if (!this.metadata.createInline && !this.metadata.createDialogData) {
|
|
954
|
-
throw new Error(`Missing required Input data "createDialogData".
|
|
955
|
-
You can only omit this value when the creation is inline.`);
|
|
956
|
-
}
|
|
957
|
-
}
|
|
958
|
-
add() {
|
|
959
|
-
if (this.metadata.createInline) {
|
|
960
|
-
this.arrayItems.push(cloneDeep(this.arrayItem));
|
|
961
|
-
this.dataSource.data = this.arrayItems;
|
|
962
|
-
EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
|
|
963
|
-
}
|
|
964
|
-
else {
|
|
965
|
-
const dialogInputData = {
|
|
966
|
-
entity: this.arrayItem,
|
|
967
|
-
createDialogData: this.metadata.createDialogData,
|
|
968
|
-
getValidationErrorMessage: this.getValidationErrorMessage
|
|
969
|
-
};
|
|
970
|
-
const dialogData = new AddArrayItemDialogDataBuilder(dialogInputData)
|
|
971
|
-
.addArrayItemDialogData;
|
|
972
|
-
firstValueFrom(this.dialog.open(NgxMatEntityAddArrayItemDialogComponent, {
|
|
973
|
-
data: dialogData,
|
|
974
|
-
autoFocus: false,
|
|
975
|
-
restoreFocus: false
|
|
976
|
-
}).afterClosed()).then((res) => {
|
|
977
|
-
if (res === 1) {
|
|
978
|
-
this.arrayItems.push(cloneDeep(this.arrayItem));
|
|
979
|
-
this.dataSource.data = this.arrayItems;
|
|
980
|
-
}
|
|
981
|
-
EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
|
|
982
|
-
});
|
|
983
|
-
}
|
|
984
|
-
}
|
|
985
|
-
remove() {
|
|
986
|
-
this.selection.selected.forEach(s => {
|
|
987
|
-
this.arrayItems.splice(this.arrayItems.indexOf(s), 1);
|
|
988
|
-
});
|
|
989
|
-
this.dataSource.data = this.arrayItems;
|
|
990
|
-
this.selection.clear();
|
|
991
|
-
}
|
|
992
|
-
getObjectProperties() {
|
|
993
|
-
const res = [];
|
|
994
|
-
for (const property in this.arrayItem) {
|
|
995
|
-
const metadata = EntityUtilities.getPropertyMetadata(this.arrayItem, property, EntityUtilities.getPropertyType(this.arrayItem, property));
|
|
996
|
-
if (!(metadata.omitForCreate)) {
|
|
997
|
-
res.push(property);
|
|
998
|
-
}
|
|
999
|
-
}
|
|
1000
|
-
return res.sort((a, b) => EntityUtilities.compareOrder(a, b, this.arrayItem));
|
|
1001
|
-
}
|
|
1002
|
-
masterToggle() {
|
|
1003
|
-
if (this.isAllSelected()) {
|
|
1004
|
-
this.selection.clear();
|
|
1005
|
-
}
|
|
1006
|
-
else {
|
|
1007
|
-
this.dataSource.data.forEach((row) => this.selection.select(row));
|
|
1008
|
-
}
|
|
1020
|
+
/**
|
|
1021
|
+
* Toggles all array-items in the table.
|
|
1022
|
+
*/
|
|
1023
|
+
masterToggle() {
|
|
1024
|
+
if (this.isAllSelected()) {
|
|
1025
|
+
this.selection.clear();
|
|
1026
|
+
}
|
|
1027
|
+
else {
|
|
1028
|
+
this.dataSource.data.forEach((row) => this.selection.select(row));
|
|
1029
|
+
}
|
|
1009
1030
|
}
|
|
1031
|
+
/**
|
|
1032
|
+
* Checks if all array-items in the table have been selected.
|
|
1033
|
+
* This is needed to display the "masterToggle"-checkbox correctly.
|
|
1034
|
+
*
|
|
1035
|
+
* @returns Whether or not all array-items in the table have been selected.
|
|
1036
|
+
*/
|
|
1010
1037
|
isAllSelected() {
|
|
1011
1038
|
const numSelected = this.selection.selected.length;
|
|
1012
1039
|
const numRows = this.dataSource.data.length;
|
|
1013
1040
|
return numSelected === numRows;
|
|
1014
1041
|
}
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
type: Input
|
|
1027
|
-
}], omit: [{
|
|
1028
|
-
type: Input
|
|
1029
|
-
}] } });
|
|
1030
|
-
|
|
1031
|
-
class NgxMatEntityInputComponent {
|
|
1032
|
-
constructor() {
|
|
1033
|
-
this.chipsInput = '';
|
|
1034
|
-
this.DecoratorTypes = DecoratorTypes;
|
|
1035
|
-
this.getWidth = EntityUtilities.getWidth;
|
|
1036
|
-
}
|
|
1037
|
-
trackByFn(index) {
|
|
1038
|
-
return index;
|
|
1039
|
-
}
|
|
1040
|
-
ngOnInit() {
|
|
1041
|
-
if (!this.entity) {
|
|
1042
|
-
throw new Error('Missing required Input data "entity"');
|
|
1043
|
-
}
|
|
1044
|
-
if (!this.propertyKey) {
|
|
1045
|
-
throw new Error('Missing required Input data "propertyKey"');
|
|
1046
|
-
}
|
|
1047
|
-
this.type = EntityUtilities.getPropertyType(this.entity, this.propertyKey);
|
|
1048
|
-
this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.propertyKey, this.type);
|
|
1049
|
-
this.metadataDefaultString = this.metadata;
|
|
1050
|
-
this.metadataTextboxString = this.metadata;
|
|
1051
|
-
this.metadataAutocompleteString = this.metadata;
|
|
1052
|
-
this.autocompleteStrings = this.metadataAutocompleteString.autocompleteValues;
|
|
1053
|
-
this.filteredAutocompleteStrings = cloneDeep(this.autocompleteStrings);
|
|
1054
|
-
this.metadataDropdownString = this.metadata;
|
|
1055
|
-
this.metadataDropdownBoolean = this.metadata;
|
|
1056
|
-
this.metadataDefaultNumber = this.metadata;
|
|
1057
|
-
this.metadataDropdownNumber = this.metadata;
|
|
1058
|
-
this.metadataDefaultObject = this.metadata;
|
|
1059
|
-
this.objectProperty = this.entity[this.propertyKey];
|
|
1060
|
-
this.metadataEntityArray = this.metadata;
|
|
1061
|
-
if (this.metadataEntityArray.EntityClass) {
|
|
1062
|
-
if (!this.entity[this.propertyKey]) {
|
|
1063
|
-
this.entity[this.propertyKey] = [];
|
|
1064
|
-
}
|
|
1065
|
-
this.entityArrayValues = this.entity[this.propertyKey];
|
|
1066
|
-
if (this.metadataEntityArray.createInline === undefined) {
|
|
1067
|
-
this.metadataEntityArray.createInline = true;
|
|
1068
|
-
}
|
|
1069
|
-
if (!this.metadataEntityArray.createInline && !this.metadataEntityArray.createDialogData) {
|
|
1070
|
-
this.metadataEntityArray.createDialogData = {
|
|
1071
|
-
title: 'Add'
|
|
1072
|
-
};
|
|
1073
|
-
}
|
|
1074
|
-
}
|
|
1075
|
-
this.metadataStringChipsArray = this.metadata;
|
|
1076
|
-
if (this.metadataStringChipsArray.itemType
|
|
1077
|
-
&& this.entity[this.propertyKey]?.length) {
|
|
1078
|
-
this.stringChipsArrayValues = this.entity[this.propertyKey];
|
|
1079
|
-
}
|
|
1080
|
-
this.metadataAutocompleteStringChipsArray = this.metadata;
|
|
1081
|
-
if (!this.getValidationErrorMessage) {
|
|
1082
|
-
this.getValidationErrorMessage = getValidationErrorMessage;
|
|
1083
|
-
}
|
|
1084
|
-
}
|
|
1085
|
-
getObjectProperties() {
|
|
1086
|
-
const res = [];
|
|
1087
|
-
for (const property in this.objectProperty) {
|
|
1088
|
-
const metadata = EntityUtilities.getPropertyMetadata(this.objectProperty, property, EntityUtilities.getPropertyType(this.objectProperty, property));
|
|
1089
|
-
if (!(this.hideOmitForCreate && metadata.omitForCreate)
|
|
1090
|
-
&& !(this.hideOmitForEdit && metadata.omitForUpdate)) {
|
|
1091
|
-
res.push(property);
|
|
1092
|
-
}
|
|
1093
|
-
}
|
|
1094
|
-
return res.sort((a, b) => EntityUtilities.compareOrder(a, b, this.objectProperty));
|
|
1095
|
-
}
|
|
1042
|
+
/**
|
|
1043
|
+
* Handles adding strings to the chipsArray.
|
|
1044
|
+
* Checks validation and also creates a new array if it is undefined.
|
|
1045
|
+
* This is needed because two things are validated: The array itself
|
|
1046
|
+
* and the contents of the array. And we need a way to display an
|
|
1047
|
+
* mat-error. As the only validation for the array is whether or not
|
|
1048
|
+
* it contains values, we can set it to undefined when the last element is removed
|
|
1049
|
+
* (removeStringChipArrayValue). That way we can use the "required" validator.
|
|
1050
|
+
*
|
|
1051
|
+
* @param event - The event that fires when a new chip is completed.
|
|
1052
|
+
*/
|
|
1096
1053
|
addStringChipArrayValue(event) {
|
|
1097
1054
|
const value = (event.value || '').trim();
|
|
1098
1055
|
if (value) {
|
|
@@ -1115,6 +1072,16 @@ class NgxMatEntityInputComponent {
|
|
|
1115
1072
|
}
|
|
1116
1073
|
event.chipInput.clear();
|
|
1117
1074
|
}
|
|
1075
|
+
/**
|
|
1076
|
+
* Removes the given value from the array.
|
|
1077
|
+
* Sets the array to undefined if it is now empty.
|
|
1078
|
+
* This is needed because two things are validated: The array itself
|
|
1079
|
+
* and the contents of the array. And we need a way to display an
|
|
1080
|
+
* mat-error. As the only validation for the array is whether or not
|
|
1081
|
+
* it is empty, setting it to undefined here enables us to use the "required" validator.
|
|
1082
|
+
*
|
|
1083
|
+
* @param value - The string to remove from the array.
|
|
1084
|
+
*/
|
|
1118
1085
|
removeStringChipArrayValue(value) {
|
|
1119
1086
|
this.stringChipsArrayValues.splice(this.stringChipsArrayValues.indexOf(value), 1);
|
|
1120
1087
|
if (!this.stringChipsArrayValues.length) {
|
|
@@ -1122,6 +1089,12 @@ class NgxMatEntityInputComponent {
|
|
|
1122
1089
|
this.stringChipsArrayValues = this.entity[this.propertyKey];
|
|
1123
1090
|
}
|
|
1124
1091
|
}
|
|
1092
|
+
/**
|
|
1093
|
+
* Handles adding a string to the array when an autocomplete value has been selected.
|
|
1094
|
+
*
|
|
1095
|
+
* @param event - The autocomplete selected event.
|
|
1096
|
+
* @param chipsInput - The element where the user typed the value.
|
|
1097
|
+
*/
|
|
1125
1098
|
selected(event, chipsInput) {
|
|
1126
1099
|
const value = (event.option.viewValue || '').trim();
|
|
1127
1100
|
if (this.metadataStringChipsArray.minLength && value.length < this.metadataStringChipsArray.minLength) {
|
|
@@ -1142,17 +1115,22 @@ class NgxMatEntityInputComponent {
|
|
|
1142
1115
|
this.stringChipsArrayValues.push(value);
|
|
1143
1116
|
chipsInput.value = '';
|
|
1144
1117
|
}
|
|
1118
|
+
/**
|
|
1119
|
+
* Dynamically filters the Autocomplete options when the user inputs something.
|
|
1120
|
+
*
|
|
1121
|
+
* @param input - The input of the user.
|
|
1122
|
+
*/
|
|
1145
1123
|
filterAutocompleteStrings(input) {
|
|
1146
1124
|
const filterValue = input.toLowerCase();
|
|
1147
1125
|
this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(filterValue));
|
|
1148
1126
|
}
|
|
1149
1127
|
}
|
|
1150
|
-
NgxMatEntityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1151
|
-
NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit" }, ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field>\n <mat-checkbox [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n {{metadata.displayName}}\n </mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field>\n <mat-slide-toggle [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n {{metadata.displayName}}\n </mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <div class=\"row\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-input\n *ngFor=\"let key of getObjectProperties(); let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n <ngx-mat-entity-array-table\n [arrayItems]=\"entityArrayValues\"\n [metadata]=\"metadataEntityArray\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [omit]=\"hideOmitForCreate ? 'create' : 'update'\"\n >\n </ngx-mat-entity-array-table>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove *ngIf=\"metadataStringChipsArray.deleteHtml\" [innerHtml]=\"metadataStringChipsArray.deleteHtml\">\n </button>\n <button matChipRemove *ngIf=\"!metadataStringChipsArray.deleteHtml\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove *ngIf=\"metadataStringChipsArray.deleteHtml\" [innerHtml]=\"metadataStringChipsArray.deleteHtml\">\n </button>\n <button matChipRemove *ngIf=\"!metadataStringChipsArray.deleteHtml\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n #chipsElement\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}}is not known.</div>\n</div>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }, { type: NgxMatEntityArrayTableComponent, selector: "ngx-mat-entity-array-table", inputs: ["arrayItems", "metadata", "getValidationErrorMessage", "omit"] }, { type: i8$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i12.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i12.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i12.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i10.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName], mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { type: i6.MatSlideToggleRequiredValidator, selector: "mat-slide-toggle[required][formControlName], mat-slide-toggle[required][formControl], mat-slide-toggle[required][ngModel]" }, { type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i12.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i12.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i8$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i8$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i8$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
|
|
1128
|
+
NgxMatEntityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
1129
|
+
NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }], ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field class=\"hideUnderline\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-checkbox (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <input matInput hidden\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString() + 'Helper'\"\n #model=\"ngModel\"\n [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n [required]=\"metadata.required\">\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field class=\"hideUnderline\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-slide-toggle (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <input matInput hidden\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString() + 'Helper'\"\n #model=\"ngModel\"\n [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n [required]=\"metadata.required\">\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n\n <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\n <div style=\"padding-bottom: 10px\">\n <b>{{metadataEntityArray.displayName}}</b>\n </div>\n <div *ngIf=\"metadataEntityArray.createInline\">\n <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n [entity]=\"arrayItem\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(arrayItem, key, 'lg')}} col-md-{{getWidth(arrayItem, key, 'md')}} col-sm-{{getWidth(arrayItem, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n \n <div class=\"buttons\">\n <button mat-raised-button\n [disabled]=\"metadataEntityArray.createInline && !EntityUtilities.isEntityValid(arrayItem, 'create')\"\n (click)=\"add()\">\n {{metadataEntityArray.addButtonLabel}}\n </button>\n <button mat-raised-button\n [disabled]=\"!selection.selected.length\"\n (click)=\"remove()\">\n {{metadataEntityArray.removeButtonLabel}}\n </button>\n </div>\n \n <mat-table [dataSource]=\"dataSource\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n </mat-cell>\n </ng-container>\n \n <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n \n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n \n <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n {{metadataEntityArray.missingErrorMessage}}\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove>\n <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove>\n <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n #chipsElement\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n <mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"dialogData.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(dialogData.entity, key, 'lg')}} col-md-{{getWidth(dialogData.entity, key, 'md')}} col-sm-{{getWidth(dialogData.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n </mat-dialog-content>\n\n <mat-dialog-actions>\n <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!EntityUtilities.isEntityValid(dialogData.entity, 'create')\">\n {{dialogData.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n {{dialogData.createDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i10.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i11.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i13.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i13.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i13.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i13.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i14.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i13.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i13.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i10.MatChipRemove, selector: "[matChipRemove]" }, { type: i10.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i11.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
|
|
1152
1130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
|
|
1153
1131
|
type: Component,
|
|
1154
|
-
args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field>\n <mat-checkbox [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n {{metadata.displayName}}\n </mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field>\n <mat-slide-toggle [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n {{metadata.displayName}}\n </mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <div class=\"row\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-input\n *ngFor=\"let key of getObjectProperties(); let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n <ngx-mat-entity-array-table\n [arrayItems]=\"entityArrayValues\"\n [metadata]=\"metadataEntityArray\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [omit]=\"hideOmitForCreate ? 'create' : 'update'\"\n >\n </ngx-mat-entity-array-table>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove *ngIf=\"metadataStringChipsArray.deleteHtml\" [innerHtml]=\"metadataStringChipsArray.deleteHtml\">\n </button>\n <button matChipRemove *ngIf=\"!metadataStringChipsArray.deleteHtml\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove *ngIf=\"metadataStringChipsArray.deleteHtml\" [innerHtml]=\"metadataStringChipsArray.deleteHtml\">\n </button>\n <button matChipRemove *ngIf=\"!metadataStringChipsArray.deleteHtml\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n #chipsElement\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}}is not known.</div>\n</div>", styles: ["mat-form-field{width:100%}\n"] }]
|
|
1155
|
-
}], ctorParameters: function () { return []; }, propDecorators: { entity: [{
|
|
1132
|
+
args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field class=\"hideUnderline\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-checkbox (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <input matInput hidden\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString() + 'Helper'\"\n #model=\"ngModel\"\n [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n [required]=\"metadata.required\">\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field class=\"hideUnderline\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-slide-toggle (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <input matInput hidden\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString() + 'Helper'\"\n #model=\"ngModel\"\n [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n [required]=\"metadata.required\">\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n\n <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\n <div style=\"padding-bottom: 10px\">\n <b>{{metadataEntityArray.displayName}}</b>\n </div>\n <div *ngIf=\"metadataEntityArray.createInline\">\n <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n [entity]=\"arrayItem\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(arrayItem, key, 'lg')}} col-md-{{getWidth(arrayItem, key, 'md')}} col-sm-{{getWidth(arrayItem, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n \n <div class=\"buttons\">\n <button mat-raised-button\n [disabled]=\"metadataEntityArray.createInline && !EntityUtilities.isEntityValid(arrayItem, 'create')\"\n (click)=\"add()\">\n {{metadataEntityArray.addButtonLabel}}\n </button>\n <button mat-raised-button\n [disabled]=\"!selection.selected.length\"\n (click)=\"remove()\">\n {{metadataEntityArray.removeButtonLabel}}\n </button>\n </div>\n \n <mat-table [dataSource]=\"dataSource\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n </mat-cell>\n </ng-container>\n \n <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n \n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n \n <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n {{metadataEntityArray.missingErrorMessage}}\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove>\n <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove>\n <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n #chipsElement\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n <mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"dialogData.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(dialogData.entity, key, 'lg')}} col-md-{{getWidth(dialogData.entity, key, 'md')}} col-sm-{{getWidth(dialogData.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n </mat-dialog-content>\n\n <mat-dialog-actions>\n <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!EntityUtilities.isEntityValid(dialogData.entity, 'create')\">\n {{dialogData.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n {{dialogData.createDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
|
|
1133
|
+
}], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
|
|
1156
1134
|
type: Input
|
|
1157
1135
|
}], propertyKey: [{
|
|
1158
1136
|
type: Input
|
|
@@ -1162,115 +1140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1162
1140
|
type: Input
|
|
1163
1141
|
}], hideOmitForEdit: [{
|
|
1164
1142
|
type: Input
|
|
1143
|
+
}], addArrayItemDialog: [{
|
|
1144
|
+
type: ViewChild,
|
|
1145
|
+
args: ['addArrayItemDialog']
|
|
1165
1146
|
}] } });
|
|
1166
1147
|
|
|
1167
|
-
class NgxMatEntityInternalInputModule {
|
|
1168
|
-
}
|
|
1169
|
-
NgxMatEntityInternalInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1170
|
-
NgxMatEntityInternalInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputModule, declarations: [NgxMatEntityInternalInputComponent], imports: [CommonModule,
|
|
1171
|
-
MatInputModule,
|
|
1172
|
-
FormsModule,
|
|
1173
|
-
MatFormFieldModule,
|
|
1174
|
-
MatSelectModule,
|
|
1175
|
-
MatAutocompleteModule,
|
|
1176
|
-
MatCheckboxModule,
|
|
1177
|
-
MatSlideToggleModule,
|
|
1178
|
-
MatTableModule], exports: [NgxMatEntityInternalInputComponent] });
|
|
1179
|
-
NgxMatEntityInternalInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputModule, imports: [[
|
|
1180
|
-
CommonModule,
|
|
1181
|
-
MatInputModule,
|
|
1182
|
-
FormsModule,
|
|
1183
|
-
MatFormFieldModule,
|
|
1184
|
-
MatSelectModule,
|
|
1185
|
-
MatAutocompleteModule,
|
|
1186
|
-
MatCheckboxModule,
|
|
1187
|
-
MatSlideToggleModule,
|
|
1188
|
-
MatTableModule
|
|
1189
|
-
]] });
|
|
1190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputModule, decorators: [{
|
|
1191
|
-
type: NgModule,
|
|
1192
|
-
args: [{
|
|
1193
|
-
declarations: [NgxMatEntityInternalInputComponent],
|
|
1194
|
-
imports: [
|
|
1195
|
-
CommonModule,
|
|
1196
|
-
MatInputModule,
|
|
1197
|
-
FormsModule,
|
|
1198
|
-
MatFormFieldModule,
|
|
1199
|
-
MatSelectModule,
|
|
1200
|
-
MatAutocompleteModule,
|
|
1201
|
-
MatCheckboxModule,
|
|
1202
|
-
MatSlideToggleModule,
|
|
1203
|
-
MatTableModule
|
|
1204
|
-
],
|
|
1205
|
-
exports: [NgxMatEntityInternalInputComponent]
|
|
1206
|
-
}]
|
|
1207
|
-
}] });
|
|
1208
|
-
|
|
1209
|
-
class NgxMatEntityAddArrayItemDialogModule {
|
|
1210
|
-
}
|
|
1211
|
-
NgxMatEntityAddArrayItemDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1212
|
-
NgxMatEntityAddArrayItemDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogModule, declarations: [NgxMatEntityAddArrayItemDialogComponent], imports: [CommonModule, NgxMatEntityInternalInputModule, MatDialogModule, FormsModule, MatButtonModule], exports: [NgxMatEntityAddArrayItemDialogComponent] });
|
|
1213
|
-
NgxMatEntityAddArrayItemDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogModule, imports: [[CommonModule, NgxMatEntityInternalInputModule, MatDialogModule, FormsModule, MatButtonModule]] });
|
|
1214
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogModule, decorators: [{
|
|
1215
|
-
type: NgModule,
|
|
1216
|
-
args: [{
|
|
1217
|
-
declarations: [NgxMatEntityAddArrayItemDialogComponent],
|
|
1218
|
-
imports: [CommonModule, NgxMatEntityInternalInputModule, MatDialogModule, FormsModule, MatButtonModule],
|
|
1219
|
-
exports: [NgxMatEntityAddArrayItemDialogComponent]
|
|
1220
|
-
}]
|
|
1221
|
-
}] });
|
|
1222
|
-
|
|
1223
|
-
class NgxMatEntityArrayTableModule {
|
|
1224
|
-
}
|
|
1225
|
-
NgxMatEntityArrayTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1226
|
-
NgxMatEntityArrayTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableModule, declarations: [NgxMatEntityArrayTableComponent], imports: [CommonModule,
|
|
1227
|
-
MatInputModule,
|
|
1228
|
-
FormsModule,
|
|
1229
|
-
MatFormFieldModule,
|
|
1230
|
-
MatSelectModule,
|
|
1231
|
-
MatAutocompleteModule,
|
|
1232
|
-
MatCheckboxModule,
|
|
1233
|
-
MatSlideToggleModule,
|
|
1234
|
-
MatTableModule,
|
|
1235
|
-
NgxMatEntityInternalInputModule,
|
|
1236
|
-
MatButtonModule,
|
|
1237
|
-
NgxMatEntityAddArrayItemDialogModule], exports: [NgxMatEntityArrayTableComponent] });
|
|
1238
|
-
NgxMatEntityArrayTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableModule, imports: [[
|
|
1239
|
-
CommonModule,
|
|
1240
|
-
MatInputModule,
|
|
1241
|
-
FormsModule,
|
|
1242
|
-
MatFormFieldModule,
|
|
1243
|
-
MatSelectModule,
|
|
1244
|
-
MatAutocompleteModule,
|
|
1245
|
-
MatCheckboxModule,
|
|
1246
|
-
MatSlideToggleModule,
|
|
1247
|
-
MatTableModule,
|
|
1248
|
-
NgxMatEntityInternalInputModule,
|
|
1249
|
-
MatButtonModule,
|
|
1250
|
-
NgxMatEntityAddArrayItemDialogModule
|
|
1251
|
-
]] });
|
|
1252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableModule, decorators: [{
|
|
1253
|
-
type: NgModule,
|
|
1254
|
-
args: [{
|
|
1255
|
-
declarations: [NgxMatEntityArrayTableComponent],
|
|
1256
|
-
imports: [
|
|
1257
|
-
CommonModule,
|
|
1258
|
-
MatInputModule,
|
|
1259
|
-
FormsModule,
|
|
1260
|
-
MatFormFieldModule,
|
|
1261
|
-
MatSelectModule,
|
|
1262
|
-
MatAutocompleteModule,
|
|
1263
|
-
MatCheckboxModule,
|
|
1264
|
-
MatSlideToggleModule,
|
|
1265
|
-
MatTableModule,
|
|
1266
|
-
NgxMatEntityInternalInputModule,
|
|
1267
|
-
MatButtonModule,
|
|
1268
|
-
NgxMatEntityAddArrayItemDialogModule
|
|
1269
|
-
],
|
|
1270
|
-
exports: [NgxMatEntityArrayTableComponent]
|
|
1271
|
-
}]
|
|
1272
|
-
}] });
|
|
1273
|
-
|
|
1274
1148
|
class NgxMatEntityInputModule {
|
|
1275
1149
|
}
|
|
1276
1150
|
NgxMatEntityInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -1282,9 +1156,11 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
|
|
|
1282
1156
|
MatAutocompleteModule,
|
|
1283
1157
|
MatCheckboxModule,
|
|
1284
1158
|
MatSlideToggleModule,
|
|
1285
|
-
NgxMatEntityArrayTableModule,
|
|
1286
1159
|
MatChipsModule,
|
|
1287
|
-
MatIconModule
|
|
1160
|
+
MatIconModule,
|
|
1161
|
+
MatTableModule,
|
|
1162
|
+
MatDialogModule,
|
|
1163
|
+
MatButtonModule], exports: [NgxMatEntityInputComponent] });
|
|
1288
1164
|
NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, imports: [[
|
|
1289
1165
|
CommonModule,
|
|
1290
1166
|
MatInputModule,
|
|
@@ -1294,14 +1170,18 @@ NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
|
|
|
1294
1170
|
MatAutocompleteModule,
|
|
1295
1171
|
MatCheckboxModule,
|
|
1296
1172
|
MatSlideToggleModule,
|
|
1297
|
-
NgxMatEntityArrayTableModule,
|
|
1298
1173
|
MatChipsModule,
|
|
1299
|
-
MatIconModule
|
|
1174
|
+
MatIconModule,
|
|
1175
|
+
MatTableModule,
|
|
1176
|
+
MatDialogModule,
|
|
1177
|
+
MatButtonModule
|
|
1300
1178
|
]] });
|
|
1301
1179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, decorators: [{
|
|
1302
1180
|
type: NgModule,
|
|
1303
1181
|
args: [{
|
|
1304
|
-
declarations: [
|
|
1182
|
+
declarations: [
|
|
1183
|
+
NgxMatEntityInputComponent,
|
|
1184
|
+
],
|
|
1305
1185
|
imports: [
|
|
1306
1186
|
CommonModule,
|
|
1307
1187
|
MatInputModule,
|
|
@@ -1311,14 +1191,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1311
1191
|
MatAutocompleteModule,
|
|
1312
1192
|
MatCheckboxModule,
|
|
1313
1193
|
MatSlideToggleModule,
|
|
1314
|
-
NgxMatEntityArrayTableModule,
|
|
1315
1194
|
MatChipsModule,
|
|
1316
|
-
MatIconModule
|
|
1195
|
+
MatIconModule,
|
|
1196
|
+
MatTableModule,
|
|
1197
|
+
MatDialogModule,
|
|
1198
|
+
MatButtonModule
|
|
1317
1199
|
],
|
|
1318
1200
|
exports: [NgxMatEntityInputComponent]
|
|
1319
1201
|
}]
|
|
1320
1202
|
}] });
|
|
1321
1203
|
|
|
1204
|
+
/**
|
|
1205
|
+
* The internal CreateEntityDialogData. Requires all default values the user can leave out.
|
|
1206
|
+
*/
|
|
1322
1207
|
class CreateEntityDialogDataInternal {
|
|
1323
1208
|
constructor(entity, EntityServiceClass, createDialogData) {
|
|
1324
1209
|
this.entity = entity;
|
|
@@ -1326,16 +1211,26 @@ class CreateEntityDialogDataInternal {
|
|
|
1326
1211
|
this.createDialogData = createDialogData;
|
|
1327
1212
|
}
|
|
1328
1213
|
}
|
|
1329
|
-
|
|
1214
|
+
/**
|
|
1215
|
+
* The Builder for the CreateEntityDialogData. Sets default values.
|
|
1216
|
+
*/
|
|
1217
|
+
class CreateEntityDialogDataBuilder extends BaseBuilder {
|
|
1330
1218
|
constructor(data) {
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1219
|
+
super(data);
|
|
1220
|
+
}
|
|
1221
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
1222
|
+
generateBaseData(data) {
|
|
1223
|
+
const createDialogData = new CreateDialogDataBuilder(data.createDialogData).getResult();
|
|
1224
|
+
return new CreateEntityDialogDataInternal(data.entity, data.EntityServiceClass, createDialogData);
|
|
1336
1225
|
}
|
|
1337
1226
|
}
|
|
1338
1227
|
|
|
1228
|
+
/**
|
|
1229
|
+
* The default dialog used to create new entities based on the configuration passed in the MAT_DIALOG_DATA "inputData".
|
|
1230
|
+
* Used by the ngx-mat-entity-table.
|
|
1231
|
+
*
|
|
1232
|
+
* It offers a lot of customization options which can be found in "CreateEntityDialogData".
|
|
1233
|
+
*/
|
|
1339
1234
|
class NgxMatEntityCreateDialogComponent {
|
|
1340
1235
|
constructor(inputData, dialogRef, injector, dialog) {
|
|
1341
1236
|
this.inputData = inputData;
|
|
@@ -1346,32 +1241,30 @@ class NgxMatEntityCreateDialogComponent {
|
|
|
1346
1241
|
this.getWidth = EntityUtilities.getWidth;
|
|
1347
1242
|
}
|
|
1348
1243
|
ngOnInit() {
|
|
1349
|
-
this.data = new CreateEntityDialogDataBuilder(this.inputData).
|
|
1244
|
+
this.data = new CreateEntityDialogDataBuilder(this.inputData).getResult();
|
|
1350
1245
|
this.dialogRef.disableClose = true;
|
|
1351
|
-
this.
|
|
1246
|
+
this.entityRows = EntityUtilities.getEntityRows(this.data.entity, true);
|
|
1352
1247
|
this.entityService = this.injector.get(this.data.EntityServiceClass);
|
|
1353
1248
|
}
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
.sort((a, b) => EntityUtilities.compareOrder(a, b, this.data.entity));
|
|
1359
|
-
}
|
|
1249
|
+
/**
|
|
1250
|
+
* Tries add the new entity and close the dialog afterwards.
|
|
1251
|
+
* Also handles the confirmation if required.
|
|
1252
|
+
*/
|
|
1360
1253
|
create() {
|
|
1361
1254
|
if (!this.data.createDialogData?.createRequiresConfirmDialog) {
|
|
1362
1255
|
return this.confirmCreate();
|
|
1363
1256
|
}
|
|
1364
1257
|
const dialogData = new ConfirmDialogDataBuilder(this.data.createDialogData?.confirmCreateDialogData)
|
|
1365
|
-
.
|
|
1366
|
-
.
|
|
1367
|
-
.
|
|
1368
|
-
.
|
|
1369
|
-
const
|
|
1258
|
+
.withDefault('text', ['Do you really want to create this entity?'])
|
|
1259
|
+
.withDefault('confirmButtonLabel', 'Create')
|
|
1260
|
+
.withDefault('title', 'Create')
|
|
1261
|
+
.getResult();
|
|
1262
|
+
const dialogRef = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
|
|
1370
1263
|
data: dialogData,
|
|
1371
1264
|
autoFocus: false,
|
|
1372
1265
|
restoreFocus: false
|
|
1373
1266
|
});
|
|
1374
|
-
|
|
1267
|
+
dialogRef.afterClosed().subscribe((res) => {
|
|
1375
1268
|
if (res === 1) {
|
|
1376
1269
|
this.confirmCreate();
|
|
1377
1270
|
}
|
|
@@ -1380,20 +1273,26 @@ class NgxMatEntityCreateDialogComponent {
|
|
|
1380
1273
|
confirmCreate() {
|
|
1381
1274
|
this.entityService.create(this.data.entity).then(() => this.dialogRef.close());
|
|
1382
1275
|
}
|
|
1276
|
+
/**
|
|
1277
|
+
* Closes the dialog.
|
|
1278
|
+
*/
|
|
1383
1279
|
cancel() {
|
|
1384
1280
|
this.dialogRef.close();
|
|
1385
1281
|
}
|
|
1386
1282
|
}
|
|
1387
1283
|
NgxMatEntityCreateDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
1388
|
-
NgxMatEntityCreateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n
|
|
1284
|
+
NgxMatEntityCreateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\">\n <div class=\"row\" *ngFor=\"let row of entityRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n {{data.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.createDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
|
|
1389
1285
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogComponent, decorators: [{
|
|
1390
1286
|
type: Component,
|
|
1391
|
-
args: [{ selector: 'ngx-mat-entity-create-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n
|
|
1287
|
+
args: [{ selector: 'ngx-mat-entity-create-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\">\n <div class=\"row\" *ngFor=\"let row of entityRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n {{data.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.createDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
|
|
1392
1288
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1393
1289
|
type: Inject,
|
|
1394
1290
|
args: [MAT_DIALOG_DATA]
|
|
1395
1291
|
}] }, { type: i1.MatDialogRef }, { type: i0.Injector }, { type: i1.MatDialog }]; } });
|
|
1396
1292
|
|
|
1293
|
+
/**
|
|
1294
|
+
* The internal EditDialogData. Requires all default values the user can leave out.
|
|
1295
|
+
*/
|
|
1397
1296
|
class EditDialogDataInternal {
|
|
1398
1297
|
constructor(title, confirmButtonLabel, deleteButtonLabel, cancelButtonLabel, deleteRequiresConfirmDialog, editRequiresConfirmDialog, confirmDeleteDialogData, confirmEditDialogData) {
|
|
1399
1298
|
this.title = title;
|
|
@@ -1406,74 +1305,33 @@ class EditDialogDataInternal {
|
|
|
1406
1305
|
this.confirmEditDialogData = confirmEditDialogData;
|
|
1407
1306
|
}
|
|
1408
1307
|
}
|
|
1409
|
-
|
|
1308
|
+
/**
|
|
1309
|
+
* The Builder for the EditDialogData. Sets default values.
|
|
1310
|
+
*/
|
|
1311
|
+
class EditDialogDataBuilder extends BaseBuilder {
|
|
1410
1312
|
constructor(data) {
|
|
1411
|
-
|
|
1412
|
-
|
|
1313
|
+
super(data);
|
|
1314
|
+
}
|
|
1315
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
1316
|
+
generateBaseData(data) {
|
|
1413
1317
|
const confirmEditDialogData = new ConfirmDialogDataBuilder(data?.confirmEditDialogData)
|
|
1414
|
-
.
|
|
1415
|
-
.
|
|
1416
|
-
.
|
|
1417
|
-
.
|
|
1318
|
+
.withDefault('confirmButtonLabel', 'Save')
|
|
1319
|
+
.withDefault('text', ['Do you really want to save all changes?'])
|
|
1320
|
+
.withDefault('title', 'Edit')
|
|
1321
|
+
.getResult();
|
|
1418
1322
|
const confirmDeleteDialogData = new ConfirmDialogDataBuilder(data?.confirmDeleteDialogData)
|
|
1419
|
-
.
|
|
1420
|
-
.
|
|
1421
|
-
.
|
|
1422
|
-
.
|
|
1423
|
-
.
|
|
1424
|
-
|
|
1425
|
-
return this;
|
|
1426
|
-
}
|
|
1427
|
-
withDefaultTitle(title) {
|
|
1428
|
-
if (!this.dataInput?.title) {
|
|
1429
|
-
this.editDialogData.title = title;
|
|
1430
|
-
}
|
|
1431
|
-
return this;
|
|
1432
|
-
}
|
|
1433
|
-
withDefaultConfirmButtonLabel(label) {
|
|
1434
|
-
if (!this.dataInput?.confirmButtonLabel) {
|
|
1435
|
-
this.editDialogData.confirmButtonLabel = label;
|
|
1436
|
-
}
|
|
1437
|
-
return this;
|
|
1438
|
-
}
|
|
1439
|
-
withDefaultDeleteButtonLabel(label) {
|
|
1440
|
-
if (!this.dataInput?.deleteButtonLabel) {
|
|
1441
|
-
this.editDialogData.deleteButtonLabel = label;
|
|
1442
|
-
}
|
|
1443
|
-
return this;
|
|
1444
|
-
}
|
|
1445
|
-
withDefaultCancelButtonLabel(label) {
|
|
1446
|
-
if (!this.dataInput?.cancelButtonLabel) {
|
|
1447
|
-
this.editDialogData.cancelButtonLabel = label;
|
|
1448
|
-
}
|
|
1449
|
-
return this;
|
|
1450
|
-
}
|
|
1451
|
-
withDefaultDeleteRequiresConfirmDialog(deleteRequiresConfirmDialog) {
|
|
1452
|
-
if (!this.dataInput?.deleteRequiresConfirmDialog) {
|
|
1453
|
-
this.editDialogData.deleteRequiresConfirmDialog = deleteRequiresConfirmDialog;
|
|
1454
|
-
}
|
|
1455
|
-
return this;
|
|
1456
|
-
}
|
|
1457
|
-
withDefaultEditRequiresConfirmDialog(editRequiresConfirmDialog) {
|
|
1458
|
-
if (!this.dataInput?.editRequiresConfirmDialog) {
|
|
1459
|
-
this.editDialogData.editRequiresConfirmDialog = editRequiresConfirmDialog;
|
|
1460
|
-
}
|
|
1461
|
-
return this;
|
|
1462
|
-
}
|
|
1463
|
-
withDefaultConfirmDeleteDialogData(confirmDeleteDialogData) {
|
|
1464
|
-
if (!this.dataInput?.confirmDeleteDialogData) {
|
|
1465
|
-
this.editDialogData.confirmDeleteDialogData = confirmDeleteDialogData;
|
|
1466
|
-
}
|
|
1467
|
-
return this;
|
|
1468
|
-
}
|
|
1469
|
-
withDefaultConfirmEditDialogData(confirmEditDialogData) {
|
|
1470
|
-
if (!this.dataInput?.confirmEditDialogData) {
|
|
1471
|
-
this.editDialogData.confirmEditDialogData = confirmEditDialogData;
|
|
1472
|
-
}
|
|
1473
|
-
return this;
|
|
1323
|
+
.withDefault('confirmButtonLabel', 'Delete')
|
|
1324
|
+
.withDefault('type', 'delete')
|
|
1325
|
+
.withDefault('text', ['Do you really want to delete this entity?'])
|
|
1326
|
+
.withDefault('title', 'Delete')
|
|
1327
|
+
.getResult();
|
|
1328
|
+
return new EditDialogDataInternal(data?.title ? data.title : () => 'Edit', data?.confirmButtonLabel ? data.confirmButtonLabel : 'Save', data?.deleteButtonLabel ? data.deleteButtonLabel : 'Delete', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.deleteRequiresConfirmDialog ? data.deleteRequiresConfirmDialog : true, data?.editRequiresConfirmDialog ? data.editRequiresConfirmDialog : false, confirmDeleteDialogData, confirmEditDialogData);
|
|
1474
1329
|
}
|
|
1475
1330
|
}
|
|
1476
1331
|
|
|
1332
|
+
/**
|
|
1333
|
+
* The internal EditEntityDialogData. Requires all default values the user can leave out.
|
|
1334
|
+
*/
|
|
1477
1335
|
class EditEntityDialogDataInternal {
|
|
1478
1336
|
constructor(entity, EntityServiceClass, editDialogData, allowDelete) {
|
|
1479
1337
|
this.entity = entity;
|
|
@@ -1482,16 +1340,26 @@ class EditEntityDialogDataInternal {
|
|
|
1482
1340
|
this.allowDelete = allowDelete;
|
|
1483
1341
|
}
|
|
1484
1342
|
}
|
|
1485
|
-
|
|
1343
|
+
/**
|
|
1344
|
+
* The Builder for the EditEntityDialogData. Sets default values.
|
|
1345
|
+
*/
|
|
1346
|
+
class EditEntityDialogDataBuilder extends BaseBuilder {
|
|
1486
1347
|
constructor(data) {
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1348
|
+
super(data);
|
|
1349
|
+
}
|
|
1350
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
1351
|
+
generateBaseData(data) {
|
|
1352
|
+
const editDialogData = new EditDialogDataBuilder(data.editDialogData).getResult();
|
|
1353
|
+
return new EditEntityDialogDataInternal(data.entity, data.EntityServiceClass, editDialogData, data.allowDelete ? data.allowDelete : () => true);
|
|
1492
1354
|
}
|
|
1493
1355
|
}
|
|
1494
1356
|
|
|
1357
|
+
/**
|
|
1358
|
+
* The default dialog used to edit an existing entity based on the configuration passed in the MAT_DIALOG_DATA "inputData".
|
|
1359
|
+
* Used by the ngx-mat-entity-table.
|
|
1360
|
+
*
|
|
1361
|
+
* It offers a lot of customization options which can be found in "EditEntityDialogData".
|
|
1362
|
+
*/
|
|
1495
1363
|
class NgxMatEntityEditDialogComponent {
|
|
1496
1364
|
constructor(inputData, dialogRef, injector, dialog) {
|
|
1497
1365
|
this.inputData = inputData;
|
|
@@ -1502,33 +1370,31 @@ class NgxMatEntityEditDialogComponent {
|
|
|
1502
1370
|
this.getWidth = EntityUtilities.getWidth;
|
|
1503
1371
|
}
|
|
1504
1372
|
ngOnInit() {
|
|
1505
|
-
this.data = new EditEntityDialogDataBuilder(this.inputData).
|
|
1373
|
+
this.data = new EditEntityDialogDataBuilder(this.inputData).getResult();
|
|
1506
1374
|
this.dialogRef.disableClose = true;
|
|
1507
|
-
this.
|
|
1375
|
+
this.entityRows = EntityUtilities.getEntityRows(this.data.entity, false, true);
|
|
1508
1376
|
this.entityService = this.injector.get(this.data.EntityServiceClass);
|
|
1509
1377
|
this.entityPriorChanges = cloneDeep(this.data.entity);
|
|
1510
1378
|
}
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
.sort((a, b) => EntityUtilities.compareOrder(a, b, this.data.entity));
|
|
1516
|
-
}
|
|
1379
|
+
/**
|
|
1380
|
+
* Tries to save the changes and close the dialog afterwards.
|
|
1381
|
+
* Also handles the confirmation if required.
|
|
1382
|
+
*/
|
|
1517
1383
|
edit() {
|
|
1518
1384
|
if (!this.data.editDialogData.editRequiresConfirmDialog) {
|
|
1519
1385
|
return this.confirmEdit();
|
|
1520
1386
|
}
|
|
1521
1387
|
const dialogData = new ConfirmDialogDataBuilder(this.data.editDialogData.confirmEditDialogData)
|
|
1522
|
-
.
|
|
1523
|
-
.
|
|
1524
|
-
.
|
|
1525
|
-
.
|
|
1526
|
-
const
|
|
1388
|
+
.withDefault('text', ['Do you really want to save all changes?'])
|
|
1389
|
+
.withDefault('confirmButtonLabel', 'Save')
|
|
1390
|
+
.withDefault('title', 'Edit')
|
|
1391
|
+
.getResult();
|
|
1392
|
+
const dialogRef = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
|
|
1527
1393
|
data: dialogData,
|
|
1528
1394
|
autoFocus: false,
|
|
1529
1395
|
restoreFocus: false
|
|
1530
1396
|
});
|
|
1531
|
-
|
|
1397
|
+
dialogRef.afterClosed().subscribe((res) => {
|
|
1532
1398
|
if (res === 1) {
|
|
1533
1399
|
this.confirmEdit();
|
|
1534
1400
|
}
|
|
@@ -1537,22 +1403,26 @@ class NgxMatEntityEditDialogComponent {
|
|
|
1537
1403
|
confirmEdit() {
|
|
1538
1404
|
this.entityService.update(this.data.entity, this.entityPriorChanges).then(() => this.dialogRef.close(1));
|
|
1539
1405
|
}
|
|
1406
|
+
/**
|
|
1407
|
+
* Tries to delete the entity and close the dialog afterwards.
|
|
1408
|
+
* Also handles the confirmation if required.
|
|
1409
|
+
*/
|
|
1540
1410
|
delete() {
|
|
1541
1411
|
if (!this.data.editDialogData.deleteRequiresConfirmDialog) {
|
|
1542
1412
|
return this.confirmDelete();
|
|
1543
1413
|
}
|
|
1544
1414
|
const dialogData = new ConfirmDialogDataBuilder(this.data.editDialogData.confirmDeleteDialogData)
|
|
1545
|
-
.
|
|
1546
|
-
.
|
|
1547
|
-
.
|
|
1548
|
-
.
|
|
1549
|
-
.
|
|
1550
|
-
const
|
|
1415
|
+
.withDefault('text', ['Do you really want to delete this entity?'])
|
|
1416
|
+
.withDefault('type', 'delete')
|
|
1417
|
+
.withDefault('confirmButtonLabel', 'Delete')
|
|
1418
|
+
.withDefault('title', 'Delete')
|
|
1419
|
+
.getResult();
|
|
1420
|
+
const dialogRef = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
|
|
1551
1421
|
data: dialogData,
|
|
1552
1422
|
autoFocus: false,
|
|
1553
1423
|
restoreFocus: false
|
|
1554
1424
|
});
|
|
1555
|
-
|
|
1425
|
+
dialogRef.afterClosed().subscribe((res) => {
|
|
1556
1426
|
if (res === 1) {
|
|
1557
1427
|
this.confirmDelete();
|
|
1558
1428
|
}
|
|
@@ -1561,21 +1431,27 @@ class NgxMatEntityEditDialogComponent {
|
|
|
1561
1431
|
confirmDelete() {
|
|
1562
1432
|
this.entityService.delete(this.entityPriorChanges.id).then(() => this.dialogRef.close(2));
|
|
1563
1433
|
}
|
|
1434
|
+
/**
|
|
1435
|
+
* Reverts all changes made and closes the dialog.
|
|
1436
|
+
*/
|
|
1564
1437
|
cancel() {
|
|
1565
1438
|
EntityUtilities.resetChangesOnEntity(this.data.entity, this.entityPriorChanges);
|
|
1566
1439
|
this.dialogRef.close(0);
|
|
1567
1440
|
}
|
|
1568
1441
|
}
|
|
1569
1442
|
NgxMatEntityEditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityEditDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
1570
|
-
NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n {{data.editDialogData.title(data.entity)}}\n <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n {{data.editDialogData.deleteButtonLabel}}\n </button>\n</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <ngx-mat-entity-input\n
|
|
1443
|
+
NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n {{data.editDialogData.title(data.entity)}}\n <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n {{data.editDialogData.deleteButtonLabel}}\n </button>\n</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <div class=\"row\" *ngFor=\"let row of entityRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"edit()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'update') || !EntityUtilities.dirty(data.entity, entityPriorChanges)\">\n {{data.editDialogData.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.editDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
|
|
1571
1444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityEditDialogComponent, decorators: [{
|
|
1572
1445
|
type: Component,
|
|
1573
|
-
args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<h2 mat-dialog-title>\n {{data.editDialogData.title(data.entity)}}\n <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n {{data.editDialogData.deleteButtonLabel}}\n </button>\n</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <ngx-mat-entity-input\n
|
|
1446
|
+
args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<h2 mat-dialog-title>\n {{data.editDialogData.title(data.entity)}}\n <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n {{data.editDialogData.deleteButtonLabel}}\n </button>\n</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <div class=\"row\" *ngFor=\"let row of entityRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"edit()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'update') || !EntityUtilities.dirty(data.entity, entityPriorChanges)\">\n {{data.editDialogData.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.editDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"] }]
|
|
1574
1447
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1575
1448
|
type: Inject,
|
|
1576
1449
|
args: [MAT_DIALOG_DATA]
|
|
1577
1450
|
}] }, { type: i1.MatDialogRef }, { type: i0.Injector }, { type: i1.MatDialog }]; } });
|
|
1578
1451
|
|
|
1452
|
+
/**
|
|
1453
|
+
* The internal TableData. Requires all default values the user can leave out.
|
|
1454
|
+
*/
|
|
1579
1455
|
class TableDataInternal {
|
|
1580
1456
|
constructor(baseData, createDialogData, editDialogData) {
|
|
1581
1457
|
this.baseData = baseData;
|
|
@@ -1583,14 +1459,21 @@ class TableDataInternal {
|
|
|
1583
1459
|
this.editDialogData = editDialogData;
|
|
1584
1460
|
}
|
|
1585
1461
|
}
|
|
1586
|
-
|
|
1462
|
+
/**
|
|
1463
|
+
* The Builder for the table BaseData. Sets default values.
|
|
1464
|
+
*/
|
|
1465
|
+
class BaseDataBuilder extends BaseBuilder {
|
|
1587
1466
|
constructor(data) {
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1467
|
+
super(data);
|
|
1468
|
+
}
|
|
1469
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
1470
|
+
generateBaseData(data) {
|
|
1471
|
+
return new BaseDataInternal(data.title, data.displayColumns, data.EntityServiceClass, data.searchLabel ? data.searchLabel : 'Search', data.createButtonLabel ? data.createButtonLabel : 'Create', data.searchString ? data.searchString : defaultSearchFunction, data.allowCreate === false ? data.allowCreate : true, data.allowEdit ? data.allowEdit : () => true, data.allowDelete ? data.allowDelete : () => true, data.multiSelectActions ? data.multiSelectActions : [], data.multiSelectLabel ? data.multiSelectLabel : 'Actions', data.EntityClass, data.edit, data.create);
|
|
1592
1472
|
}
|
|
1593
1473
|
}
|
|
1474
|
+
/**
|
|
1475
|
+
* The internal TableData. Requires all default values the user can leave out.
|
|
1476
|
+
*/
|
|
1594
1477
|
class BaseDataInternal {
|
|
1595
1478
|
constructor(title, displayColumns, EntityServiceClass, searchLabel, createButtonLabel, searchString, allowCreate, allowEdit, allowDelete, multiSelectActions, multiSelectLabel, EntityClass, edit, create) {
|
|
1596
1479
|
this.title = title;
|
|
@@ -1609,16 +1492,21 @@ class BaseDataInternal {
|
|
|
1609
1492
|
this.create = create;
|
|
1610
1493
|
}
|
|
1611
1494
|
}
|
|
1612
|
-
|
|
1495
|
+
/**
|
|
1496
|
+
* The Builder for the complete TableData. Sets default values and validates user input.
|
|
1497
|
+
*/
|
|
1498
|
+
class TableDataBuilder extends BaseBuilder {
|
|
1613
1499
|
constructor(data) {
|
|
1614
|
-
|
|
1615
|
-
this.dataInput = data;
|
|
1616
|
-
const createDialogData = new CreateDialogDataBuilder(data.createDialogData).createDialogData;
|
|
1617
|
-
const editDialogData = new EditDialogDataBuilder(data.editDialogData).editDialogData;
|
|
1618
|
-
const baseData = new BaseDataBuilder(data.baseData).baseData;
|
|
1619
|
-
this.tableData = new TableDataInternal(baseData, createDialogData, editDialogData);
|
|
1620
|
-
return this;
|
|
1500
|
+
super(data);
|
|
1621
1501
|
}
|
|
1502
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
1503
|
+
generateBaseData(data) {
|
|
1504
|
+
const createDialogData = new CreateDialogDataBuilder(data.createDialogData).getResult();
|
|
1505
|
+
const editDialogData = new EditDialogDataBuilder(data.editDialogData).getResult();
|
|
1506
|
+
const baseData = new BaseDataBuilder(data.baseData).getResult();
|
|
1507
|
+
return new TableDataInternal(baseData, createDialogData, editDialogData);
|
|
1508
|
+
}
|
|
1509
|
+
// eslint-disable-next-line jsdoc/require-jsdoc
|
|
1622
1510
|
validateInput(data) {
|
|
1623
1511
|
if (data.baseData.multiSelectActions?.length && data.baseData.displayColumns.find(dp => dp.displayName === 'select')) {
|
|
1624
1512
|
throw new Error(`The name "select" for a display column is reserved for the multi-select action functionality.
|
|
@@ -1663,6 +1551,12 @@ function defaultSearchFunction(entity) {
|
|
|
1663
1551
|
return searchString;
|
|
1664
1552
|
}
|
|
1665
1553
|
|
|
1554
|
+
/**
|
|
1555
|
+
* Generates a fully functional table for displaying, creating, updating and deleting entities
|
|
1556
|
+
* based on the configuration passed in the @Input "tableData".
|
|
1557
|
+
*
|
|
1558
|
+
* It offers a lot of customization options which can be found in "TableData".
|
|
1559
|
+
*/
|
|
1666
1560
|
class NgxMatEntityTableComponent {
|
|
1667
1561
|
constructor(dialog, injector) {
|
|
1668
1562
|
this.dialog = dialog;
|
|
@@ -1671,8 +1565,11 @@ class NgxMatEntityTableComponent {
|
|
|
1671
1565
|
this.dataSource = new MatTableDataSource();
|
|
1672
1566
|
this.selection = new SelectionModel(true, []);
|
|
1673
1567
|
}
|
|
1568
|
+
/**
|
|
1569
|
+
* Sets up all the configuration for the table and the EntityService.
|
|
1570
|
+
*/
|
|
1674
1571
|
ngOnInit() {
|
|
1675
|
-
this.data = new TableDataBuilder(this.tableData).
|
|
1572
|
+
this.data = new TableDataBuilder(this.tableData).getResult();
|
|
1676
1573
|
this.entityService = this.injector.get(this.data.baseData.EntityServiceClass);
|
|
1677
1574
|
const givenDisplayColumns = this.data.baseData.displayColumns.map((v) => v.displayName);
|
|
1678
1575
|
if (this.data.baseData.multiSelectActions.length) {
|
|
@@ -1701,6 +1598,12 @@ class NgxMatEntityTableComponent {
|
|
|
1701
1598
|
});
|
|
1702
1599
|
this.entityService.read();
|
|
1703
1600
|
}
|
|
1601
|
+
/**
|
|
1602
|
+
* Edits an entity. This either calls the edit-Method provided by the user or uses a default edit-dialog.
|
|
1603
|
+
*
|
|
1604
|
+
* @param entity - The entity that should be updated.
|
|
1605
|
+
* @throws When no EntityClass was provided, as a new call is needed to initialize metadata.
|
|
1606
|
+
*/
|
|
1704
1607
|
editEntity(entity) {
|
|
1705
1608
|
if (this.data.baseData.allowEdit(entity)) {
|
|
1706
1609
|
if (!this.data.baseData.EntityClass) {
|
|
@@ -1721,7 +1624,7 @@ class NgxMatEntityTableComponent {
|
|
|
1721
1624
|
allowDelete: this.data.baseData.allowDelete,
|
|
1722
1625
|
editDialogData: this.data.editDialogData
|
|
1723
1626
|
};
|
|
1724
|
-
const dialogData = new EditEntityDialogDataBuilder(inputDialogData).
|
|
1627
|
+
const dialogData = new EditEntityDialogDataBuilder(inputDialogData).getResult();
|
|
1725
1628
|
firstValueFrom(this.dialog.open(NgxMatEntityEditDialogComponent, {
|
|
1726
1629
|
data: dialogData,
|
|
1727
1630
|
minWidth: '60%',
|
|
@@ -1736,6 +1639,11 @@ class NgxMatEntityTableComponent {
|
|
|
1736
1639
|
}
|
|
1737
1640
|
});
|
|
1738
1641
|
}
|
|
1642
|
+
/**
|
|
1643
|
+
* Creates a new Entity. This either calls the create-Method provided by the user or uses a default create-dialog.
|
|
1644
|
+
*
|
|
1645
|
+
* @throws When no EntityClass was provided, as a new call is needed to initialize metadata.
|
|
1646
|
+
*/
|
|
1739
1647
|
createEntity() {
|
|
1740
1648
|
if (this.data.baseData.allowCreate) {
|
|
1741
1649
|
if (!this.data.baseData.EntityClass) {
|
|
@@ -1754,7 +1662,7 @@ class NgxMatEntityTableComponent {
|
|
|
1754
1662
|
entity: entity,
|
|
1755
1663
|
EntityServiceClass: this.data.baseData.EntityServiceClass,
|
|
1756
1664
|
createDialogData: this.data.createDialogData
|
|
1757
|
-
}).
|
|
1665
|
+
}).getResult();
|
|
1758
1666
|
this.dialog.open(NgxMatEntityCreateDialogComponent, {
|
|
1759
1667
|
data: dialogData,
|
|
1760
1668
|
minWidth: '60%',
|
|
@@ -1762,19 +1670,26 @@ class NgxMatEntityTableComponent {
|
|
|
1762
1670
|
restoreFocus: false
|
|
1763
1671
|
});
|
|
1764
1672
|
}
|
|
1673
|
+
/**
|
|
1674
|
+
* Runs the MultiAction for all selected entries.
|
|
1675
|
+
* Also handles confirmation with an additional dialog if configured.
|
|
1676
|
+
*
|
|
1677
|
+
* @param action - The MultiAction to run.
|
|
1678
|
+
*/
|
|
1765
1679
|
runMultiAction(action) {
|
|
1766
1680
|
if (!action.requireConfirmDialog || !action.requireConfirmDialog(this.selection.selected)) {
|
|
1767
1681
|
return this.confirmRunMultiAction(action);
|
|
1768
1682
|
}
|
|
1769
1683
|
const dialogData = new ConfirmDialogDataBuilder(action.confirmDialogData)
|
|
1770
|
-
.
|
|
1771
|
-
.
|
|
1772
|
-
|
|
1684
|
+
.withDefault('text', [`Do you really want to run this action on ${this.selection.selected.length} entries?`])
|
|
1685
|
+
.withDefault('title', action.displayName)
|
|
1686
|
+
.getResult();
|
|
1687
|
+
const dialogRef = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
|
|
1773
1688
|
data: dialogData,
|
|
1774
1689
|
autoFocus: false,
|
|
1775
1690
|
restoreFocus: false
|
|
1776
1691
|
});
|
|
1777
|
-
|
|
1692
|
+
dialogRef.afterClosed().subscribe((res) => {
|
|
1778
1693
|
if (res === 1) {
|
|
1779
1694
|
this.confirmRunMultiAction(action);
|
|
1780
1695
|
}
|
|
@@ -1783,6 +1698,12 @@ class NgxMatEntityTableComponent {
|
|
|
1783
1698
|
confirmRunMultiAction(action) {
|
|
1784
1699
|
action.action(this.selection.selected);
|
|
1785
1700
|
}
|
|
1701
|
+
/**
|
|
1702
|
+
* Checks if an MultiAction is disabled (e.g. Because no entries have been selected).
|
|
1703
|
+
*
|
|
1704
|
+
* @param action - The MultiAction to check.
|
|
1705
|
+
* @returns Whether or not the Action can be used.
|
|
1706
|
+
*/
|
|
1786
1707
|
multiActionDisabled(action) {
|
|
1787
1708
|
if (!this.selection.selected.length) {
|
|
1788
1709
|
return true;
|
|
@@ -1792,6 +1713,9 @@ class NgxMatEntityTableComponent {
|
|
|
1792
1713
|
}
|
|
1793
1714
|
return false;
|
|
1794
1715
|
}
|
|
1716
|
+
/**
|
|
1717
|
+
* Toggles all entries in the table.
|
|
1718
|
+
*/
|
|
1795
1719
|
masterToggle() {
|
|
1796
1720
|
if (this.isAllSelected()) {
|
|
1797
1721
|
this.selection.clear();
|
|
@@ -1800,6 +1724,12 @@ class NgxMatEntityTableComponent {
|
|
|
1800
1724
|
this.dataSource.data.forEach((row) => this.selection.select(row));
|
|
1801
1725
|
}
|
|
1802
1726
|
}
|
|
1727
|
+
/**
|
|
1728
|
+
* Checks if all entries in the table have been selected.
|
|
1729
|
+
* This is needed to display the "masterToggle"-checkbox correctly.
|
|
1730
|
+
*
|
|
1731
|
+
* @returns Whether or not all entries in the table have been selected.
|
|
1732
|
+
*/
|
|
1803
1733
|
isAllSelected() {
|
|
1804
1734
|
const numSelected = this.selection.selected.length;
|
|
1805
1735
|
const numRows = this.dataSource.data.length;
|
|
@@ -1809,16 +1739,21 @@ class NgxMatEntityTableComponent {
|
|
|
1809
1739
|
this.onDestroy.next(undefined);
|
|
1810
1740
|
this.onDestroy.complete();
|
|
1811
1741
|
}
|
|
1742
|
+
/**
|
|
1743
|
+
* Applies the search input to filter the table entries.
|
|
1744
|
+
*
|
|
1745
|
+
* @param event - The keyup-event which contains the search-string of the user.
|
|
1746
|
+
*/
|
|
1812
1747
|
applyFilter(event) {
|
|
1813
1748
|
const filterValue = event.target.value;
|
|
1814
1749
|
this.dataSource.filter = filterValue.trim().toLowerCase();
|
|
1815
1750
|
}
|
|
1816
1751
|
}
|
|
1817
1752
|
NgxMatEntityTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
1818
|
-
NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n <mat-label>{{data.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyFilter($event)\" />\n </mat-form-field>\n <div\n *ngIf=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-2]=\"data.baseData.allowCreate\"\n [class.col-lg-4]=\"!data.baseData.allowCreate\"\n [class.col-md-3]=\"data.baseData.allowCreate\"\n [class.col-md-6]=\"!data.baseData.allowCreate\"\n [class.col-sm-6]=\"data.baseData.allowCreate\"\n [class.col-sm-12]=\"!data.baseData.allowCreate\"\n >\n <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n {{data.baseData.multiSelectLabel}}\n </button>\n </div>\n <mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n {{action.displayName}}\n </button>\n </mat-menu>\n\n <div\n *ngIf=\"data.baseData.allowCreate\"\n [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n >\n <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n {{data.baseData.createButtonLabel}}\n </button>\n </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button
|
|
1753
|
+
NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n <mat-label>{{data.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyFilter($event)\" />\n </mat-form-field>\n <div\n *ngIf=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-2]=\"data.baseData.allowCreate\"\n [class.col-lg-4]=\"!data.baseData.allowCreate\"\n [class.col-md-3]=\"data.baseData.allowCreate\"\n [class.col-md-6]=\"!data.baseData.allowCreate\"\n [class.col-sm-6]=\"data.baseData.allowCreate\"\n [class.col-sm-12]=\"!data.baseData.allowCreate\"\n >\n <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n {{data.baseData.multiSelectLabel}}\n </button>\n </div>\n <mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n {{action.displayName}}\n </button>\n </mat-menu>\n\n <div\n *ngIf=\"data.baseData.allowCreate\"\n [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n >\n <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n {{data.baseData.createButtonLabel}}\n </button>\n </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i2.MatLabel, selector: "mat-label" }, { type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
|
|
1819
1754
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
|
|
1820
1755
|
type: Component,
|
|
1821
|
-
args: [{ selector: 'ngx-mat-entity-table', template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n <mat-label>{{data.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyFilter($event)\" />\n </mat-form-field>\n <div\n *ngIf=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-2]=\"data.baseData.allowCreate\"\n [class.col-lg-4]=\"!data.baseData.allowCreate\"\n [class.col-md-3]=\"data.baseData.allowCreate\"\n [class.col-md-6]=\"!data.baseData.allowCreate\"\n [class.col-sm-6]=\"data.baseData.allowCreate\"\n [class.col-sm-12]=\"!data.baseData.allowCreate\"\n >\n <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n {{data.baseData.multiSelectLabel}}\n </button>\n </div>\n <mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n {{action.displayName}}\n </button>\n </mat-menu>\n\n <div\n *ngIf=\"data.baseData.allowCreate\"\n [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n >\n <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n {{data.baseData.createButtonLabel}}\n </button>\n </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button
|
|
1756
|
+
args: [{ selector: 'ngx-mat-entity-table', template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n <mat-label>{{data.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyFilter($event)\" />\n </mat-form-field>\n <div\n *ngIf=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-2]=\"data.baseData.allowCreate\"\n [class.col-lg-4]=\"!data.baseData.allowCreate\"\n [class.col-md-3]=\"data.baseData.allowCreate\"\n [class.col-md-6]=\"!data.baseData.allowCreate\"\n [class.col-sm-6]=\"data.baseData.allowCreate\"\n [class.col-sm-12]=\"!data.baseData.allowCreate\"\n >\n <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n {{data.baseData.multiSelectLabel}}\n </button>\n </div>\n <mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n {{action.displayName}}\n </button>\n </mat-menu>\n\n <div\n *ngIf=\"data.baseData.allowCreate\"\n [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n >\n <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n {{data.baseData.createButtonLabel}}\n </button>\n </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
|
|
1822
1757
|
}], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.Injector }]; }, propDecorators: { tableData: [{
|
|
1823
1758
|
type: Input
|
|
1824
1759
|
}], paginator: [{
|
|
@@ -1832,61 +1767,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1832
1767
|
args: ['filter', { static: true }]
|
|
1833
1768
|
}] } });
|
|
1834
1769
|
|
|
1835
|
-
class
|
|
1770
|
+
class NgxMatEntityCreateDialogModule {
|
|
1836
1771
|
}
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1772
|
+
NgxMatEntityCreateDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1773
|
+
NgxMatEntityCreateDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, declarations: [NgxMatEntityCreateDialogComponent], imports: [CommonModule,
|
|
1774
|
+
NgxMatEntityInputModule,
|
|
1775
|
+
MatDialogModule,
|
|
1840
1776
|
FormsModule,
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
MatTableModule,
|
|
1844
|
-
MatPaginatorModule,
|
|
1845
|
-
MatButtonModule,
|
|
1846
|
-
MatMenuModule,
|
|
1847
|
-
MatDialogModule], exports: [NgxMatEntityTableComponent] });
|
|
1848
|
-
NgxMatEntityTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, imports: [[
|
|
1777
|
+
MatButtonModule], exports: [NgxMatEntityCreateDialogComponent] });
|
|
1778
|
+
NgxMatEntityCreateDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, imports: [[
|
|
1849
1779
|
CommonModule,
|
|
1850
|
-
|
|
1780
|
+
NgxMatEntityInputModule,
|
|
1781
|
+
MatDialogModule,
|
|
1851
1782
|
FormsModule,
|
|
1852
|
-
|
|
1853
|
-
MatCheckboxModule,
|
|
1854
|
-
MatTableModule,
|
|
1855
|
-
MatPaginatorModule,
|
|
1856
|
-
MatButtonModule,
|
|
1857
|
-
MatMenuModule,
|
|
1858
|
-
MatDialogModule
|
|
1783
|
+
MatButtonModule
|
|
1859
1784
|
]] });
|
|
1860
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type:
|
|
1785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, decorators: [{
|
|
1861
1786
|
type: NgModule,
|
|
1862
1787
|
args: [{
|
|
1863
|
-
declarations: [
|
|
1788
|
+
declarations: [NgxMatEntityCreateDialogComponent],
|
|
1864
1789
|
imports: [
|
|
1865
1790
|
CommonModule,
|
|
1866
|
-
|
|
1791
|
+
NgxMatEntityInputModule,
|
|
1792
|
+
MatDialogModule,
|
|
1867
1793
|
FormsModule,
|
|
1868
|
-
|
|
1869
|
-
MatCheckboxModule,
|
|
1870
|
-
MatTableModule,
|
|
1871
|
-
MatPaginatorModule,
|
|
1872
|
-
MatButtonModule,
|
|
1873
|
-
MatMenuModule,
|
|
1874
|
-
MatDialogModule
|
|
1794
|
+
MatButtonModule
|
|
1875
1795
|
],
|
|
1876
|
-
exports: [NgxMatEntityTableComponent]
|
|
1877
|
-
}]
|
|
1878
|
-
}] });
|
|
1879
|
-
|
|
1880
|
-
class NgxMatEntityCreateDialogModule {
|
|
1881
|
-
}
|
|
1882
|
-
NgxMatEntityCreateDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1883
|
-
NgxMatEntityCreateDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, declarations: [NgxMatEntityCreateDialogComponent], imports: [CommonModule, NgxMatEntityInputModule, MatDialogModule, FormsModule, MatButtonModule], exports: [NgxMatEntityCreateDialogComponent] });
|
|
1884
|
-
NgxMatEntityCreateDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, imports: [[CommonModule, NgxMatEntityInputModule, MatDialogModule, FormsModule, MatButtonModule]] });
|
|
1885
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, decorators: [{
|
|
1886
|
-
type: NgModule,
|
|
1887
|
-
args: [{
|
|
1888
|
-
declarations: [NgxMatEntityCreateDialogComponent],
|
|
1889
|
-
imports: [CommonModule, NgxMatEntityInputModule, MatDialogModule, FormsModule, MatButtonModule],
|
|
1890
1796
|
exports: [NgxMatEntityCreateDialogComponent]
|
|
1891
1797
|
}]
|
|
1892
1798
|
}] });
|
|
@@ -1924,8 +1830,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1924
1830
|
}]
|
|
1925
1831
|
}] });
|
|
1926
1832
|
|
|
1833
|
+
class NgxMatEntityTableModule {
|
|
1834
|
+
}
|
|
1835
|
+
NgxMatEntityTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1836
|
+
NgxMatEntityTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, declarations: [NgxMatEntityTableComponent], imports: [CommonModule,
|
|
1837
|
+
MatInputModule,
|
|
1838
|
+
FormsModule,
|
|
1839
|
+
MatFormFieldModule,
|
|
1840
|
+
MatCheckboxModule,
|
|
1841
|
+
MatTableModule,
|
|
1842
|
+
MatPaginatorModule,
|
|
1843
|
+
MatButtonModule,
|
|
1844
|
+
MatMenuModule,
|
|
1845
|
+
MatDialogModule,
|
|
1846
|
+
NgxMatEntityCreateDialogModule,
|
|
1847
|
+
NgxMatEntityEditDialogModule], exports: [NgxMatEntityTableComponent] });
|
|
1848
|
+
NgxMatEntityTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, imports: [[
|
|
1849
|
+
CommonModule,
|
|
1850
|
+
MatInputModule,
|
|
1851
|
+
FormsModule,
|
|
1852
|
+
MatFormFieldModule,
|
|
1853
|
+
MatCheckboxModule,
|
|
1854
|
+
MatTableModule,
|
|
1855
|
+
MatPaginatorModule,
|
|
1856
|
+
MatButtonModule,
|
|
1857
|
+
MatMenuModule,
|
|
1858
|
+
MatDialogModule,
|
|
1859
|
+
NgxMatEntityCreateDialogModule,
|
|
1860
|
+
NgxMatEntityEditDialogModule,
|
|
1861
|
+
]] });
|
|
1862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, decorators: [{
|
|
1863
|
+
type: NgModule,
|
|
1864
|
+
args: [{
|
|
1865
|
+
declarations: [NgxMatEntityTableComponent],
|
|
1866
|
+
imports: [
|
|
1867
|
+
CommonModule,
|
|
1868
|
+
MatInputModule,
|
|
1869
|
+
FormsModule,
|
|
1870
|
+
MatFormFieldModule,
|
|
1871
|
+
MatCheckboxModule,
|
|
1872
|
+
MatTableModule,
|
|
1873
|
+
MatPaginatorModule,
|
|
1874
|
+
MatButtonModule,
|
|
1875
|
+
MatMenuModule,
|
|
1876
|
+
MatDialogModule,
|
|
1877
|
+
NgxMatEntityCreateDialogModule,
|
|
1878
|
+
NgxMatEntityEditDialogModule,
|
|
1879
|
+
],
|
|
1880
|
+
exports: [NgxMatEntityTableComponent]
|
|
1881
|
+
}]
|
|
1882
|
+
}] });
|
|
1883
|
+
|
|
1884
|
+
/**
|
|
1885
|
+
* The internal EntityArrayDecoratorConfig. Sets default values.
|
|
1886
|
+
*/
|
|
1887
|
+
class EntityArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
1888
|
+
constructor(data) {
|
|
1889
|
+
super(data);
|
|
1890
|
+
this.createInline = data.createInline != undefined ? data.createInline : true;
|
|
1891
|
+
this.displayStyle = data.displayStyle;
|
|
1892
|
+
this.itemType = data.itemType;
|
|
1893
|
+
this.EntityClass = data.EntityClass;
|
|
1894
|
+
this.displayColumns = data.displayColumns;
|
|
1895
|
+
this.createInline = data.createInline != undefined ? data.createInline : true;
|
|
1896
|
+
this.missingErrorMessage = data.missingErrorMessage ? data.missingErrorMessage : 'Needs to contain at least one value';
|
|
1897
|
+
this.defaultWidths = data.defaultWidths ? data.defaultWidths : [12, 12, 12];
|
|
1898
|
+
this.addButtonLabel = data.addButtonLabel ? data.addButtonLabel : 'Add';
|
|
1899
|
+
this.removeButtonLabel = data.removeButtonLabel ? data.removeButtonLabel : 'Remove';
|
|
1900
|
+
}
|
|
1901
|
+
}
|
|
1902
|
+
/**
|
|
1903
|
+
* The internal StringChipsArrayDecoratorConfig. Sets default values.
|
|
1904
|
+
*/
|
|
1905
|
+
class StringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
1906
|
+
constructor(data) {
|
|
1907
|
+
super(data);
|
|
1908
|
+
this.deleteIcon = data.deleteIcon ? data.deleteIcon : 'fas fa-circle-minus';
|
|
1909
|
+
this.displayStyle = data.displayStyle;
|
|
1910
|
+
this.itemType = data.itemType;
|
|
1911
|
+
this.maxLength = data.maxLength;
|
|
1912
|
+
this.minLength = data.minLength;
|
|
1913
|
+
this.regex = data.regex;
|
|
1914
|
+
this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
|
|
1915
|
+
}
|
|
1916
|
+
}
|
|
1917
|
+
/**
|
|
1918
|
+
* The internal AutocompleteStringChipsArrayDecoratorConfig. Sets default values.
|
|
1919
|
+
*/
|
|
1920
|
+
class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
1921
|
+
constructor(data) {
|
|
1922
|
+
super(data);
|
|
1923
|
+
this.autocompleteValues = data.autocompleteValues;
|
|
1924
|
+
this.deleteIcon = data.deleteIcon ? data.deleteIcon : 'fas fa-circle-minus';
|
|
1925
|
+
this.displayStyle = data.displayStyle;
|
|
1926
|
+
this.itemType = data.itemType;
|
|
1927
|
+
this.maxLength = data.maxLength;
|
|
1928
|
+
this.minLength = data.minLength;
|
|
1929
|
+
this.regex = data.regex;
|
|
1930
|
+
this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
|
|
1931
|
+
}
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1927
1934
|
/**
|
|
1928
|
-
* Decorator for setting and getting array
|
|
1935
|
+
* Decorator for setting and getting array property metadata.
|
|
1929
1936
|
*
|
|
1930
1937
|
* @param metadata - The metadata of the array property.
|
|
1931
1938
|
* @returns The method that defines the metadata.
|
|
@@ -1957,6 +1964,9 @@ class PropertyDecoratorConfig {
|
|
|
1957
1964
|
class ArrayDecoratorConfig extends PropertyDecoratorConfig {
|
|
1958
1965
|
}
|
|
1959
1966
|
|
|
1967
|
+
/**
|
|
1968
|
+
* The internal DropdownBooleanDecoratorConfig. Sets default values.
|
|
1969
|
+
*/
|
|
1960
1970
|
class DropdownBooleanDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
1961
1971
|
constructor(data) {
|
|
1962
1972
|
super(data);
|
|
@@ -1965,21 +1975,29 @@ class DropdownBooleanDecoratorConfigInternal extends PropertyDecoratorConfigInte
|
|
|
1965
1975
|
this.dropdownFalse = data.dropdownFalse;
|
|
1966
1976
|
}
|
|
1967
1977
|
}
|
|
1978
|
+
/**
|
|
1979
|
+
* The internal CheckboxBooleanDecoratorConfig. Sets default values.
|
|
1980
|
+
*/
|
|
1968
1981
|
class CheckboxBooleanDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
1969
1982
|
constructor(data) {
|
|
1970
1983
|
super(data);
|
|
1971
1984
|
this.displayStyle = data.displayStyle;
|
|
1985
|
+
this.required = data.required === undefined ? false : data.required;
|
|
1972
1986
|
}
|
|
1973
1987
|
}
|
|
1988
|
+
/**
|
|
1989
|
+
* The internal ToggleBooleanDecoratorConfig. Sets default values.
|
|
1990
|
+
*/
|
|
1974
1991
|
class ToggleBooleanDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
1975
1992
|
constructor(data) {
|
|
1976
1993
|
super(data);
|
|
1977
1994
|
this.displayStyle = data.displayStyle;
|
|
1995
|
+
this.required = data.required === undefined ? false : data.required;
|
|
1978
1996
|
}
|
|
1979
1997
|
}
|
|
1980
1998
|
|
|
1981
1999
|
/**
|
|
1982
|
-
* Decorator for setting and getting boolean
|
|
2000
|
+
* Decorator for setting and getting boolean property metadata.
|
|
1983
2001
|
*
|
|
1984
2002
|
* @param metadata - The metadata of the boolean property.
|
|
1985
2003
|
* @returns The method that defines the metadata.
|
|
@@ -2002,6 +2020,9 @@ function boolean(metadata) {
|
|
|
2002
2020
|
class BooleanDecoratorConfig extends PropertyDecoratorConfig {
|
|
2003
2021
|
}
|
|
2004
2022
|
|
|
2023
|
+
/**
|
|
2024
|
+
* The internal DefaultNumberDecoratorConfig. Sets default values.
|
|
2025
|
+
*/
|
|
2005
2026
|
class DefaultNumberDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
2006
2027
|
constructor(data) {
|
|
2007
2028
|
super(data);
|
|
@@ -2010,6 +2031,9 @@ class DefaultNumberDecoratorConfigInternal extends PropertyDecoratorConfigIntern
|
|
|
2010
2031
|
this.min = data.min;
|
|
2011
2032
|
}
|
|
2012
2033
|
}
|
|
2034
|
+
/**
|
|
2035
|
+
* The internal DropdownNumberDecoratorConfig. Sets default values.
|
|
2036
|
+
*/
|
|
2013
2037
|
class DropdownNumberDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
2014
2038
|
constructor(data) {
|
|
2015
2039
|
super(data);
|
|
@@ -2019,7 +2043,7 @@ class DropdownNumberDecoratorConfigInternal extends PropertyDecoratorConfigInter
|
|
|
2019
2043
|
}
|
|
2020
2044
|
|
|
2021
2045
|
/**
|
|
2022
|
-
* Decorator for setting and getting string
|
|
2046
|
+
* Decorator for setting and getting string property metadata.
|
|
2023
2047
|
*
|
|
2024
2048
|
* @param metadata - The metadata of the string property.
|
|
2025
2049
|
* @returns The method that defines the metadata.
|
|
@@ -2039,6 +2063,9 @@ function number(metadata) {
|
|
|
2039
2063
|
class NumberDecoratorConfig extends PropertyDecoratorConfig {
|
|
2040
2064
|
}
|
|
2041
2065
|
|
|
2066
|
+
/**
|
|
2067
|
+
* The internal DefaultObjectDecoratorConfig. Sets default values.
|
|
2068
|
+
*/
|
|
2042
2069
|
class DefaultObjectDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
|
|
2043
2070
|
constructor(data) {
|
|
2044
2071
|
super(data);
|
|
@@ -2048,7 +2075,7 @@ class DefaultObjectDecoratorConfigInternal extends PropertyDecoratorConfigIntern
|
|
|
2048
2075
|
}
|
|
2049
2076
|
|
|
2050
2077
|
/**
|
|
2051
|
-
* Decorator for setting and getting object
|
|
2078
|
+
* Decorator for setting and getting object property metadata.
|
|
2052
2079
|
*
|
|
2053
2080
|
* @param metadata - The metadata of the object property.
|
|
2054
2081
|
* @returns The method that defines the metadata.
|