@lenne.tech/ng-base 13.21.0 → 13.23.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/model-table/model-table.component.d.ts +3 -0
- 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 +50 -19
- package/esm2020/base-components/components/model-form-sub/model-form-sub.component.mjs +42 -12
- package/esm2020/base-components/components/model-table/model-table.component.mjs +15 -7
- 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/shared/classes/graphql-meta.class.mjs +2 -2
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +131 -38
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-shared.mjs +1 -1
- package/fesm2015/lenne.tech-ng-base-shared.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +122 -34
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-shared.mjs +1 -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 {
|
|
@@ -564,11 +585,19 @@ class ModelFormSubComponent {
|
|
|
564
585
|
constructor(authService) {
|
|
565
586
|
this.authService = authService;
|
|
566
587
|
this.config = {};
|
|
588
|
+
this.imageChanged = new EventEmitter();
|
|
567
589
|
this.keys = [];
|
|
568
590
|
}
|
|
569
591
|
ngOnInit() {
|
|
570
|
-
|
|
571
|
-
|
|
592
|
+
// Get keys
|
|
593
|
+
const unsortedKeys = Object.keys(this.fields);
|
|
594
|
+
// Sort keys by config order
|
|
595
|
+
this.keys = unsortedKeys.sort((a, b) => {
|
|
596
|
+
var _a, _b, _c, _d;
|
|
597
|
+
return (((_a = this.config[b]) === null || _a === void 0 ? void 0 : _a.order) ? (_b = this.config[b]) === null || _b === void 0 ? void 0 : _b.order : 0) - (((_c = this.config[a]) === null || _c === void 0 ? void 0 : _c.order) ? (_d = this.config[a]) === null || _d === void 0 ? void 0 : _d.order : 0);
|
|
598
|
+
});
|
|
599
|
+
// Set user for roles check
|
|
600
|
+
this.user = BasicUser.map(this.authService.currentUser);
|
|
572
601
|
}
|
|
573
602
|
/**
|
|
574
603
|
* It takes a string, capitalizes the first letter, and returns the new string
|
|
@@ -579,6 +608,27 @@ class ModelFormSubComponent {
|
|
|
579
608
|
capitalizeFirstLetter(value) {
|
|
580
609
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
581
610
|
}
|
|
611
|
+
/**
|
|
612
|
+
* It takes an array of values and returns an array of objects with a value and text property
|
|
613
|
+
*
|
|
614
|
+
* @param values - any[] - the array of values that you want to convert to a selectable list
|
|
615
|
+
* @param config
|
|
616
|
+
* @returns An array of objects with a value and text property.
|
|
617
|
+
*/
|
|
618
|
+
prepareEnumForSelect(values, config = {}) {
|
|
619
|
+
return values
|
|
620
|
+
.filter((i) => {
|
|
621
|
+
var _a, _b;
|
|
622
|
+
return !(config && ((_a = config[i]) === null || _a === void 0 ? void 0 : _a.roles) && !this.user.hasAllRoles((_b = config[i]) === null || _b === void 0 ? void 0 : _b.roles));
|
|
623
|
+
})
|
|
624
|
+
.map((e) => {
|
|
625
|
+
var _a;
|
|
626
|
+
return {
|
|
627
|
+
value: e,
|
|
628
|
+
text: config && ((_a = config[e]) === null || _a === void 0 ? void 0 : _a.text) ? config[e].text : e,
|
|
629
|
+
};
|
|
630
|
+
});
|
|
631
|
+
}
|
|
582
632
|
/**
|
|
583
633
|
* It takes an AbstractControl and returns a FormControl
|
|
584
634
|
*
|
|
@@ -590,23 +640,26 @@ class ModelFormSubComponent {
|
|
|
590
640
|
}
|
|
591
641
|
}
|
|
592
642
|
ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
593
|
-
ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type && (
|
|
643
|
+
ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n <fieldset class=\"border rounded-3 p-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [fields]=\"fields[key]\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container *ngIf=\"fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n <ng-container *ngIf=\"fields[key]?.isEnum\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n (imageDeleted)=\"imageChanged.emit()\"\n (imageUploaded)=\"imageChanged.emit()\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.fields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [""], components: [{ type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["fields", "form", "config"], outputs: ["imageChanged"] }, { type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "control", "tabIndex", "required", "multiple", "search", "options"] }, { type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required"] }, { type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required"] }, { type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "dragText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path"], outputs: ["imageUploaded", "imageDeleted"] }, { type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "nameField"] }, { type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
|
|
594
644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormSubComponent, decorators: [{
|
|
595
645
|
type: Component,
|
|
596
|
-
args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type && (
|
|
646
|
+
args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n <ng-container *ngIf=\"!fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n <fieldset class=\"border rounded-3 p-3\">\n <legend class=\"float-none w-auto px-3\">\n {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n </legend>\n <base-model-form-sub\n [fields]=\"fields[key]\"\n [config]=\"config[key]?.fields || {}\"\n [form]=\"form.get(key)\"\n ></base-model-form-sub>\n </fieldset>\n </ng-container>\n\n <ng-container *ngIf=\"fields[key]?.type && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\">\n <ng-container *ngIf=\"fields[key]?.isEnum\">\n <base-select\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n ></base-select>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isEnum\">\n <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n <ng-container *ngSwitchCase=\"'String'\">\n <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n <base-tags\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-tags>\n </ng-container>\n\n <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'text'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Image'\">\n <base-upload-image\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [url]=\"config[key]?.url\"\n [path]=\"config[key]?.path || '/files/'\"\n [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n [deletePath]=\"config[key]?.deletePath || '/files/'\"\n [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n [dragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png']\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n (imageDeleted)=\"imageChanged.emit()\"\n (imageUploaded)=\"imageChanged.emit()\"\n ></base-upload-image>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Reference'\">\n <base-refence-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [method]=\"config[key]?.method || 'find'\"\n [fields]=\"config[key]?.fields || ['id', 'name']\"\n [valueField]=\"config[key]?.valueField || 'id'\"\n [nameField]=\"config[key]?.nameField || 'name'\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-refence-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <base-checkbox\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Float'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [type]=\"'number'\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <base-input\n [id]=\"key\"\n [name]=\"key\"\n [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n [placeholder]=\"config[key]?.placeholder || ''\"\n [type]=\"'datetime-local'\"\n [control]=\"transformToControl(form?.get(key))\"\n [required]=\"\n config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n \"\n ></base-input>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [""] }]
|
|
597
647
|
}], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { fields: [{
|
|
598
648
|
type: Input
|
|
599
649
|
}], form: [{
|
|
600
650
|
type: Input
|
|
601
651
|
}], config: [{
|
|
602
652
|
type: Input
|
|
653
|
+
}], imageChanged: [{
|
|
654
|
+
type: Output
|
|
603
655
|
}] } });
|
|
604
656
|
|
|
605
657
|
class ModelFormComponent {
|
|
606
|
-
constructor(graphQLMetaService, graphQLService, formsService) {
|
|
658
|
+
constructor(graphQLMetaService, graphQLService, formsService, authService) {
|
|
607
659
|
this.graphQLMetaService = graphQLMetaService;
|
|
608
660
|
this.graphQLService = graphQLService;
|
|
609
661
|
this.formsService = formsService;
|
|
662
|
+
this.authService = authService;
|
|
610
663
|
this.delete = true;
|
|
611
664
|
this.logging = false;
|
|
612
665
|
this.config = {};
|
|
@@ -615,6 +668,8 @@ class ModelFormComponent {
|
|
|
615
668
|
this.keys = [];
|
|
616
669
|
}
|
|
617
670
|
ngOnInit() {
|
|
671
|
+
// Set user for roles check
|
|
672
|
+
this.user = BasicUser.map(this.authService.currentUser);
|
|
618
673
|
this.graphQLMetaService.getMeta().subscribe((meta) => {
|
|
619
674
|
this.meta = meta;
|
|
620
675
|
if (this.modelName) {
|
|
@@ -669,11 +724,18 @@ class ModelFormComponent {
|
|
|
669
724
|
type: GraphQLRequestType.QUERY,
|
|
670
725
|
})
|
|
671
726
|
.subscribe({
|
|
672
|
-
next: (
|
|
727
|
+
next: (response) => {
|
|
728
|
+
var _a, _b, _c;
|
|
673
729
|
if (this.logging) {
|
|
674
|
-
console.log('ModelFormComponent::get->value',
|
|
730
|
+
console.log('ModelFormComponent::get->value', response);
|
|
731
|
+
}
|
|
732
|
+
this.form.patchValue(Object.assign({}, response));
|
|
733
|
+
// Process patchFields for reference input
|
|
734
|
+
for (const [key, value] of Object.entries(this.config)) {
|
|
735
|
+
if ((_a = this.config[key]) === null || _a === void 0 ? void 0 : _a.patchField) {
|
|
736
|
+
this.form.get(key).patchValue((_c = response[(_b = this.config[key]) === null || _b === void 0 ? void 0 : _b.patchField]) === null || _c === void 0 ? void 0 : _c.id);
|
|
737
|
+
}
|
|
675
738
|
}
|
|
676
|
-
this.form.patchValue(Object.assign({}, value));
|
|
677
739
|
},
|
|
678
740
|
error: (err) => {
|
|
679
741
|
console.error('Error on load object', err);
|
|
@@ -689,11 +751,16 @@ class ModelFormComponent {
|
|
|
689
751
|
* @returns An array of strings and objects.
|
|
690
752
|
*/
|
|
691
753
|
createRequestObject(fields) {
|
|
692
|
-
var _a;
|
|
754
|
+
var _a, _b, _c;
|
|
693
755
|
const requestFields = [];
|
|
694
756
|
for (const [key, value] of Object.entries(fields)) {
|
|
695
757
|
if ((_a = fields[key]) === null || _a === void 0 ? void 0 : _a.type) {
|
|
696
|
-
|
|
758
|
+
if (!((_b = this.config[key]) === null || _b === void 0 ? void 0 : _b.patchField)) {
|
|
759
|
+
requestFields.push(key);
|
|
760
|
+
}
|
|
761
|
+
else {
|
|
762
|
+
requestFields.push({ [(_c = this.config[key]) === null || _c === void 0 ? void 0 : _c.patchField]: ['id'] });
|
|
763
|
+
}
|
|
697
764
|
}
|
|
698
765
|
else {
|
|
699
766
|
const subkeys = this.createRequestObject(fields[key]);
|
|
@@ -766,9 +833,12 @@ class ModelFormComponent {
|
|
|
766
833
|
*
|
|
767
834
|
* @returns The id of the newly created or updated object.
|
|
768
835
|
*/
|
|
769
|
-
submit() {
|
|
770
|
-
|
|
771
|
-
if (
|
|
836
|
+
submit(secret = false) {
|
|
837
|
+
var _a, _b, _c, _d;
|
|
838
|
+
if (!secret) {
|
|
839
|
+
this.loading = true;
|
|
840
|
+
}
|
|
841
|
+
if (this.form.invalid && !secret) {
|
|
772
842
|
this.formsService.validateAllFormFields(this.form);
|
|
773
843
|
this.loading = false;
|
|
774
844
|
return;
|
|
@@ -781,30 +851,45 @@ class ModelFormComponent {
|
|
|
781
851
|
if (this.logging) {
|
|
782
852
|
console.log('ModelFormComponent::submit->formValue', this.form.value);
|
|
783
853
|
}
|
|
854
|
+
const data = Object.assign({}, this.form.value);
|
|
855
|
+
for (const [key, value] of Object.entries(data)) {
|
|
856
|
+
if ((((_a = this.config[key]) === null || _a === void 0 ? void 0 : _a.roles) ? !this.user.hasAllRoles((_b = this.config[key]) === null || _b === void 0 ? void 0 : _b.roles) : false) ||
|
|
857
|
+
((_c = this.config[key]) === null || _c === void 0 ? void 0 : _c.exclude)) {
|
|
858
|
+
delete data[key];
|
|
859
|
+
}
|
|
860
|
+
// 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
|
+
}
|
|
784
865
|
this.graphQLService
|
|
785
866
|
.graphQl(this.operation + this.capitalizeFirstLetter(this.modelName), {
|
|
786
|
-
arguments: this.operation === 'update' ? { id: this.id, input:
|
|
867
|
+
arguments: this.operation === 'update' ? { id: this.id, input: data } : { input: data },
|
|
787
868
|
fields: ['id'],
|
|
788
869
|
type: GraphQLRequestType.MUTATION,
|
|
789
870
|
})
|
|
790
871
|
.subscribe({
|
|
791
872
|
next: (value) => {
|
|
792
|
-
|
|
793
|
-
|
|
873
|
+
if (!secret) {
|
|
874
|
+
this.loading = false;
|
|
875
|
+
this.finished.emit(true);
|
|
876
|
+
}
|
|
794
877
|
},
|
|
795
878
|
error: (err) => {
|
|
796
|
-
|
|
797
|
-
|
|
879
|
+
if (!secret) {
|
|
880
|
+
console.error('Failed on ' + this.operation, err);
|
|
881
|
+
this.loading = false;
|
|
882
|
+
}
|
|
798
883
|
},
|
|
799
884
|
});
|
|
800
885
|
}
|
|
801
886
|
}
|
|
802
|
-
ModelFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.FormsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
803
|
-
ModelFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ModelFormComponent, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", logging: "logging", config: "config" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n <h2>\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <form [formGroup]=\"form\">\n <base-model-form-sub
|
|
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"] }] });
|
|
804
889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, decorators: [{
|
|
805
890
|
type: Component,
|
|
806
|
-
args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n <h2>\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <form [formGroup]=\"form\">\n <base-model-form-sub
|
|
807
|
-
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }]; }, propDecorators: { modelName: [{
|
|
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: [{
|
|
808
893
|
type: Input
|
|
809
894
|
}], label: [{
|
|
810
895
|
type: Input
|
|
@@ -838,12 +923,13 @@ class ModelTableComponent {
|
|
|
838
923
|
title: { label: 'Titel' },
|
|
839
924
|
description: { label: 'Beschreibung' },
|
|
840
925
|
email: { label: 'E-Mail' },
|
|
841
|
-
createdAt: { label: 'Erstellt am' },
|
|
842
|
-
updatedAt: { label: 'Bearbeitet am' },
|
|
926
|
+
createdAt: { label: 'Erstellt am', dateFormat: 'dd.MM.YYYY HH:mm' },
|
|
927
|
+
updatedAt: { label: 'Bearbeitet am', dateFormat: 'dd.MM.YYYY HH:mm' },
|
|
843
928
|
};
|
|
844
929
|
this.objects = [];
|
|
845
930
|
this.availableFields = [];
|
|
846
931
|
this.selectedId = '';
|
|
932
|
+
this.queryName = null;
|
|
847
933
|
}
|
|
848
934
|
ngOnInit() {
|
|
849
935
|
this.graphQLMetaService.getMeta().subscribe((meta) => {
|
|
@@ -875,12 +961,19 @@ class ModelTableComponent {
|
|
|
875
961
|
* with. We're then using that information to populate the `availableFields` array
|
|
876
962
|
*/
|
|
877
963
|
init() {
|
|
878
|
-
var _a, _b;
|
|
964
|
+
var _a, _b, _c, _d;
|
|
879
965
|
this.availableFields = [];
|
|
880
|
-
|
|
966
|
+
// Set query name
|
|
967
|
+
if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryName)) {
|
|
968
|
+
this.queryName = 'find' + this.capitalizeFirstLetter(this.modelName) + 's';
|
|
969
|
+
}
|
|
970
|
+
else {
|
|
971
|
+
this.queryName = (_b = this.config) === null || _b === void 0 ? void 0 : _b.queryName;
|
|
972
|
+
}
|
|
973
|
+
if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.tableFields) {
|
|
881
974
|
this.tableFields = this.config.tableFields;
|
|
882
975
|
}
|
|
883
|
-
const possibleFields = this.meta.getFields(
|
|
976
|
+
const possibleFields = this.meta.getFields(this.queryName);
|
|
884
977
|
const keys = Object.keys(possibleFields);
|
|
885
978
|
const tableFieldKeys = Object.keys(this.tableFields);
|
|
886
979
|
tableFieldKeys === null || tableFieldKeys === void 0 ? void 0 : tableFieldKeys.forEach((field) => {
|
|
@@ -888,7 +981,7 @@ class ModelTableComponent {
|
|
|
888
981
|
this.availableFields.push(field);
|
|
889
982
|
}
|
|
890
983
|
});
|
|
891
|
-
if ((
|
|
984
|
+
if ((_d = this.config) === null || _d === void 0 ? void 0 : _d.logging) {
|
|
892
985
|
console.log('ModelTableComponent::init->possibleFields', possibleFields);
|
|
893
986
|
console.log('ModelTableComponent::init->keys', keys);
|
|
894
987
|
console.log('ModelTableComponent::init->availableFields', this.availableFields);
|
|
@@ -911,7 +1004,7 @@ class ModelTableComponent {
|
|
|
911
1004
|
loadObjects(fields) {
|
|
912
1005
|
this.objects = [];
|
|
913
1006
|
this.graphQLService
|
|
914
|
-
.graphQl(
|
|
1007
|
+
.graphQl(this.queryName, {
|
|
915
1008
|
fields,
|
|
916
1009
|
type: GraphQLRequestType.QUERY,
|
|
917
1010
|
})
|
|
@@ -955,10 +1048,10 @@ class ModelTableComponent {
|
|
|
955
1048
|
}
|
|
956
1049
|
}
|
|
957
1050
|
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 });
|
|
958
|
-
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"] }] });
|
|
1051
|
+
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 <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat\">\n {{ object[field] }}\n </ng-container>\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"] }], pipes: { "date": i1.DatePipe } });
|
|
959
1052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelTableComponent, decorators: [{
|
|
960
1053
|
type: Component,
|
|
961
|
-
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"] }]
|
|
1054
|
+
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 <ng-container *ngIf=\"tableFields[field]?.dateFormat\">\n {{ object[field] | date: tableFields[field]?.dateFormat }} Uhr\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat\">\n {{ object[field] }}\n </ng-container>\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"] }]
|
|
962
1055
|
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }]; }, propDecorators: { modelName: [{
|
|
963
1056
|
type: Input
|
|
964
1057
|
}], objectId: [{
|