tin-spa 2.4.3 → 2.4.5
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/classes/Classes.mjs +1 -1
- package/esm2020/lib/components/page/page.component.mjs +29 -10
- package/esm2020/lib/components/search/search.component.mjs +3 -3
- package/esm2020/lib/components/table/table.component.mjs +12 -4
- package/esm2020/lib/components/table-internal/table-internal.component.mjs +7 -2
- package/esm2020/lib/components/tiles/tiles.component.mjs +3 -3
- package/fesm2015/tin-spa.mjs +47 -17
- package/fesm2015/tin-spa.mjs.map +1 -1
- package/fesm2020/tin-spa.mjs +47 -15
- package/fesm2020/tin-spa.mjs.map +1 -1
- package/lib/classes/Classes.d.ts +1 -0
- package/lib/components/page/page.component.d.ts +8 -5
- package/package.json +1 -1
package/fesm2020/tin-spa.mjs
CHANGED
|
@@ -2748,10 +2748,10 @@ class TilesComponent {
|
|
|
2748
2748
|
}
|
|
2749
2749
|
}
|
|
2750
2750
|
TilesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesComponent, deps: [{ token: DataServiceLib }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2751
|
-
TilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TilesComponent, selector: "spa-tiles", inputs: { config: "config", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row align-items-center justify-content-between\">\r\n <ng-container *ngFor=\"let tile of tiles\">\r\n <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n <!-- Number -->\r\n <div class=\"row d-flex justify-content-center align-items-center\">\r\n <div style=\"text-align: center;font-size: 30px;\">\r\n <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> \r\n <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\">{{data
|
|
2751
|
+
TilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TilesComponent, selector: "spa-tiles", inputs: { config: "config", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row align-items-center justify-content-between\">\r\n <ng-container *ngFor=\"let tile of tiles\">\r\n <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n <!-- Number -->\r\n <div class=\"row d-flex justify-content-center align-items-center\">\r\n <div style=\"text-align: center;font-size: 30px;\">\r\n <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> \r\n <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\">{{data[tile.name] ?? 0}}</mat-label> \r\n <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\r\n </div>\r\n </div>\r\n\r\n <!-- Info -->\r\n <div class=\"row d-flex justify-content-center align-items-center\">\r\n <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </mat-card>\r\n </ng-container>\r\n</div>\r\n", styles: [".card{min-width:200px;max-width:200px;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.col{transition:all .3s ease;cursor:pointer}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.selected-tile mat-label{font-weight:700}.selected-tile{border:2px solid #3f51b5}.col:hover{background-color:#f5f5f5}.selected-tile:hover{background-color:#e0e0e0}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
2752
2752
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesComponent, decorators: [{
|
|
2753
2753
|
type: Component,
|
|
2754
|
-
args: [{ selector: 'spa-tiles', template: "<div class=\"d-flex row align-items-center justify-content-between\">\r\n <ng-container *ngFor=\"let tile of tiles\">\r\n <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n <!-- Number -->\r\n <div class=\"row d-flex justify-content-center align-items-center\">\r\n <div style=\"text-align: center;font-size: 30px;\">\r\n <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> \r\n <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\">{{data
|
|
2754
|
+
args: [{ selector: 'spa-tiles', template: "<div class=\"d-flex row align-items-center justify-content-between\">\r\n <ng-container *ngFor=\"let tile of tiles\">\r\n <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n <!-- Number -->\r\n <div class=\"row d-flex justify-content-center align-items-center\">\r\n <div style=\"text-align: center;font-size: 30px;\">\r\n <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> \r\n <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\">{{data[tile.name] ?? 0}}</mat-label> \r\n <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\r\n </div>\r\n </div>\r\n\r\n <!-- Info -->\r\n <div class=\"row d-flex justify-content-center align-items-center\">\r\n <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </mat-card>\r\n </ng-container>\r\n</div>\r\n", styles: [".card{min-width:200px;max-width:200px;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.col{transition:all .3s ease;cursor:pointer}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.selected-tile mat-label{font-weight:700}.selected-tile{border:2px solid #3f51b5}.col:hover{background-color:#f5f5f5}.selected-tile:hover{background-color:#e0e0e0}\n"] }]
|
|
2755
2755
|
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }]; }, propDecorators: { config: [{
|
|
2756
2756
|
type: Input
|
|
2757
2757
|
}], tileActionSelected: [{
|
|
@@ -4146,10 +4146,10 @@ class SearchComponent {
|
|
|
4146
4146
|
}
|
|
4147
4147
|
}
|
|
4148
4148
|
SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4149
|
-
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "spa-search", inputs: { config: "config" }, outputs: { searchClick: "searchClick" }, ngImport: i0, template: "\n<div class=\"tin-between\">\n\n<div class=\"col tin-row\">\n\n <div *ngFor=\"let field of config.fields\">\n\n <spa-option [type]=\"field.type\" [required]=\"field.required\" [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"></spa-option>\n\n </div>\n\n</div>\n\n<div class=\"col-1 tin-end\">\n <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\n <mat-icon>search</mat-icon>\n </button>\n</div>\n\n\n\n</div>\n\n\n\n", styles: [".tin-row{column-gap:30px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OptionComponent, selector: "spa-option", inputs: ["options", "optionValue", "optionDisplay", "readonly", "type", "value", "display", "show", "required"], outputs: ["valueChange", "enterPress"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
4149
|
+
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "spa-search", inputs: { config: "config" }, outputs: { searchClick: "searchClick" }, ngImport: i0, template: "\n<div class=\"tin-between\">\n\n<div class=\"col tin-row\">\n\n <div *ngFor=\"let field of config.fields\">\n\n <spa-option [type]=\"field.type\" [required]=\"field.required\" [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"></spa-option>\n\n </div>\n\n</div>\n\n<div class=\"col-1 tin-end\">\n <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\n <mat-icon>search</mat-icon>\n </button>\n</div>\n\n\n\n</div>\n\n\n\n", styles: [".tin-row{column-gap:30px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OptionComponent, selector: "spa-option", inputs: ["options", "optionValue", "optionDisplay", "readonly", "type", "value", "display", "show", "required"], outputs: ["valueChange", "enterPress"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
4150
4150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, decorators: [{
|
|
4151
4151
|
type: Component,
|
|
4152
|
-
args: [{ selector: 'spa-search', template: "\n<div class=\"tin-between\">\n\n<div class=\"col tin-row\">\n\n <div *ngFor=\"let field of config.fields\">\n\n <spa-option [type]=\"field.type\" [required]=\"field.required\" [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"></spa-option>\n\n </div>\n\n</div>\n\n<div class=\"col-1 tin-end\">\n <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\n <mat-icon>search</mat-icon>\n </button>\n</div>\n\n\n\n</div>\n\n\n\n", styles: [".tin-row{column-gap:30px}\n"] }]
|
|
4152
|
+
args: [{ selector: 'spa-search', template: "\n<div class=\"tin-between\">\n\n<div class=\"col tin-row\">\n\n <div *ngFor=\"let field of config.fields\">\n\n <spa-option [type]=\"field.type\" [required]=\"field.required\" [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"></spa-option>\n\n </div>\n\n</div>\n\n<div class=\"col-1 tin-end\">\n <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\n <mat-icon>search</mat-icon>\n </button>\n</div>\n\n\n\n</div>\n\n\n\n", styles: [".tin-row{column-gap:30px}\n"] }]
|
|
4153
4153
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
4154
4154
|
type: Input
|
|
4155
4155
|
}], searchClick: [{
|
|
@@ -4491,7 +4491,12 @@ class TableInternalComponent {
|
|
|
4491
4491
|
this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
|
|
4492
4492
|
this.displayedButtons = this.buttonService.getDisplayedButtons(this.config?.buttons, this.smallScreen, this.config?.minButtons);
|
|
4493
4493
|
this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
|
|
4494
|
-
|
|
4494
|
+
if (this.config?.searchConfig) {
|
|
4495
|
+
this.showFilterButton = false;
|
|
4496
|
+
}
|
|
4497
|
+
if (this.config.showFilterButton === false) {
|
|
4498
|
+
this.showFilterButton = false;
|
|
4499
|
+
}
|
|
4495
4500
|
if (this.displayedButtons?.length > 0 && !this.displayedColumns.includes('action')) {
|
|
4496
4501
|
this.displayedColumns.push('action');
|
|
4497
4502
|
}
|
|
@@ -5106,7 +5111,12 @@ class TableComponent {
|
|
|
5106
5111
|
this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
|
|
5107
5112
|
this.displayedButtons = this.buttonService.getDisplayedButtons(this.config?.buttons, this.smallScreen, this.config?.minButtons);
|
|
5108
5113
|
this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
|
|
5109
|
-
|
|
5114
|
+
if (this.config?.searchConfig) {
|
|
5115
|
+
this.showFilterButton = false;
|
|
5116
|
+
}
|
|
5117
|
+
if (this.config.showFilterButton === false) {
|
|
5118
|
+
this.showFilterButton = false;
|
|
5119
|
+
}
|
|
5110
5120
|
if (this.displayedButtons?.length > 0 && !this.displayedColumns.includes('action')) {
|
|
5111
5121
|
this.displayedColumns.push('action');
|
|
5112
5122
|
}
|
|
@@ -5136,6 +5146,9 @@ class TableComponent {
|
|
|
5136
5146
|
this.tableDataSource = new MatTableDataSource(apiResponse.data);
|
|
5137
5147
|
this.tableDataSource.paginator = this.tablePaginator;
|
|
5138
5148
|
this.dataLoaded(apiResponse.data);
|
|
5149
|
+
if (apiResponse.message != "success" && apiResponse.message != "") {
|
|
5150
|
+
this.messageService.toast(apiResponse.message);
|
|
5151
|
+
}
|
|
5139
5152
|
}
|
|
5140
5153
|
else {
|
|
5141
5154
|
this.messageService.toast("Error: " + apiResponse.message);
|
|
@@ -5417,10 +5430,10 @@ class TableComponent {
|
|
|
5417
5430
|
}
|
|
5418
5431
|
}
|
|
5419
5432
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5420
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { hideTitle: "hideTitle", data: "data", tileData: "tileData", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search\r\n *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [data]=\"dataSource\" [
|
|
5433
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { hideTitle: "hideTitle", data: "data", tileData: "tileData", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search\r\n *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [smallScreen]=\"smallScreen\" [hideTitle]=\"hideTitle\"\r\n [tileReload]=\"tileReload\" [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action\r\n [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
5421
5434
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
5422
5435
|
type: Component,
|
|
5423
|
-
args: [{ selector: 'spa-table', template: "\r\n<!-- Search -->\r\n<spa-search\r\n *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [data]=\"dataSource\" [
|
|
5436
|
+
args: [{ selector: 'spa-table', template: "\r\n<!-- Search -->\r\n<spa-search\r\n *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [smallScreen]=\"smallScreen\" [hideTitle]=\"hideTitle\"\r\n [tileReload]=\"tileReload\" [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action\r\n [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
|
|
5424
5437
|
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
|
|
5425
5438
|
type: ViewChild,
|
|
5426
5439
|
args: ['tablePaginator']
|
|
@@ -6611,12 +6624,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
6611
6624
|
}], ctorParameters: function () { return []; } });
|
|
6612
6625
|
|
|
6613
6626
|
class PageComponent {
|
|
6614
|
-
constructor(
|
|
6615
|
-
this.messageService = messageService;
|
|
6627
|
+
constructor(dataServiceLib, messageService) {
|
|
6616
6628
|
this.dataServiceLib = dataServiceLib;
|
|
6629
|
+
this.messageService = messageService;
|
|
6617
6630
|
this.searchModeActivated = new EventEmitter();
|
|
6631
|
+
this.searchModeDeactivated = new EventEmitter();
|
|
6632
|
+
this.refreshClick = new EventEmitter();
|
|
6618
6633
|
this.tableReload = new Subject();
|
|
6619
6634
|
this.searchMode = false;
|
|
6635
|
+
this.searchTileData = [];
|
|
6620
6636
|
this.searchTableData = [];
|
|
6621
6637
|
}
|
|
6622
6638
|
ngOnInit() {
|
|
@@ -6627,13 +6643,20 @@ class PageComponent {
|
|
|
6627
6643
|
this.dataServiceLib.CallApi(this.config.searchConfig.searchAction, data).subscribe((apiResponse) => {
|
|
6628
6644
|
this.searchTableData = apiResponse.data.results;
|
|
6629
6645
|
this.searchTileData = apiResponse.data.tiles;
|
|
6646
|
+
if (apiResponse.success && apiResponse.message != "success" && apiResponse.message != "") {
|
|
6647
|
+
this.messageService.toast(apiResponse.message);
|
|
6648
|
+
}
|
|
6630
6649
|
});
|
|
6631
6650
|
}
|
|
6632
6651
|
toggleSearch() {
|
|
6633
6652
|
if (this.searchMode) {
|
|
6634
|
-
// this.loadSearchMeta();
|
|
6635
6653
|
this.searchModeActivated.emit();
|
|
6636
6654
|
}
|
|
6655
|
+
else {
|
|
6656
|
+
this.searchModeDeactivated.emit();
|
|
6657
|
+
this.searchTableData = [];
|
|
6658
|
+
this.searchTileData = [];
|
|
6659
|
+
}
|
|
6637
6660
|
}
|
|
6638
6661
|
getNormalTableConfig() {
|
|
6639
6662
|
return {
|
|
@@ -6651,6 +6674,7 @@ class PageComponent {
|
|
|
6651
6674
|
holdHeaderButtonSpace: true,
|
|
6652
6675
|
buttons: this.config.tableConfig.buttons.filter(x => x.name != 'create'),
|
|
6653
6676
|
loadAction: null,
|
|
6677
|
+
showFilterButton: false,
|
|
6654
6678
|
};
|
|
6655
6679
|
}
|
|
6656
6680
|
//Advanced Search
|
|
@@ -6660,18 +6684,26 @@ class PageComponent {
|
|
|
6660
6684
|
holdHeaderButtonSpace: true,
|
|
6661
6685
|
buttons: this.config.tableConfig.buttons.filter(x => x.name != 'create'),
|
|
6662
6686
|
loadAction: null,
|
|
6687
|
+
showFilterButton: false,
|
|
6663
6688
|
};
|
|
6664
6689
|
}
|
|
6690
|
+
refreshClicked() {
|
|
6691
|
+
this.refreshClick.emit();
|
|
6692
|
+
}
|
|
6665
6693
|
}
|
|
6666
|
-
PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageComponent, deps: [{ token:
|
|
6667
|
-
PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageComponent, selector: "spa-page", inputs: { config: "config" }, outputs: { searchModeActivated: "searchModeActivated" }, ngImport: i0, template: "<div class=\"row\">\n\n <div class=\"col\">\n <h4>{{config.title ?? 'Untitled'}} </h4>\n </div>\n\n <div class=\"col d-flex justify-content-end\" style=\"font-size: 14px;\">\n <spa-check *ngIf=\"config.searchConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\n </div>\n\n</div>\n\n<hr style=\"margin-top: 0px;\" />\n\n<!-- Normal -->\n<div *ngIf=\"!searchMode\" style=\" font-size: 14px;\">\n <spa-table [config]=\"getNormalTableConfig()\" [reload]=\"tableReload\"></spa-table>\n</div>\n\n<!-- Search -->\n<div *ngIf=\"searchMode\" style=\" font-size: 14px;\">\n <spa-search [config]=\"config.searchConfig\" (searchClick)=\"searchClicked($event, false)\"></spa-search>\n <spa-table [config]=\"getSearchTableConfig()\" [reload]=\"tableReload\" [data]=\"searchTableData\" [tileData]=\"searchTileData\" (refreshClick)=\"searchClicked(lastSearch, false)\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }] });
|
|
6694
|
+
PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageComponent, deps: [{ token: DataServiceLib }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6695
|
+
PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageComponent, selector: "spa-page", inputs: { config: "config" }, outputs: { searchModeActivated: "searchModeActivated", searchModeDeactivated: "searchModeDeactivated", refreshClick: "refreshClick" }, ngImport: i0, template: "<div class=\"row\">\r\n\r\n <div class=\"col\">\r\n <h4>{{config.title ?? 'Untitled'}} </h4>\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\" style=\"font-size: 14px;\">\r\n <spa-check *ngIf=\"config.searchConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\r\n </div>\r\n\r\n</div>\r\n\r\n<hr style=\"margin-top: 0px;\" />\r\n\r\n<!-- Normal -->\r\n<div *ngIf=\"!searchMode\" style=\" font-size: 14px;\">\r\n <spa-table [config]=\"getNormalTableConfig()\" [reload]=\"tableReload\" (refreshClick)=\"refreshClicked()\"></spa-table>\r\n</div>\r\n\r\n<!-- Search -->\r\n<div *ngIf=\"searchMode\" style=\" font-size: 14px;\">\r\n <spa-search [config]=\"config.searchConfig\" (searchClick)=\"searchClicked($event, false)\"></spa-search>\r\n <spa-table [config]=\"getSearchTableConfig()\" [reload]=\"tableReload\" [data]=\"searchTableData\" [tileData]=\"searchTileData\" (refreshClick)=\"searchClicked(lastSearch, false)\" (refreshClick)=\"refreshClicked()\"></spa-table>\r\n</div>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }] });
|
|
6668
6696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageComponent, decorators: [{
|
|
6669
6697
|
type: Component,
|
|
6670
|
-
args: [{ selector: 'spa-page', template: "<div class=\"row\">\n\n <div class=\"col\">\n <h4>{{config.title ?? 'Untitled'}} </h4>\n </div>\n\n <div class=\"col d-flex justify-content-end\" style=\"font-size: 14px;\">\n <spa-check *ngIf=\"config.searchConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\n </div>\n\n</div>\n\n<hr style=\"margin-top: 0px;\" />\n\n<!-- Normal -->\n<div *ngIf=\"!searchMode\" style=\" font-size: 14px;\">\n <spa-table [config]=\"getNormalTableConfig()\" [reload]=\"tableReload\"></spa-table>\n</div>\n\n<!-- Search -->\n<div *ngIf=\"searchMode\" style=\" font-size: 14px;\">\n <spa-search [config]=\"config.searchConfig\" (searchClick)=\"searchClicked($event, false)\"></spa-search>\n <spa-table [config]=\"getSearchTableConfig()\" [reload]=\"tableReload\" [data]=\"searchTableData\" [tileData]=\"searchTileData\" (refreshClick)=\"searchClicked(lastSearch, false)\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
|
|
6671
|
-
}], ctorParameters: function () { return [{ type:
|
|
6698
|
+
args: [{ selector: 'spa-page', template: "<div class=\"row\">\r\n\r\n <div class=\"col\">\r\n <h4>{{config.title ?? 'Untitled'}} </h4>\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\" style=\"font-size: 14px;\">\r\n <spa-check *ngIf=\"config.searchConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\r\n </div>\r\n\r\n</div>\r\n\r\n<hr style=\"margin-top: 0px;\" />\r\n\r\n<!-- Normal -->\r\n<div *ngIf=\"!searchMode\" style=\" font-size: 14px;\">\r\n <spa-table [config]=\"getNormalTableConfig()\" [reload]=\"tableReload\" (refreshClick)=\"refreshClicked()\"></spa-table>\r\n</div>\r\n\r\n<!-- Search -->\r\n<div *ngIf=\"searchMode\" style=\" font-size: 14px;\">\r\n <spa-search [config]=\"config.searchConfig\" (searchClick)=\"searchClicked($event, false)\"></spa-search>\r\n <spa-table [config]=\"getSearchTableConfig()\" [reload]=\"tableReload\" [data]=\"searchTableData\" [tileData]=\"searchTileData\" (refreshClick)=\"searchClicked(lastSearch, false)\" (refreshClick)=\"refreshClicked()\"></spa-table>\r\n</div>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
|
|
6699
|
+
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }]; }, propDecorators: { config: [{
|
|
6672
6700
|
type: Input
|
|
6673
6701
|
}], searchModeActivated: [{
|
|
6674
6702
|
type: Output
|
|
6703
|
+
}], searchModeDeactivated: [{
|
|
6704
|
+
type: Output
|
|
6705
|
+
}], refreshClick: [{
|
|
6706
|
+
type: Output
|
|
6675
6707
|
}] } });
|
|
6676
6708
|
|
|
6677
6709
|
class TinSpaModule {
|