noredink-ui/styleguide-app/Examples/Table.elm

module Examples.Table exposing (Msg, State, example)

{-|

@docs Msg, State, example

-}

import Accessibility.Styled exposing (..)
import Category exposing (Category(..))
import Css exposing (..)
import Debug.Control as Control exposing (Control)
import Debug.Control.View as ControlView
import Example exposing (Example)
import Nri.Ui.Button.V10 as Button
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Table.V5 as Table exposing (Column)


{-| -}
type alias State =
    Control Settings


moduleName : String
moduleName =
    "Table"


version : Int
version =
    5


{-| -}
example : Example State Msg
example =
    { name = moduleName
    , version = version
    , state = controlSettings
    , update = update
    , subscriptions = \_ -> Sub.none
    , categories = [ Layout ]
    , keyboardSupport = []
    , preview =
        [ Table.view
            [ Table.string
                { header = "A"
                , value = .a
                , width = px 50
                , cellStyles = always []
                }
            , Table.string
                { header = "B"
                , value = .b
                , width = px 50
                , cellStyles = always []
                }
            ]
            [ { a = "Row 1 A"
              , b = "Row 1 B"
              }
            , { a = "Row 2 A"
              , b = "Row 2 B"
              }
            ]
        ]
    , view =
        \ellieLinkConfig state ->
            let
                columns =
                    [ Table.string
                        { header = "First Name"
                        , value = .firstName
                        , width = calc (pct 50) minus (px 250)
                        , cellStyles = always []
                        }
                    , Table.string
                        { header = "Last Name"
                        , value = .lastName
                        , width = calc (pct 50) minus (px 250)
                        , cellStyles = always []
                        }
                    , Table.string
                        { header = "# Submitted"
                        , value = .submitted >> String.fromInt
                        , width = px 125
                        , cellStyles =
                            \value ->
                                if value.submitted < 5 then
                                    [ backgroundColor Colors.redLight
                                    , textAlign center
                                    ]

                                else
                                    [ textAlign center ]
                        }
                    , Table.custom
                        { header = text "Actions"
                        , width = px 250
                        , view = \_ -> Button.button "Action" [ Button.small, Button.onClick (ConsoleLog "Clicked button!") ]
                        , cellStyles = always []
                        }
                    ]
            in
            [ ControlView.view
                { ellieLinkConfig = ellieLinkConfig
                , name = moduleName
                , version = version
                , update = UpdateControl
                , settings = state
                , mainType = "RootHtml.Html msg"
                , extraImports = []
                , toExampleCode = \settings -> [ { sectionName = moduleName ++ ".view", code = "TODO" } ]
                }
            , Heading.h2 [ Heading.style Heading.Subhead ] [ text "With header" ]
            , Table.view columns data
            , Heading.h2 [ Heading.style Heading.Subhead ] [ text "Without header" ]
            , Table.viewWithoutHeader columns data
            , Heading.h2 [ Heading.style Heading.Subhead ] [ text "Loading" ]
            , Table.viewLoading columns
            , Heading.h2 [ Heading.style Heading.Subhead ] [ text "Loading without header" ]
            , Table.viewLoadingWithoutHeader columns
            ]
    }


{-| -}
type Msg
    = UpdateControl (Control Settings)
    | ConsoleLog String


update : Msg -> State -> ( State, Cmd msg )
update msg state =
    case msg of
        UpdateControl control ->
            ( control, Cmd.none )

        ConsoleLog message ->
            ( Debug.log "Menu Example" message |> always state, Cmd.none )


type alias Settings =
    {}


controlSettings : Control Settings
controlSettings =
    Control.record Settings


type alias Data =
    { firstName : String
    , lastName : String
    , submitted : Int
    }


data : List Data
data =
    [ { firstName = "First1", lastName = "Last1", submitted = 10 }
    , { firstName = "First2", lastName = "Last2", submitted = 0 }
    , { firstName = "First3", lastName = "Last3", submitted = 3 }
    , { firstName = "First4", lastName = "Last4", submitted = 15 }
    , { firstName = "First5", lastName = "Last5", submitted = 8 }
    ]