aboutsummaryrefslogtreecommitdiff
path: root/client/src/Component
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/Component')
-rw-r--r--client/src/Component/Input.hs114
-rw-r--r--client/src/Component/Modal.hs19
-rw-r--r--client/src/Component/Select.hs61
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
+ }
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 21:56:24 +0000