Merge pull request #54 from citizennet/davezuch/PS-3041/buttons

davezuch · web-flow · commit 0534354a674f · 2019-07-12T11:03:51.000-07:00
PS-3041 Add form buttons
diff --git a/dist/index.html b/dist/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <title>CitizenNet UI Guide</title>
     <link rel="stylesheet" href="css/cn-tailwind.css" />
+    <!-- temp styles until Ocelot gets updated -->
+    <style>.container { max-width: 1200px; }</style>
   </head>
 
   <body class="bg-grey-light">
diff --git a/dist/main.js b/dist/main.js
diff --git a/example/Lynx/Component/Router.purs b/example/Lynx/Component/Router.purs
@@ -13,6 +13,7 @@ import Effect.Aff.Class (class MonadAff)
 import Halogen as H
 import Halogen.Component.ChildPath as CP
 import Halogen.HTML as HH
+import Halogen.HTML.Events as HE
 import Lynx.Expr as Lynx.Expr
 import Lynx.Form as Lynx.Form
 import Lynx.List as Lynx.List
@@ -29,7 +30,7 @@ data Query a
   = Navigate Route a
 
 type Input
-  = Unit
+  = Route
 
 type Message
   = Void
@@ -49,7 +50,7 @@ component =
     { initialState: const Home
     , eval
     , render
-    , receiver: const Nothing
+    , receiver: HE.input Navigate
     }
   where
   eval :: Query ~> H.ParentDSL State Query ChildQueries ChildSlots Message m
diff --git a/example/Lynx/Page/Form.purs b/example/Lynx/Page/Form.purs
@@ -1,6 +1,7 @@
 module Lynx.Page.Form where
 
 import Prelude hiding ((/))
+
 import Data.Const (Const)
 import Data.Either.Nested (type (\/))
 import Data.Functor.Coproduct.Nested (type (<\/>))
@@ -9,6 +10,7 @@ import Data.Generic.Rep.Show (genericShow)
 import Data.NonEmpty as Data.NonEmpty
 import Effect.Aff (Aff)
 import Effect.Aff.Class (class MonadAff)
+import Effect.Class.Console (log, logShow)
 import Halogen as H
 import Halogen.Component.ChildPath (cp1)
 import Halogen.HTML as HH
@@ -121,4 +123,10 @@ eval = case _ of
   Initialize { fragment, route } a -> do
     H.modify_ _ { fragment = fragment, route = route }
     pure a
-  LynxQuery message _ -> absurd message
+  LynxQuery message a ->
+    case message of
+      Lynx.Canceled -> pure a
+      Lynx.Submitted { expr } -> do
+        log "Form submitted:"
+        logShow expr
+        pure a
diff --git a/example/Main.purs b/example/Main.purs
@@ -10,7 +10,7 @@ import Halogen.HTML as HH
 import Halogen.VDom.Driver (runUI)
 import Lynx.AppM (runAppM)
 import Lynx.Component.Router as Router
-import Lynx.Route (routeCodec)
+import Lynx.Route (Route(..), routeCodec)
 import Routing.Duplex (parse)
 import Routing.Hash (matchesWith)
 
@@ -19,9 +19,9 @@ main =
   HA.runHalogenAff do
     body <- HA.awaitBody
     let
-      router :: H.Component HH.HTML Router.Query Unit Void Aff
+      router :: H.Component HH.HTML Router.Query Router.Input Void Aff
       router = H.hoist (runAppM {}) Router.component
-    driver <- runUI router unit body
+    driver <- runUI router Home body
     void $ H.liftEffect
       $ matchesWith (parse routeCodec) \old new ->
           when (old /= Just new) do
diff --git a/src/Lynx.purs b/src/Lynx.purs
@@ -64,6 +64,8 @@ data Query a
   | TypeaheadSingleQuery Key (Typeahead.Message Query Maybe ExprType) a
   | AddSection Key a
   | RemoveSection Key Int a
+  | Cancel a
+  | Submit a
 
 type ParentInput
   = { activeTab :: String
@@ -84,8 +86,9 @@ type ChildSlot
       \/ Key
       \/ Void
 
-type Message
-  = Void
+data Message
+  = Canceled
+  | Submitted { expr :: Page Expr }
 
 component ::
   ∀ m.
@@ -113,16 +116,24 @@ component =
               ]
           Right page ->
             HH.div_
-              [ Header.header_
-                  [ Format.headingDark_ [ HH.text page.name ]
-                  ]
-              , Header.header_
-                  [ NavigationTab.navigationTabs_
-                      { activePage: activeTab
-                      , tabs:
-                        Data.Array.fromFoldable (map (fromTab fragment) page.tabs)
-                      }
-                  ]
+              [ Header.stickyFormHeader
+                  { brand: Just "https://citizennet.com/manager/images/logo.svg"
+                  , name: [ HH.text page.name ]
+                  , title: []
+                  , buttons:
+                    [ HH.a
+                        [ HE.onClick (HE.input_ Cancel)
+                        , css "cursor-pointer no-underline text-grey-70 mr-6"
+                        ]
+                        [ HH.text "Cancel" ]
+                    , Button.buttonPrimary
+                        [ HE.onClick (HE.input_ Submit) ]
+                        [ HH.text "Submit" ]
+                    ]
+                  }
+                  { activePage: activeTab
+                  , tabs: Data.Array.fromFoldable (map (fromTab fragment) page.tabs)
+                  }
               , Layout.grid_
                   [ renderTab activeTab page.tabs
                   , Layout.side_ []
@@ -375,6 +386,13 @@ eval = case _ of
   RemoveSection key index a -> do
     { expr } <- H.get
     eval (EvalForm (Lynx.Form.unstamp key index expr) a)
+  Cancel a -> do
+    H.raise Canceled
+    pure a
+  Submit a -> do
+    { expr } <- H.get
+    H.raise (Submitted { expr })
+    pure a
 
 fromTab :: forall a. Fragment -> Tab a -> NavigationTab.Tab String
 fromTab fragment { sections: sections'', name, link } =
