From 1d574eba8117c5be5fab2607c66a69f22824692a Mon Sep 17 00:00:00 2001
From: Christian Tschugg <iantsch@gmail.com>
Date: Tue, 13 Jun 2023 22:04:12 +0200
Subject: [PATCH] Fix select all stores ux

---
 site/views/items-filter.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/site/views/items-filter.js b/site/views/items-filter.js
index a12500b..dcad2af 100644
--- a/site/views/items-filter.js
+++ b/site/views/items-filter.js
@@ -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");