From 2100d9dd487c8c9b11224719aaeb600e972f5915 Mon Sep 17 00:00:00 2001
From: StefonSimmons <s.j.simmons@spartans.nsu.edu>
Date: Mon, 11 Dec 2023 18:56:08 -0500
Subject: [PATCH] $watch 'filteredRulesets' to load empty res msg

---
 layouts/static-analysis/list.html | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/layouts/static-analysis/list.html b/layouts/static-analysis/list.html
index 6924f00a62645..7c824e39ea455 100644
--- a/layouts/static-analysis/list.html
+++ b/layouts/static-analysis/list.html
@@ -39,6 +39,7 @@ <h1 id="pagetitle">{{ .Title }}</h1>
         },
         searchValue: '',
         openedFilterForm: null,
+        showEmptyResultsMsg: false,
         filteredRulesets: new Set(),
         resetFilteredRulesets () {
             // Empty filtered rulesets
@@ -60,7 +61,7 @@ <h1 id="pagetitle">{{ .Title }}</h1>
         shouldShowRule (ruleEl) {
             // Determines rule display
             // Compares search values and filter values against ruleInfo
-
+            
             const ruleInfo = ruleEl.dataset.info.split(';')
             const ruleFilterInfo = ruleInfo[0].toLowerCase().split(',')
             const ruleSearchInfo = ruleInfo.slice(1).join(' ').toLowerCase()
@@ -183,7 +184,7 @@ <h1 id="pagetitle">{{ .Title }}</h1>
             // Determine and return the appropriate empty results message
 
             const filterValues = Object.values(this.filterTypes).flat().map(item => item.split(',')[0]).join(', ')
-            if((filterValues.length > 1) && this.searchValue){
+            if(filterValues.length && this.searchValue){
                 return `No results found for query on search: '${this.searchValue}' and filter: '${filterValues}'`
             }else{
                 return `No results found for query '${this.searchValue || filterValues}'`
@@ -283,9 +284,12 @@ <h1 id="pagetitle">{{ .Title }}</h1>
                     </button>
                 </div>
                 {{ end }}
-                <template x-if="!filteredRulesets.size">
-                    <span class="fw-semibold" x-text="emptyResultsMsg"></span>
-                </template>
+                {{/*  hook into the app lifecycle. $watch for 'filteredRulesets' to change and update the 'showEmptyResultsMsg' property  */}}
+                <div x-init="showEmptyResultsMsg = !filteredRulesets.size; $watch('filteredRulesets', value => showEmptyResultsMsg = !value.size)">
+                    <template x-if="showEmptyResultsMsg">
+                        <span class="fw-semibold" x-text="emptyResultsMsg"></span>
+                    </template>
+                </div>
             </div>
         </div>
         {{/*  NAV - Keep here. scratch pad for filters need to form first */}}