From de614cc2e4ff1dfa686bbbea2ef9e3c6fc08d62d Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Mon, 29 Jul 2024 16:00:47 -0700
Subject: [PATCH 01/12] filter frontend prototype

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/site/projects.liquid | 85 +++++++++++++++++++++++++++-------------
 app/src/css/style.css    | 32 +++++++++++++++
 2 files changed, 89 insertions(+), 28 deletions(-)

diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 6bf4e76a33..38e889783d 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -2,43 +2,72 @@
 layout: base
 ---
 <script type="module" src="{{ "/assets/js/projects.js" | url }}"></script>
-<div class="grid-container">
+<div class="grid-container ">
   <p>
     The Centers for Medicare and Medicaid Services develops and supports many open-source projects found in our various
     GitHub Organizations.
   </p>
+  {% assign org_filters = "DSACMS, CMS-Enterprise, CMSgov, Enterprise-CMCS" | split: "," %}
+  {% assign allFields = "project_type, user_input, project_fisma_level, group, subset_in_healthcare, user_type, repository_host, maturity_model_tier" | split: "," %}
 
-  <div class="margin-bottom-2">
-    <label class="usa-label" for="filter-input">Search</label>
-    <div class="usa-input-group width-full maxw-none">
-      <div class="usa-input-prefix" aria-hidden="true">
-        <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
-          <use xlink:href={{  "/assets/img/sprite.svg#search"| url }} ></use>
-        </svg>
+  <div class="test">
+    <div class="usa-accordion border-base-lighter border-2px">
+      <div class"usa-accordion__heading">
+        <button class="usa-accordion__button font-heading-md text-base-darker" id="organization">Organization</button>
+      </div>
+      <div class="usa-prose border-top-1px border-base-light">
+        <form class="usa-form">
+          <fieldset class="usa-fieldset" aria-labelledby="organization">
+            {% for org in org_filters %}
+              <div class="usa-checkbox padding-x-2 padding-y-1">
+                <input type="checkbox" class="usa-checkbox__input" id="test" value="test">
+                  <label class="usa-checkbox__label font-body-2xs text-base-dark">
+                    <span>{{org}}</span>
+                  </label>
+                </input>
+              </div>
+            {% endfor %}
+          </fieldset>
+        
+        </form>
       </div>
-      <input class="usa-input--lg" id="filter-input" name="filter-input">
     </div>
-  </div>
 
-  {% for org in organizations %}
-    <div class="project_section">
-      <div class="report_heading">
-        <h2>
-          {{ org.name }}
-          <img
-            src="{{org.avatar_url}}"
-            alt="Organization Avatar"
-            width="20"
-          >
-        </h2>
+
+    <div class="block">
+      <div class="margin-bottom-2">
+        <label class="usa-label" for="filter-input">Search</label>
+        <div class="usa-input-group width-full maxw-none">
+          <div class="usa-input-prefix" aria-hidden="true">
+            <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
+              <use xlink:href={{  "/assets/img/sprite.svg#search"| url }} ></use>
+            </svg>
+          </div>
+          <input class="usa-input--lg" id="filter-input" name="filter-input">
+        </div>
       </div>
 
-      <ul class="usa-card-group flex-align-stretch">
-        {% assign orgProjects = projects | findProjectsInOrg: org.name %}
-        {% for repo in orgProjects %}
-          {% render 'project-card', repo: repo, base_url: site.baseurl %}
-        {% endfor %}
-      </ul>
+      {% for org in organizations %}
+        <div class="project_section">
+          <div class="report_heading">
+            <h2>
+              {{ org.name }}
+              <img
+                src="{{org.avatar_url}}"
+                alt="Organization Avatar"
+                width="20"
+              >
+            </h2>
+          </div>
+
+          <ul class="usa-card-group flex-align-stretch">
+            {% assign orgProjects = projects | findProjectsInOrg: org.name %}
+            {% for repo in orgProjects %}
+              {% render 'project-card', repo: repo, base_url: site.baseurl %}
+            {% endfor %}
+          </ul>
+        </div>
+      {% endfor %}
     </div>
-  {% endfor %}
+  </div>
 </div>
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 9f70716a62..cb83923343 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -78,4 +78,36 @@
   /* padding-y-3 */
   padding-top:1.5rem;
   padding-bottom:1.5rem;
+}
+
+.projects-container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.block {
+  display: block;
+}
+
+.filters-container {
+  position: absolute;
+  top: 10rem;
+  left: 2rem;
+  width: calc(20vw - 2rem)
+}
+/* 
+.grid-container{
+  margin-left:auto;
+  margin-right:auto;
+  max-width:64rem;
+  padding-left:1rem;
+  padding-right: 1 rem
+} */
+
+.test {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
 }
\ No newline at end of file

From 64095c96bf8e03ffea00ae427b40057485c4c40f Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Wed, 31 Jul 2024 12:23:14 -0700
Subject: [PATCH 02/12] add filter boxes styling

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/site/_data/filters.json |  29 ++++++++++
 app/site/projects.liquid    | 112 ++++++++++++++++++++++++++++--------
 app/src/css/style.css       |  25 +++-----
 app/src/js/projects.js      |  22 +++++++
 4 files changed, 149 insertions(+), 39 deletions(-)
 create mode 100644 app/site/_data/filters.json

diff --git a/app/site/_data/filters.json b/app/site/_data/filters.json
new file mode 100644
index 0000000000..c4054a7a23
--- /dev/null
+++ b/app/site/_data/filters.json
@@ -0,0 +1,29 @@
+{
+    "organizations": [
+        "DSACMS", 
+        "CMS-Enterprise", 
+        "CMSgov", 
+        "Enterprise-CMCS"
+    ],
+    "maturity_model_tier": [
+        "Tier 1",
+        "Tier 2",
+        "Tier 3",
+        "Tier 4"
+    ],
+    "fisma_level": [
+        "Low",
+        "Moderate",
+        "High"
+    ],
+    "project_type": [
+        "Package", 
+        "Website", 
+        "Standards", 
+        "Libraries", 
+        "Data", 
+        "Apps", 
+        "Tools", 
+        "APIs"
+    ]
+}
diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 38e889783d..9dbb174244 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -7,37 +7,103 @@ layout: base
     The Centers for Medicare and Medicaid Services develops and supports many open-source projects found in our various
     GitHub Organizations.
   </p>
-  {% assign org_filters = "DSACMS, CMS-Enterprise, CMSgov, Enterprise-CMCS" | split: "," %}
   {% assign allFields = "project_type, user_input, project_fisma_level, group, subset_in_healthcare, user_type, repository_host, maturity_model_tier" | split: "," %}
 
-  <div class="test">
-    <div class="usa-accordion border-base-lighter border-2px">
-      <div class"usa-accordion__heading">
-        <button class="usa-accordion__button font-heading-md text-base-darker" id="organization">Organization</button>
+  <div class="dashboard-container">
+    <div class="filters-container">
+      {% comment %} filter by organization {% endcomment %}
+      <div class="usa-accordion border-base-lighter border-2px">
+        <div class="usa-accordion__heading">
+          <button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="true" aria-controls="organization-content" id="organization">Organization</button>
+        </div>
+        <div id="organization-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
+          <form class="usa-form">
+            <fieldset class="usa-fieldset" aria-labelledby="organization-filter">
+              <legend class="usa-sr-only" aria-labelledby="organization-filtering"></legend>
+              {% for org in filters.organizations %}
+                <div class="usa-checkbox padding-bottom-1">
+                  <input type="checkbox" class="usa-checkbox__input" id="{{ org }}" value="{{ org }}">
+                  <label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ org }}">
+                    <span>{{ org }}</span>
+                  </label>
+                </div>
+              {% endfor %}
+            </fieldset>
+          </form>
+        </div>
       </div>
-      <div class="usa-prose border-top-1px border-base-light">
-        <form class="usa-form">
-          <fieldset class="usa-fieldset" aria-labelledby="organization">
-            {% for org in org_filters %}
-              <div class="usa-checkbox padding-x-2 padding-y-1">
-                <input type="checkbox" class="usa-checkbox__input" id="test" value="test">
-                  <label class="usa-checkbox__label font-body-2xs text-base-dark">
-                    <span>{{org}}</span>
+
+      {% comment %} filter by maturity model tier {% endcomment %}
+      <div class="usa-accordion border-base-lighter border-2px">
+        <div class="usa-accordion__heading">
+          <button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="false" aria-controls="tier-content" id="mauturity-model-tier">Maturity Model Tier</button>
+        </div>
+        <div id="tier-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
+          <form class="usa-form">
+            <fieldset class="usa-fieldset" aria-labelledby="tier-filter">
+              <legend class="usa-sr-only" aria-labelledby="tier-filtering"></legend>
+              {% for tier in filters.maturity_model_tier %}
+                <div class="usa-checkbox padding-bottom-1">
+                  <input type="checkbox" class="usa-checkbox__input" id="{{ tier }}" value="{{ tier }}">
+                  <label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ tier }}">
+                    <span>{{ tier }}</span>
                   </label>
-                </input>
-              </div>
-            {% endfor %}
-          </fieldset>
-        
-        </form>
+                </div>
+              {% endfor %}
+            </fieldset>
+          </form>
+        </div>
       </div>
-    </div>
 
+      {% comment %} filter by fisma compliance level {% endcomment %}
+      <div class="usa-accordion border-base-lighter border-2px">
+        <div class="usa-accordion__heading">
+          <button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="false" aria-controls="fisma-level-content" id="fisma-level">FISMA Compliance Level</button>
+        </div>
+        <div id="fisma-level-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
+          <form class="usa-form">
+            <fieldset class="usa-fieldset" aria-labelledby="fisma-level-filter">
+              <legend class="usa-sr-only" aria-labelledby="fisma-level-filtering"></legend>
+              {% for level in filters.fisma_level %}
+                <div class="usa-checkbox padding-bottom-1">
+                  <input type="checkbox" class="usa-checkbox__input" id="fisma-level-{{ level | slug }}" value="fisma-level-{{ level | slug }}">
+                  <label class="usa-checkbox__label font-body-2xs text-base-dark" for="fisma-level-{{ level | slug }}">
+                    <span>{{ level }}</span>
+                  </label>
+                </div>
+              {% endfor %}
+            </fieldset>
+          </form>
+        </div>
+      </div>
 
+      {% comment %} filter by project type {% endcomment %}
+      <div class="usa-accordion border-base-lighter border-2px">
+        <div class="usa-accordion__heading">
+          <button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="false" aria-controls="project-type-content" id="project-type">Project Type</button>
+        </div>
+        <div id="project-type-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
+          <form class="usa-form">
+            <fieldset class="usa-fieldset" aria-labelledby="project-type-filter">
+              <legend class="usa-sr-only" aria-labelledby="project-type-filtering"></legend>
+              {% for type in filters.project_type %}
+                <div class="usa-checkbox padding-bottom-1">
+                  <input type="checkbox" class="usa-checkbox__input" id="{{ type }}" value="{{ type }}">
+                  <label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ type }}">
+                    <span>{{ type }}</span>
+                  </label>
+                </div>
+              {% endfor %}
+            </fieldset>
+          </form>
+        </div>
+      </div>
+    </div>
+    
     <div class="block">
       <div class="margin-bottom-2">
         <label class="usa-label" for="filter-input">Search</label>
-        <div class="usa-input-group width-full maxw-none">
+        <div class="usa-input-group width-full maxw-none border-base-light">
           <div class="usa-input-prefix" aria-hidden="true">
             <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
               <use xlink:href={{  "/assets/img/sprite.svg#search"| url }} ></use>
@@ -68,6 +134,6 @@ layout: base
           </ul>
         </div>
       {% endfor %}
-    </div>
+
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/src/css/style.css b/app/src/css/style.css
index cb83923343..be2a54f838 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -91,23 +91,16 @@
   display: block;
 }
 
-.filters-container {
-  position: absolute;
-  top: 10rem;
-  left: 2rem;
-  width: calc(20vw - 2rem)
-}
-/* 
-.grid-container{
-  margin-left:auto;
-  margin-right:auto;
-  max-width:64rem;
-  padding-left:1rem;
-  padding-right: 1 rem
-} */
-
-.test {
+.dashboard-container {
   display: flex;
   flex-direction: row;
   gap: 1rem;
+  /* padding-top: 5rem; */
+}
+
+.filters-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 3.4rem;
 }
\ No newline at end of file
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index b454c378f2..02612b5ef4 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -1,5 +1,27 @@
 const filterBox = document.getElementById("filter-input")
 const projectSections = document.querySelectorAll(".project_section")
+const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+
+// Add event listener to each checkbox
+checkboxes.forEach(function (checkbox) {
+  checkbox.addEventListener('change', function () {
+      updateFilters();
+  });
+});
+
+// Function to update filters
+function updateFilters() {
+
+  const selectedFilters = []
+
+  // Get selected categories
+  document.querySelectorAll('input:checked').forEach(function (checkbox) {
+      selectedFilters.push(checkbox.value);
+      console.log(checkbox.value)
+  });
+
+  console.log(selectedFilters)
+}
 
 filterBox.addEventListener("input", () => {
   const query = filterBox.value.toLowerCase()

From c58e85fd65c1dc35ae3b14f3a4271c8c78889c7b Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Wed, 31 Jul 2024 15:36:20 -0700
Subject: [PATCH 03/12] add filter tag functionality

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/site/projects.liquid |  6 ++++--
 app/src/js/projects.js   | 22 ++++++++++++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 9dbb174244..61d6a89d36 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -44,8 +44,8 @@ layout: base
               <legend class="usa-sr-only" aria-labelledby="tier-filtering"></legend>
               {% for tier in filters.maturity_model_tier %}
                 <div class="usa-checkbox padding-bottom-1">
-                  <input type="checkbox" class="usa-checkbox__input" id="{{ tier }}" value="{{ tier }}">
-                  <label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ tier }}">
+                  <input type="checkbox" class="usa-checkbox__input" id="{{ tier | slug }}" value="{{ tier | slug }}">
+                  <label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ tier | slug }}">
                     <span>{{ tier }}</span>
                   </label>
                 </div>
@@ -113,6 +113,8 @@ layout: base
         </div>
       </div>
 
+      <div class="padding-left-05" id="filter-tags"></div>
+
       {% for org in organizations %}
         <div class="project_section">
           <div class="report_heading">
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 02612b5ef4..06808802ba 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -1,5 +1,5 @@
-const filterBox = document.getElementById("filter-input")
-const projectSections = document.querySelectorAll(".project_section")
+const filterBox = document.getElementById("filter-input");
+const projectSections = document.querySelectorAll(".project_section");
 const checkboxes = document.querySelectorAll('input[type="checkbox"]');
 
 // Add event listener to each checkbox
@@ -11,16 +11,30 @@ checkboxes.forEach(function (checkbox) {
 
 // Function to update filters
 function updateFilters() {
-
   const selectedFilters = []
 
   // Get selected categories
   document.querySelectorAll('input:checked').forEach(function (checkbox) {
       selectedFilters.push(checkbox.value);
-      console.log(checkbox.value)
   });
 
   console.log(selectedFilters)
+  
+  // Get filter tags div from DOM
+  const selectedFiltersContainer = document.getElementById('filter-tags');
+  selectedFiltersContainer.innerHTML = '';
+
+  // Manipulate the DOM to create buttons based on the selected filters
+  const filtersButtonGroup = document.createElement('div');
+  filtersButtonGroup.className = "usa-button-group";
+  selectedFiltersContainer.appendChild(filtersButtonGroup);
+
+  selectedFilters.forEach(filter => {
+    const filterButton = document.createElement('button');
+    filterButton.className = 'usa-button margin-bottom-1';
+    filterButton.textContent = filter;
+    filtersButtonGroup.appendChild(filterButton);
+  });
 }
 
 filterBox.addEventListener("input", () => {

From 9d9f288dcc3a43300fc7e47f99aaa953f2b3aab6 Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Fri, 2 Aug 2024 08:15:13 -0700
Subject: [PATCH 04/12] dump repo data

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/site/_includes/project-card.liquid |  3 ++-
 app/src/js/projects.js                 | 10 +++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/site/_includes/project-card.liquid b/app/site/_includes/project-card.liquid
index 8a4952455b..0b3035684c 100644
--- a/app/site/_includes/project-card.liquid
+++ b/app/site/_includes/project-card.liquid
@@ -1,5 +1,6 @@
 {% capture new_link_var %}/{{ repo.owner }}/{{ repo.name }}/{% endcapture %}
-<li class="usa-card project-card tablet:grid-col-12" org-name="{{ repo.owner }}">
+<li class="usa-card project-card tablet:grid-col-12" id="{{ repo.name }}" org-name="{{ repo.owner }}">
+  <script type="application/json" id="{{ repo.name }}-data">{{ repo | dump }}</script>
   <div class="usa-card__container">
     <div class="usa-card__header">
       <h2 class="usa-card__heading">
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 06808802ba..440e8bf1d4 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -5,7 +5,7 @@ const checkboxes = document.querySelectorAll('input[type="checkbox"]');
 // Add event listener to each checkbox
 checkboxes.forEach(function (checkbox) {
   checkbox.addEventListener('change', function () {
-      updateFilters();
+    updateFilters();
   });
 });
 
@@ -13,6 +13,14 @@ checkboxes.forEach(function (checkbox) {
 function updateFilters() {
   const selectedFilters = []
 
+  // const repoData = document.getElementById('dedupliFHIR-data').textContent;
+  // const parsedData = JSON.parse(repoData);
+  // console.log(parsedData)
+
+
+  const siteDataScript = document.getElementById('dedupliFHIR-data');
+  console.log(siteDataScript)
+
   // Get selected categories
   document.querySelectorAll('input:checked').forEach(function (checkbox) {
       selectedFilters.push(checkbox.value);

From 0657e761d8d7ad94ac28412608ea900cad90b810 Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Mon, 5 Aug 2024 10:40:47 -0700
Subject: [PATCH 05/12] add project filtering functionality

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/site/_includes/project-card.liquid |   1 -
 app/site/projects.liquid               |  54 ++++++++++---
 app/src/css/style.css                  |  30 ++++++++
 app/src/js/projects.js                 | 102 ++++++++++++++++++++-----
 4 files changed, 156 insertions(+), 31 deletions(-)

diff --git a/app/site/_includes/project-card.liquid b/app/site/_includes/project-card.liquid
index 0b3035684c..da545676d4 100644
--- a/app/site/_includes/project-card.liquid
+++ b/app/site/_includes/project-card.liquid
@@ -1,6 +1,5 @@
 {% capture new_link_var %}/{{ repo.owner }}/{{ repo.name }}/{% endcapture %}
 <li class="usa-card project-card tablet:grid-col-12" id="{{ repo.name }}" org-name="{{ repo.owner }}">
-  <script type="application/json" id="{{ repo.name }}-data">{{ repo | dump }}</script>
   <div class="usa-card__container">
     <div class="usa-card__header">
       <h2 class="usa-card__heading">
diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 61d6a89d36..879a4056b5 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -2,6 +2,10 @@
 layout: base
 ---
 <script type="module" src="{{ "/assets/js/projects.js" | url }}"></script>
+<span style="display:none;" id="metrics">
+  {{projects | json }}
+</span>
+
 <div class="grid-container ">
   <p>
     The Centers for Medicare and Medicaid Services develops and supports many open-source projects found in our various
@@ -11,6 +15,7 @@ layout: base
 
   <div class="dashboard-container">
     <div class="filters-container">
+
       {% comment %} filter by organization {% endcomment %}
       <div class="usa-accordion border-base-lighter border-2px">
         <div class="usa-accordion__heading">
@@ -22,7 +27,7 @@ layout: base
               <legend class="usa-sr-only" aria-labelledby="organization-filtering"></legend>
               {% for org in filters.organizations %}
                 <div class="usa-checkbox padding-bottom-1">
-                  <input type="checkbox" class="usa-checkbox__input" id="{{ org }}" value="{{ org }}">
+                  <input type="checkbox" class="usa-checkbox__input" name="org-filter" id="{{ org }}" value="{{ org }}">
                   <label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ org }}">
                     <span>{{ org }}</span>
                   </label>
@@ -44,7 +49,7 @@ layout: base
               <legend class="usa-sr-only" aria-labelledby="tier-filtering"></legend>
               {% for tier in filters.maturity_model_tier %}
                 <div class="usa-checkbox padding-bottom-1">
-                  <input type="checkbox" class="usa-checkbox__input" id="{{ tier | slug }}" value="{{ tier | slug }}">
+                  <input type="checkbox" class="usa-checkbox__input" name="tier-filter" id="{{ tier | slug }}" value="{{ tier }}">
                   <label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ tier | slug }}">
                     <span>{{ tier }}</span>
                   </label>
@@ -66,7 +71,7 @@ layout: base
               <legend class="usa-sr-only" aria-labelledby="fisma-level-filtering"></legend>
               {% for level in filters.fisma_level %}
                 <div class="usa-checkbox padding-bottom-1">
-                  <input type="checkbox" class="usa-checkbox__input" id="fisma-level-{{ level | slug }}" value="fisma-level-{{ level | slug }}">
+                  <input type="checkbox" class="usa-checkbox__input" name="fisma-level-filter" id="fisma-level-{{ level | slug }}" value="{{ level }}">
                   <label class="usa-checkbox__label font-body-2xs text-base-dark" for="fisma-level-{{ level | slug }}">
                     <span>{{ level }}</span>
                   </label>
@@ -88,7 +93,7 @@ layout: base
               <legend class="usa-sr-only" aria-labelledby="project-type-filtering"></legend>
               {% for type in filters.project_type %}
                 <div class="usa-checkbox padding-bottom-1">
-                  <input type="checkbox" class="usa-checkbox__input" id="{{ type }}" value="{{ type }}">
+                  <input type="checkbox" class="usa-checkbox__input" name="project-type-filter" id="{{ type }}" value="{{ type }}">
                   <label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ type }}">
                     <span>{{ type }}</span>
                   </label>
@@ -101,15 +106,39 @@ layout: base
     </div>
     
     <div class="block">
-      <div class="margin-bottom-2">
-        <label class="usa-label" for="filter-input">Search</label>
-        <div class="usa-input-group width-full maxw-none border-base-light">
-          <div class="usa-input-prefix" aria-hidden="true">
-            <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
-              <use xlink:href={{  "/assets/img/sprite.svg#search"| url }} ></use>
-            </svg>
+      <div class="search-and-sort">
+        <div class="search-container">
+          <label class="usa-label" for="filter-input">Search</label>
+          <div class="usa-input-group width-full maxw-none border-base-light">
+            <div class="usa-input-prefix" aria-hidden="true">
+              <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
+                <use xlink:href={{  "/assets/img/sprite.svg#search"| url }} ></use>
+              </svg>
+            </div>
+            <input class="usa-input--lg" id="filter-input" name="filter-input">
           </div>
-          <input class="usa-input--lg" id="filter-input" name="filter-input">
+        </div>
+        <div class="sort-dropdown">
+          <form class="usa-form">
+            <label class="usa-label" for="sortSelection">Sort by</label>
+            <select class="usa-select border-base-light" id="sortSelection" name="sortSelection">
+              <option value="organization">Organization</option>
+              <option value="project-name">Project Name</option>
+              <option value="fisma-level">FISMA Compliance Level</option>
+              <option value="project-type">Project Type</option>
+              <option value="stars">Stars</option>
+              <option value="tier">Maturity Model Tier</option>
+              <option value="forks">Forks</option>
+            </select>
+          </form>
+
+          <form class="usa-form hidden">
+            <label class="usa-label" for="sortSelection">Sort Direction</label>
+            <select class="usa-select border-base-light" id="sortSelection" name="sortSelection">
+              <option value="ascending">Ascending</option>
+              <option value="descending">Descending</option>
+            </select>
+          </form>
         </div>
       </div>
 
@@ -130,6 +159,7 @@ layout: base
 
           <ul class="usa-card-group flex-align-stretch">
             {% assign orgProjects = projects | findProjectsInOrg: org.name %}
+
             {% for repo in orgProjects %}
               {% render 'project-card', repo: repo, base_url: site.baseurl %}
             {% endfor %}
diff --git a/app/src/css/style.css b/app/src/css/style.css
index be2a54f838..01b23131f6 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -89,6 +89,7 @@
 
 .block {
   display: block;
+  width: 100%;
 }
 
 .dashboard-container {
@@ -103,4 +104,33 @@
   flex-direction: column;
   gap: 1rem;
   padding-top: 3.4rem;
+}
+
+.search-container {
+  flex:1;
+  margin-bottom: 1rem;
+  box-sizing: border-box; 
+}
+
+.search-and-sort {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 3rem;
+}
+
+.sort-dropdown {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  text-align: right;
+  gap: 0.5rem;
+
+}
+
+@media screen and (max-width: 1080px) {
+  .dashboard-container {
+    flex-direction: column;
+  }
 }
\ No newline at end of file
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 440e8bf1d4..4fa0154c82 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -1,6 +1,8 @@
 const filterBox = document.getElementById("filter-input");
 const projectSections = document.querySelectorAll(".project_section");
 const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+const projectsData = document.getElementById('metrics').textContent;
+const parsedProjectsData = JSON.parse(projectsData)
 
 // Add event listener to each checkbox
 checkboxes.forEach(function (checkbox) {
@@ -11,23 +13,43 @@ checkboxes.forEach(function (checkbox) {
 
 // Function to update filters
 function updateFilters() {
-  const selectedFilters = []
 
-  // const repoData = document.getElementById('dedupliFHIR-data').textContent;
-  // const parsedData = JSON.parse(repoData);
-  // console.log(parsedData)
+  const selectedFiltersObject = {
+    organization: [],
+    maturityModelTier: [],
+    fismaLevel: [],
+    projectType: []
+  }
 
 
-  const siteDataScript = document.getElementById('dedupliFHIR-data');
-  console.log(siteDataScript)
-
-  // Get selected categories
-  document.querySelectorAll('input:checked').forEach(function (checkbox) {
-      selectedFilters.push(checkbox.value);
+  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.replace("Tier ",""));
+  });
+  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);
+  });
+
+  addFitlerButtonGroup(selectedFiltersObject)
+
+  projectSections.forEach((section) => {
+    const projectCards = section.querySelectorAll(".project-card");
+    
+    projectCards.forEach((card) => {
+      checkFilterCriteria(card, selectedFiltersObject)
+    })
+  })
+
+  updateHeadingVisibility()
+}
 
-  console.log(selectedFilters)
-  
+// Function to add filters buttons
+function addFitlerButtonGroup(selectedFiltersObject) {
   // Get filter tags div from DOM
   const selectedFiltersContainer = document.getElementById('filter-tags');
   selectedFiltersContainer.innerHTML = '';
@@ -37,11 +59,55 @@ function updateFilters() {
   filtersButtonGroup.className = "usa-button-group";
   selectedFiltersContainer.appendChild(filtersButtonGroup);
 
-  selectedFilters.forEach(filter => {
-    const filterButton = document.createElement('button');
-    filterButton.className = 'usa-button margin-bottom-1';
-    filterButton.textContent = filter;
-    filtersButtonGroup.appendChild(filterButton);
+  for (const filterCategory in selectedFiltersObject) {
+    const filtersArray = selectedFiltersObject[filterCategory]
+    
+    filtersArray.forEach(filter => {
+      const filterButton = document.createElement('button');
+      filterButton.className = 'usa-button margin-bottom-1';
+      filterButton.textContent = filter;
+      filtersButtonGroup.appendChild(filterButton);
+    })
+  }
+}
+
+// Function to update heading visibility
+function updateHeadingVisibility() {
+  projectSections.forEach(section => {
+    let hasVisibleCard = false
+    // Select the report heading within the current section
+    let reportHeading = section.querySelector('.report_heading');
+    
+    // Select all project cards within the current section
+    let projectCards = section.querySelectorAll('.project-card');
+    
+    // Flag visible card if any card is not hidden
+    projectCards.forEach((card) => {
+      if (!card.hidden) {
+        hasVisibleCard = true;
+      }
+    })
+    
+  // Hide heading if all cards under section are hidden
+  reportHeading.hidden = !hasVisibleCard;
+  });
+}
+
+// Function to return whether all filter criteria were met
+function checkFilterCriteria(card, selectedFiltersObject) {
+  const cardName = card.querySelector(".text-no-underline").textContent
+
+  parsedProjectsData.forEach(project => {
+    if (cardName === project.name) {
+      // Flags per category to denote if no filters are chosen or if project includes a selected filter
+      let matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(project.owner);
+      let matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(project.maturity_model_tier);
+      let matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(project.project_fisma_level);
+      let matchesProjectType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(project.project_type)
+      
+      // Hide card if project does not match all filter categories
+      card.hidden = !(matchesOrganization && matchesMaturityModelTier && matchesFismaLevel && matchesProjectType);
+    }
   });
 }
 
@@ -68,4 +134,4 @@ filterBox.addEventListener("input", () => {
     const reportHeadings = section.querySelector(".report_heading")
     reportHeadings.hidden = !queryMatchCheck
   })
-})
+})
\ No newline at end of file

From a8a11bb8038a24a0746149f1387efc2cd7a91f83 Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Mon, 5 Aug 2024 11:30:47 -0700
Subject: [PATCH 06/12] add filter button click functionality

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/site/projects.liquid | 10 +++++-----
 app/src/js/projects.js   | 25 ++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 879a4056b5..74a18b2d6c 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -120,8 +120,8 @@ layout: base
         </div>
         <div class="sort-dropdown">
           <form class="usa-form">
-            <label class="usa-label" for="sortSelection">Sort by</label>
-            <select class="usa-select border-base-light" id="sortSelection" name="sortSelection">
+            <label class="usa-label" for="sort-selection">Sort by</label>
+            <select class="usa-select border-base-light" id="sort-selection" name="sort-selection">
               <option value="organization">Organization</option>
               <option value="project-name">Project Name</option>
               <option value="fisma-level">FISMA Compliance Level</option>
@@ -132,9 +132,9 @@ layout: base
             </select>
           </form>
 
-          <form class="usa-form hidden">
-            <label class="usa-label" for="sortSelection">Sort Direction</label>
-            <select class="usa-select border-base-light" id="sortSelection" name="sortSelection">
+          <form class="usa-form" id="sort-direction-form">
+            <label class="usa-label" for="sort-direction">Sort Direction</label>
+            <select class="usa-select border-base-light" id="sort-direction" name="sort-direction">
               <option value="ascending">Ascending</option>
               <option value="descending">Descending</option>
             </select>
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 4fa0154c82..277f6c87b7 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -8,9 +8,24 @@ const parsedProjectsData = JSON.parse(projectsData)
 checkboxes.forEach(function (checkbox) {
   checkbox.addEventListener('change', function () {
     updateFilters();
+    clearFilterSelection(checkbox);
   });
 });
 
+// Clears the selected filter when the corresponding button is clicked
+function clearFilterSelection(checkbox) {
+  const buttonGroup = document.querySelectorAll('#filter-tags .usa-button');
+
+  buttonGroup.forEach(button => {
+    // button.addEventListener('click', myFunction)
+    button.addEventListener("click", function() {
+      button.remove();
+      checkbox.checked = false;
+      updateFilters();
+    });
+  })
+}
+
 // Function to update filters
 function updateFilters() {
 
@@ -41,11 +56,11 @@ function updateFilters() {
     const projectCards = section.querySelectorAll(".project-card");
     
     projectCards.forEach((card) => {
-      checkFilterCriteria(card, selectedFiltersObject)
+      checkFilterCriteria(card, selectedFiltersObject);
     })
   })
 
-  updateHeadingVisibility()
+  updateHeadingVisibility();
 }
 
 // Function to add filters buttons
@@ -60,7 +75,7 @@ function addFitlerButtonGroup(selectedFiltersObject) {
   selectedFiltersContainer.appendChild(filtersButtonGroup);
 
   for (const filterCategory in selectedFiltersObject) {
-    const filtersArray = selectedFiltersObject[filterCategory]
+    const filtersArray = selectedFiltersObject[filterCategory];
     
     filtersArray.forEach(filter => {
       const filterButton = document.createElement('button');
@@ -74,7 +89,7 @@ function addFitlerButtonGroup(selectedFiltersObject) {
 // Function to update heading visibility
 function updateHeadingVisibility() {
   projectSections.forEach(section => {
-    let hasVisibleCard = false
+    let hasVisibleCard = false;
     // Select the report heading within the current section
     let reportHeading = section.querySelector('.report_heading');
     
@@ -95,7 +110,7 @@ function updateHeadingVisibility() {
 
 // Function to return whether all filter criteria were met
 function checkFilterCriteria(card, selectedFiltersObject) {
-  const cardName = card.querySelector(".text-no-underline").textContent
+  const cardName = card.querySelector(".text-no-underline").textContent;
 
   parsedProjectsData.forEach(project => {
     if (cardName === project.name) {

From 5a475b85f1bbf3bd33ee0c7446f77559df480c82 Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Mon, 5 Aug 2024 13:13:15 -0700
Subject: [PATCH 07/12] fix filtering button bug

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/src/js/projects.js | 44 ++++++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 277f6c87b7..45fa4d9475 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -8,24 +8,9 @@ const parsedProjectsData = JSON.parse(projectsData)
 checkboxes.forEach(function (checkbox) {
   checkbox.addEventListener('change', function () {
     updateFilters();
-    clearFilterSelection(checkbox);
   });
 });
 
-// Clears the selected filter when the corresponding button is clicked
-function clearFilterSelection(checkbox) {
-  const buttonGroup = document.querySelectorAll('#filter-tags .usa-button');
-
-  buttonGroup.forEach(button => {
-    // button.addEventListener('click', myFunction)
-    button.addEventListener("click", function() {
-      button.remove();
-      checkbox.checked = false;
-      updateFilters();
-    });
-  })
-}
-
 // Function to update filters
 function updateFilters() {
 
@@ -41,7 +26,7 @@ function updateFilters() {
     selectedFiltersObject.organization.push(checkbox.value);
   });
   document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => {
-    selectedFiltersObject.maturityModelTier.push(checkbox.value.replace("Tier ",""));
+    selectedFiltersObject.maturityModelTier.push(checkbox.value);
   });
   document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => {
     selectedFiltersObject.fismaLevel.push(checkbox.value);
@@ -50,7 +35,7 @@ function updateFilters() {
     selectedFiltersObject.projectType.push(checkbox.value);
   });
 
-  addFitlerButtonGroup(selectedFiltersObject)
+  addFilterButtonGroup(selectedFiltersObject)
 
   projectSections.forEach((section) => {
     const projectCards = section.querySelectorAll(".project-card");
@@ -64,7 +49,7 @@ function updateFilters() {
 }
 
 // Function to add filters buttons
-function addFitlerButtonGroup(selectedFiltersObject) {
+function addFilterButtonGroup(selectedFiltersObject) {
   // Get filter tags div from DOM
   const selectedFiltersContainer = document.getElementById('filter-tags');
   selectedFiltersContainer.innerHTML = '';
@@ -84,6 +69,26 @@ function addFitlerButtonGroup(selectedFiltersObject) {
       filtersButtonGroup.appendChild(filterButton);
     })
   }
+
+  clearFilterSelection()
+}
+
+// Clears the selected filter when the corresponding button is clicked
+function clearFilterSelection() {
+  const buttonGroup = document.querySelectorAll('#filter-tags .usa-button');
+  buttonGroup.forEach(button => {
+    button.addEventListener('click', function() {
+      const checkboxes = document.querySelectorAll("input:checked")
+
+      checkboxes.forEach(checkbox => {
+        if (button.textContent == checkbox.value) {
+          button.remove();
+          checkbox.checked = false;
+          updateFilters();
+        }
+      })
+    })
+  })
 }
 
 // Function to update heading visibility
@@ -116,7 +121,8 @@ function checkFilterCriteria(card, selectedFiltersObject) {
     if (cardName === project.name) {
       // Flags per category to denote if no filters are chosen or if project includes a selected filter
       let matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(project.owner);
-      let matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(project.maturity_model_tier);
+      const projectMaturityModelTier = "Tier " + project.maturity_model_tier;
+      let matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier);
       let matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(project.project_fisma_level);
       let matchesProjectType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(project.project_type)
       

From 1599a9fb079d64c3a331cd836d6318ef2b7df477 Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Tue, 6 Aug 2024 14:52:00 -0700
Subject: [PATCH 08/12] refactor filtering functionality and responsive design

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/src/css/style.css  | 16 +++++++++
 app/src/js/projects.js | 78 +++++++++++++++++++++++-------------------
 2 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/app/src/css/style.css b/app/src/css/style.css
index 01b23131f6..3804896ea0 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -126,6 +126,7 @@
   box-sizing: border-box;
   text-align: right;
   gap: 0.5rem;
+  margin-bottom: 1rem;
 
 }
 
@@ -133,4 +134,19 @@
   .dashboard-container {
     flex-direction: column;
   }
+}
+
+@media screen and (max-width: 720px) {
+  .search-and-sort {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .search-container {
+    margin-bottom: 0;
+  }
+
+  .sort-dropdown {
+    text-align: left;
+  }
 }
\ No newline at end of file
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 45fa4d9475..37a06ea5e8 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -3,13 +3,12 @@ const projectSections = document.querySelectorAll(".project_section");
 const checkboxes = document.querySelectorAll('input[type="checkbox"]');
 const projectsData = document.getElementById('metrics').textContent;
 const parsedProjectsData = JSON.parse(projectsData)
+const filtersContainer = document.querySelector('.filters-container')
 
-// Add event listener to each checkbox
-checkboxes.forEach(function (checkbox) {
-  checkbox.addEventListener('change', function () {
-    updateFilters();
-  });
-});
+addGlobalEventListener('change', '.usa-checkbox__input', e => {
+  // Can use this e.target.name to update selected filters object
+  updateFilters();
+}, filtersContainer)
 
 // Function to update filters
 function updateFilters() {
@@ -63,6 +62,7 @@ function addFilterButtonGroup(selectedFiltersObject) {
     const filtersArray = selectedFiltersObject[filterCategory];
     
     filtersArray.forEach(filter => {
+      // TODO: add remove.svg to button
       const filterButton = document.createElement('button');
       filterButton.className = 'usa-button margin-bottom-1';
       filterButton.textContent = filter;
@@ -70,25 +70,33 @@ function addFilterButtonGroup(selectedFiltersObject) {
     })
   }
 
-  clearFilterSelection()
-}
+  addGlobalEventListener("click", "#filter-tags .usa-button", e => {
+    const buttonName = e.target.textContent;
+    const selectedCheckboxes = document.querySelectorAll("input:checked");
 
-// Clears the selected filter when the corresponding button is clicked
-function clearFilterSelection() {
-  const buttonGroup = document.querySelectorAll('#filter-tags .usa-button');
-  buttonGroup.forEach(button => {
-    button.addEventListener('click', function() {
-      const checkboxes = document.querySelectorAll("input:checked")
-
-      checkboxes.forEach(checkbox => {
-        if (button.textContent == checkbox.value) {
-          button.remove();
-          checkbox.checked = false;
-          updateFilters();
-        }
-      })
+    selectedCheckboxes.forEach(checkbox => {
+      if (buttonName == checkbox.value) {
+        e.target.remove();
+        checkbox.checked = false;
+        updateFilters();
+      }
     })
-  })
+    
+  }, filtersButtonGroup);
+}
+
+// Function for adding a dynamic global event listener
+// Parameters:
+// - type: The type of event to listen for (e.g., 'click', 'mouseover')
+// - selector: The CSS selector to match the target elements (e.g., '.class-name')
+// - callback: The callback function to execute when the event is triggered on a matching element
+// - parent: The element to attach the event listener to; defaults to 'document' for global listening
+function addGlobalEventListener(type, selector, callback, parent = document) {
+  parent.addEventListener(type, e => {
+    if (e.target.matches(selector)) {
+      callback(e);
+    }
+  });
 }
 
 // Function to update heading visibility
@@ -116,20 +124,18 @@ function updateHeadingVisibility() {
 // Function to return whether all filter criteria were met
 function checkFilterCriteria(card, selectedFiltersObject) {
   const cardName = card.querySelector(".text-no-underline").textContent;
+  // return array.filter((item) => item["owner"] === value)
+  const currentProject = parsedProjectsData.find((project) => project["name"] === cardName)
+  
+  const matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(currentProject.owner);
+  const projectMaturityModelTier = "Tier " + currentProject.maturity_model_tier;
+  const matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier);
+  const matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(currentProject.project_fisma_level);
+  const matchesProjectType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(currentProject.project_type);
+  
+  // Hide card if project does not match all filter categories
+  card.hidden = !(matchesOrganization && matchesMaturityModelTier && matchesFismaLevel && matchesProjectType);
 
-  parsedProjectsData.forEach(project => {
-    if (cardName === project.name) {
-      // Flags per category to denote if no filters are chosen or if project includes a selected filter
-      let matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(project.owner);
-      const projectMaturityModelTier = "Tier " + project.maturity_model_tier;
-      let matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier);
-      let matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(project.project_fisma_level);
-      let matchesProjectType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(project.project_type)
-      
-      // Hide card if project does not match all filter categories
-      card.hidden = !(matchesOrganization && matchesMaturityModelTier && matchesFismaLevel && matchesProjectType);
-    }
-  });
 }
 
 filterBox.addEventListener("input", () => {

From 66a2b8fcb4ee9df33ab514f4d51f008cc8605a66 Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Fri, 9 Aug 2024 11:19:58 -0700
Subject: [PATCH 09/12] render project cards in js

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/site/projects.liquid |  41 +++--------
 app/src/js/projects.js   | 155 +++++++++++++++++++++++++++++++++++++--
 app/src/js/templates.js  |  67 +++++++++++++++++
 3 files changed, 227 insertions(+), 36 deletions(-)
 create mode 100644 app/src/js/templates.js

diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 74a18b2d6c..0349778b84 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -5,7 +5,9 @@ layout: base
 <span style="display:none;" id="metrics">
   {{projects | json }}
 </span>
-
+<span style="display:none;" id="org-data">
+  {{organizations | json }}
+</span>
 <div class="grid-container ">
   <p>
     The Centers for Medicare and Medicaid Services develops and supports many open-source projects found in our various
@@ -119,15 +121,15 @@ layout: base
           </div>
         </div>
         <div class="sort-dropdown">
-          <form class="usa-form">
+          <form class="usa-form" id="sort-selection-form">
             <label class="usa-label" for="sort-selection">Sort by</label>
             <select class="usa-select border-base-light" id="sort-selection" name="sort-selection">
-              <option value="organization">Organization</option>
-              <option value="project-name">Project Name</option>
-              <option value="fisma-level">FISMA Compliance Level</option>
-              <option value="project-type">Project Type</option>
+              <option value="owner">Organization</option>
+              <option value="name">Project Name</option>
+              <option value="project_fisma_level">FISMA Compliance Level</option>
+              <option value="project_type">Project Type</option>
               <option value="stars">Stars</option>
-              <option value="tier">Maturity Model Tier</option>
+              <option value="maturity_model_tier">Maturity Model Tier</option>
               <option value="forks">Forks</option>
             </select>
           </form>
@@ -143,29 +145,6 @@ layout: base
       </div>
 
       <div class="padding-left-05" id="filter-tags"></div>
-
-      {% for org in organizations %}
-        <div class="project_section">
-          <div class="report_heading">
-            <h2>
-              {{ org.name }}
-              <img
-                src="{{org.avatar_url}}"
-                alt="Organization Avatar"
-                width="20"
-              >
-            </h2>
-          </div>
-
-          <ul class="usa-card-group flex-align-stretch">
-            {% assign orgProjects = projects | findProjectsInOrg: org.name %}
-
-            {% for repo in orgProjects %}
-              {% render 'project-card', repo: repo, base_url: site.baseurl %}
-            {% endfor %}
-          </ul>
-        </div>
-      {% endfor %}
-
+      <div id="content-container"></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 37a06ea5e8..ff994e4024 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -1,10 +1,144 @@
+import { reportHeadingTemplate, projectCardTemplate } from "./templates";
 const filterBox = document.getElementById("filter-input");
-const projectSections = document.querySelectorAll(".project_section");
-const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+let projectSections = document.querySelectorAll(".project_section");
 const projectsData = document.getElementById('metrics').textContent;
-const parsedProjectsData = JSON.parse(projectsData)
-const filtersContainer = document.querySelector('.filters-container')
+const orgsData = document.getElementById('org-data').textContent;
+const parsedOrgsData = JSON.parse(orgsData);
+const parsedProjectsData = JSON.parse(projectsData);
+const filtersContainer = document.querySelector('.filters-container');
+const templateDiv = document.getElementById('content-container');
 
+
+
+//SORT
+const sortDirection = document.getElementById('sort-direction')
+const sortSelection = document.getElementById('sort-selection')
+// let sortedByOrg = sortSelection.value == "organization" ? true : false;
+// console.log(sortDirection)
+// console.log(sortSelection.value)
+// console.log(sortedByOrg)
+// document.getElementById("sort-direction-form").hidden = true;
+
+// sortSelection.addEventListener('change', function() {
+//  sortedByOrg = sortSelection.value == "organization" ? true : false;
+// //  console.log('ete')
+// //  console.log(sortedByOrg)
+// //  console.log(sortSelection.value)
+//  document.getElementById("sort-direction-form").hidden = false;
+//  parsedProjectsData.sort((a, b) => a.value - b.value);
+// })
+
+document.addEventListener("DOMContentLoaded", () => {
+  projectSections = document.querySelectorAll(".project_section");
+});
+
+// console.log("before projects: ", projects)
+// sortSelection.addEventListener('change', e => {
+//   const selection = sortSelection.value;
+//   console.log(sortSelection.value)
+
+//   for (org in projects) {
+//     // const repoData = projects[org][repoIndex]
+//     if (selection === "maturity_model_tier")
+//       sortByTier(projects[org])
+//   }
+// })
+// console.log("after projects: ", projects)
+
+function sortByTier(data) {
+  data.sort((a, b) => {
+    const tierA = a.maturity_model_tier ? Number(a.maturity_model_tier) : Infinity;
+    const tierB = b.maturity_model_tier ? Number(b.maturity_model_tier) : Infinity;
+    return tierA - tierB;
+  });
+  // data.sort((a, b) => Number(a.maturity_model_tier) - Number(b.maturity_model_tier));
+}
+
+const orgCheckboxes = document.getElementById('organization-content').querySelectorAll('.usa-checkbox')
+const organizations = [...orgCheckboxes].map(checkbox => checkbox.textContent.trim());
+
+// SORT END
+
+// eleventyConfig.addFilter("findProjectsInOrg", function (array, value) {
+//   return array.filter((item) => item["owner"] === value)
+// })
+
+let projects = {};
+
+organizations.forEach(org => {
+  projects[org] = getProjectsInOrg(parsedProjectsData, org);
+})
+
+function findObject(array, value) {
+  return array.find((item) => item["name"] === value)
+}
+
+function getProjectsInOrg(array, value) {
+  return array.filter((item) => item["owner"] === value)
+}
+
+sortSelection.addEventListener('change', e => {
+  const selection = sortSelection.value;
+
+  for (const org in projects) {
+    // const repoData = projects[org][repoIndex]
+    if (selection === "maturity_model_tier")
+      sortByTier(projects[org])
+      createProjectCards()
+  }
+})
+
+function createProjectCards() {
+  templateDiv.innerHTML = ''
+  for (const org in projects) {
+    const orgProject = findObject(parsedOrgsData, org);
+    const heading = reportHeadingTemplate(orgProject);
+    const projectSectionsTemplate = document.createElement('div');
+    projectSectionsTemplate.className = 'project_section'
+    templateDiv.append(projectSectionsTemplate)
+  
+    const reportHeading = document.createElement('div');
+    reportHeading.className = "report_heading"
+    reportHeading.innerHTML = heading;
+    projectSectionsTemplate.appendChild(reportHeading)
+  
+    const projectCards = document.createElement('ul');
+    projectCards.className = "usa-card-group flex-align-stretch"
+  
+    projectSectionsTemplate.appendChild(projectCards)
+  
+  
+    for (const repoIndex in projects[org]) {
+      const repoData = projects[org][repoIndex]
+      const projectCard = document.createElement('li');
+      projectCard.className = 'usa-card project-card tablet:grid-col-12'
+      projectCard.id = repoData.name
+      projectCard.setAttribute('org-name', repoData.owner)
+      projectCard.innerHTML = projectCardTemplate(repoData)
+      // const selectedFiltersObject = updateFilters()
+      // if (!passesFilterCriteria(repoData, selectedFiltersObject)) {
+      //   projectCard.hidden = true
+      // }
+      projectCards.appendChild(projectCard);
+    }
+  }
+  updateFilters()
+  // updateHeadingVisibility();
+}
+
+createProjectCards()
+
+// Keep filters after navigating back
+window.addEventListener('pageshow', (event) => {
+  updateFilters();
+
+  if (event.persisted) {
+    // The page was loaded from the bfcache (back-forward cache)
+    updateFilters();
+  }
+});
+
+// Checks for Checkbox event and updates filters
 addGlobalEventListener('change', '.usa-checkbox__input', e => {
   // Can use this e.target.name to update selected filters object
   updateFilters();
@@ -45,6 +179,8 @@ function updateFilters() {
   })
 
   updateHeadingVisibility();
+
+  // return selectedFiltersObject
 }
 
 // Function to add filters buttons
@@ -124,7 +260,6 @@ function updateHeadingVisibility() {
 // Function to return whether all filter criteria were met
 function checkFilterCriteria(card, selectedFiltersObject) {
   const cardName = card.querySelector(".text-no-underline").textContent;
-  // return array.filter((item) => item["owner"] === value)
   const currentProject = parsedProjectsData.find((project) => project["name"] === cardName)
   
   const matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(currentProject.owner);
@@ -138,6 +273,16 @@ function checkFilterCriteria(card, selectedFiltersObject) {
 
 }
 
+// function passesFilterCriteria(data, selectedFiltersObject) {
+//   const matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(data.owner);
+//   const projectMaturityModelTier = "Tier " + data.maturity_model_tier;
+//   const matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier);
+//   const matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(data.project_fisma_level);
+//   const matchesProjectType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(data.project_type);
+
+//   return (matchesOrganization && matchesMaturityModelTier && matchesFismaLevel && matchesProjectType);
+// }
+
 filterBox.addEventListener("input", () => {
   const query = filterBox.value.toLowerCase()
 
diff --git a/app/src/js/templates.js b/app/src/js/templates.js
new file mode 100644
index 0000000000..1eebc05ef2
--- /dev/null
+++ b/app/src/js/templates.js
@@ -0,0 +1,67 @@
+export const reportHeadingTemplate = function(data) {       
+    return `
+          <h2>
+            ${ data.name }
+            <img
+              src="${data.avatar_url}"
+              alt="Organization Avatar"
+              width="20"
+            >
+          </h2>
+    `
+}
+
+export function projectCardTemplate(data) {
+    const baseUrl =  window.location.hostname === "https://dsacms.github.io" ? '/metrics' : ""
+    const description = data.description !== null ? data.description : ""
+    return `
+        <div class="usa-card__container">
+            <div class="usa-card__header">
+            <h2 class="usa-card__heading">
+                <a href="${ baseUrl }/${ data.owner }/${ data.name }/" class="text-no-underline">${ data.name }</a>
+            </h2>
+            </div>
+            <div class="usa-card__body">
+            <div>${ description }</div>
+            </div>
+            <div class="usa-card__footer">
+            <span class="star-count" style="margin-right: 15px;">
+                <svg class="usa-icon" aria-labelledby="star-count-${data.name}-title" role="img">
+                title id="github-${data.name}-title"> Star Count</title>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+                </svg>
+
+                <span> ${ data.stargazers_count } </span>
+            </span>
+            <span class="fork-count" style="margin-right: 15px;">
+                <svg class="usa-icon" aria-labelledby="fork-count-${data.name}-title" role="img">
+                <title id="github-${data.name}-title"> Fork Count</title>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-fork"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg>
+                </svg>
+                <span> ${ data.forks_count } </span>
+            </span>
+            <span class="issue-count" style="margin-right: 15px;">
+                <svg class="usa-icon" aria-labelledby="issue-count-${ data.name }-title" role="img">
+                <title id="github-{{data.name}}-title"> Issue Count</title>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>
+                </svg>
+                <span> ${ data.issues_count } </span>
+            </span>
+            <span class="pull-request-count" style="margin-right: 15px;">
+                <svg class="usa-icon" aria-labelledby="pull-request-count-${data.name}-title" role="img">
+                <title id="github-${data.name}-title"> Pull Request Count</title>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-pull-request"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><line x1="6" x2="6" y1="9" y2="21"/></svg>
+                </svg>
+                <span> ${ data.pull_requests_count } </span>
+            </span>
+            <span class="watchers-count">
+                <svg class="usa-icon" aria-labelledby="watchers-count-${data.name}-title" role="img">
+                <title id="github-${data.name}-title"> Watchers Count</title>
+                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>                </svg>
+                <span> ${ data.watchers_count } </span>
+            </span>
+            </div>
+        </div>
+    `;
+  }
+  
\ No newline at end of file

From 5531fd05a468a09cc3e13270c7f9c6739e326afd Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Fri, 9 Aug 2024 17:41:20 -0700
Subject: [PATCH 10/12] implement project card sorting

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/site/_layouts/repo-report.liquid |   3 +-
 app/site/projects.liquid             |   5 +-
 app/src/js/projects.js               | 135 +++++++++++++--------------
 3 files changed, 69 insertions(+), 74 deletions(-)

diff --git a/app/site/_layouts/repo-report.liquid b/app/site/_layouts/repo-report.liquid
index 68c1289f33..dd3b4c6e2b 100644
--- a/app/site/_layouts/repo-report.liquid
+++ b/app/site/_layouts/repo-report.liquid
@@ -43,11 +43,12 @@ layout: base
       {% endif %}
       {% if project.project_fisma_level %}
         {% assign fismaLevel = project.project_fisma_level %}
-        {% assign fismaLevelIcon = "chevron.svg" %}
         {% if fismaLevel == "Moderate" %}
             {% assign fismaLevelIcon = "chevron-two.svg" %}
         {% else if fismaLevel == "High" %}
             {% assign fismaLevelIcon = "chevron-three.svg" %}
+        {% else %}
+            {% assign fismaLevelIcon = "chevron.svg" %}
         {% endif %}
         <span 
           class="usa-tag usa-tag--big main-tag icon-tag">{{ project.project_fisma_level }} 
diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 0349778b84..986a606dfc 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -124,13 +124,12 @@ layout: base
           <form class="usa-form" id="sort-selection-form">
             <label class="usa-label" for="sort-selection">Sort by</label>
             <select class="usa-select border-base-light" id="sort-selection" name="sort-selection">
-              <option value="owner">Organization</option>
               <option value="name">Project Name</option>
               <option value="project_fisma_level">FISMA Compliance Level</option>
               <option value="project_type">Project Type</option>
-              <option value="stars">Stars</option>
+              <option value="stargazers_count">Stars</option>
               <option value="maturity_model_tier">Maturity Model Tier</option>
-              <option value="forks">Forks</option>
+              <option value="forks_count">Forks</option>
             </select>
           </form>
 
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index ff994e4024..a43a3879ec 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -1,73 +1,64 @@
 import { reportHeadingTemplate, projectCardTemplate } from "./templates";
 const filterBox = document.getElementById("filter-input");
-let projectSections = document.querySelectorAll(".project_section");
+var projectSections = document.querySelectorAll(".project_section");
 const projectsData = document.getElementById('metrics').textContent;
 const orgsData = document.getElementById('org-data').textContent;
 const parsedOrgsData = JSON.parse(orgsData);
 const parsedProjectsData = JSON.parse(projectsData);
 const filtersContainer = document.querySelector('.filters-container');
 const templateDiv = document.getElementById('content-container');
-
-
-
-//SORT
+var projects = setProjectsData(parsedProjectsData)
 const sortDirection = document.getElementById('sort-direction')
 const sortSelection = document.getElementById('sort-selection')
-// let sortedByOrg = sortSelection.value == "organization" ? true : false;
-// console.log(sortDirection)
-// console.log(sortSelection.value)
-// console.log(sortedByOrg)
-// document.getElementById("sort-direction-form").hidden = true;
-
-// sortSelection.addEventListener('change', function() {
-//  sortedByOrg = sortSelection.value == "organization" ? true : false;
-// //  console.log('ete')
-// //  console.log(sortedByOrg)
-// //  console.log(sortSelection.value)
-//  document.getElementById("sort-direction-form").hidden = false;
-//  parsedProjectsData.sort((a, b) => a.value - b.value);
-// })
-
-document.addEventListener("DOMContentLoaded", () => {
-  projectSections = document.querySelectorAll(".project_section");
-});
+var isSorted = false;
 
-// console.log("before projects: ", projects)
-// sortSelection.addEventListener('change', e => {
-//   const selection = sortSelection.value;
-//   console.log(sortSelection.value)
 
-//   for (org in projects) {
-//     // const repoData = projects[org][repoIndex]
-//     if (selection === "maturity_model_tier")
-//       sortByTier(projects[org])
-//   }
-// })
-// console.log("after projects: ", projects)
+document.getElementById("sort-direction-form").hidden = !isSorted;
 
-function sortByTier(data) {
+function sortByNumberAttribute(data, attribute) {
+  // console.log(data)
+  // console.log(attribute)
   data.sort((a, b) => {
-    const tierA = a.maturity_model_tier ? Number(a.maturity_model_tier) : Infinity;
-    const tierB = b.maturity_model_tier ? Number(b.maturity_model_tier) : Infinity;
+    // console.log(a[attribute])
+    // console.log(b[attribute])
+    const tierA = a[attribute] !== undefined ? Number(a[attribute]) : Infinity;
+    const tierB = b[attribute] !== undefined ? Number(b[attribute]) : Infinity;
     return tierA - tierB;
   });
   // data.sort((a, b) => Number(a.maturity_model_tier) - Number(b.maturity_model_tier));
 }
 
-const orgCheckboxes = document.getElementById('organization-content').querySelectorAll('.usa-checkbox')
-const organizations = [...orgCheckboxes].map(checkbox => checkbox.textContent.trim());
-
-// SORT END
+function sortByStringAttribute(data, attribute) {
+  data.sort((a, b) => {
+    const hasAttributeA = typeof a[attribute] === 'string';
+    const hasAttributeB = typeof b[attribute] === 'string';
+  
+    // If both objects have the attribute, sort by name
+    if (hasAttributeA && hasAttributeB) {
+      return a[attribute].localeCompare(b[attribute]);
+    }
+  
+    // If only one object has the attribute, it should come first
+    if (hasAttributeA) return -1;
+    if (hasAttributeB) return 1;
+  
+    // If neither object has the attribute, sort by name
+    return a.name.localeCompare(b.name);
+  });
+}
 
-// eleventyConfig.addFilter("findProjectsInOrg", function (array, value) {
-//   return array.filter((item) => item["owner"] === value)
-// })
 
-let projects = {};
 
-organizations.forEach(org => {
-  projects[org] = getProjectsInOrg(parsedProjectsData, org);
-})
+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
+}
 
 function findObject(array, value) {
   return array.find((item) => item["name"] === value)
@@ -78,15 +69,31 @@ function getProjectsInOrg(array, value) {
 }
 
 sortSelection.addEventListener('change', e => {
+  sortCards();
+})
+
+function sortCards() {
   const selection = sortSelection.value;
 
   for (const org in projects) {
-    // const repoData = projects[org][repoIndex]
-    if (selection === "maturity_model_tier")
-      sortByTier(projects[org])
-      createProjectCards()
+    if (
+        selection === "maturity_model_tier" || 
+        selection === "stargazers_count" || 
+        selection === 'forks_count'
+      ) {
+      sortByNumberAttribute(projects[org], selection)
+    } 
+    else if (selection === 'name') {
+      projects[org].sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      });
+    }
+    else if (selection === 'project_type' || selection === "project_fisma_level") {
+      sortByStringAttribute(projects[org], selection)
+    }
+    createProjectCards()
   }
-})
+}
 
 function createProjectCards() {
   templateDiv.innerHTML = ''
@@ -115,15 +122,11 @@ function createProjectCards() {
       projectCard.id = repoData.name
       projectCard.setAttribute('org-name', repoData.owner)
       projectCard.innerHTML = projectCardTemplate(repoData)
-      // const selectedFiltersObject = updateFilters()
-      // if (!passesFilterCriteria(repoData, selectedFiltersObject)) {
-      //   projectCard.hidden = true
-      // }
       projectCards.appendChild(projectCard);
     }
   }
   updateFilters()
-  // updateHeadingVisibility();
+  updateHeadingVisibility();
 }
 
 createProjectCards()
@@ -131,10 +134,12 @@ createProjectCards()
 // Keep filters after navigating back
 window.addEventListener('pageshow', (event) => {
   updateFilters();
+  sortCards();
 
   if (event.persisted) {
     // The page was loaded from the bfcache (back-forward cache)
     updateFilters();
+    sortCards();
   }
 });
 
@@ -169,6 +174,7 @@ function updateFilters() {
   });
 
   addFilterButtonGroup(selectedFiltersObject)
+  const projectSections = document.querySelectorAll(".project_section");
 
   projectSections.forEach((section) => {
     const projectCards = section.querySelectorAll(".project-card");
@@ -179,8 +185,6 @@ function updateFilters() {
   })
 
   updateHeadingVisibility();
-
-  // return selectedFiltersObject
 }
 
 // Function to add filters buttons
@@ -237,6 +241,7 @@ function addGlobalEventListener(type, selector, callback, parent = document) {
 
 // Function to update heading visibility
 function updateHeadingVisibility() {
+  const projectSections = document.querySelectorAll(".project_section");
   projectSections.forEach(section => {
     let hasVisibleCard = false;
     // Select the report heading within the current section
@@ -273,16 +278,6 @@ function checkFilterCriteria(card, selectedFiltersObject) {
 
 }
 
-// function passesFilterCriteria(data, selectedFiltersObject) {
-//   const matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(data.owner);
-//   const projectMaturityModelTier = "Tier " + data.maturity_model_tier;
-//   const matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier);
-//   const matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(data.project_fisma_level);
-//   const matchesProjectType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(data.project_type);
-
-//   return (matchesOrganization && matchesMaturityModelTier && matchesFismaLevel && matchesProjectType);
-// }
-
 filterBox.addEventListener("input", () => {
   const query = filterBox.value.toLowerCase()
 

From e6937f6ba52fc0feeabf7a58f3b0ddf5d532d119 Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Fri, 9 Aug 2024 18:45:06 -0700
Subject: [PATCH 11/12] add complete sort functionality

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/src/js/projects.js | 94 +++++++++++++++++++++---------------------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index a43a3879ec..8ccf7a426e 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -10,45 +10,65 @@ const templateDiv = document.getElementById('content-container');
 var projects = setProjectsData(parsedProjectsData)
 const sortDirection = document.getElementById('sort-direction')
 const sortSelection = document.getElementById('sort-selection')
-var isSorted = false;
 
+// Hide sort direction when sort is not selected
+document.getElementById("sort-direction-form").hidden = true;
 
-document.getElementById("sort-direction-form").hidden = !isSorted;
+// Main Function to create project cards, filter buttons, and hide headings based on filters
+createProjectCards()
+
+sortSelection.addEventListener('change', e => {
+  sortCards();
+  // Unhide sort direction once sort by is selected
+  document.getElementById("sort-direction-form").hidden = false;
+})
 
-function sortByNumberAttribute(data, attribute) {
-  // console.log(data)
-  // console.log(attribute)
+sortDirection.addEventListener('change', e => {
+  const isDescending = sortDirection.value === 'descending' ? true : false  
+  sortCards(isDescending)
+})
+
+// Keep filters after navigating back
+window.addEventListener('pageshow', (event) => {
+  updateFilters();
+  sortCards();
+
+  if (event.persisted) {
+    // The page was loaded from the bfcache (back-forward cache)
+    updateFilters();
+    sortCards();
+  }
+});
+
+// Sorting cards function for numberic attributes
+function sortByNumberAttribute(data, attribute, isDescending) {
   data.sort((a, b) => {
-    // console.log(a[attribute])
-    // console.log(b[attribute])
-    const tierA = a[attribute] !== undefined ? Number(a[attribute]) : Infinity;
-    const tierB = b[attribute] !== undefined ? Number(b[attribute]) : Infinity;
-    return tierA - tierB;
+    const attributeA = a[attribute] !== undefined ? Number(a[attribute]) : Infinity;
+    const attributeB = b[attribute] !== undefined ? Number(b[attribute]) : Infinity;
+    return isDescending ? attributeB - attributeA : attributeA - attributeB;
   });
-  // data.sort((a, b) => Number(a.maturity_model_tier) - Number(b.maturity_model_tier));
 }
 
-function sortByStringAttribute(data, attribute) {
+// Sort cards function for string type attributes
+function sortByStringAttribute(data, attribute, isDescending) {
   data.sort((a, b) => {
     const hasAttributeA = typeof a[attribute] === 'string';
     const hasAttributeB = typeof b[attribute] === 'string';
   
     // If both objects have the attribute, sort by name
     if (hasAttributeA && hasAttributeB) {
-      return a[attribute].localeCompare(b[attribute]);
+      return isDescending ? b[attribute].localeCompare(a[attribute]) : a[attribute].localeCompare(b[attribute]);
     }
   
-    // If only one object has the attribute, it should come first
-    if (hasAttributeA) return -1;
-    if (hasAttributeB) return 1;
+  // If only one object has the attribute, determine order based on `isDescending`
+  if (hasAttributeA) return isDescending ? 1 : -1;
+  if (hasAttributeB) return isDescending ? -1 : 1;
   
     // If neither object has the attribute, sort by name
-    return a.name.localeCompare(b.name);
+    return isDescending ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name);
   });
 }
-
-
-
+// Function to map organizations with their projects
 function setProjectsData(parsedData) {
   let projects = {};
   const orgCheckboxes = document.getElementById('organization-content').querySelectorAll('.usa-checkbox')
@@ -68,11 +88,7 @@ function getProjectsInOrg(array, value) {
   return array.filter((item) => item["owner"] === value)
 }
 
-sortSelection.addEventListener('change', e => {
-  sortCards();
-})
-
-function sortCards() {
+function sortCards(descending=false) {
   const selection = sortSelection.value;
 
   for (const org in projects) {
@@ -81,15 +97,13 @@ function sortCards() {
         selection === "stargazers_count" || 
         selection === 'forks_count'
       ) {
-      sortByNumberAttribute(projects[org], selection)
+      sortByNumberAttribute(projects[org], selection, descending)
     } 
     else if (selection === 'name') {
-      projects[org].sort((a, b) => {
-        return a.name.localeCompare(b.name);
-      });
+      sortByStringAttribute(projects[org], selection, descending)
     }
     else if (selection === 'project_type' || selection === "project_fisma_level") {
-      sortByStringAttribute(projects[org], selection)
+      sortByStringAttribute(projects[org], selection, descending)
     }
     createProjectCards()
   }
@@ -99,14 +113,14 @@ function createProjectCards() {
   templateDiv.innerHTML = ''
   for (const org in projects) {
     const orgProject = findObject(parsedOrgsData, org);
-    const heading = reportHeadingTemplate(orgProject);
+    const orgHeading = reportHeadingTemplate(orgProject);
     const projectSectionsTemplate = document.createElement('div');
     projectSectionsTemplate.className = 'project_section'
     templateDiv.append(projectSectionsTemplate)
   
     const reportHeading = document.createElement('div');
     reportHeading.className = "report_heading"
-    reportHeading.innerHTML = heading;
+    reportHeading.innerHTML = orgHeading;
     projectSectionsTemplate.appendChild(reportHeading)
   
     const projectCards = document.createElement('ul');
@@ -129,20 +143,6 @@ function createProjectCards() {
   updateHeadingVisibility();
 }
 
-createProjectCards()
-
-// Keep filters after navigating back
-window.addEventListener('pageshow', (event) => {
-  updateFilters();
-  sortCards();
-
-  if (event.persisted) {
-    // The page was loaded from the bfcache (back-forward cache)
-    updateFilters();
-    sortCards();
-  }
-});
-
 // Checks for Checkbox event and updates filters
 addGlobalEventListener('change', '.usa-checkbox__input', e => {
   // Can use this e.target.name to update selected filters object
@@ -159,7 +159,6 @@ function updateFilters() {
     projectType: []
   }
 
-
   document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => {
     selectedFiltersObject.organization.push(checkbox.value);
   });
@@ -279,6 +278,7 @@ function checkFilterCriteria(card, selectedFiltersObject) {
 }
 
 filterBox.addEventListener("input", () => {
+  const projectSections = document.querySelectorAll(".project_section");
   const query = filterBox.value.toLowerCase()
 
   // Iterate through each section

From 8b423c70e889b36d50b1dde64589be4c936cbd30 Mon Sep 17 00:00:00 2001
From: Ricardo Zamora <rzgarcia27@gmail.com>
Date: Wed, 14 Aug 2024 12:51:16 -0700
Subject: [PATCH 12/12] add dompurify to remove vulernability

Signed-off-by: Ricardo Zamora <rzgarcia27@gmail.com>
---
 app/package-lock.json  | 11 +++++++
 app/package.json       |  1 +
 app/src/js/projects.js | 75 +++++++++++++++++++++++-------------------
 3 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index b5219a1d49..55062926be 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -13,6 +13,7 @@
         "@11ty/eleventy-img": "^3.1.1",
         "@grimlink/eleventy-plugin-lucide-icons": "^1.0.5",
         "@uswds/uswds": "^3.6.1",
+        "dompurify": "^3.1.6",
         "dotenv": "^16.3.1",
         "markdown-it": "^13.0.2",
         "markdown-it-link-attributes": "^4.0.1"
@@ -2635,6 +2636,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -9998,6 +10004,11 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+    },
     "domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
diff --git a/app/package.json b/app/package.json
index 993f71f004..f38b020d16 100644
--- a/app/package.json
+++ b/app/package.json
@@ -27,6 +27,7 @@
     "@11ty/eleventy-img": "^3.1.1",
     "@grimlink/eleventy-plugin-lucide-icons": "^1.0.5",
     "@uswds/uswds": "^3.6.1",
+    "dompurify": "^3.1.6",
     "dotenv": "^16.3.1",
     "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1"
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 8ccf7a426e..674f35c245 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -1,6 +1,6 @@
 import { reportHeadingTemplate, projectCardTemplate } from "./templates";
+import DOMPurify from 'dompurify';
 const filterBox = document.getElementById("filter-input");
-var projectSections = document.querySelectorAll(".project_section");
 const projectsData = document.getElementById('metrics').textContent;
 const orgsData = document.getElementById('org-data').textContent;
 const parsedOrgsData = JSON.parse(orgsData);
@@ -8,24 +8,27 @@ const parsedProjectsData = JSON.parse(projectsData);
 const filtersContainer = document.querySelector('.filters-container');
 const templateDiv = document.getElementById('content-container');
 var projects = setProjectsData(parsedProjectsData)
-const sortDirection = document.getElementById('sort-direction')
-const sortSelection = document.getElementById('sort-selection')
+const sortDirection = document.getElementById('sort-direction');
+const sortSelection = document.getElementById('sort-selection');
+
 
 // Hide sort direction when sort is not selected
 document.getElementById("sort-direction-form").hidden = true;
 
 // Main Function to create project cards, filter buttons, and hide headings based on filters
-createProjectCards()
+createProjectCards();
 
+// Listens for selection to sort by attribute
 sortSelection.addEventListener('change', e => {
   sortCards();
   // Unhide sort direction once sort by is selected
   document.getElementById("sort-direction-form").hidden = false;
 })
 
+// Listens for sort direction to sort descending/ascending
 sortDirection.addEventListener('change', e => {
-  const isDescending = sortDirection.value === 'descending' ? true : false  
-  sortCards(isDescending)
+  const isDescending = sortDirection.value === 'descending' ? true : false; 
+  sortCards(isDescending);
 })
 
 // Keep filters after navigating back
@@ -71,7 +74,7 @@ function sortByStringAttribute(data, attribute, isDescending) {
 // Function to map organizations with their projects
 function setProjectsData(parsedData) {
   let projects = {};
-  const orgCheckboxes = document.getElementById('organization-content').querySelectorAll('.usa-checkbox')
+  const orgCheckboxes = document.getElementById('organization-content').querySelectorAll('.usa-checkbox');
   const organizations = [...orgCheckboxes].map(checkbox => checkbox.textContent.trim());
   
   organizations.forEach(org => {
@@ -81,31 +84,36 @@ function setProjectsData(parsedData) {
 }
 
 function findObject(array, value) {
-  return array.find((item) => item["name"] === value)
+  return array.find((item) => item["name"] === value);
 }
 
 function getProjectsInOrg(array, value) {
-  return array.filter((item) => item["owner"] === value)
+  return array.filter((item) => item["owner"] === value);
 }
 
 function sortCards(descending=false) {
   const selection = sortSelection.value;
 
   for (const org in projects) {
-    if (
+    // Selected attribute of type number
+    if 
+      (
         selection === "maturity_model_tier" || 
         selection === "stargazers_count" || 
         selection === 'forks_count'
       ) {
-      sortByNumberAttribute(projects[org], selection, descending)
-    } 
-    else if (selection === 'name') {
-      sortByStringAttribute(projects[org], selection, descending)
-    }
-    else if (selection === 'project_type' || selection === "project_fisma_level") {
-      sortByStringAttribute(projects[org], selection, descending)
-    }
-    createProjectCards()
+        sortByNumberAttribute(projects[org], selection, descending);
+      } 
+    // Selected attribute of type string
+    else if
+      (
+        selection === 'name' || 
+        selection === 'project_type' || 
+        selection === "project_fisma_level"
+      ) {
+        sortByStringAttribute(projects[org], selection, descending);
+      }
+    createProjectCards();
   }
 }
 
@@ -115,31 +123,32 @@ function createProjectCards() {
     const orgProject = findObject(parsedOrgsData, org);
     const orgHeading = reportHeadingTemplate(orgProject);
     const projectSectionsTemplate = document.createElement('div');
-    projectSectionsTemplate.className = 'project_section'
-    templateDiv.append(projectSectionsTemplate)
+    projectSectionsTemplate.className = 'project_section';
+    templateDiv.append(projectSectionsTemplate);
   
+    // Add report heading for each org
     const reportHeading = document.createElement('div');
-    reportHeading.className = "report_heading"
-    reportHeading.innerHTML = orgHeading;
-    projectSectionsTemplate.appendChild(reportHeading)
+    reportHeading.className = "report_heading";
+    reportHeading.innerHTML = DOMPurify.sanitize(orgHeading);
+    projectSectionsTemplate.appendChild(reportHeading);
   
     const projectCards = document.createElement('ul');
-    projectCards.className = "usa-card-group flex-align-stretch"
-  
-    projectSectionsTemplate.appendChild(projectCards)
+    projectCards.className = "usa-card-group flex-align-stretch";
   
+    projectSectionsTemplate.appendChild(projectCards);
   
+    // Create all project cards for each org
     for (const repoIndex in projects[org]) {
-      const repoData = projects[org][repoIndex]
+      const repoData = projects[org][repoIndex];
       const projectCard = document.createElement('li');
-      projectCard.className = 'usa-card project-card tablet:grid-col-12'
-      projectCard.id = repoData.name
-      projectCard.setAttribute('org-name', repoData.owner)
-      projectCard.innerHTML = projectCardTemplate(repoData)
+      projectCard.className = 'usa-card project-card tablet:grid-col-12';
+      projectCard.id = repoData.name;
+      projectCard.setAttribute('org-name', repoData.owner);
+      projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData));
       projectCards.appendChild(projectCard);
     }
   }
-  updateFilters()
+  updateFilters();
   updateHeadingVisibility();
 }