@lenne.tech/ng-base 13.20.0 → 13.22.1
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 +18 -2
- package/base-components/components/model-table/model-table.component.d.ts +23 -1
- 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/base-prototype/pages/profile/profile.component.d.ts +11 -2
- package/esm2020/base-components/components/model-form/model-form.component.mjs +50 -19
- package/esm2020/base-components/components/model-form-sub/model-form-sub.component.mjs +47 -14
- package/esm2020/base-components/components/model-table/model-table.component.mjs +14 -5
- 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/esm2020/base-prototype/pages/profile/profile.component.mjs +21 -6
- package/esm2020/shared/services/user.service.mjs +1 -2
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +133 -37
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-base-prototype.mjs +17 -3
- package/fesm2015/lenne.tech-ng-base-base-prototype.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-shared.mjs +0 -1
- package/fesm2015/lenne.tech-ng-base-shared.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +125 -34
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-prototype.mjs +17 -3
- package/fesm2020/lenne.tech-ng-base-base-prototype.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-shared.mjs +0 -1
- package/fesm2020/lenne.tech-ng-base-shared.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 {
|
|
@@ -561,12 +582,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
561
582
|
}] } });
|
|
562
583
|
|
|
563
584
|
class ModelFormSubComponent {
|
|
564
|
-
constructor() {
|
|
585
|
+
constructor(authService) {
|
|
586
|
+
this.authService = authService;
|
|
565
587
|
this.config = {};
|
|
588
|
+
this.imageChanged = new EventEmitter();
|
|
566
589
|
this.keys = [];
|
|
567
590
|
}
|
|
568
591
|
ngOnInit() {
|
|
569
|
-
|
|
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);
|
|
570
601
|
}
|
|
571
602
|
/**
|
|
572
603
|
* It takes a string, capitalizes the first letter, and returns the new string
|
|
@@ -577,6 +608,27 @@ class ModelFormSubComponent {
|
|
|
577
608
|
capitalizeFirstLetter(value) {
|
|
578
609
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
579
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
|
+
}
|
|
580
632
|
/**
|
|
581
633
|
* It takes an AbstractControl and returns a FormControl
|
|
582
634
|
*
|
|
@@ -587,24 +639,27 @@ class ModelFormSubComponent {
|
|
|
587
639
|
return control;
|
|
588
640
|
}
|
|
589
641
|
}
|
|
590
|
-
ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
591
|
-
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\">\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\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n
|
|
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 });
|
|
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"] }] });
|
|
592
644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, decorators: [{
|
|
593
645
|
type: Component,
|
|
594
|
-
args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type\">\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\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n
|
|
595
|
-
}], propDecorators: { fields: [{
|
|
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: [""] }]
|
|
647
|
+
}], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { fields: [{
|
|
596
648
|
type: Input
|
|
597
649
|
}], form: [{
|
|
598
650
|
type: Input
|
|
599
651
|
}], config: [{
|
|
600
652
|
type: Input
|
|
653
|
+
}], imageChanged: [{
|
|
654
|
+
type: Output
|
|
601
655
|
}] } });
|
|
602
656
|
|
|
603
657
|
class ModelFormComponent {
|
|
604
|
-
constructor(graphQLMetaService, graphQLService, formsService) {
|
|
658
|
+
constructor(graphQLMetaService, graphQLService, formsService, authService) {
|
|
605
659
|
this.graphQLMetaService = graphQLMetaService;
|
|
606
660
|
this.graphQLService = graphQLService;
|
|
607
661
|
this.formsService = formsService;
|
|
662
|
+
this.authService = authService;
|
|
608
663
|
this.delete = true;
|
|
609
664
|
this.logging = false;
|
|
610
665
|
this.config = {};
|
|
@@ -613,6 +668,8 @@ class ModelFormComponent {
|
|
|
613
668
|
this.keys = [];
|
|
614
669
|
}
|
|
615
670
|
ngOnInit() {
|
|
671
|
+
// Set user for roles check
|
|
672
|
+
this.user = BasicUser.map(this.authService.currentUser);
|
|
616
673
|
this.graphQLMetaService.getMeta().subscribe((meta) => {
|
|
617
674
|
this.meta = meta;
|
|
618
675
|
if (this.modelName) {
|
|
@@ -667,11 +724,18 @@ class ModelFormComponent {
|
|
|
667
724
|
type: GraphQLRequestType.QUERY,
|
|
668
725
|
})
|
|
669
726
|
.subscribe({
|
|
670
|
-
next: (
|
|
727
|
+
next: (response) => {
|
|
728
|
+
var _a, _b, _c;
|
|
671
729
|
if (this.logging) {
|
|
672
|
-
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
|
+
}
|
|
673
738
|
}
|
|
674
|
-
this.form.patchValue(Object.assign({}, value));
|
|
675
739
|
},
|
|
676
740
|
error: (err) => {
|
|
677
741
|
console.error('Error on load object', err);
|
|
@@ -687,11 +751,16 @@ class ModelFormComponent {
|
|
|
687
751
|
* @returns An array of strings and objects.
|
|
688
752
|
*/
|
|
689
753
|
createRequestObject(fields) {
|
|
690
|
-
var _a;
|
|
754
|
+
var _a, _b, _c;
|
|
691
755
|
const requestFields = [];
|
|
692
756
|
for (const [key, value] of Object.entries(fields)) {
|
|
693
757
|
if ((_a = fields[key]) === null || _a === void 0 ? void 0 : _a.type) {
|
|
694
|
-
|
|
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
|
+
}
|
|
695
764
|
}
|
|
696
765
|
else {
|
|
697
766
|
const subkeys = this.createRequestObject(fields[key]);
|
|
@@ -764,9 +833,12 @@ class ModelFormComponent {
|
|
|
764
833
|
*
|
|
765
834
|
* @returns The id of the newly created or updated object.
|
|
766
835
|
*/
|
|
767
|
-
submit() {
|
|
768
|
-
|
|
769
|
-
if (
|
|
836
|
+
submit(secret = false) {
|
|
837
|
+
var _a, _b, _c, _d;
|
|
838
|
+
if (!secret) {
|
|
839
|
+
this.loading = true;
|
|
840
|
+
}
|
|
841
|
+
if (this.form.invalid && !secret) {
|
|
770
842
|
this.formsService.validateAllFormFields(this.form);
|
|
771
843
|
this.loading = false;
|
|
772
844
|
return;
|
|
@@ -779,30 +851,45 @@ class ModelFormComponent {
|
|
|
779
851
|
if (this.logging) {
|
|
780
852
|
console.log('ModelFormComponent::submit->formValue', this.form.value);
|
|
781
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
|
+
// Set type for graphql method
|
|
861
|
+
if (((_d = this.fields[key]) === null || _d === void 0 ? void 0 : _d.type) === 'Float') {
|
|
862
|
+
data[key] = Number(value);
|
|
863
|
+
}
|
|
864
|
+
}
|
|
782
865
|
this.graphQLService
|
|
783
866
|
.graphQl(this.operation + this.capitalizeFirstLetter(this.modelName), {
|
|
784
|
-
arguments: this.operation === 'update' ? { id: this.id, input:
|
|
867
|
+
arguments: this.operation === 'update' ? { id: this.id, input: data } : { input: data },
|
|
785
868
|
fields: ['id'],
|
|
786
869
|
type: GraphQLRequestType.MUTATION,
|
|
787
870
|
})
|
|
788
871
|
.subscribe({
|
|
789
872
|
next: (value) => {
|
|
790
|
-
|
|
791
|
-
|
|
873
|
+
if (!secret) {
|
|
874
|
+
this.loading = false;
|
|
875
|
+
this.finished.emit(true);
|
|
876
|
+
}
|
|
792
877
|
},
|
|
793
878
|
error: (err) => {
|
|
794
|
-
|
|
795
|
-
|
|
879
|
+
if (!secret) {
|
|
880
|
+
console.error('Failed on ' + this.operation, err);
|
|
881
|
+
this.loading = false;
|
|
882
|
+
}
|
|
796
883
|
},
|
|
797
884
|
});
|
|
798
885
|
}
|
|
799
886
|
}
|
|
800
|
-
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 });
|
|
801
|
-
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
|
|
887
|
+
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 });
|
|
888
|
+
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"] }] });
|
|
802
889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, decorators: [{
|
|
803
890
|
type: Component,
|
|
804
|
-
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
|
|
805
|
-
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }]; }, propDecorators: { modelName: [{
|
|
891
|
+
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: [""] }]
|
|
892
|
+
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }, { type: i1$1.AuthService }]; }, propDecorators: { modelName: [{
|
|
806
893
|
type: Input
|
|
807
894
|
}], label: [{
|
|
808
895
|
type: Input
|
|
@@ -830,7 +917,15 @@ class ModelTableComponent {
|
|
|
830
917
|
this.fieldConfig = {};
|
|
831
918
|
this.idSelected = new EventEmitter();
|
|
832
919
|
this.createModeChanged = new EventEmitter();
|
|
833
|
-
this.tableFields =
|
|
920
|
+
this.tableFields = {
|
|
921
|
+
id: { label: 'ID' },
|
|
922
|
+
name: { label: 'Name' },
|
|
923
|
+
title: { label: 'Titel' },
|
|
924
|
+
description: { label: 'Beschreibung' },
|
|
925
|
+
email: { label: 'E-Mail' },
|
|
926
|
+
createdAt: { label: 'Erstellt am' },
|
|
927
|
+
updatedAt: { label: 'Bearbeitet am' },
|
|
928
|
+
};
|
|
834
929
|
this.objects = [];
|
|
835
930
|
this.availableFields = [];
|
|
836
931
|
this.selectedId = '';
|
|
@@ -865,19 +960,20 @@ class ModelTableComponent {
|
|
|
865
960
|
* with. We're then using that information to populate the `availableFields` array
|
|
866
961
|
*/
|
|
867
962
|
init() {
|
|
868
|
-
var _a, _b
|
|
963
|
+
var _a, _b;
|
|
869
964
|
this.availableFields = [];
|
|
870
965
|
if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.tableFields) {
|
|
871
966
|
this.tableFields = this.config.tableFields;
|
|
872
967
|
}
|
|
873
968
|
const possibleFields = this.meta.getFields('find' + this.capitalizeFirstLetter(this.modelName) + 's');
|
|
874
969
|
const keys = Object.keys(possibleFields);
|
|
875
|
-
|
|
970
|
+
const tableFieldKeys = Object.keys(this.tableFields);
|
|
971
|
+
tableFieldKeys === null || tableFieldKeys === void 0 ? void 0 : tableFieldKeys.forEach((field) => {
|
|
876
972
|
if (keys.includes(field)) {
|
|
877
973
|
this.availableFields.push(field);
|
|
878
974
|
}
|
|
879
975
|
});
|
|
880
|
-
if ((
|
|
976
|
+
if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.logging) {
|
|
881
977
|
console.log('ModelTableComponent::init->possibleFields', possibleFields);
|
|
882
978
|
console.log('ModelTableComponent::init->keys', keys);
|
|
883
979
|
console.log('ModelTableComponent::init->availableFields', this.availableFields);
|
|
@@ -944,10 +1040,10 @@ class ModelTableComponent {
|
|
|
944
1040
|
}
|
|
945
1041
|
}
|
|
946
1042
|
ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }], target: i0.ɵɵFactoryTarget.Component });
|
|
947
|
-
ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", create: "create", update: "update", delete: "delete", config: "config", fieldConfig: "fieldConfig" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!selectedId && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n <h2 *ngIf=\"modelName\">\n {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n </h2>\n <div class=\"d-flex align-items-center\">\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n <table class=\"table table-hover table-responsive bg-white\">\n <thead>\n <tr>\n <th scope=\"col\" *ngFor=\"let field of availableFields\"
|
|
1043
|
+
ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", create: "create", update: "update", delete: "delete", config: "config", fieldConfig: "fieldConfig" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!selectedId && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n <h2 *ngIf=\"modelName\">\n {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n </h2>\n <div class=\"d-flex align-items-center\">\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n <table class=\"table table-hover table-responsive bg-white\">\n <thead>\n <tr>\n <th scope=\"col\" *ngFor=\"let field of availableFields\">\n {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let object of objects\">\n <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n {{ object[field] }}\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n <base-model-form\n [modelName]=\"modelName\"\n [label]=\"config?.label\"\n [config]=\"fieldConfig\"\n [logging]=\"config?.logging\"\n [id]=\"selectedId\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}\n"], components: [{ type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "logging", "config"], outputs: ["finished"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
948
1044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelTableComponent, decorators: [{
|
|
949
1045
|
type: Component,
|
|
950
|
-
args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n <h2 *ngIf=\"modelName\">\n {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n </h2>\n <div class=\"d-flex align-items-center\">\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n <table class=\"table table-hover table-responsive bg-white\">\n <thead>\n <tr>\n <th scope=\"col\" *ngFor=\"let field of availableFields\"
|
|
1046
|
+
args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between mb-4\">\n <h2 *ngIf=\"modelName\">\n {{ config?.plural ? config?.plural : config?.label ? config?.label : capitalizeFirstLetter(modelName) + 's' }}\n </h2>\n <div class=\"d-flex align-items-center\">\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n <table class=\"table table-hover table-responsive bg-white\">\n <thead>\n <tr>\n <th scope=\"col\" *ngFor=\"let field of availableFields\">\n {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let object of objects\">\n <td class=\"cursor-pointer\" *ngFor=\"let field of availableFields\" (click)=\"selectId(object)\">\n {{ object[field] }}\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"w-100\" *ngIf=\"selectedId || createMode\">\n <button class=\"btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n <base-model-form\n [modelName]=\"modelName\"\n [label]=\"config?.label\"\n [config]=\"fieldConfig\"\n [logging]=\"config?.logging\"\n [id]=\"selectedId\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n ></base-model-form>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.table>:not(:first-child){border-top:0}table{border-radius:.25rem;border-color:#e2e8f0!important}table thead{text-transform:uppercase;font-size:12px}table thead th{padding:12px 24px}table tbody tr td{font-weight:400!important;font-size:16px;padding:16px 24px}\n"] }]
|
|
951
1047
|
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }]; }, propDecorators: { modelName: [{
|
|
952
1048
|
type: Input
|
|
953
1049
|
}], objectId: [{
|