From 139d4a103a6a48880e5f12a796033956f223563c Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 5 Sep 2015 11:10:34 +0200 Subject: Limit showed pages and add first, previous, next and last page links --- src/client/Model/Payment.elm | 2 +- src/client/View/Payments/Paging.elm | 88 ++++++++++++++++++++++++++++++++----- 2 files changed, 78 insertions(+), 12 deletions(-) (limited to 'src/client') diff --git a/src/client/Model/Payment.elm b/src/client/Model/Payment.elm index 88063b4..8a51c66 100644 --- a/src/client/Model/Payment.elm +++ b/src/client/Model/Payment.elm @@ -13,7 +13,7 @@ import Json.Decode as Json exposing ((:=)) import Dict exposing (..) perPage : Int -perPage = 10 +perPage = 8 type alias Payments = Dict PaymentId Payment diff --git a/src/client/View/Payments/Paging.elm b/src/client/View/Payments/Paging.elm index 7be4c7b..c3db819 100644 --- a/src/client/View/Payments/Paging.elm +++ b/src/client/View/Payments/Paging.elm @@ -14,18 +14,84 @@ import ServerCommunication as SC exposing (serverCommunications) import Update exposing (..) import Update.Payment exposing (..) +import View.Icon exposing (renderIcon) + +showedPages : Int +showedPages = 5 + paymentsPaging : PaymentView -> Html paymentsPaging paymentView = let maxPage = ceiling (toFloat paymentView.paymentsCount / toFloat perPage) - pages = [1..maxPage] - in ul - [ class "pages" ] - ( pages - |> List.map (\page -> - li - [ class ("page" ++ (if page == paymentView.currentPage then " current" else "")) - , onClick serverCommunications.address (SC.UpdatePage page) - ] - [ text (toString page) ] + pages = truncatePages paymentView.currentPage [1..maxPage] + in if maxPage == 1 + then + text "" + else + ul + [ class "pages" ] + ( ( if paymentView.currentPage > 1 + then [ firstPage, previousPage paymentView ] + else [] + ) + ++ ( List.map (paymentsPage paymentView) pages) + ++ ( if paymentView.currentPage < maxPage + then [ nextPage paymentView, lastPage maxPage ] + else [] ) - ) + ) + +truncatePages : Int -> List Int -> List Int +truncatePages currentPage pages = + let totalPages = List.length pages + showedLeftPages = ceiling ((toFloat showedPages - 1) / 2) + showedRightPages = floor ((toFloat showedPages - 1) / 2) + truncatedPages = + if | currentPage < showedLeftPages -> + [1..showedPages] + | currentPage > totalPages - showedRightPages -> + [(totalPages - showedPages)..totalPages] + | otherwise -> + [(currentPage - showedLeftPages)..(currentPage + showedRightPages)] + in List.filter (flip List.member pages) truncatedPages + +firstPage : Html +firstPage = + li + [ class "page" + , onClick serverCommunications.address (SC.UpdatePage 1) + ] + [ renderIcon "fast-backward" ] + +previousPage : PaymentView -> Html +previousPage paymentView = + li + [ class "page" + , onClick serverCommunications.address (SC.UpdatePage (paymentView.currentPage - 1)) + ] + [ renderIcon "backward" ] + +nextPage : PaymentView -> Html +nextPage paymentView = + li + [ class "page" + , onClick serverCommunications.address (SC.UpdatePage (paymentView.currentPage + 1)) + ] + [ renderIcon "forward" ] + +lastPage : Int -> Html +lastPage maxPage = + li + [ class "page" + , onClick serverCommunications.address (SC.UpdatePage maxPage) + ] + [ renderIcon "fast-forward" ] + +paymentsPage : PaymentView -> Int -> Html +paymentsPage paymentView page = + let onCurrentPage = page == paymentView.currentPage + in li + [ class ("page" ++ (if onCurrentPage then " current" else "")) + , onClick serverCommunications.address <| + if onCurrentPage then SC.NoCommunication else SC.UpdatePage page + ] + [ text (toString page) ] -- cgit v1.2.3