From 7c19035cc12ac28168500292f403c03f51864110 Mon Sep 17 00:00:00 2001
From: Mumshad Mannambeth <mmumshad@gmail.com>
Date: Sat, 8 Jul 2017 14:33:33 -0400
Subject: [PATCH] Change $scope to use project controller object. Use ansible
 projects folder location from config file

---
 client/app/project/project.component.js | 128 ++++++++++++++----------
 client/app/project/project.html         |  40 ++++----
 2 files changed, 93 insertions(+), 75 deletions(-)

diff --git a/client/app/project/project.component.js b/client/app/project/project.component.js
index 1f0aa21..0c3875f 100644
--- a/client/app/project/project.component.js
+++ b/client/app/project/project.component.js
@@ -7,11 +7,14 @@ import routes from './project.routes';
 
 export class ProjectComponent {
   /*@ngInject*/
-  constructor($scope, Projects, Auth) {
+  constructor($scope, Projects, Auth, appConfig) {
     'ngInject';
     var default_project_folder = '/opt/ehc-ansible-projects/';
 
-    $scope.blankProject = {
+    var projectCtrl = this;
+
+    // Define a blank project object
+    projectCtrl.blankProject = {
       name: '',
       ansibleEngine: {
         ansibleHost: '',
@@ -23,94 +26,109 @@ export class ProjectComponent {
       }
     };
 
-    $scope.msg = "";
-    $scope.msg_status = "";
+    projectCtrl.msg = "";
+    projectCtrl.msg_status = "";
 
-    $scope.newProject = $scope.blankProject;
+    projectCtrl.newProject = projectCtrl.blankProject;
 
-    $scope.editProjectFlag = false;
+    projectCtrl.editProjectFlag = false;
 
-    $scope.saveButtonIcon = "fa-save";
+    projectCtrl.saveButtonIcon = "fa-save";
 
-    $scope.showProjectForm = function(){
-      $scope.showCreateProject = true;
-      $scope.editProjectFlag = false;
-      $scope.newProject = $scope.blankProject;
-      $scope.msg = "";
-      $scope.msg_status = "";
+    /**
+     * Show Project Form when the create button is clicked
+     */
+    projectCtrl.showProjectForm = function(){
+      projectCtrl.showCreateProject = true;
+      projectCtrl.editProjectFlag = false;
+      projectCtrl.newProject = projectCtrl.blankProject;
+      projectCtrl.msg = "";
+      projectCtrl.msg_status = "";
     };
 
-
-    $scope.hideProjectForm = function(){
-      $scope.showCreateProject = false;
-      $scope.editProjectFlag = false;
-      $scope.newProject = $scope.blankProject;
-      $scope.msg = "";
-      $scope.msg_status = "";
+    /**
+     * Hide Project form when cancel button is clicked
+     */
+    projectCtrl.hideProjectForm = function(){
+      projectCtrl.showCreateProject = false;
+      projectCtrl.editProjectFlag = false;
+      projectCtrl.newProject = projectCtrl.blankProject;
+      projectCtrl.msg = "";
+      projectCtrl.msg_status = "";
     };
 
-    $scope.getProjects = function(){
-      console.log("Getting Projects");
-      $scope.projects = Projects.resource.query(function(){
-        console.log($scope.projects);
+    /**
+     * Get list of all projects
+     */
+    projectCtrl.getProjects = function(){
+      projectCtrl.projects = Projects.resource.query(function(){
+        console.log(projectCtrl.projects);
       })
 
     };
 
-    $scope.getProjects();
-
-    $scope.deleteProject = function(project){
+    /**
+     * Delete Project
+     * @param project
+     */
+    projectCtrl.deleteProject = function(project){
       project.$remove(function(){
-        $scope.getProjects();
+        projectCtrl.getProjects();
       })
     };
 
-    $scope.editProject = function(project){
-      $scope.showCreateProject = true;
-      $scope.editProjectFlag = true;
-      $scope.newProject = project;
+    /**
+     * Edit Project
+     * @param project
+     */
+    projectCtrl.editProject = function(project){
+      projectCtrl.showCreateProject = true;
+      projectCtrl.editProjectFlag = true;
+      projectCtrl.newProject = project;
     };
 
-    $scope.createProject = function(){
-      $scope.newProject.creationTime = new Date();
-      //$scope.newProject.ansibleEngine.projectFolder = default_project_folder + '/' + $scope.newProject.name
-      //$scope.newProject.ansibleEngine.customModules = $scope.newProject.ansibleEngine.projectFolder + '/library'
+    /**
+     * Create a new Project
+     */
+    projectCtrl.createProject = function(){
+      projectCtrl.newProject.creationTime = new Date();
 
       var projectSavedCallback = function(){
-        $scope.showCreateProject = false;
-        $scope.msg = "Project Saved Successfully";
-        $scope.msg_status = "success";
-        $scope.getProjects();
-        $scope.saveButtonIcon = 'fa-save';
+        projectCtrl.showCreateProject = false;
+        projectCtrl.msg = "Project Saved Successfully";
+        projectCtrl.msg_status = "success";
+        projectCtrl.getProjects();
+        projectCtrl.saveButtonIcon = 'fa-save';
       };
 
       var projectSaveFailedCallback = function(errResponse){
-        $scope.msg = errResponse.data;
-        $scope.msg_status = "danger";
-        $scope.saveButtonIcon = 'fa-save';
+        projectCtrl.msg = errResponse.data;
+        projectCtrl.msg_status = "danger";
+        projectCtrl.saveButtonIcon = 'fa-save';
       };
 
-      $scope.saveButtonIcon = 'fa-spinner fa-spin';
+      projectCtrl.saveButtonIcon = 'fa-spinner fa-spin';
 
-      if($scope.editProjectFlag){
-        $scope.editProjectFlag = false;
-        $scope.newProject.$update(projectSavedCallback,projectSaveFailedCallback);
+      if(projectCtrl.editProjectFlag){
+        projectCtrl.editProjectFlag = false;
+        projectCtrl.newProject.$update(projectSavedCallback,projectSaveFailedCallback);
       }else{
-        Projects.resource.save($scope.newProject,projectSavedCallback,projectSaveFailedCallback);
+        Projects.resource.save(projectCtrl.newProject,projectSavedCallback,projectSaveFailedCallback);
       }
 
-
     };
 
-    $scope.$watch('newProject.name', function(newValue, oldValue){
-      console.log("Changed");
+    // Watch for project name change in create mode and update project and custom modules folder dynamically
+    $scope.$watch('projectCtrl.newProject.name', function(newValue, oldValue){
       // Project folders cannot be edited once created
       var user_id = Auth.getCurrentUserSync()._id;
-      if($scope.editProjectFlag)return;
-      $scope.newProject.ansibleEngine.projectFolder = '/opt/ansible-projects/' + user_id + '_' + newValue;
-      $scope.newProject.ansibleEngine.customModules = '/opt/ansible-projects/' + user_id + '_' + newValue + '/library';
+      if(projectCtrl.editProjectFlag)return;
+      projectCtrl.newProject.ansibleEngine.projectFolder = appConfig.paths.ansible_projects + '/' + user_id + '_' + newValue;
+      projectCtrl.newProject.ansibleEngine.customModules = appConfig.paths.ansible_projects + '/' + user_id + '_' + newValue + '/library';
     });
 
+    projectCtrl.getProjects();
+
   }
 }
 
diff --git a/client/app/project/project.html b/client/app/project/project.html
index 96c90c0..52f2298 100644
--- a/client/app/project/project.html
+++ b/client/app/project/project.html
@@ -2,48 +2,48 @@
   <div class="row" style="margin-top:50px;">
     <div class="col-md-6">
 
-      <button class="btn btn-default" ng-click="showProjectForm()">Create <span class="fa fa-plus"></span></button>
+      <button class="btn btn-default" ng-click="projectCtrl.showProjectForm()">Create <span class="fa fa-plus"></span></button>
 
-      <form ng-show="showCreateProject">
+      <form ng-show="projectCtrl.showCreateProject">
         <p class="form-group">
           <label>Project Name</label>
-          <input type="text" ng-model="newProject.name" class="form-control" ng-required="true">
+          <input type="text" ng-model="projectCtrl.newProject.name" class="form-control" ng-required="true">
         </p>
 
         <p class="form-group">
           <label>Ansible Host</label>
-          <input type="text" ng-model="newProject.ansibleEngine.ansibleHost" class="form-control">
+          <input type="text" ng-model="projectCtrl.newProject.ansibleEngine.ansibleHost" class="form-control">
         <div class="hint">Ansible Controller system - A linux system with Ansible Installed on it. Required if you want to execute Ansible playbooks. You could skip this and still generate playbooks but not test them.</div>
         </p>
 
-        <p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
+        <p class="form-group" ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost">
           <label>User</label>
-          <input type="text" ng-model="newProject.ansibleEngine.ansibleHostUser" class="form-control">
+          <input type="text" ng-model="projectCtrl.newProject.ansibleEngine.ansibleHostUser" class="form-control">
         </p>
 
-        <p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
+        <p class="form-group" ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost">
           <label>Host Password</label>
-          <input type="password" ng-model="newProject.ansibleEngine.ansibleHostPassword" class="form-control">
+          <input type="password" ng-model="projectCtrl.newProject.ansibleEngine.ansibleHostPassword" class="form-control">
         </p>
 
-        <p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
+        <p class="form-group" ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost">
           <label>Project Folder</label>
-          <input ng-readonly="editProjectFlag" ng-model="newProject.ansibleEngine.projectFolder" class="form-control">
-          <div ng-if="newProject.ansibleEngine.ansibleHost" class="hint">A directory path on the Ansible Host to store files of this project </div>
+          <input ng-readonly="projectCtrl.editProjectFlag" ng-model="projectCtrl.newProject.ansibleEngine.projectFolder" class="form-control">
+          <div ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost" class="hint">A directory path on the Ansible Host to store files of this project </div>
         </p>
 
-        <p class="form-group" ng-if="newProject.ansibleEngine.ansibleHost">
+        <p class="form-group" ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost">
           <label>Custom Modules Location</label>
-          <input ng-readonly="editProjectFlag" ng-model="newProject.ansibleEngine.customModules" class="form-control">
-          <div ng-if="newProject.ansibleEngine.ansibleHost" class="hint">A directory path on the Ansible Host to store custom modules for this project </div>
+          <input ng-readonly="projectCtrl.editProjectFlag" ng-model="projectCtrl.newProject.ansibleEngine.customModules" class="form-control">
+          <div ng-if="projectCtrl.newProject.ansibleEngine.ansibleHost" class="hint">A directory path on the Ansible Host to store custom modules for this project </div>
         </p>
 
-        <button class="btn btn-success" ng-disabled="!newProject.name" ng-click="createProject()"> Save <span class="fa {{saveButtonIcon}}"></span></button>
-        <button class="btn btn-warning" ng-click="hideProjectForm()"> Cancel <span class="fa fa-times"></span></button>
+        <button class="btn btn-success" ng-disabled="!projectCtrl.newProject.name" ng-click="projectCtrl.createProject()"> Save <span class="fa {{projectCtrl.saveButtonIcon}}"></span></button>
+        <button class="btn btn-warning" ng-click="projectCtrl.hideProjectForm()"> Cancel <span class="fa fa-times"></span></button>
 
       </form>
 
-      <div ng-if="msg" class="alert alert-{{msg_status}}">{{msg}}</div>
+      <div ng-if="msg" class="alert alert-{{ projectCtrl.msg_status }}">{{ projectCtrl.msg }}</div>
 
     </div>
   </div>
@@ -63,7 +63,7 @@
       </tr>
       </thead>
       <tbody>
-      <tr ng-repeat="project in projects | orderBy : 'executionTime'">
+      <tr ng-repeat="project in projectCtrl.projects | orderBy : 'executionTime'">
         <td>{{project.name}}</td>
         <td>{{project.ansibleEngine.ansibleHost}}</td>
         <td>{{project.ansibleVersion}}</td>
@@ -71,8 +71,8 @@
         <td>{{project.creationTime | date : 'medium'}}</td>
         <td>
           <div class="btn-group">
-            <label class="btn btn-default" ng-click="editProject(project)" ><span class="fa fa-edit"></span></label>
-            <label class="btn btn-danger" ng-click="deleteProject(project)" confirm="Are you sure you want to delete?" ><span class="fa fa-trash"></span></label>
+            <label class="btn btn-default" ng-click="projectCtrl.editProject(project)" ><span class="fa fa-edit"></span></label>
+            <label class="btn btn-danger" ng-click="projectCtrl.deleteProject(project)" confirm="Are you sure you want to delete?" ><span class="fa fa-trash"></span></label>
           </div>
         </td>
       </tr>