@lenne.tech/ng-base 14.23.0 → 14.25.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-base.component.d.ts +53 -0
- package/base-components/components/model-form/model-form.component.d.ts +6 -0
- package/base-components/components/model-table/model-table.component.d.ts +13 -32
- package/base-components/public-api.d.ts +1 -0
- package/esm2020/base-cms/pages/base-cms/base-cms.component.mjs +3 -3
- package/esm2020/base-components/components/model-form/model-form-base.component.mjs +91 -0
- package/esm2020/base-components/components/model-form/model-form.component.mjs +7 -1
- package/esm2020/base-components/components/model-table/model-table.component.mjs +58 -19
- package/esm2020/base-components/public-api.mjs +2 -1
- package/esm2020/shared/interfaces/base-module-config.interface.mjs +1 -1
- package/esm2020/shared/interfaces/cms-model-config.interface.mjs +1 -1
- package/esm2020/shared/services/graphql-plus.service.mjs +11 -6
- package/esm2020/shared/services/graphql.service.mjs +11 -6
- package/esm2020/shared/services/user.service.mjs +11 -6
- package/esm2020/src/base.module.mjs +2 -1
- package/fesm2015/lenne.tech-ng-base-base-cms.mjs +2 -2
- package/fesm2015/lenne.tech-ng-base-base-cms.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +154 -19
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base-shared.mjs +30 -12
- package/fesm2015/lenne.tech-ng-base-shared.mjs.map +1 -1
- package/fesm2015/lenne.tech-ng-base.mjs +1 -1
- package/fesm2015/lenne.tech-ng-base.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-cms.mjs +2 -2
- package/fesm2020/lenne.tech-ng-base-base-cms.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +152 -19
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-shared.mjs +24 -12
- package/fesm2020/lenne.tech-ng-base-shared.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base.mjs +1 -0
- package/fesm2020/lenne.tech-ng-base.mjs.map +1 -1
- package/package.json +1 -1
- package/shared/interfaces/base-module-config.interface.d.ts +4 -0
- package/shared/interfaces/cms-model-config.interface.d.ts +1 -0
- package/shared/services/graphql-plus.service.d.ts +3 -1
- package/shared/services/graphql.service.d.ts +3 -1
- package/shared/services/user.service.d.ts +3 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, Directive, Inject, HostListener, Pipe, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, Directive, Inject, HostListener, Pipe, ViewContainerRef, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormControl, UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import * as i2 from '@angular/common';
|
|
@@ -1291,6 +1291,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
1291
1291
|
type: Input
|
|
1292
1292
|
}] } });
|
|
1293
1293
|
|
|
1294
|
+
/**
|
|
1295
|
+
* ModelFormComponent
|
|
1296
|
+
*
|
|
1297
|
+
* Hint for handling extensions of this component in project:
|
|
1298
|
+
* If you want to use complete custom services and methods, extend ModelFormBaseComponent instead of ModelFormComponent
|
|
1299
|
+
*/
|
|
1294
1300
|
class ModelFormComponent {
|
|
1295
1301
|
constructor(graphQLMetaService, graphQLService, formsService, authService, router, route, cmsService, toastService, fileService) {
|
|
1296
1302
|
this.graphQLMetaService = graphQLMetaService;
|
|
@@ -1871,8 +1877,8 @@ class ModelTableComponent {
|
|
|
1871
1877
|
this.import = true;
|
|
1872
1878
|
this.export = true;
|
|
1873
1879
|
this.duplicate = true;
|
|
1874
|
-
this.
|
|
1875
|
-
this.showFavButton =
|
|
1880
|
+
this.modelConfig = null;
|
|
1881
|
+
this.showFavButton = false;
|
|
1876
1882
|
this.idSelected = new EventEmitter();
|
|
1877
1883
|
this.createModeChanged = new EventEmitter();
|
|
1878
1884
|
this.uniqueField = 'id';
|
|
@@ -1887,12 +1893,16 @@ class ModelTableComponent {
|
|
|
1887
1893
|
};
|
|
1888
1894
|
this.objects = [];
|
|
1889
1895
|
this.availableFields = [];
|
|
1890
|
-
this.
|
|
1896
|
+
this.id = '';
|
|
1891
1897
|
this.queryName = null;
|
|
1892
1898
|
this.possibleFields = {};
|
|
1899
|
+
this.componentRef = undefined;
|
|
1893
1900
|
this.selectedPageIndex = 0;
|
|
1894
1901
|
this.pages = [];
|
|
1895
1902
|
}
|
|
1903
|
+
ngAfterViewInit() {
|
|
1904
|
+
this.integrateCustomFormComponent();
|
|
1905
|
+
}
|
|
1896
1906
|
ngOnInit() {
|
|
1897
1907
|
this.graphQLMetaService.getMeta().subscribe((meta) => {
|
|
1898
1908
|
this.meta = meta;
|
|
@@ -1900,7 +1910,8 @@ class ModelTableComponent {
|
|
|
1900
1910
|
this.init();
|
|
1901
1911
|
}
|
|
1902
1912
|
if (this.objectId) {
|
|
1903
|
-
this.
|
|
1913
|
+
this.id = this.objectId;
|
|
1914
|
+
this.integrateCustomFormComponent();
|
|
1904
1915
|
}
|
|
1905
1916
|
});
|
|
1906
1917
|
}
|
|
@@ -1909,13 +1920,14 @@ class ModelTableComponent {
|
|
|
1909
1920
|
this.init();
|
|
1910
1921
|
}
|
|
1911
1922
|
if (changes['objectId'] && this.meta) {
|
|
1912
|
-
if (this.
|
|
1923
|
+
if (this.id !== this.objectId) {
|
|
1913
1924
|
if (this.logging) {
|
|
1914
|
-
console.log('ModelTableComponent::ngOnChanges->selectedId', this.
|
|
1925
|
+
console.log('ModelTableComponent::ngOnChanges->selectedId', this.id);
|
|
1915
1926
|
}
|
|
1916
|
-
this.
|
|
1927
|
+
this.id = this.objectId;
|
|
1917
1928
|
}
|
|
1918
1929
|
}
|
|
1930
|
+
this.setChangesInComponentRef();
|
|
1919
1931
|
}
|
|
1920
1932
|
/**
|
|
1921
1933
|
* We're using the `meta` service to get the fields that are available for the `find` query for the model we're working
|
|
@@ -1927,14 +1939,14 @@ class ModelTableComponent {
|
|
|
1927
1939
|
this.totalCount = null;
|
|
1928
1940
|
this.camelModelName = this.kebabToCamelCase(this.modelName);
|
|
1929
1941
|
// Set query name
|
|
1930
|
-
if (!this.
|
|
1942
|
+
if (!this.modelConfig?.queryName) {
|
|
1931
1943
|
this.queryName = 'findAndCount' + this.capitalizeFirstLetter(this.camelModelName) + 's';
|
|
1932
1944
|
}
|
|
1933
1945
|
else {
|
|
1934
|
-
this.queryName = this.
|
|
1946
|
+
this.queryName = this.modelConfig?.queryName;
|
|
1935
1947
|
}
|
|
1936
|
-
if (this.
|
|
1937
|
-
this.tableFields = this.
|
|
1948
|
+
if (this.modelConfig?.tableFields) {
|
|
1949
|
+
this.tableFields = this.modelConfig.tableFields;
|
|
1938
1950
|
}
|
|
1939
1951
|
if (this.logging) {
|
|
1940
1952
|
console.log('ModelTableComponent::init->modelName', this.modelName);
|
|
@@ -1964,6 +1976,36 @@ class ModelTableComponent {
|
|
|
1964
1976
|
this.selectedPageIndex = 0;
|
|
1965
1977
|
this.objects = await this.loadObjects(this.availableFields, 0, 25);
|
|
1966
1978
|
}
|
|
1979
|
+
integrateCustomFormComponent() {
|
|
1980
|
+
if (!this.customFormTemplate || this.componentRef) {
|
|
1981
|
+
return;
|
|
1982
|
+
}
|
|
1983
|
+
const customComponent = this.modelConfig?.customTemplateComponent;
|
|
1984
|
+
if (customComponent) {
|
|
1985
|
+
this.componentRef = this.customFormTemplate?.createComponent(customComponent);
|
|
1986
|
+
this.setChangesInComponentRef();
|
|
1987
|
+
this.componentRef.instance.finished.subscribe(() => {
|
|
1988
|
+
this.selectId('');
|
|
1989
|
+
});
|
|
1990
|
+
}
|
|
1991
|
+
}
|
|
1992
|
+
setChangesInComponentRef() {
|
|
1993
|
+
if (this.componentRef) {
|
|
1994
|
+
const data = {
|
|
1995
|
+
config: this.config,
|
|
1996
|
+
delete: this.delete,
|
|
1997
|
+
duplicate: this.duplicate,
|
|
1998
|
+
id: this.id,
|
|
1999
|
+
label: this.modelConfig?.label,
|
|
2000
|
+
logging: this.logging,
|
|
2001
|
+
modelName: this.camelModelName,
|
|
2002
|
+
showFavButton: this.showFavButton,
|
|
2003
|
+
};
|
|
2004
|
+
for (const [key, value] of Object.entries(data)) {
|
|
2005
|
+
this.componentRef.setInput(key, value);
|
|
2006
|
+
}
|
|
2007
|
+
}
|
|
2008
|
+
}
|
|
1967
2009
|
/**
|
|
1968
2010
|
* When the user clicks the "Create New" button, the createModeChanged event is emitted, which is then handled by the
|
|
1969
2011
|
* parent component
|
|
@@ -2038,8 +2080,8 @@ class ModelTableComponent {
|
|
|
2038
2080
|
this.createModeChanged.emit(false);
|
|
2039
2081
|
}
|
|
2040
2082
|
if (this.update) {
|
|
2041
|
-
this.
|
|
2042
|
-
this.idSelected.emit(this.
|
|
2083
|
+
this.id = object['id'];
|
|
2084
|
+
this.idSelected.emit(this.id);
|
|
2043
2085
|
}
|
|
2044
2086
|
}
|
|
2045
2087
|
/**
|
|
@@ -2162,10 +2204,10 @@ class ModelTableComponent {
|
|
|
2162
2204
|
}
|
|
2163
2205
|
}
|
|
2164
2206
|
ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }, { token: i1$1.ToastService }, { token: i1$1.ScrollService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2165
|
-
ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", import: "import", export: "export", duplicate: "duplicate",
|
|
2207
|
+
ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelTableComponent, selector: "base-model-table", inputs: { modelName: "modelName", objectId: "objectId", createMode: "createMode", logging: "logging", create: "create", update: "update", delete: "delete", import: "import", export: "export", duplicate: "duplicate", modelConfig: "modelConfig", config: "config", showFavButton: "showFavButton" }, outputs: { idSelected: "idSelected", createModeChanged: "createModeChanged" }, viewQueries: [{ propertyName: "customFormTemplate", first: true, predicate: ["customFormTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!id && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n {{\n modelConfig?.plural\n ? modelConfig?.plural\n : modelConfig?.label\n ? modelConfig?.label\n : capitalizeFirstLetter(camelModelName) + 's'\n }}\n </h2>\n <div class=\"d-flex align-items-center d-none d-lg-block\">\n <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n <i\n class=\"bi bi-three-dots-vertical\"\n id=\"settingsDropdown\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n data-bs-auto-close=\"true\"\n aria-expanded=\"false\"\n ></i>\n <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n </ul>\n </div>\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n\n <div\n class=\"table-responsive\"\n [ltContextMenu]=\"contextMenu\"\n [selectors]=\"'.object-col'\"\n #contextMenuData=\"contextMenuData\"\n >\n <table class=\"table table-hover bg-white d-none d-lg-table\">\n <thead>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let field of availableFields\"\n [baseSort]=\"objects\"\n data-order=\"desc\"\n [attr.data-name]=\"field\"\n >\n {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\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]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n <b *ngIf=\"i > 0\"\n >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n >\n <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\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]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </p>\n </div>\n </div>\n </div>\n\n <nav *ngIf=\"totalCount >= 0\">\n <ul class=\"pagination justify-content-center\">\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex - 1)\"\n aria-label=\"Previous\"\n [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n >\n <span aria-hidden=\"true\">«</span>\n </a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n </li>\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex + 1)\"\n aria-label=\"Next\"\n [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n >\n <span aria-hidden=\"true\">»</span>\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"context-menu\" #contextMenu>\n <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n Duplizieren\n </div>\n <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n L\u00F6schen\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"id || createMode\">\n <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n <base-model-form\n *ngIf=\"!modelConfig?.customTemplateComponent\"\n [modelName]=\"camelModelName\"\n [label]=\"modelConfig?.label\"\n [config]=\"config\"\n [logging]=\"logging\"\n [id]=\"id\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n</div>\n<ng-template *ngIf=\"modelConfig?.customTemplateComponent\" #customFormTemplate></ng-template>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n <base-fab-button\n [fabIcon]=\"'bi-plus'\"\n (click)=\"createNewObject()\"\n *ngIf=\"!(id || createMode) && showFavButton\"\n ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.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}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SortDirective, selector: "[baseSort]", inputs: ["baseSort"] }, { kind: "directive", type: ContextMenuDirective, selector: "[ltContextMenu]", inputs: ["contextMenuData", "ltContextMenu", "xGap", "yGap", "overflowSpace", "selectors"], outputs: ["clickedElement"], exportAs: ["contextMenuData"] }, { kind: "component", type: ModelFormComponent, selector: "base-model-form", inputs: ["modelName", "label", "id", "delete", "onlyUpdateMode", "duplicate", "logging", "config", "showFavButton"], outputs: ["finished"] }, { kind: "component", type: FabButtonComponent, selector: "base-fab-button", inputs: ["fabIcon", "buttons"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: EllipsesPipe, name: "baseEllipses" }] });
|
|
2166
2208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelTableComponent, decorators: [{
|
|
2167
2209
|
type: Component,
|
|
2168
|
-
args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!
|
|
2210
|
+
args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!id && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n {{\n modelConfig?.plural\n ? modelConfig?.plural\n : modelConfig?.label\n ? modelConfig?.label\n : capitalizeFirstLetter(camelModelName) + 's'\n }}\n </h2>\n <div class=\"d-flex align-items-center d-none d-lg-block\">\n <input #importFile type=\"file\" accept=\".json\" class=\"d-none\" (change)=\"processImport($event)\" />\n <div class=\"btn-group me-4\" *ngIf=\"import || export\">\n <i\n class=\"bi bi-three-dots-vertical\"\n id=\"settingsDropdown\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n data-bs-auto-close=\"true\"\n aria-expanded=\"false\"\n ></i>\n <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"settingsDropdown\">\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"export\" (click)=\"processExport()\">Export</a></li>\n <li><a class=\"dropdown-item cursor-pointer\" *ngIf=\"import\" (click)=\"importFile.click()\"> Import </a></li>\n </ul>\n </div>\n <button class=\"btn btn-primary\" (click)=\"createNewObject()\" *ngIf=\"create\">Erstellen</button>\n </div>\n </div>\n\n <div\n class=\"table-responsive\"\n [ltContextMenu]=\"contextMenu\"\n [selectors]=\"'.object-col'\"\n #contextMenuData=\"contextMenuData\"\n >\n <table class=\"table table-hover bg-white d-none d-lg-table\">\n <thead>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let field of availableFields\"\n [baseSort]=\"objects\"\n data-order=\"desc\"\n [attr.data-name]=\"field\"\n >\n {{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"object-col\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\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]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"d-flex d-lg-none flex-column flex-grow-1\">\n <div class=\"table-card\" *ngFor=\"let object of objects\" [id]=\"object[uniqueField]\">\n <div class=\"table-card-entry\" *ngFor=\"let field of availableFields; let i = index\" (click)=\"selectId(object)\">\n <b *ngIf=\"i > 0\"\n >{{ tableFields[field]?.label ? tableFields[field]?.label : capitalizeFirstLetter(field) }}:</b\n >\n <p [ngClass]=\"{ 'table-card-entry-first': i === 0 }\">\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]?.enumValues\">\n {{ tableFields[field]?.enumValues[object[field]]?.text }}\n </ng-container>\n\n <ng-container *ngIf=\"!tableFields[field]?.dateFormat && !tableFields[field]?.enumValues\">\n {{ object[field] | baseEllipses: 60 }}\n </ng-container>\n </p>\n </div>\n </div>\n </div>\n\n <nav *ngIf=\"totalCount >= 0\">\n <ul class=\"pagination justify-content-center\">\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex - 1)\"\n aria-label=\"Previous\"\n [ngClass]=\"{ disabled: selectedPageIndex - 1 > 0 }\"\n >\n <span aria-hidden=\"true\">«</span>\n </a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages; let i = index\">\n <a class=\"page-link\" [ngClass]=\"{ active: selectedPageIndex === i }\" (click)=\"selectPage(i)\">{{ i + 1 }}</a>\n </li>\n <li class=\"page-item\">\n <a\n class=\"page-link\"\n (click)=\"selectPage(selectedPageIndex + 1)\"\n aria-label=\"Next\"\n [ngClass]=\"{ disabled: pages[selectedPageIndex + 1] }\"\n >\n <span aria-hidden=\"true\">»</span>\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"context-menu\" #contextMenu>\n <div class=\"context-menu-item\" (click)=\"selectId({ id: contextMenuData.clickedElement?.id })\">Bearbeiten</div>\n <div class=\"context-menu-item\" *ngIf=\"duplicate\" (click)=\"duplicateObject(contextMenuData.clickedElement?.id)\">\n Duplizieren\n </div>\n <div class=\"context-menu-item\" *ngIf=\"delete\" (click)=\"deleteObject(contextMenuData.clickedElement?.id)\">\n L\u00F6schen\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-100\" *ngIf=\"id || createMode\">\n <button class=\"d-none d-lg-block btn btn-outline-primary mb-3\" (click)=\"selectId('')\">Zur\u00FCck</button>\n <base-model-form\n *ngIf=\"!modelConfig?.customTemplateComponent\"\n [modelName]=\"camelModelName\"\n [label]=\"modelConfig?.label\"\n [config]=\"config\"\n [logging]=\"logging\"\n [id]=\"id\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n</div>\n<ng-template *ngIf=\"modelConfig?.customTemplateComponent\" #customFormTemplate></ng-template>\n\n<div class=\"responsive-action-button d-block d-lg-none\">\n <base-fab-button\n [fabIcon]=\"'bi-plus'\"\n (click)=\"createNewObject()\"\n *ngIf=\"!(id || createMode) && showFavButton\"\n ></base-fab-button>\n</div>\n", styles: [".cursor-pointer{cursor:pointer}.asc:after,.desc:after{border-style:solid;border-width:.2em .2em 0 0;content:\"\";display:inline-block;height:.45em;left:5px;position:relative;transform:rotate(-45deg);vertical-align:middle;width:.45em}.asc:after{transform:rotate(135deg)}td{vertical-align:middle}.bi,th{cursor:pointer;-webkit-user-select:none;user-select:none}.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}.context-menu{opacity:.01%;pointer-events:none;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 10px #0000001a;padding:10px 0;position:fixed;top:0;left:0;width:200px}.context-menu-item{cursor:pointer;padding:8px 15px}.context-menu-item:hover{color:var(--bs-primary)}.table-card{background:var(--bs-white);padding:10px;margin-bottom:10px}.table-card-entry{margin-top:4px}.table-card-entry-first{font-size:18px;font-weight:800;color:var(--bs-primary)}.responsive-action-button{position:fixed;bottom:15px;right:15px}.bi-three-dots-vertical{font-size:18px;line-height:18px}.page-item{cursor:pointer}\n"] }]
|
|
2169
2211
|
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }, { type: i1$1.ToastService }, { type: i1$1.ScrollService }]; }, propDecorators: { modelName: [{
|
|
2170
2212
|
type: Input
|
|
2171
2213
|
}], objectId: [{
|
|
@@ -2186,9 +2228,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
2186
2228
|
type: Input
|
|
2187
2229
|
}], duplicate: [{
|
|
2188
2230
|
type: Input
|
|
2189
|
-
}],
|
|
2231
|
+
}], modelConfig: [{
|
|
2190
2232
|
type: Input
|
|
2191
|
-
}],
|
|
2233
|
+
}], config: [{
|
|
2192
2234
|
type: Input
|
|
2193
2235
|
}], showFavButton: [{
|
|
2194
2236
|
type: Input
|
|
@@ -2196,6 +2238,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
2196
2238
|
type: Output
|
|
2197
2239
|
}], createModeChanged: [{
|
|
2198
2240
|
type: Output
|
|
2241
|
+
}], customFormTemplate: [{
|
|
2242
|
+
type: ViewChild,
|
|
2243
|
+
args: ['customFormTemplate', { read: ViewContainerRef }]
|
|
2199
2244
|
}] } });
|
|
2200
2245
|
|
|
2201
2246
|
class ChangePasswordComponent {
|
|
@@ -2444,6 +2489,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
2444
2489
|
}]
|
|
2445
2490
|
}] });
|
|
2446
2491
|
|
|
2492
|
+
/**
|
|
2493
|
+
* Abstract Component for inputs and outputs only
|
|
2494
|
+
*
|
|
2495
|
+
* Hint for handling extensions of this component in project:
|
|
2496
|
+
* If you want to use complete custom services and methods, extend ModelFormComponent instead of ModelFormBaseComponent
|
|
2497
|
+
*/
|
|
2498
|
+
class ModelFormBaseComponent {
|
|
2499
|
+
constructor(cmsService) {
|
|
2500
|
+
this.cmsService = cmsService;
|
|
2501
|
+
this.delete = true;
|
|
2502
|
+
this.onlyUpdateMode = false;
|
|
2503
|
+
this.duplicate = false;
|
|
2504
|
+
this.logging = false;
|
|
2505
|
+
this.config = null;
|
|
2506
|
+
this.showFavButton = true;
|
|
2507
|
+
this.finished = new EventEmitter();
|
|
2508
|
+
this.fabButtons = [];
|
|
2509
|
+
}
|
|
2510
|
+
ngOnInit() {
|
|
2511
|
+
this.initFabActions();
|
|
2512
|
+
}
|
|
2513
|
+
/**
|
|
2514
|
+
* Init fab buttons for mobile devices
|
|
2515
|
+
*/
|
|
2516
|
+
initFabActions() {
|
|
2517
|
+
const saveEvent = new EventEmitter();
|
|
2518
|
+
this.fabButtons.push({ icon: 'bi-check-lg', color: 'var(--bs-success)', event: saveEvent });
|
|
2519
|
+
saveEvent.subscribe(() => this.submit());
|
|
2520
|
+
if (this.duplicate && this.operation === 'update') {
|
|
2521
|
+
const event = new EventEmitter();
|
|
2522
|
+
this.fabButtons.push({ icon: 'bi-back', color: 'var(--bs-info)', event });
|
|
2523
|
+
event.subscribe(() => this.duplicateObject());
|
|
2524
|
+
}
|
|
2525
|
+
if (this.operation === 'update' && this.delete) {
|
|
2526
|
+
const event = new EventEmitter();
|
|
2527
|
+
this.fabButtons.push({ icon: 'bi-trash3', color: 'var(--bs-danger)', event });
|
|
2528
|
+
event.subscribe(() => this.deleteObject());
|
|
2529
|
+
}
|
|
2530
|
+
}
|
|
2531
|
+
submit() { }
|
|
2532
|
+
duplicateObject() { }
|
|
2533
|
+
deleteObject() { }
|
|
2534
|
+
/**
|
|
2535
|
+
* It takes a string, capitalizes the first letter, and returns the modified string
|
|
2536
|
+
*
|
|
2537
|
+
* @param value - The string to capitalize.
|
|
2538
|
+
* @returns The first letter of the string is being capitalized and the rest of the string is being returned.
|
|
2539
|
+
*/
|
|
2540
|
+
capitalizeFirstLetter(value) {
|
|
2541
|
+
return this.cmsService.capitalizeFirstLetter(value);
|
|
2542
|
+
}
|
|
2543
|
+
/**
|
|
2544
|
+
* It takes an AbstractControl and returns a FormControl
|
|
2545
|
+
*
|
|
2546
|
+
* @param control - AbstractControl | null | undefined
|
|
2547
|
+
* @returns A FormControl
|
|
2548
|
+
*/
|
|
2549
|
+
transformToControl(control) {
|
|
2550
|
+
return control;
|
|
2551
|
+
}
|
|
2552
|
+
}
|
|
2553
|
+
ModelFormBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormBaseComponent, deps: [{ token: i1$1.CmsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2554
|
+
ModelFormBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelFormBaseComponent, selector: "base-model-form", inputs: { modelName: "modelName", label: "label", id: "id", delete: "delete", onlyUpdateMode: "onlyUpdateMode", duplicate: "duplicate", logging: "logging", config: "config", showFavButton: "showFavButton" }, outputs: { finished: "finished" }, ngImport: i0, template: "<div class=\"w-100\" *ngIf=\"form\">\n <div class=\"d-flex flex-row justify-content-between mt-3\">\n <div class=\"responsive-back d-flex d-lg-none\">\n <i class=\"bi bi-arrow-left\" routerLink=\"../\"></i>\n </div>\n <h2 class=\"mb-0\">\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <div class=\"d-none d-lg-flex flex-row align-items-center justify-content-end\">\n <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !_loading\" (click)=\"duplicateObject()\">\n Duplizieren\n </button>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"!form.touched && !form.dirty\"\n (click)=\"submit(false)\"\n *ngIf=\"!_loading\"\n >\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 [id]=\"id\"\n [fields]=\"fields\"\n [config]=\"config\"\n [form]=\"form\"\n (imageChanged)=\"imageChanged($event)\"\n (fileChanged)=\"processFileChanges($event)\"\n ></base-model-form-sub>\n\n <div class=\"d-none d-lg-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\n class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"!form.touched && !form.dirty\"\n (click)=\"submit(false)\"\n *ngIf=\"!_loading\"\n >\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\n<div class=\"d-block d-lg-none responsive-action-button\" *ngIf=\"showFavButton\">\n <base-fab-button [buttons]=\"fabButtons\"></base-fab-button>\n</div>\n", styles: [".responsive-back{display:flex;align-items:center;margin-right:6px}.responsive-back .bi-arrow-left{font-size:28px}h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.responsive-action-button{position:fixed;bottom:15px;right:15px;z-index:100}\n"] });
|
|
2555
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormBaseComponent, decorators: [{
|
|
2556
|
+
type: Component,
|
|
2557
|
+
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 <div class=\"responsive-back d-flex d-lg-none\">\n <i class=\"bi bi-arrow-left\" routerLink=\"../\"></i>\n </div>\n <h2 class=\"mb-0\">\n {{ label ? label : capitalizeFirstLetter(modelName) }} {{ operation === 'update' ? 'bearbeiten' : 'erstellen' }}\n </h2>\n\n <div class=\"d-none d-lg-flex flex-row align-items-center justify-content-end\">\n <button class=\"btn btn-outline-primary me-2\" *ngIf=\"id && duplicate && !_loading\" (click)=\"duplicateObject()\">\n Duplizieren\n </button>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"!form.touched && !form.dirty\"\n (click)=\"submit(false)\"\n *ngIf=\"!_loading\"\n >\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 [id]=\"id\"\n [fields]=\"fields\"\n [config]=\"config\"\n [form]=\"form\"\n (imageChanged)=\"imageChanged($event)\"\n (fileChanged)=\"processFileChanges($event)\"\n ></base-model-form-sub>\n\n <div class=\"d-none d-lg-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\n class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"!form.touched && !form.dirty\"\n (click)=\"submit(false)\"\n *ngIf=\"!_loading\"\n >\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\n<div class=\"d-block d-lg-none responsive-action-button\" *ngIf=\"showFavButton\">\n <base-fab-button [buttons]=\"fabButtons\"></base-fab-button>\n</div>\n", styles: [".responsive-back{display:flex;align-items:center;margin-right:6px}.responsive-back .bi-arrow-left{font-size:28px}h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.responsive-action-button{position:fixed;bottom:15px;right:15px;z-index:100}\n"] }]
|
|
2558
|
+
}], ctorParameters: function () { return [{ type: i1$1.CmsService }]; }, propDecorators: { modelName: [{
|
|
2559
|
+
type: Input
|
|
2560
|
+
}], label: [{
|
|
2561
|
+
type: Input
|
|
2562
|
+
}], id: [{
|
|
2563
|
+
type: Input
|
|
2564
|
+
}], delete: [{
|
|
2565
|
+
type: Input
|
|
2566
|
+
}], onlyUpdateMode: [{
|
|
2567
|
+
type: Input
|
|
2568
|
+
}], duplicate: [{
|
|
2569
|
+
type: Input
|
|
2570
|
+
}], logging: [{
|
|
2571
|
+
type: Input
|
|
2572
|
+
}], config: [{
|
|
2573
|
+
type: Input
|
|
2574
|
+
}], showFavButton: [{
|
|
2575
|
+
type: Input
|
|
2576
|
+
}], finished: [{
|
|
2577
|
+
type: Output
|
|
2578
|
+
}] } });
|
|
2579
|
+
|
|
2447
2580
|
/**
|
|
2448
2581
|
* Exports for public API
|
|
2449
2582
|
*/
|
|
@@ -2452,5 +2585,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
2452
2585
|
* Generated bundle index. Do not edit.
|
|
2453
2586
|
*/
|
|
2454
2587
|
|
|
2455
|
-
export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, DeleteAccountComponent, EllipsesPipe, FabButtonComponent, InputComponent, LoadingBarComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, StopPropagationDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
|
|
2588
|
+
export { BackButtonDirective, BaseComponentsModule, BreadcrumbComponent, ChangePasswordComponent, CheckboxComponent, ContextMenuDirective, DeleteAccountComponent, EllipsesPipe, FabButtonComponent, InputComponent, LoadingBarComponent, ModelFormBaseComponent, ModelFormComponent, ModelFormSubComponent, ModelTableComponent, RefenceInputComponent, SelectComponent, SkeletonLoaderComponent, SortDirective, StopPropagationDirective, TagsComponent, TextareaComponent, ToastComponent, UploadImageComponent };
|
|
2456
2589
|
//# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map
|