mirror of
https://github.com/badlogic/heissepreise.git
synced 2024-06-24 09:25:53 +02:00
Fix select all stores ux
This commit is contained in:
parent
3853c7312d
commit
1d574eba81
|
@ -23,7 +23,9 @@ class ItemsFilter extends View {
|
|||
<input x-id="query" x-state x-input-debounce class="rounded-lg px-2 py-1 w-full" type="text" placeholder="${placeholder}" />
|
||||
|
||||
<div x-id="stores" class="flex justify-center gap-2 flex-wrap mt-4 ${hideStores}">
|
||||
<custom-checkbox x-id="allStores" label="Alle" checked></custom-checkbox>
|
||||
<custom-checkbox x-id="allStores" label="Alle" ${
|
||||
Object.values(stores).every((store) => store.defaultChecked) ? "checked" : ""
|
||||
}></custom-checkbox>
|
||||
${STORE_KEYS.map(
|
||||
(store) => /*html*/ `
|
||||
<custom-checkbox
|
||||
|
@ -82,11 +84,24 @@ class ItemsFilter extends View {
|
|||
}
|
||||
});
|
||||
|
||||
elements.allStores.addEventListener("change", () => {
|
||||
const handleChangeAll = () => {
|
||||
const checked = elements.allStores.checked;
|
||||
STORE_KEYS.forEach((store) => (elements[store].checked = checked));
|
||||
this.fireChangeEvent();
|
||||
});
|
||||
};
|
||||
|
||||
const storeElements = STORE_KEYS.map((store) => elements[store]);
|
||||
|
||||
storeElements.forEach((store) =>
|
||||
store.addEventListener("change", () => {
|
||||
const allChecked = storeElements.every((store) => store.checked);
|
||||
elements.allStores.removeEventListener("change", handleChangeAll);
|
||||
elements.allStores.checked = allChecked;
|
||||
elements.allStores.addEventListener("change", handleChangeAll);
|
||||
})
|
||||
);
|
||||
|
||||
elements.allStores.addEventListener("change", handleChangeAll);
|
||||
|
||||
elements.priceChangesToday.addEventListener("change", () => {
|
||||
if (elements.priceChangesToday.checked) elements.priceDirection.classList.remove("hidden");
|
||||
|
|
Loading…
Reference in New Issue
Block a user