tin-spa 2.1.39 → 2.1.41
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/accounts/accounts.component.mjs +1 -1
- package/esm2020/lib/components/customers/customers.component.mjs +1 -1
- package/esm2020/lib/components/departments/departments.component.mjs +1 -1
- package/esm2020/lib/components/employees/employees.component.mjs +1 -1
- package/esm2020/lib/components/filter/filter.component.mjs +7 -4
- package/esm2020/lib/components/inventory/inventory.component.mjs +1 -1
- package/esm2020/lib/components/invitations-table/invitations-table.component.mjs +1 -1
- package/esm2020/lib/components/list-dialog/list-dialog.component.mjs +1 -1
- package/esm2020/lib/components/logs/logs.component.mjs +1 -1
- package/esm2020/lib/components/membership/membership.component.mjs +1 -1
- package/esm2020/lib/components/plans/plans.component.mjs +1 -1
- package/esm2020/lib/components/suppliers/suppliers.component.mjs +1 -1
- package/esm2020/lib/components/table/detailsDialog.component.mjs +19 -14
- package/esm2020/lib/components/table/table.component.mjs +52 -3
- package/esm2020/lib/components/table-internal/detailsDialog-internal.component.mjs +18 -11
- package/esm2020/lib/components/table-internal/table-internal.component.mjs +37 -3
- package/esm2020/lib/components/tasks/tasks.component.mjs +1 -1
- package/esm2020/lib/components/tenant-settings/tenant-settings.component.mjs +1 -1
- package/esm2020/lib/components/tenants/tenants.component.mjs +1 -1
- package/esm2020/lib/components/transactions/transactions.component.mjs +1 -1
- package/esm2020/lib/components/users/users.component.mjs +1 -1
- package/fesm2015/tin-spa.mjs +142 -42
- package/fesm2015/tin-spa.mjs.map +1 -1
- package/fesm2020/tin-spa.mjs +140 -42
- package/fesm2020/tin-spa.mjs.map +1 -1
- package/lib/classes/Classes.d.ts +9 -2
- package/lib/components/filter/filter.component.d.ts +2 -1
- package/lib/components/table/detailsDialog.component.d.ts +1 -0
- package/lib/components/table/table.component.d.ts +2 -1
- package/lib/components/table-internal/table-internal.component.d.ts +2 -1
- package/package.json +1 -1
package/fesm2015/tin-spa.mjs
CHANGED
|
@@ -52,6 +52,7 @@ import * as i2$2 from '@angular/material/stepper';
|
|
|
52
52
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
53
53
|
import * as i6 from '@angular/material/table';
|
|
54
54
|
import { MatTableModule, MatTableDataSource } from '@angular/material/table';
|
|
55
|
+
import * as i9 from '@angular/material/tabs';
|
|
55
56
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
56
57
|
import * as i7$1 from '@angular/material/tooltip';
|
|
57
58
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
@@ -1746,6 +1747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1746
1747
|
|
|
1747
1748
|
class FilterComponent {
|
|
1748
1749
|
constructor() {
|
|
1750
|
+
this.flatButtons = false;
|
|
1749
1751
|
this.showText = true;
|
|
1750
1752
|
this.showButton = true;
|
|
1751
1753
|
this.data = new MatTableDataSource();
|
|
@@ -1772,11 +1774,13 @@ class FilterComponent {
|
|
|
1772
1774
|
}
|
|
1773
1775
|
}
|
|
1774
1776
|
FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1775
|
-
FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterComponent, selector: "spa-filter", inputs: { showText: "showText", showButton: "showButton", data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
1777
|
+
FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterComponent, selector: "spa-filter", inputs: { flatButtons: "flatButtons", showText: "showText", showButton: "showButton", data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton && !flatButtons\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"showButton && flatButtons\" id=\"btnFilter\" mat-icon-button color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
1776
1778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterComponent, decorators: [{
|
|
1777
1779
|
type: Component,
|
|
1778
|
-
args: [{ selector: 'spa-filter', template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
|
|
1779
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
1780
|
+
args: [{ selector: 'spa-filter', template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton && !flatButtons\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"showButton && flatButtons\" id=\"btnFilter\" mat-icon-button color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
|
|
1781
|
+
}], ctorParameters: function () { return []; }, propDecorators: { flatButtons: [{
|
|
1782
|
+
type: Input
|
|
1783
|
+
}], showText: [{
|
|
1780
1784
|
type: Input
|
|
1781
1785
|
}], showButton: [{
|
|
1782
1786
|
type: Input
|
|
@@ -3057,21 +3061,28 @@ class DetailsDialogInternal {
|
|
|
3057
3061
|
this.formConfig.mode = (_a = this.formConfig.mode) !== null && _a !== void 0 ? _a : "view";
|
|
3058
3062
|
if (this.formConfig.mode == "create") {
|
|
3059
3063
|
this.details = Core.generateObject(this.formConfig.fields);
|
|
3064
|
+
if (this.data.heroValue) {
|
|
3065
|
+
this.details[this.data.heroField] = this.data.heroValue;
|
|
3066
|
+
}
|
|
3060
3067
|
}
|
|
3061
3068
|
else {
|
|
3062
3069
|
console.log(this.data);
|
|
3063
|
-
if (this.data.details) {
|
|
3070
|
+
if (this.data.details && !this.data.heroField && !this.data.heroValue) {
|
|
3071
|
+
console.log("data from details");
|
|
3064
3072
|
this.details = this.data.details;
|
|
3065
3073
|
}
|
|
3074
|
+
else if (this.formConfig.loadAction && this.data.heroField && this.data.details) {
|
|
3075
|
+
console.log("data from url + ID Field " + this.data.heroField);
|
|
3076
|
+
let action = { url: this.formConfig.loadAction.url + "/" + this.data.details[this.data.heroField] };
|
|
3077
|
+
this.loadData(action);
|
|
3078
|
+
}
|
|
3079
|
+
else if (this.formConfig.loadAction && this.data.heroValue) {
|
|
3080
|
+
console.log("data from url + Solid ID");
|
|
3081
|
+
let action = { url: this.formConfig.loadAction.url + "/" + this.data.heroValue };
|
|
3082
|
+
this.loadData(action);
|
|
3083
|
+
}
|
|
3066
3084
|
else {
|
|
3067
|
-
|
|
3068
|
-
let action = { url: this.formConfig.loadAction.url + "/" + this.data.details[this.data.detailIDField] };
|
|
3069
|
-
this.loadData(action);
|
|
3070
|
-
}
|
|
3071
|
-
else if (this.formConfig.loadAction && this.data.detailID) {
|
|
3072
|
-
let action = { url: this.formConfig.loadAction.url + "/" + this.data.detailID };
|
|
3073
|
-
this.loadData(action);
|
|
3074
|
-
}
|
|
3085
|
+
console.log("data source failed to pick");
|
|
3075
3086
|
}
|
|
3076
3087
|
}
|
|
3077
3088
|
this.fileField = this.formConfig.fields.find(x => x.type == 'file');
|
|
@@ -3086,7 +3097,7 @@ class DetailsDialogInternal {
|
|
|
3086
3097
|
}
|
|
3087
3098
|
}
|
|
3088
3099
|
loadData(action) {
|
|
3089
|
-
console.log("loading");
|
|
3100
|
+
console.log("loading details");
|
|
3090
3101
|
if (action) {
|
|
3091
3102
|
this.dataService.CallApi(action).subscribe((apiResponse) => {
|
|
3092
3103
|
if (apiResponse.success) {
|
|
@@ -3292,6 +3303,7 @@ class TableInternalComponent {
|
|
|
3292
3303
|
this.actionsWidth = "50px";
|
|
3293
3304
|
this.showFilterButton = true;
|
|
3294
3305
|
this.tileReload = new Subject();
|
|
3306
|
+
this.hideTitle = false;
|
|
3295
3307
|
this.data = [];
|
|
3296
3308
|
this.dataLoad = new EventEmitter();
|
|
3297
3309
|
this.refreshClick = new EventEmitter();
|
|
@@ -3593,6 +3605,27 @@ class TableInternalComponent {
|
|
|
3593
3605
|
columnClicked(column, row) {
|
|
3594
3606
|
if (column.detailsConfig) {
|
|
3595
3607
|
column.detailsConfig.details = row;
|
|
3608
|
+
column.detailsConfig.config.mode = "view";
|
|
3609
|
+
if (column.detailsConfig.heroField) {
|
|
3610
|
+
column.detailsConfig.heroValue = row[column.detailsConfig.heroField];
|
|
3611
|
+
if (column.detailsConfig.tableConfig) {
|
|
3612
|
+
column.detailsConfig.tableConfig.heroField = column.detailsConfig.heroField;
|
|
3613
|
+
column.detailsConfig.tableConfig.heroValue = column.detailsConfig.heroValue;
|
|
3614
|
+
}
|
|
3615
|
+
if (column.detailsConfig.tableConfigs) {
|
|
3616
|
+
column.detailsConfig.tableConfigs.forEach(element => {
|
|
3617
|
+
element.heroField = column.detailsConfig.heroField;
|
|
3618
|
+
element.heroValue = column.detailsConfig.heroValue;
|
|
3619
|
+
});
|
|
3620
|
+
}
|
|
3621
|
+
}
|
|
3622
|
+
if (column.detailsConfig.tableConfig && column.detailsConfig.tableConfig.loadAction && column.detailsConfig.tableConfig.loadCriteria && column.detailsConfig.tableConfig.loadIDField) {
|
|
3623
|
+
column.detailsConfig.tableConfig.loadAction.url = column.detailsConfig.tableConfig.loadAction.url.split('/')[0] + "/" + column.detailsConfig.tableConfig.loadCriteria + "/" + column.detailsConfig.details[column.detailsConfig.tableConfig.loadIDField];
|
|
3624
|
+
console.log("Transformed");
|
|
3625
|
+
}
|
|
3626
|
+
else {
|
|
3627
|
+
console.log("NOT Transformed");
|
|
3628
|
+
}
|
|
3596
3629
|
const dialogRef = this.dialog.open(DetailsDialogInternal, {
|
|
3597
3630
|
width: "900px",
|
|
3598
3631
|
data: column.detailsConfig
|
|
@@ -3618,6 +3651,14 @@ class TableInternalComponent {
|
|
|
3618
3651
|
else {
|
|
3619
3652
|
if (button.detailsConfig) {
|
|
3620
3653
|
button.detailsConfig.details = row;
|
|
3654
|
+
button.detailsConfig.config.mode = "view";
|
|
3655
|
+
if (button.detailsConfig.tableConfig && button.detailsConfig.tableConfig.loadAction && button.detailsConfig.tableConfig.loadCriteria && button.detailsConfig.tableConfig.loadIDField) {
|
|
3656
|
+
button.detailsConfig.tableConfig.loadAction.url = button.detailsConfig.tableConfig.loadAction.url.split('/')[0] + "/" + button.detailsConfig.tableConfig.loadCriteria + "/" + button.detailsConfig.details[button.detailsConfig.tableConfig.loadIDField]; // fix data to proper source
|
|
3657
|
+
console.log("Transformed");
|
|
3658
|
+
}
|
|
3659
|
+
else {
|
|
3660
|
+
console.log("NOT Transformed");
|
|
3661
|
+
}
|
|
3621
3662
|
const dialogRef = this.dialog.open(DetailsDialogInternal, {
|
|
3622
3663
|
width: "900px",
|
|
3623
3664
|
data: button.detailsConfig
|
|
@@ -3672,6 +3713,7 @@ class TableInternalComponent {
|
|
|
3672
3713
|
});
|
|
3673
3714
|
}
|
|
3674
3715
|
newModel() {
|
|
3716
|
+
var _a, _b;
|
|
3675
3717
|
let button = this.getButton('create');
|
|
3676
3718
|
if (!button)
|
|
3677
3719
|
return;
|
|
@@ -3688,6 +3730,8 @@ class TableInternalComponent {
|
|
|
3688
3730
|
config: this.config.formConfig,
|
|
3689
3731
|
buttons: this.config.buttons,
|
|
3690
3732
|
};
|
|
3733
|
+
conf.heroField = (_a = this.config) === null || _a === void 0 ? void 0 : _a.heroField;
|
|
3734
|
+
conf.heroValue = (_b = this.config) === null || _b === void 0 ? void 0 : _b.heroValue;
|
|
3691
3735
|
const dialogRef = this.dialog.open(DetailsDialogInternal, {
|
|
3692
3736
|
width: "900px",
|
|
3693
3737
|
data: conf,
|
|
@@ -3786,13 +3830,15 @@ class TableInternalComponent {
|
|
|
3786
3830
|
}
|
|
3787
3831
|
}
|
|
3788
3832
|
TableInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$3.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
3789
|
-
TableInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableInternalComponent, selector: "spa-table-internal", inputs: { data: "data", 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: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n <div class=\"tin-row\" >\n <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n </div>\n\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n </div>\n\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title\" class=\"title\">\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n <div *ngIf=\"dataSource\">\n\n\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n <ng-container [ngSwitch]=\"column.type\">\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'select'\">\n <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip'\">\n <mat-chip-list>\n <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </mat-chip-list>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{row[column.name] | date : 'dd/MM/yyyy'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'datetime'\">\n {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n <mat-spinner [diameter]=\"20\">\n\n </mat-spinner>\n </ng-container> -->\n\n <ng-container *ngSwitchCase=\"'money'\">\n\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n\n <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n <ng-container *ngFor=\"let button of displayedButtons\">\n\n <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon>{{getIcon(button.name)}}</mat-icon>\n </button>\n\n <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n </button>\n\n </ng-container>\n\n <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n <label style=\"margin-right: 35px;\"></label>\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n </table>\n\n </div>\n\n <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}\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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
3833
|
+
TableInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableInternalComponent, selector: "spa-table-internal", inputs: { hideTitle: "hideTitle", data: "data", 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: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n <div class=\"tin-row\">\n <button *ngIf=\"createButton && !config.flatButtons\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <button *ngIf=\"createButton && config.flatButtons\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n </div>\n\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n </div>\n\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n <div *ngIf=\"dataSource\">\n\n\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n <ng-container [ngSwitch]=\"column.type\">\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'select'\">\n <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip'\">\n <mat-chip-list>\n <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </mat-chip-list>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{row[column.name] | date : 'dd/MM/yyyy'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'datetime'\">\n {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n <mat-spinner [diameter]=\"20\">\n\n </mat-spinner>\n </ng-container> -->\n\n <ng-container *ngSwitchCase=\"'money'\">\n\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n\n <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n <ng-container *ngFor=\"let button of displayedButtons\">\n\n <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon>{{getIcon(button.name)}}</mat-icon>\n </button>\n\n <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n </button>\n\n </ng-container>\n\n <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n <label style=\"margin-right: 35px;\"></label>\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n </table>\n\n </div>\n\n <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}\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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
3790
3834
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, decorators: [{
|
|
3791
3835
|
type: Component,
|
|
3792
|
-
args: [{ selector: 'spa-table-internal', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n <div class=\"tin-row\" >\n <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n </div>\n\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n </div>\n\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title\" class=\"title\">\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n <div *ngIf=\"dataSource\">\n\n\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n <ng-container [ngSwitch]=\"column.type\">\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'select'\">\n <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip'\">\n <mat-chip-list>\n <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </mat-chip-list>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{row[column.name] | date : 'dd/MM/yyyy'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'datetime'\">\n {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n <mat-spinner [diameter]=\"20\">\n\n </mat-spinner>\n </ng-container> -->\n\n <ng-container *ngSwitchCase=\"'money'\">\n\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n\n <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n <ng-container *ngFor=\"let button of displayedButtons\">\n\n <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon>{{getIcon(button.name)}}</mat-icon>\n </button>\n\n <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n </button>\n\n </ng-container>\n\n <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n <label style=\"margin-right: 35px;\"></label>\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n </table>\n\n </div>\n\n <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}\n"] }]
|
|
3836
|
+
args: [{ selector: 'spa-table-internal', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n <div class=\"tin-row\">\n <button *ngIf=\"createButton && !config.flatButtons\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <button *ngIf=\"createButton && config.flatButtons\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n </div>\n\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n </div>\n\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n <div *ngIf=\"dataSource\">\n\n\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n <ng-container [ngSwitch]=\"column.type\">\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'select'\">\n <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip'\">\n <mat-chip-list>\n <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </mat-chip-list>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{row[column.name] | date : 'dd/MM/yyyy'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'datetime'\">\n {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n <mat-spinner [diameter]=\"20\">\n\n </mat-spinner>\n </ng-container> -->\n\n <ng-container *ngSwitchCase=\"'money'\">\n\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n\n <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n <ng-container *ngFor=\"let button of displayedButtons\">\n\n <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon>{{getIcon(button.name)}}</mat-icon>\n </button>\n\n <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n </button>\n\n </ng-container>\n\n <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n <label style=\"margin-right: 35px;\"></label>\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n </table>\n\n </div>\n\n <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}\n"] }]
|
|
3793
3837
|
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$3.BreakpointObserver }, { type: i4.MatDialog }]; }, propDecorators: { tablePaginator: [{
|
|
3794
3838
|
type: ViewChild,
|
|
3795
3839
|
args: ['tablePaginator']
|
|
3840
|
+
}], hideTitle: [{
|
|
3841
|
+
type: Input
|
|
3796
3842
|
}], data: [{
|
|
3797
3843
|
type: Input
|
|
3798
3844
|
}], config: [{
|
|
@@ -3839,26 +3885,30 @@ class DetailsDialog {
|
|
|
3839
3885
|
ngOnInit() {
|
|
3840
3886
|
var _a;
|
|
3841
3887
|
this.tableConfig = this.data.tableConfig;
|
|
3888
|
+
this.tableConfigs = this.data.tableConfigs;
|
|
3842
3889
|
this.formConfig = this.data.config;
|
|
3843
3890
|
this.buttons = this.data.buttons;
|
|
3844
3891
|
this.formConfig.mode = (_a = this.formConfig.mode) !== null && _a !== void 0 ? _a : "view";
|
|
3845
3892
|
if (this.formConfig.mode == "create") {
|
|
3846
3893
|
this.details = Core.generateObject(this.formConfig.fields);
|
|
3894
|
+
if (this.data.heroValue) {
|
|
3895
|
+
this.details[this.data.heroField] = this.data.heroValue;
|
|
3896
|
+
}
|
|
3847
3897
|
}
|
|
3848
3898
|
else {
|
|
3849
3899
|
console.log(this.data);
|
|
3850
|
-
if (this.data.details && !this.data.
|
|
3900
|
+
if (this.data.details && !this.data.heroField && !this.data.heroValue) {
|
|
3851
3901
|
console.log("data from details");
|
|
3852
3902
|
this.details = this.data.details;
|
|
3853
3903
|
}
|
|
3854
|
-
else if (this.formConfig.loadAction && this.data.
|
|
3855
|
-
console.log("data from url + ID Field " + this.data.
|
|
3856
|
-
let action = { url: this.formConfig.loadAction.url + "/" + this.data.details[this.data.
|
|
3904
|
+
else if (this.formConfig.loadAction && this.data.heroField && this.data.details) {
|
|
3905
|
+
console.log("data from url + ID Field " + this.data.heroField);
|
|
3906
|
+
let action = { url: this.formConfig.loadAction.url + "/" + this.data.details[this.data.heroField] };
|
|
3857
3907
|
this.loadData(action);
|
|
3858
3908
|
}
|
|
3859
|
-
else if (this.formConfig.loadAction && this.data.
|
|
3909
|
+
else if (this.formConfig.loadAction && this.data.heroValue) {
|
|
3860
3910
|
console.log("data from url + Solid ID");
|
|
3861
|
-
let action = { url: this.formConfig.loadAction.url + "/" + this.data.
|
|
3911
|
+
let action = { url: this.formConfig.loadAction.url + "/" + this.data.heroValue };
|
|
3862
3912
|
this.loadData(action);
|
|
3863
3913
|
}
|
|
3864
3914
|
else {
|
|
@@ -3877,7 +3927,7 @@ class DetailsDialog {
|
|
|
3877
3927
|
}
|
|
3878
3928
|
}
|
|
3879
3929
|
loadData(action) {
|
|
3880
|
-
console.log("loading");
|
|
3930
|
+
console.log("loading details");
|
|
3881
3931
|
if (action) {
|
|
3882
3932
|
this.dataService.CallApi(action).subscribe((apiResponse) => {
|
|
3883
3933
|
if (apiResponse.success) {
|
|
@@ -4037,10 +4087,10 @@ class DetailsDialog {
|
|
|
4037
4087
|
}
|
|
4038
4088
|
}
|
|
4039
4089
|
DetailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, deps: [{ token: i3$3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
4040
|
-
DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "app-viewModel", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n <div class=\"col\">\r\n <h2 mat-dialog-title>{{formConfig.mode | titlecase}} {{formConfig?.title}}</h2>\r\n </div>\r\n\r\n <div *ngIf=\"formConfig.mode=='view' && editButton\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <!-- <div *ngIf=\"formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n </div> -->\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n <spa-table-internal [config]=\"tableConfig\" ></spa-table-internal>\r\n</div>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}</button>\r\n\r\n<ng-container *ngIf=\"!smallScreen\">\r\n<button *ngFor=\"let btn of extraButtons\" mat-stroked-button [disabled]=\"isProcessing\" [ngStyle]=\"{'color': btn.icon.color}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': btn.icon.color}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}</button>\r\n</ng-container>\r\n\r\n\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n\r\n<div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n<button *ngFor=\"let btn of extraButtons\" mat-icon-button [disabled]=\"isProcessing\" [ngStyle]=\"{'color': btn.icon.color}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon >{{btn.icon.name}}</mat-icon></button>\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\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}\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: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
|
|
4090
|
+
DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "app-viewModel", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n <div class=\"col\">\r\n <h2 mat-dialog-title>{{formConfig.mode | titlecase}} {{formConfig?.title}}</h2>\r\n </div>\r\n\r\n <div *ngIf=\"formConfig.mode=='view' && editButton\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <!-- <div *ngIf=\"formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n </div> -->\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n <spa-table-internal [config]=\"tableConfig\" ></spa-table-internal>\r\n</div>\r\n\r\n<mat-tab-group>\r\n\r\n <mat-tab *ngFor=\"let tbl of tableConfigs\">\r\n <ng-template matTabLabel>\r\n <span>{{tbl.title}}</span>\r\n </ng-template>\r\n\r\n <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\"></spa-table-internal>\r\n\r\n </mat-tab>\r\n\r\n</mat-tab-group>\r\n\r\n<!-- <div *ngIf=\"tableConfigs\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n\r\n <spa-table-internal *ngFor=\"let tbl of tableConfigs\" [config]=\"tbl\"></spa-table-internal>\r\n</div> -->\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}</button>\r\n\r\n<ng-container *ngIf=\"!smallScreen\">\r\n<button *ngFor=\"let btn of extraButtons\" mat-stroked-button [disabled]=\"isProcessing\" [ngStyle]=\"{'color': btn.icon.color}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': btn.icon.color}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}</button>\r\n</ng-container>\r\n\r\n\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n\r\n<div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n<button *ngFor=\"let btn of extraButtons\" mat-icon-button [disabled]=\"isProcessing\" [ngStyle]=\"{'color': btn.icon.color}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon >{{btn.icon.name}}</mat-icon></button>\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\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}\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: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
|
|
4041
4091
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, decorators: [{
|
|
4042
4092
|
type: Component,
|
|
4043
|
-
args: [{ selector: 'app-viewModel', template: "\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n <div class=\"col\">\r\n <h2 mat-dialog-title>{{formConfig.mode | titlecase}} {{formConfig?.title}}</h2>\r\n </div>\r\n\r\n <div *ngIf=\"formConfig.mode=='view' && editButton\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <!-- <div *ngIf=\"formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n </div> -->\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n <spa-table-internal [config]=\"tableConfig\" ></spa-table-internal>\r\n</div>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}</button>\r\n\r\n<ng-container *ngIf=\"!smallScreen\">\r\n<button *ngFor=\"let btn of extraButtons\" mat-stroked-button [disabled]=\"isProcessing\" [ngStyle]=\"{'color': btn.icon.color}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': btn.icon.color}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}</button>\r\n</ng-container>\r\n\r\n\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n\r\n<div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n<button *ngFor=\"let btn of extraButtons\" mat-icon-button [disabled]=\"isProcessing\" [ngStyle]=\"{'color': btn.icon.color}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon >{{btn.icon.name}}</mat-icon></button>\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\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}\n"] }]
|
|
4093
|
+
args: [{ selector: 'app-viewModel', template: "\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n <div class=\"col\">\r\n <h2 mat-dialog-title>{{formConfig.mode | titlecase}} {{formConfig?.title}}</h2>\r\n </div>\r\n\r\n <div *ngIf=\"formConfig.mode=='view' && editButton\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <!-- <div *ngIf=\"formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n </div> -->\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n <spa-table-internal [config]=\"tableConfig\" ></spa-table-internal>\r\n</div>\r\n\r\n<mat-tab-group>\r\n\r\n <mat-tab *ngFor=\"let tbl of tableConfigs\">\r\n <ng-template matTabLabel>\r\n <span>{{tbl.title}}</span>\r\n </ng-template>\r\n\r\n <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\"></spa-table-internal>\r\n\r\n </mat-tab>\r\n\r\n</mat-tab-group>\r\n\r\n<!-- <div *ngIf=\"tableConfigs\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n\r\n <spa-table-internal *ngFor=\"let tbl of tableConfigs\" [config]=\"tbl\"></spa-table-internal>\r\n</div> -->\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}</button>\r\n\r\n<ng-container *ngIf=\"!smallScreen\">\r\n<button *ngFor=\"let btn of extraButtons\" mat-stroked-button [disabled]=\"isProcessing\" [ngStyle]=\"{'color': btn.icon.color}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': btn.icon.color}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}</button>\r\n</ng-container>\r\n\r\n\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n\r\n<div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n<button *ngFor=\"let btn of extraButtons\" mat-icon-button [disabled]=\"isProcessing\" [ngStyle]=\"{'color': btn.icon.color}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon >{{btn.icon.name}}</mat-icon></button>\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\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}\n"] }]
|
|
4044
4094
|
}], ctorParameters: function () {
|
|
4045
4095
|
return [{ type: i3$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
|
|
4046
4096
|
type: Inject,
|
|
@@ -4061,6 +4111,7 @@ class TableComponent {
|
|
|
4061
4111
|
this.actionsWidth = "50px";
|
|
4062
4112
|
this.showFilterButton = true;
|
|
4063
4113
|
this.tileReload = new Subject();
|
|
4114
|
+
this.hideTitle = false;
|
|
4064
4115
|
this.data = [];
|
|
4065
4116
|
this.dataLoad = new EventEmitter();
|
|
4066
4117
|
this.refreshClick = new EventEmitter();
|
|
@@ -4362,6 +4413,42 @@ class TableComponent {
|
|
|
4362
4413
|
columnClicked(column, row) {
|
|
4363
4414
|
if (column.detailsConfig) {
|
|
4364
4415
|
column.detailsConfig.details = row;
|
|
4416
|
+
column.detailsConfig.config.mode = "view";
|
|
4417
|
+
if (column.detailsConfig.heroField) {
|
|
4418
|
+
column.detailsConfig.heroValue = row[column.detailsConfig.heroField];
|
|
4419
|
+
//single table
|
|
4420
|
+
if (column.detailsConfig.tableConfig) {
|
|
4421
|
+
column.detailsConfig.tableConfig.heroField = column.detailsConfig.heroField;
|
|
4422
|
+
column.detailsConfig.tableConfig.heroValue = column.detailsConfig.heroValue;
|
|
4423
|
+
}
|
|
4424
|
+
//multi table
|
|
4425
|
+
if (column.detailsConfig.tableConfigs) {
|
|
4426
|
+
column.detailsConfig.tableConfigs.forEach(element => {
|
|
4427
|
+
element.heroField = column.detailsConfig.heroField;
|
|
4428
|
+
element.heroValue = column.detailsConfig.heroValue;
|
|
4429
|
+
});
|
|
4430
|
+
}
|
|
4431
|
+
}
|
|
4432
|
+
//single table
|
|
4433
|
+
if (column.detailsConfig.tableConfig && column.detailsConfig.tableConfig.loadAction && column.detailsConfig.tableConfig.loadCriteria && column.detailsConfig.tableConfig.loadIDField) {
|
|
4434
|
+
column.detailsConfig.tableConfig.loadAction.url = column.detailsConfig.tableConfig.loadAction.url.split('/')[0] + "/" + column.detailsConfig.tableConfig.loadCriteria + "/" + column.detailsConfig.details[column.detailsConfig.tableConfig.loadIDField];
|
|
4435
|
+
console.log("Transformed");
|
|
4436
|
+
}
|
|
4437
|
+
else {
|
|
4438
|
+
console.log("NOT Transformed");
|
|
4439
|
+
}
|
|
4440
|
+
//multi table
|
|
4441
|
+
if (column.detailsConfig.tableConfigs) {
|
|
4442
|
+
column.detailsConfig.tableConfigs.forEach(element => {
|
|
4443
|
+
if (element.loadAction && element.loadCriteria && element.loadIDField) {
|
|
4444
|
+
element.loadAction.url = element.loadAction.url.split('/')[0] + "/" + element.loadCriteria + "/" + column.detailsConfig.details[element.loadIDField];
|
|
4445
|
+
console.log("Transformed");
|
|
4446
|
+
}
|
|
4447
|
+
else {
|
|
4448
|
+
console.log("NOT Transformed");
|
|
4449
|
+
}
|
|
4450
|
+
});
|
|
4451
|
+
}
|
|
4365
4452
|
const dialogRef = this.dialog.open(DetailsDialog, {
|
|
4366
4453
|
width: "900px",
|
|
4367
4454
|
data: column.detailsConfig
|
|
@@ -4387,6 +4474,14 @@ class TableComponent {
|
|
|
4387
4474
|
else {
|
|
4388
4475
|
if (button.detailsConfig) {
|
|
4389
4476
|
button.detailsConfig.details = row;
|
|
4477
|
+
button.detailsConfig.config.mode = "view";
|
|
4478
|
+
if (button.detailsConfig.tableConfig && button.detailsConfig.tableConfig.loadAction && button.detailsConfig.tableConfig.loadCriteria && button.detailsConfig.tableConfig.loadIDField) {
|
|
4479
|
+
button.detailsConfig.tableConfig.loadAction.url = button.detailsConfig.tableConfig.loadAction.url.split('/')[0] + "/" + button.detailsConfig.tableConfig.loadCriteria + "/" + button.detailsConfig.details[button.detailsConfig.tableConfig.loadIDField]; // fix data to proper source
|
|
4480
|
+
console.log("Transformed");
|
|
4481
|
+
}
|
|
4482
|
+
else {
|
|
4483
|
+
console.log("NOT Transformed");
|
|
4484
|
+
}
|
|
4390
4485
|
const dialogRef = this.dialog.open(DetailsDialog, {
|
|
4391
4486
|
width: "900px",
|
|
4392
4487
|
data: button.detailsConfig
|
|
@@ -4441,6 +4536,7 @@ class TableComponent {
|
|
|
4441
4536
|
});
|
|
4442
4537
|
}
|
|
4443
4538
|
newModel() {
|
|
4539
|
+
var _a, _b;
|
|
4444
4540
|
let button = this.getButton('create');
|
|
4445
4541
|
if (!button)
|
|
4446
4542
|
return;
|
|
@@ -4457,6 +4553,8 @@ class TableComponent {
|
|
|
4457
4553
|
config: this.config.formConfig,
|
|
4458
4554
|
buttons: this.config.buttons,
|
|
4459
4555
|
};
|
|
4556
|
+
conf.heroField = (_a = this.config) === null || _a === void 0 ? void 0 : _a.heroField;
|
|
4557
|
+
conf.heroValue = (_b = this.config) === null || _b === void 0 ? void 0 : _b.heroValue;
|
|
4460
4558
|
const dialogRef = this.dialog.open(DetailsDialog, {
|
|
4461
4559
|
width: "900px",
|
|
4462
4560
|
data: conf,
|
|
@@ -4555,13 +4653,15 @@ class TableComponent {
|
|
|
4555
4653
|
}
|
|
4556
4654
|
}
|
|
4557
4655
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$3.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
4558
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { data: "data", 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: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n <div class=\"tin-row\" >\n <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n </div>\n\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n </div>\n\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title\" class=\"title\">\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n <div *ngIf=\"dataSource\">\n\n\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n <ng-container [ngSwitch]=\"column.type\">\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'select'\">\n <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip'\">\n <mat-chip-list>\n <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </mat-chip-list>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{row[column.name] | date : 'dd/MM/yyyy'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'datetime'\">\n {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n <mat-spinner [diameter]=\"20\">\n\n </mat-spinner>\n </ng-container> -->\n\n <ng-container *ngSwitchCase=\"'money'\">\n\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n\n <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n <ng-container *ngFor=\"let button of displayedButtons\">\n\n <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon>{{getIcon(button.name)}}</mat-icon>\n </button>\n\n <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n </button>\n\n </ng-container>\n\n <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n <label style=\"margin-right: 35px;\"></label>\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n </table>\n\n </div>\n\n <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}\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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
4656
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { hideTitle: "hideTitle", data: "data", 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: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n <div class=\"tin-row\" >\n <button *ngIf=\"createButton && !config.flatButtons\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <button *ngIf=\"createButton && config.flatButtons\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n </div>\n\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n </div>\n\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n <div *ngIf=\"dataSource\">\n\n\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n <ng-container [ngSwitch]=\"column.type\">\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'select'\">\n <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip'\">\n <mat-chip-list>\n <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </mat-chip-list>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{row[column.name] | date : 'dd/MM/yyyy'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'datetime'\">\n {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n <mat-spinner [diameter]=\"20\">\n\n </mat-spinner>\n </ng-container> -->\n\n <ng-container *ngSwitchCase=\"'money'\">\n\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n\n <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n <ng-container *ngFor=\"let button of displayedButtons\">\n\n <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon>{{getIcon(button.name)}}</mat-icon>\n </button>\n\n <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n </button>\n\n </ng-container>\n\n <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n <label style=\"margin-right: 35px;\"></label>\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n </table>\n\n </div>\n\n <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}\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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
4559
4657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
4560
4658
|
type: Component,
|
|
4561
|
-
args: [{ selector: 'spa-table', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n <div class=\"tin-row\" >\n <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n </div>\n\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n </div>\n\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title\" class=\"title\">\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n <div *ngIf=\"dataSource\">\n\n\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n <ng-container [ngSwitch]=\"column.type\">\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'select'\">\n <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip'\">\n <mat-chip-list>\n <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </mat-chip-list>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{row[column.name] | date : 'dd/MM/yyyy'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'datetime'\">\n {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n <mat-spinner [diameter]=\"20\">\n\n </mat-spinner>\n </ng-container> -->\n\n <ng-container *ngSwitchCase=\"'money'\">\n\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n\n <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n <ng-container *ngFor=\"let button of displayedButtons\">\n\n <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon>{{getIcon(button.name)}}</mat-icon>\n </button>\n\n <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n </button>\n\n </ng-container>\n\n <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n <label style=\"margin-right: 35px;\"></label>\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n </table>\n\n </div>\n\n <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}\n"] }]
|
|
4659
|
+
args: [{ selector: 'spa-table', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n <div class=\"tin-row\" >\n <button *ngIf=\"createButton && !config.flatButtons\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <button *ngIf=\"createButton && config.flatButtons\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}</button>\n <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n </div>\n\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n </div>\n\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n <div *ngIf=\"dataSource\">\n\n\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n <ng-container [ngSwitch]=\"column.type\">\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'select'\">\n <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip'\">\n <mat-chip-list>\n <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </mat-chip-list>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{row[column.name] | date : 'dd/MM/yyyy'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'datetime'\">\n {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n <mat-spinner [diameter]=\"20\">\n\n </mat-spinner>\n </ng-container> -->\n\n <ng-container *ngSwitchCase=\"'money'\">\n\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n\n <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n <ng-container *ngFor=\"let icon of column.icons\">\n <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n </ng-container>\n\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n <ng-container *ngFor=\"let button of displayedButtons\">\n\n <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon>{{getIcon(button.name)}}</mat-icon>\n </button>\n\n <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n\n [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n </button>\n\n </ng-container>\n\n <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n <label style=\"margin-right: 35px;\"></label>\n </ng-container>\n\n </ng-container>\n\n\n </td>\n </ng-container>\n\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n </table>\n\n </div>\n\n <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}\n"] }]
|
|
4562
4660
|
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$3.BreakpointObserver }, { type: i4.MatDialog }]; }, propDecorators: { tablePaginator: [{
|
|
4563
4661
|
type: ViewChild,
|
|
4564
4662
|
args: ['tablePaginator']
|
|
4663
|
+
}], hideTitle: [{
|
|
4664
|
+
type: Input
|
|
4565
4665
|
}], data: [{
|
|
4566
4666
|
type: Input
|
|
4567
4667
|
}], config: [{
|
|
@@ -4691,7 +4791,7 @@ class InvitationsTableComponent {
|
|
|
4691
4791
|
}
|
|
4692
4792
|
}
|
|
4693
4793
|
InvitationsTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InvitationsTableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4694
|
-
InvitationsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InvitationsTableComponent, selector: "spa-invitations-table", ngImport: i0, template: "<spa-table [config]=\"invTableConfig\" (actionClick)=\"invActionClicked($event)\" [reload]=\"tableReload\"></spa-table>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
4794
|
+
InvitationsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InvitationsTableComponent, selector: "spa-invitations-table", ngImport: i0, template: "<spa-table [config]=\"invTableConfig\" (actionClick)=\"invActionClicked($event)\" [reload]=\"tableReload\"></spa-table>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
4695
4795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InvitationsTableComponent, decorators: [{
|
|
4696
4796
|
type: Component,
|
|
4697
4797
|
args: [{ selector: 'spa-invitations-table', template: "<spa-table [config]=\"invTableConfig\" (actionClick)=\"invActionClicked($event)\" [reload]=\"tableReload\"></spa-table>\n" }]
|
|
@@ -4832,7 +4932,7 @@ class TenantSettingsComponent {
|
|
|
4832
4932
|
}
|
|
4833
4933
|
}
|
|
4834
4934
|
TenantSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
4835
|
-
TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n <div>\r\n\r\n <label class=\"title\" >Organisation Details</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n <div class=\"tin-col mb-3\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n <spa-text display=\"Name\" [(value)]=\"currTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n </div>\r\n\r\n <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;\"></spa-select>\r\n <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n </div>\r\n\r\n <div *ngIf=\"ownTenant\">\r\n <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <!-- Members -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Members</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" (actionClick)=\"inviteActionClicked($event)\"></spa-table>\r\n\r\n </div>\r\n\r\n\r\n <!-- Invitations -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Invitations</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n <spa-invitations-table></spa-invitations-table>\r\n\r\n </div>\r\n\r\n\r\n<!-- Member Organisations -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Member Organisations</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\"></spa-table>\r\n\r\n </div>\r\n\r\n\r\n <!-- New Organisation -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\">New Organisation</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Create another organisation</label>\r\n\r\n <div class=\"tin-col mb-3\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n <spa-text display=\"Name\" [(value)]=\"newName\" style=\"min-width: 300px;\"> </spa-text>\r\n <button mat-stroked-button color=\"primary\" (click)=\"newTenant()\">Create</button>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n <!-- Billing -->\r\n <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Billing and Subscription</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.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: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
|
|
4935
|
+
TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n <div>\r\n\r\n <label class=\"title\" >Organisation Details</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n <div class=\"tin-col mb-3\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n <spa-text display=\"Name\" [(value)]=\"currTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n </div>\r\n\r\n <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;\"></spa-select>\r\n <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n </div>\r\n\r\n <div *ngIf=\"ownTenant\">\r\n <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <!-- Members -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Members</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" (actionClick)=\"inviteActionClicked($event)\"></spa-table>\r\n\r\n </div>\r\n\r\n\r\n <!-- Invitations -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Invitations</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n <spa-invitations-table></spa-invitations-table>\r\n\r\n </div>\r\n\r\n\r\n<!-- Member Organisations -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Member Organisations</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\"></spa-table>\r\n\r\n </div>\r\n\r\n\r\n <!-- New Organisation -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\">New Organisation</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Create another organisation</label>\r\n\r\n <div class=\"tin-col mb-3\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n <spa-text display=\"Name\" [(value)]=\"newName\" style=\"min-width: 300px;\"> </spa-text>\r\n <button mat-stroked-button color=\"primary\" (click)=\"newTenant()\">Create</button>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n <!-- Billing -->\r\n <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Billing and Subscription</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.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: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
|
|
4836
4936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, decorators: [{
|
|
4837
4937
|
type: Component,
|
|
4838
4938
|
args: [{ selector: 'spa-tenant-settings', template: "<div class=\"container\">\r\n\r\n <div>\r\n\r\n <label class=\"title\" >Organisation Details</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n <div class=\"tin-col mb-3\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n <spa-text display=\"Name\" [(value)]=\"currTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n </div>\r\n\r\n <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;\"></spa-select>\r\n <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n </div>\r\n\r\n <div *ngIf=\"ownTenant\">\r\n <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <!-- Members -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Members</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" (actionClick)=\"inviteActionClicked($event)\"></spa-table>\r\n\r\n </div>\r\n\r\n\r\n <!-- Invitations -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Invitations</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n <spa-invitations-table></spa-invitations-table>\r\n\r\n </div>\r\n\r\n\r\n<!-- Member Organisations -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Member Organisations</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\"></spa-table>\r\n\r\n </div>\r\n\r\n\r\n <!-- New Organisation -->\r\n <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\">New Organisation</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n <label class=\"subtitle text-muted\">Create another organisation</label>\r\n\r\n <div class=\"tin-col mb-3\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n <spa-text display=\"Name\" [(value)]=\"newName\" style=\"min-width: 300px;\"> </spa-text>\r\n <button mat-stroked-button color=\"primary\" (click)=\"newTenant()\">Create</button>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n <!-- Billing -->\r\n <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n <label class=\"title\" >Billing and Subscription</label>\r\n <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"] }]
|
|
@@ -4873,7 +4973,7 @@ class TenantsComponent {
|
|
|
4873
4973
|
}
|
|
4874
4974
|
}
|
|
4875
4975
|
TenantsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4876
|
-
TenantsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantsComponent, selector: "spa-tenants", ngImport: i0, template: "<h4>Tenants</h4>\n<hr>\n\n\n<div class=\" mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" ></spa-table>\n</div>\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
4976
|
+
TenantsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantsComponent, selector: "spa-tenants", ngImport: i0, template: "<h4>Tenants</h4>\n<hr>\n\n\n<div class=\" mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" ></spa-table>\n</div>\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
4877
4977
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantsComponent, decorators: [{
|
|
4878
4978
|
type: Component,
|
|
4879
4979
|
args: [{ selector: 'spa-tenants', template: "<h4>Tenants</h4>\n<hr>\n\n\n<div class=\" mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" ></spa-table>\n</div>\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\n"] }]
|
|
@@ -4927,7 +5027,7 @@ class MembershipComponent {
|
|
|
4927
5027
|
}
|
|
4928
5028
|
}
|
|
4929
5029
|
MembershipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MembershipComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4930
|
-
MembershipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MembershipComponent, selector: "spa-membership", ngImport: i0, template: "<h4>Membership</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5030
|
+
MembershipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MembershipComponent, selector: "spa-membership", ngImport: i0, template: "<h4>Membership</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
4931
5031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MembershipComponent, decorators: [{
|
|
4932
5032
|
type: Component,
|
|
4933
5033
|
args: [{ selector: 'spa-membership', template: "<h4>Membership</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n" }]
|
|
@@ -4968,7 +5068,7 @@ class PlansComponent {
|
|
|
4968
5068
|
}
|
|
4969
5069
|
}
|
|
4970
5070
|
PlansComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PlansComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4971
|
-
PlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PlansComponent, selector: "spa-plans", ngImport: i0, template: "<h4>Plans</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5071
|
+
PlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PlansComponent, selector: "spa-plans", ngImport: i0, template: "<h4>Plans</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
4972
5072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PlansComponent, decorators: [{
|
|
4973
5073
|
type: Component,
|
|
4974
5074
|
args: [{ selector: 'spa-plans', template: "<h4>Plans</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n" }]
|
|
@@ -5012,7 +5112,7 @@ class CustomersComponent {
|
|
|
5012
5112
|
}
|
|
5013
5113
|
}
|
|
5014
5114
|
CustomersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomersComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5015
|
-
CustomersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomersComponent, selector: "spa-customers", ngImport: i0, template: "<h4>Customers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5115
|
+
CustomersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomersComponent, selector: "spa-customers", ngImport: i0, template: "<h4>Customers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5016
5116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomersComponent, decorators: [{
|
|
5017
5117
|
type: Component,
|
|
5018
5118
|
args: [{ selector: 'spa-customers', template: "<h4>Customers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n" }]
|
|
@@ -5112,7 +5212,7 @@ class ListDialogComponent {
|
|
|
5112
5212
|
}
|
|
5113
5213
|
}
|
|
5114
5214
|
ListDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListDialogComponent, deps: [{ token: DataServiceLib }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
5115
|
-
ListDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ListDialogComponent, selector: "spa-list-dialog", ngImport: i0, template: "<div>\n\n <label style=\"font-size: 24px;\">{{listConfig?.title ?? 'List'}}</label>\n\n</div>\n\n<mat-dialog-content class=\"mat-typography\">\n\n <div style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" [reload]=\"tableReload\" (actionClick)=\"actionClicked()\"></spa-table>\n </div>\n\n\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-button (click)=\"close()\" >Ok</button>\n</mat-dialog-actions>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i5.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: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5215
|
+
ListDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ListDialogComponent, selector: "spa-list-dialog", ngImport: i0, template: "<div>\n\n <label style=\"font-size: 24px;\">{{listConfig?.title ?? 'List'}}</label>\n\n</div>\n\n<mat-dialog-content class=\"mat-typography\">\n\n <div style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" [reload]=\"tableReload\" (actionClick)=\"actionClicked()\"></spa-table>\n </div>\n\n\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-button (click)=\"close()\" >Ok</button>\n</mat-dialog-actions>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i5.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: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5116
5216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListDialogComponent, decorators: [{
|
|
5117
5217
|
type: Component,
|
|
5118
5218
|
args: [{ selector: 'spa-list-dialog', template: "<div>\n\n <label style=\"font-size: 24px;\">{{listConfig?.title ?? 'List'}}</label>\n\n</div>\n\n<mat-dialog-content class=\"mat-typography\">\n\n <div style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" [reload]=\"tableReload\" (actionClick)=\"actionClicked()\"></spa-table>\n </div>\n\n\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-button (click)=\"close()\" >Ok</button>\n</mat-dialog-actions>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
|
|
@@ -5204,7 +5304,7 @@ class InventoryComponent {
|
|
|
5204
5304
|
}
|
|
5205
5305
|
}
|
|
5206
5306
|
InventoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InventoryComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
5207
|
-
InventoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InventoryComponent, selector: "spa-inventory", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n <label style=\"font-size: 16px;\">Inventory</label>\n\n <div >\n <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon >category</mat-icon></button>\n </div>\n\n</div>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5307
|
+
InventoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InventoryComponent, selector: "spa-inventory", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n <label style=\"font-size: 16px;\">Inventory</label>\n\n <div >\n <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon >category</mat-icon></button>\n </div>\n\n</div>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5208
5308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InventoryComponent, decorators: [{
|
|
5209
5309
|
type: Component,
|
|
5210
5310
|
args: [{ selector: 'spa-inventory', template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n <label style=\"font-size: 16px;\">Inventory</label>\n\n <div >\n <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon >category</mat-icon></button>\n </div>\n\n</div>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
|
|
@@ -5308,7 +5408,7 @@ class AccountsComponent {
|
|
|
5308
5408
|
}
|
|
5309
5409
|
}
|
|
5310
5410
|
AccountsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccountsComponent, deps: [{ token: i1$3.Router }, { token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
5311
|
-
AccountsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccountsComponent, selector: "spa-accounts", ngImport: i0, template: "<h4>Accounts</h4>\r\n<hr>\r\n\r\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\r\n <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\r\n <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\r\n</div>\r\n\r\n<div class=\"row \" style=\"margin-left: 0px;\">\r\n\r\n <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\r\n\r\n <div class=\"tin-row d-flex justify-content-between\">\r\n <label style=\"font-size: 24px; font-weight: 300;\">{{account.name}}</label>\r\n <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <hr style=\"margin-top: 5px;margin-bottom: 10px;\"/>\r\n\r\n <label *ngIf=\"account.description != ''\" style=\"font-size: small;margin-bottom: 5px;\">{{account.description}}</label>\r\n\r\n <div *ngIf=\"account\" class=\"tin-row\">\r\n <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\r\n <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\r\n </div>\r\n\r\n <mat-card-actions class=\"d-flex justify-content-between\" >\r\n <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\r\n <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\r\n </mat-card-actions>\r\n\r\n </mat-card>\r\n\r\n</div>\r\n\r\n\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i15.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
5411
|
+
AccountsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccountsComponent, selector: "spa-accounts", ngImport: i0, template: "<h4>Accounts</h4>\r\n<hr>\r\n\r\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\r\n <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\r\n <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\r\n</div>\r\n\r\n<div class=\"row \" style=\"margin-left: 0px;\">\r\n\r\n <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\r\n\r\n <div class=\"tin-row d-flex justify-content-between\">\r\n <label style=\"font-size: 24px; font-weight: 300;\">{{account.name}}</label>\r\n <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <hr style=\"margin-top: 5px;margin-bottom: 10px;\"/>\r\n\r\n <label *ngIf=\"account.description != ''\" style=\"font-size: small;margin-bottom: 5px;\">{{account.description}}</label>\r\n\r\n <div *ngIf=\"account\" class=\"tin-row\">\r\n <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\r\n <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\r\n </div>\r\n\r\n <mat-card-actions class=\"d-flex justify-content-between\" >\r\n <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\r\n <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\r\n </mat-card-actions>\r\n\r\n </mat-card>\r\n\r\n</div>\r\n\r\n\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i15.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
5312
5412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccountsComponent, decorators: [{
|
|
5313
5413
|
type: Component,
|
|
5314
5414
|
args: [{ selector: 'spa-accounts', template: "<h4>Accounts</h4>\r\n<hr>\r\n\r\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\r\n <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\r\n <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\r\n</div>\r\n\r\n<div class=\"row \" style=\"margin-left: 0px;\">\r\n\r\n <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\r\n\r\n <div class=\"tin-row d-flex justify-content-between\">\r\n <label style=\"font-size: 24px; font-weight: 300;\">{{account.name}}</label>\r\n <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <hr style=\"margin-top: 5px;margin-bottom: 10px;\"/>\r\n\r\n <label *ngIf=\"account.description != ''\" style=\"font-size: small;margin-bottom: 5px;\">{{account.description}}</label>\r\n\r\n <div *ngIf=\"account\" class=\"tin-row\">\r\n <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\r\n <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\r\n </div>\r\n\r\n <mat-card-actions class=\"d-flex justify-content-between\" >\r\n <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\r\n <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\r\n </mat-card-actions>\r\n\r\n </mat-card>\r\n\r\n</div>\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
|
|
@@ -5352,7 +5452,7 @@ class SuppliersComponent {
|
|
|
5352
5452
|
}
|
|
5353
5453
|
}
|
|
5354
5454
|
SuppliersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuppliersComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5355
|
-
SuppliersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuppliersComponent, selector: "spa-suppliers", ngImport: i0, template: "<h4>Suppliers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5455
|
+
SuppliersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuppliersComponent, selector: "spa-suppliers", ngImport: i0, template: "<h4>Suppliers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5356
5456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuppliersComponent, decorators: [{
|
|
5357
5457
|
type: Component,
|
|
5358
5458
|
args: [{ selector: 'spa-suppliers', template: "<h4>Suppliers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n\n" }]
|
|
@@ -5507,7 +5607,7 @@ class TransactionsComponent {
|
|
|
5507
5607
|
}
|
|
5508
5608
|
}
|
|
5509
5609
|
TransactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$3.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
5510
|
-
TransactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TransactionsComponent, selector: "spa-transactions", ngImport: i0, template: "<!-- <h4>Transactions ({{account?.name}})</h4>\n<hr> -->\n\n<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n <label style=\"font-size: 16px;\">Transactions ({{account?.name}})</label>\n\n <div>\n <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;padding-left: 0;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n </div>\n\n</div>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n <div *ngIf=\"!smallScreen; then buttons\" ></div>\n </div>\n\n <div *ngIf=\"!smallScreen\">\n <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n <div class=\"tin-row actionbuttons\">\n <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.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: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
5610
|
+
TransactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TransactionsComponent, selector: "spa-transactions", ngImport: i0, template: "<!-- <h4>Transactions ({{account?.name}})</h4>\n<hr> -->\n\n<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n <label style=\"font-size: 16px;\">Transactions ({{account?.name}})</label>\n\n <div>\n <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;padding-left: 0;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n </div>\n\n</div>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n <div *ngIf=\"!smallScreen; then buttons\" ></div>\n </div>\n\n <div *ngIf=\"!smallScreen\">\n <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n <div class=\"tin-row actionbuttons\">\n <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.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: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
5511
5611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, decorators: [{
|
|
5512
5612
|
type: Component,
|
|
5513
5613
|
args: [{ selector: 'spa-transactions', template: "<!-- <h4>Transactions ({{account?.name}})</h4>\n<hr> -->\n\n<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n <label style=\"font-size: 16px;\">Transactions ({{account?.name}})</label>\n\n <div>\n <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;padding-left: 0;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n </div>\n\n</div>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n <div *ngIf=\"!smallScreen; then buttons\" ></div>\n </div>\n\n <div *ngIf=\"!smallScreen\">\n <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n <div class=\"tin-row actionbuttons\">\n <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
|
|
@@ -5581,7 +5681,7 @@ class TasksComponent {
|
|
|
5581
5681
|
}
|
|
5582
5682
|
}
|
|
5583
5683
|
TasksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TasksComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
5584
|
-
TasksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TasksComponent, selector: "spa-tasks", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n <label style=\"font-size: 16px;\">Tasks</label>\n\n <div>\n <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" [reload]=\"reload\"></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: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5684
|
+
TasksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TasksComponent, selector: "spa-tasks", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n <label style=\"font-size: 16px;\">Tasks</label>\n\n <div>\n <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" [reload]=\"reload\"></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: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5585
5685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TasksComponent, decorators: [{
|
|
5586
5686
|
type: Component,
|
|
5587
5687
|
args: [{ selector: 'spa-tasks', template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n <label style=\"font-size: 16px;\">Tasks</label>\n\n <div>\n <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\" [reload]=\"reload\"></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"] }]
|
|
@@ -5619,7 +5719,7 @@ class DepartmentsComponent {
|
|
|
5619
5719
|
}
|
|
5620
5720
|
}
|
|
5621
5721
|
DepartmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DepartmentsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5622
|
-
DepartmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DepartmentsComponent, selector: "spa-departments", ngImport: i0, template: "<h4>Departments</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5722
|
+
DepartmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DepartmentsComponent, selector: "spa-departments", ngImport: i0, template: "<h4>Departments</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5623
5723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DepartmentsComponent, decorators: [{
|
|
5624
5724
|
type: Component,
|
|
5625
5725
|
args: [{ selector: 'spa-departments', template: "<h4>Departments</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n" }]
|
|
@@ -5677,7 +5777,7 @@ class EmployeesComponent {
|
|
|
5677
5777
|
}
|
|
5678
5778
|
}
|
|
5679
5779
|
EmployeesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EmployeesComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5680
|
-
EmployeesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EmployeesComponent, selector: "spa-employees", ngImport: i0, template: "<h4>Employees</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5780
|
+
EmployeesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EmployeesComponent, selector: "spa-employees", ngImport: i0, template: "<h4>Employees</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
|
|
5681
5781
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EmployeesComponent, decorators: [{
|
|
5682
5782
|
type: Component,
|
|
5683
5783
|
args: [{ selector: 'spa-employees', template: "<h4>Employees</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n <spa-table [config]=\"config\"></spa-table>\n</div>\n" }]
|
|
@@ -6427,7 +6527,7 @@ class LogsComponent {
|
|
|
6427
6527
|
}
|
|
6428
6528
|
}
|
|
6429
6529
|
LogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogsComponent, deps: [{ token: AuthService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
|
|
6430
|
-
LogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogsComponent, selector: "spa-logs", viewQueries: [{ propertyName: "logsPaginator", first: true, predicate: ["logsPaginator"], descendants: true }], ngImport: i0, template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n <div class=\"col-2\">\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n <ng-container matColumnDef=\"userName\">\r\n <th mat-header-cell *matHeaderCellDef> User </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"dateLogged\">\r\n <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef> Source </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"details\">\r\n <th mat-header-cell *matHeaderCellDef> Details </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"fullName\">\r\n <th mat-header-cell *matHeaderCellDef> Name </th>\r\n <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
6530
|
+
LogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogsComponent, selector: "spa-logs", viewQueries: [{ propertyName: "logsPaginator", first: true, predicate: ["logsPaginator"], descendants: true }], ngImport: i0, template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n <div class=\"col-2\">\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n <ng-container matColumnDef=\"userName\">\r\n <th mat-header-cell *matHeaderCellDef> User </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"dateLogged\">\r\n <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef> Source </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"details\">\r\n <th mat-header-cell *matHeaderCellDef> Details </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"fullName\">\r\n <th mat-header-cell *matHeaderCellDef> Name </th>\r\n <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
6431
6531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogsComponent, decorators: [{
|
|
6432
6532
|
type: Component,
|
|
6433
6533
|
args: [{ selector: 'spa-logs', template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n <div class=\"col-2\">\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n <ng-container matColumnDef=\"userName\">\r\n <th mat-header-cell *matHeaderCellDef> User </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"dateLogged\">\r\n <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef> Source </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"details\">\r\n <th mat-header-cell *matHeaderCellDef> Details </th>\r\n <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"fullName\">\r\n <th mat-header-cell *matHeaderCellDef> Name </th>\r\n <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
|
|
@@ -6530,7 +6630,7 @@ class UsersComponent {
|
|
|
6530
6630
|
}
|
|
6531
6631
|
}
|
|
6532
6632
|
UsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UsersComponent, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i4.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6533
|
-
UsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UsersComponent, selector: "spa-users", viewQueries: [{ propertyName: "usersPaginator", first: true, predicate: ["usersPaginator"], descendants: true }], ngImport: i0, template: "\r\n<h4>Users</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\" style=\"font-size: 14px;\">\r\n\r\n <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n <div class=\"col-2\">\r\n <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create User</button>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n </div>\r\n </div>\r\n\r\n\r\n <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n <ng-container matColumnDef=\"userName\">\r\n <th mat-header-cell *matHeaderCellDef> UserName </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"locked\">\r\n <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"fullName\">\r\n <th mat-header-cell *matHeaderCellDef> Name </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"roleName\">\r\n <th mat-header-cell *matHeaderCellDef> Role </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"disabled\">\r\n <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"dateCreated\">\r\n <th mat-header-cell *matHeaderCellDef> Created </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"dateUpdated\">\r\n <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"Action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n <button *ngIf=\"user.locked=='1'\" mat-mini-fab (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\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': row.disabled =='1'}\"></tr>\r\n\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\r\n</div> -->\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.make-gray{background-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
6633
|
+
UsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UsersComponent, selector: "spa-users", viewQueries: [{ propertyName: "usersPaginator", first: true, predicate: ["usersPaginator"], descendants: true }], ngImport: i0, template: "\r\n<h4>Users</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\" style=\"font-size: 14px;\">\r\n\r\n <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n <div class=\"col-2\">\r\n <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create User</button>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n </div>\r\n </div>\r\n\r\n\r\n <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n <ng-container matColumnDef=\"userName\">\r\n <th mat-header-cell *matHeaderCellDef> UserName </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"locked\">\r\n <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"fullName\">\r\n <th mat-header-cell *matHeaderCellDef> Name </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"roleName\">\r\n <th mat-header-cell *matHeaderCellDef> Role </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"disabled\">\r\n <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"dateCreated\">\r\n <th mat-header-cell *matHeaderCellDef> Created </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"dateUpdated\">\r\n <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"Action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n <button *ngIf=\"user.locked=='1'\" mat-mini-fab (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\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': row.disabled =='1'}\"></tr>\r\n\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\r\n</div> -->\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.make-gray{background-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
6534
6634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UsersComponent, decorators: [{
|
|
6535
6635
|
type: Component,
|
|
6536
6636
|
args: [{ selector: "spa-users", template: "\r\n<h4>Users</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\" style=\"font-size: 14px;\">\r\n\r\n <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n <div class=\"col-2\">\r\n <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create User</button>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end\">\r\n <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n </div>\r\n </div>\r\n\r\n\r\n <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n <ng-container matColumnDef=\"userName\">\r\n <th mat-header-cell *matHeaderCellDef> UserName </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"locked\">\r\n <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"fullName\">\r\n <th mat-header-cell *matHeaderCellDef> Name </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"roleName\">\r\n <th mat-header-cell *matHeaderCellDef> Role </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"disabled\">\r\n <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"dateCreated\">\r\n <th mat-header-cell *matHeaderCellDef> Created </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"dateUpdated\">\r\n <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"Action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n <button *ngIf=\"user.locked=='1'\" mat-mini-fab (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\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': row.disabled =='1'}\"></tr>\r\n\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\r\n</div> -->\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.make-gray{background-color:#d3d3d3}\n"] }]
|