Commit 091eac8f authored by Matija Obreza's avatar Matija Obreza
Browse files

User experience fixed

parent 7180ad16
...@@ -314,8 +314,10 @@ selection.add-many.accessionIds=List accession IDs as used in Genesys separated ...@@ -314,8 +314,10 @@ selection.add-many.accessionIds=List accession IDs as used in Genesys separated
filters.page.title=Data filters filters.page.title=Data filters
filters.view=Current filters filters.view=Current filters
filter.filters-applied=You have applied filters.
filter.filters-not-applied=You can filter the data.
filters.data-is-filtered=The data is filtered. filters.data-is-filtered=The data is filtered.
filters.modify-filters=View & Modify filters filters.toggle-filters=Filters
filter.taxonomy=Taxonomy filter.taxonomy=Taxonomy
filter.inTrust=ITPGRFA Art. 15 accession filter.inTrust=ITPGRFA Art. 15 accession
filter.acceNumb=Accession name filter.acceNumb=Accession name
...@@ -339,6 +341,9 @@ filter.add=Add filter ...@@ -339,6 +341,9 @@ filter.add=Add filter
filter.additional=Additional filters filter.additional=Additional filters
filter.apply=Apply filter.apply=Apply
filter.close=Close filter.close=Close
filter.remove=Remove filter
filter.autocomplete-placeholder=Type more than 3 characters...
search.page.title=Full-text Search search.page.title=Full-text Search
search.no-results=No matches found for your query. search.no-results=No matches found for your query.
......
...@@ -12,10 +12,9 @@ ...@@ -12,10 +12,9 @@
<c:set var="normalizedKey" value="${fn:replace(filter.key,':', '_')}"/> <c:set var="normalizedKey" value="${fn:replace(filter.key,':', '_')}"/>
<c:set var="filterKey" value="${filter.key}"/> <c:set var="filterKey" value="${filter.key}"/>
<div class="clearfix filter-block" <div class="clearfix filter-block" id="${normalizedKey}_filter" key="${normalizedKey}">
id="${normalizedKey}_filter" key="${normalizedKey}">
<div class="col-lg-3"> <div class="col-lg-3 edit-fil">
<c:if test="${not filter.core}"> <c:if test="${not filter.core}">
<a href="<c:url value="/descriptors/${filter.key}" />"><c:out value="${filter.title}" /></a> <a href="<c:url value="/descriptors/${filter.key}" />"><c:out value="${filter.title}" /></a>
</c:if> </c:if>
...@@ -24,13 +23,12 @@ ...@@ -24,13 +23,12 @@
<spring:message code="filter.${filter.name}" /> <spring:message code="filter.${filter.name}" />
</c:if> </c:if>
</div> </div>
<div class="col-lg-5 filter-new"> <div class="col-lg-5 filter-new">
<c:choose> <c:choose>
<c:when test="${filter.name=='crop'}"> <c:when test="${filter.name=='crop'}">
<div class="form-group input-group"> <div class="form-group input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<select name="crop" id="cropselector" onclick="filterCrop('${filterKey}')" class="form-control"> <select name="crop" id="cropselector" i-key = "${filterKey}" class="form-control filter-crop">
<option value=""></option> <option value=""></option>
<c:forEach items="${crops}" var="c"> <c:forEach items="${crops}" var="c">
<option value="${c.shortName}" ${c.shortName== crop.shortName?'selected':''} ><c:out value="${c.getName(pageContext.response.locale)}" /></option> <option value="${c.shortName}" ${c.shortName== crop.shortName?'selected':''} ><c:out value="${c.getName(pageContext.response.locale)}" /></option>
...@@ -38,54 +36,40 @@ ...@@ -38,54 +36,40 @@
</select> </select>
</span> </span>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when> </c:when>
<c:when test="${filter.filterType=='LIST'}"> <c:when test="${filter.filterType=='LIST'}">
<div class=""> <div class="">
<c:forEach items="${filter.options}" var="option"> <c:forEach items="${filter.options}" var="option">
<div> <div>
<label> <label>
<input class="filter-list" id="${option.value}_input" norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" /> <input class="filter-list" id="${option.value}_input" ${fn:contains(filters[filter.key], option.value)?'checked':''} norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" />
<spring:message code="${option.name}"/> <spring:message code="${option.name}"/>
</label> </label>
</div> </div>
</c:forEach> </c:forEach>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when> </c:when>
<c:when test="${filter.filterType=='I18NLIST'}"> <c:when test="${filter.filterType=='I18NLIST'}">
<div class=""> <div class="">
<c:forEach items="${filter.options}" var="option"> <c:forEach items="${filter.options}" var="option">
<div> <div>
<label> <label>
<input class="filter-list" id="${option.value}_input" norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" /> <input class="filter-list" id="${option.value}_input" ${fn:contains(filters[filter.key], option.value)?'checked':''} norm-key="${normalizedKey}" i-key="${normalizedKey}${option.value}" type="checkbox" value="${option.value}" />
<spring:message code="${option.name}"/> <spring:message code="${option.name}"/>
</label> </label>
</div> </div>
</c:forEach> </c:forEach>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</div> </div>
</c:when> </c:when>
<c:when test="${filter.filterType=='AUTOCOMPLETE'}"> <c:when test="${filter.filterType=='AUTOCOMPLETE'}">
<div class="ui-front"> <div class="ui-front">
<div class="form-group input-group"> <div class="form-group input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<input id="${normalizedKey}_input" class="span2 form-control autocomplete-filter" x-source="${filter.autocompleteUrl}" type="text"/> <input id="${normalizedKey}_input" class="span2 form-control autocomplete-filter" x-source="${filter.autocompleteUrl}" placeholder="<spring:message code="filter.autocomplete-placeholder" />" type="text"/>
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}" >+</button> <button class="btn notimportant filter-auto" norm-key="${normalizedKey}" >+</button>
</span> </span>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div> </div>
</div> </div>
</c:when> </c:when>
<c:when test="${filter.dataType=='NUMERIC'}"> <c:when test="${filter.dataType=='NUMERIC'}">
<div class="form-group input-group"> <div class="form-group input-group">
...@@ -95,41 +79,33 @@ ...@@ -95,41 +79,33 @@
<button class="btn notimportant filter-range" norm-key="${normalizedKey}">+</button> <button class="btn notimportant filter-range" norm-key="${normalizedKey}">+</button>
</span> </span>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when> </c:when>
<c:when test="${filter.dataType=='BOOLEAN'}"> <c:when test="${filter.dataType=='BOOLEAN'}">
<div class=""> <div class="">
<div><label><input type="checkbox" class="filter-bool" i-key="${normalizedKey}true" id="${normalizedKey}" value="true"/><spring:message code="boolean.true"/></label></div> <div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'true')?'checked':''} class="filter-bool" i-key="${normalizedKey}true" id="${normalizedKey}" value="true"><spring:message code="boolean.true"/></label></div>
<div><label><input type="checkbox" class="filter-bool" i-key="${normalizedKey}false" id="${normalizedKey}" value="false"/><spring:message code="boolean.false"/></label></div> <div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'false')?'checked':''} class="filter-bool" i-key="${normalizedKey}false" id="${normalizedKey}" value="false"><spring:message code="boolean.false"/></label></div>
<div><label><input type="checkbox" class="filter-bool" i-key="${normalizedKey}null" id="${normalizedKey}" value="null"/><spring:message code="boolean.null"/></label></div> <div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'null')?'checked':''} class="filter-bool" i-key="${normalizedKey}null" id="${normalizedKey}" value="null"><spring:message code="boolean.null"/></label></div>
</div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div> </div>
</c:when> </c:when>
<c:otherwise> <c:otherwise>
<div class="ui-front"> <div class="ui-front">
<div class="form-group input-group"> <div class="form-group input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<input class="span2 form-control" id="${normalizedKey}_input" type="text" /> <input class="span2 form-control" id="${normalizedKey}_input" type="text"/>
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}">+</button> <button class="btn notimportant filter-auto" norm-key="${normalizedKey}">+</button>
</span> </span>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div> </div>
</div>
</c:otherwise> </c:otherwise>
</c:choose> </c:choose>
</div> </div>
<div> <div class="col-lg-9">
<a href="#" style="float: right" class="close-fil glyphicon glyphicon-remove"></a> <div class="filter-values" id="${normalizedKey}_value">
<a href="#" style="float: right" class="edit-fil glyphicon glyphicon-pencil"></a> </div>
</div> <div style="margin-top: 3px" class="filter-apply-btn">
<div class="col-lg-4 filter-values" id="${normalizedKey}_value"> <button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
<button class="btn btn-default remove-filter"><spring:message code="filter.remove"/></button>
</div>
</div> </div>
</div> </div>
</c:forEach> </c:forEach>
...@@ -40,13 +40,19 @@ ...@@ -40,13 +40,19 @@
</div> </div>
<%--Filters--%> <%--Filters--%>
<div id="toggleFilters" class="filter-toggler applied-filters hide"> <div id="toggleFilters" class="applied-filters">
<a href="#"><spring:message code="filters.modify-filters" /></a> <ul class="nav nav-pills">
<li class="active filter-toggler"><a><spring:message code="filters.toggle-filters" /></a></li>
<li class="message right">
<span class="${fn:length(currentFilters) gt 0 ? '' : 'hide'}"><spring:message code="filter.filters-applied" /></span>
<span class="${fn:length(currentFilters) gt 0 ? 'hide' : ''}"><spring:message code="filter.filters-not-applied" /></span>
</li>
</ul>
</div> </div>
<div id="allfilters" class="applied-filters hide"> <div id="allfilters" class="applied-filters hide">
<a style="float: right" class="filter-toggler close-fil glyphicon glyphicon-remove" href="#"></a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="dropdown form-horizontal" id="menu1"> <li class="filter-toggler"><a><spring:message code="filters.toggle-filters" /></a></li>
<li class="active dropdown form-horizontal" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
<spring:message code="filter.add"/> <spring:message code="filter.add"/>
...@@ -69,7 +75,10 @@ ...@@ -69,7 +75,10 @@
<b class="glyphicon-plus"></b> <b class="glyphicon-plus"></b>
</a> </a>
</li> </li>
<li class="message right">
<span class="${fn:length(currentFilters) gt 0 ? '' : 'hide'}"><spring:message code="filter.filters-applied" /></span>
<span class="${fn:length(currentFilters) gt 0 ? 'hide' : ''}"><spring:message code="filter.filters-not-applied" /></span>
</li>
</ul> </ul>
<%-- Only render currently present filters --%> <%-- Only render currently present filters --%>
...@@ -79,18 +88,17 @@ ...@@ -79,18 +88,17 @@
<c:set var="filterKey" value="${filter.key}"/> <c:set var="filterKey" value="${filter.key}"/>
<div class="clearfix filter-block" id="${normalizedKey}_filter" key="${normalizedKey}"> <div class="clearfix filter-block" id="${normalizedKey}_filter" key="${normalizedKey}">
<div class="col-lg-3 edit-fil">
<div class="col-lg-3">
<c:if test="${not filter.core}"> <c:if test="${not filter.core}">
<a href="<c:url value="/descriptors/${filter.key}" />"><c:out value="${filter.title}" /></a> <c:out value="${filter.title}" />
<%-- <a href="<c:url value="/descriptors/${filter.key}" />"> --%>
</c:if> </c:if>
<c:if test="${filter.core}"> <c:if test="${filter.core}">
<spring:message code="filter.${filter.name}" /> <spring:message code="filter.${filter.name}" />
</c:if> </c:if>
</div> </div>
<div class="col-lg-5 filter-new" style="display: none"> <div class="col-lg-5 filter-new">
<c:choose> <c:choose>
<c:when test="${filter.filterType=='LIST'}"> <c:when test="${filter.filterType=='LIST'}">
<div class=""> <div class="">
...@@ -103,9 +111,6 @@ ...@@ -103,9 +111,6 @@
</div> </div>
</c:forEach> </c:forEach>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when> </c:when>
<c:when test="${filter.filterType=='I18NLIST'}"> <c:when test="${filter.filterType=='I18NLIST'}">
<div class=""> <div class="">
...@@ -117,25 +122,17 @@ ...@@ -117,25 +122,17 @@
</label> </label>
</div> </div>
</c:forEach> </c:forEach>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</div> </div>
</c:when> </c:when>
<c:when test="${filter.filterType=='AUTOCOMPLETE'}"> <c:when test="${filter.filterType=='AUTOCOMPLETE'}">
<div class="ui-front"> <div class="ui-front">
<div class="form-group input-group"> <div class="form-group input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<input id="${normalizedKey}_input" class="span2 form-control autocomplete-filter" x-source="${filter.autocompleteUrl}" type="text"/> <input id="${normalizedKey}_input" class="span2 form-control autocomplete-filter" x-source="${filter.autocompleteUrl}" placeholder="<spring:message code="filter.autocomplete-placeholder" />" type="text"/>
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}" >+</button> <button class="btn notimportant filter-auto" norm-key="${normalizedKey}" >+</button>
</span> </span>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</div> </div>
</c:when> </c:when>
<c:when test="${filter.dataType=='NUMERIC'}"> <c:when test="${filter.dataType=='NUMERIC'}">
<div class="form-group input-group"> <div class="form-group input-group">
...@@ -145,9 +142,6 @@ ...@@ -145,9 +142,6 @@
<button class="btn notimportant filter-range" norm-key="${normalizedKey}">+</button> <button class="btn notimportant filter-range" norm-key="${normalizedKey}">+</button>
</span> </span>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when> </c:when>
<c:when test="${filter.dataType=='BOOLEAN'}"> <c:when test="${filter.dataType=='BOOLEAN'}">
<div class=""> <div class="">
...@@ -155,9 +149,6 @@ ...@@ -155,9 +149,6 @@
<div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'false')?'checked':''} class="filter-bool" i-key="${normalizedKey}false" id="${normalizedKey}" value="false"><spring:message code="boolean.false"/></label></div> <div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'false')?'checked':''} class="filter-bool" i-key="${normalizedKey}false" id="${normalizedKey}" value="false"><spring:message code="boolean.false"/></label></div>
<div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'null')?'checked':''} class="filter-bool" i-key="${normalizedKey}null" id="${normalizedKey}" value="null"><spring:message code="boolean.null"/></label></div> <div><label><input type="checkbox" ${fn:contains(filters[filter.key], 'null')?'checked':''} class="filter-bool" i-key="${normalizedKey}null" id="${normalizedKey}" value="null"><spring:message code="boolean.null"/></label></div>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when> </c:when>
<c:when test="${filter.name=='crop'}"> <c:when test="${filter.name=='crop'}">
<div class="form-group input-group"> <div class="form-group input-group">
...@@ -170,9 +161,6 @@ ...@@ -170,9 +161,6 @@
</select> </select>
</span> </span>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</c:when> </c:when>
<c:otherwise> <c:otherwise>
<div class="ui-front"> <div class="ui-front">
...@@ -182,38 +170,38 @@ ...@@ -182,38 +170,38 @@
<button class="btn notimportant filter-auto" norm-key="${normalizedKey}">+</button> <button class="btn notimportant filter-auto" norm-key="${normalizedKey}">+</button>
</span> </span>
</div> </div>
<div style="margin-top: 3px">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
</div>
</div> </div>
</c:otherwise> </c:otherwise>
</c:choose> </c:choose>
</div> </div>
<div> <div class="col-lg-9">
<a href="#" style="float: right" class="close-fil glyphicon glyphicon-remove"></a> <div class="filter-values" id="${normalizedKey}_value">
<a href="#" style="float: right" class="edit-fil glyphicon glyphicon-pencil"></a> <c:forEach items="${filters[filter.key]}" var="value">
</div> <c:set var="string" value="${value}"/>
<div class="col-lg-4 filter-values" id="${normalizedKey}_value"> <c:if test="${fn:contains(value, 'range')}">
<c:set var="string" value="${fn:replace(value,'{range=[','Between ')}"/>
<c:forEach items="${filters[filter.key]}" var="value"> <c:set var="string" value="${fn:replace(string,',',' and ')}"/>
<c:set var="string" value="${fn:replace(string,']}','')}"/>
<c:set var="string" value="${value}"/> </c:if>
<c:if test="${fn:contains(value, 'range')}"> <c:if test="${fn:contains(value, 'min')}">
<c:set var="string" value="${fn:replace(value,'{range=[','Between ')}"/> <c:set var="string" value="${fn:replace(value,'{min=','More than ')}"/>
<c:set var="string" value="${fn:replace(string,',',' and ')}"/> <c:set var="string" value="${fn:replace(string,'}','')}"/>
<c:set var="string" value="${fn:replace(string,']}','')}"/> </c:if>
</c:if> <c:if test="${fn:contains(value, 'max')}">
<c:if test="${fn:contains(value, 'min')}"> <c:set var="string" value="${fn:replace(value,'{max=','Less than ')}"/>
<c:set var="string" value="${fn:replace(value,'{min=','More than ')}"/> <c:set var="string" value="${fn:replace(string,'}','')}"/>
<c:set var="string" value="${fn:replace(string,'}','')}"/> </c:if>
</c:if> <c:if test="${string==null}">
<c:if test="${fn:contains(value, 'max')}"> <c:set var="string" value="null" />
<c:set var="string" value="${fn:replace(value,'{max=','Less than ')}"/> </c:if>
<c:set var="string" value="${fn:replace(string,'}','')}"/> <div class="filtval complex" x-key="${normalizedKey}${string}" id="${normalizedKey}">${string}</div>
</c:if> <c:remove var="string" />
</c:forEach>
<div class="filtval complex" x-key="${normalizedKey}${value}" id="${normalizedKey}">${string}</div> </div>
</c:forEach> <div style="margin-top: 3px" class="filter-apply-btn">
<button class="btn btn-primary apply"><spring:message code="filter.apply"/></button>
<button class="btn btn-default remove-filter"><spring:message code="filter.remove"/></button>
</div>
</div> </div>
</div> </div>
</c:forEach> </c:forEach>
...@@ -269,7 +257,7 @@ ...@@ -269,7 +257,7 @@
$(document).ready(function () { $(document).ready(function () {
if (jsonData.crop != null) { if (jsonData.crop !=null && jsonData.crop.length > 0) {
$("#menu2").show(); $("#menu2").show();
} }
...@@ -350,15 +338,15 @@ ...@@ -350,15 +338,15 @@
$("body").on("click", ".apply", function () { $("body").on("click", ".apply", function () {
GenesysFilterUtil.submitJson(jsonData); GenesysFilterUtil.submitJson(jsonData);
}); });
$("body").on("click", ".close-fil", function () { $("body").on("click", ".remove-filter", function () {
var key = $(this).parent().parent().attr("key"); var key = $(this).parents(".filter-block").attr("key");
delete jsonData[key.replace("_", ":")]; delete jsonData[key.replace("_", ":")];
GenesysFilterUtil.submitJson(jsonData); GenesysFilterUtil.submitJson(jsonData);
}); });
$("body").on("click", ".edit-fil", function () { $("body").on("click", ".edit-fil", function () {
$(this).parent().parent().find(".filter-new").toggle("fast"); GenesysFilterUtil.showFilter($(this).parents(".filter-block"));
}); });
$("body").on("click", ".filtval", function (event) { $("body").on("click", ".filtval", function (event) {
...@@ -373,10 +361,11 @@ ...@@ -373,10 +361,11 @@
value = GenesysFilterUtil.setCharAt(jsonVal, jsonVal.indexOf("{"), '{"'); value = GenesysFilterUtil.setCharAt(jsonVal, jsonVal.indexOf("{"), '{"');
value = GenesysFilterUtil.setCharAt(value, jsonVal.indexOf(":") + 1, '":'); value = GenesysFilterUtil.setCharAt(value, jsonVal.indexOf(":") + 1, '":');
} }
if (value=="null") value=null;
GenesysFilterUtil.removeValue(value, key, jsonData); GenesysFilterUtil.removeValue(value, key, jsonData);
if ($(this).parent().parent().find(".filter-new").is(":hidden")) { if (! $(this).parents(".filter-block").hasClass("filter-edit")) {
GenesysFilterUtil.submitJson(jsonData); GenesysFilterUtil.submitJson(jsonData);
} }
...@@ -384,11 +373,7 @@ ...@@ -384,11 +373,7 @@
$('input[i-key=' + key + value + ']').prop('checked', false); $('input[i-key=' + key + value + ']').prop('checked', false);
}); });
$(".autocomplete-filter").each(function () { GenesysFilterUtil.registerAutocomplete("#allfilters");
var t = $(this);
t.autocomplete({ delay: 200, minLength: 3, source: t.attr('x-source'), messages: { noResults: '', results: function () {
} } });
});
}); });
</script> </script>
</content> </content>
......
...@@ -1307,14 +1307,27 @@ table.crop-details h4 { ...@@ -1307,14 +1307,27 @@ table.crop-details h4 {
/* Main column - Filters */ /* Main column - Filters */
.nav .filter-toggler a {
background-color: #eeeeee;
}
#allfilters .filter-block { #allfilters .filter-block {
background:#f8f7f5; background:#f8f7f5;
margin:0 0 5px 0; margin:5px 0 0 0;
padding:10px; padding:10px;
} }