Merge branch 'redmine-issues/21098' into 'develop'

REDMINE_ISSUE-21098 | La recherche textuelle n'est pas conservé au changement de page

See merge request geocontrib/geocontrib-frontend!788

src/components/Account/UserProjectsList.vue

@@ -107,8 +107,7 @@
       <Pagination
         v-if="count"
         :nb-pages="Math.ceil(count/10)"
-        :on-page-change="SET_CURRENT_PAGE"
-        @change-page="changePage"
+        @page-update="changePage"
       />
     </div>
   </div>

src/components/Pagination.vue

@@ -7,9 +7,8 @@
           :class="{ disabled: currentPage === 1 }"
         >
           <a
-            class="page-link"
-            :href="currentLocation"
-            @click="currentPage -= 1"
+            class="page-link pointer"
+            @click="changePage(currentPage - 1)"
           >
             <i
               class="ui icon big angle left"
@@ -28,8 +27,7 @@
             :class="{ active: currentPage === index }"
           >
             <a
-              class="page-link"
-              :href="currentLocation"
+              class="page-link pointer"
               @click="changePage(index)"
             >
               {{ index }}
@@ -47,8 +45,7 @@
             :class="{ active: currentPage === index }"
           >
             <a
-              class="page-link"
-              :href="currentLocation"
+              class="page-link pointer"
               @click="changePage(index)"
             >
               {{ index }}
@@ -60,9 +57,8 @@
           :class="{ disabled: currentPage === nbPages }"
         >
           <a
-            class="page-link"
-            :href="currentLocation"
-            @click="currentPage += 1"
+            class="page-link pointer"
+            @click="changePage(currentPage + 1)"
           >
             <i
               class="ui icon big angle right"
@@ -86,35 +82,12 @@ export default {
       type: Number,
       default: 1
     },
-
-    onPageChange: {
-      type: Function,
-      default: () => {
-        return () => 1;
-      }
-    }
-  },
-
-  data() {
-    return {
-      // TODO: Refactor by using native scroll to top instead of this
-      currentLocation: `${window.location.origin}${window.location.pathname}#`,
-    };
   },
 
   computed: {
     ...mapState('projects', ['currentPage']),
   },
 
-  watch: {
-    currentPage: function(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.onPageChange(newValue);
-        this.$emit('change-page', newValue);
-      }
-    }
-  },
-
   methods: {
     ...mapMutations('projects', [
       'SET_CURRENT_PAGE',
@@ -154,6 +127,10 @@ export default {
     changePage(pageNumber) {
       if (typeof pageNumber === 'number') {
         this.SET_CURRENT_PAGE(pageNumber);
+        // Scroll back to the first results on top of page
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+        // emit event for parent component to fetch new page data
+        this.$emit('page-update', pageNumber);
       }
     }
   }

src/components/Projects/DropdownMenuItem.vue

@@ -15,7 +15,6 @@
     :clear-on-select="false"
     :preserve-search="true"
     :multiple="multiple"
-    :loading="loading"
     :disabled="loading"
     @select="select"
     @remove="remove"
@@ -177,4 +176,7 @@ export default {
 #filters-container .multiple .multiselect__option--selected:not(:hover) {
   background-color: #e8e8e8 !important;
 }
+#filters-container .multiselect--disabled .multiselect__select {
+  background: 0, 0 !important;
+}
 </style>
\ No newline at end of file

src/views/Projects/ProjectsList.vue

@@ -82,8 +82,7 @@
       <Pagination
         v-if="count"
         :nb-pages="nbPages"
-        :on-page-change="SET_CURRENT_PAGE"
-        @change-page="changePage"
+        @page-update="changePage"
       />
     </div>
   </div>