1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
package reading.component.index
import rx._
import Ctx.Owner.Unsafe._
import scalatags.JsDom.all._
import scalacss.Defaults._
import scalacss.ScalatagsCss._
import reading.component.index.style.{ Menu => MenuStyle }
import reading.models._
import reading.utils.{ RxTag, RxAttr }
import reading.Route
object Menu {
def apply(books: Rx[Seq[Book]], filters: Var[Seq[Filter]], showFiltersMenu: Var[Boolean]): Frag =
RxTag { implicit context =>
div(
MenuStyle.render,
if (showFiltersMenu()) MenuStyle.show else "",
MenuStyle.menu,
header(showFiltersMenu, filters().length),
div(
MenuStyle.groups,
filters().find(_.kind == FilterKind.Grade) match {
case None => group(books, filters, "Classe", Grade.values.map(Filter.apply(_)))
case Some(grade) => group(books, filters, grade.name, Program.values.map(Filter.apply(_)), Some(grade))
},
group(books, filters, "Theme", Theme.values.map(Filter.apply(_))),
group(books, filters, "Genre", Genre.values.map(Filter.apply(_))),
group(books, filters, "Niveau", Level.values.map(Filter.apply(_))),
group(books, filters, "Période", Period.values.map(Filter.apply(_)))
),
footer(Rx(books().length), filters, showFiltersMenu)
)
}
def header(showFiltersMenu: Var[Boolean], count: Int): HtmlTag =
div(
MenuStyle.header,
"Filtrer",
if (count > 0) span(MenuStyle.filtersCount, count) else span("")
)
def group(
books: Rx[Seq[Book]],
filters: Var[Seq[Filter]],
name: String,
groupFilters: Seq[Filter],
parentFilter: Option[Filter] = None
)(
implicit
context: Ctx.Data
): Frag = {
val filtersWithCount = Rx {
groupFilters
.map(filter => (filter, Book.filter(books(), Seq(filter)).length))
.filter(_._2 > 0)
}
if (filtersWithCount().isEmpty)
span("")
else
div(
MenuStyle.filterGroup,
div(
MenuStyle.filterTitle,
parentFilter.map { filter =>
RxAttr(onclick, Rx(() => updateFilters(filters, Filter.remove(filters(), filter))))
}.getOrElse(""),
if (parentFilter.isDefined) MenuStyle.activeFilter else "",
name,
RxTag { implicit context =>
val count = filters().filter(f => groupFilters.exists(Filter.equals(f, _))).length
if (count > 0) span(MenuStyle.filterTitleCount, count) else span("")
}
),
div(
filtersWithCount().map {
case (filter, count) => {
val isActive = Filter.contains(filters(), filter)
button(
MenuStyle.filter,
if (isActive) MenuStyle.activeFilter else "",
RxAttr(onclick, Rx(() => updateFilters(
filters,
if (isActive) Filter.remove(filters(), filter) else filter +: filters()
))),
span(
span(filter.name.capitalize),
span(MenuStyle.filterCount, count)
)
)
}
}
)
)
}
private def updateFilters(filters: Var[Seq[Filter]], newFilters: Seq[Filter]): Unit = {
filters() = newFilters
Route.push(Route.Books(newFilters))
}
def footer(bookCount: Rx[Int], filters: Var[Seq[Filter]], showFiltersMenu: Var[Boolean]): HtmlTag =
div(
MenuStyle.footer,
div(
MenuStyle.clear,
RxAttr(onclick, Rx(() => filters() = Nil)),
"Effacer"
),
div(
MenuStyle.returnToBooks,
RxAttr(onclick, Rx(() => showFiltersMenu() = false)),
"Afficher",
RxTag { implicit context =>
span(MenuStyle.bookCount, bookCount())
}
)
)
}
|
