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

[Daniel H Barboza]

Yes. A previous patch added a typo in this line:

--- 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-add">
+            <form id="form-pool-addd">


Which prevented not only this patch to work, but the submit function as 
well :)


I've just fixed this with the v3 of this contribution.

On 06/16/2014 04:00 PM, Aline Manera wrote:
>
> Ops... the button never becomes enable even when all fields have inputs.
>
> On 06/16/2014 02:30 PM, Daniel Barboza wrote:
>> 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       |  2 +-
>>   2 files changed, 40 insertions(+), 22 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..2ddc088 100644
>> --- a/ui/pages/storagepool-add.html.tmpl
>> +++ b/ui/pages/storagepool-add.html.tmpl
>> @@ -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>
>