Loading...
 
Skip to main content
2

Review all selectors and pickers

We have various pickers and selection tools in Tiki. Let's review what we have and what we are missing. Please list and explain below current and projected use cases. Ref: How to pick a software library. This is for Tiki28 although it's possible we'll backport a few things to Tiki27 if it's easy and low-risk.

This excludes work on file pickers and date pickers, which are covered by other pages:


These are useful all over Tiki:


Names differ for similar tools. Please see https://open-ui.org/research/component-matrix/Question

1. Multi-select boxes (pillbox)

Select2 is now activated by default in Tiki and the assumption is that we continue to use: https://gitlab.com/tikiwiki/tiki/-/merge_requests/4214Question

But it's been over 4 years since the last release: https://github.com/select2/select2/issues/6290Question

So maybe we should change?

We choose

  1. Element Plus

2. Ranked voting

https://en.wikipedia.org/wiki/Ranked_votingQuestion

For EvoluData, we ask team members which 3 to 5 departments they prefer to work on, in order of priority. In this case, we want to know so we assign relevant tasks and projects.

For a voting system, we'll want this data to determine the winner(s) of an election. Ex.: https://opensource.org/blog/results-of-2024-elections-of-osi-board-of-directorsQuestion

Global use case: E-democracy

Candidates:

Element UI is a popular vue.js library that provides a wide range of components, including one particularly useful for this scenario: the Transfer component.

    • Pros
      • permits to filter items
      • a handy API for customization
      • the library is very popular, getting frequent updates
    • Cons
      • the HTML container is not a select element
      • doesn't permit the ordering of items
      • doesn't permit drag and drop of items
  • https://antdv.com/components/transferQuestion
    • Pros
      • permits to filter items
      • provide pagination for when there are many items to be displayed
      • permits to group items
      • a handy API for customization
    • Cons
      • doesn't permit drag and drop of items
      • doesn't permit the ordering of items
      • the HTML container is not a select element
  • https://staging-v6.patternfly.org/components/dual-list-selectorQuestion
    • Cons
    • Pros
      • permits to enable/disable the ordering of items
      • draggable
      • permits to group items
      • works with touch interfaces
    • Cons
      • requires to select items then perform the move via an arrow
      • seems like unfortunately patternfly build components only for React since its version 4
  • https://github.com/dhruborajroy/Dual-Select-ListQuestion
    • No license available
    • Uses jquery (which version?)
    • Pros
      • permits to order the list via drag and drop
      • permits to filter items
    • Cons
      • Not officially published on any registry
      • Last update made 3 years ago
  • https://philippemarcmeyer.github.io/vanillaSelectChooser/Question

Image


Favorite candidate: https://philippemarcmeyer.github.io/vanillaSelectChooser/Question is quite promising despite its lack of activity, it's very small to be forked if necessary.

@Jonny Bradley wrote:

The shift and ctrl modifiers don't work for me, and i don't like the way i have to do 2 clicks to select something.

So i vote for https://fabianlindfors.se/multijs/Question i reckon (although the vue.jsQuestion one isn't bad also)

3. Dual list

Like "Ranked voting" but the order is not important. Ex.: Please select the list of all countries you ship to.


On the left is a long list (Ideally a list of continents, and country list is indented), and user picks and move to the right. Here is a similar example from Select2:
Image

An example with https://github.com/Fabianlindfors/multi.jsQuestion
Image

4. Nested and sorted lists


Candidates:

5. Resource allocation

A challenge with asking people if they agree with various topics is that you won't have enough ressources to do all the ones that get positive feedback. Another approach is that each participant has a fixed quantity (votes, money, time, etc.) and you allocate to a number of different priorities.

item7766-n-gon-value-picker-for-tracker-fields

Image

Candidates:

6. Sort options

Here is a list of tasks. All must be done. The only question is the order.
https://h5p.org/content-types/sort-the-paragraphsQuestion
Image

7. Drawing links between 2 lists

Designed for matching files headers to database fields during the process importing

Already used in Tiki for Mail-in to Trackers
https://github.com/PhilippeMarcMeyer/FieldsLinkerQuestion

8. Color picker

https://github.com/itsjavi/bootstrap-colorpickerQuestion needs to be replaced


Color pickers are used in at least 4 places:


Image

Merci Jacob wrote:
I see two potential candidates here: ShoelaceQuestion and Element PlusQuestion. They seem to be more active than the others, but their presentations are much more attractive as well.


https://github.com/itsjavi/bootstrap-colorpickerQuestion replaced by https://shoelace.style/components/color-pickerQuestion via https://gitlab.com/tikiwiki/tiki/-/merge_requests/5400Question

9. Slider

Types of sliders

  • basic (pick a value from x to y)
  • range (pick a minimum and maximum)


Candidates:

Element Plus is already used in Tiki for many components, so it would be a wiser choice to implement it for this use case as well.

History Source Comments Files 6
Show PHP error messages