feat(filters): store filters in local storage

apps/app_web/assets/js/components/filters.js

@@ -3,13 +3,62 @@ document.addEventListener("filters:mounted", (event) => {
 });
 
 export function init($container) {
-  const $reset = $container.querySelector(".js-filters-reset");
+  $container.addEventListener("input", () => storeState($container));
 
+  const $reset = $container.querySelector(".js-filters-reset");
   $reset.addEventListener("click", () => reset($container));
+
+  restoreState($container);
 }
 
-function getFilters($container) {
-  return $container.querySelectorAll(".js-filters-filter");
+function storeState($container) {
+  const state = getCurrentState($container);
+  localStorage.setItem(`filters-${$container.id}`, JSON.stringify(state));
+}
+
+function getCurrentState($container) {
+  const filters = getFilters($container);
+  let state = {};
+
+  for (const $filter of filters) {
+    const name = getName($filter);
+    state[name] = getCurrentValues($filter);
+  }
+
+  return state;
+}
+
+function restoreState($container) {
+  const state = getStoredState($container);
+  let hasChanged = false;
+
+  const $filters = getFilters($container);
+  for (const $filter of $filters) {
+    const name = getName($filter);
+
+    if (!Object.hasOwn(state, name)) {
+      continue;
+    }
+
+    const $inputs = $filter.querySelectorAll("input");
+    const values = state[name];
+
+    for (const $input of $inputs) {
+      const checked = values.includes($input.value)
+      hasChanged = hasChanged || $input.checked !== checked;
+
+      $input.checked = checked;
+    }
+  }
+
+  if (hasChanged) {
+    submit($container);
+  }
+}
+
+function getStoredState($container) {
+  const raw = localStorage.getItem(`filters-${$container.id}`);
+  return raw ? JSON.parse(raw) : {};
 }
 
 export function reset($container) {
@@ -27,13 +76,8 @@ export function reset($container) {
   submit($container);
 }
 
-function getDefaultOptions($filter) {
-  const defaultOptions = JSON.parse($filter.dataset.default);
-  return isMultiple($filter) ? defaultOptions : [defaultOptions];
-}
-
-function isMultiple($filter) {
-  return $filter.hasAttribute("data-multiple");
+function getFilters($container) {
+  return $container.querySelectorAll(".js-filters-filter");
 }
 
 export function submit($container) {
@@ -43,3 +87,22 @@ export function submit($container) {
     .querySelector("input")
     .dispatchEvent(new Event("input", { bubbles: true }));
 }
+
+// ## Filters
+function getName($filter) {
+  return $filter.dataset.name;
+}
+
+function getCurrentValues($filter) {
+  const $inputs = $filter.querySelectorAll("input:checked");
+  return Array.from($inputs).map((input) => input.value);
+}
+
+function isMultiple($filter) {
+  return $filter.hasAttribute("data-multiple");
+}
+
+function getDefaultOptions($filter) {
+  const defaultOptions = JSON.parse($filter.dataset.default);
+  return isMultiple($filter) ? defaultOptions : [defaultOptions];
+}

apps/app_web/lib/app_web/components/filters_components.ex

@@ -24,7 +24,6 @@ defmodule AppWeb.FiltersComponents do
 
   ## TODO
 
-  - store the state of the filter in local storage
   - display a badge with the number of active filters
   """
   attr :id, :string, required: true, doc: "the id of the filters container"
@@ -50,6 +49,7 @@ defmodule AppWeb.FiltersComponents do
         :for={filter <- @filters}
         id={[@id, "_", filter.name]}
         class="js-filters-filter"
+        data-name={filter.name}
         data-multiple={filter.multiple}
         data-default={JSON.encode!(filter.default)}
       >