Submit multi-select

Form submit as mapped object

Automatically map (multiple) selected options as List

<section >
    <div style="display: flex">

        <form m:submit="favoriteFruits(:{form})">
            <label for="m_select">Select your favorite fruit(s)</label>
            <br>
            <select id="m_select"
                    name="favorites"
                    multiple
                    th:size="${#lists.size(fruits)}">

              <option th:each="fruit : ${fruits}"
                      th:value="${fruit}"
                      th:text="${fruit}">a fruit</option>
            </select>
            <br>
            <input id="m_submit" type="submit" value="Submit">
        </form>

        <div class="example-result">
            <ul>
                <li th:each="fav : ${favoritesMap}"
                    th:text="${fav}">a favorite fruit</li>
            </ul>
        </div>
    </div>
</section>

import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;

import java.util.List;
import java.util.Map;

@UIEventPage(path="/detail/sample/multi-select", file="/pages/sample/multi-select.html")
public class MultiSelectController {

    List<String> fruits= List.of("Apple", "Banana", "Lemon", "Orange", "Strawberry" );

    public List<Attribute> setupAttributes(){
        return List.of(
                new Attribute("fruits", fruits)
        );
    }

    /* Using a Map as form */
    public List<Attribute> favoriteFruits(Map<String, Object> form) {
        if(null == form) return List.of();
        return List.of(new Attribute("favoritesMap", (List)form.get("favorites")));
    }
}

Multi select via checkboxes

Automatically map multiple (checked) values to a POJO. The name of the input should correspond with the POJO's field name

<section>
    <div style="display: flex">
        <form m:submit="favorites(:{form})">
            <label for="m_select">Select your favorite fruit(s)</label>
            <br>
            <div th:each="fruit : ${fruits}">
                <input type="checkbox" name="favoriteFruits" th:value="${fruit}"/>
                <label th:text="${fruit}"></label>
            </div>
            <br>
            <input id="submit_form" type="submit" value="Submit">
        </form>

        <div class="example-result">
            <ul>
                <li th:each="fav : ${favoritesForm}"  th:text="${fav}">a fruit</li>
            </ul>
        </div>
    </div>
</section>

import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;

import java.util.List;

@UIEventPage(path="/detail/sample/multi-select", file="/pages/sample/multi-select.html")
public class MultiSelectController {

    List<String> fruits= List.of("Apple", "Banana", "Lemon", "Orange", "Strawberry" );

    public List<Attribute> setupAttributes(){
        return List.of(
                new Attribute("fruits", fruits)
        );
    }

    /* Using a FormObject */
    public List<Attribute> favorites(FormObject formObject) {
        System.out.println("favorites : " + formObject);
        if(null == formObject) return List.of();
        return List.of(new Attribute("favoritesForm", formObject.favoriteFruits));
    }

    public record FormObject(List<String> favoriteFruits){}
}