From bc2c86257f0c07841838cc27a502870de6afc80c Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Tue, 12 May 2020 21:15:44 +0200 Subject: [PATCH] Moving Examples into own folder --- example/elm.json | 1 + example/src/Data/Example.elm | 187 ++++++++++ example/src/Data/Style/ElmUiFramework.elm | 4 +- example/src/Example/Button.elm | 83 +++++ example/src/Example/ExpansionPanel.elm | 53 +++ example/src/Example/MultiSelect.elm | 72 ++++ example/src/Example/Select.elm | 64 ++++ example/src/Example/Tab.elm | 76 ++++ example/src/{Example.elm => Main.elm} | 74 ++-- example/src/Reusable.elm | 98 +---- example/src/Stateless.elm | 419 +++++++++------------- example/src/View/Test.elm | 390 ++++++++++++++++++++ src/Internal/SortTable.elm | 181 ++++++++++ src/Widget.elm | 100 +++++- src/Widget/SortTable.elm | 215 ----------- src/Widget/Style.elm | 11 +- 16 files changed, 1418 insertions(+), 610 deletions(-) create mode 100644 example/src/Data/Example.elm create mode 100644 example/src/Example/Button.elm create mode 100644 example/src/Example/ExpansionPanel.elm create mode 100644 example/src/Example/MultiSelect.elm create mode 100644 example/src/Example/Select.elm create mode 100644 example/src/Example/Tab.elm rename example/src/{Example.elm => Main.elm} (92%) create mode 100644 example/src/View/Test.elm create mode 100644 src/Internal/SortTable.elm delete mode 100644 src/Widget/SortTable.elm diff --git a/example/elm.json b/example/elm.json index 9f18fca..ec138fb 100644 --- a/example/elm.json +++ b/example/elm.json @@ -17,6 +17,7 @@ "feathericons/elm-feather": "1.4.0", "jasonliang512/elm-heroicons": "1.0.2", "mdgriffith/elm-ui": "1.1.5", + "ryannhg/elm-spa": "4.1.0", "turboMaCk/queue": "1.0.2", "wernerdegroot/listzipper": "4.0.0" }, diff --git a/example/src/Data/Example.elm b/example/src/Data/Example.elm new file mode 100644 index 0000000..881a8dd --- /dev/null +++ b/example/src/Data/Example.elm @@ -0,0 +1,187 @@ +module Data.Example exposing (Model, Msg, init, subscriptions, toCardList, update, view) + +import Data.Style exposing (Style) +import Element exposing (Element) +import Example.Button as Button +import Example.ExpansionPanel as ExpansionPanel +import Example.MultiSelect as MultiSelect +import Example.Select as Select +import Example.Tab as Tab +import Framework.Grid as Grid +import View.Test as Test + + +type Msg + = Button Button.Msg + | Select Select.Msg + | MultiSelect MultiSelect.Msg + | ExpansionPanel ExpansionPanel.Msg + | Tab Tab.Msg + + +type alias Model = + { button : Button.Model + , select : Select.Model + , multiSelect : MultiSelect.Model + , expansionPanel : ExpansionPanel.Model + , tab : Tab.Model + } + + +init : ( Model, Cmd Msg ) +init = + let + ( buttonModel, buttonMsg ) = + Button.init + + ( selectModel, selectMsg ) = + Select.init + + ( multiSelectModel, multiSelectMsg ) = + MultiSelect.init + + ( expansionPanelModel, expansionPanelMsg ) = + ExpansionPanel.init + + ( tabModel, tabMsg ) = + Tab.init + in + ( { button = buttonModel + , select = selectModel + , multiSelect = multiSelectModel + , expansionPanel = expansionPanelModel + , tab = tabModel + } + , [ Cmd.map Button buttonMsg + , Cmd.map Select selectMsg + , Cmd.map MultiSelect multiSelectMsg + , Cmd.map Tab tabMsg + ] + |> Cmd.batch + ) + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg model = + case msg of + Button buttonMsg -> + Button.update buttonMsg model.button + |> Tuple.mapBoth + (\a -> { model | button = a }) + (Cmd.map Button) + + Select selectMsg -> + Select.update selectMsg model.select + |> Tuple.mapBoth + (\a -> { model | select = a }) + (Cmd.map Select) + + MultiSelect multiSelectMsg -> + MultiSelect.update multiSelectMsg model.multiSelect + |> Tuple.mapBoth + (\a -> { model | multiSelect = a }) + (Cmd.map MultiSelect) + + ExpansionPanel expansionPanelMsg -> + ExpansionPanel.update expansionPanelMsg model.expansionPanel + |> Tuple.mapBoth + (\a -> { model | expansionPanel = a }) + (Cmd.map ExpansionPanel) + + Tab tabMsg -> + Tab.update tabMsg model.tab + |> Tuple.mapBoth + (\a -> { model | tab = a }) + (Cmd.map Tab) + + +subscriptions : Model -> Sub Msg +subscriptions model = + [ Button.subscriptions model.button |> Sub.map Button + , Select.subscriptions model.select |> Sub.map Select + , MultiSelect.subscriptions model.multiSelect |> Sub.map MultiSelect + , ExpansionPanel.subscriptions model.expansionPanel |> Sub.map ExpansionPanel + , Tab.subscriptions model.tab |> Sub.map Tab + ] + |> Sub.batch + + +view : + (Msg -> msg) + -> Style msg + -> Model + -> + { button : Element msg + , select : Element msg + , multiSelect : Element msg + , expansionPanel : Element msg + , tab : Element msg + } +view msgMapper style model = + { button = + Button.view + (Button >> msgMapper) + style + model.button + , select = + Select.view + (Select >> msgMapper) + style + model.select + , multiSelect = + MultiSelect.view + (MultiSelect >> msgMapper) + style + model.multiSelect + , expansionPanel = + ExpansionPanel.view + (ExpansionPanel >> msgMapper) + style + model.expansionPanel + , tab = + Tab.view + (Tab >> msgMapper) + style + model.tab + } + + +toCardList : + { idle : msg + , msgMapper : Msg -> msg + , style : Style msg + , model : Model + } + -> List ( String, Element msg, Element msg ) +toCardList { idle, msgMapper, style, model } = + [ { title = "Icon Button" + , example = .button + , test = Test.iconButton + } + , { title = "Select" + , example = .select + , test = Test.select + } + , { title = "Multi Select" + , example = .multiSelect + , test = Test.multiSelect + } + , { title = "Expansion Panel" + , example = .expansionPanel + , test = Test.expansionPanel + } + , { title = "Tab" + , example = .tab + , test = Test.tab + } + ] + |> List.map + (\{ title, example, test } -> + ( title + , model + |> view msgMapper style + |> example + , test idle style + |> Element.column Grid.simple + ) + ) diff --git a/example/src/Data/Style/ElmUiFramework.elm b/example/src/Data/Style/ElmUiFramework.elm index 5f11b08..b16d5cc 100644 --- a/example/src/Data/Style/ElmUiFramework.elm +++ b/example/src/Data/Style/ElmUiFramework.elm @@ -29,7 +29,7 @@ textButton = simpleButton : ButtonStyle msg simpleButton = - { container = Button.simple ++ Color.primary + { container = Button.simple ++ Color.success , labelRow = Grid.simple , ifDisabled = Color.disabled , ifActive = Color.primary @@ -211,7 +211,7 @@ row = cardColumn : ColumnStyle msg cardColumn = - { containerColumn = Grid.compact + { containerColumn = Grid.compact ++ [Element.height <| Element.fill] , element = Card.large ++ [Element.height <| Element.fill] , ifFirst = Group.top , ifLast = Group.bottom diff --git a/example/src/Example/Button.elm b/example/src/Example/Button.elm new file mode 100644 index 0000000..36211f0 --- /dev/null +++ b/example/src/Example/Button.elm @@ -0,0 +1,83 @@ +module Example.Button exposing (Model, Msg, init, subscriptions, update, view) + +import Element exposing (Element) +import FeatherIcons +import Widget +import Widget.Style exposing (ButtonStyle) + + +type alias Style style msg = + { style + | primaryButton : ButtonStyle msg + , button : ButtonStyle msg + } + + +type alias Model = + { isButtonEnabled : Bool + } + + +type Msg + = ChangedButtonStatus Bool + + +init : ( Model, Cmd Msg ) +init = + ( { isButtonEnabled = True + } + , Cmd.none + ) + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg model = + case msg of + ChangedButtonStatus bool -> + ( { model | isButtonEnabled = bool } + , Cmd.none + ) + + +subscriptions : Model -> Sub Msg +subscriptions _ = + Sub.none + + +view : (Msg -> msg) -> Style style msg -> Model -> Element msg +view msgMapper style model = + [ Widget.button style.primaryButton + { text = "disable me" + , icon = + FeatherIcons.slash + |> FeatherIcons.withSize 16 + |> FeatherIcons.toHtml [] + |> Element.html + |> Element.el [] + , onPress = + if model.isButtonEnabled then + ChangedButtonStatus False + |> msgMapper + |> Just + + else + Nothing + } + , Widget.iconButton style.button + { text = "reset" + , icon = + FeatherIcons.repeat + |> FeatherIcons.withSize 16 + |> FeatherIcons.toHtml [] + |> Element.html + |> Element.el [] + , onPress = + ChangedButtonStatus True + |> msgMapper + |> Just + } + ] + |> Element.row + [ Element.spaceEvenly + , Element.width <| Element.fill + ] diff --git a/example/src/Example/ExpansionPanel.elm b/example/src/Example/ExpansionPanel.elm new file mode 100644 index 0000000..69cb3c3 --- /dev/null +++ b/example/src/Example/ExpansionPanel.elm @@ -0,0 +1,53 @@ +module Example.ExpansionPanel exposing (Model, Msg, init, subscriptions, update, view) + +import Element exposing (Element) +import Widget +import Widget.Style exposing (ExpansionPanelStyle) + + +type alias Style style msg = + { style + | expansionPanel : ExpansionPanelStyle msg + } + + +type alias Model = + { isExpanded : Bool } + + +type Msg + = ToggleCollapsable Bool + + +init : ( Model, Cmd Msg ) +init = + ( { isExpanded = False } + , Cmd.none + ) + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg model = + case msg of + ToggleCollapsable bool -> + ( { model + | isExpanded = bool + } + , Cmd.none + ) + + +subscriptions : Model -> Sub Msg +subscriptions _ = + Sub.none + + +view : (Msg -> msg) -> Style style msg -> Model -> Element msg +view msgMapper style model = + { onToggle = ToggleCollapsable >> msgMapper + , isExpanded = model.isExpanded + , icon = Element.none + , text = "Title" + , content = Element.text <| "Hello World" + } + |> Widget.expansionPanel style.expansionPanel diff --git a/example/src/Example/MultiSelect.elm b/example/src/Example/MultiSelect.elm new file mode 100644 index 0000000..977d4ec --- /dev/null +++ b/example/src/Example/MultiSelect.elm @@ -0,0 +1,72 @@ +module Example.MultiSelect exposing (Model, Msg, init, subscriptions, update, view) + +import Element exposing (Element) +import Set exposing (Set) +import Widget +import Widget.Style exposing (ButtonStyle, RowStyle) + + +type alias Style style msg = + { style + | row : RowStyle msg + , button : ButtonStyle msg + } + + +type alias Model = + { selected : Set Int + } + + +type Msg + = ChangedSelected Int + + +init : ( Model, Cmd Msg ) +init = + ( { selected = Set.empty } + , Cmd.none + ) + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg model = + case msg of + ChangedSelected int -> + ( { model + | selected = + model.selected + |> (if model.selected |> Set.member int then + Set.remove int + + else + Set.insert int + ) + } + , Cmd.none + ) + + +subscriptions : Model -> Sub Msg +subscriptions _ = + Sub.none + + +view : (Msg -> msg) -> Style style msg -> Model -> Element msg +view msgMapper style model = + { selected = model.selected + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = ChangedSelected >> msgMapper >> Just + } + |> Widget.multiSelect + |> Widget.buttonRow + { list = style.row + , button = style.button + } diff --git a/example/src/Example/Select.elm b/example/src/Example/Select.elm new file mode 100644 index 0000000..fbebe32 --- /dev/null +++ b/example/src/Example/Select.elm @@ -0,0 +1,64 @@ +module Example.Select exposing (Model, Msg, init, subscriptions, update, view) + +import Element exposing (Attribute, Element) +import FeatherIcons +import Widget +import Widget.Style exposing (ButtonStyle, RowStyle) + + +type alias Style style msg = + { style + | row : RowStyle msg + , button : ButtonStyle msg + } + + +type alias Model = + { selected : Maybe Int } + + +type Msg + = ChangedSelected Int + + +init : ( Model, Cmd Msg ) +init = + ( { selected = Nothing } + , Cmd.none + ) + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg model = + case msg of + ChangedSelected int -> + ( { model + | selected = Just int + } + , Cmd.none + ) + + +subscriptions : Model -> Sub Msg +subscriptions _ = + Sub.none + + +view : (Msg -> msg) -> Style style msg -> Model -> Element msg +view msgMapper style model = + { selected = model.selected + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = ChangedSelected >> msgMapper >> Just + } + |> Widget.select + |> Widget.buttonRow + { list = style.row + , button = style.button + } diff --git a/example/src/Example/Tab.elm b/example/src/Example/Tab.elm new file mode 100644 index 0000000..9da1e79 --- /dev/null +++ b/example/src/Example/Tab.elm @@ -0,0 +1,76 @@ +module Example.Tab exposing (Model, Msg, init, subscriptions, update, view) + +import Element exposing (Element) +import Widget +import Widget.Style exposing (TabStyle) + + +type alias Style style msg = + { style + | tab : TabStyle msg + } + + +type alias Model = + { selected : Maybe Int + } + + +type Msg + = ChangedTab Int + + +init : ( Model, Cmd Msg ) +init = + ( { selected = Nothing + } + , Cmd.none + ) + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg model = + case msg of + ChangedTab int -> + ( { model | selected = Just int } + , Cmd.none + ) + + +subscriptions : Model -> Sub Msg +subscriptions _ = + Sub.none + + +view : (Msg -> msg) -> Style style msg -> Model -> Element msg +view msgMapper style model = + Widget.tab style.tab + { tabs = + { selected = model.selected + , options = + [ 1, 2, 3 ] + |> List.map + (\int -> + { text = "Tab " ++ (int |> String.fromInt) + , icon = Element.none + } + ) + , onSelect = ChangedTab >> msgMapper >> Just + } + , content = + \selected -> + (case selected of + Just 0 -> + "This is Tab 1" + + Just 1 -> + "This is the second tab" + + Just 2 -> + "The thrid and last tab" + + _ -> + "Please select a tab" + ) + |> Element.text + } diff --git a/example/src/Example.elm b/example/src/Main.elm similarity index 92% rename from example/src/Example.elm rename to example/src/Main.elm index 1b3674a..10dc053 100644 --- a/example/src/Example.elm +++ b/example/src/Main.elm @@ -1,4 +1,4 @@ -module Example exposing (main) +module Main exposing (main) import Array import Browser @@ -6,6 +6,8 @@ import Browser.Dom as Dom exposing (Viewport) import Browser.Events as Events import Browser.Navigation as Navigation import Data.Section as Section exposing (Section(..)) +import Data.Style as Style exposing (Style) +import Data.Theme as Theme exposing (Theme(..)) import Element exposing (Attribute, DeviceClass(..), Element) import Element.Border as Border import Element.Font as Font @@ -32,15 +34,10 @@ import Widget import Widget.ScrollingNav as ScrollingNav import Widget.Snackbar as Snackbar import Widget.Style exposing (ButtonStyle) -import Data.Style as Style exposing (Style) -import Data.Theme as Theme exposing (Theme(..)) - - type alias LoadedModel = { stateless : Stateless.Model - , reusable : Reusable.Model , scrollingNav : ScrollingNav.Model Section , layout : Layout LoadedMsg , displayDialog : Bool @@ -61,7 +58,6 @@ type Model type LoadedMsg = StatelessSpecific Stateless.Msg - | ReusableSpecific Reusable.Msg | UpdateScrollingNav (ScrollingNav.Model Section -> ScrollingNav.Model Section) | TimePassed Int | AddSnackbar ( String, Bool ) @@ -97,9 +93,11 @@ initialModel { viewport } = Err _ -> Idle } + + ( stateless, statelessCmd ) = + Stateless.init in - ( { stateless = Stateless.init - , reusable = Reusable.init + ( { stateless = stateless , scrollingNav = scrollingNav , layout = Layout.init , displayDialog = False @@ -114,7 +112,10 @@ initialModel { viewport } = } , theme = ElmUiFramework } - , cmd + , [ cmd + , statelessCmd |> Cmd.map StatelessSpecific + ] + |> Cmd.batch ) @@ -127,7 +128,6 @@ init () = view : Model -> Html Msg view model = - case model of Loading -> Element.none |> Framework.responsiveLayout [] @@ -173,8 +173,6 @@ view model = ReusableViews -> Reusable.view m.theme { addSnackbar = AddSnackbar - , model = m.reusable - , msgMapper = ReusableSpecific } StatelessViews -> @@ -198,10 +196,10 @@ view model = , items |> (if m.search.current /= "" then List.filter - (\(a,_,_) -> + (\( a, _, _ ) -> a - |> String.toLower - |> String.contains (m.search.current |> String.toLower) + |> String.toLower + |> String.contains (m.search.current |> String.toLower) ) else @@ -209,10 +207,13 @@ view model = ) |> List.map (\( name, elem, more ) -> - [ Element.text name - |> Element.el Heading.h3 - , elem + [ [ Element.text name + |> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink ]) + , elem + ] + |> Element.column Grid.simple , more + |> Element.el [ Element.height <| Element.fill ] ] |> Widget.column style.cardColumn ) @@ -226,7 +227,7 @@ view model = |> Element.column Framework.container ] |> Element.column Grid.compact - , style =style + , style = style , layout = m.layout , window = m.window , menu = @@ -247,17 +248,21 @@ view model = , text = "Github" , icon = Icons.github |> Element.html |> Element.el [] } - , { onPress = if m.theme /= ElmUiFramework then - Just <| SetTheme <| ElmUiFramework - else - Nothing + , { onPress = + if m.theme /= ElmUiFramework then + Just <| SetTheme <| ElmUiFramework + + else + Nothing , text = "Elm-Ui-Framework Theme" , icon = Icons.penTool |> Element.html |> Element.el [] } - , { onPress = if m.theme /= Template then - Just <| SetTheme <| Template - else - Nothing + , { onPress = + if m.theme /= Template then + Just <| SetTheme <| Template + + else + Nothing , text = "Template Theme" , icon = Icons.penTool |> Element.html |> Element.el [] } @@ -291,17 +296,6 @@ view model = updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg ) updateLoaded msg model = case msg of - ReusableSpecific m -> - ( model.reusable - |> Reusable.update m - |> (\reusable -> - { model - | reusable = reusable - } - ) - , Cmd.none - ) - StatelessSpecific m -> model.stateless |> Stateless.update m @@ -408,7 +402,7 @@ updateLoaded msg model = } , Cmd.none ) - + SetTheme theme -> ( { model | theme = theme } , Cmd.none diff --git a/example/src/Reusable.elm b/example/src/Reusable.elm index a87b5ef..cf8e3fa 100644 --- a/example/src/Reusable.elm +++ b/example/src/Reusable.elm @@ -1,4 +1,4 @@ -module Reusable exposing (Model, Msg, init, update, view) +module Reusable exposing ( view) import Browser import Element exposing (Color, Element) @@ -22,17 +22,9 @@ import Time import Widget import Widget.ScrollingNav as ScrollingNav import Widget.Snackbar as Snackbar -import Widget.SortTable as SortTable import Data.Style exposing (Style) import Data.Theme as Theme exposing (Theme) -type alias Model = - SortTable.Model - - -type Msg - = SortBy { title : String, asc : Bool } - type alias Item = { name : String @@ -41,17 +33,6 @@ type alias Item = } -update : Msg -> Model -> Model -update msg model = - case msg of - SortBy m -> - m - - -init : Model -init = - SortTable.sortBy { title = "Name", asc = True } - snackbar : Style msg -> (( String, Bool ) -> msg) -> ( String, Element msg,Element msg ) snackbar style addSnackbar = @@ -82,78 +63,7 @@ snackbar style addSnackbar = ) -sortTable : Style Msg -> SortTable.Model -> ( String, Element Msg,Element Msg ) -sortTable style model = - ( "Sort Table" - , SortTable.view - { content = - [ { id = 1, name = "Antonio", rating = 2.456 } - , { id = 2, name = "Ana", rating = 1.34 } - , { id = 3, name = "Alfred", rating = 4.22 } - , { id = 4, name = "Thomas", rating = 3 } - ] - , columns = - [ SortTable.intColumn - { title = "Id" - , value = .id - , toString = \int -> "#" ++ String.fromInt int - } - , SortTable.stringColumn - { title = "Name" - , value = .name - , toString = identity - } - , SortTable.floatColumn - { title = "rating" - , value = .rating - , toString = String.fromFloat - } - ] - , model = model - } - |> (\{ data, columns } -> - { data = data - , columns = - columns - |> List.map - (\config -> - { header = - Input.button [ Font.bold ] - { onPress = - { title = config.header - , asc = - if config.header == model.title then - not model.asc - else - True - } - |> SortBy - |> Just - , label = - if config.header == model.title then - [ config.header |> Element.text - , Element.html <| - if model.asc then - Heroicons.cheveronUp [ Attributes.width 16 ] - - else - Heroicons.cheveronDown [ Attributes.width 16 ] - ] - |> Element.row (Grid.simple ++ [ Font.bold ]) - - else - config.header |> Element.text - } - , view = config.view >> Element.text - , width = Element.fill - } - ) - } - ) - |> Element.table Grid.simple - , Element.none - ) scrollingNavCard : Style msg -> ( String, Element msg, Element msg ) @@ -169,15 +79,13 @@ scrollingNavCard style = view : Theme -> { addSnackbar : ( String, Bool ) -> msg - , msgMapper : Msg -> msg - , model : Model } -> { title : String , description : String , items : List ( String, Element msg,Element msg ) } -view theme { addSnackbar, msgMapper, model } = +view theme { addSnackbar } = let style = Theme.toStyle theme in @@ -185,8 +93,6 @@ view theme { addSnackbar, msgMapper, model } = , description = "Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated." , items = [ snackbar style addSnackbar - , sortTable style model |> \(a,b,c) -> - (a,b |> Element.map msgMapper,c |> Element.map msgMapper) , scrollingNavCard style ] } diff --git a/example/src/Stateless.elm b/example/src/Stateless.elm index 8487d25..c70301c 100644 --- a/example/src/Stateless.elm +++ b/example/src/Stateless.elm @@ -1,96 +1,66 @@ module Stateless exposing (Model, Msg, init, update, view) -import Array exposing (Array) +import Array +import Data.Example as Example import Data.Style exposing (Style) +import Data.Theme as Theme exposing (Theme) import Element exposing (Element) import Element.Background as Background -import Element.Border as Border -import Element.Font as Font -import Element.Input as Input -import Framework.Button as Button import Framework.Card as Card import Framework.Color as Color import Framework.Grid as Grid -import Framework.Group as Group -import Framework.Heading as Heading -import Framework.Input as Input -import Framework.Tag as Tag import Heroicons.Solid as Heroicons -import Html exposing (Html) import Html.Attributes as Attributes import Icons import Layout exposing (Part(..)) import Set exposing (Set) import Widget -import Widget.Style exposing (ButtonStyle) -import Data.Theme as Theme exposing (Theme) + type alias Model = - { selected : Maybe Int - , multiSelected : Set Int - , chipTextInput : Set String - , isExpanded : Bool + { chipTextInput : Set String , carousel : Int - , tab : Maybe Int - , button : Bool , textInput : String + , table : { title : String, asc : Bool } + , example : Example.Model } type Msg - = ChangedSelected Int - | ChangedMultiSelected Int - | ToggleCollapsable Bool - | ToggleTextInputChip String - | ChangedTab Int + = ToggleTextInputChip String | SetCarousel Int - | ToggleButton Bool | SetTextInput String + | ChangedSorting String + | ExampleSpecific Example.Msg | Idle -init : Model +init : ( Model, Cmd Msg ) init = - { selected = Nothing - , multiSelected = Set.empty - , chipTextInput = Set.empty - , isExpanded = False - , carousel = 0 - , tab = Just 1 - , button = True - , textInput = "" - } + let + ( example, cmd ) = + Example.init + in + ( { chipTextInput = Set.empty + , carousel = 0 + , textInput = "" + , table = { title = "Name", asc = True } + , example = example + } + , cmd |> Cmd.map ExampleSpecific + ) update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of - ChangedSelected int -> - ( { model - | selected = Just int - } - , Cmd.none - ) - - ChangedMultiSelected int -> - ( { model - | multiSelected = - model.multiSelected - |> (if model.multiSelected |> Set.member int then - Set.remove int - - else - Set.insert int - ) - } - , Cmd.none - ) - - ToggleCollapsable bool -> - ( { model - | isExpanded = bool - } - , Cmd.none + ExampleSpecific exampleMsg -> + let + ( exampleModel, exampleCmd ) = + Example.update exampleMsg model.example + in + ( { model | example = exampleModel } + , exampleCmd |> Cmd.map ExampleSpecific ) ToggleTextInputChip string -> @@ -118,127 +88,30 @@ update msg model = , Cmd.none ) - ChangedTab int -> - ( { model | tab = Just int }, Cmd.none ) - - ToggleButton bool -> - ( { model | button = bool }, Cmd.none ) - SetTextInput string -> ( { model | textInput = string }, Cmd.none ) + ChangedSorting string -> + ( { model + | table = + { title = string + , asc = + if model.table.title == string then + not model.table.asc + + else + True + } + } + , Cmd.none + ) + Idle -> ( model, Cmd.none ) -select : Style Msg -> Model -> ( String, Element Msg,Element Msg ) -select style model = - let - buttonStyle = - style.button - in - ( "Select" - , { selected = model.selected - , options = - [ 1, 2, 42 ] - |> List.map - (\int -> - { text = String.fromInt int - , icon = Element.none - } - ) - , onSelect = ChangedSelected >> Just - } - |> Widget.select - |> Widget.buttonRow - { list = style.row - , button = style.button - } - , Element.none - ) - - -multiSelect : Style Msg -> Model -> ( String, Element Msg, Element Msg ) -multiSelect style model = - let - buttonStyle = - style.button - in - ( "Multi Select" - , { selected = model.multiSelected - , options = - [ 1, 2, 42 ] - |> List.map - (\int -> - { text = String.fromInt int - , icon = Element.none - } - ) - , onSelect = ChangedMultiSelected >> Just - } - |> Widget.multiSelect - |> Widget.buttonRow - { list = style.row - , button = style.button - } - , Element.none - ) - -expansionPanel : Style Msg -> Model -> (String,Element Msg,Element Msg) -expansionPanel style model = - ( "Expansion Panel" - , { onToggle = ToggleCollapsable - , isExpanded = model.isExpanded - , icon = Element.none - , text = "Title" - , content = Element.text <| "Hello World" - } - |>Widget.expansionPanel style.expansionPanel - , Element.none - ) - - - - -tab : Style Msg -> Model -> ( String, Element Msg, Element Msg ) -tab style model = - ( "Tab" - , Widget.tab style.tab - { tabs = - { selected = model.tab - , options = - [ 1, 2, 3 ] - |> List.map - (\int -> - { text = "Tab " ++ (int |> String.fromInt) - , icon = Element.none - } - ) - , onSelect = ChangedTab >> Just - } - , content = - \selected -> - (case selected of - Just 0 -> - "This is Tab 1" - - Just 1 -> - "This is the second tab" - - Just 2 -> - "The thrid and last tab" - - _ -> - "Please select a tab" - ) - |> Element.text - } - , Element.none - ) - - -modal : Style msg -> (Maybe Part -> msg) -> Model -> ( String, Element msg,Element msg ) -modal style changedSheet model = +modal : Style msg -> (Maybe Part -> msg) -> Model -> ( String, Element msg, Element msg ) +modal style changedSheet _ = ( "Modal" , [ Widget.button style.button { onPress = Just <| changedSheet <| Just LeftSheet @@ -252,12 +125,12 @@ modal style changedSheet model = } ] |> Element.column Grid.simple - ,Element.none + , Element.none ) dialog : Style msg -> msg -> Model -> ( String, Element msg, Element msg ) -dialog style showDialog model = +dialog style showDialog _ = ( "Dialog" , Widget.button style.button { onPress = Just showDialog @@ -330,66 +203,6 @@ carousel style model = ) -iconButton : Style Msg -> Model -> ( String, Element Msg, Element Msg ) -iconButton style model = - ( "Icon Button" - , [ Widget.button style.primaryButton - { text = "disable me" - , icon = Icons.slash |> Element.html |> Element.el [] - , onPress = - if model.button then - Just <| ToggleButton False - - else - Nothing - } - , Widget.iconButton style.button - { text = "reset" - , icon = Icons.repeat |> Element.html |> Element.el [] - , onPress = Just <| ToggleButton True - } - ] - |> Element.row Grid.simple - , Element.column Grid.simple - [ Element.row Grid.spacedEvenly - [ "Button" - |> Element.text - , Widget.button style.button - { text = "reset" - , icon = Icons.repeat |> Element.html |> Element.el [] - , onPress = Just <| ToggleButton True - } - ] - , Element.row Grid.spacedEvenly - [ "Text button" - |> Element.text - , Widget.textButton style.button - { text = "reset" - , onPress = Just <| ToggleButton True - } - ] - , Element.row Grid.spacedEvenly - [ "Button" - |> Element.text - , Widget.iconButton style.button - { text = "reset" - , icon = Icons.repeat |> Element.html |> Element.el [] - , onPress = Just <| ToggleButton True - } - ] - , Element.row Grid.spacedEvenly - [ "Disabled button" - |> Element.text - , Widget.button style.button - { text = "reset" - , icon = Icons.repeat |> Element.html |> Element.el [] - , onPress = Nothing - } - ] - ] - ) - - textInput : Style Msg -> Model -> ( String, Element Msg, Element Msg ) textInput style model = ( "Chip Text Input" @@ -432,16 +245,112 @@ textInput style model = |> Element.wrappedRow [ Element.spacing 10 ] ] |> Element.column Grid.simple + , [ Element.row Grid.spacedEvenly + [ "Nothing Selected" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { chips = [] + , text = "" + , placeholder = Nothing + , label = "Label" + , onChange = always Idle + } + |> Widget.textInput style.textInput + ] + , Element.row Grid.spacedEvenly + [ "Some chips" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { chips = + [ { icon = Icons.triangle |> Element.html |> Element.el [] + , text = "A" + , onPress = Just Idle + } + , { icon = Icons.circle |> Element.html |> Element.el [] + , text = "B" + , onPress = Just Idle + } + ] + , text = "" + , placeholder = Nothing + , label = "Label" + , onChange = always Idle + } + |> Widget.textInput style.textInput + ] + ] + |> Element.column Grid.simple + ) + + +list : Style Msg -> Model -> ( String, Element Msg, Element Msg ) +list style _ = + ( "List" + , [ Element.text <| "A" + , Element.text <| "B" + , Element.text <| "C" + ] + |> Widget.column style.cardColumn + , Element.none + ) + + +sortTable : Style Msg -> Model -> ( String, Element Msg, Element Msg ) +sortTable _ model = + ( "Sort Table" + , Widget.sortTable + { containerTable = Grid.simple + , headerButton = + { container = [] + , labelRow = [] + , ifDisabled = [] + , ifActive = [] + } + , ascIcon = Heroicons.cheveronUp [ Attributes.width 16 ] |> Element.html + , descIcon = Heroicons.cheveronDown [ Attributes.width 16 ] |> Element.html + , defaultIcon = Element.none + } + { content = + [ { id = 1, name = "Antonio", rating = 2.456 } + , { id = 2, name = "Ana", rating = 1.34 } + , { id = 3, name = "Alfred", rating = 4.22 } + , { id = 4, name = "Thomas", rating = 3 } + ] + , columns = + [ Widget.intColumn + { title = "Id" + , value = .id + , toString = \int -> "#" ++ String.fromInt int + , width = Element.fill + } + , Widget.stringColumn + { title = "Name" + , value = .name + , toString = identity + , width = Element.fill + } + , Widget.floatColumn + { title = "rating" + , value = .rating + , toString = String.fromFloat + , width = Element.fill + } + ] + , asc = model.table.asc + , sortBy = model.table.title + , onChange = ChangedSorting + } , Element.none ) view : - Theme -> - { msgMapper : Msg -> msg - , showDialog : msg - , changedSheet : Maybe Part -> msg - } + Theme + -> + { msgMapper : Msg -> msg + , showDialog : msg + , changedSheet : Maybe Part -> msg + } -> Model -> { title : String @@ -450,9 +359,10 @@ view : } view theme { msgMapper, showDialog, changedSheet } model = let - style = Theme.toStyle theme + style = + Theme.toStyle theme - map (a,b,c) = + map ( a, b, c ) = ( a , b |> Element.map msgMapper , c |> Element.map msgMapper @@ -461,14 +371,17 @@ view theme { msgMapper, showDialog, changedSheet } model = { title = "Stateless Views" , description = "Stateless views are simple functions that view some content. No wiring required." , items = - [ iconButton style model |> map - , select style model |> map - , multiSelect style model |> map - , expansionPanel style model |> map - , modal style changedSheet model - , carousel style model |> map - , tab style model |> map - , dialog style showDialog model - , textInput style model |> map - ] + Example.toCardList + { idle = Idle |> msgMapper + , msgMapper = ExampleSpecific >> msgMapper + , style = style + , model = model.example + } + ++ [ modal style changedSheet model + , carousel style model |> map + , dialog style showDialog model + , textInput style model |> map + , list style model |> map + , sortTable style model |> map + ] } diff --git a/example/src/View/Test.elm b/example/src/View/Test.elm new file mode 100644 index 0000000..2264e7f --- /dev/null +++ b/example/src/View/Test.elm @@ -0,0 +1,390 @@ +module View.Test exposing (expansionPanel, iconButton, multiSelect, select, tab) + +import Array +import Data.Style exposing (Style) +import Data.Theme as Theme exposing (Theme) +import Element exposing (Element) +import Element.Background as Background +import Framework.Card as Card +import Framework.Color as Color +import Framework.Grid as Grid +import Heroicons.Solid as Heroicons +import Html.Attributes as Attributes +import Icons +import Layout exposing (Part(..)) +import Set exposing (Set) +import Widget + + +iconButton : msg -> Style msg -> List (Element msg) +iconButton idle style = + [ Element.row Grid.spacedEvenly + [ "Button" + |> Element.text + , Widget.button style.button + { text = "Button" + , icon = Icons.triangle |> Element.html |> Element.el [] + , onPress = Just idle + } + ] + , Element.row Grid.spacedEvenly + [ "Text button" + |> Element.text + , Widget.textButton style.button + { text = "Button" + , onPress = Just idle + } + ] + , Element.row Grid.spacedEvenly + [ "Icon button" + |> Element.text + , Widget.iconButton style.button + { text = "Button" + , icon = Icons.triangle |> Element.html |> Element.el [] + , onPress = Just idle + } + ] + , Element.row Grid.spacedEvenly + [ "Disabled button" + |> Element.text + , Widget.button style.button + { text = "Button" + , icon = Icons.triangle |> Element.html |> Element.el [] + , onPress = Nothing + } + ] + , Element.row Grid.spacedEvenly + [ "Inactive Select button" + |> Element.text + , Widget.selectButton style.button + ( False + , { text = "Button" + , icon = Icons.triangle |> Element.html |> Element.el [] + , onPress = Just idle + } + ) + ] + , Element.row Grid.spacedEvenly + [ "Active Select button" + |> Element.text + , Widget.selectButton style.button + ( True + , { text = "Button" + , icon = Icons.triangle |> Element.html |> Element.el [] + , onPress = Just idle + } + ) + ] + ] + + +select : msg -> Style msg -> List (Element msg) +select idle style = + [ Element.row Grid.spacedEvenly + [ "First selected" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Just 0 + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + |> Widget.select + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + , Element.row Grid.spacedEvenly + [ "Nothing selected" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Nothing + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + |> Widget.select + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + , Element.row Grid.spacedEvenly + [ "Invalid selection" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Just -1 + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + |> Widget.select + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + , Element.row Grid.spacedEvenly + [ "Disabled selection" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Just 0 + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always Nothing + } + |> Widget.select + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + , Element.row Grid.spacedEvenly + [ "Empty Options" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Nothing + , options = + [] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + |> Widget.select + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + ] + + +multiSelect : msg -> Style msg -> List (Element msg) +multiSelect idle style = + [ Element.row Grid.spacedEvenly + [ "Some selected" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Set.fromList [ 0, 1 ] + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + |> Widget.multiSelect + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + , Element.row Grid.spacedEvenly + [ "Nothing selected" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Set.empty + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + |> Widget.multiSelect + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + , Element.row Grid.spacedEvenly + [ "Invalid selection" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Set.singleton -1 + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + |> Widget.multiSelect + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + , Element.row Grid.spacedEvenly + [ "Disabled selection" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Set.singleton 0 + , options = + [ 1, 2, 42 ] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always Nothing + } + |> Widget.multiSelect + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + , Element.row Grid.spacedEvenly + [ "Empty Options" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { selected = Set.empty + , options = + [] + |> List.map + (\int -> + { text = String.fromInt int + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + |> Widget.multiSelect + |> Widget.buttonRow + { list = style.row + , button = style.button + } + ] + ] + + +expansionPanel : msg -> Style msg -> List (Element msg) +expansionPanel idle style = + [ Element.row Grid.spacedEvenly + [ "Collapsed" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { onToggle = always idle + , isExpanded = False + , icon = Icons.triangle |> Element.html |> Element.el [] + , text = "Button" + , content = Element.text <| "Hidden Message" + } + |> Widget.expansionPanel style.expansionPanel + ] + , Element.row Grid.spacedEvenly + [ "Expanded" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , { onToggle = always idle + , isExpanded = True + , icon = Icons.triangle |> Element.html |> Element.el [] + , text = "Button" + , content = Element.text <| "Hidden Message" + } + |> Widget.expansionPanel style.expansionPanel + ] + ] + + +tab : msg -> Style msg -> List (Element msg) +tab idle style = + [ Element.row Grid.spacedEvenly + [ "Nothing selected" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , Widget.tab style.tab + { tabs = + { selected = Nothing + , options = + [ 1, 2, 3 ] + |> List.map + (\int -> + { text = int |> String.fromInt + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + , content = + \selected -> + (case selected of + Nothing -> + "Please select a tab" + + _ -> + "" + ) + |> Element.text + } + ] + , Element.row Grid.spacedEvenly + [ "Tab selected" + |> Element.text + |> Element.el [ Element.width <| Element.fill ] + , Widget.tab style.tab + { tabs = + { selected = Just 0 + , options = + [ 1, 2, 3 ] + |> List.map + (\int -> + { text = int |> String.fromInt + , icon = Element.none + } + ) + , onSelect = always idle >> Just + } + , content = + \selected -> + (case selected of + Just 0 -> + "First Tab selected" + + _ -> + "Please select a tab" + ) + |> Element.text + } + ] + ] diff --git a/src/Internal/SortTable.elm b/src/Internal/SortTable.elm new file mode 100644 index 0000000..e2e41c1 --- /dev/null +++ b/src/Internal/SortTable.elm @@ -0,0 +1,181 @@ +module Internal.SortTable exposing + ( Column + , ColumnType + , SortTable + , floatColumn + , intColumn + , sortTable + , stringColumn + , unsortableColumn + ) + +import Element exposing (Element, Length) +import Internal.Button as Button +import Widget.Style exposing (SortTableStyle) + + +{-| A Sortable list allows you to sort coulmn. +-} +type ColumnType a + = StringColumn { value : a -> String, toString : String -> String } + | IntColumn { value : a -> Int, toString : Int -> String } + | FloatColumn { value : a -> Float, toString : Float -> String } + | UnsortableColumn (a -> String) + + +{-| The Model contains the sorting column name and if ascending or descending. +-} +type alias SortTable a msg = + { content : List a + , columns : List (Column a) + , sortBy : String + , asc : Bool + , onChange : String -> msg + } + + +type Column a + = Column + { title : String + , content : ColumnType a + , width : Length + } + + +unsortableColumn : { title : String, toString : a -> String, width : Length } -> Column a +unsortableColumn { title, toString, width } = + Column + { title = title + , content = UnsortableColumn toString + , width = width + } + + +{-| A Column containing a Int +-} +intColumn : { title : String, value : a -> Int, toString : Int -> String, width : Length } -> Column a +intColumn { title, value, toString, width } = + Column + { title = title + , content = IntColumn { value = value, toString = toString } + , width = width + } + + +{-| A Column containing a Float +-} +floatColumn : { title : String, value : a -> Float, toString : Float -> String, width : Length } -> Column a +floatColumn { title, value, toString, width } = + Column + { title = title + , content = FloatColumn { value = value, toString = toString } + , width = width + } + + +{-| A Column containing a String +-} +stringColumn : { title : String, value : a -> String, toString : String -> String, width : Length } -> Column a +stringColumn { title, value, toString, width } = + Column + { title = title + , content = StringColumn { value = value, toString = toString } + , width = width + } + + +{-| The View +-} +sortTable : + SortTableStyle msg + -> SortTable a msg + -> Element msg +sortTable style model = + let + findTitle : List (Column a) -> Maybe (ColumnType a) + findTitle list = + case list of + [] -> + Nothing + + (Column head) :: tail -> + if head.title == model.sortBy then + Just head.content + + else + findTitle tail + in + Element.table style.containerTable + { data = + model.content + |> (model.columns + |> findTitle + |> Maybe.andThen + (\c -> + case c of + StringColumn { value } -> + Just <| List.sortBy value + + IntColumn { value } -> + Just <| List.sortBy value + + FloatColumn { value } -> + Just <| List.sortBy value + + UnsortableColumn _ -> + Nothing + ) + |> Maybe.withDefault identity + ) + |> (if model.asc then + identity + + else + List.reverse + ) + , columns = + model.columns + |> List.map + (\(Column column) -> + { header = + Button.button style.headerButton + { text = column.title + , icon = + if column.title == model.sortBy then + if model.asc then + style.ascIcon + + else + style.descIcon + + else + style.defaultIcon + , onPress = + case column.content of + UnsortableColumn _ -> + Nothing + + _ -> + Just <| model.onChange <| column.title + } + , width = column.width + , view = + (case column.content of + IntColumn { value, toString } -> + value >> toString + + FloatColumn { value, toString } -> + value >> toString + + StringColumn { value, toString } -> + value >> toString + + UnsortableColumn toString -> + toString + ) + >> Element.text + >> List.singleton + >> Element.paragraph [] + } + ) + } diff --git a/src/Widget.elm b/src/Widget.elm index 95a6888..38b08c0 100644 --- a/src/Widget.elm +++ b/src/Widget.elm @@ -3,8 +3,10 @@ module Widget exposing , Select, MultiSelect, selectButton, select, multiSelect , Dialog, modal, dialog , ExpansionPanel, expansionPanel + , row, column, buttonRow, buttonColumn + , ColumnType, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn , TextInputStyle, textInput, carousel, tab - , Tab, buttonColumn, buttonRow, column, row + , Tab ) {-| This module contains functions for displaying data. @@ -30,6 +32,16 @@ module Widget exposing @docs ExpansionPanel, expansionPanel +# List + +@docs row, column, buttonRow, buttonColumn + + +# SortTable + +@docs ColumnType, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn + + # Other Widgets @docs TextInputStyle, textInput, carousel, tab @@ -37,16 +49,17 @@ module Widget exposing -} import Array exposing (Array) -import Element exposing (Attribute, Element) +import Element exposing (Attribute, Element, Length) import Element.Input exposing (Placeholder) import Internal.Button as Button import Internal.Dialog as Dialog import Internal.ExpansionPanel as ExpansionPanel import Internal.List as List import Internal.Select as Select +import Internal.SortTable as SortTable import Internal.TextInput as TextInput import Set exposing (Set) -import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, TabStyle) +import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SortTableStyle, TabStyle) @@ -322,6 +335,87 @@ buttonColumn = +{---------------------------------------------------------- +- SORT TABLE +----------------------------------------------------------} + + +{-| A Sortable list allows you to sort coulmn. +-} +type alias ColumnType a = + SortTable.ColumnType a + + +type alias Column a = + SortTable.Column a + + +unsortableColumn : + { title : String + , toString : a -> String + , width : Length + } + -> Column a +unsortableColumn = + SortTable.unsortableColumn + + +{-| A Column containing a Int +-} +intColumn : + { title : String + , value : a -> Int + , toString : Int -> String + , width : Length + } + -> Column a +intColumn = + SortTable.intColumn + + +{-| A Column containing a Float +-} +floatColumn : + { title : String + , value : a -> Float + , toString : Float -> String + , width : Length + } + -> Column a +floatColumn = + SortTable.floatColumn + + +{-| A Column containing a String +-} +stringColumn : + { title : String + , value : a -> String + , toString : String -> String + , width : Length + } + -> Column a +stringColumn = + SortTable.stringColumn + + +{-| The View +-} +sortTable : + SortTableStyle msg + -> + { content : List a + , columns : List (Column a) + , sortBy : String + , asc : Bool + , onChange : String -> msg + } + -> Element msg +sortTable = + SortTable.sortTable + + + {---------------------------------------------------------- - OTHER STATELESS WIDGETS ----------------------------------------------------------} diff --git a/src/Widget/SortTable.elm b/src/Widget/SortTable.elm deleted file mode 100644 index 1b2e41e..0000000 --- a/src/Widget/SortTable.elm +++ /dev/null @@ -1,215 +0,0 @@ -module Widget.SortTable exposing - ( Model, init, view, sortBy - , intColumn, floatColumn, stringColumn - ) - -{-| A Sortable list allows you to sort coulmn. - - SortTable.view - { content = - [ {id = 1, name = "Antonio", rating = 2.456} - , {id = 2, name = "Ana", rating = 1.34} - , {id = 3, name = "Alfred", rating = 4.22} - , {id = 4, name = "Thomas", rating = 3 } - ] - , columns = - [ SortTable.intColumn - { title = "Id" - , value = .id - , toString = \int -> "#" ++ String.fromInt int - } - , SortTable.stringColumn - { title = "Name" - , value = .name - , toString = identity - } - , SortTable.floatColumn - { title = "rating" - , value = .rating - , toString = String.fromFloat - } - ] - , model = model - } - |> (\{data,columns} -> - {data = data - ,columns = columns - |> List.map (\config-> - { header = - Input.button [Font.bold] - { onPress = - { title = config.header - , asc = - if config.header == model.title then - not model.asc - else - True - } - |> SortBy - |> Just - , label = - if config.header == model.title then - [ config.header |> Element.text - , Element.text <| - if model.asc then - "/\" - else - "\/" - ] - |> Element.row [Font.bold] - else - config.header |> Element.text - } - , view = config.view >> Element.text - , width = Element.fill - } - ) - }) - |> Element.table [] - - -# Basics - -@docs Model, init, view, sortBy - - -# Columns - -@docs intColumn, floatColumn, stringColumn - --} - - -type ColumnType a - = StringColumn { value : a -> String, toString : String -> String } - | IntColumn { value : a -> Int, toString : Int -> String } - | FloatColumn { value : a -> Float, toString : Float -> String } - - -{-| The Model contains the sorting column name and if ascending or descending. --} -type alias Model = - { title : String - , asc : Bool - } - - -type alias Column a = - { title : String - , content : ColumnType a - } - - -{-| The initial State setting the sorting column name to the empty string. --} -init : Model -init = - { title = "", asc = True } - - -{-| A Column containing a Int --} -intColumn : { title : String, value : a -> Int, toString : Int -> String } -> Column a -intColumn { title, value, toString } = - { title = title - , content = IntColumn { value = value, toString = toString } - } - - -{-| A Column containing a Float --} -floatColumn : { title : String, value : a -> Float, toString : Float -> String } -> Column a -floatColumn { title, value, toString } = - { title = title - , content = FloatColumn { value = value, toString = toString } - } - - -{-| A Column containing a String --} -stringColumn : { title : String, value : a -> String, toString : String -> String } -> Column a -stringColumn { title, value, toString } = - { title = title - , content = StringColumn { value = value, toString = toString } - } - - -{-| Change the sorting criteras. - - sortBy = - identity - --} -sortBy : { title : String, asc : Bool } -> Model -sortBy = - identity - - -{-| The View --} -view : - { content : List a - , columns : List (Column a) - , model : Model - } - -> - { data : List a - , columns : List { header : String, view : a -> String } - } -view { content, columns, model } = - let - findTitle : List (Column a) -> Maybe (ColumnType a) - findTitle list = - case list of - [] -> - Nothing - - head :: tail -> - if head.title == model.title then - Just head.content - - else - findTitle tail - in - { data = - content - |> (columns - |> findTitle - |> Maybe.map - (\c -> - case c of - StringColumn { value } -> - List.sortBy value - - IntColumn { value } -> - List.sortBy value - - FloatColumn { value } -> - List.sortBy value - ) - |> Maybe.withDefault identity - ) - |> (if model.asc then - identity - - else - List.reverse - ) - , columns = - columns - |> List.map - (\column -> - { header = column.title - , view = - case column.content of - IntColumn { value, toString } -> - value >> toString - - FloatColumn { value, toString } -> - value >> toString - - StringColumn { value, toString } -> - value >> toString - } - ) - } diff --git a/src/Widget/Style.elm b/src/Widget/Style.elm index d88e328..5e8af81 100644 --- a/src/Widget/Style.elm +++ b/src/Widget/Style.elm @@ -1,4 +1,4 @@ -module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SnackbarStyle, Style, TabStyle, TextInputStyle) +module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SnackbarStyle, SortTableStyle, Style, TabStyle, TextInputStyle) import Element exposing (Attribute, Element) import Html exposing (Html) @@ -72,6 +72,15 @@ type alias ColumnStyle msg = } +type alias SortTableStyle msg = + { containerTable : List (Attribute msg) + , headerButton : ButtonStyle msg + , ascIcon : Element Never + , descIcon : Element Never + , defaultIcon : Element Never + } + + type alias Style style msg = { style | snackbar : SnackbarStyle msg