updates for UI file structure, continuous updates for detail page

static/ng/resources/js/components/details/details.config.js

@@ -3,6 +3,29 @@
   'use strict';
   
   angular
-    .module('harbor.details');
+    .module('harbor.details')
+    .config(routeConfig);
+  
+  function routeConfig($routeProvider) {
+    $routeProvider
+      .when('/repositories', {
+        templateUrl: '/static/ng/resources/js/layout/repository/repository.controller.html',
+        controller: 'RepositoryController',
+        controllerAs: 'vm'
+       })
+      .when('/users', {
+        templateUrl: '/static/ng/resources/js/layout/user/user.controller.html',
+        controller: 'UserController',
+        controllerAs: 'vm'
+      })
+      .when('/logs', {
+        templateUrl: '/static/ng/resources/js/layout/log/log.controller.html',
+        controller: 'LogController',
+        controllerAs: 'vm'
+      })
+      .otherwise({
+        redirectTo: '/'
+      });
+  }
   
 })();

static/ng/resources/js/components/details/retrieve-projects.directive.html

@@ -11,7 +11,7 @@
         <div class="project-list pane-container">
           <ul class="list-group">
             <li class="list-group-item" ng-repeat="item in vm.projects" ng-click="vm.selectItem(item)">
-    			    <span ng-show="item.id == vm.selectedId" class="glyphicon glyphicon-ok project-selected"></span> <a href="#">//item.name//</a>
+    			    <span ng-show="item.id == vm.selectedId" class="glyphicon glyphicon-ok project-selected"></span> <a href="javascript:void(0);">//item.name//</a>
     			  </li>	
           </ul>
         </div>

static/ng/resources/js/components/details/switch-pane-projects.directive.html

@@ -1,5 +1,5 @@
 <div class="switch-pane-projects" ng-switch="vm.open">
-  <a href="#" ng-click="vm.switchPane()">//vm.projectName//</a>
+  <a href="javascript:void(0);" ng-click="vm.switchPane()">//vm.projectName//</a>
   <span ng-switch-default class="glyphicon glyphicon-triangle-right" style="font-size: 12px;"></span>
   <span ng-switch-when="true" class="glyphicon glyphicon-triangle-bottom" style="font-size: 12px;"></span>
 </div>

static/ng/resources/js/components/details/switch-pane-projects.directive.js

@@ -18,7 +18,7 @@
       }else{
         vm.open = true;
       }
- 
+ console.log(vm.open);
     }
   }
   

static/ng/resources/js/components/log/list-log.directive.html

@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="logs">
+<div class="tab-pane" id="logs">
   <div class="col-xs-12 col-md-12 each-tab-pane">
     <div class="form-inline">
       <div class="input-group">

static/ng/resources/js/components/repository/list-repository.directive.html

@@ -1,8 +1,8 @@
-<div role="tabpanel" class="tab-pane active" id="repositories">
+<div class="tab-pane active" id="repositories">
   <div class="col-xs-12 col-md-12 each-tab-pane">
     <div class="form-inline">
       <div class="input-group">
-        <input type="text" class="form-control" placeholder="" size="30">
+        <input type="text" class="form-control" placeholder="" value="//vm.info//" size="30">
         <span class="input-group-btn">
           <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
         </span>

static/ng/resources/js/components/repository/list-repository.directive.js

@@ -3,7 +3,7 @@
   
   angular
     .module('harbor.repository')
-    .directive('listRepository', listRepository);
+    .directive('listRepository', listRepository);   
     
   ListRepositoryController.$inject = ['ListRepositoryService'];
   
@@ -16,6 +16,9 @@
       restrict: 'E',
       templateUrl: '/static/ng/resources/js/components/repository/list-repository.directive.html',
       replace: true,
+      scope: {
+        info: '='
+      },
       controller: ListRepositoryController,
       controllerAs: 'vm',
       bindToController: true

static/ng/resources/js/components/user/list-user.directive.html

@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="users">
+<div class="tab-pane" id="users">
   <div class="col-xs-12 col-md-12 each-tab-pane">
     <div class="form-inline">
       <div class="input-group">

static/ng/resources/js/harbor.module.js

@@ -3,6 +3,10 @@
   angular
     .module('harbor.app', [
       'ngRoute',
+      'harbor.layout.navigation',
+      'harbor.layout.repository',
+      'harbor.layout.user',
+      'harbor.layout.log',
       'harbor.services.user',
       'harbor.services.repository',
       'harbor.session',

static/ng/resources/js/layout/log/log.controller.html

@@ -0,0 +1 @@
+<list-log></list-log>

static/ng/resources/js/layout/log/log.controller.js

@@ -0,0 +1,13 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.log')
+    .controller('LogController', LogController);
+    
+  function LogController() {
+    
+  }
+  
+})();

static/ng/resources/js/layout/log/log.module.js

@@ -1,8 +1,8 @@
 (function() {
-
+  
   'use strict';
   
   angular
-    .module('harbor.header');
+    .module('harbor.layout.log', []);
   
 })();

static/ng/resources/js/layout/navigation-details.directive.html

@@ -1,5 +0,0 @@
-<ul class="switch-pane-tabs" role="tablist">
-  <li><a ng-click="vm.closePane()" role="presentation" href="#repositories"  aria-controls="repositories" role="tab" data-toggle="tab">Repositories</a><span class="gutter">|</span></li>
-  <li><a ng-click="vm.closePane()" role="presentation" href="#users" aria-controls="users" role="tab" data-toggle="tab">Users</a><span class="gutter">|</span></li>
-  <li><a ng-click="vm.closePane()" role="presentation" href="#logs" aria-controls="logs" role="tab" data-toggle="tab">Logs</a></li>
-</ul>

static/ng/resources/js/layout/navigation-tab.directive.html

@@ -1,4 +0,0 @@
-<ul class="nav-custom">
-  <li><a href="/ng/dashboard">Dashboard</a></li>
-  <li><a href="/ng/project">Project</a></li>          
-</ul>

static/ng/resources/js/layout/navigation-tab.directive.js

@@ -1,62 +0,0 @@
-(function() {
-
-  'use strict';
-
-  angular
-    .module('harbor.app')
-    .directive('navigationTab', navigationTab);
-  
-  NavigationTabController.$inject = ['$window'];
-    
-  function NavigationTabController($window) {
-    var vm = this;
-    vm.location = $window.location.pathname;
-    vm.closePane = closePane;
-    function closePane() {
-      vm.visible = false;
-    }
-  }
-  
-  function navigationTab() {
-    var directive = {
-      restrict: 'E',
-      templateUrl: getTemplateUrl,
-      link: link,
-      scope: {
-        templateUrl: "@",
-        visible: "="
-      },
-      replace: true,
-      controller: NavigationTabController,
-      controllerAs: 'vm',
-      bindToController: true
-    }
-    
-    return directive;
-    
-    function getTemplateUrl(element, attrs) {
-      return '/static/ng/resources/js/layout/'+ attrs.templateUrl;
-    }
-    
-    function link(scope, element, attrs, ctrl) {
-     
-      if (attrs.templateUrl.indexOf("navigation-tab") >= 0) {
-        element.find('a[href$="' + ctrl.location + '"]').addClass('active');
-      }
-    
-      if (attrs.templateUrl.indexOf("navigation-details") >= 0) {
-        element.find('a:first').addClass('active');
-      }
-      
-      element.on('click', click);
-      
-      function click(event) {
-        element.find('a').removeClass('active');
-        $(event.target).not('span').addClass('active');
-      }
-     
-    }
-   
-  }
-  
-})();

static/ng/resources/js/layout/navigation/navigation-details.directive.html

@@ -0,0 +1,5 @@
+<ul class="switch-pane-tabs" role="tablist">
+  <li><a tag="repositories" ng-click="vm.clickTab()" href="/ng/repository#/repositories">Repositories</a><span class="gutter">|</span></li>
+  <li><a tag="users" ng-click="vm.clickTab()" href="/ng/repository#/users">Users</a><span class="gutter">|</span></li>
+  <li><a tag="logs" ng-click="vm.clickTab()" href="/ng/repository#/logs">Logs</a></li>
+</ul>

static/ng/resources/js/layout/navigation/navigation-details.directive.js

@@ -0,0 +1,64 @@
+(function() {
+
+  'use strict';
+
+  angular
+    .module('harbor.layout.navigation')
+    .directive('navigationDetails', navigationDetails);
+  
+  NavigationDetailsController.$inject = ['$location', '$scope'];
+  
+  function NavigationDetailsController($location, $scope) {
+    var vm = this;    
+    vm.clickTab = clickTab;    
+    vm.url = $location.url();
+    
+    if(vm.url == "/") {
+      $location.url('/repositories');
+    }
+     
+    function clickTab() { 
+      vm.visible = false;  
+      vm.url = $location.url();   
+    }
+ 
+  }
+  
+  function navigationDetails() {
+    var directive = {
+      restrict: 'E',
+      templateUrl: '/static/ng/resources/js/layout/navigation/navigation-details.directive.html',
+      link: link,
+      scope: {
+        visible: "="
+      },
+      replace: true,
+      controller: NavigationDetailsController,
+      controllerAs: 'vm',
+      bindToController: true
+    }
+    
+    return directive;
+    
+    function link(scope, element, attrs, ctrl) {
+      
+      var visited = ctrl.url;
+     
+      if(visited == "/") {
+        element.find('a:first').addClass('active');
+      }else{
+        element.find('a[href$="' + visited + '"]').addClass('active');
+      }
+            
+      element.on('click', click);
+      
+      function click(event) {
+        element.find('a').removeClass('active');
+        $(event.target).not('span').addClass('active');
+      }
+     
+    }
+   
+  }
+  
+})();

static/ng/resources/js/layout/navigation/navigation-header.directive.html

@@ -0,0 +1,4 @@
+<ul class="nav-custom">
+  <li><a tag="dashboard" href="/ng/dashboard">Dashboard</a></li>
+  <li><a tag="project" href="/ng/project">Project</a></li>          
+</ul>

static/ng/resources/js/layout/navigation/navigation-header.directive.js

@@ -0,0 +1,50 @@
+(function() {
+
+  'use strict';
+
+  angular
+    .module('harbor.layout.navigation')
+    .directive('navigationHeader', navigationHeader);
+  
+  NavigationHeaderController.$inject = ['$window'];
+    
+  function NavigationHeaderController($window) {
+    var vm = this;
+    vm.url = $window.location.pathname;
+  }
+  
+  function navigationHeader() {
+    var directive = {
+      restrict: 'E',
+      templateUrl: '/static/ng/resources/js/layout/navigation/navigation-header.directive.html',
+      link: link,
+      replace: true,
+      controller: NavigationHeaderController,
+      controllerAs: 'vm',
+      bindToController: true
+    }
+    
+    return directive;
+   
+    
+    function link(scope, element, attrs, ctrl) {
+     
+      element.find('a').removeClass('active');
+      
+      var visited = ctrl.url;
+      if (visited != "/") {
+         element.find('a[href="' + visited + '"]').addClass('active'); 
+      }
+      
+      element.on('click', click);
+      
+      function click(event) {
+        element.find('a').removeClass('active');
+        $(event.target).not('span').addClass('active');
+      }
+     
+    }
+   
+  }
+  
+})();

static/ng/resources/js/layout/navigation/navigation.module.js

@@ -0,0 +1,8 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.navigation', []);
+  
+})();

static/ng/resources/js/layout/repository/repository.controller.html

@@ -0,0 +1 @@
+<list-repository info="vm.info"></list-repository>

static/ng/resources/js/layout/repository/repository.controller.js

@@ -0,0 +1,14 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.repository')
+    .controller('RepositoryController', RepositoryController);
+  
+  function RepositoryController() {
+    var vm = this;
+    vm.info = "repository";
+  }
+  
+})();

static/ng/resources/js/layout/repository/repository.module.js

@@ -0,0 +1,8 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.repository', []);
+  
+})();

static/ng/resources/js/layout/user/user.controller.html

@@ -0,0 +1 @@
+<list-user></list-user>

static/ng/resources/js/layout/user/user.controller.js

@@ -0,0 +1,13 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.user')
+    .controller('UserController', UserController);
+    
+  function UserController() {
+    
+  }
+  
+})();

static/ng/resources/js/layout/user/user.module.js

@@ -0,0 +1,7 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.user', []);  
+})();

views/ng/layout.htm

@@ -2,7 +2,7 @@
 <html>
   <head>
     {{.HeaderInclude}}
-	  <title>{{.Title}}</title>
+	  <title>{{.Title}}</title>  
   </head>
   <body ng-app="harbor.app">
     {{.HeaderContent}}

views/ng/repository.htm

@@ -6,14 +6,14 @@
   		    <h4 class="page-header">My Projects<span class="gutter">|</span><a href="#" class="title-color">Public Projects</a></h4>
   		    <div class="switch-pane">
             <switch-pane-projects open="vm.open" project-name="myproject"></switch-pane-projects>
-            <navigation-tab template-url="navigation-details.directive.html" visible="vm.open"></navigation-tab>
+            <span>
+              <navigation-details visible="vm.open"></navigation-details>
+            </span>
   		    </div>
           <retrieve-projects visible="vm.open"></retrieve-projects>
           <!-- Tab panes -->
   		    <div class="tab-content">
-            <list-repository></list-repository>
+           <ng-view></ng-view>
-            <list-user></list-user>
-            <list-log></list-log>     
           </div>
         </div>
       </div>

views/ng/sections/headerContent.htm

@@ -35,7 +35,7 @@
     </ul-->
 	  <ul class="nav navbar-nav navbar-right">
 		  <li>
-		    <navigation-tab template-url="navigation-tab.directive.html" visible="vm.open"></navigation-tab>
+		    <navigation-header></navigation-header>
 		  </li>
 	      <li>
 	        <form class="navbar-form pull-right" role="search">

views/ng/sections/headerInclude.htm

@@ -29,7 +29,18 @@
 <script src="/static/ng/resources/js/harbor.initialize.js"></script>
 <script src="/static/ng/resources/js/harbor.constants.js"></script>
 
-<script src="/static/ng/resources/js/layout/navigation-tab.directive.js"></script>
+<script src="/static/ng/resources/js/layout/navigation/navigation.module.js"></script>
+<script src="/static/ng/resources/js/layout/navigation/navigation-header.directive.js"></script>
+<script src="/static/ng/resources/js/layout/navigation/navigation-details.directive.js"></script>
+
+<script src="/static/ng/resources/js/layout/repository/repository.module.js"></script>
+<script src="/static/ng/resources/js/layout/repository/repository.controller.js"></script>
+
+<script src="/static/ng/resources/js/layout/user/user.module.js"></script>
+<script src="/static/ng/resources/js/layout/user/user.controller.js"></script>
+
+<script src="/static/ng/resources/js/layout/log/log.module.js"></script>
+<script src="/static/ng/resources/js/layout/log/log.controller.js"></script>
 
 <script src="/static/ng/resources/js/session/session.module.js"></script>
 <script src="/static/ng/resources/js/session/session.current-user.js"></script>
@@ -47,6 +58,8 @@
 <script src="/static/ng/resources/js/components/header/header.module.js"></script>
 
 <script src="/static/ng/resources/js/components/details/details.module.js"></script>
+<script src="/static/ng/resources/js/components/details/details.config.js"></script>
+
 <script src="/static/ng/resources/js/components/details/switch-pane-projects.directive.js"></script>
 <script src="/static/ng/resources/js/components/details/retrieve-projects.directive.js"></script>