Added bulk property editor in TPS UI.

The TPS UI has been modified to provide an interface to edit
raw properties as in the configuration file. This also allows
editing multiple properties at once and also copy & pasting
the properties.

https://fedorahosted.org/pki/ticket/936

7 files changed, 213 insertions, 2 deletions

diff --git a/base/tps/shared/webapps/tps/js/config.js b/base/tps/shared/webapps/tps/js/config.js
index 749821b3c..e1bc86f83 100644
--- a/base/tps/shared/webapps/tps/js/config.js
+++ b/base/tps/shared/webapps/tps/js/config.js
@@ -63,6 +63,8 @@ var ConfigPage = EntryPage.extend({
 
         var propertiesSection = self.$("[name='properties']");
         self.propertiesList = $("[name='list']", propertiesSection);
+        self.propertiesEditor = $("[name='editor']", propertiesSection);
+        self.propertiesTextarea = $("textarea", self.propertiesEditor);
 
         self.propertiesTable = new PropertiesTable({
             el: self.propertiesList,
@@ -71,6 +73,24 @@ var ConfigPage = EntryPage.extend({
             pageSize: self.tableSize,
             parent: self
         });
+
+        $("[name='showEditor']", propertiesSection).click(function(e) {
+
+            var properties = self.getProperties();
+            self.setProperties(properties);
+
+            self.propertiesList.hide();
+            self.propertiesEditor.show();
+        });
+
+        $("[name='showList']", propertiesSection).click(function(e) {
+
+            var properties = self.getProperties();
+            self.setProperties(properties);
+
+            self.propertiesList.show();
+            self.propertiesEditor.hide();
+        });
     },
     renderContent: function() {
         var self = this;
@@ -79,14 +99,17 @@ var ConfigPage = EntryPage.extend({
 
         if (self.mode == "add") {
             self.propertiesTable.mode = "edit";
+            self.propertiesTextarea.removeAttr("readonly");
             self.setProperties([]);
 
         } else if (self.mode == "edit") {
             self.propertiesTable.mode = "edit";
+            self.propertiesTextarea.removeAttr("readonly");
             self.setProperties(self.entry.properties);
 
         } else { // self.mode == "view"
             self.propertiesTable.mode = "view";
+            self.propertiesTextarea.attr("readonly", "readonly");
             self.setProperties(self.entry.properties);
         }
     },
@@ -102,10 +125,40 @@ var ConfigPage = EntryPage.extend({
 
         self.propertiesTable.entries = properties;
         self.propertiesTable.render();
+
+        var text = "";
+        _.each(properties, function(property) {
+            var name = property.name;
+            var value = property.value;
+            text += name + "=" + value + "\n";
+        });
+        self.propertiesTextarea.val(text);
     },
     getProperties: function() {
         var self = this;
 
-        return self.propertiesTable.entries;
+        if (self.propertiesList.is(":visible")) {
+            return self.propertiesTable.entries;
+
+        } else {
+            var properties = [];
+
+            var lines = self.propertiesTextarea.val().split("\n");
+            _.each(lines, function(line) {
+                var match = /^([^=]+)=(.*)$/.exec(line);
+                if (!match) return;
+
+                var name = match[1];
+                var value = match[2];
+
+                var property = {};
+                property["name"] = name;
+                property["value"] = value;
+
+                properties.push(property);
+            });
+
+            return properties;
+        }
     }
 });
diff --git a/base/tps/shared/webapps/tps/js/tps.js b/base/tps/shared/webapps/tps/js/tps.js
index 35fac3ec9..f6e389784 100644
--- a/base/tps/shared/webapps/tps/js/tps.js
+++ b/base/tps/shared/webapps/tps/js/tps.js
@@ -289,6 +289,8 @@ var ConfigEntryPage = EntryPage.extend({
 
         var propertiesSection = self.$("[name='properties']");
         self.propertiesList = $("[name='list']", propertiesSection);
+        self.propertiesEditor = $("[name='editor']", propertiesSection);
+        self.propertiesTextarea = $("textarea", self.propertiesEditor);
 
         self.propertiesTable = new PropertiesTable({
             el: self.propertiesList,
@@ -297,6 +299,24 @@ var ConfigEntryPage = EntryPage.extend({
             pageSize: self.tableSize,
             parent: self
         });
+
+        $("[name='showEditor']", propertiesSection).click(function(e) {
+
+            var properties = self.getProperties();
+            self.setProperties(properties);
+
+            self.propertiesList.hide();
+            self.propertiesEditor.show();
+        });
+
+        $("[name='showList']", propertiesSection).click(function(e) {
+
+            var properties = self.getProperties();
+            self.setProperties(properties);
+
+            self.propertiesList.show();
+            self.propertiesEditor.hide();
+        });
     },
     renderContent: function() {
         var self = this;
@@ -322,14 +342,17 @@ var ConfigEntryPage = EntryPage.extend({
 
         if (self.mode == "add") {
             self.propertiesTable.mode = "edit";
+            self.propertiesTextarea.removeAttr("readonly");
             self.setProperties([]);
 
         } else if (self.mode == "edit") {
             self.propertiesTable.mode = "edit";
+            self.propertiesTextarea.removeAttr("readonly");
             self.setProperties(self.entry.properties);
 
         } else { // self.mode == "view"
             self.propertiesTable.mode = "view";
+            self.propertiesTextarea.attr("readonly", "readonly");
             self.setProperties(self.entry.properties);
         }
     },
@@ -345,10 +368,40 @@ var ConfigEntryPage = EntryPage.extend({
 
         self.propertiesTable.entries = properties;
         self.propertiesTable.render();
+
+        var text = "";
+        _.each(properties, function(property) {
+            var name = property.name;
+            var value = property.value;
+            text += name + "=" + value + "\n";
+        });
+        self.propertiesTextarea.val(text);
     },
     getProperties: function() {
         var self = this;
 
-        return self.propertiesTable.entries;
+        if (self.propertiesList.is(":visible")) {
+            return self.propertiesTable.entries;
+
+        } else {
+            var properties = [];
+
+            var lines = self.propertiesTextarea.val().split("\n");
+            _.each(lines, function(line) {
+                var match = /^([^=]+)=(.*)$/.exec(line);
+                if (!match) return;
+
+                var name = match[1];
+                var value = match[2];
+
+                var property = {};
+                property["name"] = name;
+                property["value"] = value;
+
+                properties.push(property);
+            });
+
+            return properties;
+        }
     }
 });
diff --git a/base/tps/shared/webapps/tps/ui/authenticator.html b/base/tps/shared/webapps/tps/ui/authenticator.html
index 60fbf7cfe..59d3e40b5 100644
--- a/base/tps/shared/webapps/tps/ui/authenticator.html
+++ b/base/tps/shared/webapps/tps/ui/authenticator.html
@@ -70,6 +70,7 @@
              <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
+                 <button name="showEditor">Switch View</button>
              </span>
          </th>
     </tr>
@@ -110,6 +111,26 @@
 </tfoot>
 </table>
 
+<table name="editor" style="display: none;">
+<thead>
+    <tr>
+         <th class="pki-table-actions">
+             <span class="pki-table-buttons">
+                 <button name="showList">Switch View</button>
+             </span>
+         </th>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+        <td style="padding: 0;">
+            <textarea style="width: 100%;" rows="20">
+            </textarea>
+        </td>
+    </tr>
+</tbody>
+</table>
+
 </div>
 
 <div id="property-dialog" class="modal">
diff --git a/base/tps/shared/webapps/tps/ui/config.html b/base/tps/shared/webapps/tps/ui/config.html
index 224697551..567ee9818 100644
--- a/base/tps/shared/webapps/tps/ui/config.html
+++ b/base/tps/shared/webapps/tps/ui/config.html
@@ -50,6 +50,7 @@
              <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
+                 <button name="showEditor">Switch View</button>
              </span>
          </th>
     </tr>
@@ -90,6 +91,26 @@
 </tfoot>
 </table>
 
+<table name="editor" style="display: none;">
+<thead>
+    <tr>
+         <th class="pki-table-actions">
+             <span class="pki-table-buttons">
+                 <button name="showList">Switch View</button>
+             </span>
+         </th>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+        <td style="padding: 0;">
+            <textarea style="width: 100%;" rows="20">
+            </textarea>
+        </td>
+    </tr>
+</tbody>
+</table>
+
 </div>
 
 <div id="property-dialog" class="modal">
diff --git a/base/tps/shared/webapps/tps/ui/connector.html b/base/tps/shared/webapps/tps/ui/connector.html
index bb10f7219..1a017df48 100644
--- a/base/tps/shared/webapps/tps/ui/connector.html
+++ b/base/tps/shared/webapps/tps/ui/connector.html
@@ -70,6 +70,7 @@
              <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
+                 <button name="showEditor">Switch View</button>
              </span>
          </th>
     </tr>
@@ -110,6 +111,26 @@
 </tfoot>
 </table>
 
+<table name="editor" style="display: none;">
+<thead>
+    <tr>
+         <th class="pki-table-actions">
+             <span class="pki-table-buttons">
+                 <button name="showList">Switch View</button>
+             </span>
+         </th>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+        <td style="padding: 0;">
+            <textarea style="width: 100%;" rows="20">
+            </textarea>
+        </td>
+    </tr>
+</tbody>
+</table>
+
 </div>
 
 <div id="property-dialog" class="modal">
diff --git a/base/tps/shared/webapps/tps/ui/profile-mapping.html b/base/tps/shared/webapps/tps/ui/profile-mapping.html
index 2dfbf2aa8..47f24199b 100644
--- a/base/tps/shared/webapps/tps/ui/profile-mapping.html
+++ b/base/tps/shared/webapps/tps/ui/profile-mapping.html
@@ -70,6 +70,7 @@
              <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
+                 <button name="showEditor">Switch View</button>
              </span>
          </th>
     </tr>
@@ -110,6 +111,26 @@
 </tfoot>
 </table>
 
+<table name="editor" style="display: none;">
+<thead>
+    <tr>
+         <th class="pki-table-actions">
+             <span class="pki-table-buttons">
+                 <button name="showList">Switch View</button>
+             </span>
+         </th>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+        <td style="padding: 0;">
+            <textarea style="width: 100%;" rows="20">
+            </textarea>
+        </td>
+    </tr>
+</tbody>
+</table>
+
 </div>
 
 <div id="property-dialog" class="modal">
diff --git a/base/tps/shared/webapps/tps/ui/profile.html b/base/tps/shared/webapps/tps/ui/profile.html
index b2e90856c..d1994c896 100644
--- a/base/tps/shared/webapps/tps/ui/profile.html
+++ b/base/tps/shared/webapps/tps/ui/profile.html
@@ -70,6 +70,7 @@
              <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
+                 <button name="showEditor">Switch View</button>
              </span>
          </th>
     </tr>
@@ -110,6 +111,26 @@
 </tfoot>
 </table>
 
+<table name="editor" style="display: none;">
+<thead>
+    <tr>
+         <th class="pki-table-actions">
+             <span class="pki-table-buttons">
+                 <button name="showList">Switch View</button>
+             </span>
+         </th>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+        <td style="padding: 0;">
+            <textarea style="width: 100%;" rows="20">
+            </textarea>
+        </td>
+    </tr>
+</tbody>
+</table>
+
 </div>
 
 <div id="property-dialog" class="modal">