@wertzui/ngx-restworld-client 3.1.1 → 3.2.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/esm2020/lib/services/restworld-client.mjs +25 -4
- package/esm2020/lib/views/restworld-list-view/restworld-list-view.component.mjs +45 -11
- package/fesm2015/wertzui-ngx-restworld-client.mjs +70 -13
- package/fesm2015/wertzui-ngx-restworld-client.mjs.map +1 -1
- package/fesm2020/wertzui-ngx-restworld-client.mjs +68 -13
- package/fesm2020/wertzui-ngx-restworld-client.mjs.map +1 -1
- package/lib/services/restworld-client.d.ts +1 -0
- package/lib/views/restworld-list-view/restworld-list-view.component.d.ts +18 -5
- package/package.json +2 -2
|
@@ -334,14 +334,18 @@ class RESTworldClient {
|
|
|
334
334
|
async getList(rel, parameters, headers, curie) {
|
|
335
335
|
const link = this.getLinkFromHome(rel, LinkNames.getList, curie);
|
|
336
336
|
const uri = link.fillTemplate(parameters);
|
|
337
|
-
const
|
|
337
|
+
const defaultHeaders = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
|
|
338
|
+
const combinedHeaders = RESTworldClient.combineHeaders(headers, defaultHeaders, false);
|
|
339
|
+
const response = await this.halClient.get(uri, PagedListResource, ProblemDetails, combinedHeaders);
|
|
338
340
|
return response;
|
|
339
341
|
}
|
|
340
342
|
async getListByUri(uri, parameters, headers) {
|
|
341
343
|
const link = new Link();
|
|
342
344
|
link.href = uri;
|
|
343
345
|
const filledUri = link.fillTemplate(parameters);
|
|
344
|
-
const
|
|
346
|
+
const defaultHeaders = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
|
|
347
|
+
const combinedHeaders = RESTworldClient.combineHeaders(headers, defaultHeaders, false);
|
|
348
|
+
const response = await this.halClient.get(filledUri, PagedListResource, ProblemDetails, combinedHeaders);
|
|
345
349
|
return response;
|
|
346
350
|
}
|
|
347
351
|
async getSingle(relOrUri, id, headers, curie) {
|
|
@@ -359,7 +363,9 @@ class RESTworldClient {
|
|
|
359
363
|
const link = this.getLinkFromHome(relOrUri, LinkNames.get, curie);
|
|
360
364
|
uri = link.fillTemplate({ id: id.toString() });
|
|
361
365
|
}
|
|
362
|
-
const
|
|
366
|
+
const defaultHeaders = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
|
|
367
|
+
const combinedHeaders = RESTworldClient.combineHeaders(headers, defaultHeaders, false);
|
|
368
|
+
const response = await this.halClient.get(uri, Resource, ProblemDetails, combinedHeaders);
|
|
363
369
|
return response;
|
|
364
370
|
}
|
|
365
371
|
async save(resource) {
|
|
@@ -457,6 +463,21 @@ class RESTworldClient {
|
|
|
457
463
|
});
|
|
458
464
|
return new HttpHeaders();
|
|
459
465
|
}
|
|
466
|
+
static combineHeaders(originalHeaders, headersToAdd, overwriteExisting) {
|
|
467
|
+
if (!headersToAdd)
|
|
468
|
+
return originalHeaders;
|
|
469
|
+
if (!originalHeaders)
|
|
470
|
+
return headersToAdd;
|
|
471
|
+
let combinedHeaders = originalHeaders;
|
|
472
|
+
for (const key in headersToAdd.keys) {
|
|
473
|
+
if (!combinedHeaders.has(key) || overwriteExisting) {
|
|
474
|
+
const headerValuesToAdd = headersToAdd.getAll(key);
|
|
475
|
+
if (headerValuesToAdd)
|
|
476
|
+
combinedHeaders = combinedHeaders.set(key, headerValuesToAdd);
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
return combinedHeaders;
|
|
480
|
+
}
|
|
460
481
|
}
|
|
461
482
|
|
|
462
483
|
class RESTworldClientCollection {
|
|
@@ -1163,6 +1184,8 @@ var ColumnType;
|
|
|
1163
1184
|
ColumnType["numeric"] = "numeric";
|
|
1164
1185
|
ColumnType["boolean"] = "boolean";
|
|
1165
1186
|
ColumnType["date"] = "date";
|
|
1187
|
+
ColumnType["array"] = "array";
|
|
1188
|
+
ColumnType["object"] = "object";
|
|
1166
1189
|
})(ColumnType || (ColumnType = {}));
|
|
1167
1190
|
class RESTworldListViewComponent {
|
|
1168
1191
|
constructor(_clients, _confirmationService, _messageService, avatarGenerator) {
|
|
@@ -1172,8 +1195,11 @@ class RESTworldListViewComponent {
|
|
|
1172
1195
|
this.avatarGenerator = avatarGenerator;
|
|
1173
1196
|
this._columns = [];
|
|
1174
1197
|
this._editLink = '/edit';
|
|
1198
|
+
this._sortField = '';
|
|
1199
|
+
this._sortOrder = 1;
|
|
1175
1200
|
this.isLoading = false;
|
|
1176
1201
|
this._totalRecords = 0;
|
|
1202
|
+
this.load = _.debounce(this.load2, 100);
|
|
1177
1203
|
this.rowsPerPage = [10, 25, 50];
|
|
1178
1204
|
this._lastEvent = {
|
|
1179
1205
|
rows: this.rowsPerPage[0]
|
|
@@ -1191,20 +1217,34 @@ class RESTworldListViewComponent {
|
|
|
1191
1217
|
}
|
|
1192
1218
|
set apiName(value) {
|
|
1193
1219
|
this._apiName = value;
|
|
1194
|
-
|
|
1195
|
-
this.load(this._lastEvent);
|
|
1220
|
+
this.load(this._lastEvent);
|
|
1196
1221
|
}
|
|
1197
1222
|
get apiName() {
|
|
1198
1223
|
return this._apiName;
|
|
1199
1224
|
}
|
|
1200
1225
|
set rel(value) {
|
|
1201
1226
|
this._rel = value;
|
|
1202
|
-
|
|
1203
|
-
this.load(this._lastEvent);
|
|
1227
|
+
this.load(this._lastEvent);
|
|
1204
1228
|
}
|
|
1205
1229
|
get rel() {
|
|
1206
1230
|
return this._rel;
|
|
1207
1231
|
}
|
|
1232
|
+
set sortField(value) {
|
|
1233
|
+
this._sortField = value ?? '';
|
|
1234
|
+
this._lastEvent.sortField = value;
|
|
1235
|
+
this.load(this._lastEvent);
|
|
1236
|
+
}
|
|
1237
|
+
get sortField() {
|
|
1238
|
+
return this._sortField;
|
|
1239
|
+
}
|
|
1240
|
+
set sortOrder(value) {
|
|
1241
|
+
this._sortOrder = value ?? 1;
|
|
1242
|
+
this._lastEvent.sortOrder = value;
|
|
1243
|
+
this.load(this._lastEvent);
|
|
1244
|
+
}
|
|
1245
|
+
get sortOrder() {
|
|
1246
|
+
return this._sortOrder;
|
|
1247
|
+
}
|
|
1208
1248
|
get value() {
|
|
1209
1249
|
return this.resource?._embedded?.items || [];
|
|
1210
1250
|
}
|
|
@@ -1217,21 +1257,28 @@ class RESTworldListViewComponent {
|
|
|
1217
1257
|
set totalRecords(value) {
|
|
1218
1258
|
this._totalRecords = value || 0;
|
|
1219
1259
|
}
|
|
1220
|
-
get sortOrder() {
|
|
1221
|
-
return this._lastEvent.sortOrder || 0;
|
|
1222
|
-
}
|
|
1223
1260
|
get newHref() {
|
|
1224
1261
|
return this.resource?.findLink('new')?.href;
|
|
1225
1262
|
}
|
|
1226
1263
|
get dateFormat() {
|
|
1227
1264
|
return RESTworldListViewComponent._dateFormat;
|
|
1228
1265
|
}
|
|
1266
|
+
ngOnChanges(changes) {
|
|
1267
|
+
console.log("ngOnChanges " + changes);
|
|
1268
|
+
}
|
|
1269
|
+
ngOnInit() {
|
|
1270
|
+
console.log("ngOnInit");
|
|
1271
|
+
}
|
|
1272
|
+
async ngAfterViewInit() {
|
|
1273
|
+
console.log("ngAfterViewInit");
|
|
1274
|
+
//await this.load(this._lastEvent);
|
|
1275
|
+
}
|
|
1229
1276
|
getClient() {
|
|
1230
1277
|
if (!this.apiName)
|
|
1231
1278
|
throw new Error('Cannot get a client, because the apiName is not set.');
|
|
1232
1279
|
return this._clients.getClient(this.apiName);
|
|
1233
1280
|
}
|
|
1234
|
-
async
|
|
1281
|
+
async load2(event) {
|
|
1235
1282
|
if (!this.apiName || !this.rel)
|
|
1236
1283
|
return;
|
|
1237
1284
|
this.isLoading = true;
|
|
@@ -1323,6 +1370,10 @@ class RESTworldListViewComponent {
|
|
|
1323
1370
|
return ColumnType.text;
|
|
1324
1371
|
if (_.isBoolean(value))
|
|
1325
1372
|
return ColumnType.boolean;
|
|
1373
|
+
if (_.isArrayLike(value))
|
|
1374
|
+
return ColumnType.array;
|
|
1375
|
+
if (_.isObjectLike(value))
|
|
1376
|
+
return ColumnType.object;
|
|
1326
1377
|
return ColumnType.text;
|
|
1327
1378
|
}
|
|
1328
1379
|
static toTitleCase(anyCase) {
|
|
@@ -1466,16 +1517,20 @@ RESTworldListViewComponent._dateFormat = new Date(3333, 10, 22)
|
|
|
1466
1517
|
.replace("3333", "y")
|
|
1467
1518
|
.replace("33", "yy");
|
|
1468
1519
|
RESTworldListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: RESTworldListViewComponent, deps: [{ token: RESTworldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: AvatarGenerator }], target: i0.ɵɵFactoryTarget.Component });
|
|
1469
|
-
RESTworldListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: RESTworldListViewComponent, selector: "rw-list", inputs: { editLink: "editLink", apiName: "apiName", rel: "rel", rowsPerPage: "rowsPerPage" }, ngImport: i0, template: "<p-table [value]=\"value\"\r\n [lazy]=\"true\"\r\n [lazyLoadOnInit]=\"false\"\r\n (onLazyLoad)=\"load($event)\"\r\n responsiveLayout=\"scroll\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [rowsPerPageOptions]=\"rowsPerPage\"\r\n [totalRecords]=\"totalRecords\"\r\n [loading]=\"isLoading\"\r\n [showInitialSortBadge]=\"true\"\r\n [columns]=\"columns\">\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n {{col.header}}\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"flex justify-content-end\">\r\n <div class=\"mx-2\" pTooltip=\"Create new\" tooltipPosition=\"left\">\r\n <a class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"['/edit', apiName, newHref]\"></a>\r\n </div>\r\n </div>\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n <tr>\r\n
|
|
1520
|
+
RESTworldListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: RESTworldListViewComponent, selector: "rw-list", inputs: { editLink: "editLink", apiName: "apiName", rel: "rel", sortField: "sortField", sortOrder: "sortOrder", rowsPerPage: "rowsPerPage" }, usesOnChanges: true, ngImport: i0, template: "<p-table [value]=\"value\"\r\n [lazy]=\"true\"\r\n [lazyLoadOnInit]=\"false\"\r\n (onLazyLoad)=\"load($event)\"\r\n responsiveLayout=\"scroll\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [rowsPerPageOptions]=\"rowsPerPage\"\r\n [totalRecords]=\"totalRecords\"\r\n [loading]=\"isLoading\"\r\n [showInitialSortBadge]=\"true\"\r\n [columns]=\"columns\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\">\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n {{col.header}}\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"flex justify-content-end\">\r\n <div class=\"mx-2\" pTooltip=\"Create new\" tooltipPosition=\"left\">\r\n <a class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"['/edit', apiName, newHref]\"></a>\r\n </div>\r\n </div>\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n <tr>\r\n <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <p-avatar *ngIf=\"col.field === 'createdBy' || col.field === 'lastChangedBy'\" [pTooltip]=\"entity[col.field]\" tooltipPosition=\"top\" [image]=\"avatarGenerator.getImage(entity[col.field])\" [label]=\"avatarGenerator.getLabel(entity[col.field])\" [style]=\"avatarGenerator.getStyle(entity[col.field])\" shape=\"circle\"></p-avatar>\r\n <span *ngIf=\"col.field !== 'createdBy' && col.field !== 'lastChangedBy'\">{{entity[col.field]}}</span>\r\n </ng-container>\r\n <span *ngSwitchCase=\"'numeric'\" class=\"flex justify-content-end\">{{entity[col.field]}}</span>\r\n <span *ngSwitchCase=\"'boolean'\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.field]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n <span *ngSwitchCase=\"'date'\" [pTooltip]=\"entity[col.field]\">{{entity[col.field] | date:dateFormat}}</span>\r\n <span *ngSwitchCase=\"'array'\" class=\"flex justify-content-end\"><p *ngFor=\"let arrayElement of entity[col.field]\">{{arrayElement | json}}</p></span>\r\n <span *ngSwitchCase=\"'object'\" class=\"flex justify-content-end\">{{entity[col.field] | json}}</span>\r\n </td>\r\n <td>\r\n <div class=\"flex justify-content-end\">\r\n <a pButton pTooltip=\"View/Edit\" tooltipPosition=\"left\" [routerLink]=\"[editLink, apiName, entity._links?.self[0].href]\" icon=\"fas fa-edit\"></a>\r\n <button pTooltip=\"Delete\" tooltipPosition=\"left\" pButton *ngIf=\"entity._links.delete\" (click)=\"showDeleteConfirmatioModal(entity)\" icon=\"fas fa-trash-alt\" type=\"button\" class=\"mx-2 p-button-danger\"></button>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"8\">No entries found.</td>\r\n </tr>\r\n </ng-template>\r\n\r\n</p-table>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"], components: [{ type: i4$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollDelay", "virtualRowHeight", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "minBufferPx", "maxBufferPx", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i4$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: i4$3.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { type: i5$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass"] }, { type: i9$1.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i12$1.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i4$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3$1.DatePipe, "json": i3$1.JsonPipe } });
|
|
1470
1521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: RESTworldListViewComponent, decorators: [{
|
|
1471
1522
|
type: Component,
|
|
1472
|
-
args: [{ selector: 'rw-list', template: "<p-table [value]=\"value\"\r\n [lazy]=\"true\"\r\n [lazyLoadOnInit]=\"false\"\r\n (onLazyLoad)=\"load($event)\"\r\n responsiveLayout=\"scroll\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [rowsPerPageOptions]=\"rowsPerPage\"\r\n [totalRecords]=\"totalRecords\"\r\n [loading]=\"isLoading\"\r\n [showInitialSortBadge]=\"true\"\r\n [columns]=\"columns\">\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n {{col.header}}\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"flex justify-content-end\">\r\n <div class=\"mx-2\" pTooltip=\"Create new\" tooltipPosition=\"left\">\r\n <a class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"['/edit', apiName, newHref]\"></a>\r\n </div>\r\n </div>\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n <tr>\r\n
|
|
1523
|
+
args: [{ selector: 'rw-list', template: "<p-table [value]=\"value\"\r\n [lazy]=\"true\"\r\n [lazyLoadOnInit]=\"false\"\r\n (onLazyLoad)=\"load($event)\"\r\n responsiveLayout=\"scroll\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [rowsPerPageOptions]=\"rowsPerPage\"\r\n [totalRecords]=\"totalRecords\"\r\n [loading]=\"isLoading\"\r\n [showInitialSortBadge]=\"true\"\r\n [columns]=\"columns\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\">\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n {{col.header}}\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"flex justify-content-end\">\r\n <div class=\"mx-2\" pTooltip=\"Create new\" tooltipPosition=\"left\">\r\n <a class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"['/edit', apiName, newHref]\"></a>\r\n </div>\r\n </div>\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n <tr>\r\n <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <p-avatar *ngIf=\"col.field === 'createdBy' || col.field === 'lastChangedBy'\" [pTooltip]=\"entity[col.field]\" tooltipPosition=\"top\" [image]=\"avatarGenerator.getImage(entity[col.field])\" [label]=\"avatarGenerator.getLabel(entity[col.field])\" [style]=\"avatarGenerator.getStyle(entity[col.field])\" shape=\"circle\"></p-avatar>\r\n <span *ngIf=\"col.field !== 'createdBy' && col.field !== 'lastChangedBy'\">{{entity[col.field]}}</span>\r\n </ng-container>\r\n <span *ngSwitchCase=\"'numeric'\" class=\"flex justify-content-end\">{{entity[col.field]}}</span>\r\n <span *ngSwitchCase=\"'boolean'\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.field]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n <span *ngSwitchCase=\"'date'\" [pTooltip]=\"entity[col.field]\">{{entity[col.field] | date:dateFormat}}</span>\r\n <span *ngSwitchCase=\"'array'\" class=\"flex justify-content-end\"><p *ngFor=\"let arrayElement of entity[col.field]\">{{arrayElement | json}}</p></span>\r\n <span *ngSwitchCase=\"'object'\" class=\"flex justify-content-end\">{{entity[col.field] | json}}</span>\r\n </td>\r\n <td>\r\n <div class=\"flex justify-content-end\">\r\n <a pButton pTooltip=\"View/Edit\" tooltipPosition=\"left\" [routerLink]=\"[editLink, apiName, entity._links?.self[0].href]\" icon=\"fas fa-edit\"></a>\r\n <button pTooltip=\"Delete\" tooltipPosition=\"left\" pButton *ngIf=\"entity._links.delete\" (click)=\"showDeleteConfirmatioModal(entity)\" icon=\"fas fa-trash-alt\" type=\"button\" class=\"mx-2 p-button-danger\"></button>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"8\">No entries found.</td>\r\n </tr>\r\n </ng-template>\r\n\r\n</p-table>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"] }]
|
|
1473
1524
|
}], ctorParameters: function () { return [{ type: RESTworldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: AvatarGenerator }]; }, propDecorators: { editLink: [{
|
|
1474
1525
|
type: Input
|
|
1475
1526
|
}], apiName: [{
|
|
1476
1527
|
type: Input
|
|
1477
1528
|
}], rel: [{
|
|
1478
1529
|
type: Input
|
|
1530
|
+
}], sortField: [{
|
|
1531
|
+
type: Input
|
|
1532
|
+
}], sortOrder: [{
|
|
1533
|
+
type: Input
|
|
1479
1534
|
}], rowsPerPage: [{
|
|
1480
1535
|
type: Input
|
|
1481
1536
|
}] } });
|