Initial Commit

client/app/designer/file_browser/file_browser.component.js

@@ -0,0 +1,104 @@
+'use strict';
+const angular = require('angular');
+
+const uiRouter = require('angular-ui-router');
+
+import routes from './file_browser.routes';
+
+export class FileBrowserComponent {
+  /*@ngInject*/
+  constructor($scope,ansible,editor) {
+    'ngInject';
+    $scope.treeOptions = {
+      nodeChildren: "children",
+      dirSelectable: true,
+      isLeaf: function (node) {
+        return !(node.type === 'directory');
+      },
+      injectClasses: {
+        ul: "a1",
+        li: "a2",
+        liSelected: "a7",
+        iExpanded: "a3",
+        iCollapsed: "a4",
+        iLeaf: "a5",
+        label: "a6",
+        labelSelected: "a8"
+      }
+    };
+
+    $scope.editContent = false;
+    $scope.selectedFile = {showSource: true};
+
+    var loadProjectFiles = function(){
+      ansible.getProjectFiles(function(response){
+        $scope.projectFiles = response.data;
+      },function(error){
+
+      });
+    };
+
+    $scope.$on('projectLoaded',function(){
+      loadProjectFiles();
+    });
+
+    if($scope.$parent.selectedProject && $scope.$parent.selectedProject.ansibleEngine) {
+      loadProjectFiles();
+    }
+
+    /**
+     * Show selected item in the tree
+     * @param file
+     * @param parent
+     */
+    $scope.showSelected = function (file, parent) {
+
+      if (file.children) {
+        $scope.selectedFile.content = JSON.stringify(file, null, '\t');
+        $scope.docType = 'json';
+        $scope.selectedFile.tasks = null;
+        return;
+      }
+
+      var command = 'cat "' + file.path + '"';
+      $scope.showSource = true;
+      $scope.markdownContent = '';
+      $scope.docType = 'text';
+      $scope.selectedFile.content = 'Loading..';
+      $scope.selectedFile.tasks = null;
+      $scope.selectedFileName = file.name;
+      $scope.selectedFilePath = file.path;
+      $scope.parentNode = parent;
+
+      ansible.executeCommand(command,
+        function (response) {
+          console.log(response.data)
+          editor.setContentAndType(response.data, file, $scope.selectedFile);
+
+          var parentDirectory = file.path.replace(/^(.+)\/(.+)\/([^/]+)$/, "$2");
+          if (parentDirectory == 'tasks') {
+            $scope.selectedFile.tasks = YAML.parse(response.data) || [];
+          }
+
+          if (parentDirectory == 'group_vars' || parentDirectory == 'host_vars') {
+            $scope.selectedFile.docType = 'yaml';
+          }
+
+          //$scope.selectedFile.content = response.data;
+
+        }, function (response) {
+          $scope.selectedFile.content = response.data;
+
+        })
+    };
+  }
+}
+
+export default angular.module('webAppApp.file_browser', [uiRouter])
+  .config(routes)
+  .component('fileBrowser', {
+    template: require('./file_browser.html'),
+    controller: FileBrowserComponent,
+    controllerAs: 'fileBrowserCtrl'
+  })
+  .name;

client/app/designer/file_browser/file_browser.component.spec.js

@@ -0,0 +1,17 @@
+'use strict';
+
+describe('Component: FileBrowserComponent', function() {
+  // load the controller's module
+  beforeEach(module('webAppApp.file_browser'));
+
+  var FileBrowserComponent;
+
+  // Initialize the controller and a mock scope
+  beforeEach(inject(function($componentController) {
+    FileBrowserComponent = $componentController('file_browser', {});
+  }));
+
+  it('should ...', function() {
+    expect(1).to.equal(1);
+  });
+});

client/app/designer/file_browser/file_browser.html

@@ -0,0 +1,33 @@
+
+<div class="row">
+  <h3>File Browser</h3>
+  <div class="col-md-6">
+    <treecontrol ng-show="projectFiles.children" class="tree-classic"
+                 tree-model="projectFiles.children"
+                 options="treeOptions"
+                 on-selection="showSelected(node, $parentNode)"
+                 selected-node="selectedFile"
+                 filter-expression="{name: '!.git'}">
+      {{node.name}}
+    </treecontrol>
+  </div>
+
+  <div class="col-md-6">
+    <button class="btn btn-default" ng-show="selectedFile.docType == 'markdown' && !selectedFile.showSource" ng-click="selectedFile.showSource = true">
+      Show Source
+    </button>
+    <button class="btn btn-default" ng-show="selectedFile.docType == 'markdown' && selectedFile.showSource" ng-click="selectedFile.showSource = false">
+      Hide Source
+    </button>
+    <!--{{docType}}-->
+    <!--{{selectedFile.showSource}}-->
+    <div ng-show="selectedFile.showSource" ng-readonly="!editContent"
+         ui-ace="{theme:'twilight',document:selectedFile.docType,mode:selectedFile.docType,onChange:codeChanged,onLoad:aceLoaded}" ng-model="selectedFile.content">
+
+    </div>
+
+    <div ng-show="!selectedFile.showSource" btf-markdown="selectedFile.markdownContent">
+    </div>
+  </div>
+
+</div>

client/app/designer/file_browser/file_browser.routes.js

@@ -0,0 +1,10 @@
+'use strict';
+
+export default function($stateProvider) {
+  'ngInject';
+  $stateProvider
+    .state('designer.file_browser', {
+      url: '/file_browser',
+      template: '<file-browser></file-browser>'
+    });
+}