[PATCH] Create pool UI: making 'Create' button disable when forms not filled.
From: Daniel Henrique Barboza <danielhb@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@linux.vnet.ibm.com> --- ui/js/src/kimchi.storagepool_add_main.js | 60 +++++++++++++++++++++----------- 1 file changed, 39 insertions(+), 21 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; -- 1.8.3.1
The patch looks good but the disabled button is too light! I can not even read "Create" in it. I tested on Firefox. On 06/10/2014 05:16 PM, Daniel Barboza wrote:
From: Daniel Henrique Barboza <danielhb@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@linux.vnet.ibm.com> --- ui/js/src/kimchi.storagepool_add_main.js | 60 +++++++++++++++++++++----------- 1 file changed, 39 insertions(+), 21 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;
On 06/11/2014 01:54 PM, Aline Manera wrote:
The patch looks good but the disabled button is too light! I can not even read "Create" in it. I tested on Firefox.
I've send a v2 where I managed to color the button the same way it does in other tabs. Should be more visible now. Thanks!
On 06/10/2014 05:16 PM, Daniel Barboza wrote:
From: Daniel Henrique Barboza <danielhb@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@linux.vnet.ibm.com> --- ui/js/src/kimchi.storagepool_add_main.js | 60 +++++++++++++++++++++----------- 1 file changed, 39 insertions(+), 21 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;
participants (3)
-
Aline Manera -
Daniel Barboza -
Daniel H Barboza