Skip to content

Commit

Permalink
Add support for single click event
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxhille @mschindlerMM
maxhille authored and mschindlerMM committed Jan 16, 2024
1 parent 0981497 commit 547f51e
Show file tree
Hide file tree
Showing 3 changed files with 246 additions and 2 deletions.
202 changes: 202 additions & 0 deletions examples/src/ClickEvents.elm
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
module ClickEvents exposing (Model, Msg, init, subscriptions, update, view)

import AgGrid exposing (FilterType(..), Renderer(..), defaultGridConfig, defaultSettings, defaultSidebar)
import AgGrid.Expression as Expression exposing (Eval(..))
import Components.Components as Components
import Css
import Html.Styled exposing (Html, div, node, p, text)
import Html.Styled.Attributes exposing (css)
import Json.Decode as Decode



-- INIT


init : ( Model, Cmd Msg )
init =
( initialModel
, Cmd.none
)


persons : List Person
persons =
[ { birthday = "2220-03-22", ship = "USS Enterprise (NCC-1701)", age = 63, name = "James T. Kirk" }
, { birthday = "2336-07-13", ship = "USS Enterprise (NCC-1701-D)", age = 47, name = "Jean-Luc Picard" }
, { birthday = "2223-01-15", ship = "USS Voyager (NCC-74656)", age = 60, name = "Kathryn Janeway" }
, { birthday = "2230-03-22", ship = "USS Defiant (NX-74205)", age = 53, name = "Benjamin Sisko" }
, { birthday = "2228-12-05", ship = "USS Enterprise (NCC-1701)", age = 55, name = "Spock" }
, { birthday = "2245-07-26", ship = "USS Enterprise (NCC-1701)", age = 38, name = "Leonard McCoy" }
, { birthday = "2230-03-22", ship = "USS Voyager (NCC-74656)", age = 53, name = "Chakotay" }
, { birthday = "2340-12-02", ship = "USS Enterprise (NCC-1701-D)", age = 42, name = "William Riker" }
, { birthday = "2250-01-17", ship = "USS Defiant (NX-74205)", age = 43, name = "Jadzia Dax" }
, { birthday = "2329-02-16", ship = "USS Voyager (NCC-74656)", age = 50, name = "Tom Paris" }
, { birthday = "2233-03-22", ship = "USS Enterprise (NCC-1701)", age = 52, name = "Nyota Uhura" }
, { birthday = "2348-03-29", ship = "USS Enterprise (NCC-1701-D)", age = 34, name = "Data" }
, { birthday = "2249-02-22", ship = "USS Defiant (NX-74205)", age = 48, name = "Kira Nerys" }
, { birthday = "2261-11-17", ship = "USS Voyager (NCC-74656)", age = 40, name = "B'Elanna Torres" }
, { birthday = "2265-03-22", ship = "USS Enterprise (NCC-1701)", age = 56, name = "Montgomery Scott" }
, { birthday = "2335-08-29", ship = "USS Enterprise (NCC-1701-D)", age = 47, name = "Geordi La Forge" }
, { birthday = "2248-05-16", ship = "USS Defiant (NX-74205)", age = 49, name = "Miles O'Brien" }
, { birthday = "2255-08-19", ship = "USS Voyager (NCC-74656)", age = 47, name = "Harry Kim" }
, { birthday = "2239-03-22", ship = "USS Enterprise (NCC-1701)", age = 48, name = "Hikaru Sulu" }
, { birthday = "2264-01-14", ship = "USS Enterprise (NCC-1701)", age = 57, name = "Pavel Chekov" }
, { birthday = "2354-06-16", ship = "USS Enterprise (NCC-1701-D)", age = 38, name = "Worf" }
, { birthday = "2235-03-22", ship = "USS Defiant (NX-74205)", age = 48, name = "Ezri Dax" }
, { birthday = "2246-03-22", ship = "USS Voyager (NCC-74656)", age = 47, name = "Seven of Nine" }
, { birthday = "2285-03-22", ship = "USS Enterprise (NCC-1701)", age = 38, name = "Saavik" }
, { birthday = "2240-03-22", ship = "USS Enterprise (NCC-1701)", age = 48, name = "Christine Chapel" }
, { birthday = "2280-03-22", ship = "USS Defiant (NX-74205)", age = 43, name = "Julian Bashir" }
, { birthday = "2240-09-03", ship = "USS Voyager (NCC-74656)", age = 48, name = "Neelix" }
, { birthday = "2337-03-22", ship = "USS Enterprise (NCC-1701-D)", age = 46, name = "Deanna Troi" }
, { birthday = "2235-03-22", ship = "USS Voyager (NCC-74656)", age = 48, name = "The Doctor" }
, { birthday = "2249-03-22", ship = "USS Enterprise (NCC-1701)", age = 48, name = "Pavel Chekov" }
]


initialModel : Model
initialModel =
{ lastClick = Nothing
, lastDoubleClick = Nothing
}



-- MODEL


type alias Model =
{ lastClick : Maybe ( Person, String )
, lastDoubleClick : Maybe ( Person, String )
}


type alias Person =
{ birthday : String
, ship : String
, age : Int
, name : String
}


type Msg
= OnClick ( Result Decode.Error Person, String )
| OnDoubleClick ( Result Decode.Error Person, String )



-- UPDATE


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
OnClick ( result, column ) ->
( { model | lastClick = Result.toMaybe result |> Maybe.map (\person -> ( person, column )) }, Cmd.none )

OnDoubleClick ( result, column ) ->
( { model | lastDoubleClick = Result.toMaybe result |> Maybe.map (\person -> ( person, column )) }, Cmd.none )



-- VIEW


view : Model -> Html Msg
view model =
let
viewClick click =
text <|
case click of
Just ( person, column ) ->
case column of
"name" ->
person.name

"ship" ->
person.ship

"age" ->
person.age |> String.fromInt

_ ->
person.birthday

Nothing ->
"No click yet"
in
Components.viewPage { headline = "Click Events", pageUrl = "https://github.com/mercurymedia/elm-ag-grid/blob/main/examples/src/ClickEvents.elm" }
[ p [] [ text "This example demonstrates listening for click events" ]
, div [] [ text "Last Click: ", viewClick model.lastClick ]
, div [] [ text "Last Double Click: ", viewClick model.lastDoubleClick ]
, viewGrid
]


viewGrid : Html Msg
viewGrid =
let
gridConfig =
{ defaultGridConfig
| themeClasses = Just "ag-theme-balham ag-basic"
, groupIncludeTotalFooter = True
, size = "65vh"
, sideBar = { defaultSidebar | panels = [ AgGrid.ColumnSidebar ], defaultToolPanel = Just AgGrid.ColumnSidebar }
, isRowSelectable = always False
}

gridSettings =
{ defaultSettings | editable = Expression.Const False }

columns =
[ { field = "name"
, renderer = StringRenderer .name
, headerName = "Name"
, settings = gridSettings
}
, { field = "age"
, renderer = IntRenderer .age
, headerName = "Age"
, settings = gridSettings
}
, { field = "ship"
, renderer = StringRenderer .ship
, headerName = "Ship"
, settings = { gridSettings | filter = SetFilter }
}
, { field = "birthday"
, renderer = DateRenderer .birthday
, headerName = "Birthday"
, settings = { gridSettings | filter = DateFilter }
}
]
in
node "filterstate-grid"
[ css [ Css.display Css.block, Css.margin2 (Css.rem 1) (Css.px 0) ] ]
[ AgGrid.grid gridConfig
[ AgGrid.onCellDoubleClicked personDecoder OnDoubleClick
, AgGrid.onCellClicked personDecoder OnClick
]
columns
persons
|> Html.Styled.fromUnstyled
]


personDecoder : Decode.Decoder Person
personDecoder =
Decode.map4 Person
(Decode.field "name" Decode.string)
(Decode.field "ship" Decode.string)
(Decode.field "age" Decode.int)
(Decode.field "birthday" Decode.string)



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
18 changes: 18 additions & 0 deletions examples/src/Main.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Aggregation
import Basic
import Browser exposing (Document)
import Browser.Navigation as Nav
import ClickEvents
import ColumnState
import Css
import Css.Global
Expand Down Expand Up @@ -43,6 +44,7 @@ type alias Model =
type Page
= Aggregation Aggregation.Model
| Basic Basic.Model
| ClickEvents ClickEvents.Model
| FilterState FilterState.Model
| Grouping Grouping.Model
| RowSelection RowSelection.Model
Expand All @@ -55,6 +57,7 @@ type Page
type Msg
= ChangedUrl Url
| ClickedLink Browser.UrlRequest
| ClickEventsMsg ClickEvents.Msg
| AggregationMsg Aggregation.Msg
| BasicMsg Basic.Msg
| FilterStateMsg FilterState.Msg
Expand Down Expand Up @@ -92,6 +95,9 @@ subscriptions model =
Aggregation aggregationModel ->
Sub.map AggregationMsg (Aggregation.subscriptions aggregationModel)

ClickEvents clickEventsModel ->
Sub.map ClickEventsMsg (ClickEvents.subscriptions clickEventsModel)

Grouping _ ->
Sub.none

Expand Down Expand Up @@ -147,6 +153,13 @@ update msg model =
in
( { model | page = Basic updatedBasicModel }, Cmd.map BasicMsg pageCmd )

( ClickEventsMsg subMsg, ClickEvents clickEventsModel ) ->
let
( updatedClickEventsModel, pageCmd ) =
ClickEvents.update subMsg clickEventsModel
in
( { model | page = ClickEvents updatedClickEventsModel }, Cmd.map ClickEventsMsg pageCmd )

( RowSelectionMsg subMsg, RowSelection rowSelectionModel ) ->
let
( updatedRowSelectionModel, pageCmd ) =
Expand Down Expand Up @@ -228,6 +241,7 @@ viewNavigation =
div [ css [ Css.marginTop (Css.rem 2), Css.displayFlex, Css.flexDirection Css.column ] ]
[ div [ css [ Css.color (Css.hex "#000000"), Css.fontWeight Css.normal ] ] [ text "Examples" ]
, viewPageLink "Basic" "/"
, viewPageLink "Click Events" "/click-events"
, viewPageLink "Aggregations & Formatting" "/aggregation"
, viewPageLink "Grouping" "/grouping"
, viewPageLink "RowSelection" "/row-selection"
Expand Down Expand Up @@ -266,6 +280,9 @@ viewPage page =
Basic pageModel ->
toPage BasicMsg (Basic.view pageModel)

ClickEvents pageModel ->
toPage ClickEventsMsg (ClickEvents.view pageModel)

Aggregation pageModel ->
toPage AggregationMsg (Aggregation.view pageModel)

Expand Down Expand Up @@ -303,6 +320,7 @@ changePageTo url model =
Parser.oneOf
[ Parser.map (Basic.init |> toPage Basic BasicMsg) Parser.top
, Parser.map (Aggregation.init |> toPage Aggregation AggregationMsg) (Parser.s "aggregation")
, Parser.map (ClickEvents.init |> toPage ClickEvents ClickEventsMsg) (Parser.s "click-events")
, Parser.map ( { model | page = Grouping Grouping.init }, Cmd.none ) (Parser.s "grouping")
, Parser.map ( { model | page = RowSelection RowSelection.init }, Cmd.none ) (Parser.s "row-selection")
, Parser.map ( { model | page = Export Export.init }, Cmd.none ) (Parser.s "export")
Expand Down
28 changes: 26 additions & 2 deletions src/AgGrid.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ module AgGrid exposing
, RowGroupPanelVisibility(..), RowSelection(..), Sorting(..), StateChange, CsvExportParams, ExcelExportParams
, GridConfig, grid
, defaultGridConfig, defaultSettings
, onCellChanged, onCellDoubleClicked, onSelectionChange, onContextMenu
, onCellChanged, onCellDoubleClicked, onCellClicked, onSelectionChange, onContextMenu
, ColumnState, onColumnStateChanged, columnStatesDecoder, columnStatesEncoder, applyColumnState
, FilterState(..), onFilterStateChanged, filterStatesEncoder, filterStatesDecoder
, Sidebar, SidebarType(..), SidebarPosition(..), defaultSidebar
Expand Down Expand Up @@ -31,7 +31,7 @@ module AgGrid exposing
# Events
@docs onCellChanged, onCellDoubleClicked, onSelectionChange, onContextMenu
@docs onCellChanged, onCellDoubleClicked, onCellClicked, onSelectionChange, onContextMenu
# ColumnState
Expand Down Expand Up @@ -900,6 +900,30 @@ onCellChanged dataDecoder toMsg =
|> Html.Events.on "cellvaluechanged"


{-| Detect click events on cells.
Decodes the row of the clicked cell according to the provided `dataDecoder` and the field
name of the clicked cells as tuple and passes the result to the message `toMsg`.
Handles the `cellClicked` event from Ag Grid.
-}
onCellClicked : Decoder dataType -> (( Result Decode.Error dataType, String ) -> msg) -> Html.Attribute msg
onCellClicked dataDecoder toMsg =
let
valueDecoder =
Decode.at [ "agGridDetails", "data" ] Decode.value
|> Decode.map (Decode.decodeValue dataDecoder)

elementDecoder =
Decode.at [ "agGridDetails", "event", "srcElement", "attributes", "col-id", "value" ] Decode.string

event =
Decode.map2 (\v e -> toMsg <| Tuple.pair v e) valueDecoder elementDecoder
in
Html.Events.on "cellclicked" event


{-| Detect doubleclick events on cells.
Decodes the row of the clicked cell according to the provided `dataDecoder` and the field
Expand Down

0 comments on commit 547f51e

Please sign in to comment.