Add selected text for multiple selection

vaadin-component-factory · Nov 1, 2021 · 2b5dfeb · 2b5dfeb
1 parent 89b6098
commit 2b5dfeb
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 8 deletions.
diff --git a/lookup-field-flow-demo/pom.xml b/lookup-field-flow-demo/pom.xml
@@ -6,7 +6,7 @@
 
     <groupId>com.vaadin.componentfactory</groupId>
     <artifactId>lookup-field-flow-demo</artifactId>
-    <version>1.2.0</version>
+    <version>1.3.0</version>
 
     <name>Lookup Field Demo</name>
     <packaging>war</packaging>
@@ -96,7 +96,7 @@
        <dependency>
            <groupId>com.vaadin.componentfactory</groupId>
            <artifactId>lookup-field-flow</artifactId>
-           <version>1.2.0</version>
+           <version>1.3.0</version>
        </dependency>
 
         <dependency>

diff --git a/...p-field-flow-demo/src/main/java/com/vaadin/componentfactory/lookupfield/MultipleView.java b/...p-field-flow-demo/src/main/java/com/vaadin/componentfactory/lookupfield/MultipleView.java
@@ -22,6 +22,7 @@ public MultipleView() {
         lookupField.getGrid().addColumn(s -> s).setHeader("item");
         lookupField.setLabel("Item selector");
         lookupField.addThemeVariants(EnhancedDialogVariant.SIZE_MEDIUM);
+        lookupField.showSelectedItems(true);
         add(lookupField);
     }
 

diff --git a/...demo/src/main/java/com/vaadin/componentfactory/lookupfield/filter/CustomFilterString.java b/...demo/src/main/java/com/vaadin/componentfactory/lookupfield/filter/CustomFilterString.java
@@ -19,6 +19,8 @@ public class CustomFilterString implements LookupFieldFilter<String> {
     private LookupFieldFilterAction<String> fieldFilterAction;
 
     public CustomFilterString() {
+        layout.setSpacing(false);
+        layout.getThemeList().add("spacing-s");
         layout.setDefaultVerticalComponentAlignment(FlexComponent.Alignment.BASELINE);
         filterField = new TextField("filter");
         layout.addAndExpand(filterField);

diff --git a/.../src/main/java/com/vaadin/componentfactory/lookupfield/service/FilteredPersonService.java b/.../src/main/java/com/vaadin/componentfactory/lookupfield/service/FilteredPersonService.java
@@ -5,6 +5,7 @@
 import org.apache.commons.lang3.StringUtils;
 
 import java.util.List;
+import java.util.Locale;
 import java.util.stream.Collectors;
 
 public class FilteredPersonService {
@@ -26,9 +27,9 @@ private boolean filter(Person person, PersonFilter filter) {
             return true;
         }
         if ((StringUtils.isEmpty(filter.getLastName()) && StringUtils.isEmpty(filter.getFirstName()))) {
-            return person.toString().contains(filter.getFullName());
+            return person.toString().toLowerCase(Locale.ROOT).contains(filter.getFullName().toLowerCase(Locale.ROOT));
         } else {
-            return person.getLastName().contains(filter.getLastName()) && person.getFirstName().contains(filter.getFirstName());
+            return person.getLastName().toLowerCase(Locale.ROOT).contains(filter.getLastName().toLowerCase(Locale.ROOT)) && person.getFirstName().toLowerCase(Locale.ROOT).contains(filter.getFirstName().toLowerCase(Locale.ROOT));
         }
     }
 

diff --git a/lookup-field-flow/pom.xml b/lookup-field-flow/pom.xml
@@ -6,7 +6,7 @@
 
     <groupId>com.vaadin.componentfactory</groupId>
     <artifactId>lookup-field-flow</artifactId>
-    <version>1.2.0</version>
+    <version>1.3.0</version>
     <packaging>jar</packaging>
 
     <name>Lookup Field</name>

diff --git a/...field-flow/src/main/java/com/vaadin/componentfactory/lookupfield/AbstractLookupField.java b/...field-flow/src/main/java/com/vaadin/componentfactory/lookupfield/AbstractLookupField.java
@@ -10,6 +10,7 @@
 import com.vaadin.flow.component.dependency.Uses;
 import com.vaadin.flow.component.dialog.Dialog;
 import com.vaadin.flow.component.grid.Grid;
+import com.vaadin.flow.component.grid.GridMultiSelectionModel;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.icon.Icon;
 import com.vaadin.flow.component.notification.Notification;
@@ -36,7 +37,7 @@
 @Uses(value = EnhancedDialog.class)
 @Tag("vcf-lookup-field")
 @JsModule("@vaadin-component-factory/vcf-lookup-field")
-@NpmPackage(value = "@vaadin-component-factory/vcf-lookup-field", version = "1.2.0")
+@NpmPackage(value = "@vaadin-component-factory/vcf-lookup-field", version = "1.3.1")
 public abstract class AbstractLookupField<T, SelectT, ComboboxT extends HasValidation & HasSize & HasFilterableDataProvider<T, String> & HasValue<?, SelectT>,
         ComponentT extends AbstractLookupField<T,SelectT, ComboboxT, ComponentT, FilterType>, FilterType> extends Div
         implements HasFilterableDataProvider<T, FilterType>,
@@ -78,6 +79,16 @@ public void setGrid(Grid<T> grid) {
         }
 
         this.grid = grid;
+        this.grid.addItemClickListener(e -> {
+            if (grid.getSelectionModel() instanceof GridMultiSelectionModel) {
+                if (!grid.getSelectedItems().contains(e.getItem())) {
+                    this.grid.deselectAll();
+                    this.grid.select(e.getItem());
+                } else {
+                    this.grid.deselectAll();
+                }
+            }
+        });
         grid.getElement().setAttribute(SLOT_KEY, GRID_SLOT_NAME);
 
         // It might already have a parent e.g when injected from a template
@@ -576,6 +587,7 @@ public static class LookupFieldI18n implements Serializable {
         private String search;
         private String emptyselection;
         private String create;
+        private String selectedText;
 
         public String getSearch() {
             return search;
@@ -648,5 +660,14 @@ public LookupFieldI18n setCreate(String create) {
             this.create = create;
             return this;
         }
+
+        public String getSelectedText() {
+            return selectedText;
+        }
+
+        public LookupFieldI18n setSelectedText(String selectedText) {
+            this.selectedText = selectedText;
+            return this;
+        }
     }
 }
diff --git a/...main/java/com/vaadin/componentfactory/lookupfield/CustomFilterMultiSelectLookupField.java b/...main/java/com/vaadin/componentfactory/lookupfield/CustomFilterMultiSelectLookupField.java
@@ -24,12 +24,15 @@
 import com.vaadin.flow.component.ClientCallable;
 import com.vaadin.flow.component.ItemLabelGenerator;
 import com.vaadin.flow.component.combobox.ComboBox;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.grid.Grid;
+import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.data.provider.ListDataProvider;
 import com.vaadin.flow.function.SerializableFunction;
 import com.vaadin.flow.shared.Registration;
 import org.vaadin.gatanaso.MultiselectComboBox;
 
+import java.text.MessageFormat;
 import java.util.Objects;
 import java.util.Set;
 
@@ -42,8 +45,15 @@
  * @param <T> the type of the items to be inserted in the combo box
  */
 
+@CssImport(value = "./lookup-dialog-overlay.css")
 public class CustomFilterMultiSelectLookupField<T, FilterType> extends AbstractLookupField<T, Set<T>, MultiselectComboBox<T>, CustomFilterMultiSelectLookupField<T, FilterType>, FilterType> {
 
+    private static final String SELECTED_SLOT_NAME = "selected";
+
+    private Div selected;
+
+    private Registration selectedListener;
+
     /**
      * Constructor
      * The converters are used to convert the backend filter to the combobox filter (String)
@@ -191,8 +201,48 @@ protected void copyFieldValueFromGrid() {
     @Override
     @ClientCallable
     protected void copyFieldValueToGrid() {
+        getGrid().deselectAll();
         for (T value : comboBox.getValue()) {
             getGrid().select(value);
         }
     }
+
+    /**
+     *
+     *
+     * @param showSelectedItems
+     */
+    public void showSelectedItems(boolean showSelectedItems) {
+        if (this.selected != null && this.selected.getElement().getParent() == getElement()) {
+            this.selected.getElement().removeFromParent();
+        }
+        if (showSelectedItems) {
+            this.selected = new Div();
+            this.selected.addClassName("selected-text");
+            if (selectedListener != null) {
+                selectedListener.remove();
+            }
+            selectedListener = getGrid().addSelectionListener(item -> {
+                updateMessage(item.getAllSelectedItems().size());
+            });
+
+            updateMessage(getGrid().getSelectedItems().size());
+            selected.getElement().setAttribute(SLOT_KEY, SELECTED_SLOT_NAME);
+
+            // It might already have a parent e.g when injected from a template
+            if (selected.getElement().getParent() == null) {
+                getElement().appendChild(selected.getElement());
+            }
+        } else {
+            this.selected = null;
+        }
+    }
+
+    private void updateMessage(int nbItems) {
+        String message = (getI18n() != null && getI18n().getSelectedText() != null)? getI18n().getSelectedText(): "{0} item(s) selected";
+        if (selected != null) {
+            this.selected.setText(MessageFormat.format(message, nbItems));
+        }
+    }
+
 }
diff --git a/lookup-field-flow/src/main/resources/META-INF/resources/frontend/lookup-dialog-overlay.css b/lookup-field-flow/src/main/resources/META-INF/resources/frontend/lookup-dialog-overlay.css
@@ -0,0 +1,10 @@
+vcf-enhanced-dialog-overlay .selected-text {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    height: var(--lumo-size-m);
+    padding: 0 var(--lumo-space-m);
+    width: 100%;
+    border: 1px solid var(--lumo-contrast-20pct);
+    border-top: none;
+}
diff --git a/pom.xml b/pom.xml
@@ -3,7 +3,7 @@
 
     <groupId>com.vaadin.componentfactory</groupId>
     <artifactId>lookup-field-flow-root</artifactId>
-    <version>1.2.0</version>
+    <version>1.3.0</version>
     <packaging>pom</packaging>
     <modules>
         <module>lookup-field-flow</module>
@@ -18,7 +18,7 @@
         <maven.compiler.target>1.8</maven.compiler.target>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
-        <lookup-field-flow.version>1.2.0</lookup-field-flow.version>
+        <lookup-field-flow.version>1.3.0</lookup-field-flow.version>
     </properties>
     <inceptionYear>2020</inceptionYear>