ngx-dynamic-dashboard
Version:
an dashboard lib for angular 10
92 lines • 13.6 kB
JavaScript
/**
* Created by jayhamilton on 2/5/17.
*/
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { FormGroup } from '@angular/forms';
import { PropertyControlService } from './property-control.service';
import { ConfigurationService } from '../services/configuration.service';
export class DynamicFormComponent {
constructor(pcs, configService, changeDetectionRef) {
this.pcs = pcs;
this.configService = configService;
this.changeDetectionRef = changeDetectionRef;
this.updatePropertiesEvent = new EventEmitter(true);
this.currentTab = 'run';
this.state = 'inactive';
this.lastActiveTab = {};
this.form = new FormGroup({});
this.payLoad = '';
this.showMessage = false;
}
get isPropertyPageValid() {
return this.form.valid;
}
/* better solution that solves error: Expression has changed after it was checked exception resolution*/
ngAfterViewInit() {
this.changeDetectionRef.detectChanges();
}
ngOnInit() {
this.form = this.pcs.toFormGroupFromPP(this.propertyPages);
}
onSubmit() {
this.payLoad = JSON.stringify(this.form.value);
console.debug('Saving Form!');
this.updatePropertiesEvent.emit(this.payLoad);
console.debug('Sending configuration to the config service!');
this.configService.notifyGadgetOnPropertyChange(this.payLoad, this.instanceId);
if (this.payLoad) {
this.showMessage = true;
setTimeout(function () {
this.showMessage = false;
}.bind(this), 2000);
}
}
setCurrentTab(tab) {
this.currentTab = tab.groupId;
}
}
DynamicFormComponent.decorators = [
{ type: Component, args: [{
/* solves error: Expression has changed after it was checked exception resolution - https://www.youtube.com/watch?v=K_BRcal-JfI*/
// changeDetection: ChangeDetectionStrategy.OnPush,
moduleId: module.id,
selector: 'dashboard-dynamic-form',
template: "<div class=\"ui form\" style=\"text-align: left !important\">\n <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n\n <div #tabComponentTag class=\"proppages ui top attached tabular menu\">\n <a #tabComponentTag (click)=\"setCurrentTab(tab)\" *ngFor=\"let tab of propertyPages; let i = index\"\n [ngClass]=\"{'active': tab.groupId == currentTab }\"\n attr.data-tab=\"{{tab.groupId}}\" class=\"item\">{{tab.displayName}} </a>\n </div>\n\n <div *ngFor=\"let page of propertyPages; let i = index\"\n [@contentSwitch]=\"page.groupId == currentTab ? 'active':'inactive'\" [ngClass]=\"{'active': page.groupId == currentTab }\"\n attr.data-tab=\"{{page.groupId}}\"\n class=\"proppages ui bottom attached tab segment\">\n\n\n <div *ngFor=\"let property of page.properties\"\n class=\"form-row\">\n <dashboard-df-property\n [form]=\"form\"\n [gadgetTags]=\"gadgetTags\"\n [property]=\"property\"\n >\n\n </dashboard-df-property>\n <br>\n </div>\n\n </div>\n <div class=\"form-row field\">\n <button [disabled]=\"!form.valid || !form.dirty\" class=\"ui green submit button\" type=\"submit\"> Save</button>\n </div>\n </form>\n\n <div *ngIf=\"showMessage\" [@showHideAnimation] class=\"form-row\">\n <br>\n <div class=\"ui success message\">Saved!</div>\n </div>\n\n</div>\n",
animations: [
trigger('contentSwitch', [
state('inactive', style({
opacity: 0
})),
state('active', style({
opacity: 1
})),
transition('inactive => active', animate('750ms ease-in')),
transition('active => inactive', animate('750ms ease-out'))
]),
trigger('showHideAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate(750, style({ opacity: 1 }))
]),
transition(':leave', [
animate(750, style({ opacity: 0 }))
])
])
],
providers: [PropertyControlService],
styles: [".field>label{color:#767676!important;font-size:1.1em!important;font-weight:300}.ui.tabular.menu .active.item{border-top-color:#2185d0!important;border-top-width:3px!important}.ui.segment{border:none}select{color:rgba(97,97,97,.68)!important;height:3em!important}input{border:thin solid #d3d3d3;border-radius:5px;line-height:2em;padding:5px;width:100%}"]
},] }
];
DynamicFormComponent.ctorParameters = () => [
{ type: PropertyControlService },
{ type: ConfigurationService },
{ type: ChangeDetectorRef }
];
DynamicFormComponent.propDecorators = {
gadgetTags: [{ type: Input }],
propertyPages: [{ type: Input }],
instanceId: [{ type: Input }],
updatePropertiesEvent: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIvVXNlcnMvYmVubGkvd29ya3NwYWNlcy9uZ3gtZHluYW1pYy1kYXNoYm9hcmQtZnJhbWV3b3JrL3Byb2plY3RzL25neC1keW5hbWljLWRhc2hib2FyZC9zcmMvIiwic291cmNlcyI6WyJkYXNoYm9hcmQvZHluYW1pYy1mb3JtL2R5bmFtaWMtZm9ybS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxPQUFPLEVBQWdCLGlCQUFpQixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUUvRyxPQUFPLEVBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBRS9FLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUV6QyxPQUFPLEVBQUMsc0JBQXNCLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRSxPQUFPLEVBQUMsb0JBQW9CLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQW9DdkUsTUFBTSxPQUFPLG9CQUFvQjtJQWM3QixZQUFvQixHQUEyQixFQUMzQixhQUFtQyxFQUNuQyxrQkFBcUM7UUFGckMsUUFBRyxHQUFILEdBQUcsQ0FBd0I7UUFDM0Isa0JBQWEsR0FBYixhQUFhLENBQXNCO1FBQ25DLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBbUI7UUFYL0MsMEJBQXFCLEdBQXNCLElBQUksWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzVFLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsVUFBSyxHQUFHLFVBQVUsQ0FBQztRQUNuQixrQkFBYSxHQUFHLEVBQUUsQ0FBQztRQUVuQixTQUFJLEdBQWMsSUFBSSxTQUFTLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDcEMsWUFBTyxHQUFHLEVBQUUs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Mi81LzE3LlxuICovXG5pbXBvcnQge0FmdGVyVmlld0luaXQsIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHthbmltYXRlLCBzdGF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXJ9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuXG5pbXBvcnQge0Zvcm1Hcm91cH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5pbXBvcnQge1Byb3BlcnR5Q29udHJvbFNlcnZpY2V9IGZyb20gJy4vcHJvcGVydHktY29udHJvbC5zZXJ2aWNlJztcbmltcG9ydCB7Q29uZmlndXJhdGlvblNlcnZpY2V9IGZyb20gJy4uL3NlcnZpY2VzL2NvbmZpZ3VyYXRpb24uc2VydmljZSc7XG5cblxuQENvbXBvbmVudCh7XG4gICAgLyogc29sdmVzIGVycm9yOiBFeHByZXNzaW9uIGhhcyBjaGFuZ2VkIGFmdGVyIGl0IHdhcyBjaGVja2VkIGV4Y2VwdGlvbiByZXNvbHV0aW9uIC0gaHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1LX0JSY2FsLUpmSSovXG4gICAgLy8gY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgbW9kdWxlSWQ6IG1vZHVsZS5pZCxcbiAgICBzZWxlY3RvcjogJ2Rhc2hib2FyZC1keW5hbWljLWZvcm0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9keW5hbWljLWZvcm0uY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3N0eWxlcy1wcm9wcy5jc3MnXSxcbiAgICBhbmltYXRpb25zOiBbXG5cbiAgICAgICAgdHJpZ2dlcignY29udGVudFN3aXRjaCcsIFtcbiAgICAgICAgICAgIHN0YXRlKCdpbmFjdGl2ZScsIHN0eWxlKHtcbiAgICAgICAgICAgICAgICBvcGFjaXR5OiAwXG4gICAgICAgICAgICB9KSksXG4gICAgICAgICAgICBzdGF0ZSgnYWN0aXZlJywgc3R5bGUoe1xuICAgICAgICAgICAgICAgIG9wYWNpdHk6IDFcbiAgICAgICAgICAgIH0pKSxcbiAgICAgICAgICAgIHRyYW5zaXRpb24oJ2luYWN0aXZlID0+IGFjdGl2ZScsIGFuaW1hdGUoJzc1MG1zIGVhc2UtaW4nKSksXG4gICAgICAgICAgICB0cmFuc2l0aW9uKCdhY3RpdmUgPT4gaW5hY3RpdmUnLCBhbmltYXRlKCc3NTBtcyBlYXNlLW91dCcpKVxuICAgICAgICBdKSxcbiAgICAgICAgdHJpZ2dlcihcbiAgICAgICAgICAgICdzaG93SGlkZUFuaW1hdGlvbicsXG4gICAgICAgICAgICBbXG4gICAgICAgICAgICAgICAgdHJhbnNpdGlvbignOmVudGVyJywgWyAgIC8vIDplbnRlciBpcyBhbGlhcyB0byAndm9pZCA9PiAqJ1xuICAgICAgICAgICAgICAgICAgICBzdHlsZSh7b3BhY2l0eTogMH0pLFxuICAgICAgICAgICAgICAgICAgICBhbmltYXRlKDc1MCwgc3R5bGUoe29wYWNpdHk6IDF9KSlcbiAgICAgICAgICAgICAgICBdKSxcbiAgICAgICAgICAgICAgICB0cmFuc2l0aW9uKCc6bGVhdmUnLCBbICAgLy8gOmxlYXZlIGlzIGFsaWFzIHRvICcqID0+IHZvaWQnXG4gICAgICAgICAgICAgICAgICAgIGFuaW1hdGUoNzUwLCBzdHlsZSh7b3BhY2l0eTogMH0pKVxuICAgICAgICAgICAgICAgIF0pXG4gICAgICAgICAgICBdKVxuICAgIF0sXG4gICAgcHJvdmlkZXJzOiBbUHJvcGVydHlDb250cm9sU2VydmljZV1cbn0pXG5leHBvcnQgY2xhc3MgRHluYW1pY0Zvcm1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQge1xuXG4gICAgQElucHV0KCkgZ2FkZ2V0VGFnczogYW55W107Ly90b2RvIC0gdXNlIHRvIGNvbnRyb2wgd2hhdCBlbmRwb2ludHMgYXJlIGRpc3BsYXllZFxuICAgIEBJbnB1dCgpIHByb3BlcnR5UGFnZXM6IGFueVtdO1xuICAgIEBJbnB1dCgpIGluc3RhbmNlSWQ6IG51bWJlcjtcbiAgICBAT3V0cHV0KCkgdXBkYXRlUHJvcGVydGllc0V2ZW50OiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIodHJ1ZSk7XG4gICAgY3VycmVudFRhYiA9ICdydW4nO1xuICAgIHN0YXRlID0gJ2luYWN0aXZlJztcbiAgICBsYXN0QWN0aXZlVGFiID0ge307XG5cbiAgICBmb3JtOiBGb3JtR3JvdXAgPSBuZXcgRm9ybUdyb3VwKHt9KTtcbiAgICBwYXlMb2FkID0gJyc7XG4gICAgc2hvd01lc3NhZ2UgPSBmYWxzZTtcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcGNzOiBQcm9wZXJ0eUNvbnRyb2xTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHByaXZhdGUgY29uZmlnU2VydmljZTogQ29uZmlndXJhdGlvblNlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJpdmF0ZSBjaGFuZ2VEZXRlY3Rpb25SZWY6IENoYW5nZURldGVjdG9yUmVmKSB7XG4gICAgfVxuXG4gICAgZ2V0IGlzUHJvcGVydHlQYWdlVmFsaWQoKSB7XG5cbiAgICAgICAgcmV0dXJuIHRoaXMuZm9ybS52YWxpZDtcbiAgICB9XG5cbiAgICAvKiBiZXR0ZXIgc29sdXRpb24gdGhhdCBzb2x2ZXMgZXJyb3I6IEV4cHJlc3Npb24gaGFzIGNoYW5nZWQgYWZ0ZXIgaXQgd2FzIGNoZWNrZWQgZXhjZXB0aW9uIHJlc29sdXRpb24qL1xuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcblxuICAgICAgICB0aGlzLmNoYW5nZURldGVjdGlvblJlZi5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKSB7XG5cbiAgICAgICAgdGhpcy5mb3JtID0gdGhpcy5wY3MudG9Gb3JtR3JvdXBGcm9tUFAodGhpcy5wcm9wZXJ0eVBhZ2VzKTtcblxuICAgIH1cblxuICAgIG9uU3VibWl0KCkge1xuXG4gICAgICAgIHRoaXMucGF5TG9hZCA9IEpTT04uc3RyaW5naWZ5KHRoaXMuZm9ybS52YWx1ZSk7XG5cbiAgICAgICAgY29uc29sZS5kZWJ1ZygnU2F2aW5nIEZvcm0hJyk7XG4gICAgICAgIHRoaXMudXBkYXRlUHJvcGVydGllc0V2ZW50LmVtaXQodGhpcy5wYXlMb2FkKTtcblxuICAgICAgICBjb25zb2xlLmRlYnVnKCdTZW5kaW5nIGNvbmZpZ3VyYXRpb24gdG8gdGhlIGNvbmZpZyBzZXJ2aWNlIScpO1xuICAgICAgICB0aGlzLmNvbmZpZ1NlcnZpY2Uubm90aWZ5R2FkZ2V0T25Qcm9wZXJ0eUNoYW5nZSh0aGlzLnBheUxvYWQsIHRoaXMuaW5zdGFuY2VJZCk7XG5cbiAgICAgICAgaWYgKHRoaXMucGF5TG9hZCkge1xuICAgICAgICAgICAgdGhpcy5zaG93TWVzc2FnZSA9IHRydWU7XG5cbiAgICAgICAgICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gKCkge1xuICAgICAgICAgICAgICAgIHRoaXMuc2hvd01lc3NhZ2UgPSBmYWxzZTtcbiAgICAgICAgICAgIH0uYmluZCh0aGlzKSwgMjAwMCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBzZXRDdXJyZW50VGFiKHRhYikge1xuICAgICAgICB0aGlzLmN1cnJlbnRUYWIgPSB0YWIuZ3JvdXBJZDtcblxuICAgIH1cbn1cblxuXG5cblxuXG4iXX0=