Picklist: Add custom ordering functionality

[JonSams]

Hi I have a use case where I need a picklist that is more generic in nature that can perform simple tasks like selecting items and re-ordering them similar to this PrimeNG component. https://www.primefaces.org/primeng/#/picklist. Specifically I want to use this for our Leading Wisely product, but do do so I need at a minimum to have a toggle added that could disable auto-sorting on the target list, but ideally buttons could be added to the target list that would allow them to be sorted (like PrimeNG component). Also if a toggle could be added to disable displaying the search boxes that would be great, but not necessary.

[corykon]

@JonSams Here are some notes on how I'd approach building this out. For sure these notes are incomplete/imperfect, but hopefully a good starting place. Reach out anytime with questions.

picklist-pane.model.ts

• SelectListOption: Add new number property, position
• FilterableSelectList: Add new boolean property, sortable
• ValueListOption: constructor should optionally accept a position parameter
• ValueSetListOption: constructor should optionally accept a position parameter

picklist.model.ts

• PicklistSettings - add new boolean property sortable… could make left and right pane independently configurable if you wanted, or just one property only for the right pane

picklist.component.ts

• This is the main component with the public API. Settings can be passed into @Input settings as one big object, and you'll see there are some helper @Input's like showHeaderText… follow that pattern if you'd like a simple boolean @Input interface on the component

picklist-filter-local.servce.ts

• getSortFunc() should check to see if the given FilterableSelectList is sortable, return a sortFunc that will order by position

picklist-state.service.ts

• reset() should pass the sortable setting value into the sortable property on this.valueList and this.valueSetList
• updateValueList() & updateValueSetList() - should pass in position parameter to the ValueListOption or ValueSetListOption constructor IF list is sortable.
• Pass 0 for position into first item, 1 into second, 2 into third…

picklist-action.service.ts

• Need moveItem functionality - could be one function, could be several smaller functions (moveDown(), moveUp(), moveToTop(), moveToBottom() etc)
• Ability to move an item (or a collection of items) up one spot, down one spot, or all the way to top or bottom
• Would update position property on the given item, need to update it in all others, and then resort
  • For example, if you had 10 items, move option at position 0 to the bottom, you'd have to update all the other item's by subtracting one from their position property

picklist-pane.component.html

• Add sorting buttons, show only if FilterableSelectList is sortable
• If you want ability to sort in left pane and right pane, you want to should on the left side for the left pane, right side for the right pane

picklist-pane.component.ts

• Add functions for template to call, patch over to picklist-action.service's move item(s) functionality

[andrew-frueh]

Capturing three other picklist related issues in this one and bumping it onto the priority list

481 #618 #863

[andrew-frueh]

closed in #1359