paginate.elm

---- MODEL ----


type alias Model =
    { actresses : List Actress
    , searchParams : List String
    , paginatedActresses : PaginatedList Actress -- Paginateに使用するModelのListを設定
    }
    
init : () -> ( Model, Cmd Msg )
init _ =
    ( { actresses = []
      , searchParams = []
      , paginatedActresses = Paginate.fromList 40 [] -- initialize時に１ページに何個のアイテムを表示するか？と、初期値の設定
      }
    , Cmd.none
    )
    
type Msg
    = NewActresses (Result Http.Error (List Actress))
    | Next
    | Prev
    | First
    | Last
    | GoTo Int


---- UPDATE ----


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        -- 検索結果から現在のページに合致するアイテムをpaginatedActressesに入れる
        NewActresses (Ok newactresses) ->
            ( { model | actresses = newactresses, paginatedActresses = Paginate.fromList 40 newactresses }, Cmd.none )

        -- 検索失敗時は空Listを入れる
        NewActresses (Err _) ->
            ( { model | actresses = [], paginatedActresses = Paginate.fromList 40 [] }, Cmd.none )

        -- 次のページ遷移時処理
        Next ->
            ( { model | paginatedActresses = Paginate.next model.paginatedActresses }, Cmd.none )

        -- 前のページ遷移時処理
        Prev ->
            ( { model | paginatedActresses = Paginate.prev model.paginatedActresses }, Cmd.none )

        -- 最初のページ遷移時処理
        First ->
            ( { model | paginatedActresses = Paginate.first model.paginatedActresses }, Cmd.none )

        -- 最後のページ遷移時処理
        Last ->
            ( { model | paginatedActresses = Paginate.last model.paginatedActresses }, Cmd.none )

        -- 指定ページ遷移時処理（今回未使用）
        GoTo index ->
            ( { model | paginatedActresses = Paginate.goTo index model.paginatedActresses }, Cmd.none )


---- VIEW ----


view : Model -> Html Msg
view model =
    let
        -- 前のページへの遷移ボタン
        prevButtons =
            [ button [ class "pagination-previous", onClick First, disabled <| Paginate.isFirst model.paginatedActresses ] [ text "<<" ]
            , button [ class "pagination-previous", onClick Prev, disabled <| Paginate.isFirst model.paginatedActresses ] [ text "<" ]
            ]

        -- 次のページへの遷移ボタン
        nextButtons =
            [ button [ class "pagination-next", onClick Next, disabled <| Paginate.isLast model.paginatedActresses ] [ text ">" ]
            , button [ class "pagination-next", onClick Last, disabled <| Paginate.isLast model.paginatedActresses ] [ text ">>" ]
            ]

        -- 現在のページボタン
        pagerButtonView index isActive =
            button
                [ style "font-weight"
                    (if isActive then
                        "bold"

                     else
                        "normal"
                    )
                ]
                [ text <| String.fromInt index ]

    in
    div []
        [ div [ class "box" ] <|
            , div [ class "columns is-centered" ]
                [ div [ class "column" ]
                    [ p [] [ text ("検索条件：" ++ String.join " , " model.searchParams) ]
                    
                    -- 検索結果のアイテム数はPaginate.lengthで取った数値をStringにキャストする
                    , p [] [ text ("検索結果：" ++ (String.fromInt <| Paginate.length model.paginatedActresses) ++ "人") ]
                    ]
                ]
            , div [ class "columns is-centered" ]
                [ div [ class "column is-one-fifth" ]
                    [ nav [ class "pagination is-centered" ]
                    
                        -- First, Prevに応じたUpdateに飛ばし、もしページが最初の位置にある場合disabledにする
                        [ button [ class "pagination-previous", onClick First, disabled <| Paginate.isFirst model.paginatedActresses ] [ text "<<" ]
                        , button [ class "pagination-previous", onClick Prev, disabled <| Paginate.isFirst model.paginatedActresses ] [ text "<" ]
                        , ul [ class "pagination-list" ]
                            [ text
                                (String.join " "
                                
                                    -- 現在のページ位置と総計のページ数をcurrentPage, totalPagesで算出
                                    [ String.fromInt <| Paginate.currentPage model.paginatedActresses
                                    , "/"
                                    , String.fromInt <| Paginate.totalPages model.paginatedActresses
                                    ]
                                )
                            ]
                            
                        -- Last, Nextに応じたUpdateに飛ばし、もしページが最後の位置にある場合disabledにする
                        , button [ class "pagination-next", onClick Next, disabled <| Paginate.isLast model.paginatedActresses ] [ text ">" ]
                        , button [ class "pagination-next", onClick Last, disabled <| Paginate.isLast model.paginatedActresses ] [ text ">>" ]
                        ]
                    ]
                ]
            ]
            
        -- 現在のページに存在するアイテムの表示
        , div [ class "columns is-multiline" ] (actresses2li <| Paginate.page model.paginatedActresses)
        ]