From 9a2e767a826bd1d33ff1b71a5166146862e47e61 Mon Sep 17 00:00:00 2001 From: Martin Schindler Date: Fri, 27 Oct 2023 14:26:26 +0200 Subject: [PATCH] Add component for page header --- examples/src/Aggregation.elm | 22 +++++-------- examples/src/Basic.elm | 17 ++++------ examples/src/ColumnState.elm | 45 ++++++++++++-------------- examples/src/Components/Components.elm | 16 +++++++++ examples/src/CustomEditor.elm | 18 +++-------- examples/src/Export.elm | 15 +++------ examples/src/Grouping.elm | 17 ++++------ examples/src/RowSelection.elm | 15 +++------ 8 files changed, 71 insertions(+), 94 deletions(-) create mode 100644 examples/src/Components/Components.elm diff --git a/examples/src/Aggregation.elm b/examples/src/Aggregation.elm index 074ce23..44d3c15 100644 --- a/examples/src/Aggregation.elm +++ b/examples/src/Aggregation.elm @@ -3,10 +3,11 @@ module Aggregation exposing (Model, Msg, init, subscriptions, update, view) import AgGrid exposing (Renderer(..), defaultGridConfig, defaultSettings) import AgGrid.ContextMenu as AgGridContextMenu exposing (defaultActionAttributes) import AgGrid.Expression as Expression exposing (Eval(..)) +import Components.Components as Components import Css import Dict exposing (Dict) -import Html.Styled exposing (Html, a, div, h3, node, span, text) -import Html.Styled.Attributes exposing (css, href, target) +import Html.Styled exposing (Html, div, h3, node, text) +import Html.Styled.Attributes exposing (css) import Json.Decode as Decode import Json.Decode.Pipeline as DecodePipeline @@ -91,7 +92,7 @@ type Msg update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of - CellChanged (Err err) -> + CellChanged (Err _) -> ( model, Cmd.none ) CellChanged (Ok change) -> @@ -112,18 +113,11 @@ update msg model = view : Model -> Html Msg view model = - div [ css [ Css.width (Css.pct 100), Css.margin2 (Css.rem 0) (Css.rem 1) ] ] - [ div [ css [ Css.margin2 (Css.rem 1) (Css.px 0), Css.displayFlex, Css.alignItems Css.center ] ] - [ span [ css [ Css.fontSize (Css.rem 1.8), Css.marginRight (Css.px 5) ] ] [ text "Aggregations & Formatting" ] - , a [ href "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/Aggregation.elm", target "_blank" ] [ text "[source]" ] - ] - , div [ css [] ] - [ div [] [ text "Formatting values as currencies, decimals, or percentages utilizing the predefined CurrencyRenderer/DecimalRenderer/PercentRenderer and aggregating those values in the footer." ] - , div [ css [ Css.marginTop (Css.rem 1) ] ] [ text "This formatting can be customized by overwriting the valueFormatter expression on the column settings." ] - ] + Components.viewPage { headline = "Aggregations & Formatting", pageUrl = "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/Aggregation.elm" } + [ div [] [ text "Formatting values as currencies, decimals, or percentages utilizing the predefined CurrencyRenderer/DecimalRenderer/PercentRenderer and aggregating those values in the footer." ] + , div [ css [ Css.marginTop (Css.rem 1) ] ] [ text "This formatting can be customized by overwriting the valueFormatter expression on the column settings." ] , viewGrid model - , div [] - [ h3 [] [ text ("You increased the counter from the context menu " ++ String.fromInt model.counter ++ " times!") ] ] + , div [] [ h3 [] [ text ("You increased the counter from the context menu " ++ String.fromInt model.counter ++ " times!") ] ] ] diff --git a/examples/src/Basic.elm b/examples/src/Basic.elm index f1684ed..aa5b398 100644 --- a/examples/src/Basic.elm +++ b/examples/src/Basic.elm @@ -2,11 +2,12 @@ port module Basic exposing (Model, Msg, init, subscriptions, update, view) import AgGrid exposing (Renderer(..), defaultGridConfig, defaultSettings, defaultSidebar) import AgGrid.Expression as Expression +import Components.Components as Components import Css import Css.Global import Dict exposing (Dict) -import Html.Styled exposing (Html, a, div, input, span, text) -import Html.Styled.Attributes exposing (css, href, placeholder, style, target, value) +import Html.Styled exposing (Html, div, input, text) +import Html.Styled.Attributes exposing (css, placeholder, style, value) import Html.Styled.Events exposing (onInput) import Json.Decode import Json.Decode.Pipeline as DecodePipeline @@ -143,15 +144,9 @@ update msg model = view : Model -> Html Msg view model = - div [ css [ Css.width (Css.pct 100), Css.margin2 (Css.rem 0) (Css.rem 1) ] ] - [ div [ css [ Css.margin2 (Css.rem 1) (Css.px 0), Css.displayFlex, Css.alignItems Css.center ] ] - [ span [ css [ Css.fontSize (Css.rem 1.8), Css.marginRight (Css.px 5) ] ] [ text "Basic Grid" ] - , a [ href "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/Basic.elm", target "_blank" ] [ text "[source]" ] - ] - , div [ css [] ] - [ div [] [ text "Basic grid example display various CellRenderer for different data types (Strings, Integers, Boolean, Floats, Selection, Maybe values)." ] - , div [] [ text "Also displays the possibility to search, sort, pin columns, and rendering Elm apps into cells for a custom view that also communicate with the Main app." ] - ] + Components.viewPage { headline = "Basic Grid", pageUrl = "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/Basic.elm" } + [ div [] [ text "Basic grid example display various CellRenderer for different data types (Strings, Integers, Boolean, Floats, Selection, Maybe values)." ] + , div [] [ text "Also displays the possibility to search, sort, pin columns, and rendering Elm apps into cells for a custom view that also communicate with the Main app." ] , viewGrid model ] diff --git a/examples/src/ColumnState.elm b/examples/src/ColumnState.elm index e3c996c..b0ca6ea 100644 --- a/examples/src/ColumnState.elm +++ b/examples/src/ColumnState.elm @@ -2,9 +2,10 @@ port module ColumnState exposing (Model, Msg, init, subscriptions, update, view) import AgGrid exposing (Renderer(..), defaultGridConfig, defaultSettings, defaultSidebar) import AgGrid.Expression as Expression exposing (Eval(..)) +import Components.Components as Components import Css -import Html.Styled exposing (Html, a, button, div, node, span, text) -import Html.Styled.Attributes exposing (css, disabled, href, target, type_) +import Html.Styled exposing (Html, button, div, node, text) +import Html.Styled.Attributes exposing (css, disabled, type_) import Html.Styled.Events exposing (onClick) import Json.Decode as Decode import Json.Encode as Encode @@ -137,30 +138,24 @@ update msg model = view : Model -> Html Msg view model = - div [ css [ Css.width (Css.pct 100), Css.margin2 (Css.rem 0) (Css.rem 1) ] ] - [ div [ css [ Css.margin2 (Css.rem 1) (Css.px 0), Css.displayFlex, Css.alignItems Css.center ] ] - [ span [ css [ Css.fontSize (Css.rem 1.8), Css.marginRight (Css.px 5) ] ] [ text "ColumnState" ] - , a [ href "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/ColumnState.elm", target "_blank" ] [ text "[source]" ] + Components.viewPage { headline = "ColumnState", pageUrl = "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/ColumnState.elm" } + [ div [] + [ [ "The column state listens for certain events in the Ag-Grid (e.g. onSortChanged, onColumnMoved, onGridColumnsChanged, onColumnResized, onColumnVisible) and populates the current column state into an event." + , "This event can then be retrieved in Elm using \"onColumnStateChanged\". In addition, the state can be stored in external storage (e.g. Localstorage) and passed to the grid as \"columnStates\"." + , "AgGrid then updates the columns (hide, pinning, sort, order, ...) of the grid according to the column states. The absence of the \"columnStates\" resets the columns according to the defined ColumnDefs." + ] + |> List.map String.trim + |> String.join " " + |> text ] - , div [ css [] ] - [ div [] - [ [ "The column state listens for certain events in the Ag-Grid (e.g. onSortChanged, onColumnMoved, onGridColumnsChanged, onColumnResized, onColumnVisible) and populates the current column state into an event." - , "This event can then be retrieved in Elm using \"onColumnStateChanged\". In addition, the state can be stored in external storage (e.g. Localstorage) and passed to the grid as \"columnStates\"." - , "AgGrid then updates the columns (hide, pinning, sort, order, ...) of the grid according to the column states. The absence of the \"columnStates\" resets the columns according to the defined ColumnDefs." - ] - |> List.map String.trim - |> String.join " " - |> text - ] - , div [ css [ Css.marginTop (Css.rem 1) ] ] - [ [ "It is worth mentioning that we also update the ColumnDefs passed to the AgGrid view according to the \"columnStates\" in the GridConfig." - , "This is to ensure that updates to the ColumnDefs do not overwrite the \"columnState\"." - , "If you actually want to overwrite the cached column state, you can do so by simply deleting the columnStates on the GridConfig. Any change listeners that persist column state to external storage are then automatically retriggered." - ] - |> List.map String.trim - |> String.join " " - |> text - ] + , div [ css [ Css.marginTop (Css.rem 1) ] ] + [ [ "It is worth mentioning that we also update the ColumnDefs passed to the AgGrid view according to the \"columnStates\" in the GridConfig." + , "This is to ensure that updates to the ColumnDefs do not overwrite the \"columnState\"." + , "If you actually want to overwrite the cached column state, you can do so by simply deleting the columnStates on the GridConfig. Any change listeners that persist column state to external storage are then automatically retriggered." + ] + |> List.map String.trim + |> String.join " " + |> text ] , viewViewSelector model.gridView , case model.columnStorage of diff --git a/examples/src/Components/Components.elm b/examples/src/Components/Components.elm new file mode 100644 index 0000000..e6a453d --- /dev/null +++ b/examples/src/Components/Components.elm @@ -0,0 +1,16 @@ +module Components.Components exposing (viewPage) + +import Css +import Html.Styled exposing (Html, a, div, span, text) +import Html.Styled.Attributes exposing (css, href, target) + + +viewPage : { headline : String, pageUrl : String } -> List (Html msg) -> Html msg +viewPage { headline, pageUrl } content = + div [ css [ Css.width (Css.pct 100), Css.margin2 (Css.rem 0) (Css.rem 1) ] ] + (div [ css [ Css.margin2 (Css.rem 1) (Css.px 0), Css.displayFlex, Css.alignItems Css.center ] ] + [ span [ css [ Css.fontSize (Css.rem 1.8), Css.marginRight (Css.px 5) ] ] [ text headline ] + , a [ href pageUrl, target "_blank" ] [ text "[source]" ] + ] + :: content + ) diff --git a/examples/src/CustomEditor.elm b/examples/src/CustomEditor.elm index c4f03c2..95a92d7 100644 --- a/examples/src/CustomEditor.elm +++ b/examples/src/CustomEditor.elm @@ -2,13 +2,11 @@ module CustomEditor exposing (Model, init, view) import AgGrid exposing (Renderer(..), defaultGridConfig, defaultSettings) import AgGrid.Expression as Expression +import Components.Components as Components import Components.Editor as Editor import Css -import Html.Styled exposing (Html, a, button, div, node, span, text) -import Html.Styled.Attributes exposing (css, href, target) -import Html.Styled.Events exposing (onClick) -import Json.Decode as Decode exposing (Decoder) -import Set exposing (Set) +import Html.Styled exposing (Html, div, node, text) +import Html.Styled.Attributes exposing (css) @@ -77,14 +75,8 @@ type alias LineItem = view : Model -> Html msg view model = - div [ css [ Css.width (Css.pct 100), Css.margin2 (Css.rem 0) (Css.rem 1) ] ] - [ div [ css [ Css.margin2 (Css.rem 1) (Css.px 0), Css.displayFlex, Css.alignItems Css.center ] ] - [ span [ css [ Css.fontSize (Css.rem 1.8), Css.marginRight (Css.px 5) ] ] [ text "CustomEditor" ] - , a [ href "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/CustomEditor.elm", target "_blank" ] [ text "[source]" ] - ] - , div [ css [] ] - [ div [] [ text "The editor is usually derived from the defined Renderer. But the default editor that is associated with the renderer can also be overwritten. Either by using another existing editor (i.e. for the athlete) or using another Elm app to render the editor (i.e. for the info)." ] - ] + Components.viewPage { headline = "CustomEditor", pageUrl = "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/CustomEditor.elm" } + [ div [] [ text "The editor is usually derived from the defined Renderer. But the default editor that is associated with the renderer can also be overwritten. Either by using another existing editor (i.e. for the athlete) or using another Elm app to render the editor (i.e. for the info)." ] , viewGrid model ] diff --git a/examples/src/Export.elm b/examples/src/Export.elm index 1ac18a0..ad84fd6 100644 --- a/examples/src/Export.elm +++ b/examples/src/Export.elm @@ -2,9 +2,10 @@ module Export exposing (Model, init, view) import AgGrid exposing (Renderer(..), defaultGridConfig, defaultSettings) import AgGrid.ContextMenu as ContextMenu +import Components.Components as Components import Css -import Html.Styled exposing (Html, a, div, node, span, text) -import Html.Styled.Attributes exposing (css, href, target) +import Html.Styled exposing (Html, div, node, text) +import Html.Styled.Attributes exposing (css) @@ -72,14 +73,8 @@ type alias LineItem = view : Model -> Html msg view model = - div [ css [ Css.width (Css.pct 100), Css.margin2 (Css.rem 0) (Css.rem 1) ] ] - [ div [ css [ Css.margin2 (Css.rem 1) (Css.px 0), Css.displayFlex, Css.alignItems Css.center ] ] - [ span [ css [ Css.fontSize (Css.rem 1.8), Css.marginRight (Css.px 5) ] ] [ text "Export" ] - , a [ href "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/Export.elm", target "_blank" ] [ text "[source]" ] - ] - , div [ css [] ] - [ div [] [ text "Excel & CSV Export" ] - ] + Components.viewPage { headline = "Export", pageUrl = "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/Export.elm" } + [ div [] [ text "Excel & CSV Export" ] , viewGrid model ] diff --git a/examples/src/Grouping.elm b/examples/src/Grouping.elm index 8e5dbf6..ed50c07 100644 --- a/examples/src/Grouping.elm +++ b/examples/src/Grouping.elm @@ -1,9 +1,10 @@ module Grouping exposing (Model, init, view) import AgGrid exposing (Renderer(..), defaultGridConfig, defaultSettings, defaultSidebar) +import Components.Components as Components import Css -import Html.Styled exposing (Html, a, div, node, span, text) -import Html.Styled.Attributes exposing (css, href, target) +import Html.Styled exposing (Html, div, node, text) +import Html.Styled.Attributes exposing (css) @@ -71,15 +72,9 @@ type alias LineItem = view : Model -> Html () view model = - div [ css [ Css.width (Css.pct 100), Css.margin2 (Css.rem 0) (Css.rem 1) ] ] - [ div [ css [ Css.margin2 (Css.rem 1) (Css.px 0), Css.displayFlex, Css.alignItems Css.center ] ] - [ span [ css [ Css.fontSize (Css.rem 1.8), Css.marginRight (Css.px 5) ] ] [ text "Grouping" ] - , a [ href "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/Grouping.elm", target "_blank" ] [ text "[source]" ] - ] - , div [ css [] ] - [ div [] [ text "Columns can be grouped programmatically by setting the rowGroup property on the ColumnSettings." ] - , div [ css [ Css.marginTop (Css.rem 1) ] ] [ text "The appearance of the AutoGroupColumn can be changed to a certain extent if required. And it is also possible to define the levels of groups that are expanded by default." ] - ] + Components.viewPage { headline = "Grouping", pageUrl = "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/Grouping.elm" } + [ div [] [ text "Columns can be grouped programmatically by setting the rowGroup property on the ColumnSettings." ] + , div [ css [ Css.marginTop (Css.rem 1) ] ] [ text "The appearance of the AutoGroupColumn can be changed to a certain extent if required. And it is also possible to define the levels of groups that are expanded by default." ] , viewGrid model ] diff --git a/examples/src/RowSelection.elm b/examples/src/RowSelection.elm index b5b7741..af74586 100644 --- a/examples/src/RowSelection.elm +++ b/examples/src/RowSelection.elm @@ -1,9 +1,10 @@ module RowSelection exposing (Model, Msg, init, update, view) import AgGrid exposing (Renderer(..), defaultGridConfig, defaultSettings) +import Components.Components as Components import Css -import Html.Styled exposing (Html, a, button, div, node, span, text) -import Html.Styled.Attributes exposing (css, href, target) +import Html.Styled exposing (Html, button, div, node, text) +import Html.Styled.Attributes exposing (css) import Html.Styled.Events exposing (onClick) import Json.Decode as Decode exposing (Decoder) import Set exposing (Set) @@ -104,14 +105,8 @@ view model = |> Set.toList |> List.map String.fromInt in - div [ css [ Css.width (Css.pct 100), Css.margin2 (Css.rem 0) (Css.rem 1) ] ] - [ div [ css [ Css.margin2 (Css.rem 1) (Css.px 0), Css.displayFlex, Css.alignItems Css.center ] ] - [ span [ css [ Css.fontSize (Css.rem 1.8), Css.marginRight (Css.px 5) ] ] [ text "RowSelection" ] - , a [ href "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/RowSelection.elm", target "_blank" ] [ text "[source]" ] - ] - , div [ css [] ] - [ div [] [ text "RowSelection" ] - ] + Components.viewPage { headline = "RowSelection", pageUrl = "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/RowSelection.elm" } + [ div [] [ text "RowSelection" ] , viewGrid model selection , viewCurrentSelection selection ]