[MRM-1578] network proxies implements table and edit form

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

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/network-proxies.js

@@ -54,7 +54,7 @@ $(function() {
     }
 
     displayGrid=function(){
-
+      activateNetworkProxiesGridTab();
     }
   }
 
@@ -63,8 +63,10 @@ $(function() {
 
     var self=this;
 
-    editNetworkProxy=function(networkProxy){
+    this.gridViewModel = null;
 
+    editNetworkProxy=function(networkProxy){
+      $("#main-content #network-proxies-edit a").html($.i18n.prop("edit"));
     }
 
     removeNetworkProxy=function(networkProxy){
@@ -74,7 +76,86 @@ $(function() {
 
 
   displayNetworkProxies=function(){
+    clearUserMessages();
+    $("#main-content").html(mediumSpinnerImg());
+    $("#main-content").html($("#networkProxiesMain").tmpl());
+    $("#main-content #network-proxies-view-tabs").tabs();
+
     var networkProxiesViewModel = new NetworkProxiesViewModel();
+
+    $("#main-content #network-proxies-view-tabs").bind('change', function (e) {
+      if ($(e.target).attr("href")=="#network-proxies-edit") {
+        var viewModel = new NetworkProxyViewModel(new NetworkProxy(),false,networkProxiesViewModel);
+        ko.applyBindings(viewModel,$("#main-content #network-proxies-edit").get(0));
+        //activateManagedRepositoryFormValidation();
+      }
+      if ($(e.target).attr("href")=="#network-proxies-view") {
+        $("#main-content #network-proxies-edit a").html($.i18n.prop("add"));
+      }
+
+    });
+
+
+
+    $.ajax("restServices/archivaServices/networkProxyService/getNetworkProxies", {
+        type: "GET",
+        dataType: 'json',
+        success: function(data) {
+          networkProxiesViewModel.networkProxies(mapNetworkProxies(data));
+          networkProxiesViewModel.gridViewModel = new ko.simpleGrid.viewModel({
+            data: networkProxiesViewModel.networkProxies,
+            columns: [
+              {
+                headerText: $.i18n.prop('identifier'),
+                rowText: "id"
+              },
+              {
+                headerText: $.i18n.prop('protocol'),
+                rowText: "protocol"
+              },
+              {
+              headerText: $.i18n.prop('host'),
+              rowText: "host"
+              },
+              {
+              headerText: $.i18n.prop('port'),
+              rowText: "port"
+              },
+              {
+              headerText: $.i18n.prop('username'),
+              rowText: "username"
+              },
+              {
+              headerText: $.i18n.prop('password'),
+              rowText: "password"
+              }
+            ],
+            pageSize: 5,
+            gridUpdateCallBack: function(){
+              $("#main-content #networkProxiesTable [title]").twipsy();
+            }
+          });
+          ko.applyBindings(networkProxiesViewModel,$("#main-content #networkProxiesTable").get(0));
+        }
+      }
+    );
+  }
+
+  activateNetworkProxiesGridTab=function(){
+    $("#main-content #network-proxies-view-tabs-li-edit").removeClass("active");
+    $("#main-content #network-proxies-edit").removeClass("active");
+    // activate roles grid tab
+    $("#main-content #network-proxies-view-tabs-li-grid").addClass("active");
+    $("#main-content #network-proxies-view").addClass("active");
+    $("#main-content #network-proxies-view-tabs-li-edit a").html($.i18n.prop("add"));
+  }
+
+  activateNetworkProxyEditTab=function(){
+    $("#main-content #remote-repositories-view-li").removeClass("active");
+    $("#main-content #remote-repositories-view").removeClass("active");
+    // activate role edit tab
+    $("#main-content #remote-repository-edit-li").addClass("active");
+    $("#main-content #remote-repository-edit").addClass("active");
   }
 
   mapNetworkProxy=function(data){

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

@@ -19,16 +19,16 @@
   <div class='well' id="main-menu" redback-permissions="{permissions: ['archiva-manage-users','archiva-manage-configuration']}" style="display: none">
     <ul class="navigation">
       <li style="display: none" redback-permissions="{permissions: ['archiva-manage-users']}">
-        <a href="#" id="menu-users-list-a" onclick="displayUsersGrid()">${$.i18n.prop('users.list')}</a>
+        <a href="#" id="menu-users-list-a" onclick="displayUsersGrid()">${$.i18n.prop('menu.users')}</a>
       </li>
       <li style="display: none" redback-permissions="{permissions: ['archiva-manage-users']}">
-        <a href="#" id="menu-roles-list-a" onclick="displayRolesGrid()">${$.i18n.prop('roles.list')}</a>
+        <a href="#" id="menu-roles-list-a" onclick="displayRolesGrid()">${$.i18n.prop('menu.roles')}</a>
       </li>
       <li style="display: none" redback-permissions="{permissions: ['archiva-manage-configuration']}">
-        <a href="#" id="menu-repositories-list-a" onclick="displayRepositoriesGrid()">${$.i18n.prop('repositories.list')}</a>
+        <a href="#" id="menu-repositories-list-a" onclick="displayRepositoriesGrid()">${$.i18n.prop('menu.repositories')}</a>
       </li>
       <li style="display: none" redback-permissions="{permissions: ['archiva-manage-configuration']}">
-        <a href="#" id="menu-network-proxies-list-a" onclick="displayNetworkProxies()">${$.i18n.prop('repositories.list')}</a>
+        <a href="#" id="menu-network-proxies-list-a" onclick="displayNetworkProxies()">${$.i18n.prop('menu.network-proxies')}</a>
       </li>
     </ul>
   </div>

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/network-proxies.html

@@ -0,0 +1,112 @@
+<script id="networkProxiesMain" type="text/x-jquery-tmpl">
+  <div class="page-header">
+    <h2>${$.i18n.prop('network-proxies.list')}</h2>
+  </div>
+
+  <ul id="network-proxies-view-tabs" class="tabs">
+    <li id="network-proxies-view-tabs-li-grid" class="active">
+      <a href="#network-proxies-view" id="network-proxies-view-tabs-a-network-proxies-grid">${$.i18n.prop('network-proxies.grid.tab.title')}</a>
+    </li>
+    <li id="network-proxies-view-tabs-li-edit">
+      <a href="#network-proxies-edit">${$.i18n.prop('add')}</a>
+    </li>
+  </ul>
+  <div id="network-proxies-view-tabs-content" class="tab-content">
+    <div id="network-proxies-view" class="active">
+        <table class="bordered-table zebra-striped" id="networkProxiesTable"
+               data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko-network-proxies-grid',pageLinksId:'network-proxiesPagination'">
+        </table>
+        <div id="network-proxiesPagination"></div>
+    </div>
+    <div id="network-proxies-edit" data-bind='template: {name:"network-proxy-edit-tmpl"}'></div>
+  </div>
+
+</script>
+
+<script id='ko-network-proxies-grid' type='text/x-jquery-tmpl'>
+    <thead>
+    <tr>
+        {{each(i, columnDefinition) columns}}
+        <th>${ columnDefinition.headerText }</th>
+        {{/each}}
+        <th>${$.i18n.prop('edit')}</th>
+        <th>${$.i18n.prop('delete')}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {{each(i, row) itemsOnCurrentPage()}}
+    <tr>
+        {{each(j, columnDefinition) columns}}
+        {{var val = (typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) :
+        row[columnDefinition.rowText])}}
+        <td>
+            ${val}
+        </td>
+        {{/each}}
+        <td>
+            <a href="#" data-bind="click: function(){ editNetworkProxy(row) }">${$.i18n.prop('edit')}</a>
+        </td>
+        <td>
+            <a href="#" data-bind="click: function(){ removeNetworkProxy(row) }">${$.i18n.prop('delete')}</a>
+        </td>
+    </tr>
+    {{/each}}
+    </tbody>
+
+</script>
+
+<script id="network-proxy-edit-tmpl" type='text/x-jquery-tmpl'>
+    <form id="network-proxy-edit-form">
+      <fieldset id="network-proxy-edit-fieldset">
+        <div class="clearfix">
+          <label for="id">${$.i18n.prop('id')}</label>
+          <div class="input">
+            {{if update}}
+              <span class="uneditable-input">${$data.networkProxy.id}</span>
+            {{else}}
+              <input type="text" class="xlarge required" id="id" name="id" size="10"
+                     data-bind="value: networkProxy.id,css:{'uneditable-input': update},readonly:update"/>
+            {{/if}}
+          </div>
+        </div>
+        <div class="clearfix">
+          <label for="protocol">${$.i18n.prop('protocol')}</label>
+          <div class="input">
+            <input type="text" class="xlarge required" id="protocol" name="protocol" size="8"
+                   data-bind="value: networkProxy.protocol"/>
+          </div>
+        </div>
+        <div class="clearfix">
+          <label for="host">${$.i18n.prop('host')}</label>
+          <div class="input">
+            <input type="text" class="xlarge required" id="host" name="host" size="15"
+                   data-bind="value: networkProxy.host"/>
+          </div>
+        </div>
+        <div class="clearfix">
+          <label for="port">${$.i18n.prop('port')}</label>
+          <div class="input">
+            <input type="text" class="xlarge required" id="port" name="port" size="6"
+                   data-bind="value: networkProxy.port"/>
+          </div>
+        </div>
+        <div class="clearfix">
+          <label for="username">${$.i18n.prop('username')}</label>
+          <div class="input">
+            <input type="text" class="xlarge required" id="username" name="username" size="50"
+                   data-bind="value: networkProxy.username"/>
+          </div>
+        </div>
+        <div class="clearfix">
+          <label for="password">${$.i18n.prop('password')}</label>
+          <div class="input">
+            <input type="text" class="xlarge required" id="password" name="password" size="50"
+                   data-bind="value: networkProxy.password"/>
+          </div>
+        </div>
+
+      </fieldset>
+      <button data-bind="click: save" class="btn">${$.i18n.prop('save')}</button>
+      <button data-bind="click: displayGrid" class="btn">${$.i18n.prop('cancel')}</button>
+    </form>
+</script>

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

@@ -139,7 +139,7 @@
     <form id="managed-repository-edit-form">
       <fieldset id="managed-repository-edit-fieldset">
         <div class="clearfix">
-          <label for="name">${$.i18n.prop('id')}</label>
+          <label for="id">${$.i18n.prop('id')}</label>
           <div class="input">
             {{if update}}
               <span class="uneditable-input">${$data.managedRepository.id}</span>

archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html

@@ -180,9 +180,6 @@
   </div>
 </script>
 
-
-
-
 <script id='ko_rolesGrid' type='text/x-jquery-tmpl'>
   <thead>
       <tr>