ngx-dynamic-dashboard
Version:
an dashboard lib for angular 10
68 lines (66 loc) • 10.1 kB
JavaScript
/**
* Created by jayhamilton on 2/5/17.
*/
import { Component, Input } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';
export class DynamicFormPropertyComponent {
constructor() {
this.endPoints = [];
this.updateEndPointList();
}
get isValid() {
return this.form.controls[this.property.key].valid;
}
updateEndPointList() {
/*
this.endPointService.getEndPoints().subscribe(data => {
this.endPoints = data['endPoint'].slice();
});
*/
}
ngAfterViewInit() {
//filter endpoints based on the gadgets tags
let me = this;
let eligibleEndpoints = [];
this.endPoints.forEach(function (point, index, object) {
let found = false;
point['tags'].forEach(tag => {
me.gadgetTags.forEach(_gt => {
if (_gt.name.trim().toLowerCase() === tag.name.trim().toLowerCase()) {
found = true;
}
});
});
if (found) {
eligibleEndpoints.push(point);
}
});
this.endPoints = eligibleEndpoints.slice();
}
}
DynamicFormPropertyComponent.decorators = [
{ type: Component, args: [{
moduleId: module.id,
selector: 'dashboard-df-property',
template: "<div [formGroup]=\"form\">\n\n <div class=\"field\">\n <label [attr.for]=\"property.key\">{{property.label}}</label>\n\n <div [ngSwitch]=\"property.controlType\">\n\n <input *ngSwitchCase=\"'textbox'\"\n [formControlName]=\"property.key\"\n [id]=\"property.key\"\n [type]=\"property.type\">\n\n <select *ngSwitchCase=\"'dropdown'\"\n [formControlName]=\"property.key\"\n [id]=\"property.key\">\n\n <option *ngFor=\"let opt of property.options\"\n [value]=\"opt.value\">{{opt.key}}\n </option>\n </select>\n\n <!--todo - fix checkbox type. The value is not properly set by the data so using hard coded type -->\n <input (change)=\"property.value = $event.target.checked\"\n *ngSwitchCase=\"'checkbox'\"\n [(ngModel)]=\"property.value\"\n [attr.checked]=\"property.value ? true : null\"\n [formControlName]=\"property.key\"\n [id]=\"property.key\"\n [type]=\"'checkbox'\">\n\n <input *ngSwitchCase=\"'number'\"\n [formControlName]=\"property.key\"\n [id]=\"property.key\"\n [type]=\"'number'\">\n\n\n <input *ngSwitchCase=\"'hidden'\"\n [formControlName]=\"property.key\"\n [id]=\"property.key\"\n [type]=\"property.type\">\n\n <select (change)=\"property.value = $event.target.toString()\"\n *ngSwitchCase=\"'dynamicdropdown'\"\n [formControlName]=\"property.key\"\n [id]=\"property.key\">\n\n <option></option>\n <option *ngFor=\"let opt of endPoints\"\n [value]=\"opt.name\">{{opt.name}}\n </option>\n\n </select>\n </div>\n </div>\n\n <div *ngIf=\"!isValid\" [@showHideAnimation] class=\"ui error message\">{{property.label}} is required</div>\n\n\n</div>\n",
animations: [
trigger('showHideAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate(750, style({ opacity: 1 }))
]),
transition(':leave', [
animate(750, style({ opacity: 0 }))
])
])
],
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%}"]
},] }
];
DynamicFormPropertyComponent.ctorParameters = () => [];
DynamicFormPropertyComponent.propDecorators = {
property: [{ type: Input }],
form: [{ type: Input }],
gadgetTags: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLXByb3BlcnR5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIvVXNlcnMvYmVubGkvd29ya3NwYWNlcy9uZ3gtZHluYW1pYy1kYXNoYm9hcmQtZnJhbWV3b3JrL3Byb2plY3RzL25neC1keW5hbWljLWRhc2hib2FyZC9zcmMvIiwic291cmNlcyI6WyJkYXNoYm9hcmQvZHluYW1pYy1mb3JtL2R5bmFtaWMtZm9ybS1wcm9wZXJ0eS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxPQUFPLEVBQWdCLFNBQVMsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFJOUQsT0FBTyxFQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBc0J4RSxNQUFNLE9BQU8sNEJBQTRCO0lBTXJDO1FBRkEsY0FBUyxHQUFhLEVBQUUsQ0FBQztRQUlyQixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztJQUM5QixDQUFDO0lBRUQsSUFBSSxPQUFPO1FBRVAsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQztJQUN2RCxDQUFDO0lBRUQsa0JBQWtCO1FBQ2Q7Ozs7OztXQU1HO0lBQ1AsQ0FBQztJQUVELGVBQWU7UUFFWCw0Q0FBNEM7UUFFNUMsSUFBSSxFQUFFLEdBQUcsSUFBSSxDQUFDO1FBQ2QsSUFBSSxpQkFBaUIsR0FBRyxFQUFFLENBQUM7UUFFM0IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsVUFBVSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU07WUFFakQsSUFBSSxLQUFLLEdBQUcsS0FBSyxDQUFDO1lBQ2xCLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLEVBQUU7Z0JBRXhCLEVBQUUsQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxFQUFFO29CQUV4QixJQUFJLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsV0FBVyxFQUFFLEtBQUssR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxXQUFXLEVBQUUsRUFBRTt3QkFDakUsS0FBSyxHQUFHLElBQUksQ0FBQztxQkFDaEI7Z0JBQ0wsQ0FBQyxDQUFDLENBQUE7WUFDTixDQUFDLENBQUMsQ0FBQztZQUVILElBQUksS0FBSyxFQUFFO2dCQUNQLGlCQUFpQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQzthQUNqQztRQUNMLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFNBQVMsR0FBRyxpQkFBaUIsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUUvQyxDQUFDOzs7WUF6RUosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxNQUFNLENBQUMsRUFBRTtnQkFDbkIsUUFBUSxFQUFFLHVCQUF1QjtnQkFDakMsMG9FQUFxRDtnQkFFckQsVUFBVSxFQUFFO29CQUVSLE9BQU8sQ0FDSCxtQkFBbUIsRUFDbkI7d0JBQ0ksVUFBVSxDQUFDLFFBQVEsRUFBRTs0QkFDakIsS0FBSyxDQUFDLEVBQUMsT0FBTyxFQUFFLENBQUMsRUFBQyxDQUFDOzRCQUNuQixPQUFPLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFDLE9BQU8sRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDO3lCQUNwQyxDQUFDO3dCQUNGLFVBQVUsQ0FBQyxRQUFRLEVBQUU7NEJBQ2pCLE9BQU8sQ0FBQyxHQUFHLEVBQUUsS0FBSyxDQUFDLEVBQUMsT0FBTyxFQUFFLENBQUMsRUFBQyxDQUFDLENBQUM7eUJBQ3BDLENBQUM7cUJBQ0wsQ0FBQztpQkFDVDs7YUFDSjs7Ozt1QkFFSSxLQUFLO21CQUNMLEtBQUs7eUJBQ0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ3JlYXRlZCBieSBqYXloYW1pbHRvbiBvbiAyLzUvMTcuXG4gKi9cbmltcG9ydCB7QWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0Zvcm1Hcm91cH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtQcm9wZXJ0eUJhc2V9IGZyb20gJy4vcHJvcGVydHktYmFzZSc7XG5cbmltcG9ydCB7YW5pbWF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXJ9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBtb2R1bGVJZDogbW9kdWxlLmlkLFxuICAgIHNlbGVjdG9yOiAnZGFzaGJvYXJkLWRmLXByb3BlcnR5JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZHluYW1pYy1mb3JtLXByb3BlcnR5LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zdHlsZXMtcHJvcHMuY3NzJ10sXG4gICAgYW5pbWF0aW9uczogW1xuXG4gICAgICAgIHRyaWdnZXIoXG4gICAgICAgICAgICAnc2hvd0hpZGVBbmltYXRpb24nLFxuICAgICAgICAgICAgW1xuICAgICAgICAgICAgICAgIHRyYW5zaXRpb24oJzplbnRlcicsIFsgICAvLyA6ZW50ZXIgaXMgYWxpYXMgdG8gJ3ZvaWQgPT4gKidcbiAgICAgICAgICAgICAgICAgICAgc3R5bGUoe29wYWNpdHk6IDB9KSxcbiAgICAgICAgICAgICAgICAgICAgYW5pbWF0ZSg3NTAsIHN0eWxlKHtvcGFjaXR5OiAxfSkpXG4gICAgICAgICAgICAgICAgXSksXG4gICAgICAgICAgICAgICAgdHJhbnNpdGlvbignOmxlYXZlJywgWyAgIC8vIDpsZWF2ZSBpcyBhbGlhcyB0byAnKiA9PiB2b2lkJ1xuICAgICAgICAgICAgICAgICAgICBhbmltYXRlKDc1MCwgc3R5bGUoe29wYWNpdHk6IDB9KSlcbiAgICAgICAgICAgICAgICBdKVxuICAgICAgICAgICAgXSlcbiAgICBdXG59KVxuZXhwb3J0IGNsYXNzIER5bmFtaWNGb3JtUHJvcGVydHlDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgICBASW5wdXQoKSBwcm9wZXJ0eTogUHJvcGVydHlCYXNlPGFueT47XG4gICAgQElucHV0KCkgZm9ybTogRm9ybUdyb3VwO1xuICAgIEBJbnB1dCgpIGdhZGdldFRhZ3M6IGFueVtdOy8vdG9kbyAtIHVzZSB0byBjb250cm9sIHdoYXQgZW5kcG9pbnRzIGFyZSBkaXNwbGF5ZWRcbiAgICBlbmRQb2ludHM6IHN0cmluZ1tdID0gW107XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcblxuICAgICAgICB0aGlzLnVwZGF0ZUVuZFBvaW50TGlzdCgpO1xuICAgIH1cblxuICAgIGdldCBpc1ZhbGlkKCkge1xuXG4gICAgICAgIHJldHVybiB0aGlzLmZvcm0uY29udHJvbHNbdGhpcy5wcm9wZXJ0eS5rZXldLnZhbGlkO1xuICAgIH1cblxuICAgIHVwZGF0ZUVuZFBvaW50TGlzdCgpIHtcbiAgICAgICAgLypcbiAgICAgICAgdGhpcy5lbmRQb2ludFNlcnZpY2UuZ2V0RW5kUG9pbnRzKCkuc3Vic2NyaWJlKGRhdGEgPT4ge1xuXG4gICAgICAgICAgICB0aGlzLmVuZFBvaW50cyA9IGRhdGFbJ2VuZFBvaW50J10uc2xpY2UoKTtcblxuICAgICAgICB9KTtcbiAgICAgICAgICovXG4gICAgfVxuXG4gICAgbmdBZnRlclZpZXdJbml0KCkge1xuXG4gICAgICAgIC8vZmlsdGVyIGVuZHBvaW50cyBiYXNlZCBvbiB0aGUgZ2FkZ2V0cyB0YWdzXG5cbiAgICAgICAgbGV0IG1lID0gdGhpcztcbiAgICAgICAgbGV0IGVsaWdpYmxlRW5kcG9pbnRzID0gW107XG5cbiAgICAgICAgdGhpcy5lbmRQb2ludHMuZm9yRWFjaChmdW5jdGlvbiAocG9pbnQsIGluZGV4LCBvYmplY3QpIHtcblxuICAgICAgICAgICAgbGV0IGZvdW5kID0gZmFsc2U7XG4gICAgICAgICAgICBwb2ludFsndGFncyddLmZvckVhY2godGFnID0+IHtcblxuICAgICAgICAgICAgICAgIG1lLmdhZGdldFRhZ3MuZm9yRWFjaChfZ3QgPT4ge1xuXG4gICAgICAgICAgICAgICAgICAgIGlmIChfZ3QubmFtZS50cmltKCkudG9Mb3dlckNhc2UoKSA9PT0gdGFnLm5hbWUudHJpbSgpLnRvTG93ZXJDYXNlKCkpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGZvdW5kID0gdHJ1ZTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICB9KTtcblxuICAgICAgICAgICAgaWYgKGZvdW5kKSB7XG4gICAgICAgICAgICAgICAgZWxpZ2libGVFbmRwb2ludHMucHVzaChwb2ludCk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0pO1xuXG4gICAgICAgIHRoaXMuZW5kUG9pbnRzID0gZWxpZ2libGVFbmRwb2ludHMuc2xpY2UoKTtcblxuICAgIH1cbn1cbiJdfQ==