Add search on payments and use inline font awesome from elm

14 files changed, 122 insertions, 72 deletions

diff --git a/src/client/elm/LoggedIn/Home/AddPayment/View.elm b/src/client/elm/LoggedIn/Home/AddPayment/View.elm
index d97f3ca..b13097b 100644
--- a/src/client/elm/LoggedIn/Home/AddPayment/View.elm
+++ b/src/client/elm/LoggedIn/Home/AddPayment/View.elm
@@ -4,6 +4,9 @@ module LoggedIn.Home.AddPayment.View exposing
 
 import Result exposing (..)
 import Json.Decode as Json
+import Color
+
+import FontAwesome
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
@@ -24,7 +27,6 @@ import Model.Translations exposing (getMessage)
 import LoggedData exposing (LoggedData)
 
 import View.Events exposing (onSubmitPrevDefault)
-import View.Icon exposing (..)
 
 import Utils.Maybe exposing (isJust)
 import Utils.Either exposing (toMaybeError)
@@ -52,7 +54,9 @@ view loggedData homeModel =
             ]
         ]
         [ text (getMessage "Add" loggedData.translations)
-        , if homeModel.add.waitingServer then renderSpinIcon else text ""
+        , if homeModel.add.waitingServer
+            then FontAwesome.spinner Color.white 20
+            else text ""
         ]
     ]
 
@@ -73,7 +77,7 @@ addPaymentName loggedData addPayment =
         []
     , label
         [ for "nameInput" ]
-        [ renderIcon "shopping-cart" ]
+        [ FontAwesome.shopping_cart Color.white 20 ]
     , case addPayment.nameError of
         Just error ->
           div [ class "errorMessage" ] [ text error ]
diff --git a/src/client/elm/LoggedIn/Home/Model.elm b/src/client/elm/LoggedIn/Home/Model.elm
index e448b66..0a2b305 100644
--- a/src/client/elm/LoggedIn/Home/Model.elm
+++ b/src/client/elm/LoggedIn/Home/Model.elm
@@ -14,6 +14,7 @@ type alias Model =
   , paymentEdition : Maybe PaymentId
   , currentPage : Int
   , monthlyDetail : Bool
+  , search : String
   }
 
 init : Model
@@ -22,4 +23,5 @@ init =
   , paymentEdition = Nothing
   , currentPage = 1
   , monthlyDetail = False
+  , search = ""
   }
diff --git a/src/client/elm/LoggedIn/Home/Msg.elm b/src/client/elm/LoggedIn/Home/Msg.elm
index bb17a91..0791df0 100644
--- a/src/client/elm/LoggedIn/Home/Msg.elm
+++ b/src/client/elm/LoggedIn/Home/Msg.elm
@@ -13,3 +13,4 @@ type Msg =
   | UpdatePage Int
   | ShowMonthlyDetail
   | ToggleMonthlyDetail
+  | UpdateSearch String
diff --git a/src/client/elm/LoggedIn/Home/Update.elm b/src/client/elm/LoggedIn/Home/Update.elm
index 6de341d..3b62abf 100644
--- a/src/client/elm/LoggedIn/Home/Update.elm
+++ b/src/client/elm/LoggedIn/Home/Update.elm
@@ -39,3 +39,11 @@ update loggedData action homeModel =
       ( { homeModel | monthlyDetail = not homeModel.monthlyDetail }
       , Cmd.none
       )
+
+    HomeMsg.UpdateSearch search ->
+      ( { homeModel
+        | search = search
+        , currentPage = 1
+        }
+      , Cmd.none
+      )
diff --git a/src/client/elm/LoggedIn/Home/View.elm b/src/client/elm/LoggedIn/Home/View.elm
index 097e730..213e4ab 100644
--- a/src/client/elm/LoggedIn/Home/View.elm
+++ b/src/client/elm/LoggedIn/Home/View.elm
@@ -4,29 +4,34 @@ module LoggedIn.Home.View exposing
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
+import Date
 
 import Msg exposing (Msg)
 
 import LoggedData exposing (LoggedData)
+import Model.Payment as Payment
 
 import LoggedIn.Home.Model as LoggedInModel
 import LoggedIn.Home.Account.View as AccountView
 import LoggedIn.Home.AddPayment.View as AddPaymentView
 import LoggedIn.Home.View.Monthly as MonthlyView
 
+import LoggedIn.Home.View.Search exposing (paymentsSearch)
 import LoggedIn.Home.View.Table exposing (paymentsTable)
 import LoggedIn.Home.View.Paging exposing (paymentsPaging)
 
 view : LoggedData -> LoggedInModel.Model -> Html Msg
 view loggedData loggedIn =
-  div
-    [ class "home" ]
-    [ AddPaymentView.view loggedData loggedIn
-    , div
-        [ class "expandables" ]
-        [ AccountView.view loggedData loggedIn
-        , MonthlyView.view loggedData loggedIn
+  let punctualPayments = Payment.sortedFiltredPunctual loggedIn.search loggedData.payments
+  in  div
+        [ class "home" ]
+        [ AddPaymentView.view loggedData loggedIn
+        , div
+            [ class "expandables" ]
+            [ AccountView.view loggedData loggedIn
+            , MonthlyView.view loggedData loggedIn
+            ]
+        , paymentsSearch loggedData loggedIn
+        , paymentsTable loggedData loggedIn punctualPayments
+        , paymentsPaging punctualPayments loggedIn
         ]
-    , paymentsTable loggedData loggedIn
-    , paymentsPaging loggedData.payments loggedIn
-    ]
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" ] []
diff --git a/src/client/elm/Model/Payment.elm b/src/client/elm/Model/Payment.elm
index 4f0f85a..d9a5d68 100644
--- a/src/client/elm/Model/Payment.elm
+++ b/src/client/elm/Model/Payment.elm
@@ -11,10 +11,12 @@ module Model.Payment exposing
   , punctual
   , monthly
   , groupAndSortByMonth
+  , sortedFiltredPunctual
   )
 
 import Date exposing (..)
 import Json.Decode as Json exposing ((:=))
+import String
 
 import Model.User exposing (UserId, userIdDecoder)
 import Model.Date exposing (dateDecoder)
@@ -93,3 +95,13 @@ groupAndSortByMonth payments =
     |> List.sortBy fst
     |> List.map (\((year, month), payments) -> ((Date.numToMonth month, year), payments))
     |> List.reverse
+
+sortedFiltredPunctual : String -> Payments -> Payments
+sortedFiltredPunctual search payments =
+  punctual payments
+    |> List.sortBy (Date.toTime << .creation)
+    |> List.filter (searchSuccess search)
+    |> List.reverse
+
+searchSuccess : String -> Payment -> Bool
+searchSuccess text { name } = (String.toLower text) `String.contains` (String.toLower name)
diff --git a/src/client/elm/SignIn/View.elm b/src/client/elm/SignIn/View.elm
index 2cec586..7ee4ecd 100644
--- a/src/client/elm/SignIn/View.elm
+++ b/src/client/elm/SignIn/View.elm
@@ -2,10 +2,14 @@ module SignIn.View exposing
   ( view
   )
 
+import Json.Decode as Json
+import Color
+
+import FontAwesome
+
 import Html as H exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
-import Json.Decode as Json
 
 import SignIn.Msg as SignInMsg
 import SignIn.Model as SignInModel
@@ -17,7 +21,6 @@ import Msg exposing (..)
 import Model.Translations exposing (getMessage)
 
 import View.Events exposing (onSubmitPrevDefault)
-import View.Icon exposing (renderSpinIcon)
 
 view : Model -> SignInModel.Model -> Html Msg
 view model signInModel =
@@ -34,7 +37,7 @@ view model signInModel =
         , button
             []
             [ if signInModel.waitingServer
-                then renderSpinIcon
+                then FontAwesome.spinner Color.white 20
                 else text (getMessage "SignIn" model.translations)
             ]
         ]
diff --git a/src/client/elm/View/Header.elm b/src/client/elm/View/Header.elm
index 5597429..5f38c31 100644
--- a/src/client/elm/View/Header.elm
+++ b/src/client/elm/View/Header.elm
@@ -3,6 +3,9 @@ module View.Header exposing
   )
 
 import Dict
+import Color
+
+import FontAwesome
 
 import Page exposing (..)
 
@@ -15,8 +18,6 @@ import Model.Translations exposing (getMessage)
 import Msg exposing (..)
 import Model.View exposing (..)
 
-import View.Icon exposing (renderIcon)
-
 renderHeader : Model -> Html Msg
 renderHeader model =
   header
@@ -50,7 +51,7 @@ renderHeader model =
                        [ class "signOut item"
                        , onClick SignOut
                        ]
-                       [ renderIcon "power-off" ]
+                       [ FontAwesome.power_off Color.white 30 ]
                    ]
                ]
              _ ->
diff --git a/src/client/elm/View/Icon.elm b/src/client/elm/View/Icon.elm
deleted file mode 100644
index 8a5e383..0000000
--- a/src/client/elm/View/Icon.elm
+++ /dev/null
@@ -1,21 +0,0 @@
-module View.Icon exposing
-  ( renderIcon
-  , renderSpinIcon
-  )
-
-import Html exposing (..)
-import Html.Attributes exposing (..)
-
-import Msg exposing (Msg)
-
-renderIcon : String -> Html Msg
-renderIcon iconClass =
-  i
-    [ class <| "fa fa-fw fa-" ++ iconClass ]
-    []
-
-renderSpinIcon : Html Msg
-renderSpinIcon =
-  i
-    [ class <| "fa fa-fw fa-spin fa-spinner" ]
-    []