@lenne.tech/ng-base 14.15.1 → 14.16.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-table/model-table.component.d.ts +11 -4
- package/base-components/components/tags/tags.component.d.ts +2 -1
- package/esm2020/base-components/components/model-table/model-table.component.mjs +60 -20
- package/esm2020/base-components/components/tags/tags.component.mjs +10 -9
- package/fesm2015/lenne.tech-ng-base-base-components.mjs +71 -31
- package/fesm2015/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/fesm2020/lenne.tech-ng-base-base-components.mjs +68 -27
- package/fesm2020/lenne.tech-ng-base-base-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ import { DOCUMENT, 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, Sort, GraphQLRequestType, BasicUser, fullEmail, securePasswordValidator, Validation } from '@lenne.tech/ng-base/shared';
|
|
10
|
+
import { ToastType, Sort, GraphQLRequestType, BasicUser, fullEmail, SortOrderEnum, securePasswordValidator, Validation } from '@lenne.tech/ng-base/shared';
|
|
11
11
|
import * as i2$1 from '@angular/router';
|
|
12
12
|
import { RouterModule } from '@angular/router';
|
|
13
13
|
import * as i1$2 from '@angular/common/http';
|
|
@@ -277,10 +277,14 @@ class TagsComponent {
|
|
|
277
277
|
*
|
|
278
278
|
* @param tag
|
|
279
279
|
* @param reset
|
|
280
|
+
* @param isOption
|
|
280
281
|
*/
|
|
281
|
-
addTag(tag, reset = true) {
|
|
282
|
+
addTag(tag, reset = true, isOption = false) {
|
|
283
|
+
if (tag.endsWith(',') || tag.endsWith(' ')) {
|
|
284
|
+
tag = tag.slice(0, -1);
|
|
285
|
+
}
|
|
282
286
|
// Check if user copy string into input
|
|
283
|
-
if (tag.split(' ').length > 1) {
|
|
287
|
+
if (tag.split(' ').length > 1 && !isOption) {
|
|
284
288
|
const tags = tag.split(' ');
|
|
285
289
|
for (let i = 0; i < tags.length; i++) {
|
|
286
290
|
this.addTag(tags[i], i + 1 === tags.length);
|
|
@@ -288,16 +292,13 @@ class TagsComponent {
|
|
|
288
292
|
return;
|
|
289
293
|
}
|
|
290
294
|
// Check if user copy string into input
|
|
291
|
-
if (tag.split(',').length > 1) {
|
|
295
|
+
if (tag.split(',').length > 1 && !isOption) {
|
|
292
296
|
const tags = tag.split(',');
|
|
293
297
|
for (let i = 0; i < tags.length; i++) {
|
|
294
298
|
this.addTag(tags[i], i + 1 === tags.length);
|
|
295
299
|
}
|
|
296
300
|
return;
|
|
297
301
|
}
|
|
298
|
-
if (tag.endsWith(',') || tag.endsWith(' ')) {
|
|
299
|
-
tag = tag.slice(0, -1);
|
|
300
|
-
}
|
|
301
302
|
let foundOption;
|
|
302
303
|
if (!this.options) {
|
|
303
304
|
foundOption = { value: tag, text: tag };
|
|
@@ -399,10 +400,10 @@ class TagsComponent {
|
|
|
399
400
|
}
|
|
400
401
|
}
|
|
401
402
|
TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
402
|
-
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n [(ngModel)]=\"inputValue\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n type=\"text\"\n class=\"form-control\"\n (keyup)=\"enterKey($event)\"\n />\n\n <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text)\">\n {{ option?.text }}\n </div>\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?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] });
|
|
403
|
+
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", options: "options", custom: "custom", removeByKey: "removeByKey", required: "required" }, ngImport: i0, template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n [(ngModel)]=\"inputValue\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n type=\"text\"\n class=\"form-control\"\n (keyup)=\"enterKey($event)\"\n />\n\n <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text, true, true)\">\n {{ option?.text }}\n </div>\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?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] });
|
|
403
404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TagsComponent, decorators: [{
|
|
404
405
|
type: Component,
|
|
405
|
-
args: [{ selector: 'base-tags', template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n [(ngModel)]=\"inputValue\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n type=\"text\"\n class=\"form-control\"\n (keyup)=\"enterKey($event)\"\n />\n\n <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text)\">\n {{ option?.text }}\n </div>\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?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
|
|
406
|
+
args: [{ selector: 'base-tags', template: "<div class=\"form-group position-relative\" *ngIf=\"control\">\n <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n {{ getReadableTag(tag) }}\n <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n </div>\n </div>\n <input [formControl]=\"control\" hidden />\n <input\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n [(ngModel)]=\"inputValue\"\n [autocomplete]=\"autocomplete ?? null\"\n [tabIndex]=\"tabIndex ?? null\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onFocus()\"\n type=\"text\"\n class=\"form-control\"\n (keyup)=\"enterKey($event)\"\n />\n\n <div class=\"tag-options\" *ngIf=\"options && selectedElement\">\n <div class=\"tag-option-item\" *ngFor=\"let option of filterOptions()\" (click)=\"addTag(option?.text, true, true)\">\n {{ option?.text }}\n </div>\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?.['invalidReference'] && inputValue\">\n {{ inputValue }} ist kein g\u00FCltiger Wert f\u00FCr {{ label }}.\n </div>\n </div>\n</div>\n", styles: [".required:after{content:\" *\"}.tag-options{position:absolute;display:block;top:100%;left:0;right:0;border-top:0;background-color:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;transition:all .5s;z-index:999}.tag-options .tag-option-item{padding:10px;cursor:pointer}.tag-options .tag-option-item:hover{color:var(--bs-primary)}.tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
|
|
406
407
|
}], propDecorators: { id: [{
|
|
407
408
|
type: Input
|
|
408
409
|
}], name: [{
|
|
@@ -1696,11 +1697,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
1696
1697
|
}] });
|
|
1697
1698
|
|
|
1698
1699
|
class ModelTableComponent {
|
|
1699
|
-
constructor(graphQLMetaService, graphQLService, cmsService, toastService) {
|
|
1700
|
+
constructor(graphQLMetaService, graphQLService, cmsService, toastService, scrollService) {
|
|
1700
1701
|
this.graphQLMetaService = graphQLMetaService;
|
|
1701
1702
|
this.graphQLService = graphQLService;
|
|
1702
1703
|
this.cmsService = cmsService;
|
|
1703
1704
|
this.toastService = toastService;
|
|
1705
|
+
this.scrollService = scrollService;
|
|
1704
1706
|
this.createMode = false;
|
|
1705
1707
|
this.logging = false;
|
|
1706
1708
|
this.create = true;
|
|
@@ -1729,6 +1731,8 @@ class ModelTableComponent {
|
|
|
1729
1731
|
this.selectedId = '';
|
|
1730
1732
|
this.queryName = null;
|
|
1731
1733
|
this.possibleFields = {};
|
|
1734
|
+
this.selectedPageIndex = 0;
|
|
1735
|
+
this.pages = [];
|
|
1732
1736
|
}
|
|
1733
1737
|
ngOnInit() {
|
|
1734
1738
|
this.graphQLMetaService.getMeta().subscribe((meta) => {
|
|
@@ -1763,7 +1767,7 @@ class ModelTableComponent {
|
|
|
1763
1767
|
this.camelModelName = this.kebabToCamelCase(this.modelName);
|
|
1764
1768
|
// Set query name
|
|
1765
1769
|
if (!this.config?.queryName) {
|
|
1766
|
-
this.queryName = '
|
|
1770
|
+
this.queryName = 'findAndCount' + this.capitalizeFirstLetter(this.camelModelName) + 's';
|
|
1767
1771
|
}
|
|
1768
1772
|
else {
|
|
1769
1773
|
this.queryName = this.config?.queryName;
|
|
@@ -1778,7 +1782,13 @@ class ModelTableComponent {
|
|
|
1778
1782
|
console.log('ModelTableComponent::init->tableFields', this.tableFields);
|
|
1779
1783
|
}
|
|
1780
1784
|
this.possibleFields = this.meta.getFields(this.queryName).fields;
|
|
1781
|
-
|
|
1785
|
+
let keys;
|
|
1786
|
+
if (this.possibleFields?.items && Object.keys(this.possibleFields?.items?.fields).length > 0) {
|
|
1787
|
+
keys = Object.keys(this.possibleFields.items.fields);
|
|
1788
|
+
}
|
|
1789
|
+
else {
|
|
1790
|
+
keys = Object.keys(this.possibleFields);
|
|
1791
|
+
}
|
|
1782
1792
|
const tableFieldKeys = Object.keys(this.tableFields);
|
|
1783
1793
|
tableFieldKeys?.forEach((field) => {
|
|
1784
1794
|
if (keys.includes(field)) {
|
|
@@ -1790,7 +1800,8 @@ class ModelTableComponent {
|
|
|
1790
1800
|
console.log('ModelTableComponent::init->keys', keys);
|
|
1791
1801
|
console.log('ModelTableComponent::init->availableFields', this.availableFields);
|
|
1792
1802
|
}
|
|
1793
|
-
this.
|
|
1803
|
+
this.selectedPageIndex = 0;
|
|
1804
|
+
this.objects = await this.loadObjects(this.availableFields, 0, 25);
|
|
1794
1805
|
}
|
|
1795
1806
|
/**
|
|
1796
1807
|
* When the user clicks the "Create New" button, the createModeChanged event is emitted, which is then handled by the
|
|
@@ -1804,28 +1815,50 @@ class ModelTableComponent {
|
|
|
1804
1815
|
* It loads the objects from the database and stores them in the objects variable
|
|
1805
1816
|
*
|
|
1806
1817
|
* @param fields - string[] - The fields you want to load from the database.
|
|
1818
|
+
* @param skip
|
|
1819
|
+
* @param limit
|
|
1807
1820
|
*/
|
|
1808
|
-
loadObjects(fields) {
|
|
1821
|
+
loadObjects(fields, skip = 0, limit = 25) {
|
|
1809
1822
|
return new Promise((resolve, reject) => {
|
|
1810
1823
|
const requestFields = [...fields];
|
|
1811
1824
|
const idInFields = requestFields.find((e) => e === 'id');
|
|
1812
1825
|
if (!idInFields) {
|
|
1813
1826
|
requestFields.push('id');
|
|
1814
1827
|
}
|
|
1828
|
+
const isFindAndCount = this.queryName.includes('findAndCount');
|
|
1815
1829
|
this.graphQLService
|
|
1816
1830
|
.graphQl(this.queryName, {
|
|
1817
|
-
|
|
1831
|
+
arguments: {
|
|
1832
|
+
sort: [{ field: 'createdAt', order: SortOrderEnum.ASC }],
|
|
1833
|
+
limit: isFindAndCount ? limit : null,
|
|
1834
|
+
skip: isFindAndCount ? skip : null,
|
|
1835
|
+
},
|
|
1836
|
+
fields: isFindAndCount ? ['totalCount', { items: requestFields }] : requestFields,
|
|
1818
1837
|
type: GraphQLRequestType.QUERY,
|
|
1819
1838
|
})
|
|
1820
1839
|
.subscribe({
|
|
1821
1840
|
next: (value) => {
|
|
1841
|
+
let items;
|
|
1822
1842
|
if (this.logging) {
|
|
1823
1843
|
console.log('ModelTableComponent::loadObjects->value', value);
|
|
1824
1844
|
}
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1845
|
+
if (value?.totalCount >= 0) {
|
|
1846
|
+
items = value.items;
|
|
1847
|
+
this.totalCount = value.totalCount;
|
|
1848
|
+
this.pages = [];
|
|
1849
|
+
let numbers = 0;
|
|
1850
|
+
while (numbers < this.totalCount) {
|
|
1851
|
+
this.pages.push({
|
|
1852
|
+
skip: numbers,
|
|
1853
|
+
limit: numbers + 25 < this.totalCount ? numbers + 25 : this.totalCount,
|
|
1854
|
+
});
|
|
1855
|
+
numbers = numbers + 25;
|
|
1856
|
+
}
|
|
1857
|
+
}
|
|
1858
|
+
else {
|
|
1859
|
+
items = value;
|
|
1860
|
+
}
|
|
1861
|
+
resolve(items);
|
|
1829
1862
|
},
|
|
1830
1863
|
error: (err) => {
|
|
1831
1864
|
console.log('Error on loading objects', err);
|
|
@@ -1854,7 +1887,8 @@ class ModelTableComponent {
|
|
|
1854
1887
|
*/
|
|
1855
1888
|
async duplicateObject(id) {
|
|
1856
1889
|
await this.cmsService.duplicateObject(id, this.camelModelName);
|
|
1857
|
-
this.
|
|
1890
|
+
this.selectedPageIndex = 0;
|
|
1891
|
+
this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
|
|
1858
1892
|
}
|
|
1859
1893
|
/**
|
|
1860
1894
|
* It calls the deleteObject function in the cmsService, passing in the id of the object to delete and the name of the
|
|
@@ -1862,7 +1896,8 @@ class ModelTableComponent {
|
|
|
1862
1896
|
*/
|
|
1863
1897
|
async deleteObject(id) {
|
|
1864
1898
|
await this.cmsService.deleteObject(id, this.camelModelName);
|
|
1865
|
-
this.
|
|
1899
|
+
this.selectedPageIndex = 0;
|
|
1900
|
+
this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
|
|
1866
1901
|
}
|
|
1867
1902
|
/**
|
|
1868
1903
|
* It takes a string, capitalizes the first letter, and returns the modified string
|
|
@@ -1905,7 +1940,8 @@ class ModelTableComponent {
|
|
|
1905
1940
|
description: 'Element ' + (i + 1) + ' von ' + jsonResult.length + ' erfolgreich importiert.',
|
|
1906
1941
|
});
|
|
1907
1942
|
if (i === jsonResult.length - 1) {
|
|
1908
|
-
this.
|
|
1943
|
+
this.selectedPageIndex = 0;
|
|
1944
|
+
this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
|
|
1909
1945
|
}
|
|
1910
1946
|
},
|
|
1911
1947
|
error: () => {
|
|
@@ -1936,7 +1972,7 @@ class ModelTableComponent {
|
|
|
1936
1972
|
*/
|
|
1937
1973
|
async processExport() {
|
|
1938
1974
|
const keys = this.getAllKeys();
|
|
1939
|
-
const items = await this.loadObjects(keys);
|
|
1975
|
+
const items = await this.loadObjects(keys, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
|
|
1940
1976
|
const data = JSON.stringify(items);
|
|
1941
1977
|
const blob = new Blob([data], { type: 'text/json;charset=utf-8;' });
|
|
1942
1978
|
const url = URL.createObjectURL(blob);
|
|
@@ -1958,13 +1994,18 @@ class ModelTableComponent {
|
|
|
1958
1994
|
}
|
|
1959
1995
|
return items;
|
|
1960
1996
|
}
|
|
1997
|
+
async selectPage(i) {
|
|
1998
|
+
this.selectedPageIndex = i;
|
|
1999
|
+
await this.scrollService.scrollTo('model-table-top');
|
|
2000
|
+
this.objects = await this.loadObjects(this.availableFields, this.pages[this.selectedPageIndex].skip, this.pages[this.selectedPageIndex].limit);
|
|
2001
|
+
}
|
|
1961
2002
|
}
|
|
1962
|
-
ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelTableComponent, deps: [{ token: i1$1.GraphQLMetaService }, { token: i1$1.GraphQLService }, { token: i1$1.CmsService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1963
|
-
ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", 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", config: "config", fieldConfig: "fieldConfig", showFavButton: "showFavButton" }, 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 align-items-center mb-2 mb-lg-4\">\n <h2 class=\"mb-0\" *ngIf=\"modelName\">\n {{\n config?.plural ? config?.plural : config?.label ? config?.label : 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 <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=\"selectedId || 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 [modelName]=\"camelModelName\"\n [label]=\"config?.label\"\n [config]=\"fieldConfig\"\n [logging]=\"logging\"\n [id]=\"selectedId\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n</div>\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=\"!(selectedId || 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}\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" }] });
|
|
2003
|
+
ModelTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", 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 });
|
|
2004
|
+
ModelTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", 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", config: "config", fieldConfig: "fieldConfig", showFavButton: "showFavButton" }, 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 align-items-center mb-2 mb-lg-4\">\n <h2 id=\"model-table-top\" class=\"mb-0\" *ngIf=\"modelName\">\n {{\n config?.plural ? config?.plural : config?.label ? config?.label : 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=\"selectedId || 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 [modelName]=\"camelModelName\"\n [label]=\"config?.label\"\n [config]=\"fieldConfig\"\n [logging]=\"logging\"\n [id]=\"selectedId\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n</div>\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=\"!(selectedId || 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" }] });
|
|
1964
2005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ModelTableComponent, decorators: [{
|
|
1965
2006
|
type: Component,
|
|
1966
|
-
args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !createMode\">\n <div class=\"w-100 d-flex flex-row justify-content-between align-items-center mb-2 mb-lg-4\">\n <h2 class=\"mb-0\" *ngIf=\"modelName\">\n {{\n config?.plural ? config?.plural : config?.label ? config?.label : 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 <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=\"selectedId || 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 [modelName]=\"camelModelName\"\n [label]=\"config?.label\"\n [config]=\"fieldConfig\"\n [logging]=\"logging\"\n [id]=\"selectedId\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n</div>\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=\"!(selectedId || 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}\n"] }]
|
|
1967
|
-
}], ctorParameters: function () { return [{ type: i1$1.GraphQLMetaService }, { type: i1$1.GraphQLService }, { type: i1$1.CmsService }, { type: i1$1.ToastService }]; }, propDecorators: { modelName: [{
|
|
2007
|
+
args: [{ selector: 'base-model-table', template: "<div *ngIf=\"!selectedId && !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 config?.plural ? config?.plural : config?.label ? config?.label : 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=\"selectedId || 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 [modelName]=\"camelModelName\"\n [label]=\"config?.label\"\n [config]=\"fieldConfig\"\n [logging]=\"logging\"\n [id]=\"selectedId\"\n (finished)=\"selectId('')\"\n [delete]=\"delete\"\n [duplicate]=\"duplicate\"\n [showFavButton]=\"showFavButton\"\n ></base-model-form>\n</div>\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=\"!(selectedId || 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"] }]
|
|
2008
|
+
}], 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: [{
|
|
1968
2009
|
type: Input
|
|
1969
2010
|
}], objectId: [{
|
|
1970
2011
|
type: Input
|