Merge pull request #337 from IABTechLab/sas-UID2-3946-participant-sum…

…mary-improvements auto-complete for site in participant summary
IABTechLab · Sep 16, 2024 · 5ba96bb · 5ba96bb
2 parents 6d0d2f1 + a3485b8
commit 5ba96bb
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 5 deletions.
diff --git a/webroot/adm/oncall/participant-summary.html b/webroot/adm/oncall/participant-summary.html
@@ -4,6 +4,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link href="../../css/participantSummary.css" rel="stylesheet" />
+    <link rel="shortcut icon" href="#">
 </head>
 
 <body>
@@ -23,16 +24,17 @@ <h1>UID2 Env - On-call - Participant Summary</h1>
                     <div class="col">
                         <h5>Search</h5>
                     </div>
-                    <div class="align-items-end">
+                    <div class="search-container align-items-end">
                         <div class="col">
                             <div class="form-group">
-                                <label for="key">Site Id or Name:</label>
-                                <input type="text" class="form-control" id="key">
+                                <label for="site-search">Site Id or Name:</label>
+                                <input type="text" class="form-control" id="site-search">
                                 <pre class="errorDiv" id="siteSearchErrorOutput"></pre>
                             </div>
+                            <div class="search-autocomplete-results dropdown-menu"></div>
                         </div>
                         <div class="col">
-                            <a href="#" class="btn btn-primary" id="doSearch">Search</a>
+                            <a href="#" class="btn btn-primary search-button" id="doSearch">Search</a>
                         </div>
                     </div>
                 </div>
@@ -125,6 +127,7 @@ <h5>Participant Related Keysets</h5>
 <script src="../../js/main.js"></script>
 <script src="../../js/participantSummary.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script>
 
 </body>
 

diff --git a/webroot/css/participantSummary.css b/webroot/css/participantSummary.css
@@ -5,4 +5,12 @@
 
 .section {
     display: none;
+}
+
+.search-container {
+    display: flex;
+
+    .search-button {
+        margin-left: 16px;
+    }
 }
diff --git a/webroot/js/participantSummary.js b/webroot/js/participantSummary.js
@@ -1,4 +1,14 @@
 let siteList;
+let resultsElement = document.querySelector('.search-autocomplete-results');
+const searchInput = document.querySelector('#site-search');
+searchInput.addEventListener('keyup', searchSitesAutocomplete);
+
+window.addEventListener('mouseup',function(event){
+    var dropdown = document.querySelector('.dropdown-menu');
+    if(event.target != dropdown && event.target.parentNode != dropdown){
+        $(dropdown).hide();
+    }
+});  
 
 /* ***** multi-use error handler *** */
 function participantSummaryErrorHandler(err, divContainer) {
@@ -10,6 +20,37 @@ function loadAllSitesCallback(result) {
     siteList = JSON.parse(result).map((item) => { return { name: item.name, id: item.id, clientTypes: item.clientTypes } });
 };
 
+function setSearchValue(searchText) {
+    document.querySelector('#site-search').value = searchText;
+    $(resultsElement).hide();
+    $('#doSearch').click();
+}
+
+function searchSitesAutocomplete(e) {
+
+    searchString = searchInput.value;
+    const options = {
+        threshold: .2,
+        minMatchCharLength: 2,
+        keys: ['id', 'name']
+    };
+    const fuse = new Fuse(siteList, options);
+    const result = fuse.search(searchString).map((site) => {
+        return `<a class="dropdown-item" href="#" onclick="setSearchValue('${site.item.name}')">${site.item.name} (${site.item.id})</a>`;
+    }) ;
+
+    let resultHtml = '';
+    for (let i = 0; i < result.length; i++) {
+        resultHtml += result[i];
+    }
+    resultsElement.innerHTML = resultHtml;
+    if (result.length > 0) { 
+        $(resultsElement).show();
+    } else {
+        $(resultsElement).hide();
+    }
+}
+
 function rotateKeysetsCallback(result, keyset_id) {
     const resultJson = JSON.parse(result);
     const formatted = prettifyJson(JSON.stringify(resultJson));
@@ -142,7 +183,7 @@ $(document).ready(() => {
 
     $('#doSearch').on('click', () => {
         $('#siteSearchErrorOutput').hide();
-        const siteSearch = $('#key').val();
+        const siteSearch = $('#site-search').val();
         let site = null;
         if (Number.isInteger(Number(siteSearch))) {
             const foundSite = siteList.find((item) => { return item.id === Number(siteSearch) });