Filter refactor

app/site/projects.liquid

@@ -226,10 +226,10 @@ layout: base
           {% if currentPage < totalPages | minus: 1 %}
             <li class="usa-pagination__item usa-pagination__arrow">
               <a href="/projects/page/{{ currentPage | plus: 1 }}/" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
-                <span class="usa-pagination__link-text">Next </span>
                 <svg class="usa-icon" aria-hidden="true" role="img">
                   <use xlink:href="/assets/img/sprite.svg#navigate_next"></use>
                 </svg>
+                <span class="usa-pagination__link-text">Next</span>
               </a>
             </li>
           {% endif %}

app/src/js/modules/data.js

@@ -12,17 +12,22 @@ export const baseurl = DOMPurify.sanitize(siteData.baseurl);
 
 export const projects = setProjectsData(parsedProjectsData)
 
-// export let filteredProjects = [...parsedProjectsData];
-
 export function setProjectsData(parsedData) {
     let projects = {};
     const orgCheckboxes = document.getElementById('organization-content').querySelectorAll('.usa-checkbox');
     const organizations = [...orgCheckboxes].map(checkbox => checkbox.textContent.trim());
-    
+
     organizations.forEach(org => {
-      projects[org] = getProjectsInOrg(parsedData, org);
-    })
-    return projects
+      projects[org] = [];
+    });
+
+    parsedData.forEach(project => {
+      if(project.owner in projects) {
+        projects[project.owner].push(project)
+      }
+    });
+
+    return projects;
   }
 
   export function findObject(array, value) {

app/src/js/modules/events.js

@@ -1,5 +1,5 @@
 import { sortDirection, sortSelection, parsedProjectsData } from "./data";
-import { getFilteredProjects, setFilteredProjects, updateFilters, updateFilteredProjects } from "./filters";
+import { setFilteredProjects, updateFilters, updateFilteredProjects } from "./filters";
 import { sortCards } from "./sorting";
 import { renderPaginatedProjects } from "./rendering";
 
@@ -41,7 +41,7 @@ document.addEventListener("DOMContentLoaded", () => {
       );
       setFilteredProjects(newFilteredProjects)
       currentPage = 1
-      renderPaginatedProjects(getFilteredProjects());
+      renderPaginatedProjects();
     }
   })
 });

app/src/js/modules/filters.js

@@ -3,7 +3,8 @@ import { addGlobalEventListener, updateHeadingVisibility } from "./utilities";
 import { renderPaginatedProjects, renderPaginationControls } from "./rendering";
 import { sortCards } from "./sorting";
 
-
+let currentPage = 1
+const itemsPerPage = 10;
 let filteredProjects = [...parsedProjectsData];
 
 export function getFilteredProjects() {
@@ -14,10 +15,7 @@ export function setFilteredProjects(projects) {
   filteredProjects = projects;
 }
 
-let currentPage = 1
-const itemsPerPage = 10;
-
-export function updateFilteredProjects() {
+function getSelectedFilters() {
   const selectedFiltersObject = {
     organization: [],
     maturityModelTier: [],
@@ -38,12 +36,18 @@ export function updateFilteredProjects() {
     selectedFiltersObject.projectType.push(checkbox.value);
   });
 
+  return selectedFiltersObject;
+}
+
+export function updateFilteredProjects() {
+  const selected = getSelectedFilters();
+
   const allProjects = Object.keys(projects).flatMap((org) => projects[org].map((project) => ({...project, org})))
   filteredProjects = allProjects.filter((project) => {
-    const matchesOrg = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(project.org);
-    const matchesTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes("Tier" + project.maturityModelTier);
-    const matchesFisma = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(project.fismaLevel);
-    const matchesType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(project.projectType);
+    const matchesOrg = selected.organization.length === 0 || selected.organization.includes(project.org);
+    const matchesTier = selected.maturityModelTier.length === 0 || selected.maturityModelTier.includes("Tier" + project.maturityModelTier);
+    const matchesFisma = selected.fismaLevel.length === 0 || selected.fismaLevel.includes(project.fismaLevel);
+    const matchesType = selected.projectType.length === 0 || selected.projectType.includes(project.projectType);
     return  matchesOrg && matchesTier && matchesFisma && matchesType;
   });
 
@@ -90,37 +94,20 @@ export function addFilterButtonGroup(selectedFiltersObject) {
 }
 
 export function updateFilters() {
-  const selectedFiltersObject = {
-    organization: [],
-    maturityModelTier: [],
-    fismaLevel: [],
-    projectType: []
-  }
+  const selected = getSelectedFilters();
 
-  document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => {
-    selectedFiltersObject.organization.push(checkbox.value);
-  });
-  document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => {
-    selectedFiltersObject.maturityModelTier.push(checkbox.value);
-  });
-  document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => {
-    selectedFiltersObject.fismaLevel.push(checkbox.value);
-  });
-  document.querySelectorAll('input[name="project-type-filter"]:checked').forEach(checkbox => {
-    selectedFiltersObject.projectType.push(checkbox.value);
-  });
-
-  addFilterButtonGroup(selectedFiltersObject)
+  addFilterButtonGroup(selected)
   const projectSections = document.querySelectorAll(".project_section");
 
   projectSections.forEach((section) => {
     const projectCards = section.querySelectorAll(".project-card");
 
     projectCards.forEach((card) => {
-      checkFilterCriteria(card, selectedFiltersObject);
+      checkFilterCriteria(card, selected);
     })
   })
 
+  addFilterButtonGroup(selected);
   updateHeadingVisibility();
 }
 
@@ -140,7 +127,6 @@ export function checkFilterCriteria(card, selectedFiltersObject) {
 export function updatePagination() {
   const totalProjects = (filteredProjects || parsedProjectsData).length;
   const totalPages = Math.ceil(totalProjects / itemsPerPage);
-
   currentPage = Math.min(currentPage, totalPages || 1);
   renderPaginationControls(totalPages);
 }