Implementing client side validation

3 files changed, 135 insertions, 59 deletions

diff --git a/client/src/Component/Input.hs b/client/src/Component/Input.hs
index 57018a6..67f97c0 100644
--- a/client/src/Component/Input.hs
+++ b/client/src/Component/Input.hs
@@ -5,59 +5,91 @@ module Component.Input
   , defaultInputIn
   ) where
 
-import qualified Data.Map         as M
-import           Data.Text        (Text)
-import qualified Data.Text        as T
-import           Reflex.Dom       (Dynamic, Event, MonadWidget, Reflex, (&),
-                                   (.~))
-import qualified Reflex.Dom       as R
-
-import           Component.Button (ButtonIn (..), ButtonOut (..))
-import qualified Component.Button as Button
+import qualified Data.Map               as M
+import qualified Data.Maybe             as Maybe
+import           Data.Text              (Text)
+import qualified Data.Text              as T
+import           Data.Time              (NominalDiffTime)
+import           Data.Validation        (Validation (Failure, Success))
+import qualified Data.Validation        as V
+import           Reflex.Dom             (Dynamic, Event, MonadWidget, Reflex,
+                                         (&), (.~))
+import qualified Reflex.Dom             as R
+
+import qualified Common.Util.Validation as ValidationUtil
+import           Component.Button       (ButtonIn (..), ButtonOut (..))
+import qualified Component.Button       as Button
 import qualified Icon
 
-data InputIn = InputIn
+data InputIn a = InputIn
   { _inputIn_hasResetButton :: Bool
   , _inputIn_label          :: Text
   , _inputIn_initialValue   :: Text
   , _inputIn_inputType      :: Text
+  , _inputIn_validation     :: Text -> Validation Text a
   }
 
-defaultInputIn :: InputIn
+defaultInputIn :: InputIn Text
 defaultInputIn = InputIn
   { _inputIn_hasResetButton = True
   , _inputIn_label          = ""
   , _inputIn_initialValue   = ""
   , _inputIn_inputType      = "text"
+  , _inputIn_validation     = V.Success
   }
 
-data InputOut t = InputOut
-  { _inputOut_value :: Dynamic t Text
+data InputOut t a = InputOut
+  { _inputOut_raw   :: Dynamic t Text
+  , _inputOut_value :: Dynamic t (Maybe (Validation Text a))
   , _inputOut_enter :: Event t ()
   }
 
 input
   :: forall t m a b. MonadWidget t m
-  => InputIn
-  -> Event t a -- reset
-  -> m (InputOut t)
-input inputIn reset =
-  R.divClass "textInput" $ do
-    rec
-      let resetValue = R.leftmost
-            [ fmap (const "") reset
-            , fmap (const "") resetClic
-            ]
-
-          attributes = R.ffor value (\v ->
-            if T.null v && _inputIn_inputType inputIn /= "date"
-              then M.empty
-              else M.singleton "class" "filled")
-
-          value =  R._textInput_value textInput
+  => InputIn a
+  -> Event t Text -- reset
+  -> Event t b    -- validate
+  -> m (InputOut t a)
+input inputIn reset validate = do
+  rec
+    let resetValue = R.leftmost
+          [ R.traceEvent "reset" reset
+          , fmap (const "") resetClic
+          ]
+
+        inputAttr = R.ffor value (\v ->
+          if T.null v && _inputIn_inputType inputIn /= "date"
+            then M.empty
+            else M.singleton "class" "filled")
+
+        value =  R._textInput_value textInput
+
+        containerAttr = R.ffor validatedValue (\v ->
+          M.singleton "class" $ T.intercalate " "
+            [ "textInput"
+            , if Maybe.fromMaybe False (ValidationUtil.isFailure <$> v) then "error" else ""
+            ])
+
+    -- Clear validation errors after reset
+    delayedReset <- R.delay (0.1 :: NominalDiffTime) reset
+
+    validatedValue <- R.holdDyn Nothing $ R.attachWith
+      (\v (clearValidation, validateEmpty) ->
+        if clearValidation
+           then Nothing
+           else Just (_inputIn_validation inputIn $ (if validateEmpty then "" else v)))
+      (R.current value)
+      (R.leftmost
+        [ const (False, True) <$> resetClic
+        , (\f -> (f, False)) <$> (R.updated . R._textInput_hasFocus $ textInput)
+        , const (False, False) <$> validate
+        , const (True, False) <$> R.traceEvent "delayedReset" delayedReset
+        ])
+
+    (textInput, resetClic) <- R.elDynAttr "div" containerAttr $ do
 
       textInput <- R.textInput $ R.def
-        & R.attributes .~ attributes
+        & R.attributes .~ inputAttr
         & R.setValue .~ resetValue
         & R.textInputConfig_initialValue .~ (_inputIn_initialValue inputIn)
         & R.textInputConfig_inputType .~ (_inputIn_inputType inputIn)
@@ -75,9 +107,19 @@ input inputIn reset =
           else
             return R.never
 
-    let enter = fmap (const ()) $ R.ffilter ((==) 13) . R._textInput_keypress $ textInput
+      R.divClass "errorMessage" $
+        R.dynText . fmap validationError $ validatedValue
+
+      return (textInput, resetClic)
+
+  let enter = fmap (const ()) $ R.ffilter ((==) 13) . R._textInput_keypress $ textInput
+
+  return $ InputOut
+    { _inputOut_raw = value
+    , _inputOut_value = validatedValue
+    , _inputOut_enter = enter
+    }
 
-    return $ InputOut
-      { _inputOut_value = value
-      , _inputOut_enter = enter
-      }
+validationError :: Maybe (Validation Text a) -> Text
+validationError (Just (Failure e)) = e
+validationError _                  = ""
diff --git a/client/src/Component/Modal.hs b/client/src/Component/Modal.hs
index b86fee0..d7943a9 100644
--- a/client/src/Component/Modal.hs
+++ b/client/src/Component/Modal.hs
@@ -23,11 +23,12 @@ data ModalIn t m a = ModalIn
   , _modalIn_content :: m a
   }
 
-data ModalOut a = ModalOut
+data ModalOut t a = ModalOut
   { _modalOut_content :: a
+  , _modalOut_hide    :: Event t ()
   }
 
-modal :: forall t m a. MonadWidget t m => ModalIn t m a -> m (ModalOut a)
+modal :: forall t m a. MonadWidget t m => ModalIn t m a -> m (ModalOut t a)
 modal modalIn = do
   rec
     let showEvent = R.leftmost
@@ -48,6 +49,7 @@ modal modalIn = do
 
   return $ ModalOut
     { _modalOut_content = content
+    , _modalOut_hide = curtainClick
     }
 
 getAttributes :: Bool -> LM.Map Text Text
@@ -67,12 +69,13 @@ performShowEffects showEvent elem = do
 
   let showEffects =
         flip fmap showEvent (\show -> do
-          if show
-            then
-              do
-                Node.appendChild body elem
-                Element.setClassName body ("modal" :: JSString)
-            else
+          if show then
+            do
+              Node.appendChild body elem
+              Element.setClassName body ("modal" :: JSString)
+          else
+            do
+              Node.removeChild body elem
               Element.setClassName body ("" :: JSString)
         )
 
diff --git a/client/src/Component/Select.hs b/client/src/Component/Select.hs
index 7cb6726..9f671d3 100644
--- a/client/src/Component/Select.hs
+++ b/client/src/Component/Select.hs
@@ -5,34 +5,65 @@ module Component.Select
   ) where
 
 import           Data.Map   (Map)
+import qualified Data.Map   as M
 import           Data.Text  (Text)
+import qualified Data.Text  as T
 import           Reflex.Dom (Dynamic, Event, MonadWidget, Reflex)
 import qualified Reflex.Dom as R
 
-data (Reflex t) => SelectIn t a = SelectIn
+import qualified Common.Msg as Msg
+
+data (Reflex t) => SelectIn t a b c = SelectIn
   { _selectIn_label        :: Text
   , _selectIn_initialValue :: a
   , _selectIn_values       :: Dynamic t (Map a Text)
-  , _selectIn_reset        :: Event t ()
+  , _selectIn_reset        :: Event t b
+  , _selectIn_isValid      :: a -> Bool
+  , _selectIn_validate     :: Event t c
   }
 
 data SelectOut t a = SelectOut
   { _selectOut_value :: Dynamic t a
   }
 
-select :: forall t m a. (Ord a, MonadWidget t m) => SelectIn t a -> m (SelectOut t a)
-select selectIn =
-  R.divClass "selectInput" $ do
-    R.el "label" $ R.text (_selectIn_label selectIn)
+select :: forall t m a b c. (Ord a, MonadWidget t m) => SelectIn t a b c -> m (SelectOut t a)
+select selectIn = do
+  rec
+    let containerAttr = R.ffor hasError (\e ->
+          M.singleton "class" $ T.intercalate " "
+            [ "selectInput"
+            , if e then "error" else ""
+            ])
+
+    hasError <- R.holdDyn False $ R.attachWith
+      (\v clearError -> not clearError && not (_selectIn_isValid selectIn v))
+      (R.current value)
+      (R.leftmost
+        [ const False <$> _selectIn_validate selectIn
+        , const True <$> _selectIn_reset selectIn
+        ])
+
+    value <- R.elDynAttr "div" containerAttr $ do
+      R.el "label" $ R.text (_selectIn_label selectIn)
+
+      let initialValue = _selectIn_initialValue selectIn
+
+      value <- R._dropdown_value <$>
+        R.dropdown
+          initialValue
+          (_selectIn_values selectIn)
+          (R.def { R._dropdownConfig_setValue = fmap (const initialValue) (_selectIn_reset selectIn) })
+
+      errorMessage <- R.holdDyn "" $ R.attachWith
+        (\v _ -> if (_selectIn_isValid selectIn) v then "" else "ERROR!")
+        (R.current value)
+        (_selectIn_validate selectIn)
 
-    let initialValue = _selectIn_initialValue selectIn
+      R.divClass "errorMessage" . R.dynText $
+        R.ffor hasError (\e -> if e then Msg.get Msg.Form_NonEmpty else "")
 
-    value <- R._dropdown_value <$>
-      R.dropdown
-        initialValue
-        (_selectIn_values selectIn)
-        (R.def { R._dropdownConfig_setValue = fmap (const initialValue) (_selectIn_reset selectIn) })
+      return value
 
-    return SelectOut
-      { _selectOut_value = value
-      }
+  return SelectOut
+    { _selectOut_value = value
+    }