From 075c26bf739368f8d347f7eb3954348f1b79f511 Mon Sep 17 00:00:00 2001
From: Olivier Lamy <olamy@apache.org>
Date: Mon, 13 Feb 2012 13:54:39 +0000
Subject: [PATCH] [MRM-1576] rewrite proxies connector page order with
 drag&drop

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1243511 13f79535-47bb-0310-9956-ffa450edef68
---
 .../src/main/webapp/index.html                |  1 +
 .../webapp/js/archiva/proxy-connectors.js     | 59 +++++++++++++++++--
 .../archiva/templates/proxy-connectors.html   | 26 +++++++-
 3 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
index e3766a62e..ae5e8d7b1 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/index.html
@@ -89,6 +89,7 @@ $.ajax(
            .script(buildLoadJsUrl("redback/redback-tmpl.js")).wait()
            .script(buildLoadJsUrl("bootstrap.js"))
            .script(buildLoadJsUrl("knockout.simpleGrid.js"))
+           .script(buildLoadJsUrl("knockout-sortable.js"))
            //.script("knockout.mapping-latest.debug.js")
            .script(buildLoadJsUrl("redback/user.js")).wait()
            .script(buildLoadJsUrl("redback/users.js")).wait()
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/proxy-connectors.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/proxy-connectors.js
index d1c2d312a..92422f32f 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/proxy-connectors.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/proxy-connectors.js
@@ -269,6 +269,7 @@ $(function() {
     this.remoteRepositories=ko.observableArray([]);
     this.networkProxies=ko.observableArray([]);
 
+
     this.bulkSave=function(){
       return getModifiedProxyConnectors().length>0;
     }
@@ -389,6 +390,25 @@ $(function() {
       return null;
     }
 
+    orderChangeAware=function(proxyConnector){
+      return findProxyConnectorsWithSourceId(proxyConnector).length>1;
+    }
+
+    findProxyConnectorsWithSourceId=function(proxyConnector){
+      return $.grep(self.proxyConnectors(),function(curProxyConnector,idx){
+                                                  return curProxyConnector.sourceRepoId()==proxyConnector.sourceRepoId();
+                                                }
+                                            );
+    }
+
+    displayOrderEdit=function(proxyConnector){
+      var proxyConnectors=findProxyConnectorsWithSourceId(proxyConnector);
+      $.log("displayOrderEdit:"+proxyConnector.sourceRepoId()+",number:"+proxyConnectors.length);
+
+      var proxyConnectorEditOrderViewModel=new ProxyConnectorEditOrderViewModel(proxyConnectors);
+      ko.applyBindings(proxyConnectorEditOrderViewModel,$("#main-content #proxy-connector-edit-order").get(0));
+      activateProxyConnectorsEditOrderTab();
+    }
 
     this.displayGrid=function(){
       this.gridViewModel = new ko.simpleGrid.viewModel({
@@ -428,6 +448,26 @@ $(function() {
 
   }
 
+  ProxyConnectorEditOrderViewModel=function(proxyConnectors,proxyConnectorsViewModel){
+    var self=this;
+    this.proxyConnectors=ko.observableArray(proxyConnectors);
+    this.proxyConnectorsViewModel=proxyConnectorsViewModel;
+
+    proxyConnectorMoved=function(arg){
+      $.log("proxyConnectorMoved:"+arg.sourceIndex+" to " + arg.targetIndex);
+      // if only 1 move just update two whereas update all with the new order
+      if (arg.targetIndex-arg.sourceIndex==1){
+        self.proxyConnectors()[arg.targetIndex].order(arg.targetIndex+1);
+        self.proxyConnectors()[arg.sourceIndex].order(arg.sourceIndex+1);
+      } else {
+        for (i=0;i<self.proxyConnectors().length;i++){
+          self.proxyConnectors()[i].order(i+1);
+        }
+      }
+    }
+
+  }
+
   displayProxyConnectors=function(){
     clearUserMessages();
     var mainContent = $("#main-content");
@@ -485,8 +525,8 @@ $(function() {
 
   activateProxyConnectorsGridTab=function(){
     var mainContent = $("#main-content");
-    mainContent.find("#proxy-connectors-edit").removeClass("active");
-    mainContent.find("#proxy-connectors-view-tabs-li-edit").removeClass("active");
+    mainContent.find("#proxy-connectors-view-tabs-content div[class*='tab-pane']").removeClass("active");
+    mainContent.find("#proxy-connectors-view-tabs li").removeClass("active");
 
     mainContent.find("#proxy-connectors-view").addClass("active");
     mainContent.find("#proxy-connectors-view-tabs-li-grid").addClass("active");
@@ -496,11 +536,22 @@ $(function() {
 
   activateProxyConnectorsEditTab=function(){
     var mainContent = $("#main-content");
+
+    mainContent.find("#proxy-connectors-view-tabs-content div[class*='tab-pane']").removeClass("active");
+    mainContent.find("#proxy-connectors-view-tabs li").removeClass("active");
+
     mainContent.find("#proxy-connectors-edit").addClass("active");
     mainContent.find("#proxy-connectors-view-tabs-li-edit").addClass("active");
+  }
+
+  activateProxyConnectorsEditOrderTab=function(){
+    var mainContent = $("#main-content");
+
+    mainContent.find("#proxy-connectors-view-tabs-content div[class*='tab-pane']").removeClass("active");
+    mainContent.find("#proxy-connectors-view-tabs li").removeClass("active");
 
-    mainContent.find("#proxy-connectors-view").removeClass("active");
-    mainContent.find("#proxy-connectors-view-tabs-li-grid").removeClass("active");
+    mainContent.find("#proxy-connector-edit-order").addClass("active");
+    mainContent.find("#proxy-connectors-view-tabs-li-edit-order").addClass("active");
   }
 
   mapProxyConnector=function(data){
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/proxy-connectors.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/proxy-connectors.html
index eadc3bec6..051073d01 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/proxy-connectors.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/proxy-connectors.html
@@ -28,6 +28,9 @@
     <li id="proxy-connectors-view-tabs-li-edit">
       <a data-toggle="tab" href="#proxy-connectors-edit" id="proxy-connectors-view-tabs-a-edit">${$.i18n.prop('add')}</a>
     </li>
+    <li id="proxy-connectors-view-tabs-li-edit-order">
+      <a data-toggle="tab" href="#proxy-connectors-edit-order" id="proxy-connectors-view-tabs-a-edit-order">${$.i18n.prop('proxy-connectors.grid.tab.edit.order')}</a>
+    </li>
   </ul>
   <div id="proxy-connectors-view-tabs-content" class="tab-content">
     <div id="proxy-connectors-view" class="tab-pane active">
@@ -38,6 +41,11 @@
       <div id="proxy-connectorsPagination"></div>
     </div>
     <div id="proxy-connectors-edit" class="tab-pane"></div>
+    <div id="proxy-connector-edit-order" class="tab-pane">
+      <ul id="proxy-connector-edit-order-div"
+         data-bind="sortable: { template: 'proxy-connector-edit-order-tmpl', data: proxyConnectors,afterMove: proxyConnectorMoved}">
+      </ul>
+    </div>
   </div>
 
 </script>
@@ -55,13 +63,14 @@
         <th>${$.i18n.prop('edit')}</th>
         <th>${$.i18n.prop('delete')}</th>
         <th>${$.i18n.prop('save')}</th>
+        <th>${$.i18n.prop('proxy-connectors.grid.header.order')}</th>
       </tr>
     </thead>
     <tbody>
     {{each(i, row) itemsOnCurrentPage()}}
     <tr data-bind="css:{ 'modified': row.modified()}">
       <td>${row.sourceRepoId()}</td>
-      <td>${row.targetRepoId()}-${row.order()}</td>
+      <td>${row.targetRepoId()}</td>
       <td><img src="images/utilities-system-monitor.png" id="proxy-connectors-grid-remoterepo-settings-edit-${row.sourceRepoId()}-${row.targetRepoId()}"
                data-original-title="${$.i18n.prop('proxy-connectors.grid.remoterepo.settings.popover.title')}"
                data-bind="event: { mouseover: function(){ showSettings(row)},}"></td>
@@ -84,6 +93,13 @@
           </a>
         {{/if}}
       </td>
+      <td>
+        {{if orderChangeAware(row)}}
+          <a href="#" class="btn btn-warning" data-bind="click: function(){ displayOrderEdit(row)}">
+              ${$.i18n.prop('proxy-connectors.order.edit')}
+          </a>
+        {{/if}}
+      </td>
     </tr>
     {{/each}}
     </tbody>
@@ -228,3 +244,11 @@
     <a data-bind="click: updateModifiedProxyConnectors" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
   {{/if}}
 </script>
+
+<script id="proxy-connector-edit-order-tmpl" type='text/html'>
+    <li>
+      <a href="#">
+        ${sourceRepoId}-${targetRepoId}-${order}
+      </a>
+    </li>
+</script>
\ No newline at end of file
-- 
2.39.5