Verified Commit e32d587b authored by p.jbowden's avatar p.jbowden
Browse files

rework search

- use a <form>
- search through subjects in order of most recently undated
- add "searching..." message while search is still occuring
parent c2cf9c2e
......@@ -65,14 +65,26 @@
<div class="panel-heading">
<img src="./asclepios.png" alt="ASCLEPIOS">
</div>
<div class="panel-block">
<label for="attr" class="label is-medium">Attribute: </label>
<input id="attr" class="input is-medium" />
<label for="val" class="label is-medium">Value: </label>
<input id="val" class="input is-medium" />
<p class="control has-icons-right">
<button class="search-button fa fa-search button is-medium is-pulled-right"></button>
</p>
<form class="search-form panel-block">
<div class="field">
<label for="attr" class="label is-medium">Attribute</label>
<div class="control">
<input id="attr" class="input is-medium" />
</div>
</div>
<div class="field">
<label for="val" class="label is-medium">Value</label>
<div class="control">
<input id="val" class="input is-medium" />
</div>
</div>
<div class="control has-icons-right">
<button type="submit" class="search-button fa fa-search button is-medium is-pulled-right"></button>
</div>
</form>
<div class="panel-block message is-hidden">
<p>Searching...</p>
</div>
</nav>
</div>
......@@ -85,7 +97,7 @@
</span>
<div class="result-title"></div>
</a>
<button class="metadata-button button is-small">Meta Data</button>
<button class="metadata-button button is-small">Metadata</button>
<button class="xnat-button button is-small">View On XNAT</button>
<div class="metadata-modal modal is-large">
<div class="modal-background"></div>
......
......@@ -41,16 +41,20 @@ function createResult(data) {
async function handleSearchButton(event) {
let searchWidget = document.querySelector('#search-widget');
let panel = searchWidget.querySelector('.panel');
let msg = panel.querySelector('.message');
let attr = searchWidget.querySelector('#attr');
let val = searchWidget.querySelector('#val');
let userProject = keycloak.tokenParsed.project;
let subjectsUrl = `/xnat/data/projects/${userProject}/subjects?columns=xnat:subjectData/fields/field%5Bname%3Dkeyid%5D/field`
let subjectsUrl = `/xnat/data/projects/${userProject}/subjects?columns=xnat:subjectData/fields/field%5Bname%3Dkeyid%5D/field,xnat:subjectData/meta/last_modified`
let response = await fetch(subjectsUrl);
let obj = await response.json();
let subjects = obj.ResultSet.Result;
subjects.sort((a, b) => b['last_modified'].localeCompare(a['last_modified']));
panel.querySelectorAll('.result').forEach((result) => result.remove());
msg.classList.remove('is-hidden');
for (let i in subjects) {
let subject = subjects[i];
......@@ -72,12 +76,15 @@ async function handleSearchButton(event) {
response.objects.forEach((obj) => panel.appendChild(createResult(obj)));
}
msg.classList.add('is-hidden');
}
function initSearchWidget() {
let searchWidget = document.querySelector('#search-widget');
let searchButton = searchWidget.querySelector('.search-button');
searchButton.addEventListener("click", handleSearchButton);
document.querySelector('.search-form')?.addEventListener('submit', e => {
e.preventDefault();
handleSearchButton();
});
searchWidget.classList.remove('is-hidden');
}
......
......@@ -13,5 +13,8 @@ $modal-content-width: 800px;
white-space: pre-wrap;
}
.label {
}
.panel-block>.field {
flex-grow:1;
flex-shrink:1;
width:100%
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment