Added possiblity to extend the dashboard programmatically
Change-Id: Ibf2c2f7e6d51e6f5a661021f3f9f4b15c9cbefa1
diff --git a/src/app/core/side-panel/side-panel.service.ts b/src/app/core/side-panel/side-panel.service.ts
index 06dfef9..a7471f5 100644
--- a/src/app/core/side-panel/side-panel.service.ts
+++ b/src/app/core/side-panel/side-panel.service.ts
@@ -1,5 +1,5 @@
import * as $ from 'jquery';
-import * as _ from 'lodash';
+import {IXosComponentInjectorService} from '../services/helpers/component-injector.helpers';
export interface IXosSidePanelService {
open(): void;
@@ -8,14 +8,15 @@
}
export class XosSidePanel implements IXosSidePanelService {
- static $inject = ['$rootScope', '$compile'];
+ static $inject = ['$rootScope', '$compile', 'XosComponentInjector'];
public sidePanelElName = 'xos-side-panel';
public sidePanelElClass = '.xos-side-panel';
public sidePanelEl: JQuery;
constructor (
private $rootScope: ng.IRootScopeService,
- private $compile: ng.ICompileService
+ private $compile: ng.ICompileService,
+ private XosComponentInjector: IXosComponentInjectorService
) {
this.sidePanelEl = $(`${this.sidePanelElName} > ${this.sidePanelElClass}`);
}
@@ -29,36 +30,7 @@
};
public injectComponent(componentName: string, attributes?: any, transclude?: string) {
- const componentTagName = this.camelToSnakeCase(componentName);
- let scope = this.$rootScope.$new();
- let attr: string = '';
-
- // NOTE add a flag to keep the loaded compoenents?
- this.removeInjectedComponents();
-
- if (angular.isDefined(attributes) && angular.isObject(attributes)) {
- attr = this.stringifyAttributes(attributes);
- scope = angular.merge(scope, attributes);
- }
-
- const componentTag = `<${componentTagName} ${attr}>${transclude || ''}</${componentTagName}>`;
- const element = this.$compile(componentTag)(scope);
- this.sidePanelEl.find('#side-panel-container').append(element);
+ this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
this.open();
}
-
- public removeInjectedComponents() {
- this.sidePanelEl.find('#side-panel-container').html('');
- }
-
- private stringifyAttributes(attributes: any): string {
- return _.reduce(Object.keys(attributes), (string: string, a: string) => {
- string += `${a}="${a}"`;
- return string;
- }, '');
- }
-
- private camelToSnakeCase(name: string): string {
- return name.split(/(?=[A-Z])/).map(w => w.toLowerCase()).join('-');
- };
}