Implemented query listing in front-end

src/Server/Views/Home/Index.cshtml

@@ -1,5 +1,7 @@
 @using Server.Models
 @using System.Web
+@using Server.Services
+@inject LocalizationService T
 @model HomeIndexViewModel
 @{
     ViewData["Title"] = "Home Page";
@@ -81,15 +83,17 @@
                   placeholder="filter"
                 />
               </div>
-
+              <div class="spinner d-none"></div>
-              @* <div class="list-row">
+              <table id="queriesTable" class="table table-striped" style="max-height: 60vh; overflow-y: auto; display: block;">
-                <span>Some test query</span>
+                <thead>
-                <button class="btn btn-primary btn-sm">Details</button>
+                  <tr>
-              </div>
+                    <th class="visually-hidden">Name</th>
-              <div class="list-row">
+                    <th class="visually-hidden">Action</th>
-                <span>Some other test query</span>
+                  </tr>
-                <button class="btn btn-primary btn-sm">Details</button>
+                </thead>
-              </div> *@
+                <tbody>
+                </tbody>
+              </table>
             </div>
           </div>
 
@@ -116,15 +120,6 @@
                 <tbody>
                 </tbody>
               </table>
-
-              @* <div class="list-row">
-                <span>Someentity</span>
-                <button class="btn btn-primary btn-sm">Details</button>
-              </div>
-              <div class="list-row">
-                <span>Some other test query</span>
-                <button class="btn btn-primary btn-sm">Details</button>
-              </div> *@
             </div>
           </div>
 
@@ -186,6 +181,7 @@
 <script>
     var domains = JSON.parse('@Html.Raw(System.Text.Json.JsonSerializer.Serialize(domains))');
     var entities = null;
+    var queries = null;
 
     document.addEventListener('DOMContentLoaded', () => {
         const filterInput = document.getElementById('entitiesFilter');
@@ -195,36 +191,67 @@
         });
     });
 
+    document.addEventListener('DOMContentLoaded', () => {
+        const entitiesFilter = document.getElementById('entitiesFilter');
+        entitiesFilter.addEventListener('input', () => {
+            populateEntitiesTable(entitiesFilter.value);
+        });
+
+        const queriesFilter = document.querySelector(
+            '#queriesTable'
+        ).closest('.card-body').querySelector('input');
+
+        queriesFilter.addEventListener('input', () => {
+            populateQueriesTable(queriesFilter.value);
+        });
+    });
+
     function selectDomain(domainKey) {
-        // Deselect all domain items
         document.querySelectorAll('.domain-item').forEach(item => {
             item.classList.remove('active');
         });
 
-        // Select the clicked domain item
         var selectedItem = document.getElementById('sidebar_domain_' + domainKey);
         selectedItem.classList.add('active');
 
-        // Update main content header
         var domainName = domains[domainKey];
         document.querySelector('.section-card h4').innerText = domainName;
 
-        // Request the entities from that searchdomain
+        /* ---------- ENTITIES ---------- */
-        let url = `/Entity/List?searchdomain=${encodeURIComponent(domainName)}&returnEmbeddings=false`;
+        let entitiesUrl = `/Entity/List?searchdomain=${encodeURIComponent(domainName)}&returnEmbeddings=false`;
-        let table = document.querySelector("#entitiesTable").parentElement;
+        let entitiesCard = document.querySelector("#entitiesTable").parentElement;
         clearEntitiesTable();
-        showEntitiesLoading(table);
+        showEntitiesLoading(entitiesCard);
-        fetch(url)
+
-            .then(response => response.json())
+        fetch(entitiesUrl)
+            .then(r => r.json())
             .then(data => {
                 entities = data.Results;
                 populateEntitiesTable();
-                hideEntitiesLoading(table);
+                hideEntitiesLoading(entitiesCard);
             })
-            .catch(error => {
+            .catch(err => {
-                console.error('Error fetching entities:', error);
+                console.error(err);
                 flagSearchdomainAsErroneous(domainKey);
-                hideEntitiesLoading(table);
+                hideEntitiesLoading(entitiesCard);
+            });
+
+        /* ---------- QUERIES ---------- */
+        let queriesUrl = `/Searchdomain/GetSearches?searchdomain=${encodeURIComponent(domainName)}`;
+        let queriesCard = document.querySelector("#queriesTable").parentElement;
+        clearQueriesTable();
+        showQueriesLoading(queriesCard);
+
+        fetch(queriesUrl)
+            .then(r => r.json())
+            .then(data => {
+                queries = Object.entries(data.Searches).map(key => ({"Name": key[0], "AccessDateTimes": key[1].AccessDateTimes, "Results": key[1].Results}));
+                populateQueriesTable();
+                hideQueriesLoading(queriesCard);
+            })
+            .catch(err => {
+                console.error('Error fetching queries:', err);
+                hideQueriesLoading(queriesCard);
             });
     }
 
@@ -233,6 +260,10 @@
         tableBody.innerHTML = '';
     }
 
+    function clearQueriesTable() {
+        document.querySelector('#queriesTable tbody').innerHTML = '';
+    }
+
     function populateEntitiesTable(filterText = '') {
         if (!entities) return;
 
@@ -266,6 +297,39 @@
         });
     }
 
+    function populateQueriesTable(filterText = '') {
+        if (!queries) return;
+
+        const tbody = document.querySelector('#queriesTable tbody');
+        tbody.innerHTML = '';
+
+        const normalizedFilter = filterText.toLowerCase();
+
+        queries
+            .filter(q => q.Name?.toLowerCase().includes(normalizedFilter))
+            .forEach(query => {
+                const row = document.createElement('tr');
+
+                const nameCell = document.createElement('td');
+                nameCell.textContent = query.Name;
+                nameCell.classList.add('col-md-12');
+                row.appendChild(nameCell);
+
+                const actionCell = document.createElement('td');
+                const btn = document.createElement('button');
+                btn.className = 'btn btn-sm btn-primary';
+                btn.textContent = '@T["Details"]';
+                btn.addEventListener('click', () => {
+                    runQuery(query);
+                });
+
+                actionCell.appendChild(btn);
+                row.appendChild(actionCell);
+
+                tbody.appendChild(row);
+            });
+    }
+
     function flagSearchdomainAsErroneous(domainKey) {
       var domainItem = document.getElementById('sidebar_domain_' + domainKey);
       domainItem.classList.add('list-group-item-danger');
@@ -281,6 +345,16 @@
       element.querySelector('.spinner').classList.add('d-none');
     }
 
+    function showQueriesLoading(element = null) {
+        if (!element) element = document;
+        element.querySelector('.spinner').classList.remove('d-none');
+    }
+
+    function hideQueriesLoading(element = null) {
+        if (!element) element = document;
+        element.querySelector('.spinner').classList.add('d-none');
+    }
+
     function showEntityDetails(entity) {
       // Title
       document.getElementById('entityDetailsTitle').innerText = entity.Name;