@lenne.tech/ng-base 13.21.0 → 13.22.0
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/base-components/components/model-form/model-form.component.d.ts +5 -3
- package/base-components/components/model-form-sub/model-form-sub.component.d.ts +14 -2
- package/base-components/components/select/select.component.d.ts +4 -1
- package/base-components/components/upload-image/upload-image.component.d.ts +5 -1
- package/esm2020/base-components/components/model-form/model-form.component.mjs +46 -19
- package/esm2020/base-components/components/model-form-sub/model-form-sub.component.mjs +42 -12
- package/esm2020/base-components/components/select/select.component.mjs +13 -5
- package/esm2020/base-components/components/upload-image/upload-image.component.mjs +17 -4
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +110 -29
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +104 -28
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
|
|
2
|
+
import { Component, Input, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/forms';
|
|
4
4
|
import { FormControl, Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
@@ -7,7 +7,7 @@ import { CommonModule } from '@angular/common';
|
|
|
7
7
|
import { trigger, transition, query, style, animate } from '@angular/animations';
|
|
8
8
|
import { Subscription } from 'rxjs';
|
|
9
9
|
import * as i1$1 from '@lenne.tech/ng-base/shared';
|
|
10
|
-
import { ToastType, GraphQLRequestType } from '@lenne.tech/ng-base/shared';
|
|
10
|
+
import { ToastType, GraphQLRequestType, BasicUser } from '@lenne.tech/ng-base/shared';
|
|
11
11
|
import * as i1$2 from '@angular/common/http';
|
|
12
12
|
|
|
13
13
|
class InputComponent {
|
|
@@ -50,13 +50,21 @@ class SelectComponent {
|
|
|
50
50
|
this.search = false;
|
|
51
51
|
this.options = [];
|
|
52
52
|
}
|
|
53
|
+
ngOnInit() {
|
|
54
|
+
if (this.multiple) {
|
|
55
|
+
this.select.nativeElement.setAttribute('multiple', true);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
53
58
|
}
|
|
54
59
|
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55
|
-
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <select\n [id]=\"id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [attr.data-live-search]=\"search\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [
|
|
60
|
+
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <select\n #select\n [id]=\"id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [attr.data-live-search]=\"search\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n >\n <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n {{ option.text }}\n </option>\n </select>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
56
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SelectComponent, decorators: [{
|
|
57
62
|
type: Component,
|
|
58
|
-
args: [{ selector: 'base-select', template: "<div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <select\n [id]=\"id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [attr.data-live-search]=\"search\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [
|
|
59
|
-
}], propDecorators: {
|
|
63
|
+
args: [{ selector: 'base-select', template: "<div class=\"form-group mb-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <select\n #select\n [id]=\"id\"\n [name]=\"name\"\n class=\"form-select\"\n [attr.aria-label]=\"placeholder\"\n [attr.data-live-search]=\"search\"\n [formControl]=\"control\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex ?? null\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n >\n <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n {{ option.text }}\n </option>\n </select>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}\n"] }]
|
|
64
|
+
}], propDecorators: { select: [{
|
|
65
|
+
type: ViewChild,
|
|
66
|
+
args: ['select']
|
|
67
|
+
}], id: [{
|
|
60
68
|
type: Input
|
|
61
69
|
}], name: [{
|
|
62
70
|
type: Input
|
|
@@ -382,7 +390,10 @@ class UploadImageComponent {
|
|
|
382
390
|
this.uploadPath = '/files/upload';
|
|
383
391
|
this.deletePath = '/files/';
|
|
384
392
|
this.path = '/files/';
|
|
393
|
+
this.imageUploaded = new EventEmitter();
|
|
394
|
+
this.imageDeleted = new EventEmitter();
|
|
385
395
|
this.dragActive = false;
|
|
396
|
+
this.loading = false;
|
|
386
397
|
}
|
|
387
398
|
/**
|
|
388
399
|
* The dragOver function is called when the user drags a file over the dropzone. It prevents the default action of the
|
|
@@ -429,6 +440,7 @@ class UploadImageComponent {
|
|
|
429
440
|
if (this.validExtensions.includes(file.type)) {
|
|
430
441
|
const fileReader = new FileReader();
|
|
431
442
|
fileReader.onload = () => {
|
|
443
|
+
this.loading = true;
|
|
432
444
|
this.fileUrl = fileReader.result;
|
|
433
445
|
this.selectedFile = file;
|
|
434
446
|
this.upload();
|
|
@@ -454,7 +466,9 @@ class UploadImageComponent {
|
|
|
454
466
|
this.httpClient.post(this.url + this.uploadPath, data).subscribe((result) => {
|
|
455
467
|
if (result === null || result === void 0 ? void 0 : result.id) {
|
|
456
468
|
this.control.setValue(result.id);
|
|
469
|
+
this.imageUploaded.emit(result.id);
|
|
457
470
|
}
|
|
471
|
+
this.loading = false;
|
|
458
472
|
});
|
|
459
473
|
}
|
|
460
474
|
/**
|
|
@@ -463,6 +477,7 @@ class UploadImageComponent {
|
|
|
463
477
|
* @param [id] - The id of the file to delete.
|
|
464
478
|
*/
|
|
465
479
|
deleteFile(id) {
|
|
480
|
+
this.loading = true;
|
|
466
481
|
this.selectedFile = null;
|
|
467
482
|
this.fileUrl = null;
|
|
468
483
|
if (id) {
|
|
@@ -470,15 +485,17 @@ class UploadImageComponent {
|
|
|
470
485
|
this.selectedFile = null;
|
|
471
486
|
this.fileUrl = null;
|
|
472
487
|
this.control.setValue('');
|
|
488
|
+
this.imageDeleted.emit();
|
|
489
|
+
this.loading = false;
|
|
473
490
|
});
|
|
474
491
|
}
|
|
475
492
|
}
|
|
476
493
|
}
|
|
477
494
|
UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
478
|
-
UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", dragText: "dragText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path" }, ngImport: i0, template: "<div class=\"mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <ng-container *ngIf=\"selectedFile && !control?.value\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\">or <span class=\"button\" (click)=\"fileInput.click()\">browse</span></span>\n <input type=\"file\" (change)=\"selectFile($event)\" hidden #fileInput />\n <span class=\"support\">{{ supportText }}</span>\n </ng-container>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.drag-area{height:
|
|
495
|
+
UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", dragText: "dragText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted" }, ngImport: i0, template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !control?.value && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !loading\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\">or <span class=\"button\" (click)=\"fileInput.click()\">browse</span></span>\n <input type=\"file\" (change)=\"selectFile($event)\" hidden #fileInput />\n <span class=\"support\">{{ supportText }}</span>\n </ng-container>\n </div>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
479
496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UploadImageComponent, decorators: [{
|
|
480
497
|
type: Component,
|
|
481
|
-
args: [{ selector: 'base-upload-image', template: "<div class=\"mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <ng-container *ngIf=\"selectedFile && !control?.value\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\">or <span class=\"button\" (click)=\"fileInput.click()\">browse</span></span>\n <input type=\"file\" (change)=\"selectFile($event)\" hidden #fileInput />\n <span class=\"support\">{{ supportText }}</span>\n </ng-container>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.drag-area{height:
|
|
498
|
+
args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n <div\n class=\"drag-area\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{ active: dragActive }\"\n >\n <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n <div class=\"spinner-border text-primary\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"selectedFile && !control?.value && !loading\">\n <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n <button class=\"btn btn-danger\" (click)=\"deleteFile()\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"control?.value && !loading\">\n <img [src]=\"url + path + control?.value\" />\n <button class=\"btn btn-danger\" (click)=\"deleteFile(control?.value)\">L\u00F6schen</button>\n </ng-container>\n\n <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n <div class=\"icon\">\n <i class=\"bi bi-images\"></i>\n </div>\n\n <span class=\"header\">{{ dragText }}</span>\n <span class=\"header\">or <span class=\"button\" (click)=\"fileInput.click()\">browse</span></span>\n <input type=\"file\" (change)=\"selectFile($event)\" hidden #fileInput />\n <span class=\"support\">{{ supportText }}</span>\n </ng-container>\n </div>\n\n <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n <div *ngIf=\"control?.errors?.['minlength']\">\n Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['maxlength']\">\n Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n </div>\n <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:300px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}\n"] }]
|
|
482
499
|
}], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; }, propDecorators: { id: [{
|
|
483
500
|
type: Input
|
|
484
501
|
}], name: [{
|
|
@@ -503,6 +520,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
503
520
|
type: Input
|
|
504
521
|
}], path: [{
|
|
505
522
|
type: Input
|
|
523
|
+
}], imageUploaded: [{
|
|
524
|
+
type: Output
|
|
525
|
+
}], imageDeleted: [{
|
|
526
|
+
type: Output
|
|
506
527
|
}] } });
|
|
507
528
|
|
|
508
529
|
class RefenceInputComponent {
|
|
@@ -564,11 +585,19 @@ class ModelFormSubComponent {
|
|
|
564
585
|
constructor(authService) {
|
|
565
586
|
this.authService = authService;
|
|
566
587
|
this.config = {};
|
|
588
|
+
this.imageChanged = new EventEmitter();
|
|
567
589
|
this.keys = [];
|
|
568
590
|
}
|
|
569
591
|
ngOnInit() {
|
|
570
|
-
|
|
571
|
-
|
|
592
|
+
// Get keys
|
|
593
|
+
const unsortedKeys = Object.keys(this.fields);
|
|
594
|
+
// Sort keys by config order
|
|
595
|
+
this.keys = unsortedKeys.sort((a, b) => {
|
|
596
|
+
var _a, _b, _c, _d;
|
|
597
|
+
return (((_a = this.config[b]) === null || _a === void 0 ? void 0 : _a.order) ? (_b = this.config[b]) === null || _b === void 0 ? void 0 : _b.order : 0) - (((_c = this.config[a]) === null || _c === void 0 ? void 0 : _c.order) ? (_d = this.config[a]) === null || _d === void 0 ? void 0 : _d.order : 0);
|
|
598
|
+
});
|
|
599
|
+
// Set user for roles check
|
|
600
|
+
this.user = BasicUser.map(this.authService.currentUser);
|
|
572
601
|
}
|
|
573
602
|
/**
|
|
574
603
|
* It takes a string, capitalizes the first letter, and returns the new string
|
|
@@ -579,6 +608,27 @@ class ModelFormSubComponent {
|
|
|
579
608
|
capitalizeFirstLetter(value) {
|
|
580
609
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
581
610
|
}
|
|
611
|
+
/**
|
|
612
|
+
* It takes an array of values and returns an array of objects with a value and text property
|
|
613
|
+
*
|
|
614
|
+
* @param values - any[] - the array of values that you want to convert to a selectable list
|
|
615
|
+
* @param config
|
|
616
|
+
* @returns An array of objects with a value and text property.
|
|
617
|
+
*/
|
|
618
|
+
prepareEnumForSelect(values, config = {}) {
|
|
619
|
+
return values
|
|
620
|
+
.filter((i) => {
|
|
621
|
+
var _a, _b;
|
|
622
|
+
return !(config && ((_a = config[i]) === null || _a === void 0 ? void 0 : _a.roles) && !this.user.hasAllRoles((_b = config[i]) === null || _b === void 0 ? void 0 : _b.roles));
|
|
623
|
+
})
|
|
624
|
+
.map((e) => {
|
|
625
|
+
var _a;
|
|
626
|
+
return {
|
|
627
|
+
value: e,
|
|
628
|
+
text: config && ((_a = config[e]) === null || _a === void 0 ? void 0 : _a.text) ? config[e].text : e,
|
|
629
|
+
};
|
|
630
|
+
});
|
|
631
|
+
}
|
|
582
632
|
/**
|
|
583
633
|
* It takes an AbstractControl and returns a FormControl
|
|
584
634
|
*
|
|
@@ -590,23 +640,26 @@ class ModelFormSubComponent {
|
|
|
590
640
|
}
|
|
591
641
|
}
|
|
592
642
|
ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
593
|
-
ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type && (
|
|
643
|
+
ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n <fieldset class=\"border rounded-3 p-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [fields]=\"fields[key]\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container *ngIf=\"fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n <ng-container *ngIf=\"fields[key]?.isEnum\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n (imageDeleted)=\"imageChanged.emit()\"\n (imageUploaded)=\"imageChanged.emit()\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.fields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [""], components: [{ type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"], outputs: ["imageChanged"] }, { type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required"] }, { type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "dragText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path"], outputs: ["imageUploaded", "imageDeleted"] }, { type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "nameField"] }, { type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
|
|
594
644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, decorators: [{
|
|
595
645
|
type: Component,
|
|
596
|
-
args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type && (
|
|
646
|
+
args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n <fieldset class=\"border rounded-3 p-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [fields]=\"fields[key]\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container *ngIf=\"fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n <ng-container *ngIf=\"fields[key]?.isEnum\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n (imageDeleted)=\"imageChanged.emit()\"\n (imageUploaded)=\"imageChanged.emit()\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.fields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [""] }]
|
|
597
647
|
}], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { fields: [{
|
|
598
648
|
type: Input
|
|
599
649
|
}], form: [{
|
|
600
650
|
type: Input
|
|
601
651
|
}], config: [{
|
|
602
652
|
type: Input
|
|
653
|
+
}], imageChanged: [{
|
|
654
|
+
type: Output
|
|
603
655
|
}] } });
|
|
604
656
|
|
|
605
657
|
class ModelFormComponent {
|
|
606
|
-
constructor(graphQLMetaService, graphQLService, formsService) {
|
|
658
|
+
constructor(graphQLMetaService, graphQLService, formsService, authService) {
|
|
607
659
|
this.graphQLMetaService = graphQLMetaService;
|
|
608
660
|
this.graphQLService = graphQLService;
|
|
609
661
|
this.formsService = formsService;
|
|
662
|
+
this.authService = authService;
|
|
610
663
|
this.delete = true;
|
|
611
664
|
this.logging = false;
|
|
612
665
|
this.config = {};
|
|
@@ -615,6 +668,8 @@ class ModelFormComponent {
|
|
|
615
668
|
this.keys = [];
|
|
616
669
|
}
|
|
617
670
|
ngOnInit() {
|
|
671
|
+
// Set user for roles check
|
|
672
|
+
this.user = BasicUser.map(this.authService.currentUser);
|
|
618
673
|
this.graphQLMetaService.getMeta().subscribe((meta) => {
|
|
619
674
|
this.meta = meta;
|
|
620
675
|
if (this.modelName) {
|
|
@@ -669,11 +724,18 @@ class ModelFormComponent {
|
|
|
669
724
|
type: GraphQLRequestType.QUERY,
|
|
670
725
|
})
|
|
671
726
|
.subscribe({
|
|
672
|
-
next: (
|
|
727
|
+
next: (response) => {
|
|
728
|
+
var _a, _b, _c;
|
|
673
729
|
if (this.logging) {
|
|
674
|
-
console.log('ModelFormComponent::get->value',
|
|
730
|
+
console.log('ModelFormComponent::get->value', response);
|
|
731
|
+
}
|
|
732
|
+
this.form.patchValue(Object.assign({}, response));
|
|
733
|
+
// Process patchFields for reference input
|
|
734
|
+
for (const [key, value] of Object.entries(this.config)) {
|
|
735
|
+
if ((_a = this.config[key]) === null || _a === void 0 ? void 0 : _a.patchField) {
|
|
736
|
+
this.form.get(key).patchValue((_c = response[(_b = this.config[key]) === null || _b === void 0 ? void 0 : _b.patchField]) === null || _c === void 0 ? void 0 : _c.id);
|
|
737
|
+
}
|
|
675
738
|
}
|
|
676
|
-
this.form.patchValue(Object.assign({}, value));
|
|
677
739
|
},
|
|
678
740
|
error: (err) => {
|
|
679
741
|
console.error('Error on load object', err);
|
|
@@ -689,11 +751,16 @@ class ModelFormComponent {
|
|
|
689
751
|
* @returns An array of strings and objects.
|
|
690
752
|
*/
|
|
691
753
|
createRequestObject(fields) {
|
|
692
|
-
var _a;
|
|
754
|
+
var _a, _b, _c;
|
|
693
755
|
const requestFields = [];
|
|
694
756
|
for (const [key, value] of Object.entries(fields)) {
|
|
695
757
|
if ((_a = fields[key]) === null || _a === void 0 ? void 0 : _a.type) {
|
|
696
|
-
|
|
758
|
+
if (!((_b = this.config[key]) === null || _b === void 0 ? void 0 : _b.patchField)) {
|
|
759
|
+
requestFields.push(key);
|
|
760
|
+
}
|
|
761
|
+
else {
|
|
762
|
+
requestFields.push({ [(_c = this.config[key]) === null || _c === void 0 ? void 0 : _c.patchField]: ['id'] });
|
|
763
|
+
}
|
|
697
764
|
}
|
|
698
765
|
else {
|
|
699
766
|
const subkeys = this.createRequestObject(fields[key]);
|
|
@@ -766,9 +833,12 @@ class ModelFormComponent {
|
|
|
766
833
|
*
|
|
767
834
|
* @returns The id of the newly created or updated object.
|
|
768
835
|
*/
|
|
769
|
-
submit() {
|
|
770
|
-
|
|
771
|
-
if (
|
|
836
|
+
submit(secret = false) {
|
|
837
|
+
var _a, _b, _c;
|
|
838
|
+
if (!secret) {
|
|
839
|
+
this.loading = true;
|
|
840
|
+
}
|
|
841
|
+
if (this.form.invalid && !secret) {
|
|
772
842
|
this.formsService.validateAllFormFields(this.form);
|
|
773
843
|
this.loading = false;
|
|
774
844
|
return;
|
|
@@ -781,30 +851,41 @@ class ModelFormComponent {
|
|
|
781
851
|
if (this.logging) {
|
|
782
852
|
console.log('ModelFormComponent::submit->formValue', this.form.value);
|
|
783
853
|
}
|
|
854
|
+
const data = Object.assign({}, this.form.value);
|
|
855
|
+
for (const [key, value] of Object.entries(data)) {
|
|
856
|
+
if ((((_a = this.config[key]) === null || _a === void 0 ? void 0 : _a.roles) ? !this.user.hasAllRoles((_b = this.config[key]) === null || _b === void 0 ? void 0 : _b.roles) : false) ||
|
|
857
|
+
((_c = this.config[key]) === null || _c === void 0 ? void 0 : _c.exclude)) {
|
|
858
|
+
delete data[key];
|
|
859
|
+
}
|
|
860
|
+
}
|
|
784
861
|
this.graphQLService
|
|
785
862
|
.graphQl(this.operation + this.capitalizeFirstLetter(this.modelName), {
|
|
786
|
-
arguments: this.operation === 'update' ? { id: this.id, input:
|
|
863
|
+
arguments: this.operation === 'update' ? { id: this.id, input: data } : { input: data },
|
|
787
864
|
fields: ['id'],
|
|
788
865
|
type: GraphQLRequestType.MUTATION,
|
|
789
866
|
})
|
|
790
867
|
.subscribe({
|
|
791
868
|
next: (value) => {
|
|
792
|
-
|
|
793
|
-
|
|
869
|
+
if (!secret) {
|
|
870
|
+
this.loading = false;
|
|
871
|
+
this.finished.emit(true);
|
|
872
|
+
}
|
|
794
873
|
},
|
|
795
874
|
error: (err) => {
|
|
796
|
-
|
|
797
|
-
|
|
875
|
+
if (!secret) {
|
|
876
|
+
console.error('Failed on ' + this.operation, err);
|
|
877
|
+
this.loading = false;
|
|
878
|
+
}
|
|
798
879
|
},
|
|
799
880
|
});
|
|
800
881
|
}
|
|
801
882
|
}
|
|
802
|
-
ModelFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.FormsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
803
|
-
ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormComponent, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", logging: "logging", config: "config" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n <h2>\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <form [formGroup]=\"form\">\n <base-model-form-sub
|
|
883
|
+
ModelFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.FormsService }, { token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
884
|
+
ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormComponent, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", logging: "logging", config: "config" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n <h2>\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <form [formGroup]=\"form\">\n <base-model-form-sub\n [fields]=\"fields\"\n [config]=\"config\"\n [form]=\"form\"\n (imageChanged)=\"submit(true)\"\n ></base-model-form-sub>\n\n <div class=\"d-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n <div *ngIf=\"id && delete\">\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n </div>\n <div>\n <button class=\"btn btn-primary\" type=\"button\" (click)=\"submit(false)\" *ngIf=\"!loading\">\n {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n </button>\n <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n </button>\n </div>\n </div>\n </form>\n</div>\n", styles: [""], components: [{ type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"], outputs: ["imageChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
804
885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, decorators: [{
|
|
805
886
|
type: Component,
|
|
806
|
-
args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n <h2>\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <form [formGroup]=\"form\">\n <base-model-form-sub
|
|
807
|
-
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }]; }, propDecorators: { modelName: [{
|
|
887
|
+
args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n <h2>\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <form [formGroup]=\"form\">\n <base-model-form-sub\n [fields]=\"fields\"\n [config]=\"config\"\n [form]=\"form\"\n (imageChanged)=\"submit(true)\"\n ></base-model-form-sub>\n\n <div class=\"d-flex mt-4\" [ngClass]=\"id && delete ? 'justify-content-between' : 'justify-content-end'\">\n <div *ngIf=\"id && delete\">\n <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteObject()\">L\u00F6schen</button>\n </div>\n <div>\n <button class=\"btn btn-primary\" type=\"button\" (click)=\"submit(false)\" *ngIf=\"!loading\">\n {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}\n </button>\n <button class=\"btn btn-primary\" type=\"button\" disabled *ngIf=\"loading\">\n <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\n {{ operation === 'create' ? 'Erstellen' : 'Speichern' }}...\n </button>\n </div>\n </div>\n </form>\n</div>\n", styles: [""] }]
|
|
888
|
+
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }, { type: i1$1.AuthService }]; }, propDecorators: { modelName: [{
|
|
808
889
|
type: Input
|
|
809
890
|
}], label: [{
|
|
810
891
|
type: Input
|