From 9dfa7a7e2c6fac564a456b11623c04d0b26fbce5 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sat, 4 Jun 2016 10:04:05 +0200
Subject: Add search on payments and use inline font awesome from elm

---
 src/client/elm/LoggedIn/Home/View/Expand.elm  | 18 +++++++++--------
 src/client/elm/LoggedIn/Home/View/Monthly.elm |  9 ++++++---
 src/client/elm/LoggedIn/Home/View/Paging.elm  | 16 ++++++++-------
 src/client/elm/LoggedIn/Home/View/Search.elm  | 29 +++++++++++++++++++++++++++
 src/client/elm/LoggedIn/Home/View/Table.elm   | 27 ++++++++++++-------------
 5 files changed, 67 insertions(+), 32 deletions(-)
 create mode 100644 src/client/elm/LoggedIn/Home/View/Search.elm

(limited to 'src/client/elm/LoggedIn/Home/View')

diff --git a/src/client/elm/LoggedIn/Home/View/Expand.elm b/src/client/elm/LoggedIn/Home/View/Expand.elm
index a50ebfe..e0c13a3 100644
--- a/src/client/elm/LoggedIn/Home/View/Expand.elm
+++ b/src/client/elm/LoggedIn/Home/View/Expand.elm
@@ -3,25 +3,27 @@ module LoggedIn.Home.View.Expand exposing
   , ExpandType(..)
   )
 
+import Color exposing (Color)
+
+import FontAwesome
+
 import Html exposing (..)
 import Html.Attributes exposing (..)
 
 import Msg exposing (Msg)
 
-import View.Icon exposing (renderIcon)
-
 type ExpandType = ExpandUp | ExpandDown
 
 expand : ExpandType -> Bool -> Html Msg
 expand expandType isExpanded =
   div
     [ class "expand" ]
-    [ renderIcon (chevronIcon expandType isExpanded) ]
+    [ (chevronIcon expandType isExpanded) Color.white 15 ]
 
-chevronIcon : ExpandType -> Bool -> String
+chevronIcon : ExpandType -> Bool -> (Color -> Int -> Html msg)
 chevronIcon expandType isExpanded =
   case (expandType, isExpanded) of
-    (ExpandUp, True)    -> "chevron-down"
-    (ExpandUp, False)   -> "chevron-up"
-    (ExpandDown, True)  -> "chevron-up"
-    (ExpandDown, False) -> "chevron-down"
+    (ExpandUp, True)    -> FontAwesome.chevron_down
+    (ExpandUp, False)   -> FontAwesome.chevron_up
+    (ExpandDown, True)  -> FontAwesome.chevron_up
+    (ExpandDown, False) -> FontAwesome.chevron_down
diff --git a/src/client/elm/LoggedIn/Home/View/Monthly.elm b/src/client/elm/LoggedIn/Home/View/Monthly.elm
index 26dbe98..398059c 100644
--- a/src/client/elm/LoggedIn/Home/View/Monthly.elm
+++ b/src/client/elm/LoggedIn/Home/View/Monthly.elm
@@ -3,6 +3,9 @@ module LoggedIn.Home.View.Monthly exposing
   )
 
 import String
+import Color
+
+import FontAwesome
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
@@ -21,8 +24,6 @@ import Model.Payment as Payment exposing (Payments, Payment, monthly)
 import Model.Translations exposing (getMessage, getParamMessage)
 import LoggedData exposing (LoggedData)
 
-import View.Icon exposing (renderIcon)
-
 view : LoggedData -> HomeModel.Model -> Html Msg
 view loggedData homeModel =
   let monthlyPayments = Payment.monthly loggedData.me loggedData.payments
@@ -85,6 +86,8 @@ paymentLine loggedData homeModel payment =
         [ class "cell delete"
         , onClick (Msg.UpdateLoggedIn <| LoggedInMsg.DeletePayment payment.id)
         ]
-        [ button [] [ renderIcon "times" ]
+        [ button
+            []
+            [ FontAwesome.times Color.white 20 ]
         ]
     ]
diff --git a/src/client/elm/LoggedIn/Home/View/Paging.elm b/src/client/elm/LoggedIn/Home/View/Paging.elm
index 15bb5a1..b8d7db9 100644
--- a/src/client/elm/LoggedIn/Home/View/Paging.elm
+++ b/src/client/elm/LoggedIn/Home/View/Paging.elm
@@ -2,6 +2,10 @@ module LoggedIn.Home.View.Paging exposing
   ( paymentsPaging
   )
 
+import Color
+
+import FontAwesome
+
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
@@ -15,14 +19,12 @@ import Msg exposing (Msg)
 import LoggedData exposing (LoggedData)
 import Model.Payment as Payment exposing (Payments, perPage)
 
-import View.Icon exposing (renderIcon)
-
 showedPages : Int
 showedPages = 5
 
 paymentsPaging : Payments -> HomeModel.Model -> Html Msg
 paymentsPaging payments homeModel =
-  let maxPage = ceiling (toFloat (List.length (Payment.punctual payments)) / toFloat perPage)
+  let maxPage = ceiling (toFloat (List.length payments) / toFloat perPage)
       pages = truncatePages homeModel.currentPage [1..maxPage]
   in  if maxPage == 1
         then
@@ -58,7 +60,7 @@ firstPage homeModel =
         ]
     , onClick (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| 1)
     ]
-    [ renderIcon "fast-backward" ]
+    [ FontAwesome.fast_backward Color.darkGrey 20 ]
 
 previousPage : HomeModel.Model -> Html Msg
 previousPage homeModel =
@@ -69,7 +71,7 @@ previousPage homeModel =
           then (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| homeModel.currentPage - 1)
           else Msg.NoOp
     ]
-    [ renderIcon "backward" ]
+    [ FontAwesome.backward Color.darkGrey 20 ]
 
 nextPage : HomeModel.Model -> Int -> Html Msg
 nextPage homeModel maxPage =
@@ -80,7 +82,7 @@ nextPage homeModel maxPage =
           then (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| homeModel.currentPage + 1)
           else Msg.NoOp
     ]
-    [ renderIcon "forward" ]
+    [ FontAwesome.forward Color.darkGrey 20 ]
 
 lastPage : HomeModel.Model -> Int -> Html Msg
 lastPage homeModel maxPage =
@@ -88,7 +90,7 @@ lastPage homeModel maxPage =
     [ class "page"
     , onClick (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| maxPage)
     ]
-    [ renderIcon "fast-forward" ]
+    [ FontAwesome.fast_forward Color.darkGrey 20 ]
 
 paymentsPage : HomeModel.Model -> Int -> Html Msg
 paymentsPage homeModel page =
diff --git a/src/client/elm/LoggedIn/Home/View/Search.elm b/src/client/elm/LoggedIn/Home/View/Search.elm
new file mode 100644
index 0000000..a4f727a
--- /dev/null
+++ b/src/client/elm/LoggedIn/Home/View/Search.elm
@@ -0,0 +1,29 @@
+module LoggedIn.Home.View.Search exposing
+  ( paymentsSearch
+  )
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+
+import Msg exposing (Msg)
+import LoggedIn.Msg as LoggedInMsg
+import LoggedIn.Home.Msg as HomeMsg
+
+import LoggedData exposing (LoggedData)
+import LoggedIn.Home.Model as HomeModel
+import Model.Translations exposing (getMessage)
+
+paymentsSearch : LoggedData -> HomeModel.Model -> Html Msg
+paymentsSearch loggedData { search } =
+  Html.div
+    [ class "search" ]
+    [ span
+        [ class "label" ]
+        [ text (getMessage "Search" loggedData.translations) ]
+    , input
+        [ value search
+        , onInput (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdateSearch)
+        ]
+        []
+    ]
diff --git a/src/client/elm/LoggedIn/Home/View/Table.elm b/src/client/elm/LoggedIn/Home/View/Table.elm
index 6631af7..7c8a800 100644
--- a/src/client/elm/LoggedIn/Home/View/Table.elm
+++ b/src/client/elm/LoggedIn/Home/View/Table.elm
@@ -5,6 +5,9 @@ module LoggedIn.Home.View.Table exposing
 import Dict exposing (..)
 import Date exposing (Date)
 import String exposing (append)
+import Color
+
+import FontAwesome
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
@@ -24,30 +27,26 @@ import LoggedIn.View.Format as Format
 import Model.User exposing (getUserName)
 import Model.Payment as Payment exposing (..)
 
-import View.Icon exposing (renderIcon)
-
-paymentsTable : LoggedData -> HomeModel.Model -> Html Msg
-paymentsTable loggedData homeModel =
+paymentsTable : LoggedData -> HomeModel.Model -> Payments -> Html Msg
+paymentsTable loggedData homeModel punctualPayments =
   div
     [ class "table" ]
-    ( headerLine loggedData :: paymentLines loggedData homeModel)
+    ( headerLine loggedData :: paymentLines loggedData homeModel punctualPayments)
 
 headerLine : LoggedData -> Html Msg
 headerLine loggedData =
   div
     [ class "header" ]
-    [ div [ class "cell category" ] [ renderIcon "shopping-cart" ]
+    [ div [ class "cell category" ] [ FontAwesome.shopping_cart Color.white 25 ]
     , div [ class "cell cost" ] [ text loggedData.conf.currency ]
-    , div [ class "cell user" ] [ renderIcon "user" ]
-    , div [ class "cell date" ] [ renderIcon "calendar" ]
+    , div [ class "cell user" ] [ FontAwesome.user Color.white 25 ]
+    , div [ class "cell date" ] [ FontAwesome.calendar Color.white 25 ]
     , div [ class "cell" ] []
     ]
 
-paymentLines : LoggedData -> HomeModel.Model -> List (Html Msg)
-paymentLines loggedData homeModel =
-  Payment.punctual loggedData.payments
-    |> List.sortBy (Date.toTime << .creation)
-    |> List.reverse
+paymentLines : LoggedData -> HomeModel.Model -> Payments -> List (Html Msg)
+paymentLines loggedData homeModel punctualPayments =
+  punctualPayments
     |> List.drop ((homeModel.currentPage - 1) * perPage)
     |> List.take perPage
     |> List.map (paymentLine loggedData homeModel)
@@ -91,7 +90,7 @@ paymentLine loggedData homeModel payment =
             [ class "cell delete" ]
             [ button
                 [ onClick (Msg.UpdateLoggedIn <| LoggedInMsg.DeletePayment payment.id)]
-                [ renderIcon "times" ]
+                [ FontAwesome.times Color.white 20 ]
             ]
         else
           div [ class "cell" ] []
-- 
cgit v1.2.3