From 21c2cec6b89345bde7fd263fb5714affdc45d34f Mon Sep 17 00:00:00 2001
From: Aparna Karve <akarve@redhat.com>
Date: Mon, 16 Jan 2017 14:31:15 -0800
Subject: [PATCH] Tags tree component

---
 .../request-workflow.component.js             |   8 ++
 .../request-workflow/request-workflow.html    |   6 +-
 .../request-workflow/tags-tree.component.js   | 100 ++++++++++++++++++
 .../request-workflow/tags-tree.html           |  12 +++
 .../app/states/requests/details/details.html  |   2 +-
 .../states/requests/details/details.state.js  |   3 +-
 6 files changed, 127 insertions(+), 4 deletions(-)
 create mode 100644 client/app/components/request-workflow/tags-tree.component.js
 create mode 100644 client/app/components/request-workflow/tags-tree.html

diff --git a/client/app/components/request-workflow/request-workflow.component.js b/client/app/components/request-workflow/request-workflow.component.js
index 1f4f8d7e3..d8fc7150c 100644
--- a/client/app/components/request-workflow/request-workflow.component.js
+++ b/client/app/components/request-workflow/request-workflow.component.js
@@ -6,6 +6,7 @@
       bindings: {
         workflow: '=?',
         workflowClass: '=?',
+        allowedTags: '=?',
       },
       controller: requestWorkflowController,
       controllerAs: 'vm',
@@ -70,6 +71,7 @@
           break;
         case 'purpose':
           vm.customizedWorkflow.dialogs[key].panelTitle[0] = (__("Select Tags to apply"));
+          fields = purposeFields();
           break;
         case 'service':
           if(lodash.every(["Redhat", "InfraManager"], function(value, key) {
@@ -169,6 +171,12 @@
       return lodash.extend(serviceFields, serviceFieldsCommon);
     }
 
+    function purposeFields() {
+      return {
+        vmTags: { label: 'vm_tags', panel: 0, order: 0 },
+      };
+    }
+
     function fieldsLayout(tab, fields, nPanels) {
       vm.customizedWorkflow.dialogs[tab].fieldsInPanel = [];
       
diff --git a/client/app/components/request-workflow/request-workflow.html b/client/app/components/request-workflow/request-workflow.html
index 40b24170a..49c49e1c7 100644
--- a/client/app/components/request-workflow/request-workflow.html
+++ b/client/app/components/request-workflow/request-workflow.html
@@ -13,7 +13,11 @@ <h2 translate>Request Workflow Details</h2>
                   <div ng-if="field.display != 'hide'">
                     <div class="form-group">
                       <label class="control-label col-sm-1">{{ field.description }}</label>
-                      <div ng-if="field.data_type !== 'boolean'">
+                      <div ng-if="field.label === 'vm_tags'">
+                        <tags-tree class="col-md-8" allowed-tags="vm.allowedTags" vm-tags="vm.workflow.values.vm_tags"></tags-tree>
+                        <div class="col-md-8" translate>* Only a single value can be assigned from these Tag Categories</div>
+                      </div>
+                      <div ng-if="field.data_type !== 'boolean' && field.label !== 'vm_tags'">
                         {{ vm.customizedWorkflow.values[field.label] }}
                       </div>
                       <div ng-if="field.data_type === 'boolean'">
diff --git a/client/app/components/request-workflow/tags-tree.component.js b/client/app/components/request-workflow/tags-tree.component.js
new file mode 100644
index 000000000..264d398ea
--- /dev/null
+++ b/client/app/components/request-workflow/tags-tree.component.js
@@ -0,0 +1,100 @@
+(function() {
+  'use strict';
+
+  angular.module('app.components')
+    .component('tagsTree', {
+      bindings: {
+        allowedTags: '=?',
+        vmTags: '=?',
+      },
+      controller: tagsTreeController,
+      controllerAs: 'vm',
+      templateUrl: 'app/components/request-workflow/tags-tree.html',
+    });
+
+  /** @ngInject */
+  function tagsTreeController(API_BASE, lodash) {
+    var vm = this;
+    vm.customizedAllowedTags = lodash.cloneDeep(vm.allowedTags);
+    vm.$onInit = link;
+
+    vm.API_BASE = API_BASE;
+
+    function link(scope, element, attrs) {
+      angular.element('#tagsTree').treeview({
+        collapseIcon: "fa fa-angle-down",
+        data: getTreeNodes(),
+        levels: 2,
+        expandIcon: "fa fa-angle-right",
+        nodeIcon: "fa fa-folder",
+        showBorder: false,
+      });
+    }
+
+    // Private functions
+    function getTreeNodes() {
+      lodash.forEach(vm.customizedAllowedTags, function(obj, key) {
+        obj.text = obj.description + " *";
+        obj.nodes = [];
+        lodash.forEach(obj.children, function(child, key) {
+          var id = child[0];
+          child = lodash.reduce(child, function(collection, current) {
+              return lodash.extend(collection, current)
+            },  {});
+
+          child.id = id;
+          child.text = child.description;
+          delete child.description;
+          obj.nodes.push(child);
+        });
+
+        adjustVmTagMatchedNodes(obj, vm.vmTags);
+      });
+
+      lodash.remove(vm.customizedAllowedTags, function(obj) {
+        return obj.markedForDeletion === true;
+      });
+
+      return vm.customizedAllowedTags;
+    }
+
+    function adjustVmTagMatchedNodes(object, vmTags) {
+      var childIds = lodash.map(object.nodes, 'id');
+      var commonNode = lodash.intersection(childIds, vmTags);
+
+      if (commonNode.length === 0) {
+       object.markedForDeletion = true;
+      } else {
+        object.nodes = [lodash.find(object.nodes, {id: commonNode[0]})];
+      }
+    }
+
+    function onNodeExpanded(event, node) {
+      if (node.nodes) {
+        var nodeToExpand = onlyOneExpandableChild(node.nodes);
+        if (nodeToExpand) {
+          angular.element('#tagsTree').treeview('expandNode', [nodeToExpand]);
+        }
+      }
+    }
+
+    function onlyOneExpandableChild(nodes) {
+      var expandableNodeCount = 0;
+      var lastExpandableNode;
+
+      for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+        if (node.nodes) {
+          expandableNodeCount++;
+          lastExpandableNode = node;
+        }
+      }
+
+      if (expandableNodeCount === 1) {
+        return lastExpandableNode;
+      } else {
+        return null;
+      }
+    }
+  }
+})();
diff --git a/client/app/components/request-workflow/tags-tree.html b/client/app/components/request-workflow/tags-tree.html
new file mode 100644
index 000000000..3927a63de
--- /dev/null
+++ b/client/app/components/request-workflow/tags-tree.html
@@ -0,0 +1,12 @@
+<style>
+    .treeview .list-group-item {
+        cursor: pointer !important;
+    }
+    .treeview .list-group-item.node-selected {
+        background-color: #428bca !important;
+    }
+</style>
+<div>
+  <div id="tagsTree"></div>
+</div>
+
diff --git a/client/app/states/requests/details/details.html b/client/app/states/requests/details/details.html
index 5cd5154f7..1152896d8 100644
--- a/client/app/states/requests/details/details.html
+++ b/client/app/states/requests/details/details.html
@@ -113,7 +113,7 @@ <h4>{{ ::vm.request.options.long_description || vm.request.description }}</h4>
     <div class="panel-body">
       <section class="ss-details-section">
         <dialog-content ng-if="!vm.request.workflow" dialog="vm.request.provision_dialog" input-disabled="vm.editingDisabled" options="vm.request.options.dialog"></dialog-content>
-        <request-workflow workflow="vm.request.workflow" workflow_class="vm.request.v_workflow_class.instance_logger.klass"></request-workflow>
+        <request-workflow workflow="vm.request.workflow" workflow_class="vm.request.v_workflow_class.instance_logger.klass" allowed-tags="vm.request.v_allowed_tags"></request-workflow>
       </section>
     </div>
   </div>
diff --git a/client/app/states/requests/details/details.state.js b/client/app/states/requests/details/details.state.js
index 657625b63..4ec7ace7a 100644
--- a/client/app/states/requests/details/details.state.js
+++ b/client/app/states/requests/details/details.state.js
@@ -26,8 +26,7 @@
 
   /** @ngInject */
   function resolveRequest($stateParams, CollectionsApi) {
-    var options = {attributes: ['provision_dialog', 'picture', 'picture.image_href', 'workflow', 'v_workflow_class']};
-
+    var options = {attributes: ['provision_dialog', 'picture', 'picture.image_href', 'workflow', 'v_workflow_class', 'v_allowed_tags']};
     return CollectionsApi.get('requests', $stateParams.requestId, options);
   }