@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
|
|
@@ -381,7 +389,10 @@ class UploadImageComponent {
|
|
|
381
389
|
this.uploadPath = '/files/upload';
|
|
382
390
|
this.deletePath = '/files/';
|
|
383
391
|
this.path = '/files/';
|
|
392
|
+
this.imageUploaded = new EventEmitter();
|
|
393
|
+
this.imageDeleted = new EventEmitter();
|
|
384
394
|
this.dragActive = false;
|
|
395
|
+
this.loading = false;
|
|
385
396
|
}
|
|
386
397
|
/**
|
|
387
398
|
* The dragOver function is called when the user drags a file over the dropzone. It prevents the default action of the
|
|
@@ -428,6 +439,7 @@ class UploadImageComponent {
|
|
|
428
439
|
if (this.validExtensions.includes(file.type)) {
|
|
429
440
|
const fileReader = new FileReader();
|
|
430
441
|
fileReader.onload = () => {
|
|
442
|
+
this.loading = true;
|
|
431
443
|
this.fileUrl = fileReader.result;
|
|
432
444
|
this.selectedFile = file;
|
|
433
445
|
this.upload();
|
|
@@ -453,7 +465,9 @@ class UploadImageComponent {
|
|
|
453
465
|
this.httpClient.post(this.url + this.uploadPath, data).subscribe((result) => {
|
|
454
466
|
if (result?.id) {
|
|
455
467
|
this.control.setValue(result.id);
|
|
468
|
+
this.imageUploaded.emit(result.id);
|
|
456
469
|
}
|
|
470
|
+
this.loading = false;
|
|
457
471
|
});
|
|
458
472
|
}
|
|
459
473
|
/**
|
|
@@ -462,6 +476,7 @@ class UploadImageComponent {
|
|
|
462
476
|
* @param [id] - The id of the file to delete.
|
|
463
477
|
*/
|
|
464
478
|
deleteFile(id) {
|
|
479
|
+
this.loading = true;
|
|
465
480
|
this.selectedFile = null;
|
|
466
481
|
this.fileUrl = null;
|
|
467
482
|
if (id) {
|
|
@@ -469,15 +484,17 @@ class UploadImageComponent {
|
|
|
469
484
|
this.selectedFile = null;
|
|
470
485
|
this.fileUrl = null;
|
|
471
486
|
this.control.setValue('');
|
|
487
|
+
this.imageDeleted.emit();
|
|
488
|
+
this.loading = false;
|
|
472
489
|
});
|
|
473
490
|
}
|
|
474
491
|
}
|
|
475
492
|
}
|
|
476
493
|
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 });
|
|
477
|
-
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:
|
|
494
|
+
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"] }] });
|
|
478
495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UploadImageComponent, decorators: [{
|
|
479
496
|
type: Component,
|
|
480
|
-
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:
|
|
497
|
+
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"] }]
|
|
481
498
|
}], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; }, propDecorators: { id: [{
|
|
482
499
|
type: Input
|
|
483
500
|
}], name: [{
|
|
@@ -502,6 +519,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
502
519
|
type: Input
|
|
503
520
|
}], path: [{
|
|
504
521
|
type: Input
|
|
522
|
+
}], imageUploaded: [{
|
|
523
|
+
type: Output
|
|
524
|
+
}], imageDeleted: [{
|
|
525
|
+
type: Output
|
|
505
526
|
}] } });
|
|
506
527
|
|
|
507
528
|
class RefenceInputComponent {
|
|
@@ -563,11 +584,18 @@ class ModelFormSubComponent {
|
|
|
563
584
|
constructor(authService) {
|
|
564
585
|
this.authService = authService;
|
|
565
586
|
this.config = {};
|
|
587
|
+
this.imageChanged = new EventEmitter();
|
|
566
588
|
this.keys = [];
|
|
567
589
|
}
|
|
568
590
|
ngOnInit() {
|
|
569
|
-
|
|
570
|
-
|
|
591
|
+
// Get keys
|
|
592
|
+
const unsortedKeys = Object.keys(this.fields);
|
|
593
|
+
// Sort keys by config order
|
|
594
|
+
this.keys = unsortedKeys.sort((a, b) => {
|
|
595
|
+
return (this.config[b]?.order ? this.config[b]?.order : 0) - (this.config[a]?.order ? this.config[a]?.order : 0);
|
|
596
|
+
});
|
|
597
|
+
// Set user for roles check
|
|
598
|
+
this.user = BasicUser.map(this.authService.currentUser);
|
|
571
599
|
}
|
|
572
600
|
/**
|
|
573
601
|
* It takes a string, capitalizes the first letter, and returns the new string
|
|
@@ -578,6 +606,25 @@ class ModelFormSubComponent {
|
|
|
578
606
|
capitalizeFirstLetter(value) {
|
|
579
607
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
580
608
|
}
|
|
609
|
+
/**
|
|
610
|
+
* It takes an array of values and returns an array of objects with a value and text property
|
|
611
|
+
*
|
|
612
|
+
* @param values - any[] - the array of values that you want to convert to a selectable list
|
|
613
|
+
* @param config
|
|
614
|
+
* @returns An array of objects with a value and text property.
|
|
615
|
+
*/
|
|
616
|
+
prepareEnumForSelect(values, config = {}) {
|
|
617
|
+
return values
|
|
618
|
+
.filter((i) => {
|
|
619
|
+
return !(config && config[i]?.roles && !this.user.hasAllRoles(config[i]?.roles));
|
|
620
|
+
})
|
|
621
|
+
.map((e) => {
|
|
622
|
+
return {
|
|
623
|
+
value: e,
|
|
624
|
+
text: config && config[e]?.text ? config[e].text : e,
|
|
625
|
+
};
|
|
626
|
+
});
|
|
627
|
+
}
|
|
581
628
|
/**
|
|
582
629
|
* It takes an AbstractControl and returns a FormControl
|
|
583
630
|
*
|
|
@@ -589,23 +636,26 @@ class ModelFormSubComponent {
|
|
|
589
636
|
}
|
|
590
637
|
}
|
|
591
638
|
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 });
|
|
592
|
-
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 && (
|
|
639
|
+
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"] }] });
|
|
593
640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, decorators: [{
|
|
594
641
|
type: Component,
|
|
595
|
-
args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type && (
|
|
642
|
+
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: [""] }]
|
|
596
643
|
}], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { fields: [{
|
|
597
644
|
type: Input
|
|
598
645
|
}], form: [{
|
|
599
646
|
type: Input
|
|
600
647
|
}], config: [{
|
|
601
648
|
type: Input
|
|
649
|
+
}], imageChanged: [{
|
|
650
|
+
type: Output
|
|
602
651
|
}] } });
|
|
603
652
|
|
|
604
653
|
class ModelFormComponent {
|
|
605
|
-
constructor(graphQLMetaService, graphQLService, formsService) {
|
|
654
|
+
constructor(graphQLMetaService, graphQLService, formsService, authService) {
|
|
606
655
|
this.graphQLMetaService = graphQLMetaService;
|
|
607
656
|
this.graphQLService = graphQLService;
|
|
608
657
|
this.formsService = formsService;
|
|
658
|
+
this.authService = authService;
|
|
609
659
|
this.delete = true;
|
|
610
660
|
this.logging = false;
|
|
611
661
|
this.config = {};
|
|
@@ -614,6 +664,8 @@ class ModelFormComponent {
|
|
|
614
664
|
this.keys = [];
|
|
615
665
|
}
|
|
616
666
|
ngOnInit() {
|
|
667
|
+
// Set user for roles check
|
|
668
|
+
this.user = BasicUser.map(this.authService.currentUser);
|
|
617
669
|
this.graphQLMetaService.getMeta().subscribe((meta) => {
|
|
618
670
|
this.meta = meta;
|
|
619
671
|
if (this.modelName) {
|
|
@@ -668,11 +720,17 @@ class ModelFormComponent {
|
|
|
668
720
|
type: GraphQLRequestType.QUERY,
|
|
669
721
|
})
|
|
670
722
|
.subscribe({
|
|
671
|
-
next: (
|
|
723
|
+
next: (response) => {
|
|
672
724
|
if (this.logging) {
|
|
673
|
-
console.log('ModelFormComponent::get->value',
|
|
725
|
+
console.log('ModelFormComponent::get->value', response);
|
|
726
|
+
}
|
|
727
|
+
this.form.patchValue({ ...{}, ...response });
|
|
728
|
+
// Process patchFields for reference input
|
|
729
|
+
for (const [key, value] of Object.entries(this.config)) {
|
|
730
|
+
if (this.config[key]?.patchField) {
|
|
731
|
+
this.form.get(key).patchValue(response[this.config[key]?.patchField]?.id);
|
|
732
|
+
}
|
|
674
733
|
}
|
|
675
|
-
this.form.patchValue({ ...{}, ...value });
|
|
676
734
|
},
|
|
677
735
|
error: (err) => {
|
|
678
736
|
console.error('Error on load object', err);
|
|
@@ -691,7 +749,12 @@ class ModelFormComponent {
|
|
|
691
749
|
const requestFields = [];
|
|
692
750
|
for (const [key, value] of Object.entries(fields)) {
|
|
693
751
|
if (fields[key]?.type) {
|
|
694
|
-
|
|
752
|
+
if (!this.config[key]?.patchField) {
|
|
753
|
+
requestFields.push(key);
|
|
754
|
+
}
|
|
755
|
+
else {
|
|
756
|
+
requestFields.push({ [this.config[key]?.patchField]: ['id'] });
|
|
757
|
+
}
|
|
695
758
|
}
|
|
696
759
|
else {
|
|
697
760
|
const subkeys = this.createRequestObject(fields[key]);
|
|
@@ -763,9 +826,11 @@ class ModelFormComponent {
|
|
|
763
826
|
*
|
|
764
827
|
* @returns The id of the newly created or updated object.
|
|
765
828
|
*/
|
|
766
|
-
submit() {
|
|
767
|
-
|
|
768
|
-
|
|
829
|
+
submit(secret = false) {
|
|
830
|
+
if (!secret) {
|
|
831
|
+
this.loading = true;
|
|
832
|
+
}
|
|
833
|
+
if (this.form.invalid && !secret) {
|
|
769
834
|
this.formsService.validateAllFormFields(this.form);
|
|
770
835
|
this.loading = false;
|
|
771
836
|
return;
|
|
@@ -778,30 +843,41 @@ class ModelFormComponent {
|
|
|
778
843
|
if (this.logging) {
|
|
779
844
|
console.log('ModelFormComponent::submit->formValue', this.form.value);
|
|
780
845
|
}
|
|
846
|
+
const data = Object.assign({}, this.form.value);
|
|
847
|
+
for (const [key, value] of Object.entries(data)) {
|
|
848
|
+
if ((this.config[key]?.roles ? !this.user.hasAllRoles(this.config[key]?.roles) : false) ||
|
|
849
|
+
this.config[key]?.exclude) {
|
|
850
|
+
delete data[key];
|
|
851
|
+
}
|
|
852
|
+
}
|
|
781
853
|
this.graphQLService
|
|
782
854
|
.graphQl(this.operation + this.capitalizeFirstLetter(this.modelName), {
|
|
783
|
-
arguments: this.operation === 'update' ? { id: this.id, input:
|
|
855
|
+
arguments: this.operation === 'update' ? { id: this.id, input: data } : { input: data },
|
|
784
856
|
fields: ['id'],
|
|
785
857
|
type: GraphQLRequestType.MUTATION,
|
|
786
858
|
})
|
|
787
859
|
.subscribe({
|
|
788
860
|
next: (value) => {
|
|
789
|
-
|
|
790
|
-
|
|
861
|
+
if (!secret) {
|
|
862
|
+
this.loading = false;
|
|
863
|
+
this.finished.emit(true);
|
|
864
|
+
}
|
|
791
865
|
},
|
|
792
866
|
error: (err) => {
|
|
793
|
-
|
|
794
|
-
|
|
867
|
+
if (!secret) {
|
|
868
|
+
console.error('Failed on ' + this.operation, err);
|
|
869
|
+
this.loading = false;
|
|
870
|
+
}
|
|
795
871
|
},
|
|
796
872
|
});
|
|
797
873
|
}
|
|
798
874
|
}
|
|
799
|
-
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 });
|
|
800
|
-
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
|
|
875
|
+
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 });
|
|
876
|
+
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"] }] });
|
|
801
877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, decorators: [{
|
|
802
878
|
type: Component,
|
|
803
|
-
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
|
|
804
|
-
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }]; }, propDecorators: { modelName: [{
|
|
879
|
+
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: [""] }]
|
|
880
|
+
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }, { type: i1$1.AuthService }]; }, propDecorators: { modelName: [{
|
|
805
881
|
type: Input
|
|
806
882
|
}], label: [{
|
|
807
883
|
type: Input
|