mercurymedia / elm-smart-select / MultiSelectRemote

A select component for multi selection with remote data.

Architecture


type SmartSelect msg a

The opaque type representing a particular smart select instance.


type Msg a

Opaque type representing cases to be passed to MultiSelectRemote.update

init : { selectionMsg : ( List a, Msg a ) -> msg, internalMsg : Msg a -> msg, characterSearchThreshold : Basics.Int, debounceDuration : Basics.Float, idPrefix : String } -> SmartSelect msg a

Instantiates and returns a smart select.

view : { selected : List a, optionLabelFn : a -> String, viewSelectedOptionFn : a -> Html msg } -> SmartSelect msg a -> Html msg

The smart select view for selecting multiple options at a time with local data.

viewCustom : { isDisabled : Basics.Bool, selected : List a, optionLabelFn : a -> String, optionDescriptionFn : a -> String, viewSelectedOptionFn : a -> Html msg, optionsContainerMaxHeight : Basics.Float, spinnerColor : Color, selectTitle : String, characterThresholdPrompt : Basics.Int -> String, queryErrorMsg : String, noResultsForMsg : String -> String, noOptionsMsg : String } -> SmartSelect msg a -> Html msg

The smart select view for selecting multiple options at a time with local data.

import MultiSelectRemote
import Html exposing (Html)
import Color

type Msg
    = HandleSelectUpdate (MultiSelectRemote.Msg Product)
    | HandleSelection ( List Product, MultiSelectRemote.Msg Product )

type alias Product =
    { name : String
    , description : String
    , price : Float
    }

init : () -> ( Model, Cmd Msg )
init _ =
    ( { products = exampleProducts
      , select =
            MultiSelectRemote.init
                { selectionMsg = HandleSelection
                , internalMsg = HandleSelectUpdate
                ...
                }
      , selectedProduct = Nothing
      }
    , Cmd.none
    )

type alias Model =
    { products : List Product
    , select : MultiSelectRemote.SmartSelect Msg Product
    , selectedProducts : List Product
    }

viewSelectedProduct : Product -> Html Msg
viewSelectedProduct product =
    div []
        [ text (product.name ++ " - " ++ ("$" ++ String.fromFloat product.price)) ]

viewCustomProductSelect : Model -> Html Msg
viewCustomProductSelect model =
    MultiSelectRemote.viewCustom
        { isDisabled = False
        , selected = model.selectedProducts
        , optionLabelFn = .name
        , optionDescriptionFn = \option -> "$" ++ String.fromFloat option.price
        , viewSelectedOptionFn = viewSelecteProduct
        , optionsContainerMaxHeight = 500
        , spinnerColor = Color.rgb255 0 0 0
        , selectTitle = "Select a Product"
        , characterThresholdPrompt =
            \difference ->
                if difference > 1 then
                    "Please enter " ++ String.fromInt difference ++ " more characters to search for a Product"

                else if difference == 1 then
                    "Please enter 1 more character to search for a Product"

                else
                    ""
        , queryErrorMsg = "An error occured while querying Products"
        , noResultsForMsg = \searchText -> "No results found for: " ++ searchText
        , noOptionsMsg = "There are no options to select"
        }
        model.select

subscriptions : SmartSelect msg a -> Platform.Sub.Sub msg

Events external to the smart select to which it is subscribed.

update : Msg a -> SmartSelect.Utilities.RemoteQueryAttrs a -> SmartSelect msg a -> ( SmartSelect msg a, Platform.Cmd.Cmd msg )

Update the provided smart select and receive the updated select instance and a cmd to run.

type alias RemoteSearchAttrs a =
    { headers : List Header
    , url : String -> String
    , optionDecoder : Decoder a
    }