Skip to content

Commit d62fdf8

Browse files
kamilszewczyk0kamilszewczyk0
committed
clear button invisible if no filters applied
1 parent ead2ffc commit d62fdf8

File tree

1 file changed

+134
-118
lines changed

1 file changed

+134
-118
lines changed

‎scaladoc/resources/dotty_res/scripts/components/FilterBar.js

Lines changed: 134 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -2,125 +2,141 @@
22
* @typedef { import("./Filter").Filter } Filter
33
*/
44

5-
class FilterBar extends Component {
6-
constructor(props) {
7-
super(props);
8-
9-
this.refs = {
10-
elements: findRefs(".documentableElement"),
11-
filterBar: findRef(".documentableFilter"),
12-
};
13-
14-
this.state = {
15-
filter: new Filter("", {}, this.refs.elements, true),
16-
isVisible: false,
17-
selectedPill: "",
18-
};
19-
20-
this.inputComp = new Input({ onInputChange: this.onInputChange });
21-
this.listComp = new DocumentableList({
22-
filter: this.state.filter,
23-
});
24-
this.filterGroupComp = new FilterGroup({
25-
filter: this.state.filter,
26-
onFilterToggle: this.onFilterToggle,
27-
onGroupSelectChange: this.onGroupSelectChange,
28-
onFilterVisibilityChange: this.onFilterVisibilityChange,
29-
onPillClick: this.onPillClick,
30-
onPillCollapse: this.onPillCollapse,
31-
});
32-
33-
this.render();
34-
}
35-
36-
onInputChange = (value) => {
37-
this.setState((prevState) => ({
38-
filter: prevState.filter.onInputValueChange(value),
39-
}));
40-
this.onChangeDisplayedElements();
41-
};
42-
43-
onGroupSelectChange = (key, isActive) => {
44-
this.setState((prevState) => ({
45-
filter: prevState.filter.onGroupSelectionChange(key, isActive),
46-
}));
47-
};
48-
49-
onClearFilters = () => {
50-
this.inputComp.inputRef.value = "";
51-
this.setState((prevState) => ({
52-
filter: prevState.filter.onInputValueChange(""),
53-
}));
54-
};
55-
56-
onFilterVisibilityChange = () => {
57-
this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
58-
};
59-
60-
onFilterToggle = (key, value) => {
61-
this.setState((prevState) => ({
62-
filter: prevState.filter.onFilterToggle(key, value),
63-
}));
64-
this.onChangeDisplayedElements();
65-
};
66-
67-
onPillClick = (key) => {
68-
this.setState((prevState) => ({
69-
filter: prevState.filter,
70-
selectedPill: key,
71-
}));
72-
};
73-
74-
onPillCollapse = () => {
75-
this.setState((prevState) => ({
76-
filter: prevState.filter,
77-
selectedPill: "",
78-
}));
79-
};
80-
81-
onChangeDisplayedElements = () => {
82-
const elementsDisplayed = this.refs.elements.filter(
83-
(member) => member.style.display !== "none",
84-
);
85-
const noResultContainer = document.querySelector("#no-results-container");
86-
if (elementsDisplayed.length === 0 && !noResultContainer) {
87-
const emptySpace = document.querySelector("#Value-members");
88-
emptySpace.insertAdjacentHTML(
89-
// TODO ścieżka do poprawki
90-
"beforeend",
91-
`<div id='no-results-container'>
92-
<img src="./images/no-results.svg" alt="Sick face" >
5+
class FilterBar extends Component {
6+
constructor(props) {
7+
super(props);
8+
9+
this.refs = {
10+
elements: findRefs(".documentableElement"),
11+
filterBar: findRef(".documentableFilter"),
12+
};
13+
14+
this.state = {
15+
filter: new Filter("", {}, this.refs.elements, true),
16+
isVisible: false,
17+
selectedPill: "",
18+
};
19+
20+
this.inputComp = new Input({ onInputChange: this.onInputChange });
21+
this.listComp = new DocumentableList({
22+
filter: this.state.filter,
23+
});
24+
this.filterGroupComp = new FilterGroup({
25+
filter: this.state.filter,
26+
onFilterToggle: this.onFilterToggle,
27+
onGroupSelectChange: this.onGroupSelectChange,
28+
onFilterVisibilityChange: this.onFilterVisibilityChange,
29+
onPillClick: this.onPillClick,
30+
onPillCollapse: this.onPillCollapse,
31+
});
32+
33+
this.render();
34+
}
35+
36+
onInputChange = (value) => {
37+
this.setState((prevState) => ({
38+
filter: prevState.filter.onInputValueChange(value),
39+
}));
40+
this.onChangeDisplayedElements();
41+
this.onDisplayClearButton();
42+
};
43+
44+
onGroupSelectChange = (key, isActive) => {
45+
this.setState((prevState) => ({
46+
filter: prevState.filter.onGroupSelectionChange(key, isActive),
47+
}));
48+
};
49+
50+
onClearFilters = () => {
51+
this.inputComp.inputRef.value = "";
52+
this.setState((prevState) => ({
53+
filter: prevState.filter.onInputValueChange(""),
54+
}));
55+
};
56+
57+
onFilterVisibilityChange = () => {
58+
this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
59+
};
60+
61+
onFilterToggle = (key, value) => {
62+
this.setState((prevState) => ({
63+
filter: prevState.filter.onFilterToggle(key, value),
64+
}));
65+
this.onChangeDisplayedElements();
66+
this.onDisplayClearButton();
67+
};
68+
69+
onPillClick = (key) => {
70+
this.setState((prevState) => ({
71+
filter: prevState.filter,
72+
selectedPill: key,
73+
}));
74+
};
75+
76+
onPillCollapse = () => {
77+
this.setState((prevState) => ({
78+
filter: prevState.filter,
79+
selectedPill: "",
80+
}));
81+
};
82+
83+
onChangeDisplayedElements = () => {
84+
const elementsDisplayed = this.refs.elements.filter(
85+
(member) => member.style.display !== "none",
86+
);
87+
const noResultContainer = document.querySelector("#no-results-container");
88+
if (elementsDisplayed.length === 0 && !noResultContainer) {
89+
const emptySpace = document.querySelector("#Value-members");
90+
emptySpace.insertAdjacentHTML(
91+
"beforeend",
92+
`<div id='no-results-container'>
93+
<img src="./icons/no-results.svg" alt="Sick face" >
9394
<h2 class='h200 no-result-header'>No results match your filter criteria</h2>
9495
<p class='no-result-content'>Try adjusting or clearing your filters<br>to display better result</p>
9596
<button class='clearButton label-only-button'>Clear all filters</button>
9697
</div>`,
97-
);
98-
}
99-
};
100-
101-
render() {
102-
if (this.refs.filterBar) {
103-
if (this.state.isVisible) {
104-
this.refs.filterBar.classList.add("active");
105-
} else {
106-
this.refs.filterBar.classList.remove("active");
107-
}
108-
}
109-
110-
this.listComp.render({ filter: this.state.filter });
111-
this.filterGroupComp.render({
112-
filter: this.state.filter,
113-
selectedPill: this.state.selectedPill,
114-
});
115-
}
116-
}
117-
118-
window.addEventListener("dynamicPageLoad", () => {
119-
new FilterBar();
120-
});
121-
122-
document.addEventListener("click", (e) => {
123-
const isClearButton = e.target.classList.contains("clearButton");
124-
if (isClearButton) new FilterBar().onClearFilters();
125-
});
126-
98+
);
99+
}
100+
};
101+
102+
onDisplayClearButton = () => {
103+
const clearButton = document.querySelector(".clearButton");
104+
105+
const isPillFilterChecked = Object.values(this.state.filter._filters).some(
106+
(bigFilter) =>
107+
Object.values(bigFilter).some((smallFilter) => smallFilter.selected),
108+
);
109+
110+
if (this.state.filter._value.length === 0 && !isPillFilterChecked) {
111+
clearButton.style.display = "none";
112+
} else {
113+
clearButton.style.display = "block";
114+
}
115+
};
116+
117+
render() {
118+
this.onDisplayClearButton();
119+
if (this.refs.filterBar) {
120+
if (this.state.isVisible) {
121+
this.refs.filterBar.classList.add("active");
122+
} else {
123+
this.refs.filterBar.classList.remove("active");
124+
}
125+
}
126+
127+
this.listComp.render({ filter: this.state.filter });
128+
this.filterGroupComp.render({
129+
filter: this.state.filter,
130+
selectedPill: this.state.selectedPill,
131+
});
132+
}
133+
}
134+
135+
window.addEventListener("dynamicPageLoad", () => {
136+
new FilterBar();
137+
});
138+
139+
document.addEventListener("click", (e) => {
140+
const isClearButton = e.target.classList.contains("clearButton");
141+
if (isClearButton) new FilterBar().onClearFilters();
142+
});

0 commit comments

Comments
 (0)