fix: store filters in localStorage (#3049)

thorsten · Aug 19, 2024 · 3c0beb7 · 3c0beb7
1 parent 25a7825
commit 3c0beb7
Showing 1 changed file with 45 additions and 5 deletions.
diff --git a/phpmyfaq/admin/assets/src/content/faqs.overview.js b/phpmyfaq/admin/assets/src/content/faqs.overview.js
@@ -19,10 +19,10 @@ import { addElement } from '../../../../assets/src/utils';
 
 export const handleFaqOverview = async () => {
   const collapsedCategories = document.querySelectorAll('.accordion-collapse');
-  const filterForInactive = document.getElementById('pmf-checkbox-filter-inactive');
-  const filterForNew = document.getElementById('pmf-checkbox-filter-new');
 
   if (collapsedCategories) {
+    initializeCheckboxState();
+
     collapsedCategories.forEach((category) => {
       const categoryId = category.getAttribute('data-pmf-categoryId');
       const language = category.getAttribute('data-pmf-language');
@@ -32,8 +32,8 @@ export const handleFaqOverview = async () => {
       });
 
       category.addEventListener('shown.bs.collapse', async () => {
-        const onlyInactive = filterForInactive.checked;
-        const onlyNew = filterForNew.checked;
+        const onlyInactive = getInactiveCheckboxState();
+        const onlyNew = getNewCheckboxState();
 
         const faqs = await fetchAllFaqsByCategory(categoryId, language, onlyInactive, onlyNew);
         await populateCategoryTable(categoryId, faqs.faqs);
@@ -81,7 +81,7 @@ export const handleFaqOverview = async () => {
 
             for (const [languageCode, languageName] of Object.entries(translations)) {
               if (languageCode !== language) {
-                const translationLinks = document.querySelectorAll('#dropdownTranslation').forEach((link) => {
+                document.querySelectorAll('#dropdownTranslation').forEach((link) => {
                   options.push(link.innerText);
                 });
                 if (!options.includes(`→ ${regionNames.of(languageCode)}`)) {
@@ -370,3 +370,43 @@ const allFaqsAreSticky = (categoryId) => {
     }
   }
 };
+
+const initializeCheckboxState = () => {
+  const filterForInactive = document.getElementById('pmf-checkbox-filter-inactive');
+  const filterForNew = document.getElementById('pmf-checkbox-filter-new');
+
+  const storedInactiveState = localStorage.getItem('pmfCheckboxFilterInactive');
+  const storedNewState = localStorage.getItem('pmfCheckboxFilterNew');
+
+  if (storedInactiveState !== null) {
+    filterForInactive.checked = JSON.parse(storedInactiveState);
+  }
+
+  if (storedNewState !== null) {
+    filterForNew.checked = JSON.parse(storedNewState);
+  }
+
+  if (filterForInactive) {
+    filterForInactive.addEventListener('change', () => {
+      localStorage.setItem('pmfCheckboxFilterInactive', filterForInactive.checked);
+    });
+  }
+
+  if (filterForNew) {
+    filterForNew.addEventListener('change', () => {
+      localStorage.setItem('pmfCheckboxFilterNew', filterForNew.checked);
+    });
+  }
+};
+
+// Getter for the inactive checkbox state
+const getInactiveCheckboxState = () => {
+  const storedInactiveState = localStorage.getItem('pmfCheckboxFilterInactive');
+  return storedInactiveState !== null ? JSON.parse(storedInactiveState) : null;
+};
+
+// Getter for the new checkbox state
+const getNewCheckboxState = () => {
+  const storedNewState = localStorage.getItem('pmfCheckboxFilterNew');
+  return storedNewState !== null ? JSON.parse(storedNewState) : null;
+};