blob: 0ed81c903ffecda037da384faa5c36e97248d27a [file] [log] [blame]
(function () {
'use strict';
angular.module('xos.UITutorial')
.service('PlayCmd', function($compile, $rootScope, _, ErrorHandler){
// TODO investigate if we can load directives from an app
const components = [
{
name: 'xosTable',
template: '<xos-table config="config" data="data"></xos-table>',
scope: {
config: {
columns: [
{label: 'Name', prop: 'name'},
{label: 'Age', prop: 'age'}
]
},
data: [
{name: 'Jhon', age: 23},
{name: 'Mike', age: 24}
]
}
},
{
name: 'xosForm',
template: '<xos-form config="config" ng-model="data"></xos-form>',
scope: {
config: {
fields: {
name: {
type: 'text'
},
age: {
type: 'number'
}
},
actions: [
{
label: 'Print',
cb: (model) => {
console.log(model);
}
}
]
},
data: {name: 'Jhon', age: 23}
}
}
];
this.componentCompletion = (cmd, arg, line, done) => {
const componentsName = components.map(c => c.name);
return done(this.shell.bestMatch(arg, componentsName));
};
this.componentExec = (cmd, args, done) => {
const targetComponent = args[0];
if(!targetComponent){
return ErrorHandler.print(`Component "${targetComponent}" does not exists`, done);
}
this.attachComponent(targetComponent, done);
};
this.getComponentsDetails = (componentName, components) => {
return _.find(components, {name: componentName});
};
this.attachComponent = (targetComponent, done) => {
this.scope = $rootScope.$new();
targetComponent = this.getComponentsDetails(targetComponent, components);
angular.extend(this.scope, targetComponent.scope);
$rootScope.$emit('uiTutorial.attachScope', this.scope);
const directive = $compile(targetComponent.template)(this.scope);
const container = $('#directive-container');
container.html('');
container.append( directive );
done('Component added');
};
$rootScope.$on('uiTutorial.applyScope', (e, scope) => {
this.scope.config = scope.config;
this.scope.data = scope.data;
});
this.setup = (shell) => {
this.shell = shell;
shell.setCommandHandler('component', {
exec: this.componentExec,
completion: this.componentCompletion
});
// activate listener to enable/disable shell
$('.component-container').click((e) => {
this.shell.deactivate();
});
$('#shell-panel').click((e) => {
this.shell.activate();
});
};
});
})();