[Toaster] [PATCH] toaster: disable/enable "Add layer" button according to input's content

[Michael Wood]

Sent to bitbake-devel and added to toaster-next

Thanks,

Michael

On 12/04/16 15:23, Smith, Elliot wrote:
> Thanks for the review.
>
> Yes, that should be possible.
>
> Note that I have to rework this a bit anyway because of the bootstrap 
> 3 changes, which will have an impact on it. It might be best to hold 
> off from sending this patch upstream until those changes are done.
>
> Elliot
>
> On 12 April 2016 at 15:10, Joshua G Lock 
> <joshua.g.lock at linux.intel.com <mailto:joshua.g.lock at linux.intel.com>> 
> wrote:
>
>     Hi Elliot,
>
>     On Wed, 2016-03-30 at 10:10 +0100, Elliot Smith wrote:
>     > In the import layer page, the "Add layer" button in the layer
>     > dependencies
>     > section doesn't accurately reflect whether the layer name in the
>     > corresponding input can be added. A partial or empty layer name can
>     > leave the button active, such that when it is clicked, a
>     > previously-selected layer can be accidentally added.
>     >
>     > Fix by keeping track of the items currently available in the
>     > typeahead,
>     > only activating the "Add layer" button when the input matches the
>     > name
>     > of one of those items.
>
>     I tried your patch out and it seems to work nicely.
>
>     The only minor surprise is that if I select a matched layer from the
>     typeahead, then change my mind and begin deleting that layer text the
>     Add button remains active (with the same selection) until I've
>     completely deleted from the layer name field.
>
>     Is it possible to unselect from the typeahead when deletion begins?
>
>     Regards,
>
>     Joshua
>
>     >
>     > [YOCTO #8511]
>     >
>     > Signed-off-by: Elliot Smith <elliot.smith at intel.com
>     <mailto:elliot.smith at intel.com>>
>     > ---
>     >  .../toaster/toastergui/static/js/importlayer.js    | 30
>     > +++++++++++++++++++++-
>     >  .../lib/toaster/toastergui/static/js/libtoaster.js |  5 ++++
>     >  2 files changed, 34 insertions(+), 1 deletion(-)
>     >
>     > diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
>     > b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
>     > index c68f366..5a59799 100644
>     > --- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
>     > +++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
>     > @@ -18,10 +18,38 @@ function importLayerPageInit (ctx) {
>     >
>     >    libtoaster.makeTypeahead(layerDepInput,
>     > libtoaster.ctx.layersTypeAheadUrl, { include_added: "true" },
>     > function(item){
>     >      currentLayerDepSelection = item;
>     > +  });
>     > +
>     > +  // choices available in the typeahead
>     > +  var layerDepsChoices = {};
>     > +
>     > +  // when the typeahead choices change, store an array of the
>     > available layer
>     > +  // choices locally, to use for enabling/disabling the "Add layer"
>     > button
>     > +  layerDepInput.on("typeahead-choices-change", function (event,
>     > data) {
>     > +    layerDepsChoices = {};
>     >
>     > -    layerDepBtn.removeAttr("disabled");
>     > +    if (data.choices) {
>     > +      data.choices.forEach(function (item) {
>     > +        layerDepsChoices[item.name <http://item.name>] = item;
>     > +      });
>     > +    }
>     >    });
>     >
>     > +  // disable the "Add layer" button when the layer input typeahead
>     > is empty
>     > +  // or not in the typeahead choices
>     > +  layerDepInput.on("input change", function () {
>     > +    // get the choices from the typeahead
>     > +    var choice = layerDepsChoices[$(this).val()];
>     > +
>     > +    if (choice) {
>     > +      layerDepBtn.removeAttr("disabled");
>     > +      currentLayerDepSelection = choice;
>     > +    }
>     > +    else {
>     > +      layerDepBtn.attr("disabled", "disabled");
>     > +      currentLayerDepSelection = undefined;
>     > +    }
>     > +  });
>     >
>     >    /* We automatically add "openembedded-core" layer for convenience
>     > as a
>     >     * dependency as pretty much all layers depend on this one
>     > diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
>     > b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
>     > index b6b49b6..0e81f67 100644
>     > --- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
>     > +++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
>     > @@ -21,6 +21,9 @@ var libtoaster = (function (){
>     >      var xhrReq;
>     >
>     >      jQElement.typeahead({
>     > +        // each time the typeahead's choices change, a
>     > +        // "typeahead-choices-change" event is fired with an object
>     > +        // containing the available choices in a "choices" property
>     >          source: function(query, process){
>     >            xhrParams.search = query;
>     >
>     > @@ -36,6 +39,8 @@ var libtoaster = (function (){
>     >
>     >              xhrReq = null;
>     >
>     > +            jQElement.trigger("typeahead-choices-change", {choices:
>     > data.results});
>     > +
>     >              return process(data.results);
>     >            });
>     >          },
>     > --
>     > 1.9.3
>     >
>     >
>     ---------------------------------------------------------------------
>     > Intel Corporation (UK) Limited
>     > Registered No. 1134945 (England)
>     > Registered Office: Pipers Way, Swindon SN3 1RJ
>     > VAT No: 860 2173 47
>     >
>     > This e-mail and any attachments may contain confidential
>     material for
>     > the sole use of the intended recipient(s). Any review or
>     distribution
>     > by others is strictly prohibited. If you are not the intended
>     > recipient, please contact the sender and delete all copies.
>     >
>
>
>
>
> -- 
> Elliot Smith
> Software Engineer
> Intel Open Source Technology Centre
>
>