tin-spa 2.3.1 → 2.3.2
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/classes/TinCore.mjs +18 -2
- package/esm2020/lib/components/form/form.component.mjs +3 -34
- package/esm2020/lib/components/table/detailsDialog.component.mjs +6 -3
- package/esm2020/lib/components/table/table.component.mjs +4 -1
- package/esm2020/lib/components/table-internal/detailsDialog-internal.component.mjs +8 -5
- package/esm2020/lib/components/table-internal/table-internal.component.mjs +6 -3
- package/fesm2015/tin-spa.mjs +41 -42
- package/fesm2015/tin-spa.mjs.map +1 -1
- package/fesm2020/tin-spa.mjs +39 -42
- package/fesm2020/tin-spa.mjs.map +1 -1
- package/lib/classes/Classes.d.ts +1 -0
- package/lib/classes/TinCore.d.ts +1 -0
- package/lib/components/form/form.component.d.ts +0 -1
- package/lib/components/table/detailsDialog.component.d.ts +1 -0
- package/lib/components/table-internal/detailsDialog-internal.component.d.ts +1 -0
- package/package.json +1 -1
package/fesm2020/tin-spa.mjs
CHANGED
|
@@ -250,6 +250,20 @@ class Core {
|
|
|
250
250
|
}
|
|
251
251
|
});
|
|
252
252
|
}
|
|
253
|
+
static testVisible(config, data, f) {
|
|
254
|
+
if (f.hidden)
|
|
255
|
+
return false;
|
|
256
|
+
if (config.mode == 'create' && f.hideOnCreate) {
|
|
257
|
+
return false;
|
|
258
|
+
}
|
|
259
|
+
if (config.mode != 'create' && f.hideOnExists) {
|
|
260
|
+
return false;
|
|
261
|
+
}
|
|
262
|
+
if (f.hiddenCondition) {
|
|
263
|
+
return !f.hiddenCondition(data);
|
|
264
|
+
}
|
|
265
|
+
return true;
|
|
266
|
+
}
|
|
253
267
|
static validateObject(fields, data) {
|
|
254
268
|
console.log("Validations");
|
|
255
269
|
for (let field of fields) {
|
|
@@ -289,6 +303,8 @@ class Core {
|
|
|
289
303
|
// return field.options[0][field.optionValue]
|
|
290
304
|
// }
|
|
291
305
|
if (field.defaultValue) {
|
|
306
|
+
if (field.type == 'date' || field.type == 'datetime' && field.defaultValue == 'now')
|
|
307
|
+
return this.nowDate(true);
|
|
292
308
|
return field.defaultValue;
|
|
293
309
|
}
|
|
294
310
|
switch (field.type) {
|
|
@@ -299,7 +315,7 @@ class Core {
|
|
|
299
315
|
case 'number':
|
|
300
316
|
return 0;
|
|
301
317
|
case 'date':
|
|
302
|
-
return
|
|
318
|
+
return this.nowDate(true);
|
|
303
319
|
case 'checkbox':
|
|
304
320
|
return false;
|
|
305
321
|
case 'select':
|
|
@@ -3352,25 +3368,11 @@ class FormComponent {
|
|
|
3352
3368
|
if (this.config?.button?.action && this.fileField) {
|
|
3353
3369
|
this.config.button.action.isFormData = true;
|
|
3354
3370
|
}
|
|
3355
|
-
// this.fileViewField = this.fields.find(x => x.type == 'file-view')
|
|
3356
|
-
// if (this.fileViewField && !this.fileViewField.hidden && this.config.mode != "create"){
|
|
3357
|
-
// this.loadFiles();
|
|
3358
|
-
// }
|
|
3359
|
-
// this.getVisibleFields();
|
|
3360
3371
|
this.childFields = this.fields.filter(x => x.masterField);
|
|
3361
3372
|
this.childFields.forEach(child => {
|
|
3362
3373
|
let master = this.fields.find(x => x.name == child.masterField);
|
|
3363
3374
|
this.updateChildOptions(master);
|
|
3364
3375
|
});
|
|
3365
|
-
// //set value for child
|
|
3366
|
-
// this.fields.filter(x => x.childField).forEach(master => {
|
|
3367
|
-
// // console.log(master)
|
|
3368
|
-
// // console.log(this.data)
|
|
3369
|
-
// //get child
|
|
3370
|
-
// let child = this.fields.find(x => x.name == master.childField)
|
|
3371
|
-
// this.data[child.name] = master.options.find(x => x[master.optionValue] == this.data[master.optionValue])[master.childValueField]
|
|
3372
|
-
// console.log(this.data)
|
|
3373
|
-
// });
|
|
3374
3376
|
}
|
|
3375
3377
|
ngOnChanges() {
|
|
3376
3378
|
console.log("changed");
|
|
@@ -3379,24 +3381,7 @@ class FormComponent {
|
|
|
3379
3381
|
// console.log("Form After View init")
|
|
3380
3382
|
}
|
|
3381
3383
|
getVisibleFields() {
|
|
3382
|
-
|
|
3383
|
-
// && ( x.hiddenCondition && !x.hiddenCondition(this.data) )
|
|
3384
|
-
);
|
|
3385
|
-
return visibleFields;
|
|
3386
|
-
}
|
|
3387
|
-
testVisible(f) {
|
|
3388
|
-
if (f.hidden)
|
|
3389
|
-
return false;
|
|
3390
|
-
if (this.config.mode == 'create' && f.hideOnCreate) {
|
|
3391
|
-
return false;
|
|
3392
|
-
}
|
|
3393
|
-
if (this.config.mode != 'create' && f.hideOnExists) {
|
|
3394
|
-
return false;
|
|
3395
|
-
}
|
|
3396
|
-
if (f.hiddenCondition) {
|
|
3397
|
-
return !f.hiddenCondition(this.data);
|
|
3398
|
-
}
|
|
3399
|
-
return true;
|
|
3384
|
+
return this.fields?.filter(x => Core.testVisible(this.config, this.data, x));
|
|
3400
3385
|
}
|
|
3401
3386
|
testReadOnly(f) {
|
|
3402
3387
|
if (this.config.mode == 'create') {
|
|
@@ -3451,7 +3436,7 @@ class FormComponent {
|
|
|
3451
3436
|
return;
|
|
3452
3437
|
}
|
|
3453
3438
|
//validation
|
|
3454
|
-
let resp = Core.validateObject(this.
|
|
3439
|
+
let resp = Core.validateObject(this.getVisibleFields(), this.data);
|
|
3455
3440
|
if (resp != '') {
|
|
3456
3441
|
this.messageService.toast(resp);
|
|
3457
3442
|
return;
|
|
@@ -3627,6 +3612,9 @@ class DetailsDialogInternal {
|
|
|
3627
3612
|
getButtonColor(button, row) {
|
|
3628
3613
|
return this.buttonService.getButtonColor(button, row);
|
|
3629
3614
|
}
|
|
3615
|
+
getVisibleFields() {
|
|
3616
|
+
return this.formConfig.fields?.filter(x => Core.testVisible(this.formConfig, this.details, x));
|
|
3617
|
+
}
|
|
3630
3618
|
create() {
|
|
3631
3619
|
this.handleButtonAction('create');
|
|
3632
3620
|
}
|
|
@@ -3648,11 +3636,11 @@ class DetailsDialogInternal {
|
|
|
3648
3636
|
return;
|
|
3649
3637
|
}
|
|
3650
3638
|
if (this.validateForm()) {
|
|
3651
|
-
this.executeAction(button, this.details, button.action?.successMessage ||
|
|
3639
|
+
this.executeAction(button, this.details, button.action?.successMessage || "Updated");
|
|
3652
3640
|
}
|
|
3653
3641
|
}
|
|
3654
3642
|
validateForm() {
|
|
3655
|
-
const validationResult = Core.validateObject(this.
|
|
3643
|
+
const validationResult = Core.validateObject(this.getVisibleFields(), this.details);
|
|
3656
3644
|
if (validationResult !== '') {
|
|
3657
3645
|
this.messageService.toast(validationResult);
|
|
3658
3646
|
return false;
|
|
@@ -3700,10 +3688,10 @@ class DetailsDialogInternal {
|
|
|
3700
3688
|
}
|
|
3701
3689
|
}
|
|
3702
3690
|
DetailsDialogInternal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, deps: [{ token: i3$1.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3703
|
-
DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "app-viewModel-internal", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n <div class=\"dialog-content\">\r\n\r\n <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\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>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\">\r\n\r\n <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n </div>\r\n\r\n </div>\r\n\r\n <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\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<!-- Unique to iternal no tables -->\r\n\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n\r\n </div>\r\n\r\n <mat-dialog-actions>\r\n\r\n <div>\r\n\r\n <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n </button>\r\n\r\n <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n </button>\r\n\r\n <ng-container *ngFor=\"let btn of extraButtons\">\r\n <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n </button>\r\n </ng-container>\r\n\r\n <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n <ng-container *ngFor=\"let btn of extraButtons\">\r\n <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [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</div>\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}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.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: i4$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: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
|
|
3691
|
+
DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "app-viewModel-internal", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n <div class=\"dialog-content\">\r\n\r\n <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\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>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\">\r\n\r\n <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n </div>\r\n\r\n </div>\r\n\r\n <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\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<!-- Unique to iternal no tables -->\r\n\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n\r\n </div>\r\n\r\n <mat-dialog-actions>\r\n\r\n <div>\r\n\r\n <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n </button>\r\n\r\n <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n </button>\r\n\r\n <ng-container *ngFor=\"let btn of extraButtons\">\r\n <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n </button>\r\n </ng-container>\r\n\r\n <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n <ng-container *ngFor=\"let btn of extraButtons\">\r\n <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [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</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.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: i4$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: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
|
|
3704
3692
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, decorators: [{
|
|
3705
3693
|
type: Component,
|
|
3706
|
-
args: [{ selector: 'app-viewModel-internal', template: "<div class=\"dialog-container\">\r\n\r\n <div class=\"dialog-content\">\r\n\r\n <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\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>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\">\r\n\r\n <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n </div>\r\n\r\n </div>\r\n\r\n <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\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<!-- Unique to iternal no tables -->\r\n\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n\r\n </div>\r\n\r\n <mat-dialog-actions>\r\n\r\n <div>\r\n\r\n <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n </button>\r\n\r\n <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n </button>\r\n\r\n <ng-container *ngFor=\"let btn of extraButtons\">\r\n <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n </button>\r\n </ng-container>\r\n\r\n <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n <ng-container *ngFor=\"let btn of extraButtons\">\r\n <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [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</div>\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}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
|
|
3694
|
+
args: [{ selector: 'app-viewModel-internal', template: "<div class=\"dialog-container\">\r\n\r\n <div class=\"dialog-content\">\r\n\r\n <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\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>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\">\r\n\r\n <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n </div>\r\n\r\n <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n </div>\r\n\r\n </div>\r\n\r\n <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\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<!-- Unique to iternal no tables -->\r\n\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n\r\n </div>\r\n\r\n <mat-dialog-actions>\r\n\r\n <div>\r\n\r\n <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n </button>\r\n\r\n <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n </button>\r\n\r\n <ng-container *ngFor=\"let btn of extraButtons\">\r\n <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n </button>\r\n </ng-container>\r\n\r\n <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n </div>\r\n\r\n <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n <ng-container *ngFor=\"let btn of extraButtons\">\r\n <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [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</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
|
|
3707
3695
|
}], ctorParameters: function () { return [{ type: i3$1.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
|
|
3708
3696
|
type: Inject,
|
|
3709
3697
|
args: [MAT_DIALOG_DATA]
|
|
@@ -4161,6 +4149,9 @@ class TableInternalComponent {
|
|
|
4161
4149
|
return;
|
|
4162
4150
|
if (!b.action)
|
|
4163
4151
|
return;
|
|
4152
|
+
if (b.setHeroField && this.config.heroValue) {
|
|
4153
|
+
row[this.config.heroField] = this.config.heroValue;
|
|
4154
|
+
}
|
|
4164
4155
|
if (b.confirm) {
|
|
4165
4156
|
this.messageService.confirm(`${b.confirm.message}`).subscribe((result) => {
|
|
4166
4157
|
if (result == "yes") {
|
|
@@ -4211,10 +4202,10 @@ class TableInternalComponent {
|
|
|
4211
4202
|
}
|
|
4212
4203
|
}
|
|
4213
4204
|
TableInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4214
|
-
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: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n <!-- Unique to internal -->\r\n <div class=\"tin-row\">\r\n <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n </div>\r\n\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\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}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: 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: 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: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
4205
|
+
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: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n <!-- Unique to internal -->\r\n <div class=\"tin-row\">\r\n <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n </div>\r\n\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: 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: 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: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
|
|
4215
4206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, decorators: [{
|
|
4216
4207
|
type: Component,
|
|
4217
|
-
args: [{ selector: 'spa-table-internal', template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n <!-- Unique to internal -->\r\n <div class=\"tin-row\">\r\n <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n </div>\r\n\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\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}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
|
|
4208
|
+
args: [{ selector: 'spa-table-internal', template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n <!-- Unique to internal -->\r\n <div class=\"tin-row\">\r\n <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n </div>\r\n\r\n <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n <!-- Rows -->\r\n <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n </app-table-row>\r\n\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"action\">\r\n <th mat-header-cell *matHeaderCellDef> Action </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n <div class=\"action-buttons-container\">\r\n\r\n <!-- Actions -->\r\n <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n </app-table-action>\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n </table>\r\n\r\n </div>\r\n\r\n <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
|
|
4218
4209
|
}], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
|
|
4219
4210
|
type: ViewChild,
|
|
4220
4211
|
args: ['tablePaginator']
|
|
@@ -4341,6 +4332,9 @@ class DetailsDialog {
|
|
|
4341
4332
|
getButtonColor(button, row) {
|
|
4342
4333
|
return this.buttonService.getButtonColor(button, row);
|
|
4343
4334
|
}
|
|
4335
|
+
getVisibleFields() {
|
|
4336
|
+
return this.formConfig.fields?.filter(x => Core.testVisible(this.formConfig, this.details, x));
|
|
4337
|
+
}
|
|
4344
4338
|
create() {
|
|
4345
4339
|
this.handleButtonAction('create');
|
|
4346
4340
|
}
|
|
@@ -4362,11 +4356,11 @@ class DetailsDialog {
|
|
|
4362
4356
|
return;
|
|
4363
4357
|
}
|
|
4364
4358
|
if (this.validateForm()) {
|
|
4365
|
-
this.executeAction(button, this.details, button.action?.successMessage ||
|
|
4359
|
+
this.executeAction(button, this.details, button.action?.successMessage || "Updated");
|
|
4366
4360
|
}
|
|
4367
4361
|
}
|
|
4368
4362
|
validateForm() {
|
|
4369
|
-
const validationResult = Core.validateObject(this.
|
|
4363
|
+
const validationResult = Core.validateObject(this.getVisibleFields(), this.details);
|
|
4370
4364
|
if (validationResult !== '') {
|
|
4371
4365
|
this.messageService.toast(validationResult);
|
|
4372
4366
|
return false;
|
|
@@ -4757,6 +4751,9 @@ class TableComponent {
|
|
|
4757
4751
|
return;
|
|
4758
4752
|
if (!b.action)
|
|
4759
4753
|
return;
|
|
4754
|
+
if (b.setHeroField && this.config.heroValue) {
|
|
4755
|
+
row[this.config.heroField] = this.config.heroValue;
|
|
4756
|
+
}
|
|
4760
4757
|
if (b.confirm) {
|
|
4761
4758
|
this.messageService.confirm(`${b.confirm.message}`).subscribe((result) => {
|
|
4762
4759
|
if (result == "yes") {
|