Refactor no results message component 4903 (#5298)

* leadership info change * profile picture add * noResultsFilter works * noresultsfilter works * noresultsfilter works * current project function add * rename no result filter * fix format with current-guides * revert back current-projects * fix format on toolkit.html * current-guides add no results message element * fix format * fix capitalization * checking other branch * search function added back * change comment for function
hackforla · Sep 26, 2023 · 8b028ca · 8b028ca
1 parent e2c3169
commit 8b028ca
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 60 deletions.
diff --git a/_includes/current-guides.html b/_includes/current-guides.html
@@ -86,9 +86,11 @@ <h3><a href="{{item.resource-url}}" target="_blank">{{ item.title }}</a></h3>
                 </div>
             </div>
         </div>
+        <div class="no-results-message"></div>
     </section>
 </div>
 
 
 <!-- Include javaScript -->
-<script src="{{ '/assets/js/toolkit.js' | absolute_url }}"></script>
+<script src="{{ '/assets/js/toolkit.js' | absolute_url }}"></script>
+<script src="../assets/js/elements/noResultsMessageFilter.js"></script>
diff --git a/_includes/current-projects.html b/_includes/current-projects.html
@@ -49,9 +49,9 @@ <h3 class="filters-title">
     <div class="page-contain projects-inner" >
       <ul class="project-list unstyled-list"></ul>
     </div>
+    <div class="no-results-message"></div>  
   </div>
 </section>
 
-<script src="/assets/js/current-projects.js">
-
-</script>
+<script src="/assets/js/current-projects.js"></script>
+<script src="../assets/js/elements/noResultsMessageFilter.js"></script>
diff --git a/_sass/components/_toolkit.scss b/_sass/components/_toolkit.scss
@@ -135,7 +135,8 @@
 }
 
 .toolkit-red {
-    color: $color-red
+    color: $color-red;
+    text-transform: capitalize
 }
 
 @media only screen and (max-width: 1430px) {

diff --git a/assets/js/current-projects.js b/assets/js/current-projects.js
@@ -69,7 +69,6 @@ document.addEventListener("DOMContentLoaded",function(){
         document.querySelector(".search-glass").addEventListener("click",searchEventHandler);
         document.querySelector(".search-x").addEventListener("click",searchCloseEventHandler);
 
-
         // Update UI on page load based on url parameters
         updateUI()
 
@@ -328,6 +327,9 @@ function updateUI(){
     // Card is shown/hidden based on filters listed in the url parameter
     updateProjectCardDisplayState(filterParams);
 
+    //Displays no results message if filter returns no results
+    toggleNoResultMsgIfNoMatch(filterParams, 'project-card')
+
     // The function updates the frequency of each filter based on the cards that are displayed on the page.
     updateFilterFrequency(filterParams);
 
@@ -750,4 +752,12 @@ function filterTagComponent(filterName,filterValue){
                 ${filterName === "looking" ? "Role" : filterName}: ${filterValue}
                 </span>
             </div>`
+}
+
+function toggleNoResultMsgIfNoMatch(filtersParams,querySelector) {
+    if ([...document.querySelectorAll(`.${querySelector}`)].every(card => card.style.display === 'none')) {
+        noResultsMessageComponent(filtersParams,'black')
+    } else {
+        document.querySelector(".no-results-message").innerHTML = ""
+    }
 }
diff --git a/assets/js/elements/noResultsMessageFilter.js b/assets/js/elements/noResultsMessageFilter.js
@@ -0,0 +1,25 @@
+function noResultsMessageComponent(filterParams, textColor) {
+	let filterList = ``
+	for (let key in filterParams) {
+		if (filterParams[key].length) {
+			for (let i = 0; i < filterParams[key].length; i++) {
+				filterList += `<p>"<span class='toolkit-red'>${key}: ${filterParams[key][i]}</span>"</p>`
+			}
+		}
+	}
+
+	const noResultsMsgEle = document.querySelector(".no-results-message")
+	noResultsMsgEle.style.color = textColor
+	noResultsMsgEle.innerHTML = `
+    <div>  
+        <p>We couldn't find results for:</p>
+            ${filterList}
+    </div>
+    <div>
+        <h3>Search Tips</h3>
+        <ul>
+            <li><p>Broaden your search by removing some of the filters</p></li>
+        </ul>
+    </div>
+    `
+}
diff --git a/assets/js/toolkit.js b/assets/js/toolkit.js
@@ -137,7 +137,6 @@ function dropDownFilterComponent(categoryName,filterArray,filterTitle) {
 // Insert dropdown menu into the DOM
 function initializeFilters() {
     let filterCategories = retrieveFilterCategories()
-
     for (let key in filterCategories) {
         if (filterCategories[key].length === 0) continue
         let categoryName = key
@@ -244,11 +243,8 @@ function applyFilters(filtersParams) {
     // Attach event listener to filter tags
     attachEventListenerToFilterTags(filtersParams)
 
-    if ([...document.querySelectorAll(".guide-card")].every(card => card.style.display === 'none')) {
-        displayNoResultsMessage(filtersParams)
-    } else {
-        document.querySelector(".no-results-message").innerHTML = ""
-    }
+    // Displays no results message if no matches and 2nd parameter is querySelector name
+    toggleNoResultMsgIfNoMatch(filtersParams, 'guide-card')
 }
 
 // Apply current filters to URL
@@ -502,53 +498,11 @@ function tabFocusedKeyDownHandler(e) {
     }
 }
 
-function displayNoResultsMessage(filterParams) {
-    document.querySelector(".no-results-message").innerHTML = `
-    <div>
-        <p>We couldn't find results for:</p>
-            ${noResultsMessageComponent(filterParams)}
-    </div>
-    <div>
-        <h3>Search Tips</h3>
-        <ul>
-            <li><p>Broaden your search by removing some of the filters</p></li>
-        </ul>
-    </div>
-    `
-}
-
-function noResultsMessageComponent(filterParams) {
-    let filterList = ``
-    for (let key in filterParams) {
-        let category
-        switch(key) {
-            case 'projectStatus':
-                category = 'Status'
-                break
-            case 'practiceAreas':
-                category = 'Practice'
-                break
-            case 'projectTools':
-                category = 'Tools'
-                break
-            case 'projectResourceType':
-                category = 'Type'
-                break
-            case 'projectTechnologies':
-                category = 'Technologies'
-                break
-            case 'projectSource':
-                category = 'Source'
-                break
-            case 'projectContributors':
-                category = 'Contributor'
-                break
-        }
-        if (filterParams[key].length) {
-            for (let i = 0; i < filterParams[key].length; i++) {
-                filterList += `<p>"<span class='toolkit-red'>${category}: ${filterParams[key][i].split('+').join(' ')}</span>"</p>`
-            }
-        }
+//controls if no results message should display if no results match from filter selection
+function toggleNoResultMsgIfNoMatch(filtersParams,querySelector) {
+    if ([...document.querySelectorAll(`.${querySelector}`)].every(card => card.style.display === 'none')) {
+        noResultsMessageComponent(filtersParams,'white')
+    } else {
+        document.querySelector(".no-results-message").innerHTML = ""
     }
-    return filterList
 }
diff --git a/pages/toolkit.html b/pages/toolkit.html
@@ -18,3 +18,4 @@ <h1 class="title1">Our Toolkit</h1>
 </div>
 
 {%- include current-guides.html -%}
+