[MRM-1681] addProxy Connectors Rules screen

add all js templates.

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

4 files changed, 291 insertions, 7 deletions

diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/proxy-connectors-rules.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/proxy-connectors-rules.js
new file mode 100644
index 000000000..f28d81b20
--- /dev/null
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/proxy-connectors-rules.js
@@ -0,0 +1,159 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+define("archiva.proxy-connectors-rules",["jquery","i18n","jquery.tmpl","bootstrap","jquery.validate","knockout"
+  ,"knockout.simpleGrid","knockout.sortable","archiva.proxy-connectors"], function() {
+
+
+
+  ProxyConnectorRulesViewModel=function(proxyConnectorRules,proxyConnectors){
+    var self=this;
+    this.proxyConnectorRules=ko.observableArray(proxyConnectorRules?proxyConnectorRules:[]);
+    this.proxyConnectors=proxyConnectors;
+
+    this.displayGrid=function(){
+      var mainContent = $("#main-content");
+
+      this.gridViewModel = new ko.simpleGrid.viewModel({
+        data: self.proxyConnectorRules,
+        pageSize: 5,
+        gridUpdateCallBack: function(){
+          $("#main-content" ).find("#proxy-connectors-rules-view-tabsTable" ).find("[title]").tooltip();
+        }
+      });
+
+      ko.applyBindings(self,mainContent.find("#proxy-connectors-rules-view-tabs-view").get(0));
+
+      removeSmallSpinnerImg();
+
+
+      mainContent.find("#proxy-connectors-rules-view-tabs").on('show', function (e) {
+        $.log("on show:"+$(e.target).attr("href"));
+        if ($(e.target).attr("href")=="#proxy-connector-rules-edit") {
+          var proxyConnectorRuleViewModel = new ProxyConnectorRuleViewModel(new ProxyConnectorRule(),self,false);
+          ko.applyBindings(proxyConnectorRuleViewModel,mainContent.find("#proxy-connector-rules-edit" ).get(0));
+          activateProxyConnectorRulesEditTab();
+        }
+
+
+      });
+    }
+  }
+
+  ProxyConnectorRuleViewModel=function(proxyConnectorRule,proxyConnectorRulesViewModel,update){
+    var self=this;
+    this.proxyConnectorRule=proxyConnectorRule;
+    this.proxyConnectorRulesViewModel=proxyConnectorRulesViewModel;
+    this.availableProxyConnectors=ko.observableArray(proxyConnectorRulesViewModel.proxyConnectors);
+    this.update=update;
+
+    proxyConnectorMoved=function(arg){
+
+    }
+
+  }
+
+
+  displayProxyConnectorsRules=function(){
+    $.log("displayProxyConnectorsRules");
+    screenChange();
+    var mainContent = $("#main-content");
+    mainContent.html($("#proxyConnectorsRulesMain").tmpl());
+    mainContent.append(smallSpinnerImg());
+    loadAllProxyConnectors(function(data){
+      var proxyConnectors = mapProxyConnectors(data);
+
+        $.ajax("restServices/archivaServices/proxyConnectorRuleService/proxyConnectorRules", {
+          type: "GET",
+          dataType: 'json',
+          success: function (data){
+            var proxyConnectorRules=mapProxyConnectorRules(data);
+            var proxyConnectorRulesViewModel = new ProxyConnectorRulesViewModel(proxyConnectorRules,proxyConnectors);
+            proxyConnectorRulesViewModel.displayGrid();
+            activateProxyConnectorRulesGridTab();
+          }
+
+        });
+
+    });
+  }
+
+  ProxyConnectorRule=function(pattern,proxyConnectorRuleType,proxyConnectors){
+    //private String pattern;
+    var self=this;
+
+    this.modified=ko.observable(false);
+
+    //private String sourceRepoId;
+    this.pattern=ko.observable(pattern);
+    this.pattern.subscribe(function(newValue){
+      self.modified(true);
+    });
+
+
+    //private ProxyConnectorRuleType proxyConnectorRuleType;
+    this.proxyConnectorRuleType=ko.observable(proxyConnectorRuleType);
+    this.proxyConnectorRuleType.subscribe(function(newValue){
+      self.modified(true);
+    });
+
+    //private List<ProxyConnector> proxyConnectors;
+    this.proxyConnectors=ko.observableArray(proxyConnectors?proxyConnectors:[]);
+    this.proxyConnectors.subscribe(function(newValue){
+      self.modified(true);
+    });
+  }
+
+  mapProxyConnectorRule=function(data){
+    if (data==null){
+      return null;
+    }
+    return new ProxyConnector(data.pattern, data.proxyConnectorRuleType, mapProxyConnectors(data.proxyConnectors));
+  }
+
+  mapProxyConnectorRules=function(data){
+    var mappedProxyConnectorRules = $.map(data, function(item) {
+      return mapProxyConnectorRule(item);
+    });
+    return mappedProxyConnectorRules;
+  }
+
+
+  activateProxyConnectorRulesGridTab=function(){
+    var mainContent = $("#main-content");
+    mainContent.find("#proxy-connectors-rules-view-tabs-content div[class*='tab-pane']").removeClass("active");
+    mainContent.find("#proxy-connectors-rules-view-tabs > li").removeClass("active");
+
+    mainContent.find("#repository-groups-view").addClass("active");
+    mainContent.find("#proxy-connectors-rules-view-tabs-li-grid").addClass("active");
+    mainContent.find("#proxy-connectors-rules-view-tabs-a-edit").html($.i18n.prop("add"));
+
+  }
+
+  activateProxyConnectorRulesEditTab=function(){
+    var mainContent = $("#main-content");
+
+    mainContent.find("#proxy-connectors-rules-view-tabs-content div[class*='tab-pane']").removeClass("active");
+    mainContent.find("#proxy-connectors-rules-view-tabs > li").removeClass("active");
+
+    mainContent.find("#proxy-connector-rules-edit").addClass("active");
+    mainContent.find("#proxy-connectors-rules-view-tabs-edit").addClass("active");
+  }
+
+
+});
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 04e7f8cc0..32ad305ee 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
@@ -23,6 +23,8 @@ define("archiva.proxy-connectors",["jquery","i18n","jquery.tmpl","bootstrap","jq
                           disabled,order){
     var self=this;
 
+    this.modified=ko.observable(false);
+
     //private String sourceRepoId;
     this.sourceRepoId=ko.observable(sourceRepoId);
     this.sourceRepoId.subscribe(function(newValue){
@@ -83,7 +85,7 @@ define("archiva.proxy-connectors",["jquery","i18n","jquery.tmpl","bootstrap","jq
       self.modified(true);
     });
 
-    this.modified=ko.observable(false);
+
 
     this.updatePolicyEntry=function(key,value){
       $.log("updatePolicyEntry:"+key+":"+value);
@@ -275,7 +277,7 @@ define("archiva.proxy-connectors",["jquery","i18n","jquery.tmpl","bootstrap","jq
     var self=this;
     this.proxyConnectors=ko.observableArray([]);
     this.proxyConnectors.subscribe(function(newValue){
-      $.log("ProxyConnectorsViewModel#proxyConnectors modified")
+      $.log("ProxyConnectorsViewModel#proxyConnectors modified");
       self.proxyConnectors().sort(function(a,b){
         if ( a.sourceRepoId()== b.sourceRepoId()) return a.order() - b.order();
         return (a.sourceRepoId() > b.sourceRepoId())? -1:1;
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js
index 5a4fd09a7..7d45b2f44 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js
@@ -66,8 +66,10 @@ define("knockout.simpleGrid",["jquery","utils","i18n","knockout"], function() {
 
             // Render the page links
             var pageLinksContainer = $("#"+allBindings.pageLinksId).get(0);
-            ko.renderTemplate(pageLinksTemplateName, viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode")
-              .subscribe(viewModel.pageLinksUpdateCallBack?viewModel.pageLinksUpdateCallBack:function(){});
+            var renderedTemplate = ko.renderTemplate(pageLinksTemplateName, viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode");
+            if (renderedTemplate.subscribe){
+              renderedTemplate.subscribe(viewModel.pageLinksUpdateCallBack?viewModel.pageLinksUpdateCallBack:function(){});
+            }
             if (viewModel.pageLinksUpdateCallBack) viewModel.pageLinksUpdateCallBack();
           }
       };
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/archiva/repositories.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/archiva/repositories.html
index 74e7d383e..ec153d777 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/archiva/repositories.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/archiva/repositories.html
@@ -1068,14 +1068,14 @@
         </div>
         <div id="repository-groups-edit" class="tab-pane">
               <div class="row-fluid">
-                <div class="span5 dotted">
+                <div class="span6 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">
+                <div class="span6 dotted">
                   <h5>${$.i18n.prop('repository.groups.available.repositories')}</h5>
                   <br/>
                   <div id="repository-groups-edit-available-repositories" style="min-height: 80px"
@@ -1157,7 +1157,7 @@
           <div class="control-group">
             <label class="control-label" for="id">${$.i18n.prop('id')}</label>
             <div class="controls">
-              <input type="text" class="xlarge required" id="id" name="id" size="15"
+              <input type="text" class="input-medium required" id="id" name="id" size="15"
                    data-bind="value: repositoryGroup.id,css:{'uneditable-input': update},readonly:update"/>
             </div>
           </div>
@@ -1219,4 +1219,125 @@
       <button class="btn btn-warning" onclick="doMerge(encodeURIComponent('${sourceRepository}'),encodeURIComponent('${targetRepository}'),true);" type="button">${$.i18n.prop('managedrepository.merge.domerge.skipconflicts')}</button>
     {{/if}}
   </div>
+</script>
+
+
+<script id="proxyConnectorsRulesMain" type="text/html">
+    <div class="page-header">
+      <h2>${$.i18n.prop('proxy-connector-rules.list')}</h2>
+    </div>
+
+    <ul id="proxy-connectors-rules-view-tabs" class="nav nav-tabs">
+      <li id="proxy-connectors-rules-view-tabs-li-grid" class="active">
+        <a data-toggle="tab" href="#proxy-connector-rules-view" id="proxy-connectors-rules-view-tabs-a-network-proxies-grid">${$.i18n.prop('proxy-connectors-rules.grid.tab.title')}</a>
+      </li>
+      <li id="proxy-connectors-rules-view-tabs-li-edit">
+        <a data-toggle="tab" href="#proxy-connector-rules-edit" id="proxy-connectors-rules-view-tabs-a-edit">${$.i18n.prop('add')}</a>
+      </li>
+    </ul>
+    <div id="proxy-connectors-rules-view-tabs-content" class="tab-content">
+      <div id="proxy-connectors-rules-view-tabs-view" class="tab-pane active">
+        <div id="proxy-connectors-rules-view-tabs-bulk-save-btn" data-bind='template:{name:"proxy-connectors-rules-view-tabs-bulk-save-tmpl"}'></div>
+        <table class="table table-striped table-bordered" id="proxy-connectors-rules-view-tabsTable"
+               data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko-proxy-connectors-rules-grid',pageLinksId:'proxy-connectors-rules-pagination'">
+        </table>
+        <div id="proxy-connectors-rules-view-tabs-pagination"></div>
+      </div>
+      <div id="proxy-connector-rules-edit" class="tab-pane">
+          <div class="row-fluid">
+            <div class="span6 dotted">
+              <div id="proxy-connectors-rules-edit-div" data-bind='template:{name:"proxy-connectors-rules-edit-tmpl"}'></div>
+              <div id="proxy-connectors-rules-edit-order-div" style="min-height: 80px"
+                 data-bind="sortable: { template: 'proxy-connectors-rules-edit-proxy-connectors-tmpl',data:proxyConnectorRule.proxyConnectors,afterMove:proxyConnectorMoved}">
+              </div>
+            </div>
+
+            <div class="span6 dotted">
+              <h5>${$.i18n.prop('proxy-connector-rules.available.proxyConnectors')}</h5>
+              <br/>
+              <div id="proxy-connectors-rules-available-repositories" style="min-height: 80px"
+                   data-bind="sortable: { template: 'proxy-connectors-rules-edit-proxy-connectors-tmpl',data:availableProxyConnectors,afterMove:proxyConnectorMoved}">
+
+              </div>
+            </div>
+
+          </div>
+      </div>
+
+    </div>
+
+</script>
+
+<script id='ko-proxy-connectors-rules-grid' type='text/html'>
+    <thead>
+      <tr>
+        <th title="${$.i18n.prop('proxy-connector-rules.grid.pattern.title')}">
+          ${$.i18n.prop('proxy-connector-rules.grid.pattern.header')}
+        </th>
+        <th title="${$.i18n.prop('proxy-connector-rules.grid.type.title')}">
+          ${$.i18n.prop('proxy-connector-rules.grid.type.header')}
+        </th>
+        <th>${$.i18n.prop('proxy-connector-rules.grid.proxy-connectors.header')}</th>
+        <th>${$.i18n.prop('edit')}</th>
+        <th>${$.i18n.prop('delete')}</th>
+        <th>${$.i18n.prop('save')}</th>
+      </tr>
+    </thead>
+    <tbody>
+    {{each(i, row) itemsOnCurrentPage()}}
+    <tr data-bind="css:{ 'modified': row.modified()}">
+      <td>${row.pattern()}</td>
+      <td>${row.proxyConnectorRuleType()}</td>
+      <td>connector</td>
+      <td>edit</td>
+      <td>delete</td>
+      <td>save</td>
+    </tr>
+    {{/each}}
+    </tbody>
+</script>
+
+<script id="proxy-connectors-rules-view-tabs-bulk-save-tmpl" type="text/html">
+
+</script>
+
+<script id="proxy-connectors-rules-edit-tmpl" type="text/html">
+    <div class="row-fluid">
+    {{if update}}
+      <div class="dotted span8">
+        <blockquote>
+          ${proxyConnectorRule.pattern()}
+        </blockquote>
+      </div>
+    {{else}}
+      <div class="dotted span8">
+        <form id="proxy-connector-rule-edit-form" class="well">
+          <fieldset id="proxy-connector-rule-edit-fieldset">
+            <div class="control-group">
+              <label class="control-label" for="id">${$.i18n.prop('proxy-connector-rule.pattern')}</label>
+              <div class="controls">
+                <input type="text" class="input-large required" id="proxy-connector-rule-pattern" name="id" size="15"
+                     data-bind="value:proxyConnectorRule.pattern,css:{'uneditable-input': update},readonly:update"/>
+              </div>
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    {{/if}}
+    {{if proxyConnectorRule.modified()}}
+      <div class="span3">
+        <a href="#" class="btn btn-warning" data-bind="click: function(){saveRepositoryGroup(repositoryGroup)}">${$.i18n.prop('save')}</a>
+      </div>
+      <br/>
+    {{/if}}
+    </div>
+</script>
+
+<script id="proxy-connectors-rules-edit-proxy-connectors-tmpl" type="text/html">
+    <div class="well draggable-item">
+      <blockquote>
+        ${$data.sourceRepoId()} <-> ${$data.targetRepoId()}
+      </blockquote>
+
+    </div>
 </script>
\ No newline at end of file