@lenne.tech/ng-base 13.29.0 → 13.30.0

package/fesm2015/lenne.tech-ng-base-base-components.mjs

@@ -8,8 +8,9 @@ import { trigger, transition, query, style, animate } from '@angular/animations'
 import { Subscription } from 'rxjs';
 import * as i1$1 from '@lenne.tech/ng-base/shared';
 import { ToastType, GraphQLRequestType, BasicUser } from '@lenne.tech/ng-base/shared';
-import * as i1$2 from '@angular/common/http';
 import { __awaiter } from 'tslib';
+import * as i2$1 from '@angular/router';
+import * as i1$2 from '@angular/common/http';
 
 class InputComponent {
     constructor() {
@@ -802,12 +803,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             }] } });
 
 class ModelFormComponent {
-    constructor(graphQLMetaService, graphQLService, formsService, authService) {
+    constructor(graphQLMetaService, graphQLService, formsService, authService, router, route) {
         this.graphQLMetaService = graphQLMetaService;
         this.graphQLService = graphQLService;
         this.formsService = formsService;
         this.authService = authService;
+        this.router = router;
+        this.route = route;
         this.delete = true;
+        this.duplicate = false;
         this.logging = false;
         this.config = {};
         this.finished = new EventEmitter();
@@ -894,7 +898,7 @@ class ModelFormComponent {
             },
             error: (err) => {
                 console.error('Error on load object', err);
-                this.finished.emit(false);
+                this.finished.emit(null);
             },
         });
     }
@@ -965,7 +969,7 @@ class ModelFormComponent {
             })
                 .subscribe({
                 next: (value) => {
-                    this.finished.emit(true);
+                    this.finished.emit(null);
                 },
                 error: (err) => {
                     console.error('Error on delete object', err);
@@ -973,6 +977,35 @@ class ModelFormComponent {
             });
         }
     }
+    /**
+     * It sends a GraphQL mutation to the server to duplicate the object
+     */
+    duplicateObject() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (confirm('Möchtest du das Objekt wirklich duplizieren?')) {
+                yield this.submit(true);
+                this.graphQLService
+                    .graphQl('duplicate' + this.capitalizeFirstLetter(this.modelName), {
+                    arguments: { id: this.id },
+                    fields: ['id'],
+                    type: GraphQLRequestType.MUTATION,
+                })
+                    .subscribe({
+                    next: (value) => {
+                        if (value === null || value === void 0 ? void 0 : value.id) {
+                            this.router.navigate(['../' + value.id], { relativeTo: this.route });
+                        }
+                        else {
+                            this.finished.emit(null);
+                        }
+                    },
+                    error: (err) => {
+                        console.error('Error on duplicate object', err);
+                    },
+                });
+            }
+        });
+    }
     /**
      * It takes a string, capitalizes the first letter, and returns the modified string
      *
@@ -997,65 +1030,71 @@ class ModelFormComponent {
      * @returns The id of the newly created or updated object.
      */
     submit(secret = false) {
-        var _a, _b, _c, _d;
-        if (!secret) {
-            this.loading = true;
-        }
-        if (this.form.invalid && !secret) {
-            this.formsService.validateAllFormFields(this.form);
-            this.loading = false;
-            return;
-        }
-        if (this.operation === 'update' && !this.id) {
-            console.error('ID is missing for update!');
-            this.loading = false;
-            return;
-        }
-        if (this.logging) {
-            console.log('ModelFormComponent::submit->formValue', this.form.value);
-        }
-        const data = Object.assign({}, this.form.value);
-        for (const [key, value] of Object.entries(data)) {
-            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) ||
-                ((_c = this.config[key]) === null || _c === void 0 ? void 0 : _c.exclude)) {
-                delete data[key];
+        return new Promise((resolve, reject) => {
+            var _a, _b, _c, _d;
+            if (!secret) {
+                this.loading = true;
             }
-            // Set type for graphql method
-            if (((_d = this.fields[key]) === null || _d === void 0 ? void 0 : _d.type) === 'Float') {
-                data[key] = Number(value);
+            if (this.form.invalid && !secret) {
+                this.formsService.validateAllFormFields(this.form);
+                this.loading = false;
+                reject();
+                return;
             }
-        }
-        if (this.logging) {
-            console.log('ModelFormComponent::submit->valueToGraphql', data);
-        }
-        this.graphQLService
-            .graphQl(this.operation + this.capitalizeFirstLetter(this.modelName), {
-            arguments: this.operation === 'update' ? { id: this.id, input: data } : { input: data },
-            fields: ['id'],
-            type: GraphQLRequestType.MUTATION,
-        })
-            .subscribe({
-            next: (value) => {
-                if (!secret) {
-                    this.loading = false;
-                    this.finished.emit(true);
+            if (this.operation === 'update' && !this.id) {
+                console.error('ID is missing for update!');
+                this.loading = false;
+                reject();
+                return;
+            }
+            if (this.logging) {
+                console.log('ModelFormComponent::submit->formValue', this.form.value);
+            }
+            const data = Object.assign({}, this.form.value);
+            for (const [key, value] of Object.entries(data)) {
+                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) ||
+                    ((_c = this.config[key]) === null || _c === void 0 ? void 0 : _c.exclude)) {
+                    delete data[key];
                 }
-            },
-            error: (err) => {
-                if (!secret) {
-                    console.error('Failed on ' + this.operation, err);
-                    this.loading = false;
+                // Set type for graphql method
+                if (((_d = this.fields[key]) === null || _d === void 0 ? void 0 : _d.type) === 'Float') {
+                    data[key] = Number(value);
                 }
-            },
+            }
+            if (this.logging) {
+                console.log('ModelFormComponent::submit->valueToGraphql', data);
+            }
+            this.graphQLService
+                .graphQl(this.operation + this.capitalizeFirstLetter(this.modelName), {
+                arguments: this.operation === 'update' ? { id: this.id, input: data } : { input: data },
+                fields: ['id'],
+                type: GraphQLRequestType.MUTATION,
+            })
+                .subscribe({
+                next: (value) => {
+                    if (!secret) {
+                        this.loading = false;
+                        this.finished.emit(null);
+                    }
+                    resolve(value);
+                },
+                error: (err) => {
+                    if (!secret) {
+                        console.error('Failed on ' + this.operation, err);
+                        this.loading = false;
+                    }
+                    reject();
+                },
+            });
         });
     }
 }
-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 });
-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)=\"id ? submit(true) : null\"\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"] }] });
+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 }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+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", duplicate: "duplicate", logging: "logging", config: "config" }, outputs: { finished: "finished" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n  <div class=\"d-flex flex-row justify-content-between mt-3\">\n    <h2>\n      {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n    </h2>\n\n    <div>\n      <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !loading\" (click)=\"duplicateObject()\">\n        Duplizieren\n      </button>\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\n  <form [formGroup]=\"form\">\n    <base-model-form-sub\n      [fields]=\"fields\"\n      [config]=\"config\"\n      [form]=\"form\"\n      (imageChanged)=\"id ? submit(true) : null\"\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelFormComponent, decorators: [{
             type: Component,
-            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)=\"id ? submit(true) : null\"\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: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }, { type: i1$1.AuthService }]; }, propDecorators: { modelName: [{
+            args: [{ selector: 'base-model-form', template: "<div class=\"w-100\" *ngIf=\"form\">\n  <div class=\"d-flex flex-row justify-content-between mt-3\">\n    <h2>\n      {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n    </h2>\n\n    <div>\n      <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !loading\" (click)=\"duplicateObject()\">\n        Duplizieren\n      </button>\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\n  <form [formGroup]=\"form\">\n    <base-model-form-sub\n      [fields]=\"fields\"\n      [config]=\"config\"\n      [form]=\"form\"\n      (imageChanged)=\"id ? submit(true) : null\"\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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.FormsService }, { type: i1$1.AuthService }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }]; }, propDecorators: { modelName: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -1063,6 +1102,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }], delete: [{
                 type: Input
+            }], duplicate: [{
+                type: Input
             }], logging: [{
                 type: Input
             }], config: [{
@@ -1080,6 +1121,7 @@ class ModelTableComponent {
         this.create = true;
         this.update = true;
         this.delete = true;
+        this.duplicate = true;
         this.config = {};
         this.fieldConfig = {};
         this.idSelected = new EventEmitter();
@@ -1179,7 +1221,12 @@ class ModelTableComponent {
                 if (this.logging) {
                     console.log('ModelTableComponent::loadObjects->value', value);
                 }
-                this.objects = value;
+                const arrayForSort = [...value];
+                this.objects = arrayForSort.sort((a, b) => {
+                    var _a, _b;
+                    return ((b === null || b === void 0 ? void 0 : b.createdAt) ? (_a = new Date(b === null || b === void 0 ? void 0 : b.createdAt)) === null || _a === void 0 ? void 0 : _a.getTime() : new Date().getTime()) -
+                        ((a === null || a === void 0 ? void 0 : a.createdAt) ? (_b = new Date(a === null || a === void 0 ? void 0 : a.createdAt)) === null || _b === void 0 ? void 0 : _b.getTime() : new Date().getTime());
+                });
             },
             error: (err) => {
                 console.log('Error on loading objects', err);
@@ -1189,8 +1236,6 @@ class ModelTableComponent {
     /**
      * If the update property is true, then set the selectedId property to the id of the object passed in, and emit the
      * selectedId property
-     *
-     * @param object - any - this is the object that is passed in from the child component.
      */
     selectId(object) {
         if (!object) {
@@ -1213,10 +1258,10 @@ class ModelTableComponent {
     }
 }
 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 });
-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", logging: "logging", 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]=\"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 } });
+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", logging: "logging", create: "create", update: "update", delete: "delete", duplicate: "duplicate", 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]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\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", "duplicate", "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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ModelTableComponent, decorators: [{
             type: Component,
-            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]=\"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"] }]
+            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]=\"logging\"\n    [id]=\"selectedId\"\n    (finished)=\"selectId('')\"\n    [delete]=\"delete\"\n    [duplicate]=\"duplicate\"\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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }]; }, propDecorators: { modelName: [{
                 type: Input
             }], objectId: [{
@@ -1231,6 +1276,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }], delete: [{
                 type: Input
+            }], duplicate: [{
+                type: Input
             }], config: [{
                 type: Input
             }], fieldConfig: [{