tatulund/twincolselect

TwinColSelect component for Vaadin 14, 23 and 24

TwinColSelect

Vaadin 23 Java version of TwinColSelect

TwinColSelect component, also known as list builder. It is a component for multiselection.

This is component consists of two lists. You can move items from the other list to other. The left list is master list and backed by DataProvider. The right list is the selection list and reflects the value of the selection.

The component also has drag and drop support.

This add-on component is also a demo case on how to create a complex custom field as server side composition using Java. As the logic is fully implemented in Java, it is also possible to verify it using UI Unit Test feature that came in Vaadin 23.2.

See: https://github.com/TatuLund/TwinColSelect/blob/nextlts/src/test/java/org/vaadin/tatu/ViewTest.java

There is CSS styling example in

https://github.com/TatuLund/TwinColSelect/blob/nextlts/frontend/themes/mytheme/styles.css

Release notes

Version 3.0.1

• Use NativeLabel instead of Label
• Small improvement in keyboard navigation

Version 3.0.0

• The first release to support Vaadin 24

Development instructions

Starting the test/demo server:

1. Run mvn jetty:run.
2. Open http://localhost:8080 in the browser.

Publishing to Vaadin Directory

You can create the zip package needed for Vaadin Directory using

mvn versions:set -DnewVersion=1.0.0 # You cannot publish snapshot versions 
mvn install -Pdirectory

The package is created as target/twincolselect-1.0.0.zip

For more information or to upload the package, visit https://vaadin.com/directory/my-components?uploadNewComponent

twincolselect's Issues

NoClassDefFoundError: com.vaadin.flow.data.binder.HasItemsAndComponents$ItemComponent

Hello,

First of all thank you for this wonderfull component. I've tried to update my vaadin aplication from version 14 to the latest 23 and it seems the interface ItemComponent has moved from class HasItemsAndComponents to HasItemComponents causing the exception:

Caused by: java.lang.NoClassDefFoundError: com.vaadin.flow.data.binder.HasItemsAndComponents$ItemComponent
at java.lang.ClassLoader.defineClassImpl(Native Method) ~[?:?]
at java.lang.ClassLoader.defineClassInternal(ClassLoader.java:491) ~[?:?]
at java.lang.ClassLoader.defineClass(ClassLoader.java:452) ~[?:?]
at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:151) ~[?:?]
at jdk.internal.loader.BuiltinClassLoader.defineClass(BuiltinClassLoader.java:1137) ~[?:?]
at jdk.internal.loader.BuiltinClassLoader.findClassOnClassPathOrNull(BuiltinClassLoader.java:924) ~[?:?]
at jdk.internal.loader.BuiltinClassLoader.loadClassOrNull(BuiltinClassLoader.java:832) ~[?:?]
at jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:790) ~[?:?]
at jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:168) ~[?:?]
at java.lang.ClassLoader.loadClass(ClassLoader.java:1108) ~[?:?]
at java.lang.Class.getDeclaredMethodsImpl(Native Method) ~[?:?]
at java.lang.Class.getDeclaredMethods(Class.java:1137) ~[?:?]
at com.vaadin.flow.internal.nodefeature.AbstractServerHandlers.collectHandlerMethods(AbstractServerHandlers.java:158) ~[flow-server-23.0.3.jar:23.0.3]
at com.vaadin.flow.internal.nodefeature.AbstractServerHandlers.collectHandlerMethods(AbstractServerHandlers.java:123) ~[flow-server-23.0.3.jar:23.0.3]
at com.vaadin.flow.internal.nodefeature.AbstractServerHandlers.componentSet(AbstractServerHandlers.java:84) ~[flow-server-23.0.3.jar:23.0.3]
at com.vaadin.flow.internal.nodefeature.ComponentMapping.setComponent(ComponentMapping.java:65) ~[flow-server-23.0.3.jar:23.0.3]
at com.vaadin.flow.dom.ElementStateProvider.setComponent(ElementStateProvider.java:326) ~[flow-server-23.0.3.jar:23.0.3]
at com.vaadin.flow.dom.ElementUtil.setComponent(ElementUtil.java:202) ~[flow-server-23.0.3.jar:23.0.3]
at com.vaadin.flow.component.Component.setElement(Component.java:237) ~[flow-server-23.0.3.jar:23.0.3]
at com.vaadin.flow.component.Component.setElement(Component.java:258) ~[flow-server-23.0.3.jar:23.0.3]
at com.vaadin.flow.component.Component.(Component.java:122) ~[flow-server-23.0.3.jar:23.0.3]
at com.vaadin.flow.component.AbstractField.(AbstractField.java:145) ~[flow-server-23.0.3.jar:23.0.3]
at org.vaadin.tatu.TwinColSelect.(TwinColSelect.java:224) ~[twincolselect-1.8.1.jar:1.8.1]
at org.vaadin.tatu.TwinColSelect.(TwinColSelect.java:220) ~[twincolselect-1.8.1.jar:1.8.1]

Best regards,
Sergio

vaadinBuildFrontend warnings using 1.7.0

Building using 1.7.0 results in the following warnings:

Task vaadinBuildFrontend
Use the './' prefix for files in JAR files: 'twincolselect.css', please update your component.
Use the './' prefix for files in JAR files: 'twincolselect-checkbox.css', please update your component.

No way to reset values selected in component.

There is no way at the moment to reset the values selected via current methods, only by using built-in buttons on the component. The requirement is to clear all selected items via a button click.

Methods attempted are

.clear();
.deselectAll();

TwinColselect.setItem is taking too much time

In vaadin 24 , i am facing one issue related to rendering of page is slow due to Twincolselect.setItems , where i have only 900 records to set . but it was much faster in 23 version .

Also, tried to go with Lazy loading where on scroll data get load but TwinccolSelect overrides the new scrolled data with old one .
For Reference please check this question on stack overflow:

This is how my code looks like:
`TwinColSelect twinCol;

List data = databaseService.findAll(); // 900 items
data.sort(Comparator.comparing(Data::getName));
this.layout.twinCol.setItems(data); //it is taking too much time to render on page `

Convenience workflow accelerators

User requested features, mostly to match the older Vaadin Framework behavior:

• double click on an item moves it to the other list.
• click on item a, shift click on item b will select all items visible from a to b (inclusive) if a and b are in the same list.
• make the "trash" button more useful by making it clear all in a list if there are any selected, but if none are selected it selects all, making it into a bulk select/deselect. I did not change the trash icon, though there is probably a better choice now - perhaps recycle?

I've forked and committed the above changes in separate commits at: https://github.com/mthome/TwinColSelect

I think the checkbox at the of the middle panel no longer has any use with functional range select.

Styling is pretty hard

Changing the default style of the component is pretty hard (or even impossible) for some properties because they a directly added to the style-attribute of the component, e.g. background of the vertical layout. It would be better to move the styles to css and handle the changes through different css-classes.

Typo in twincolselect.css prevents use in vaadin 14.6 / vaadin-plugin 0.14.6.0

The following line:

TwinColSelect/src/main/resources/META-INF/resources/frontend/twincolselect.css

Line 8 in b50bbb7

font-size: var(--lumo-font-size-xs)");

Results in a compiletime (really frontend) build:
` ERROR in ../node_modules/@vaadin/flow-frontend/twincolselect.css
Module build failed (from ../node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(8:40) Unclosed string

 6 | .twincolselect-errorlabel {
 7 |        color: var(--lumo-error-text-color);

8 | font-size: var(--lumo-font-size-xs)");
| ^
9 | line-height: var(--lumo-line-height-xs);
10 | will-change: max-height;

@ ../target/frontend/generated-flow-imports.js?babel-target=es6 35:0-62 36:36-43`

Add/Remove Buttons Refresh broken

I needed to update the addon to 2.2.0 because we updated Vaadin to 23.1. It looks like refresh of the Buttons is broken.

• Initially all Buttons are disabled. The "Add All" Buttons should be enabled, because adding all Items should be possible as long that still one is left.
• When one item is selected, no buttons become active. "Add" should be active
• When Items are added (double click works), the "Remove" Button is active, even if no item is selected. Nothing happens when clicked.
• The "Add" Button is active even when no item is selected (after it became active after the first refresh after the items were added)

I think the safest way is to refresh the buttons on every (de-)select and item list modificaion. The "Add" and "Remove buttons should only be active when a item is selected on the respective side.

TwinColSelect and binder in readonly mode does not make the TwinColSelect readonly

I have strange behaviour with this component and a binder that is set as binder.readOnly(true).
The expected behaviour is that the twinColSelect component would act the same as the vaadin field ones and not allow the user to change selections. Some of the behaviour is there but there seems to be some strange workarounds. Please see the attached gif with an illustration.

Programmatic control of row wrap/truncate/scroll

I'd like to style how the items are rendered - in particular, the default is to wrap the entry text, but depending on the situation I'd like to truncate (with ellipses and, perhaps, mouse hover for the full text) or allow horizontal scrolling.

DataProvider filtering incorrectly clears previously selected choices

We use TwinColSelect to allow a multi select a small number of values from sometimes several hundred options. In order t help the user manage large numbers of options, we use a DataProvider with a dynamic filter, but the current definitions of setDataProvider (the dataproviderlistener) and sortDestinationList discard from the selected items list any previously selected values that are not in the currently filtered dataprovider.

Example:

• unfiltered dataprovider contains: AA, AB, AC, XX, XY, XZ.
• I select XX (moving it to the right hand side)
• I apply a filter to my data provider limiting to items starting with A -> the right hand side is cleared, the left has AA,AB,AC
• I select AA and move to the right
• exit the dialog -> the value is [AA] - my explicit selection of XX was discarded.

Expectation:

1. filtering the dataprovider should never clear previously selected items.
2. sorting the target list should not clear previously selected items.
3. it is okay to hide selected items.

The constructor supplies null as the default value to AbstractField

The TwinColSelect constructor calls super(null) to specify a null default value to AbstractField, which contradicts the default implementation of getDefaultValue(). This results in possibility of getValue() returning null and isEmpty() returning never returning true.

Invalid state of buttons when no items present

Hello,

I did just the first steps with 2.0.0 version of the component in relation with Vaadin 23.1.

I noticed that the buttons between the two lists are enabled, even when initially no data/items are present.

After clicking on "Select all" the buttons are all disabled as makes sense.
Probably just missing an initial call to that code part