Skip to content
Snippets Groups Projects

Try to fix listeners in select boxes in Applications filters

@@ -83,7 +83,12 @@
</div>
<div class="flex vertical gap-1">
<label for="statuses" th:text="#{jobOffer.status}"></label>
<select data-select id="statuses" name="statuses" multiple>
<select
class="select status"
data-select
id="statuses"
name="statuses"
multiple>
<option
th:each="status : ${T(nl.tudelft.tam.enums.Status).values()}"
th:selected="${param.statuses != null && param.statuses.length > 0 && param.statuses.contains(status.name())}"
@@ -141,40 +146,42 @@
window.location.href = url.href;
});
const statuses = document.getElementById("statuses");
const oldStatuses = [...statuses.querySelectorAll("option[selected]")].map(
opt => opt.value
);
statuses.addEventListener("close", function () {
const selected = [...statuses.querySelectorAll("option[selected]")].map(
opt => opt.value
);
let equal = true;
if (selected.length === oldStatuses.length) {
for (let i = 0; i < selected.length; i++) {
if (selected[i] !== oldStatuses[i]) {
equal = false;
}
}
}
if (!equal) {
return;
}
const statuses = document.getElementsByClassName("status");
let url = new URL(window.location);
let params = new URLSearchParams(url.search);
params.delete("statuses");
let oldStatuses = [...statuses]
.flatMap(status => [...status.querySelectorAll("option[selected]")])
.map(opt => opt.value);
url.search = [...params.entries()]
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
.concat(
selected.map(status => `statuses=${encodeURIComponent(status)}`)
)
.join("&");
let hasChanged = false;
window.location.href = url.href;
[...statuses].forEach(stat => {
stat.addEventListener("change", function () {
hasChanged = true;
});
stat.addEventListener("close", function () {
if (!hasChanged) {
return;
}
const selected = [...statuses]
.flatMap(status => [...status.querySelectorAll("option[selected]")])
.map(opt => opt.value);
let equal = true;
if (selected.length === oldStatuses.length) {
for (let i = 0; i < selected.length; i++) {
if (selected[i] !== oldStatuses[i]) {
equal = false;
}
}
}
if (!equal) {
return;
}
let url = new URL(window.location);
url.searchParams.delete("statuses");
selected.forEach(status => url.searchParams.append("statuses", status));
window.location.href = url.href;
});
});
});
</script>
Loading