Skip to content

Commit 5ba96bb

Browse files
ssundahlTTDssundahlTTD
authored
Merge pull request #337 from IABTechLab/sas-UID2-3946-participant-summary-improvements
auto-complete for site in participant summary
2 parents 6d0d2f1 + a3485b8 commit 5ba96bb

File tree

3 files changed

+57
-5
lines changed

3 files changed

+57
-5
lines changed

‎webroot/adm/oncall/participant-summary.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
55
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
66
<link href="../../css/participantSummary.css" rel="stylesheet" />
7+
<link rel="shortcut icon" href="#">
78
</head>
89

910
<body>
@@ -23,16 +24,17 @@ <h1>UID2 Env - On-call - Participant Summary</h1>
2324
<div class="col">
2425
<h5>Search</h5>
2526
</div>
26-
<div class="align-items-end">
27+
<div class="search-container align-items-end">
2728
<div class="col">
2829
<div class="form-group">
29-
<label for="key">Site Id or Name:</label>
30-
<input type="text" class="form-control" id="key">
30+
<label for="site-search">Site Id or Name:</label>
31+
<input type="text" class="form-control" id="site-search">
3132
<pre class="errorDiv" id="siteSearchErrorOutput"></pre>
3233
</div>
34+
<div class="search-autocomplete-results dropdown-menu"></div>
3335
</div>
3436
<div class="col">
35-
<a href="#" class="btn btn-primary" id="doSearch">Search</a>
37+
<a href="#" class="btn btn-primary search-button" id="doSearch">Search</a>
3638
</div>
3739
</div>
3840
</div>
@@ -125,6 +127,7 @@ <h5>Participant Related Keysets</h5>
125127
<script src="../../js/main.js"></script>
126128
<script src="../../js/participantSummary.js"></script>
127129
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
130+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
128131

129132
</body>
130133

‎webroot/css/participantSummary.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,12 @@
55

66
.section {
77
display: none;
8+
}
9+
10+
.search-container {
11+
display: flex;
12+
13+
.search-button {
14+
margin-left: 16px;
15+
}
816
}

‎webroot/js/participantSummary.js‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
let siteList;
2+
let resultsElement = document.querySelector('.search-autocomplete-results');
3+
const searchInput = document.querySelector('#site-search');
4+
searchInput.addEventListener('keyup', searchSitesAutocomplete);
5+
6+
window.addEventListener('mouseup',function(event){
7+
var dropdown = document.querySelector('.dropdown-menu');
8+
if(event.target != dropdown && event.target.parentNode != dropdown){
9+
$(dropdown).hide();
10+
}
11+
});
212

313
/* ***** multi-use error handler *** */
414
function participantSummaryErrorHandler(err, divContainer) {
@@ -10,6 +20,37 @@ function loadAllSitesCallback(result) {
1020
siteList = JSON.parse(result).map((item) => { return { name: item.name, id: item.id, clientTypes: item.clientTypes } });
1121
};
1222

23+
function setSearchValue(searchText) {
24+
document.querySelector('#site-search').value = searchText;
25+
$(resultsElement).hide();
26+
$('#doSearch').click();
27+
}
28+
29+
function searchSitesAutocomplete(e) {
30+
31+
searchString = searchInput.value;
32+
const options = {
33+
threshold: .2,
34+
minMatchCharLength: 2,
35+
keys: ['id', 'name']
36+
};
37+
const fuse = new Fuse(siteList, options);
38+
const result = fuse.search(searchString).map((site) => {
39+
return `<a class="dropdown-item" href="#" onclick="setSearchValue('${site.item.name}')">${site.item.name} (${site.item.id})</a>`;
40+
}) ;
41+
42+
let resultHtml = '';
43+
for (let i = 0; i < result.length; i++) {
44+
resultHtml += result[i];
45+
}
46+
resultsElement.innerHTML = resultHtml;
47+
if (result.length > 0) {
48+
$(resultsElement).show();
49+
} else {
50+
$(resultsElement).hide();
51+
}
52+
}
53+
1354
function rotateKeysetsCallback(result, keyset_id) {
1455
const resultJson = JSON.parse(result);
1556
const formatted = prettifyJson(JSON.stringify(resultJson));
@@ -142,7 +183,7 @@ $(document).ready(() => {
142183

143184
$('#doSearch').on('click', () => {
144185
$('#siteSearchErrorOutput').hide();
145-
const siteSearch = $('#key').val();
186+
const siteSearch = $('#site-search').val();
146187
let site = null;
147188
if (Number.isInteger(Number(siteSearch))) {
148189
const foundSite = siteList.find((item) => { return item.id === Number(siteSearch) });

0 commit comments

Comments
 (0)