Adding UI to modify the income

6 files changed, 73 insertions, 7 deletions

diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 53839c1..6e2fde3 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -6,6 +6,7 @@ module Design.Helper
   , defaultInput
   , centeredWithMargin
   , expandBlock
+  , verticalCentering
   ) where
 
 import Clay
@@ -60,3 +61,9 @@ expandBlock headerBackground headerColor headerHeight = do
     position relative
     paddingLeft blockPadding
     paddingRight (px 55)
+
+verticalCentering :: Css
+verticalCentering = do
+  position absolute
+  top (pct 50)
+  "transform" -: "translateY(-50%)"
diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs
index 6bfa034..35a30a6 100644
--- a/src/server/Design/LoggedIn.hs
+++ b/src/server/Design/LoggedIn.hs
@@ -6,10 +6,6 @@ module Design.LoggedIn
 
 import Clay
 
-import Design.Color as C
-import Design.Helper
-import Design.Constants
-
 import Design.LoggedIn.Add
 import Design.LoggedIn.Expandables
 import Design.LoggedIn.Table
diff --git a/src/server/Design/LoggedIn/Add.hs b/src/server/Design/LoggedIn/Add.hs
index 6d4de69..579cead 100644
--- a/src/server/Design/LoggedIn/Add.hs
+++ b/src/server/Design/LoggedIn/Add.hs
@@ -15,7 +15,7 @@ import Design.Constants
 addDesign :: Css
 addDesign =
 
-  form ? do
+  form # ".addPayment" ? do
     centeredWithMargin
     marginBottom blockMarginBottom
     display flex
@@ -28,7 +28,7 @@ addDesign =
       label ? do
         fontWeight bold
         display inlineBlock
-        width (px 40)
+        width (px 50)
         textAlign (alignSide sideCenter)
         backgroundColor C.darkGrey
         color C.white
diff --git a/src/server/Design/LoggedIn/Expandables.hs b/src/server/Design/LoggedIn/Expandables.hs
index 3807da4..66a9b06 100644
--- a/src/server/Design/LoggedIn/Expandables.hs
+++ b/src/server/Design/LoggedIn/Expandables.hs
@@ -4,6 +4,8 @@ module Design.LoggedIn.Expandables
   ( expandablesDesign
   ) where
 
+import Data.Monoid ((<>))
+
 import Clay
 
 import Design.Color as C
@@ -31,7 +33,30 @@ expandablesDesign =
 
       ".income" ? do
         backgroundColor C.lightGrey
-        lineHeight rowHeight
         padding (px 0) (px 20) (px 0) (px 20)
+        position relative
+        lineHeight rowHeight
+
+        input ? do
+          defaultInput inputHeight
+          marginLeft (px 20)
+          marginTop (px (-5))
+          width (px 100)
+
+        button ? do
+          marginLeft (px 20)
+          paddingLeft (px 15)
+          paddingRight (px 15)
+          marginTop (px (-5))
+
+        ".validateIncomeEdition" <> ".editIncomeEdition" ?
+          defaultButton C.red C.white (px inputHeight)
+
+        ".undoIncomeEdition" ?
+          defaultButton C.blue C.white (px inputHeight)
+
+        ".error" ? do
+          color C.redError
+          lineHeight (px 30)
 
     ".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index 9f16f6b..bd2b567 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -45,6 +45,8 @@ data Key =
   | CategoryRequired
   | CostRequired
   | CostMustBeNonNullNumber
+  | IncomeRequired
+  | IncomeMustBeNonNullNumber
 
   -- Payments
 
@@ -60,5 +62,9 @@ data Key =
 
   | Income
   | NoIncome
+  | Edit
+  | Validate
+  | Undo
+  | NewIncome
 
   deriving (Enum, Bounded, Show)
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 8c27a2d..8c6a233 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -193,6 +193,16 @@ m l CostMustBeNonNullNumber =
     English -> "The cost must be a non-null integer."
     French  -> "Le coût doit être un entier non nul."
 
+m l IncomeRequired =
+  case l of
+    English -> "Type an income."
+    French  -> "Entre un revenu."
+
+m l IncomeMustBeNonNullNumber =
+  case l of
+    English -> "The income must be a non-null integer."
+    French  -> "Le revenu doit être un entier non nul."
+
 -- Payments
 
 m l Add =
@@ -235,6 +245,8 @@ m l PluralMonthlyCount =
         French  -> "{1} paiements mensuels comptabilisant {2}"
     ]
 
+-- Income
+
 m l Income =
   T.concat
     [ case l of
@@ -246,3 +258,23 @@ m l NoIncome =
   case l of
     English -> "Income not given"
     French  -> "Revenu non renseigné"
+
+m l Edit =
+  case l of
+    English -> "Edit"
+    French  -> "Éditer"
+
+m l Validate =
+  case l of
+    English -> "Validate"
+    French  -> "Valider"
+
+m l Undo =
+  case l of
+    English -> "Undo"
+    French  -> "Annuler"
+
+m l NewIncome =
+  case l of
+    English -> "New income"
+    French  -> "Nouveau revenu"