1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
module LoggedIn.Home.View.Paging exposing
( view
)
import Color exposing (Color)
import FontAwesome
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import LoggedData exposing (LoggedData)
import Model.Payment as Payment exposing (Payments, perPage)
showedPages : Int
showedPages = 5
view : Int -> Int -> msg -> (Int -> msg) -> Html msg
view currentPage payments noOp pageMsg =
let maxPage = ceiling (toFloat payments / toFloat perPage)
pages = truncatePages currentPage (List.range 1 maxPage)
in if maxPage <= 1
then
text ""
else
div
[ class "pages" ]
( [ firstPage currentPage pageMsg
, previousPage currentPage noOp pageMsg
]
++ ( List.map (paymentsPage currentPage noOp pageMsg) pages)
++ [ nextPage currentPage maxPage noOp pageMsg
, lastPage currentPage maxPage pageMsg
]
)
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 then
(List.range 1 showedPages)
else if currentPage > totalPages - showedRightPages then
(List.range (totalPages - showedPages + 1) totalPages)
else
(List.range (currentPage - showedLeftPages) (currentPage + showedRightPages))
in List.filter (flip List.member pages) truncatedPages
firstPage : Int -> (Int -> msg) -> Html msg
firstPage currentPage pageMsg =
button
[ classList
[ ("page", True)
, ("disable", currentPage <= 1)
]
, onClick (pageMsg 1)
]
[ FontAwesome.fast_backward grey 13 ]
previousPage : Int -> msg -> (Int -> msg) -> Html msg
previousPage currentPage noOp pageMsg =
button
[ class "page"
, onClick <|
if currentPage > 1
then (pageMsg <| currentPage - 1)
else noOp
]
[ FontAwesome.backward grey 13 ]
nextPage : Int -> Int -> msg -> (Int -> msg) -> Html msg
nextPage currentPage maxPage noOp pageMsg =
button
[ class "page"
, onClick <|
if currentPage < maxPage
then (pageMsg <| currentPage + 1)
else noOp
]
[ FontAwesome.forward grey 13 ]
lastPage : Int -> Int -> (Int -> msg) -> Html msg
lastPage currentPage maxPage pageMsg =
button
[ class "page"
, onClick (pageMsg maxPage)
]
[ FontAwesome.fast_forward grey 13 ]
paymentsPage : Int -> msg -> (Int -> msg) -> Int -> Html msg
paymentsPage currentPage noOp pageMsg page =
let onCurrentPage = page == currentPage
in button
[ classList
[ ("page", True)
, ("current", onCurrentPage)
]
, onClick <|
if onCurrentPage
then noOp
else pageMsg page
]
[ text (toString page) ]
grey : Color
grey = Color.greyscale 0.35
|
