[Pki-devel] [PATCH] 572 Added bulk property editor in TPS UI.

Endi Sukma Dewata edewata at redhat.com
Thu Apr 16 13:45:36 UTC 2015


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

-- 
Endi S. Dewata
-------------- next part --------------
From 03bbca7d5d47f29c18168d13efb105355fabf1ee Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata at redhat.com>
Date: Wed, 15 Apr 2015 23:15:55 -0400
Subject: [PATCH] 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
---
 base/tps/shared/webapps/tps/js/config.js           | 55 +++++++++++++++++++++-
 base/tps/shared/webapps/tps/js/tps.js              | 55 +++++++++++++++++++++-
 base/tps/shared/webapps/tps/ui/authenticator.html  | 21 +++++++++
 base/tps/shared/webapps/tps/ui/config.html         | 21 +++++++++
 base/tps/shared/webapps/tps/ui/connector.html      | 21 +++++++++
 .../tps/shared/webapps/tps/ui/profile-mapping.html | 21 +++++++++
 base/tps/shared/webapps/tps/ui/profile.html        | 21 +++++++++
 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 749821b3c6c8612ae41dc8c390baea9f79854f79..e1bc86f83feca46440ae6a23f4d717133994a1bd 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 35fac3ec9e1cc8e01ccc4d54136ec8d3a29d0f15..f6e3897846f8108dd23ae04314bfdbc4a454b1ad 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 60fbf7cfe15c301c7fd16e1e08bdadab87ec2e26..59d3e40b5054fb9c48e3c542c436769b37fdbce3 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 2246975516c7e05ec9eaa9c4c231f401ef4e0d9d..567ee9818c53cfdbc3e96cee3a4e03ec43830da9 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 bb10f7219e60dce5c352a253e91c9c5bfff74b84..1a017df489ba1f3be73f4938e9171aeb77e86d39 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 2dfbf2aa8553dc4f491b15fec14d091ea1eed2de..47f24199b8625e096c5b1ba2a32b91717600fbcf 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 b2e90856c01fa94a635fb0a4b52b4e7aeebb502b..d1994c89641b0419704b45bda22c36eb2af4a266 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">
-- 
1.9.3



More information about the Pki-devel mailing list