The UI.Filter is a reusable dialog, hidden in a button, used for filtering the results of a list.
Describes a compatible size.
Scale the component between the compatible sizes.
Default size.
Smallest size.
Aligns the filter to the right.
End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.
There are the predefined filters, which have states and updates, and includes sorting buttons.
model =
{ someFilter =
Filter.singleTextFilter Nothing .artist
|> Filter.setItems [ example1, example2 ]
, isFilterOpen = False
}
type Msg
= FilterOpen
| FilterClose
| FilterEdit Filter.FilterMsg
view renderConfig model =
Filter.fromModel label
Msg.FilterEdit
model.someFilter
|> Filter.renderElement renderConfigHolds a pre-defined filter's current state.
Creates the visual component from the model of a pre-built filter.
fromModel
label
Msg.ForFilter
model.someFilterA pre-built, single text field filter.
singleTextField (Just "initial filtering value") .someStringFieldA pre-built filter, with multiple text fields.
multiTextField [] .someStringFieldA pre-built filter, for a single date.
singleDateFilter timeZone (Just model.someInitialTime) .someTimeFieldA pre-built filter, for a range of date.
rangeDateFilter timeZone
(Just model.someInitialBeginningTime)
(Just model.someInitialEndingTime)
.someTimeFieldA pre-built filter, for a period (before, on, or after) some date.
periodDateFilter "some-dom-id"
timeZone
(Just model.someInitialBeginningTime)
(Just GT)
.someTimeFieldA pre-built filter, for a custom radio group.
radioFilter "some-dom-id"
[ "Orange", "Strawberry", "Pineapple", "Watermelon" ]
(Just 0)
(\fruit selected -> fruitsIndex fruit == selected)Contains a pre-defined filter's change.
A classic update function.
Feed the filter with items.
Retrieve items, sorted and filtered.
filterSorting model =
Filter.sorting
{ sortAscendingMsg = Sort True
, sortDescendingMsg = Sort False
, clearSortingMsg = ClearSorting
}
|> Filter.withAppliedSorting Filter.sortingAscending
|> Filter.withSortingPreview "A" "Z"Describes the filter's sorting information.
Adds sorting buttons to the filter.
Builds a FilterSorting for custom sorting.
Add example of the sorting order to the sorting buttons.
Describes the applied sorting state.
Sets the current sorting state.
For when the current sorting is ascending.
For when the current sorting is descending.
For when not sorting.
There is also the possibility to create a custom filter, where you set the sorting, the filter fields/body, and the avaiable buttons.
model =
{ etc | isFilterOpen = False }
type Msg
= Sort Bool
| ClearSorting
| Etc -- ...
view renderConfig model =
Filter.customFilter label
{ openMsg = openMsg, closeMsg = closeMsg, isOpen = model.isFilterOpen }
|> Filter.withSorting (filterSorting model)
|> Filter.withBody (filterBody renderConfig model)
|> Filter.withButtons (filterButtons renderConfig model)
|> Filter.withAppliedHeader clearMsg labelWhenApplied
|> Filter.renderElement renderConfigBuilds a custom filter, where you create the messages and treat the states.
Sets the content of the filter's dialog when open.
Sets the buttons at the bottom of the filter's dialog when open.
Limits the vertical size of the filter's body
Sets the content of the filter's dialog as a date-picker.
Describes the applied filter state.
Sets the closed filter visually different when with filtering applied.
Sets a preview of how many items (or which ones) were selected for filtering, with a button to fastly clear the filtering.
Holds the filter's visual element information.