Limit showed pages and add first, previous, next and last page links

3 files changed, 83 insertions, 14 deletions

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) ]
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 45b1cbc..e3dd824 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -54,11 +54,12 @@ global = do
 
     ".exceedingPayers" ? do
       margin (px 0) (px 20) (px 45) (px 20)
-      padding (px 10) (px 10) (px 10) (px 10)
+      padding (px 15) (px 15) (px 15) (px 15)
       backgroundColor C.green
       color C.white
       fontWeight bold
       borderRadius (px 5) (px 5) (px 5) (px 5)
+      fontSize (pct 120)
 
       ".exceedingPayer" Clay.** ".userName" ? marginRight (px 10)
 
@@ -174,9 +175,9 @@ global = do
       ".page" ? do
         display inlineBlock
         border solid (px 2) C.darkGrey
+        color C.darkGrey
         borderRadius (px 2) (px 2) (px 2) (px 2)
         marginRight (px 10)
-        cursor pointer
         let side = 50
         width (px side)
         height (px side)
@@ -184,6 +185,8 @@ global = do
         textAlign (alignSide (sideCenter))
         fontWeight bold
 
+        ":not(.current)" & cursor pointer
+
         ".current" & do
           borderColor C.red
           color C.red