Use select component in payment search line

4 files changed, 19 insertions, 9 deletions

diff --git a/README.md b/README.md
index dbffc41..9f9b64b 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,7 @@ See [application.conf](application.conf).
 
 ### Code
 
+- Use BEM style
 - Move the CSS out from the index page
 - Add tests about exceedingPayers
 - try DuplicateRecordFields (https://ghc.haskell.org/trac/ghc/wiki/Records/OverloadedRecordFields/DuplicateRecordFields)
diff --git a/client/src/Component/Select.hs b/client/src/Component/Select.hs
index 01ed37a..cf62f26 100644
--- a/client/src/Component/Select.hs
+++ b/client/src/Component/Select.hs
@@ -27,7 +27,8 @@ data (Reflex t) => SelectIn t a b c = SelectIn
   }
 
 data SelectOut t a = SelectOut
-  { _selectOut_value :: Dynamic t (Validation Text a)
+  { _selectOut_raw   :: Dynamic t a
+  , _selectOut_value :: Dynamic t (Validation Text a)
   }
 
 select :: forall t m a b c. (Ord a, MonadWidget t m) => SelectIn t a b c -> m (SelectOut t a)
@@ -77,5 +78,6 @@ select selectIn = do
       return value
 
   return SelectOut
-    { _selectOut_value = validatedValue
+    { _selectOut_raw = value
+    , _selectOut_value = validatedValue
     }
diff --git a/client/src/View/Payment/Header.hs b/client/src/View/Payment/Header.hs
index 73517f0..7a85493 100644
--- a/client/src/View/Payment/Header.hs
+++ b/client/src/View/Payment/Header.hs
@@ -28,7 +28,8 @@ import qualified Common.View.Format     as Format
 
 import           Component              (ButtonIn (..), ButtonOut (..),
                                          InputIn (..), InputOut (..),
-                                         ModalIn (..), ModalOut (..))
+                                         ModalIn (..), ModalOut (..),
+                                         SelectIn (..), SelectOut (..))
 import qualified Component              as Component
 import qualified Util.List              as L
 import           View.Payment.Add       (AddIn (..), AddOut (..))
@@ -140,8 +141,16 @@ searchLine reset = do
           , (Monthly, Msg.get Msg.Payment_MonthlyMale)
           ]
 
-    searchFrequency <- R._dropdown_value <$>
-      R.dropdown Punctual (R.constDyn frequencies) R.def
+    searchFrequency <- _selectOut_raw <$> (Component.select $
+      SelectIn
+        { _selectIn_label        = ""
+        , _selectIn_initialValue = Punctual
+        , _selectIn_value        = R.never
+        , _selectIn_values       = R.constDyn frequencies
+        , _selectIn_reset        = R.never
+        , _selectIn_isValid      = const True
+        , _selectIn_validate     = R.never
+        })
 
     return (searchName, searchFrequency)
 
diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index 0cb5b5d..9111374 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -59,10 +59,8 @@ design = do
         marginBottom (em 1)
         width (pct 100)
 
-    ".radioGroup" ? do
-      display inlineBlock
-      marginBottom (px 0)
-      ".title" ? display none
+    ".selectInput" ? do
+      Media.tabletDesktop $ display inlineBlock
 
   ".infos" ? do
     Media.tabletDesktop $ lineHeight (px Constants.inputHeight)