continuous update for repository page

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

@@ -0,0 +1,34 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.details')
+    .constant('mockupProjects', mockupProjects)
+    .controller('DetailsController', DetailsController);
+  
+  function mockupProjects() {
+    var data = [
+      { "id": 1, "name" : "myrepo"},
+      { "id": 2, "name" : "myproject"},
+      { "id": 3, "name" : "harbor_project"},
+      { "id": 4, "name" : "legacy"} 
+    ];
+    return data;
+  }  
+  
+  DetailsController.$inject = ['mockupProjects', '$scope'];
+  
+  function DetailsController(mockupProjects, $scope) {
+    var vm = this;
+    vm.isOpen = false;
+    vm.projects = mockupProjects();
+    vm.selectedProject = vm.projects[0];
+    vm.closeRetrievePane = closeRetrievePane;
+    
+    function closeRetrievePane() {
+      $scope.$broadcast('isOpen', false);
+    }
+  }
+  
+})();

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

@@ -1,4 +1,4 @@
-<div class="switch-pane-drop-down" ng-show="vm.visible">
+<div class="switch-pane-drop-down" ng-show="vm.isOpen">
   <div class="row">
     <div class="col-xs-12 col-md-12">
       <div class="panel panel-default">

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

@@ -4,32 +4,20 @@
   
   angular
     .module('harbor.details')
-    .constant('mockupProjects', mockupProjects)
     .directive('retrieveProjects', retrieveProjects);
  
-  function mockupProjects() {
+  function RetrieveProjectsController() {
-    var data = [
-      { "id": 1, "name" : "myrepo"},
-      { "id": 2, "name" : "myproject"},
-      { "id": 3, "name" : "harbor_project"},
-      { "id": 4, "name" : "legacy"} 
-    ];
-    return data;
-  }
-  
-  RetrieveProjectsController.$inject = ['mockupProjects'];
- 
-  function RetrieveProjectsController(mockupProjects) {
     var vm = this;
-    vm.projects = mockupProjects();
+   
     vm.selectItem = selectItem;
     vm.filterProjects = filterProjects;
     
     function selectItem(item) {
        vm.selectedId = item.id;
+       vm.selectedProject = item;
     }
     
-    var totalProjects = mockupProjects();
+    var totalProjects = vm.projects;
     
     function filterProjects(input) {
      
@@ -56,7 +44,9 @@
       restrict: 'E',
       templateUrl: '/static/ng/resources/js/components/details/retrieve-projects.directive.html',
       scope: {
-        'visible': '='
+        'projects': '=',
+        'isOpen': '=',
+        'selectedProject': '='
       },
       replace: true,
       controller: RetrieveProjectsController,

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

@@ -1,4 +1,4 @@
-<div class="switch-pane-projects" ng-switch="vm.open">
+<div class="switch-pane-projects" ng-switch="vm.isOpen">
   <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>

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

@@ -6,19 +6,26 @@
     .module('harbor.details')
     .directive('switchPaneProjects', switchPaneProjects);
 
-  function SwitchPaneProjectsController() {
+  SwitchPaneProjectsController.$inject = ['$scope'];
+
+  function SwitchPaneProjectsController($scope) {
     var vm = this;
-    vm.projectName = "myrepo1";
+    $scope.$on('isOpen', function(e, d){
-    vm.open = false;    
+      vm.isOpen = d;
+      console.log('vm.isOpen:' + vm.isOpen);
+    });
+    $scope.$watch('vm.selectedProject', function(current, origin) {
+      vm.projectName = current.name;  
+    });
+    
     vm.switchPane = switchPane;
     
     function switchPane() {
-      if(vm.open) {
+      if(vm.isOpen) {
-        vm.open = false;
+        vm.isOpen = false;
       }else{
-        vm.open = true;
+        vm.isOpen = true;
       }
- console.log(vm.open);
     }
   }
   
@@ -28,8 +35,8 @@
       templateUrl: '/static/ng/resources/js/components/details/switch-pane-projects.directive.html',
       replace: true,
       scope: {
-        'projectName': '@',
+        'selectedProject': '=',
-        'open': '='
+        'isOpen': '='
       },
       controller: SwitchPaneProjectsController,
       controllerAs: 'vm',

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

@@ -17,7 +17,7 @@
       templateUrl: '/static/ng/resources/js/components/repository/list-repository.directive.html',
       replace: true,
       scope: {
-        info: '='
+        'info': '='
       },
       controller: ListRepositoryController,
       controllerAs: 'vm',

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

@@ -18,7 +18,7 @@
     }
      
     function clickTab() { 
-      vm.visible = false;  
+      vm.isOpen = false;  
       vm.url = $location.url();   
     }
  
@@ -30,7 +30,7 @@
       templateUrl: '/static/ng/resources/js/layout/navigation/navigation-details.directive.html',
       link: link,
       scope: {
-        visible: "="
+        'isOpen': "="
       },
       replace: true,
       controller: NavigationDetailsController,

views/ng/repository.htm

@@ -1,18 +1,18 @@
-<div class="container-fluid container-fluid-custom">
+<div class="container-fluid container-fluid-custom" ng-controller="DetailsController as vm">
   <div class="container container-custom">
     <div class="row extend-height">
   	  <div class="col-xs-12 col-md-12 extend-height">
   	    <div class="section"> 
   		    <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>
+            <switch-pane-projects is-open="vm.open" selected-project="vm.selectedProject"></switch-pane-projects>
             <span> 
-              <navigation-details visible="vm.open"></navigation-details>
+              <navigation-details is-open="vm.open"></navigation-details>
             </span>
   		    </div>
-          <retrieve-projects visible="vm.open"></retrieve-projects>
+          <retrieve-projects is-open="vm.open" projects="vm.projects" selected-project="vm.selectedProject"></retrieve-projects>
           <!-- Tab panes -->
-  		    <div class="tab-content">
+  		    <div class="tab-content" ng-click="vm.closeRetrievePane()">
            <ng-view></ng-view>
           </div>
         </div>

views/ng/sections/headerInclude.htm

@@ -6,13 +6,16 @@
 
 
 <!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">-->
+<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
 <!-- Optional theme -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
+<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">-->
+<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
 
 <!-- Latest compiled and minified JavaScript -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>-->
+<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
 <link rel="stylesheet" href="/static/ng/resources/css/header.css">
 <link rel="stylesheet" href="/static/ng/resources/css/footer.css">
@@ -59,6 +62,7 @@
 
 <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/details.controller.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>