From d448207b2b38189c24a8a51e0f7665b75b4661a3 Mon Sep 17 00:00:00 2001
From: Xinni Ge <xinni.ge1990@gmail.com>
Date: Mon, 25 Jun 2018 15:19:11 +0900
Subject: [PATCH] Group resource icons by project

Change-Id: I1266a931feff7bb969f0ac752a62cbe4e47f863f
Story: 2002668
Task: 22485
---
 .../templates/template_generator/index.html   | 23 ++++++++++++++-----
 .../template_generator/css/hotgen.scss        | 11 +++++++++
 .../js/components/icons.controller.js         | 19 ++++++++++++++-
 .../js/components/icons.controller.spec.js    |  3 +++
 4 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/heat_dashboard/content/template_generator/templates/template_generator/index.html b/heat_dashboard/content/template_generator/templates/template_generator/index.html
index 875e7d9b..93d8a441 100644
--- a/heat_dashboard/content/template_generator/templates/template_generator/index.html
+++ b/heat_dashboard/content/template_generator/templates/template_generator/index.html
@@ -77,16 +77,27 @@
             </div>
         </div>
 
-        <div class="row table_action">
+        <div class="row">
 
             <span flex></span>
 
             <!-- Icon Drag sidebar -->
-            <div class="col-sm-11" style="text-align:center" ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.IconController">
-               <div draggable ng-repeat="(reskey, resobj) in resource_types" class="os-resource" draggable="true" id="{$ reskey $}" ng-if="admin || !resource_admin[reskey]">
-                   <md-tooltip md-direction="top" style="font-size:12px !important;">{$ resobj.name $}</md-tooltip>
-                   <md-icon style="height: 36px; width: 36px;" md-svg-src="{$ basePath $}js/resources/{$ reskey|lowercase $}/{$ reskey|lowercase $}.svg"></md-icon>
-               </div>
+            <div class="col-sm-10" ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.IconController" >
+                <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="Icon Group Nav">
+                  <md-nav-item md-nav-click="showIcon()" ng-repeat="(level, level_item) in project_types" name="{$ level $}">
+                    {$ level $}
+                  </md-nav-item>
+                </md-nav-bar>
+                <div class="navbar-content">
+                    <div ng-repeat="(level, level_item) in project_types" >
+                      <div ng-show="level == currentNavItem">
+                        <div draggable ng-repeat="(reskey, resobj) in level_item" class="os-resource" draggable="true" id="{$ reskey $}" ng-if="admin || !resource_admin[reskey]">
+                            <md-tooltip md-direction="top" style="font-size:12px !important;">{$ resobj.name $}</md-tooltip>
+                            <md-icon style="height: 36px; width: 36px;" md-svg-src="{$ basePath $}js/resources/{$ reskey|lowercase $}/{$ reskey|lowercase $}.svg"></md-icon>
+                        </div>
+                      </div>
+                    </div>
+                </div>
             </div>
             <!-- End Drag sidebar -->
         </div>
diff --git a/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/css/hotgen.scss b/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/css/hotgen.scss
index e1361345..c9c24e28 100644
--- a/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/css/hotgen.scss
+++ b/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/css/hotgen.scss
@@ -169,3 +169,14 @@ md-icon.spinner{
     overflow: auto;
     max-height: 500px;
 }
+.md-nav-bar {
+    border-style: none;
+    border-width: 0 0;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.navbar-content{
+    margin-top: 3%;
+    text-align: center;
+}
diff --git a/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/components/icons.controller.js b/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/components/icons.controller.js
index 0314b3f2..ba7d809e 100644
--- a/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/components/icons.controller.js
+++ b/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/components/icons.controller.js
@@ -9,8 +9,25 @@
         $scope.resource_admin = hotgenGlobals.get_node_admin();
         $scope.admin = hotgenGlobals.get_resource_options().auth.admin;
         $scope.basePath = basePath;
-    }]);
 
+        $scope.project_types = {};
+        for (var idx in $scope.resource_types){
+            var pidx = idx.split('__');
+            if (!pidx || pidx.length != 3){
+            continue
+        }
+        var level = pidx[0]+'::'+pidx[1]
+        if (! (level in $scope.project_types)){
+            $scope.project_types[level] = {}
+        }
+        $scope.project_types[level][idx] = $scope.resource_types[idx];
+        }
+        $scope.currentNavItem = Object.keys($scope.project_types)[0];
+        $scope.showIcon = function(){
+//            console.log($scope.currentNavItem)
+        };
+
+    }]);
 })();
 
 
diff --git a/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/components/icons.controller.spec.js b/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/components/icons.controller.spec.js
index 7f1acef7..03579ed7 100644
--- a/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/components/icons.controller.spec.js
+++ b/heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/components/icons.controller.spec.js
@@ -9,6 +9,8 @@
 
         beforeEach(inject(function($injector){
             hotgenGlobals = $injector.get('hotgenGlobals');
+            hotgenGlobals.update_resource_icons('OS__Project__Resource', '');
+            hotgenGlobals.update_resource_icons('OS__Key', '');
         }));
 
         beforeEach(inject(function(_$controller_, $rootScope) {
@@ -33,6 +35,7 @@
             expect($scope.basePath).toBe($window.STATIC_URL + 'dashboard/project/heat_dashboard/template_generator/');
 
         }]));
+
     });
 
 })();