implementing a multiselect with the ability to edit any option

[riley]

I have the use case of being able to select one or more values from a mulitiselect

So, far this is the code I have come up with: This code is able to display the multiset. 

The User is able to select items from the set of all items that make up the multiselect combo.

The goal:

 I am looking to add the ability to Edit a selection (a name) if desired. Once the selection is edited, the item now

assumes the new value and the multiselect is modified accordingly.

I would also like to be able to delete an item at will, but for now, ability to change or edit an item would be 

what I want to achieve.

Please tell me what can be done with this code, when you are able to get to it.

 Thanks for everybody's time.

 

 def modifyNames(populationRegistry: populationClass[T]) = {
   
    val blankOption = Seq[(String, String)](("",""))(0)


    val default = Seq("") // the default argument in the multiselect method
 
 //allNames is pulled from a database, added to a so-called blankOption (for the first blank item) and this
 //represents the initial items in the multiselect
    val nameOpt = blankOption +: allNames.sortWith( (e1, e2) => (e1 compareToIgnoreCase e2) < 0 ).map{s:String => (s,s)}
    var existingNames = populationRegistry.getTags
    var newName = false
    var newNameValue = ""  //a new name can be added to the currently available version of the multiselect. This is a user entry via a checkbox and a textbox

    //Yes, Add ability exists, but I would like to Edit and Delete also, Edit is a first step.
   
    // a Set of all multiselect Name elements that represents any combination of items selected from nameOpt; this is done via an Add and displayed in a table.
    //This operation is available to each individual row in a table, representing some Entity, which we shall a Entry
 //the nameSet at any moment is the number of those selections in the multiselect
 var nameSet:Set[String] = if (existingNames.contains("None")) Set.empty else existingNames.toSet
   
    val nodeSeq = Text("Please select one or more names:") ++
        <div>{SHtml.multiSelect(nameOpt, existingNames, existingNames = _, ("size" -> math.min(20, nameOpt.size).toString), ("style" -> "min-width:200px"))}</div> ++
        <div>
          <span>{SHtml.checkbox(false,newName = _)}</span><span> New Name:</span>
          <span>{SHtml.ajaxText(newNameValue,newNameValue = _)}</span>
        </div>
       
   val func = () => {
       if (newName) {
         logger.info("func - 2: create a new name")
             logger.info("func - 2: newNameValue is: " + newNameValue)
         nameSet = nameSet + newNameValue
         logger.info("func - 2:updated nameSet is:  " + nameSet)
         populationRegistry.setTags(existingNames.toSet)
         allNames.prepend(newNameValue)
       } else {
        populationRegistry.setTags(nameSet)
      }
         
      renderJsCmd
    }
   
 //in this popup we display the multiselect; User does a single select or multiselect, and
 //performs Add.
    showFormPopup(nodeSeq, func,"Select Names")
  }

  

[Antonio Salazar Cardozo]

This level of complexity seems like it's best handled by an idMemoize

that renders the multiSelect, so you can rerender the idMemoize when

something gets added without having to wrangle the rendering JS.

It's also hard to tell what you need when (1) we can't see the JS generator

and (2) we have no clear indication of what's not working :)

Thanks,

Antonio

[riley]

What is working so far is: I can exercise everything that multiselect can do. I can choose more than one value and can send those values to the server on a Save.

What is not working (or the feature itself is simply not implemented yet, owing to a lack of understanding of how to edit a certain value) is the ability to click on a multiselect option (value), change its value, save it on the fly, and send that value along with any others in that multiselect to resume sending their values to the server.

I will post the JS generator shortly.

The idMemoize feature is something I need to study up on. 

I will report back on what I find, and also post the JS generator

[riley]

This is my multiselect nodeseq

val nodeSeq = Text("Please select one or more names:") ++
        <div>{SHtml.multiSelect(nameOpt, existingNames, existingNames = _, ("size" -> math.min(20, nameOpt.size).toString), ("style" -> "min-width:200px"))}</div> ++
        <div>
          <span>{SHtml.checkbox(false,newName = _)}</span><span> New Name:</span>
          <span>{SHtml.ajaxText(newNameValue,newNameValue = _)}</span>
        </div>

-----------

This nodeSeq is passed into ajaxForm, because we want to display the multiselect in a popup form

val formNodeSeq = Form.render(SHtml.ajaxForm(nodeSeq))
    val formId = formNodeSeq.theSeq.head.attribute("id").get.text

displayPopup(
      nodeSeq = formNodeSeq,
      onOKJsCmd = Some(SHtml.submitAjaxForm(formId, formFunk)),
      width = Some(750L),
      onOKText = "Save",
      title="Select Name",
      id = Some(nameEditor.wrapperId),
      onCancelJsCmd = Some(Alert(s"Canceled") & renderJsCmd)
    )

I am not sure what exactly in what context you meant by JS generator.

Please let me know if the code I posted here makes sense or is there more I need to post.

For example, the nameEditor is the one I need to put the name modifying (editing) code - perhaps using idMemoize

Thanks

On Tuesday, May 17, 2016 at 9:18:42 PM UTC-5, Antonio Salazar Cardozo wrote:

[Antonio Salazar Cardozo]

I think you may want to spin up an example project: https://www.assembla.com/wiki/show/liftweb/Posting_example_code

Though it also looks like I misunderstood and you don't have code that

isn't working, rather you're wondering how to approach writing the code

that does the updating to begin with?

Thanks,

Antonio

[riley]

Sure, I will spin up an example project.

And yes to "rather you're wondering how to approach writing the code

that does the updating to begin with"

Riley