From d359e1d6203728783c97ed1313e62088dd44f386 Mon Sep 17 00:00:00 2001
From: Joris
Date: Fri, 21 Apr 2017 17:31:50 +0200
Subject: Sort table by clicking on the header

---
 src/Page.purs | 73 +++++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 49 insertions(+), 24 deletions(-)

(limited to 'src/Page.purs')

diff --git a/src/Page.purs b/src/Page.purs
index f7c04c2..40c8ddc 100644
--- a/src/Page.purs
+++ b/src/Page.purs
@@ -1,10 +1,11 @@
 module Page
   ( component
   , Query
+  , init
   ) where
 
 import Control.Monad.Aff (Aff)
-import Data.Array (sortBy, filter)
+import Data.Array (sortBy, filter, reverse)
 import Data.Maybe (Maybe(..))
 import Data.String (contains, Pattern(..))
 import DOM (DOM)
@@ -18,19 +19,30 @@ import Food (Aliment)
 import Food as Food
 import Format as Format
 import Indicator as Indicator
+import Order (Order, OrderKind)
+import Order as Order
 
 data Query a =
-  NoOp a
-  | UpdateSearch String a
+  UpdateSearch String a
+  | SelectOrder OrderKind a
 
-type State = String
+type State =
+  { search :: String
+  , order :: Order
+  }
+
+init :: State
+init =
+  { search: ""
+  , order: Order.init
+  }
 
 type Message = Unit
 
 component :: forall eff. H.Component HH.HTML Query State Message (Aff (dom :: DOM | eff))
 component =
   H.component
-    { initialState: const ""
+  { initialState: const init
     , render
     , eval
     , receiver: const Nothing
@@ -40,41 +52,46 @@ component =
     render state =
       HH.div
         [ HP.class_ $ HH.ClassName "page" ]
-        [ renderHeader state
+        [ renderHeader state.order.kind state.search
         , HH.div
             [ HP.class_ $ HH.ClassName "aliments" ]
             ( Food.all
-                # filter (\a -> contains (Pattern $ Format.string state) (Format.string a.name))
-                # sortBy (\a b -> compare (Format.string a.name) (Format.string b.name))
+                # filter (\a -> contains (Pattern $ Format.string state.search) (Format.string a.name))
+                # sortBy compareAliments
+                # (if state.order.direction == Order.Ascending then id else reverse)
                 # map renderAliment
             )
         ]
+      where
+        compareAliments :: Aliment -> Aliment -> Ordering
+        compareAliments a b =
+          case state.order.kind of
+            Order.Name -> compare (Format.string a.name) (Format.string b.name)
+            Order.GlycemicIndex -> compare a.glycemicIndex b.glycemicIndex
+            Order.Carbohydrates -> compare a.carbohydrates b.carbohydrates
+            Order.GlycemicLoad -> compare (Food.glycemicLoad a) (Food.glycemicLoad b)
 
     eval :: Query ~> H.ComponentDSL State Query Message (Aff (dom :: DOM | eff))
     eval = case _ of
-      NoOp next -> pure next
       UpdateSearch search next -> do
-        H.put search
+        state <- H.get
+        H.put $ state { search = search }
+        pure next
+      SelectOrder kind next -> do
+        state <- H.get
+        H.put $ state { order = Order.select kind state.order }
         pure next
 
-renderHeader :: String -> H.ComponentHTML Query
-renderHeader search =
+renderHeader :: OrderKind -> String -> H.ComponentHTML Query
+renderHeader orderKind search =
   HH.div
     [ HP.class_ $ HH.ClassName "header" ]
     [ HH.div
         [ HP.class_ $ HH.ClassName "title line" ]
-        [ HH.div
-            []
-            [ HH.text "Aliment" ]
-        , HH.div
-            []
-            [ HH.text "Index glycémique" ]
-        , HH.div
-            []
-            [ HH.text "Glucides pour 100 g" ]
-        , HH.div
-            []
-            [ HH.text "Charge glycémique" ]
+        [ button Order.Name "Aliment"
+        , button Order.GlycemicIndex "Index glycémique"
+        , button Order.Carbohydrates "Glucides pour 100 g"
+        , button Order.GlycemicLoad "Charge glycémique"
         ]
     , HH.input
         [ HP.class_ $ HH.ClassName "search line"
@@ -83,6 +100,14 @@ renderHeader search =
         , HP.value search
         ]
     ]
+  where
+    button :: OrderKind -> String -> H.ComponentHTML Query
+    button kind label =
+      HH.button
+        [ HE.onClick (HE.input_ (SelectOrder kind))
+        , HP.class_ $ HH.ClassName (if orderKind == kind then "sorted"  else "")
+        ]
+        [ HH.text label ]
 
 renderAliment :: Aliment -> H.ComponentHTML Query
 renderAliment aliment =
-- 
cgit v1.2.3