Boîte combo à sélection multiple Vaadin Flow

Il y a eu un problème github à ce sujet pour un très longtemps.

Quelqu'un a déjà fabriqué un composant polymère pour cela, mais n'a pas encore intégré cela dans Vaadin Flow. Il me semble que cela décolle enfin et je m'attends à une combobox multisélection dans Vaadin Flow bientôt.

J'ai intégré le composant polymère dans le flux Vaadin:

public class ChangeEvent extends ComponentEvent<AbstractCallableComponent> {

    public ChangeEvent(AbstractCallableComponent source, boolean fromClient) {
        super(source, fromClient);
    }
}

et

@Tag("multiselect-combo-box")
@HtmlImport("src/views/common/multiselect-combo-box.html")
public class MultiSelectComboBox extends AbstractCallableComponent {

    private List<String> value;

    public void setItems(List<String> items) {
        JsonArray arr = Json.createArray();

        items.forEach(item -> {
            arr.set(arr.length(), item);
        });
        getElement().setPropertyJson("items", arr);
    }

    @ClientCallable
    @Override
    public void onValueChange(String s) {
        if (s.length() == 0) {
            value = Collections.emptyList();
        } else {
            value = Arrays.stream(s.split(","))
                    .map(String::trim)
                    .collect(Collectors.toList());
        }
        fireEvent(new ChangeEvent(this, false));
    }

    @Override
    public List<String> getValue() {
        return value;
    }

    public Registration addChangeListener(ComponentEventListener<ChangeEvent> listener) {
        return addListener(ChangeEvent.class, listener);
    }
}

Actuellement, il n'y a pas de composant de multi-sélection officiel pour Vaadin Flow.

Cependant, vous pouvez utiliser l'intégration Java de multiselect-combo-box composant Web pour Vaadin Flow . Vous pouvez voir la démo en direct du composant ici .

Pour utiliser le composant, ajoutez d'abord la dépendance à votre fichier pom.xml (vérifiez quelle est la dernière version et modifiez-la en conséquence):

// setup grid with data provider
List<Person> personList = getItems();
Grid<Person> grid = new Grid<>();

ListDataProvider<Person> dataProvider = new ListDataProvider<>(personList);
grid.setDataProvider(dataProvider);

// add a column
Grid.Column<Person> firstNameColumn = grid.addColumn(Person::getfirstName).setHeader("Name");

HeaderRow filterRow = grid.appendHeaderRow();

// define the multiselect combo box
MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox();

// set items to list of names
multiselectComboBox.setItems("Jack", "Nathan", "Andrew", "Peter", "Samuel");

// add a value change listener
multiselectComboBox.addValueChangeListener(e -> {
  // get the currently selected items
  Set<String> selectedItems = multiselectComboBox.getValue();
  String names = selectedItems.stream().collect(Collectors.joining(","));

  // filter the grid data provider
  if (selectedItems.size() > 0) {
    dataProvider.addFilter(person -> StringUtils.containsIgnoreCase(person.getfirstName(), names));
  } else {
    dataProvider.clearFilters();
  }
});

// set the component as a filter
filterRow.getCell(firstNameColumn).setComponent(multiselectComboBox);

Puis instanciez le composant et remplissez avec des éléments:

multiselectComboBox.addValueChangeListener(e -> {
   // get the currently selected items
   Set<String> selectedItems = multiselectComboBox.getValue();
});

Ajoutez éventuellement un auditeur de changement de valeur pour être averti lorsqu'une sélection a changé:

MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox();
multiselectComboBox.setLabel("Select items");
multiselectComboBox.setItems("Item 1", "Item 2", "Item 3", "Item 4");

À utiliser ce composant comme filtre de grille, j'ai modifié l'exemple de la documentation Vaadin Grid , et cela fonctionne comme suit:

    <dependency>
     <groupId>org.vaadin.gatanaso</groupId>
     <artifactId>multiselect-combo-box-flow</artifactId>
     <version>0.0.4</version>
    </dependency>

    <repository>
     <id>vaadin-addons</id>
     <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>

J'espère que cela vous aidera à atteindre votre objectif!

BR,

Goran