@paperless/angular 0.1.0-alpha.246 → 0.1.0-alpha.248
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/modules/table/base/table.component.mjs +28 -2
- package/esm2020/lib/modules/table/components/table/table.component.mjs +27 -3
- package/esm2020/lib/modules/table/utils.mjs +2 -2
- package/fesm2015/paperless-angular.mjs +75 -25
- package/fesm2015/paperless-angular.mjs.map +1 -1
- package/fesm2020/paperless-angular.mjs +74 -25
- package/fesm2020/paperless-angular.mjs.map +1 -1
- package/lib/modules/table/base/table.component.d.ts +6 -1
- package/lib/modules/table/components/table/table.component.d.ts +6 -1
- package/lib/modules/table/utils.d.ts +1 -1
- package/package.json +1 -1
|
@@ -326,10 +326,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
326
326
|
}]
|
|
327
327
|
}] });
|
|
328
328
|
|
|
329
|
+
const createFormFilters = (values, quickFilters, quickFilterKey) => {
|
|
330
|
+
const filters = [];
|
|
331
|
+
let quickFilter = null;
|
|
332
|
+
for (const key of Object.keys(values)) {
|
|
333
|
+
const value = values[key];
|
|
334
|
+
if (key !== quickFilterKey && !(value === null || value === void 0 ? void 0 : value.length)) {
|
|
335
|
+
continue;
|
|
336
|
+
}
|
|
337
|
+
if (quickFilterKey && key === quickFilterKey) {
|
|
338
|
+
quickFilter = quickFilters.find((f) => f.value === value);
|
|
339
|
+
continue;
|
|
340
|
+
}
|
|
341
|
+
filters.push({
|
|
342
|
+
key,
|
|
343
|
+
value,
|
|
344
|
+
});
|
|
345
|
+
}
|
|
346
|
+
return {
|
|
347
|
+
filters,
|
|
348
|
+
quickFilter,
|
|
349
|
+
};
|
|
350
|
+
};
|
|
351
|
+
|
|
329
352
|
let BaseTableComponent = class BaseTableComponent extends FormBaseComponent {
|
|
330
353
|
constructor() {
|
|
331
354
|
super();
|
|
332
355
|
this.quickFilters = [];
|
|
356
|
+
this.filterForm = new FormGroup({});
|
|
357
|
+
this.defaultFilterFormValues = {};
|
|
333
358
|
this.pageSizeDefault = 12;
|
|
334
359
|
this._defaultTableValues = {
|
|
335
360
|
pageSize: this.pageSizeDefault,
|
|
@@ -445,6 +470,30 @@ let BaseTableComponent = class BaseTableComponent extends FormBaseComponent {
|
|
|
445
470
|
this._refresh();
|
|
446
471
|
}
|
|
447
472
|
}
|
|
473
|
+
applyFormFilters(values = null) {
|
|
474
|
+
values = values !== null && values !== void 0 ? values : this.filterForm.value;
|
|
475
|
+
const { filters, quickFilter } = createFormFilters(values, this.quickFilters, this.filterFormQuickFilterKey);
|
|
476
|
+
if (quickFilter) {
|
|
477
|
+
this.quickFilter = quickFilter;
|
|
478
|
+
}
|
|
479
|
+
this.filters = filters;
|
|
480
|
+
}
|
|
481
|
+
resetFormFilters(resetQuickFilter = false) {
|
|
482
|
+
var _a;
|
|
483
|
+
const values = this.filterForm.value;
|
|
484
|
+
const defaultQuickFilter = this.quickFilters.find((f) => f.default);
|
|
485
|
+
for (const key of Object.keys(values)) {
|
|
486
|
+
if (key === this.filterFormQuickFilterKey) {
|
|
487
|
+
if (resetQuickFilter) {
|
|
488
|
+
values[key] = defaultQuickFilter.value;
|
|
489
|
+
}
|
|
490
|
+
continue;
|
|
491
|
+
}
|
|
492
|
+
values[key] = (_a = this.defaultFilterFormValues[key]) !== null && _a !== void 0 ? _a : null;
|
|
493
|
+
}
|
|
494
|
+
this.filterForm.setValue(values);
|
|
495
|
+
this.applyFormFilters(values);
|
|
496
|
+
}
|
|
448
497
|
_refresh() {
|
|
449
498
|
console.warn('Not implemented');
|
|
450
499
|
}
|
|
@@ -2150,8 +2199,12 @@ let Table = class Table {
|
|
|
2150
2199
|
this.filterModalHeaderText = 'Filters';
|
|
2151
2200
|
this.filterModalSaveText = 'Save';
|
|
2152
2201
|
this.filterModalCancelText = 'Cancel';
|
|
2202
|
+
this.filterModalResetText = 'Reset filters';
|
|
2153
2203
|
this.filterModalShow = new EventEmitter();
|
|
2154
2204
|
this.filterModalSave = new EventEmitter();
|
|
2205
|
+
this.filterModalReset = new EventEmitter();
|
|
2206
|
+
this.filterModalShowReset$ = new BehaviorSubject(false);
|
|
2207
|
+
this.filterModalShowResetMobile$ = new BehaviorSubject(false);
|
|
2155
2208
|
}
|
|
2156
2209
|
set columnDefinitions(v) {
|
|
2157
2210
|
this._columnDefinitions = v;
|
|
@@ -2179,6 +2232,18 @@ let Table = class Table {
|
|
|
2179
2232
|
length: changes['amountOfLoadingRows'].currentValue,
|
|
2180
2233
|
});
|
|
2181
2234
|
}
|
|
2235
|
+
if (changes['activeQuickFilterIdentifier'] ||
|
|
2236
|
+
changes['selectedFiltersAmount']) {
|
|
2237
|
+
const selectedFiltersAmount = changes['activeQuickFilterIdentifier'].currentValue;
|
|
2238
|
+
if (selectedFiltersAmount > 0) {
|
|
2239
|
+
this.filterModalShowReset$.next(true);
|
|
2240
|
+
}
|
|
2241
|
+
const activeQuickFilterIdentifier = changes['activeQuickFilterIdentifier'].currentValue;
|
|
2242
|
+
const activeQuickFilter = this.quickFilters.find((f) => (f.identifier = activeQuickFilterIdentifier));
|
|
2243
|
+
if (selectedFiltersAmount > 0 || !(activeQuickFilter === null || activeQuickFilter === void 0 ? void 0 : activeQuickFilter.default)) {
|
|
2244
|
+
this.filterModalShowResetMobile$.next(true);
|
|
2245
|
+
}
|
|
2246
|
+
}
|
|
2182
2247
|
}
|
|
2183
2248
|
// @HostListener('body:tableDefinitionChanged', { target: 'body' })
|
|
2184
2249
|
// onTableDefinitionUpdated() {
|
|
@@ -2218,6 +2283,10 @@ let Table = class Table {
|
|
|
2218
2283
|
this.filterModalSave.next();
|
|
2219
2284
|
this.filterModalShow$.next(false);
|
|
2220
2285
|
}
|
|
2286
|
+
onFilterModalReset(resetQuickFilter = false) {
|
|
2287
|
+
this.filterModalReset.next(resetQuickFilter);
|
|
2288
|
+
this.filterModalShow$.next(false);
|
|
2289
|
+
}
|
|
2221
2290
|
_parseItems(items) {
|
|
2222
2291
|
if (!items) {
|
|
2223
2292
|
this.parsedItems = [];
|
|
@@ -2492,13 +2561,13 @@ let Table = class Table {
|
|
|
2492
2561
|
}
|
|
2493
2562
|
};
|
|
2494
2563
|
Table.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2495
|
-
Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: Table, selector: "p-table-ngx", inputs: { items: "items", loading: "loading", amountOfLoadingRows: "amountOfLoadingRows", enableRowSelection: "enableRowSelection", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableEdit: "enableEdit", editButtonTemplate: "editButtonTemplate", enablePageSize: "enablePageSize", enablePagination: "enablePagination", enableExport: "enableExport", page: "page", total: "total", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hideOnSinglePage: "hideOnSinglePage", emptyStateType: "emptyStateType", emptyStateHeader: "emptyStateHeader", emptyStateContent: "emptyStateContent", emptyStateAction: "emptyStateAction", emptyStateFilteredHeader: "emptyStateFilteredHeader", emptyStateFilteredContent: "emptyStateFilteredContent", filterModalHeaderText: "filterModalHeaderText", filterModalSaveText: "filterModalSaveText", filterModalCancelText: "filterModalCancelText" }, outputs: { selectedRowsChange: "selectedRowsChange", rowClick: "rowClick", rowSelected: "rowSelected", rowDeselected: "rowDeselected", quickFilter: "quickFilter", queryChange: "queryChange", filter: "filter", edit: "edit", pageChange: "pageChange", pageSizeChange: "pageSizeChange", export: "export", emptyStateActionClick: "emptyStateActionClick", filterModalShow: "filterModalShow", filterModalSave: "filterModalSave" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:visibilitychange": "visibilityChange($event)" } }, queries: [{ propertyName: "filterModalTemplate", first: true, predicate: TableFilterModalDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "columnDefinitions", predicate: TableColumn }], usesOnChanges: true, ngImport: i0, template: "<p-table-container>\n <p-table-header\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (quickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (queryChange)=\"(onQueryChange)\"\n [enableFilter]=\"filterModalTemplate\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (filter)=\"filterModalShow$.next(true)\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n (edit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\n ></p-table-header>\n\n <p-table-row variant=\"header\">\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n [value]=\"col.name\"\n variant=\"header\"\n [index]=\"index\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"_selectAllChange($event)\"\n [checked]=\"_selectionContainsAll()\"\n [indeterminate]=\"_selectionIndeterminate()\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"loading; else contentTemplate\">\n <p-table-row\n *ngFor=\"let r of loadingRows; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n >\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n variant=\"loading\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <p-loader\n variant=\"ghost\"\n class=\"rounded w-6 h-6\"\n ></p-loader>\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"items?.length; else emptyStateTemplate\">\n <p-table-row\n *ngFor=\"let item of items; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n (click)=\"_rowClick($event, rowIndex)\"\n >\n <ng-container\n *ngFor=\"let col of columns; let index = index\"\n >\n <p-table-cell-ngx\n [definition]=\"col\"\n [item]=\"item\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n [template]=\"col.template\"\n ></p-table-cell-ngx>\n\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"\n _checkboxChange($event.target, rowIndex)\n \"\n [disabled]=\"_checkboxDisabled(item)\"\n [checked]=\"_selectionContains(item, rowIndex)\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n </ng-template>\n </div>\n\n <p-table-footer\n [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (pageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (pageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (export)=\"export.emit()\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n <p-modal\n [header]=\"filterModalHeaderText\"\n [show]=\"filterModalShow$ | async\"\n (close)=\"filterModalShow$.next(false)\"\n >\n <div slot=\"content\" class=\"flex flex-col gap-6\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n\n <p-button\n class=\"flex desktop-xs:hidden\"\n width=\"full\"\n icon=\"checkmark\"\n (onClick)=\"onFilterModalSave()\"\n >\n {{ filterModalSaveText }}\n </p-button>\n </div>\n <div slot=\"footer\" class=\"flex justify-between w-full\">\n <p-button\n variant=\"secondary\"\n (onClick)=\"filterModalShow$.next(false)\"\n >\n {{ filterModalCancelText }}\n </p-button>\n <p-button icon=\"checkmark\" (onClick)=\"onFilterModalSave()\">\n {{ filterModalSaveText }}\n </p-button>\n </div>\n </p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n <div\n *ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-search\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-14\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-overview\"\n class=\"cursor-pointer mb-6\"\n (onClick)=\"emptyStateActionClick.emit()\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-6\">\n {{ emptyStateContent }}\n </p>\n <p-button\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n (onClick)=\"emptyStateActionClick.emit()\"\n >\n {{ emptyStateAction }}\n </p-button>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PButton, selector: "p-button", inputs: ["chevron", "chevronPosition", "disabled", "href", "icon", "iconFlip", "iconOnly", "iconPosition", "iconRotate", "inheritText", "loading", "size", "target", "variant", "width"] }, { kind: "component", type: PIllustration, selector: "p-illustration", inputs: ["variant"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }, { kind: "component", type: PModal, selector: "p-modal", inputs: ["header", "show", "showMobileClose", "showMobileFooter", "size", "variant"] }, { kind: "component", type: PTableContainer, selector: "p-table-container" }, { kind: "component", type: PTableFooter, selector: "p-table-footer", inputs: ["enableExport", "enablePageSize", "enablePagination", "hideOnSinglePage", "page", "pageSize", "pageSizeOptions", "total"] }, { kind: "component", type: PTableHeader, selector: "p-table-header", inputs: ["activeQuickFilterIdentifier", "canEdit", "editButtonTemplate", "enableEdit", "enableFilter", "enableSearch", "filterButtonTemplate", "itemsSelectedAmount", "query", "quickFilters", "selectedFiltersAmount"] }, { kind: "component", type: PTableRow, selector: "p-table-row", inputs: ["enableHover", "variant"] }, { kind: "component", type: TableCell, selector: "p-table-cell-ngx", inputs: ["variant", "index", "rowIndex", "definition", "item", "value", "checkbox", "template"] }, { kind: "directive", type: TableFooterDirective, selector: "p-table-footer" }, { kind: "directive", type: TableHeaderDirective, selector: "p-table-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2564
|
+
Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: Table, selector: "p-table-ngx", inputs: { items: "items", loading: "loading", amountOfLoadingRows: "amountOfLoadingRows", enableRowSelection: "enableRowSelection", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableEdit: "enableEdit", editButtonTemplate: "editButtonTemplate", enablePageSize: "enablePageSize", enablePagination: "enablePagination", enableExport: "enableExport", page: "page", total: "total", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hideOnSinglePage: "hideOnSinglePage", emptyStateType: "emptyStateType", emptyStateHeader: "emptyStateHeader", emptyStateContent: "emptyStateContent", emptyStateAction: "emptyStateAction", emptyStateFilteredHeader: "emptyStateFilteredHeader", emptyStateFilteredContent: "emptyStateFilteredContent", filterModalHeaderText: "filterModalHeaderText", filterModalSaveText: "filterModalSaveText", filterModalCancelText: "filterModalCancelText", filterModalResetText: "filterModalResetText" }, outputs: { selectedRowsChange: "selectedRowsChange", rowClick: "rowClick", rowSelected: "rowSelected", rowDeselected: "rowDeselected", quickFilter: "quickFilter", queryChange: "queryChange", filter: "filter", edit: "edit", pageChange: "pageChange", pageSizeChange: "pageSizeChange", export: "export", emptyStateActionClick: "emptyStateActionClick", filterModalShow: "filterModalShow", filterModalSave: "filterModalSave", filterModalReset: "filterModalReset" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:visibilitychange": "visibilityChange($event)" } }, queries: [{ propertyName: "filterModalTemplate", first: true, predicate: TableFilterModalDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "columnDefinitions", predicate: TableColumn }], usesOnChanges: true, ngImport: i0, template: "<p-table-container>\n <p-table-header\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (quickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (queryChange)=\"(onQueryChange)\"\n [enableFilter]=\"filterModalTemplate\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (filter)=\"filterModalShow$.next(true)\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n (edit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\n ></p-table-header>\n\n <p-table-row variant=\"header\">\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n [value]=\"col.name\"\n variant=\"header\"\n [index]=\"index\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"_selectAllChange($event)\"\n [checked]=\"_selectionContainsAll()\"\n [indeterminate]=\"_selectionIndeterminate()\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"loading; else contentTemplate\">\n <p-table-row\n *ngFor=\"let r of loadingRows; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n >\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n variant=\"loading\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <p-loader\n variant=\"ghost\"\n class=\"rounded w-6 h-6\"\n ></p-loader>\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"items?.length; else emptyStateTemplate\">\n <p-table-row\n *ngFor=\"let item of items; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n (click)=\"_rowClick($event, rowIndex)\"\n >\n <ng-container\n *ngFor=\"let col of columns; let index = index\"\n >\n <p-table-cell-ngx\n [definition]=\"col\"\n [item]=\"item\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n [template]=\"col.template\"\n ></p-table-cell-ngx>\n\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"\n _checkboxChange($event.target, rowIndex)\n \"\n [disabled]=\"_checkboxDisabled(item)\"\n [checked]=\"_selectionContains(item, rowIndex)\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n </ng-template>\n </div>\n\n <p-table-footer\n [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (pageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (pageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (export)=\"export.emit()\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n <p-modal\n [header]=\"filterModalHeaderText\"\n [show]=\"filterModalShow$ | async\"\n (close)=\"filterModalShow$.next(false)\"\n >\n <div slot=\"content\" class=\"flex flex-col gap-6\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n\n <div class=\"flex desktop-xs:hidden gap-4 w-full\">\n <p-button\n *ngIf=\"filterModalShowResetMobile$ | async\"\n variant=\"secondary\"\n width=\"full\"\n (onClick)=\"onFilterModalReset()\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n width=\"full\"\n icon=\"checkmark\"\n (onClick)=\"onFilterModalSave()\"\n >\n {{ filterModalSaveText }}\n </p-button>\n </div>\n </div>\n <div slot=\"footer\" class=\"flex justify-between w-full\">\n <p-button\n variant=\"secondary\"\n (onClick)=\"filterModalShow$.next(false)\"\n >\n {{ filterModalCancelText }}\n </p-button>\n\n <div class=\"flex gap-4\">\n <p-button\n *ngIf=\"filterModalShowReset$ | async\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset()\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button icon=\"checkmark\" (onClick)=\"onFilterModalSave()\">\n {{ filterModalSaveText }}\n </p-button>\n </div>\n </div>\n </p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n <div\n *ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-search\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-14\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-overview\"\n class=\"cursor-pointer mb-6\"\n (onClick)=\"emptyStateActionClick.emit()\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-6\">\n {{ emptyStateContent }}\n </p>\n <p-button\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n (onClick)=\"emptyStateActionClick.emit()\"\n >\n {{ emptyStateAction }}\n </p-button>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PButton, selector: "p-button", inputs: ["chevron", "chevronPosition", "disabled", "href", "icon", "iconFlip", "iconOnly", "iconPosition", "iconRotate", "inheritText", "loading", "size", "target", "variant", "width"] }, { kind: "component", type: PIllustration, selector: "p-illustration", inputs: ["variant"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }, { kind: "component", type: PModal, selector: "p-modal", inputs: ["header", "show", "showMobileClose", "showMobileFooter", "size", "variant"] }, { kind: "component", type: PTableContainer, selector: "p-table-container" }, { kind: "component", type: PTableFooter, selector: "p-table-footer", inputs: ["enableExport", "enablePageSize", "enablePagination", "hideOnSinglePage", "page", "pageSize", "pageSizeOptions", "total"] }, { kind: "component", type: PTableHeader, selector: "p-table-header", inputs: ["activeQuickFilterIdentifier", "canEdit", "editButtonTemplate", "enableEdit", "enableFilter", "enableSearch", "filterButtonTemplate", "itemsSelectedAmount", "query", "quickFilters", "selectedFiltersAmount"] }, { kind: "component", type: PTableRow, selector: "p-table-row", inputs: ["enableHover", "variant"] }, { kind: "component", type: TableCell, selector: "p-table-cell-ngx", inputs: ["variant", "index", "rowIndex", "definition", "item", "value", "checkbox", "template"] }, { kind: "directive", type: TableFooterDirective, selector: "p-table-footer" }, { kind: "directive", type: TableHeaderDirective, selector: "p-table-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2496
2565
|
Table = __decorate([
|
|
2497
2566
|
UntilDestroy({ checkProperties: true })
|
|
2498
2567
|
], Table);
|
|
2499
2568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: Table, decorators: [{
|
|
2500
2569
|
type: Component,
|
|
2501
|
-
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n <p-table-header\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (quickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (queryChange)=\"(onQueryChange)\"\n [enableFilter]=\"filterModalTemplate\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (filter)=\"filterModalShow$.next(true)\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n (edit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\n ></p-table-header>\n\n <p-table-row variant=\"header\">\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n [value]=\"col.name\"\n variant=\"header\"\n [index]=\"index\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"_selectAllChange($event)\"\n [checked]=\"_selectionContainsAll()\"\n [indeterminate]=\"_selectionIndeterminate()\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"loading; else contentTemplate\">\n <p-table-row\n *ngFor=\"let r of loadingRows; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n >\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n variant=\"loading\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <p-loader\n variant=\"ghost\"\n class=\"rounded w-6 h-6\"\n ></p-loader>\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"items?.length; else emptyStateTemplate\">\n <p-table-row\n *ngFor=\"let item of items; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n (click)=\"_rowClick($event, rowIndex)\"\n >\n <ng-container\n *ngFor=\"let col of columns; let index = index\"\n >\n <p-table-cell-ngx\n [definition]=\"col\"\n [item]=\"item\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n [template]=\"col.template\"\n ></p-table-cell-ngx>\n\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"\n _checkboxChange($event.target, rowIndex)\n \"\n [disabled]=\"_checkboxDisabled(item)\"\n [checked]=\"_selectionContains(item, rowIndex)\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n </ng-template>\n </div>\n\n <p-table-footer\n [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (pageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (pageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (export)=\"export.emit()\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n <p-modal\n [header]=\"filterModalHeaderText\"\n [show]=\"filterModalShow$ | async\"\n (close)=\"filterModalShow$.next(false)\"\n >\n <div slot=\"content\" class=\"flex flex-col gap-6\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n\n <
|
|
2570
|
+
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n <p-table-header\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (quickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (queryChange)=\"(onQueryChange)\"\n [enableFilter]=\"filterModalTemplate\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (filter)=\"filterModalShow$.next(true)\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n (edit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\n ></p-table-header>\n\n <p-table-row variant=\"header\">\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n [value]=\"col.name\"\n variant=\"header\"\n [index]=\"index\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"_selectAllChange($event)\"\n [checked]=\"_selectionContainsAll()\"\n [indeterminate]=\"_selectionIndeterminate()\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"loading; else contentTemplate\">\n <p-table-row\n *ngFor=\"let r of loadingRows; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n >\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n variant=\"loading\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <p-loader\n variant=\"ghost\"\n class=\"rounded w-6 h-6\"\n ></p-loader>\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"items?.length; else emptyStateTemplate\">\n <p-table-row\n *ngFor=\"let item of items; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n (click)=\"_rowClick($event, rowIndex)\"\n >\n <ng-container\n *ngFor=\"let col of columns; let index = index\"\n >\n <p-table-cell-ngx\n [definition]=\"col\"\n [item]=\"item\"\n [checkbox]=\"\n index === 0 && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n [template]=\"col.template\"\n ></p-table-cell-ngx>\n\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"\n _checkboxChange($event.target, rowIndex)\n \"\n [disabled]=\"_checkboxDisabled(item)\"\n [checked]=\"_selectionContains(item, rowIndex)\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n </ng-template>\n </div>\n\n <p-table-footer\n [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (pageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (pageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (export)=\"export.emit()\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n <p-modal\n [header]=\"filterModalHeaderText\"\n [show]=\"filterModalShow$ | async\"\n (close)=\"filterModalShow$.next(false)\"\n >\n <div slot=\"content\" class=\"flex flex-col gap-6\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n\n <div class=\"flex desktop-xs:hidden gap-4 w-full\">\n <p-button\n *ngIf=\"filterModalShowResetMobile$ | async\"\n variant=\"secondary\"\n width=\"full\"\n (onClick)=\"onFilterModalReset()\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n width=\"full\"\n icon=\"checkmark\"\n (onClick)=\"onFilterModalSave()\"\n >\n {{ filterModalSaveText }}\n </p-button>\n </div>\n </div>\n <div slot=\"footer\" class=\"flex justify-between w-full\">\n <p-button\n variant=\"secondary\"\n (onClick)=\"filterModalShow$.next(false)\"\n >\n {{ filterModalCancelText }}\n </p-button>\n\n <div class=\"flex gap-4\">\n <p-button\n *ngIf=\"filterModalShowReset$ | async\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset()\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button icon=\"checkmark\" (onClick)=\"onFilterModalSave()\">\n {{ filterModalSaveText }}\n </p-button>\n </div>\n </div>\n </p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n <div\n *ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-search\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-14\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-overview\"\n class=\"cursor-pointer mb-6\"\n (onClick)=\"emptyStateActionClick.emit()\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-6\">\n {{ emptyStateContent }}\n </p>\n <p-button\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n (onClick)=\"emptyStateActionClick.emit()\"\n >\n {{ emptyStateAction }}\n </p-button>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
|
|
2502
2571
|
}], ctorParameters: function () { return []; }, propDecorators: { items: [{
|
|
2503
2572
|
type: Input
|
|
2504
2573
|
}], loading: [{
|
|
@@ -2600,10 +2669,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
2600
2669
|
type: Input
|
|
2601
2670
|
}], filterModalCancelText: [{
|
|
2602
2671
|
type: Input
|
|
2672
|
+
}], filterModalResetText: [{
|
|
2673
|
+
type: Input
|
|
2603
2674
|
}], filterModalShow: [{
|
|
2604
2675
|
type: Output
|
|
2605
2676
|
}], filterModalSave: [{
|
|
2606
2677
|
type: Output
|
|
2678
|
+
}], filterModalReset: [{
|
|
2679
|
+
type: Output
|
|
2607
2680
|
}], keyDown: [{
|
|
2608
2681
|
type: HostListener,
|
|
2609
2682
|
args: ['document:keydown', ['$event']]
|
|
@@ -2871,29 +2944,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
2871
2944
|
}]
|
|
2872
2945
|
}] });
|
|
2873
2946
|
|
|
2874
|
-
const createFormFilters = (values, quickFilters, quickFilterKey) => {
|
|
2875
|
-
const filters = [];
|
|
2876
|
-
let quickFilter = null;
|
|
2877
|
-
for (const key of Object.keys(values)) {
|
|
2878
|
-
const value = values[key];
|
|
2879
|
-
if (key !== quickFilterKey && !(value === null || value === void 0 ? void 0 : value.length)) {
|
|
2880
|
-
continue;
|
|
2881
|
-
}
|
|
2882
|
-
if (key === quickFilterKey) {
|
|
2883
|
-
quickFilter = quickFilters.find((f) => f.value === value);
|
|
2884
|
-
continue;
|
|
2885
|
-
}
|
|
2886
|
-
filters.push({
|
|
2887
|
-
key,
|
|
2888
|
-
value,
|
|
2889
|
-
});
|
|
2890
|
-
}
|
|
2891
|
-
return {
|
|
2892
|
-
filters,
|
|
2893
|
-
quickFilter,
|
|
2894
|
-
};
|
|
2895
|
-
};
|
|
2896
|
-
|
|
2897
2947
|
const SLIDE_IN_BOTTOM_OUT_TOP = trigger('pSlideInBottomOutTop', [
|
|
2898
2948
|
transition(':enter', [
|
|
2899
2949
|
style({ transform: 'translateY(50%)', opacity: 0 }),
|