Introduce TagPicker component

[Flaurite]

Description

In fact it should be improved TokenList.

Proposal features:

• works with non-entity types;
• possibility to use picker actions and dropdown list with options;
• style-provider for tags;
• alignments for tags container: TOP, RIGHT, BOTTOM, LEFT;

Progress

• Investigate the issue
• Adding/removing tags from layout;
• Non-entity type works
• Entity type works
• Field properties and features;
• Ability to add actions
• LookupAction
• Styling

---

Changes

Added new field - TagPicker. It is a replacement for the TokenList with some enhancements.

TagPicker enables to work with entities and simple data types. It combines ComboBox and ValuesPicker so it has a dropdown list and the ability to work with actions. A simple example is:

<layout>
    <tagPicker id="tagPicker"/>
</layout>

Unique attributes

• tagPosition - sets the position of tags relative to the field. The default value is BOTTOM. For instance:
  

• inlineTags - defines how should be shown tags in one line or under each other. The default value is false.
  Vertical
  
  Inline
  

• hideSelectedOptions - enables to hide options from dropdown list if the option is selected.

• filterMode - sets filter mode for the dropdown list in the field. The default value is CONTAINS

• inputPromt - a textual prompt that is displayed in the field

• metaClass - defines entity's metaclass. It enables to use field with entity type without data container and use TagLookupAction.

---

Actions

As TagPicker is the inheritor of ValuesPicker it can use all actions that applicable for ValuesPicker. For instance, let's create a simple action that will display a notification:

<layout>
    <tagPicker id="tagPicker">
        <actions>
            <action id="notificationAction"
                    icon="BELL"/>
        </actions>
    </tagPicker>
</layout>

@Subscribe("tagPicker.notificationAction")
public void onTagPickerNotificationAction(Action.ActionPerformedEvent event) {
    notifications.create(Notifications.NotificationType.TRAY)
            .withCaption("Action is performed")
            .show();
}

Note, if there is no action defined in the TagPicker by default will be loaded ValueClearAction

TagPickerAction

This action works only when TagPicker has a data container or entity's metaclass. It works similar to LookupAction, but instead of "set" uses the "append" value.

Another feature of this action is multiSelect. It sets the "multiSelect" option to the Lookup Component. The default value is true.

<tagPicker id="tagPicker">
    <actions>
        <action id="lookup" type="tag_lookup">
            <properties>
                <property name="multiSelect" value="true"/>
            </properties>
        </action>
    </actions>
</tagPicker>

---

Working with Entity

1. Example with dataContainer and property:

<tagPicker id="orderLinesField"
           property="orderLines"
           dataContainer="orderDc"
           optionsContainer="orderLinesDc">
    <actions>
        <action id="lookup" type="tag_lookup"/>
        <action id="clear" type="value_clear"/>
    </actions>
</tagPicker>

2. Example with metaClass:

<tagPicker id="tagPicker"
           metaClass="jdevtagy_OrderLine"
           optionsContainer="orderLinesDc">
    <actions>
        <action id="lookup" type="tag_lookup"/>
        <action id="clear" type="value_clear"/>
    </actions>
</tagPicker>

---

Working with data type

Example with String type:

<tagPicker id="tagPicker"/>

@Autowired
private TagPicker<String> tagPicker;

@Subscribe
public void onInit(InitEvent event) {
    tagPicker.setOptionsList(Arrays.asList("Headphones", "Keyboard", "Mouse"));
}

---

Java API

1. Tag caption provider - enables to generate custom caption for tags.

   getTagCaptionProvider();
   setTagCaptionProvider();
   

2. Tag click listener - allows you to handle clicks on the tag.

   addTagClickListener();
   

3. Tag style provider - enables to generate custom style names for tags.

   getTagStyleProvider();
   setTagStyleProvider();
   

4. Tag comparator - enables to sort tags in the UI.

   getTagComparator();
   setTagComparator();