Merge pull request #72 from bitem-heg-geneve/plazi_issue_106

Plazi issue 106
bitem-heg-geneve · Jan 17, 2023 · afe4262 · afe4262
2 parents 3d1d3d5 + ac809c9
commit afe4262
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/OccurrencesElement.vue b/src/components/OccurrencesElement.vue
@@ -34,6 +34,14 @@ import shared_fields from '@/components/shared_fields.js'
             type: Object,
             required: true
         },
+        page: {
+          type: Number,
+          required: true
+        },
+        index: {
+          type: Number,
+          required: true
+        },
       },
       data() {
         return {
@@ -61,10 +69,12 @@ import shared_fields from '@/components/shared_fields.js'
         },
       },
       methods:{
-        ...mapActions(['updateOccurrences', 'updateOccurrencesSelection', 'updateStep']),
+        ...mapActions(['updateOccurrences', 'updateOccurrencesSelection', 'updateStep', 'updatePage', 'updatePositionDisplay']),
         displaySpecimen(){
             this.updateOccurrencesSelection(this.occurrence)
             this.updateStep(3)
+            this.updatePage(this.page)
+            this.updatePositionDisplay("#"+this.page+"_"+this.index)
             this.$router.push({
               name: this.$router.currentRoute.name,
               query: {

diff --git a/src/components/OccurrencesList.vue b/src/components/OccurrencesList.vue
@@ -45,9 +45,9 @@
                                     <th style="width:5%"></th>
                                 </tr>
 
-                                <OccurrencesElement
-                                    v-for="occurrence in processed_occurrences.slice(item_min, item_max)"
-                                    :key="occurrence.gbifID" :occurrence="occurrence" />
+                                <OccurrencesElement :id="current_page+'_'+index"
+                                    v-for="(occurrence, index) in processed_occurrences.slice(item_min, item_max)"
+                                    :key="occurrence.gbifID" :occurrence="occurrence" :page="current_page" :index="index" />
 
                             </table>
 
@@ -101,10 +101,10 @@ export default {
     },
     data() {
         return {
+            current_page: 1,
             occurrences: [],
             status: [],
             in_progress: false,
-            current_page: 1,
             per_page_init: 30,
             per_page: 30,
             show_size: false,
@@ -124,7 +124,7 @@ export default {
         };
     },
     computed: {
-        ...mapState(['institution_selection', 'datasets_selection', 'occurrence_keys', 'format_selection', 'user_selection', 'filters', 'fields', 'format_selection', 'urls_parameters', 'step', 'theme_color']),
+        ...mapState(['page_selection', 'position_display',  'institution_selection', 'datasets_selection', 'occurrence_keys', 'format_selection', 'user_selection', 'filters', 'fields', 'format_selection', 'urls_parameters', 'step', 'theme_color']),
         cssVars() {
             return {
                 '--color': this.theme_color.main,
@@ -181,7 +181,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions(['updateOccurrencesFacet', 'updateOccurrencesSort', 'updateOccurrencesSelection', 'updateInitMcDateFilter', 'updateStep']),
+        ...mapActions(['updateOccurrencesFacet', 'updateOccurrencesSort', 'updateOccurrencesSelection', 'updateInitMcDateFilter', 'updateStep','updatePage']),
         searchOccurrencesAPI(reload) {
             if (this.institution_selection.key || this.occurrence_keys) {
                 this.in_progress = true
@@ -196,8 +196,10 @@ export default {
                         var occ = this.$backend.processOccurrences(response.data, this.format_selection);
                         occ = this.processFacets(occ)
                         this.occurrences = occ;
+                        this.current_page = this.page_selection
                         this.in_progress = false
                         this.goToTop()
+                        this.$router.push({ name: 'HomePage', hash: this.position_display, query: this.$route.query}).catch(()=>{});
                         if (!reload && this.urls_parameters.occurrence != null) {
                             for (let index in occ) {
                                 if (occ[index].key == this.urls_parameters.occurrence) {

diff --git a/src/store/index.js b/src/store/index.js
@@ -30,6 +30,8 @@ export default new Vuex.Store({
     occurrence_keys: null,
     format_selection: null,
     matching: null,
+    page_selection: 1,
+    position_display: "",
     fields: {
         matcit_specimen: {
             format_occurrence: {
@@ -170,6 +172,12 @@ export default new Vuex.Store({
     UPDATE_STEP(state, value) {
         state.step = value
     },
+    UPDATE_PAGE(state, value) {
+        state.page_selection = value
+    },
+    UPDATE_POSITION_DISPLAY(state, value) {
+        state.position_display = value
+    },
     UPDATE_USER(state, value) {
         state.user = value
         window.sessionStorage.setItem('user', JSON.stringify(value));
@@ -225,6 +233,12 @@ export default new Vuex.Store({
     updateStep(context, value){
         context.commit('UPDATE_STEP', value)
     },
+    updatePage(context, value){
+        context.commit('UPDATE_PAGE', value)
+    },
+    updatePositionDisplay(context, value){
+        context.commit('UPDATE_POSITION_DISPLAY', value)
+    },
     updateOrcidUser(context, user) {
         /* an example of user is {name: "John Doe", orcid: "", orcidToken: ""} */
         context.commit('UPDATE_USER', user)