1 files changed, 76 insertions, 0 deletions
diff --git a/src/main/scala/reading/component/index/Header.scala b/src/main/scala/reading/component/index/Header.scala
new file mode 100644
index 0000000..7e29b4c
--- /dev/null
+++ b/src/main/scala/reading/component/index/Header.scala
@@ -0,0 +1,76 @@
+package reading.component.index
+
+import org.scalajs.dom
+
+import rx._
+import Ctx.Owner.Unsafe._
+
+import scalatags.JsDom.all._
+import scalacss.Defaults._
+import scalacss.ScalatagsCss._
+
+import reading.component.index.style.{ Header => HeaderStyle }
+import reading.component.widget.Cross
+import reading.component.style.{ Color => C }
+import reading.models.Filter
+import reading.Route
+import reading.utils.{ RxTag, RxAttr }
+
+object Header {
+  def apply(filters: Var[Seq[Filter]], showFiltersMenu: Var[Boolean], booksCount: Rx[Int]): Frag = {
+    val filtersCount: Rx[Int] = Rx(filters().length)
+
+    div(
+      HeaderStyle.render,
+      HeaderStyle.header,
+
+      RxTag { implicit context =>
+        div(
+          div(
+            HeaderStyle.showFiltersMenu,
+            RxAttr(onclick, Rx(() => {
+              showFiltersMenu() = true
+              dom.document.body.style.overflowY = "hidden"
+            })),
+            "Filtrer",
+            if (filtersCount() > 0) span(HeaderStyle.filtersCount, filtersCount()) else span("")
+          ),
+
+          if (filters().isEmpty)
+            span("")
+          else
+            div(
+              HeaderStyle.filters,
+
+              div(
+                HeaderStyle.clear,
+                RxAttr(onclick, Rx(() => updateFilters(filters, Nil))),
+                "Effacer les filtres"
+              ),
+
+              filters().sortBy(_.name).map { filter =>
+                div(
+                  HeaderStyle.filter,
+                  RxAttr(onclick, Rx(() => updateFilters(filters, Filter.remove(filters(), filter)))),
+                  span(HeaderStyle.name, filter.name.capitalize),
+                  Cross(15.px, C.black.value)
+                )
+              }
+            )
+        )
+      },
+
+      RxTag { implicit context =>
+        div(
+          HeaderStyle.booksCount,
+          span(s"${booksCount()} livre${if (booksCount() > 1) "s" else ""}")
+        )
+      }
+    )
+  }
+
+  private def updateFilters(filters: Var[Seq[Filter]], newFilters: Seq[Filter]): Unit = {
+    filters() = newFilters
+    Route.push(Route.Books(newFilters))
+  }
+}