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/AddPayment/View.elm | 10 +++++--- src/client/elm/LoggedIn/Home/Model.elm | 2 ++ src/client/elm/LoggedIn/Home/Msg.elm | 1 + src/client/elm/LoggedIn/Home/Update.elm | 8 +++++++ src/client/elm/LoggedIn/Home/View.elm | 25 ++++++++++++-------- 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 +++++++++++----------- 10 files changed, 100 insertions(+), 45 deletions(-) create mode 100644 src/client/elm/LoggedIn/Home/View/Search.elm (limited to 'src/client/elm/LoggedIn/Home') 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" ] [] -- cgit v1.2.3