views/ngXosViews/UITutorial/src/js/playCmd.js

(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();
      });
    };

    
  });
})();