Add component for page header

mercurymedia · Oct 27, 2023 · 9a2e767 · 9a2e767
1 parent 343c99f
commit 9a2e767
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 94 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
         ]