remove pagination from map

src/components/feature/FeatureListTable.vue

@@ -170,8 +170,8 @@
         </tr>
       </tbody>
     </table>
-    <!-- v-if="nbPages.length > 1" -->
-<!--     <div
+    <!-- v-if="pageNumbers.length > 1" -->
+    <div
       id="table-features_info"
       class="dataTables_info"
       role="status"
@@ -182,7 +182,7 @@
       sur {{ featuresCount }} éléments
     </div>
     <div
-      v-if="nbPages.length > 1"
+      v-if="pageNumbers.length > 1"
       id="table-features_paginate"
       class="dataTables_paginate paging_simple_numbers"
     >
@@ -200,7 +200,7 @@
       >
       <span>
         <a
-          v-for="pageNumber in nbPages"
+          v-for="pageNumber in pageNumbers"
           :key="'page' + pageNumber"
           @click="toPage(pageNumber)"
           :class="[
@@ -218,7 +218,7 @@
         id="table-features_next"
         :class="[
           'paginate_button next',
-          { disabled: pagination.currentPage === nbPages.length },
+          { disabled: pagination.currentPage === pageNumbers.length },
         ]"
         aria-controls="table-features"
         data-dt-idx="7"
@@ -226,7 +226,7 @@
         @click="toNextPage"
         >Suivant</a
       >
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -236,11 +236,11 @@ import { mapState, mapGetters } from "vuex";
 export default {
   name: "FeatureListTable",
 
-  props: ["geojsonFeatures", "checkedFeatures", "featuresCount"],
+  props: ["geojsonFeatures", "checkedFeatures", "featuresCount", "pagination", "pageNumbers"],
 
   data() {
     return {
-/*       pagination: {
+            /* pagination: {
         currentPage: 1,
         pagesize: 15,
         start: 0,
@@ -305,13 +305,14 @@ export default {
       return sortedFeatures;
     },
 
-/*     nbPages() {
-      let N = Math.ceil(this.featuresCount / this.pagination.pagesize);
-      const arr = [...Array(N).keys()].map(function (x) {
-        ++x;
-        return x;
+/*     pageNumbers() {
+      const totalPages = Math.ceil(
+        this.featuresCount / this.pagination.pagesize
+      );
+      return [...Array(totalPages).keys()].map((pageNumb) => {
+        ++pageNumb;
+        return pageNumb;
       });
-      return arr;
     }, */
 
     checked: {
@@ -322,12 +323,12 @@ export default {
         this.$store.commit("feature/UPDATE_CHECKED_FEATURES", newChecked);
       },
     },
-/* 
+    
     displayedPageEnd() {
       return this.featuresCount <= this.pagination.end
         ? this.featuresCount
         : this.pagination.end;
-    }, */
+    },
   },
 
   methods: {
@@ -358,14 +359,48 @@ export default {
       }
     },
 
+    toPage(pageNumber) {
+      console.log(pageNumber);
+      this.$emit("update:page", pageNumber);
+      /* 
+      const toAddOrRemove =
+        (pageNumber - this.pagination.currentPage) * this.pagination.pagesize;
+      this.pagination.start += toAddOrRemove;
+      this.pagination.end += toAddOrRemove;
+      this.pagination.currentPage = pageNumber;
+      this.updateFeatures(); */
+    },
+
+    toPreviousPage() {
+      this.$emit("update:page", "previous");
+      /* if (this.pagination.currentPage !== 1) {
+        if (this.pagination.start > 0) {
+          this.pagination.start -= this.pagination.pagesize;
+          this.pagination.end -= this.pagination.pagesize;
+          this.pagination.currentPage -= 1;
+        }
+        this.updateFeatures(this.previous);
+      } */
+    },
 
+    toNextPage() {
+      this.$emit("update:page", "next");
+      /* if (this.pagination.currentPage !== this.pageNumbers.length) {
+        if (this.pagination.end < this.featuresCount) {
+          this.pagination.start += this.pagination.pagesize;
+          this.pagination.end += this.pagination.pagesize;
+          this.pagination.currentPage += 1;
+        }
+        this.updateFeatures(this.next);
+      } */
+    },
   },
 };
 </script>
 
 <style scoped>
 /* datatables */
-/* .dataTables_wrapper {
+.dataTables_wrapper {
   position: relative;
   clear: both;
 }
@@ -442,7 +477,7 @@ export default {
   border: 1px solid transparent;
   background: transparent;
   box-shadow: none;
-} */
+}
 
 i.icon.sort:not(.down):not(.up) {
   color: rgb(220, 220, 220);

src/views/feature/Feature_list.vue

@@ -141,75 +141,17 @@
       <div id="map" ref="map"></div>
       <SidebarLayers v-if="basemaps && map" />
     </div>
-      <!-- v-on:update:page="changePage" -->
+    <!-- | -->
     <FeatureListTable
       v-show="!showMap"
+      v-on:update:page="handlePageChange"
       :geojsonFeatures="geojsonFeatures"
       :checkedFeatures.sync="checkedFeatures"
       :featuresCount="featuresCount"
+      :pagination="pagination"
+      :pageNumbers="pageNumbers"
     />
 
-    <!-- PAGINATION START -->
-    <div data-tab="list" class="dataTables_wrapper no-footer">
-      <div
-        id="table-features_info"
-        class="dataTables_info"
-        role="status"
-        aria-live="polite"
-      >
-        Affichage de l'élément {{ pagination.start + 1 }} à
-        {{ displayedPageEnd }}
-        sur {{ featuresCount }} éléments
-      </div>
-      <div
-        v-if="nbPages.length > 1"
-        id="table-features_paginate"
-        class="dataTables_paginate paging_simple_numbers"
-      >
-        <a
-          @click="toPreviousPage"
-          id="table-features_previous"
-          :class="[
-            'paginate_button previous',
-            { disabled: pagination.currentPage === 1 },
-          ]"
-          aria-controls="table-features"
-          data-dt-idx="0"
-          tabindex="0"
-          >Précédent</a
-        >
-        <span>
-          <a
-            v-for="pageNumber in nbPages"
-            :key="'page' + pageNumber"
-            @click="toPage(pageNumber)"
-            :class="[
-              'paginate_button',
-              { current: pageNumber === pagination.currentPage },
-            ]"
-            aria-controls="table-features"
-            data-dt-idx="1"
-            tabindex="0"
-            >{{ pageNumber }}</a
-          >
-        </span>
-        <!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
-        <a
-          id="table-features_next"
-          :class="[
-            'paginate_button next',
-            { disabled: pagination.currentPage === nbPages.length },
-          ]"
-          aria-controls="table-features"
-          data-dt-idx="7"
-          tabindex="0"
-          @click="toNextPage"
-          >Suivant</a
-        >
-      </div>
-    </div>
-    <!-- PAGINATION END -->
-
     <!-- MODAL ALL DELETE FEATURE TYPE -->
     <div
       v-if="modalAllDeleteOpen"
@@ -342,20 +284,26 @@ export default {
       );
     },
 
-    nbPages() {
-      let N = Math.ceil(this.featuresCount / this.pagination.pagesize);
-      const arr = [...Array(N).keys()].map(function (x) {
-        ++x;
-        return x;
+    pageNumbers() {
+      const totalPages = Math.ceil(
+        this.featuresCount / this.pagination.pagesize
+      );
+      return [...Array(totalPages).keys()].map((pageNumb) => {
+        ++pageNumb;
+        return pageNumb;
       });
-      return arr;
     },
 
-    displayedPageEnd() {
+    /* displayedPageNumbers() {
+      return this.pageNumbers;
+      //return [...this.pageNumbers].splice(0, 4);
+    }, */
+
+    /* displayedPageEnd() {
       return this.featuresCount <= this.pagination.end
         ? this.featuresCount
         : this.pagination.end;
-    },
+    }, */
   },
 
   methods: {
@@ -453,19 +401,20 @@ export default {
       }, 1000);
     },
 
-/*     changePage(page) {
+    handlePageChange(page) {
+      console.log("handlePageChange", page, typeof page)
       if (page === "next") {
-        this.updateFeatures(this.next);
+        this.toNextPage();
       } else if (page === "previous") {
-        this.updateFeatures(this.previous);
-      } else if (typeof page === Number) {
+        this.toPreviousPage();
+      } else if (typeof page === "number") {
         //* update limit and offset
-        this.updateFeatures();
+        this.toPage(page);
       }
-    }, */
+    },
 
     toPage(pageNumber) {
-      console.log(pageNumber);
+      console.log("toPage", pageNumber);
       const toAddOrRemove =
         (pageNumber - this.pagination.currentPage) * this.pagination.pagesize;
       this.pagination.start += toAddOrRemove;
@@ -486,7 +435,7 @@ export default {
     },
 
     toNextPage() {
-      if (this.pagination.currentPage !== this.nbPages.length) {
+      if (this.pagination.currentPage !== this.pageNumbers.length) {
         if (this.pagination.end < this.featuresCount) {
           this.pagination.start += this.pagination.pagesize;
           this.pagination.end += this.pagination.pagesize;