From ade10a2930558ac2e5ee560981a78681d53e87e4 Mon Sep 17 00:00:00 2001
From: emilie19 <emilie.pasche@hesge.ch>
Date: Tue, 28 Nov 2023 13:43:16 +0100
Subject: [PATCH] added filter on date

---
 src/components/FacetElement.vue     | 71 ++++++++++++++++-------------
 src/components/FiltersSelection.vue | 26 ++++++++---
 src/services/backend.js             |  3 +-
 src/store/index.js                  | 13 ++++--
 src/views/HomePage.vue              |  3 +-
 5 files changed, 70 insertions(+), 46 deletions(-)

diff --git a/src/components/FacetElement.vue b/src/components/FacetElement.vue
index 0a35803..a317a92 100644
--- a/src/components/FacetElement.vue
+++ b/src/components/FacetElement.vue
@@ -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">
@@ -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
@@ -128,6 +121,7 @@ export default {
         ]),       
         loadFacet() {
             
+            
             if (this.facet.field == "hasRelationWithStatus"){
                     this.values = []
                     this.values.push({ "value": "PNDG", "count": null, 'checked': false})
@@ -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)
@@ -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 
             }
@@ -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();
                     }
                 });
diff --git a/src/components/FiltersSelection.vue b/src/components/FiltersSelection.vue
index 165b7ed..ecd91ed 100644
--- a/src/components/FiltersSelection.vue
+++ b/src/components/FiltersSelection.vue
@@ -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++){
@@ -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) {
@@ -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 [...]");
         }
       }
     },
diff --git a/src/services/backend.js b/src/services/backend.js
index 6fa6ff9..103701c 100644
--- a/src/services/backend.js
+++ b/src/services/backend.js
@@ -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)
     }
 
@@ -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'){
diff --git a/src/store/index.js b/src/store/index.js
index d728146..72d9a8a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -21,6 +21,8 @@ export default new Vuex.Store({
         occurrence_key: null,
         occurrences_keys: [],
         facets_selection: {
+            'eventYear': [],
+            'year': [],
             'scientificName': [],
             'acceptedScientificName': [],
             'kingdom': [],
@@ -46,7 +48,6 @@ export default new Vuex.Store({
             'citation': [],
             'author': [],
             'date': [],
-            'year': [],
             'journal': [],
             'publisher': [],
             'volume': [],   
@@ -60,6 +61,8 @@ export default new Vuex.Store({
             'hasRelationWithStatus': []
         },
         facets_visibility: {
+            'eventYear': false,
+            'year': false,
             'scientificName': false,
             'acceptedScientificName': false,
             'kingdom': false,
@@ -85,7 +88,6 @@ export default new Vuex.Store({
             'citation': false,
             'author': false,
             'date': false,
-            'year': false,
             'journal': false,
             'publisher': false,
             'volume': false,   
@@ -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'},
@@ -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'},
@@ -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},
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 552ee86..0569e54 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -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);
                         });