ngx-dynamic-dashboard
Version:
an dashboard lib for angular 10
94 lines • 13.5 kB
JavaScript
/**
* Created by jayhamilton on 1/24/17.
*/
import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';
import { AddGadgetService } from './service';
import { FacetTagProcessor } from '../facet/facet-tag-processor';
/**
* Message Modal - clasable modal with message
*
* Selector message-modal
*
* Methods
* popMessageModal - display a message modal for a sepcified duration
* showMessageModal - show the message modal
* hideMessageModal - hide the message modal
*/
export class AddGadgetComponent {
constructor(_addGadgetService) {
this._addGadgetService = _addGadgetService;
this.addGadgetEvent = new EventEmitter();
this.gadgetObjectList = [];
this.gadgetObjectTitleList = [];
this.placeHolderText = 'Begin typing gadget name';
this.layoutColumnOneWidth = 'six';
this.layoutColumnTwoWidth = 'ten';
this.listHeader = 'Gadgets';
this.color = 'white';
this.typeAheadIsInMenu = false;
this.getObjectList();
}
actionHandler(actionItem, actionName) {
this.addGadgetEvent.emit(actionItem);
this.hideMessageModal();
}
showMessageModal(icon, header, message) {
this.modalicon = icon;
this.modalheader = header;
this.modalmessage = message;
this.messageModal.modal('show');
}
showComponentLibraryModal(header) {
this.modalheader = header;
this.messageModal.modal('show');
}
hideMessageModal() {
this.modalicon = '';
this.modalheader = '';
this.modalmessage = '';
this.messageModal.modal('hide');
}
ngAfterViewInit() {
this.messageModal = jQuery(this.messagemodalRef.nativeElement);
}
getObjectList() {
this._addGadgetService.getGadgetLibrary().subscribe(data => {
this.gadgetObjectList.length = 0;
const me = this;
data.library.forEach(function (item) {
me.gadgetObjectList.push(item);
me.gadgetObjectTitleList.push(item.name);
});
const facetTagProcess = new FacetTagProcessor(this.gadgetObjectList);
this.facetTags = facetTagProcess.getFacetTags();
});
}
}
AddGadgetComponent.decorators = [
{ type: Component, args: [{
selector: 'dashboard-add-gadget-modal',
moduleId: module.id,
template: "<div #messagemodal_tag class=\"ui long modal\">\n <div class=\"header\">\n <h2>{{modalheader}}</h2>\n </div>\n\n <dashboard-data-list\n\n [facetTags]=\"facetTags\"\n [layoutColumnOneWidth]=\"layoutColumnOneWidth\"\n [layoutColumnTwoWidth]=\"layoutColumnTwoWidth\"\n [listHeader]=\"listHeader\"\n [objectList]=\"gadgetObjectList\"\n [objectTitleList]=\"gadgetObjectTitleList\"\n [placeHolderText]=\"placeHolderText\"\n [typeAheadIsInMenu]=\"typeAheadIsInMenu\">\n\n <ng-template let-item=\"$implicit\">\n\n <div [@showHideAnimation] class=\"ui segment\" style=\"background-color:white;\">\n <div class=\"ui large middle aligned divided list\">\n <div class=\"item\">\n <div class=\"right floated content\">\n <!-- todo : if there are more than one action display a button with\n vertical ellipse and implement onHover to show all action buttons\n -->\n <a (click)=\"actionHandler(item, item.actions[0].name)\"\n *ngIf=\"item.actions.length == 1\"\n color=\"primary\"\n mat-raised-button routerLink=\".\">\n {{item.actions[0].name}}\n </a>\n </div>\n <img class=\"ui image\" src=\"{{item.icon}}\">\n <div class=\"content\">\n <div class=\"header\">{{item.name}}</div>\n {{item.description}}\n </div>\n </div>\n </div>\n <div class=\"ui bottom attached\">\n <button *ngFor=\"let tag of item.tags\" class=\"ui basic gray compact button\">{{tag.name}}\n </button>\n </div>\n </div>\n\n </ng-template>\n\n </dashboard-data-list>\n\n <div class=\"actions\">\n <div class=\"ui approve button\">Close</div>\n </div>\n</div>\n",
animations: [
trigger('showHideAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate(750, style({ opacity: 1 }))
]),
transition(':leave', [
animate(750, style({ opacity: 0 }))
])
])
],
styles: [".modal{background-color:#f7f7f7}"]
},] }
];
AddGadgetComponent.ctorParameters = () => [
{ type: AddGadgetService }
];
AddGadgetComponent.propDecorators = {
addGadgetEvent: [{ type: Output }],
messagemodalRef: [{ type: ViewChild, args: ['messagemodal_tag', { static: true },] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWRkLWdhZGdldC1jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiL1VzZXJzL2JlbmxpL3dvcmtzcGFjZXMvbmd4LWR5bmFtaWMtZGFzaGJvYXJkLWZyYW1ld29yay9wcm9qZWN0cy9uZ3gtZHluYW1pYy1kYXNoYm9hcmQvc3JjLyIsInNvdXJjZXMiOlsiZGFzaGJvYXJkL2FkZC1nYWRnZXQvYWRkLWdhZGdldC1jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxPQUFPLEVBQWdCLFNBQVMsRUFBYyxZQUFZLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUVwRyxPQUFPLEVBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFFeEUsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sV0FBVyxDQUFDO0FBRTNDLE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBSS9EOzs7Ozs7Ozs7R0FTRztBQXFCSCxNQUFNLE9BQU8sa0JBQWtCO0lBd0IzQixZQUFvQixpQkFBbUM7UUFBbkMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFrQjtRQXRCN0MsbUJBQWMsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVqRSxxQkFBZ0IsR0FBVSxFQUFFLENBQUM7UUFDN0IsMEJBQXFCLEdBQWEsRUFBRSxDQUFDO1FBQ3JDLG9CQUFlLEdBQUcsMEJBQTBCLENBQUM7UUFDN0MseUJBQW9CLEdBQUcsS0FBSyxDQUFDO1FBQzdCLHlCQUFvQixHQUFHLEtBQUssQ0FBQztRQUM3QixlQUFVLEdBQUcsU0FBUyxDQUFDO1FBR3ZCLFVBQUssR0FBRyxPQUFPLENBQUM7UUFFaEIsc0JBQWlCLEdBQUcsS0FBSyxDQUFDO1FBWXRCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQsYUFBYSxDQUFDLFVBQVUsRUFBRSxVQUFVO1FBQ2hDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBRTVCLENBQUM7SUFHRCxnQkFBZ0IsQ0FBQyxJQUFZLEVBQUUsTUFBYyxFQUFFLE9BQWU7UUFDMUQsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdEIsSUFBSSxDQUFDLFdBQVcsR0FBRyxNQUFNLENBQUM7UUFDMUIsSUFBSSxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUM7UUFDNUIsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFcEMsQ0FBQztJQUVELHlCQUF5QixDQUFDLE1BQWM7UUFFcEMsSUFBSSxDQUFDLFdBQVcsR0FBRyxNQUFNLENBQUM7UUFDMUIsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELGdCQUFnQjtRQUNaLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxXQUFXLEdBQUcsRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxZQUFZLEdBQUcsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxDQUFDLFlBQVksR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNuRSxDQUFDO0lBRUQsYUFBYTtRQUVULElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUN2RCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztZQUNqQyxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUM7WUFDaEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsVUFBVSxJQUFJO2dCQUUvQixFQUFFLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUMvQixFQUFFLENBQUMscUJBQXFCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUM3QyxDQUFDLENBQUMsQ0FBQztZQUNILE1BQU0sZUFBZSxHQUFHLElBQUksaUJBQWlCLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7WUFDckUsSUFBSSxDQUFDLFNBQVMsR0FBRyxlQUFlLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDcEQsQ0FBQyxDQUFDLENBQUM7SUFFUCxDQUFDOzs7WUEvRkosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSw0QkFBNEI7Z0JBQ3RDLFFBQVEsRUFBRSxNQUFNLENBQUMsRUFBRTtnQkFDbkIscXFFQUEwQjtnQkFFMUIsVUFBVSxFQUFFO29CQUNSLE9BQU8sQ0FDSCxtQkFBbUIsRUFDbkI7d0JBQ0ksVUFBVSxDQUFDLFFBQVEsRUFBRTs0QkFDakIsS0FBSyxDQUFDLEVBQUMsT0FBTyxFQUFFLENBQUMsRUFBQyxDQUFDOzRCQUNuQixPQUFPLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFDLE9BQU8sRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDO3lCQUNwQyxDQUFDO3dCQUNGLFVBQVUsQ0FBQyxRQUFRLEVBQUU7NEJBQ2pCLE9BQU8sQ0FBQyxHQUFHLEVBQUUsS0FBSyxDQUFDLEVBQUMsT0FBTyxFQUFFLENBQUMsRUFBQyxDQUFDLENBQUM7eUJBQ3BDLENBQUM7cUJBQ0wsQ0FBQztpQkFDVDs7YUFFSjs7O1lBbkNPLGdCQUFnQjs7OzZCQXNDbkIsTUFBTTs4QkFrQk4sU0FBUyxTQUFDLGtCQUFrQixFQUFFLEVBQUMsTUFBTSxFQUFFLElBQUksRUFBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ3JlYXRlZCBieSBqYXloYW1pbHRvbiBvbiAxLzI0LzE3LlxuICovXG5pbXBvcnQge0FmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBPdXRwdXQsIFZpZXdDaGlsZH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7YW5pbWF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXJ9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuXG5pbXBvcnQge0FkZEdhZGdldFNlcnZpY2V9IGZyb20gJy4vc2VydmljZSc7XG5pbXBvcnQge0ZhY2V0fSBmcm9tICcuLi9mYWNldC9mYWNldC1tb2RlbCc7XG5pbXBvcnQge0ZhY2V0VGFnUHJvY2Vzc29yfSBmcm9tICcuLi9mYWNldC9mYWNldC10YWctcHJvY2Vzc29yJztcblxuZGVjbGFyZSB2YXIgalF1ZXJ5OiBhbnk7XG5cbi8qKlxuICogTWVzc2FnZSBNb2RhbCAtIGNsYXNhYmxlIG1vZGFsIHdpdGggbWVzc2FnZVxuICpcbiAqIFNlbGVjdG9yIG1lc3NhZ2UtbW9kYWxcbiAqXG4gKiBNZXRob2RzXG4gKiAgICAgIHBvcE1lc3NhZ2VNb2RhbCAtIGRpc3BsYXkgYSBtZXNzYWdlIG1vZGFsIGZvciBhIHNlcGNpZmllZCBkdXJhdGlvblxuICogICAgICBzaG93TWVzc2FnZU1vZGFsIC0gc2hvdyB0aGUgbWVzc2FnZSBtb2RhbFxuICogICAgICBoaWRlTWVzc2FnZU1vZGFsIC0gaGlkZSB0aGUgbWVzc2FnZSBtb2RhbFxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2Rhc2hib2FyZC1hZGQtZ2FkZ2V0LW1vZGFsJyxcbiAgICBtb2R1bGVJZDogbW9kdWxlLmlkLFxuICAgIHRlbXBsYXRlVXJsOiAnLi92aWV3Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3N0eWxlcy5jc3MnXSxcbiAgICBhbmltYXRpb25zOiBbXG4gICAgICAgIHRyaWdnZXIoXG4gICAgICAgICAgICAnc2hvd0hpZGVBbmltYXRpb24nLFxuICAgICAgICAgICAgW1xuICAgICAgICAgICAgICAgIHRyYW5zaXRpb24oJzplbnRlcicsIFsgICAvLyA6ZW50ZXIgaXMgYWxpYXMgdG8gJ3ZvaWQgPT4gKidcbiAgICAgICAgICAgICAgICAgICAgc3R5bGUoe29wYWNpdHk6IDB9KSxcbiAgICAgICAgICAgICAgICAgICAgYW5pbWF0ZSg3NTAsIHN0eWxlKHtvcGFjaXR5OiAxfSkpXG4gICAgICAgICAgICAgICAgXSksXG4gICAgICAgICAgICAgICAgdHJhbnNpdGlvbignOmxlYXZlJywgWyAgIC8vIDpsZWF2ZSBpcyBhbGlhcyB0byAnKiA9PiB2b2lkJ1xuICAgICAgICAgICAgICAgICAgICBhbmltYXRlKDc1MCwgc3R5bGUoe29wYWNpdHk6IDB9KSlcbiAgICAgICAgICAgICAgICBdKVxuICAgICAgICAgICAgXSlcbiAgICBdXG5cbn0pXG5leHBvcnQgY2xhc3MgQWRkR2FkZ2V0Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG5cbiAgICBAT3V0cHV0KCkgYWRkR2FkZ2V0RXZlbnQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgZ2FkZ2V0T2JqZWN0TGlzdDogYW55W10gPSBbXTtcbiAgICBnYWRnZXRPYmplY3RUaXRsZUxpc3Q6IHN0cmluZ1tdID0gW107XG4gICAgcGxhY2VIb2xkZXJUZXh0ID0gJ0JlZ2luIHR5cGluZyBnYWRnZXQgbmFtZSc7XG4gICAgbGF5b3V0Q29sdW1uT25lV2lkdGggPSAnc2l4JztcbiAgICBsYXlvdXRDb2x1bW5Ud29XaWR0aCA9ICd0ZW4nO1xuICAgIGxpc3RIZWFkZXIgPSAnR2FkZ2V0cyc7XG4gICAgZmFjZXRUYWdzOiBBcnJheTxGYWNldD47XG5cbiAgICBjb2xvciA9ICd3aGl0ZSc7XG5cbiAgICB0eXBlQWhlYWRJc0luTWVudSA9IGZhbHNlO1xuXG4gICAgbW9kYWxpY29uOiBzdHJpbmc7XG4gICAgbW9kYWxoZWFkZXI6IHN0cmluZztcbiAgICBtb2RhbG1lc3NhZ2U6IHN0cmluZztcblxuICAgIEBWaWV3Q2hpbGQoJ21lc3NhZ2Vtb2RhbF90YWcnLCB7c3RhdGljOiB0cnVlfSkgbWVzc2FnZW1vZGFsUmVmOiBFbGVtZW50UmVmO1xuXG4gICAgbWVzc2FnZU1vZGFsOiBhbnk7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9hZGRHYWRnZXRTZXJ2aWNlOiBBZGRHYWRnZXRTZXJ2aWNlKSB7XG5cbiAgICAgICAgdGhpcy5nZXRPYmplY3RMaXN0KCk7XG4gICAgfVxuXG4gICAgYWN0aW9uSGFuZGxlcihhY3Rpb25JdGVtLCBhY3Rpb25OYW1lKSB7XG4gICAgICAgIHRoaXMuYWRkR2FkZ2V0RXZlbnQuZW1pdChhY3Rpb25JdGVtKTtcbiAgICAgICAgdGhpcy5oaWRlTWVzc2FnZU1vZGFsKCk7XG5cbiAgICB9XG5cblxuICAgIHNob3dNZXNzYWdlTW9kYWwoaWNvbjogc3RyaW5nLCBoZWFkZXI6IHN0cmluZywgbWVzc2FnZTogc3RyaW5nKSB7XG4gICAgICAgIHRoaXMubW9kYWxpY29uID0gaWNvbjtcbiAgICAgICAgdGhpcy5tb2RhbGhlYWRlciA9IGhlYWRlcjtcbiAgICAgICAgdGhpcy5tb2RhbG1lc3NhZ2UgPSBtZXNzYWdlO1xuICAgICAgICB0aGlzLm1lc3NhZ2VNb2RhbC5tb2RhbCgnc2hvdycpO1xuXG4gICAgfVxuXG4gICAgc2hvd0NvbXBvbmVudExpYnJhcnlNb2RhbChoZWFkZXI6IHN0cmluZykge1xuXG4gICAgICAgIHRoaXMubW9kYWxoZWFkZXIgPSBoZWFkZXI7XG4gICAgICAgIHRoaXMubWVzc2FnZU1vZGFsLm1vZGFsKCdzaG93Jyk7XG4gICAgfVxuXG4gICAgaGlkZU1lc3NhZ2VNb2RhbCgpIHtcbiAgICAgICAgdGhpcy5tb2RhbGljb24gPSAnJztcbiAgICAgICAgdGhpcy5tb2RhbGhlYWRlciA9ICcnO1xuICAgICAgICB0aGlzLm1vZGFsbWVzc2FnZSA9ICcnO1xuICAgICAgICB0aGlzLm1lc3NhZ2VNb2RhbC5tb2RhbCgnaGlkZScpO1xuICAgIH1cblxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICAgICAgdGhpcy5tZXNzYWdlTW9kYWwgPSBqUXVlcnkodGhpcy5tZXNzYWdlbW9kYWxSZWYubmF0aXZlRWxlbWVudCk7XG4gICAgfVxuXG4gICAgZ2V0T2JqZWN0TGlzdCgpIHtcblxuICAgICAgICB0aGlzLl9hZGRHYWRnZXRTZXJ2aWNlLmdldEdhZGdldExpYnJhcnkoKS5zdWJzY3JpYmUoZGF0YSA9PiB7XG4gICAgICAgICAgICB0aGlzLmdhZGdldE9iamVjdExpc3QubGVuZ3RoID0gMDtcbiAgICAgICAgICAgIGNvbnN0IG1lID0gdGhpcztcbiAgICAgICAgICAgIGRhdGEubGlicmFyeS5mb3JFYWNoKGZ1bmN0aW9uIChpdGVtKSB7XG5cbiAgICAgICAgICAgICAgICBtZS5nYWRnZXRPYmplY3RMaXN0LnB1c2goaXRlbSk7XG4gICAgICAgICAgICAgICAgbWUuZ2FkZ2V0T2JqZWN0VGl0bGVMaXN0LnB1c2goaXRlbS5uYW1lKTtcbiAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgY29uc3QgZmFjZXRUYWdQcm9jZXNzID0gbmV3IEZhY2V0VGFnUHJvY2Vzc29yKHRoaXMuZ2FkZ2V0T2JqZWN0TGlzdCk7XG4gICAgICAgICAgICB0aGlzLmZhY2V0VGFncyA9IGZhY2V0VGFnUHJvY2Vzcy5nZXRGYWNldFRhZ3MoKTtcbiAgICAgICAgfSk7XG5cbiAgICB9XG59XG4iXX0=