Skip to content

Commit

Permalink
added filter on date
Browse files Browse the repository at this point in the history
  • Loading branch information
@emilie19
emilie19 committed Nov 28, 2023
1 parent f3d2184 commit ade10a2
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 46 deletions.
71 changes: 40 additions & 31 deletions src/components/FacetElement.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,17 @@
<PulseLoader v-if="in_progress" :color="theme_color.main" />

<div v-else>
<input :ref="facet.field+'_input'" type="text" required v-model.trim="pre_value" placeholder="type to search" v-if="facet.field != 'year' && facet.field != 'hasRelationWithStatus'"/>
<hr/>
<input :ref="facet.field+'_input'" type="text" required v-model.trim="pre_value" placeholder="type to search" v-if="facet.field != 'eventYear' && facet.field != 'year' && facet.field != 'hasRelationWithStatus'"/>
<hr v-if="facet.field != 'eventYear' && facet.field != 'hasRelationWithStatus'" />
<div v-if="values.length > 0">

<!-- TODO: year -->
<div v-if="facet.field == 'year'">
{{ user_query.facets_selection.year }}
<vue-slider v-model="selected_date" :data="values" :marks="defined_labels"
:tooltip="'always'"></vue-slider>
<div v-if="facet.field == 'eventYear' || facet.field == 'year'">
<br/>
<vue-slider v-model="selected_date" :data="values" :marks="defined_labels" :tooltip="'always'" @change="changeDate(facet.field)"></vue-slider>
<br/>
</div>

<div v-else>

<div :class="getClass(item)" v-for="item in values"
@click="changeFacet(facet.field, $event)"
:key="facet.field+'_'+item.value">
Expand Down Expand Up @@ -106,14 +104,9 @@ export default {
visibility(){
return this.user_query.facets_visibility[this.facet.field]
},
// TODO: year
defined_labels: {
get() {
var list = this.values
var minDate = Math.min.apply(Math, list)
var maxDate = Math.max.apply(Math, list)
var marks = [minDate, maxDate]
return marks
return [Math.min(...this.values), Math.max(...this.values)]
},
set(value) {
this.value = value
Expand All @@ -128,6 +121,7 @@ export default {
]),
loadFacet() {
if (this.facet.field == "hasRelationWithStatus"){
this.values = []
this.values.push({ "value": "PNDG", "count": null, 'checked': false})
Expand All @@ -142,8 +136,7 @@ export default {
this.values = []
if (this.user_query.basisOfRecord != null){
var size = this.item_size
// TODO: year
if(this.facet.field == "year"){
if(this.facet.field == "eventYear" || this.facet.field == "year" ){
size = 10000
}
let response_promise = this.$backend.fetch_facet_values(this.facet.field, this.user_query, size, 0)
Expand Down Expand Up @@ -180,29 +173,45 @@ export default {
this.in_progress = false
})
},
changeDate(field){
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.updatePage(1)
if (this.selected_date[0] == this.defined_labels[0] && this.selected_date[1] == this.defined_labels[1]){
this.updateFacetSelection(Object.freeze({'facet': field, 'list': [] }))
}
else {
this.updateFacetSelection(Object.freeze({'facet': field, 'list': this.selected_date }))
}
}, 1000);
},
updateFacetValues(values){
// TODO: year
if (this.facet.field == "year") {
var min_value = 100000
var max_value = 0
if (this.facet.field == "eventYear" || this.facet.field == "year") {
var dates = []
for (let c=0; c < values.length; c++){
if (values[c].value > max_value){
max_value = values[c].value
}
else if (values[c].value < min_value){
min_value = values[c].value
dates.push(values[c].value)
}
var real_min_date = Math.min(...dates)
var min_date = real_min_date
var max_date = Math.max(...dates)
var list = [];
if (real_min_date == 0){
list.push(0)
const index = dates.indexOf("0");
if (index !== -1) {
dates.splice(index, 1);
}
min_date = Math.min(...dates)
}
var list = []
for (var i = min_value; i <= max_value; i++) {
for (let i = min_date; i <= max_date; i++) {
list.push(i);
}
if (this.user_query.facets_selection.year.length != 0){
this.selected_date = this.user_query.facets_selection.year
if (this.user_query.facets_selection[this.facet.field].length != 0){
this.selected_date = this.user_query.facets_selection[this.facet.field]
}
else {
this.selected_date = [min_value, max_value]
this.selected_date = [real_min_date, max_date]
}
return list
}
Expand Down Expand Up @@ -281,7 +290,7 @@ export default {
updateVisibility(val){
if (val == true){
this.$nextTick(() => {
if (this.facet.field != 'year' && this.facet.field != 'hasRelationWithStatus'){
if (this.facet.field != 'eventYear' && this.facet.field != 'year' && this.facet.field != 'hasRelationWithStatus'){
this.$refs[this.facet.field+"_input"].focus();
}
});
Expand Down
26 changes: 20 additions & 6 deletions src/components/FiltersSelection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,20 @@ import { mapState } from 'vuex'
active_filters(){
var active_filters = []
for (const [key, list] of Object.entries(this.facets)) {
// TODO: year
if (key == "year"){
// TO DO: check for year filter
if (key == "eventYear" || key == "year"){
if (list.length > 0){
let item = {}
var name = ""
if (key == "eventYear"){
name = "coll."
}
else if (key == "year"){
name = "pub."
}
item.name = name+" from "+list[0]+" to "+list[1]
item.type = key
active_filters.push(item)
}
}
else {
for (var i=0; i<list.length; i++){
Expand All @@ -87,7 +98,10 @@ import { mapState } from 'vuex'
},
methods:{
removeFilter(facet_name, value){
if (facet_name != "keyword"){
if (facet_name == "eventYear" || facet_name == "year"){
this.updateFacetSelection({'facet': facet_name, 'list': [] })
}
else if (facet_name != "keyword"){
var filter_list = this.facets[facet_name];
for (var i = 0; i < filter_list.length; i++) {
if (filter_list[i] == value) {
Expand All @@ -107,11 +121,11 @@ import { mapState } from 'vuex'
this.updateQuery("")
},
shortIt(term){
if (term.length < 20){
if (term.length < 30){
return term
}
else {
return term.replace(/^([\s\S]{20}\S*)[\s\S]*/, "$1 [...]");
return term.replace(/^([\s\S]{30}\S*)[\s\S]*/, "$1 [...]");
}
}
},
Expand Down
3 changes: 1 addition & 2 deletions src/services/backend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ export default new class Backend {
async fetch_next_occurrence_from_q(user_query, occurrence_key) {
await this.fetch_urls()
var url = this.urls.occurrences + "/" + occurrence_key + "/next?" + this.fillQuery(user_query)

return await this.axios_get(url)
}

Expand Down Expand Up @@ -131,7 +130,7 @@ export default new class Backend {
for (const [name, values] of Object.entries(user_query.facets_selection)) {
if (name != type){
if(values.length > 0){
if (name == 'year'){
if (name == 'eventYear' || name == "year"){
query += "&" +name + "=" + values.join(",")
}
else if (name == 'hasRelationWithStatus'){
Expand Down
13 changes: 8 additions & 5 deletions src/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export default new Vuex.Store({
occurrence_key: null,
occurrences_keys: [],
facets_selection: {
'eventYear': [],
'year': [],
'scientificName': [],
'acceptedScientificName': [],
'kingdom': [],
Expand All @@ -46,7 +48,6 @@ export default new Vuex.Store({
'citation': [],
'author': [],
'date': [],
'year': [],
'journal': [],
'publisher': [],
'volume': [],
Expand All @@ -60,6 +61,8 @@ export default new Vuex.Store({
'hasRelationWithStatus': []
},
facets_visibility: {
'eventYear': false,
'year': false,
'scientificName': false,
'acceptedScientificName': false,
'kingdom': false,
Expand All @@ -85,7 +88,6 @@ export default new Vuex.Store({
'citation': false,
'author': false,
'date': false,
'year': false,
'journal': false,
'publisher': false,
'volume': false,
Expand Down Expand Up @@ -128,11 +130,12 @@ export default new Vuex.Store({
ranking: [
{title: 'identifier', field:'gbifDoi'},
{title: 'scientific name', field:'scientificName'},
{title: 'matching number', field:'-associatedOccurrences'}
//{title: 'date', field:'-year'},
{title: 'matching number', field:'-associatedOccurrences'},
],
facets: [
{title: 'Status code', field:'hasRelationWithStatus'},
{title: 'Collection date', field:'eventYear'},
{title: 'Publication date', field:'year'},
{title: 'Scientific name', field:'scientificName'},
{title: 'Accepted scientific name', field:'acceptedScientificName'},
{title: 'Kingdom', field:'kingdom'},
Expand All @@ -157,7 +160,6 @@ export default new Vuex.Store({
{title: 'Creator', field:'creator'},
{title: 'Citation', field:'citation'},
{title: 'Author', field:'author'},
//{title: 'Date', field:'date'},
//{title: 'Year', field:'year'},
{title: 'Journal', field:'journal'},
{title: 'Publisher', field:'publisher'},
Expand All @@ -176,6 +178,7 @@ export default new Vuex.Store({
{title: 'Type', field: 'occurrence.typeStatus', selection: true},
{title: 'Record', field: 'occurrence.basisOfRecord', selection: true},
{title: 'Year', field: 'occurrence.year', selection: true},
{title: 'EventDate', field: 'occurrence.eventDate', selection: true},
{title: 'nb', field: 'relation_count', selection: true},
{title: 'Verbatim label', field: 'occurrence.verbatimLabel', selection: false},
{title: 'Kingdom', field: 'occurrence.kingdom', selection: false},
Expand Down
3 changes: 1 addition & 2 deletions src/views/HomePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,8 +134,7 @@ export default {
for (const name of Object.keys(this.user_query.facets_selection)) {
if (name in this.$route.query && this.$route.query[name].length > 0){
var values = this.$route.query[name].split("|")
// TODO: year
if (name == "year"){
if (name == "eventYear" || name == "year"){
values = values.map(str => {
return parseInt(str, 10);
});
Expand Down

0 comments on commit ade10a2

Please sign in to comment.