[Kimchi-devel] [PATCH v3] Create pool UI: making 'Create' button disable when forms not filled.

[Daniel Barboza]

From: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>

Making the 'Create' button in storagepool_add enable only when
all form fields are filled, just like other kimchi forms.

Signed-off-by: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.storagepool_add_main.js | 60 +++++++++++++++++++++-----------
 ui/pages/storagepool-add.html.tmpl       |  4 +--
 2 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
index 0f3df32..23c8b27 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -20,6 +20,18 @@ kimchi.storagepool_add_main = function() {
     kimchi.initStorageAddPage();
     $('#form-pool-add').on('submit', kimchi.addPool);
     $('#pool-doAdd').on('click', kimchi.addPool);
+    // 'pool-doAdd' button starts as disabled.
+    $("#pool-doAdd").button();
+    $("#pool-doAdd").button("disable");
+    // Make any change in the form fields enables the
+    // 'pool-doAdd' button if all the visible form
+    // fields are filled, disables it otherwise.
+    $('#form-pool-add').on('input change propertychange', function() {
+        if (!kimchi.inputsNotBlank())
+            $("#pool-doAdd").button("disable");
+        else
+           $("#pool-doAdd").button("enable");
+    });
 };
 
 kimchi.initStorageAddPage = function() {
@@ -75,7 +87,7 @@ kimchi.initStorageAddPage = function() {
         value : "scsi"
     } ];
     $('#poolTypeId').selectMenu("setData", options);
- 
+
     kimchi.getStorageServers('netfs', function(data) {
         var serverContent = [];
         if (data.length > 0) {
@@ -147,13 +159,35 @@ kimchi.initStorageAddPage = function() {
     });
 };
 
+/* Returns 'true' if all form fields were filled, 'false' if
+ * any field is left blank. The function takes into account
+ * the current poolType selected.
+ *
+ * Any 'field is blank' verification that were done in other
+ * validate functions were deleted, since we're doing it here
+ * already.
+ */
+kimchi.inputsNotBlank = function() {
+    if (!$('#poolId').val()) return false;
+    var poolType = $("#poolTypeInputId").val();
+    if (poolType === "dir") {
+        if (!$('#pathId').val()) return false;
+    } else if (poolType === "netfs") {
+        if (!$('#nfspathId').val()) return false;
+        if (!$('#nfsserverId').val()) return false;
+    } else if (poolType === "iscsi") {
+        if (!$('#iscsiserverId').val()) return false;
+        if (!$('#iscsiTargetId').val()) return false;
+    } else if (poolType === "logical") {
+        if ($("input[name=devices]:checked").length === 0)
+            return false;
+    }
+    return true;
+};
+
 kimchi.validateForm = function() {
     var name = $('#poolId').val();
     var poolType = $("#poolTypeInputId").val();
-    if ('' === name) {
-        kimchi.message.error.code('KCHPOOL6001E');
-        return false;
-    }
     if (name.indexOf("/")!=-1) {
         kimchi.message.error.code('KCHPOOL6004E');
         return false;
@@ -173,10 +207,6 @@ kimchi.validateForm = function() {
 
 kimchi.validateDirForm = function () {
     var path = $('#pathId').val();
-    if ('' === path) {
-        kimchi.message.error.code('KCHPOOL6002E');
-        return false;
-    }
     if (!/(^\/.*)$/.test(path)) {
         kimchi.message.error.code('KCHAPI6003E');
         return false;
@@ -190,10 +220,6 @@ kimchi.validateNfsForm = function () {
     if (!kimchi.validateServer(nfsserver)) {
         return false;
     }
-    if ('' === nfspath) {
-        kimchi.message.error.code('KCHPOOL6003E');
-        return false;
-    }
     if (!/((\/([0-9a-zA-Z-_\.]+)))$/.test(nfspath)) {
         kimchi.message.error.code('KCHPOOL6005E');
         return false;
@@ -207,18 +233,10 @@ kimchi.validateIscsiForm = function() {
     if (!kimchi.validateServer(iscsiServer)) {
         return false;
     }
-    if ('' === iscsiTarget) {
-        kimchi.message.error.code('KCHPOOL6007E');
-        return false;
-    }
     return true;
 };
 
 kimchi.validateServer = function(serverField) {
-    if ('' === serverField) {
-        kimchi.message.error.code('KCHPOOL6008E');
-        return false;
-    }
     if(!kimchi.isServer(serverField)) {
         kimchi.message.error.code('KCHPOOL6009E');
         return false;
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
index e6b1fd6..fbcad74 100644
--- a/ui/pages/storagepool-add.html.tmpl
+++ b/ui/pages/storagepool-add.html.tmpl
@@ -29,7 +29,7 @@
             <div class="close">X</div>
         </header>
         <div class="content">
-            <form id="form-pool-addd">
+            <form id="form-pool-add">
                 <section class="form-section">
                     <h2>1. $_("Storage Pool Name")</h2>
                     <div class="field">
@@ -152,7 +152,7 @@
         </div>
         <footer>
             <div class="btn-group">
-                <button id="pool-doAdd" class="btn-normal">
+                <button id="pool-doAdd" class="btn-normal ui-button-primary">
                     <span class="text">$_("Create")</span>
                 </button>
             </div>
-- 
1.8.3.1