[MRM-1575] rewrite repositories group page

add drag&drop to add/remove repositories to/from a group.

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1244263 13f79535-47bb-0310-9956-ffa450edef68

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/repository-groups.js

@@ -42,6 +42,13 @@ $(function() {
     this.repositoryGroup=repositoryGroup;
     this.update=update;
     this.repositoryGroupsViewModel=repositoryGroupsViewModel;
+    this.availableRepositories=ko.observableArray([]);
+
+    for (var i=0;i<repositoryGroupsViewModel.managedRepositories().length;i++){
+      if ( $.inArray(repositoryGroupsViewModel.managedRepositories()[i].id(),this.repositoryGroup.repositories())<0){
+        this.availableRepositories.push(repositoryGroupsViewModel.managedRepositories()[i]);
+      }
+    }
 
     repositoryMoved=function(arg){
       $.log("repositoryMoved:"+arg.sourceIndex+" to " + arg.targetIndex);
@@ -53,7 +60,15 @@ $(function() {
       self.repositoryGroup.modified(true);
     }
     this.saveRepositoryGroup=function(repositoryGroup){
-      self.repositoryGroupsViewModel.saveRepositoryGroup(repositoryGroup);
+      if (self.update){
+        self.repositoryGroupsViewModel.saveRepositoryGroup(repositoryGroup);
+      } else {
+        $.log("addRepository group");
+      }
+    }
+
+    this.removeRepository=function(id){
+      $.log("removeRepository:"+id);
     }
   }
 
@@ -129,10 +144,28 @@ $(function() {
               mappedRepositoryGroups[i]
                   .managedRepositories(self.mapManagedRepositoriesToRepositoryGroup(mappedRepositoryGroups[i]));
               mappedRepositoryGroups[i].modified(false);
+              $.log("mappedRepositoryGroups.repositories().length:"+mappedRepositoryGroups[i].repositories().length);
             }
             mainContent.html($("#repositoryGroupsMain").tmpl());
             self.repositoryGroupsViewModel.repositoryGroups(mappedRepositoryGroups);
+            $.log("displayRepositoryGroups#applyBindings before");
             ko.applyBindings(repositoryGroupsViewModel,mainContent.find("#repository-groups-view" ).get(0));
+            $.log("displayRepositoryGroups#applyBindings after");
+
+
+            mainContent.find("#repository-groups-view-tabs").on('show', function (e) {
+              if ($(e.target).attr("href")=="#repository-groups-edit") {
+                var repositoryGroup = new RepositoryGroup();
+                var repositoryGroupViewModel=new RepositoryGroupViewModel(repositoryGroup,false,self);
+                activateRepositoryGroupEditTab();
+                ko.applyBindings(repositoryGroupViewModel,mainContent.find("#repository-groups-edit" ).get(0));
+              }
+              if ($(e.target).attr("href")=="#repository-groups-view") {
+                mainContent.find("#repository-groups-view-tabs-li-edit a").html($.i18n.prop("add"));
+                clearUserMessages();
+              }
+
+            });
 
           }
         }
@@ -141,10 +174,16 @@ $(function() {
     });
 
     this.mapManagedRepositoriesToRepositoryGroup=function(repositoryGroup){
-      var managedRepositories=[];
+      $.log("mapManagedRepositoriesToRepositoryGroup");
+      var managedRepositories=new Array();
+      if (!repositoryGroup.repositories()) {
+        repositoryGroup.repositories(new Array());
+        return managedRepositories;
+      }
       for(var i=0;i<repositoryGroup.repositories().length;i++){
         managedRepositories.push(self.repositoryGroupsViewModel.findManagedRepository(repositoryGroup.repositories()[i]));
       }
+      $.log("end mapManagedRepositoriesToRepositoryGroup");
       return managedRepositories;
     }
 

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/repository-groups.html

@@ -22,7 +22,9 @@
   </div>
   <ul id="repository-groups-view-tabs" class="nav nav-tabs">
     <li id="repository-groups-view-tabs-li-grid" class="active">
-      <a data-toggle="tab" href="#repository-groups-view" id="repository-groups-view-tabs-a-network-proxies-grid">${$.i18n.prop('repository-groups.grid.tab.title')}</a>
+      <a data-toggle="tab" href="#repository-groups-view" id="repository-groups-view-tabs-a-network-proxies-grid">
+        ${$.i18n.prop('repository-groups.grid.tab.title')}
+      </a>
     </li>
     <li id="repository-groups-view-tabs-li-edit">
       <a data-toggle="tab" href="#repository-groups-edit" id="repository-groups-view-tabs-a-edit">${$.i18n.prop('add')}</a>
@@ -30,17 +32,33 @@
 
   </ul>
   <div id="repository-groups-view-tabs-content" class="tab-content">
-    <div id="repository-groups-view" class="tab-pane active">    
-      <div id="repository-groups-table" data-bind='template:{name:"repository-groups-table-tmpl"}'>
-      </div>
-    </div>
-    <div id="repository-groups-edit" class="tab-pane active">
-      <div id="repository-groups-edit-div" data-bind='template:{name:"repository-group-edit-tmpl"}'></div>
-      <div id="repository-groups-edit-order-div"
-           data-bind="sortable: { template: 'repository-group-edit-order-tmpl',data:repositoryGroup.managedRepositories,afterMove: repositoryMoved}">
-      </div>
-    </div>
-  </div>  
+        <div id="repository-groups-view" class="tab-pane active">
+          <div id="repository-groups-table" data-bind='template:{name:"repository-groups-table-tmpl"}'>
+          </div>
+        </div>
+        <div id="repository-groups-edit" class="tab-pane">
+              <div class="row-fluid">
+                <div class="span5 dotted">
+                  <div id="repository-groups-edit-div" data-bind='template:{name:"repository-group-edit-tmpl"}'></div>
+                  <div id="repository-groups-edit-order-div" style="min-height: 80px"
+                     data-bind="sortable: { template: 'repository-group-edit-order-tmpl',data:repositoryGroup.managedRepositories,afterMove:repositoryMoved}">
+                  </div>
+                </div>
+
+                <div class="span5 dotted">
+                  <h5>${$.i18n.prop('repository.groups.available.repositories')}</h5>
+                  <br/>
+                  <div id="repository-groups-edit-available-repositories" style="min-height: 80px"
+                       data-bind="sortable: { template: 'repository-group-edit-order-tmpl',data:availableRepositories,afterMove:repositoryMoved}">
+
+                  </div>
+                </div>
+
+              </div>
+
+        </div>
+
+  </div>
 </script>
 
 <script id="repository-groups-table-tmpl" type="text/html">
@@ -123,13 +141,15 @@
 </script>
 
 <script id="repository-group-edit-order-tmpl" type="text/html">
-  <div class="well draggable-item span6">
+  <div class="well draggable-item">
     <blockquote>
       ${$data.id()}
       <br/>
       ${$data.name()}
       <br/>
-      ${window.archivaRuntimeInfo.baseUrl}/repository/${$data.id()}
+      <a href="${window.archivaRuntimeInfo.baseUrl}/repository/${$data.id()}" target="_blank">
+        ${window.archivaRuntimeInfo.baseUrl}/repository/${$data.id()}
+      </a>
       <br/>
     </blockquote>
 

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js

@@ -209,7 +209,7 @@ mapStringArray=function(data){
     if ($.isArray(data)){
       return $.map(data,function(item){
         return item;
-     });
+      });
     } else {
       return new Array(data);
     }

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout-sortable.js

@@ -110,7 +110,6 @@ ko.bindingHandlers.sortable = {
         ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
             $(element).sortable("destroy");
         });
-
         //we are wrapping the template binding
         return ko.bindingHandlers.template.init(element, function() { return templateOptions; }, allBindingsAccessor, data, context);
     },