pagination nav refactoring, only miss pages display in text

src/pages/Edition.vue

@@ -51,7 +51,6 @@
           :textid="textid"
           @onHoverLink="onHoverLink"
           @onLeaveLink="onLeaveLink"
-          @onNewPageBreaks="onNewPageBreaks"
         />
         <infinite-loading
           :identifier="textid"
@@ -61,37 +60,30 @@
     </div>
 
     <template #nav>
-      <EdToc id="toc" :toc="toc" :loadedtextsuuids="textsuuids" @onClickTocItem="onClickTocItem" />
-      <div v-if="pages.length" id="page-nav">
-        <!-- <select class="" name="page-nav" v-model="page_selected" placeholder="Pages">
-          <option value="" disabled selected>Pages</option>
-          <option v-for="(page, index) in pages" :key="index" :value="page">{{ page }}</option>
-        </select> -->
-        <v-select
-          id="page-nav-select"
-          type="select"
-          placeholder="Aller à la page ..."
-          append-to-body
-          :calculate-position="dropDownMenuPos"
-          :options="pages"
-          :clearable="false"
-          :value="page_selected"
-          @input="onPageSelected"
-        />
-      </div>
+      <EdToc
+        id="toc"
+        :toc="toc"
+        :loadedtextsuuids="textsuuids"
+        @onClickTocItem="onClickTocItem"
+      />
+      <EdPagination
+        v-if="pagination"
+        id="page-nav"
+        :pagination="pagination"
+        @onClickPaginationItem="onClickPaginationItem"
+      />
     </template>
   </MainContentLayout>
 </template>
 
 <script>
 
-import { createPopper } from '@popperjs/core'
-
 import { REST } from 'api/rest-axios'
 import { mapState, mapActions } from 'vuex'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
 import EdText from '../components/Content/EdText'
 import EdToc from '../components/Content/EdToc'
+import EdPagination from '../components/Content/EdPagination'
 
 export default {
   name: 'Edition',
@@ -104,7 +96,8 @@ export default {
   components: {
     MainContentLayout,
     EdText,
-    EdToc
+    EdToc,
+    EdPagination
   },
   data: () => ({
     toc: null,
@@ -126,9 +119,7 @@ export default {
     inifinite_load_distance: 10,
     reftoscrollto: null,
     //
-    pages: [],
-    pagesOptions: [],
-    page_selected: ''
+    pagination: null
   }),
   computed: {
     ...mapState({
@@ -193,10 +184,28 @@ export default {
           }
         } else {
           console.warn('Bad edition uuid', this.$route.params.id, this.$route)
-          this.$router.replace({
-            name: 'notfound',
-            query: { fullpath: this.$route.path }
-          })
+          // this.$router.replace({
+          //   name: 'notfound',
+          //   query: { fullpath: this.$route.path }
+          // })
+        }
+      })
+      .catch((error) => {
+        console.warn('Issue with text toc', error)
+        Promise.reject(error)
+      })
+    // get the edition's pagination
+    REST.get(`${window.apipath}/texts/` + this.$route.params.id + `/pagination`, {})
+      .then(({ data }) => {
+        console.log('texts/pagination REST: data', data)
+        if (data.content && data.content !== 'vide') {
+          this.pagination = data.content
+        } else {
+          console.warn('Bad edition uuid', this.$route.params.id, this.$route)
+          // this.$router.replace({
+          //   name: 'notfound',
+          //   query: { fullpath: this.$route.path }
+          // })
         }
       })
       .catch((error) => {
@@ -336,71 +345,25 @@ export default {
         })
       }
     },
-    onNewPageBreaks (p) {
-      // console.log('onNewPageBreaks', p)
-      for (var i = 0; i < p.length; i++) {
-        if (this.pages.indexOf(p[i]) === -1) {
-          this.pages.push(p[i])
-        }
+    onClickPaginationItem (o) {
+      console.log('onClickPaginationItem', o)
+      if (this.textsuuids.indexOf(o.uuid) !== -1) {
+        // if already loaded, scroll to uuid
+        this.scrollToPage(o)
+      } else {
+        // if not already loaded, change route
+        this.$router.push({
+          name: `editiontext`,
+          params: {
+            id: this.editionid,
+            textid: o.uuid
+          }
+        })
       }
-      // reorder array
-      this.pages.sort((a, b) => a - b)
-      // this.pagesOptions = []
-      // for (var j = 0; j < this.pages.length; j++) {
-      //   this.pagesOptions.push({ code: this.pages[j], label: `page ${this.pages[j]}` })
-      // }
-    },
-    dropDownMenuPos (dropdownList, component, { width }) {
-      /**
-       * We need to explicitly define the dropdown width since
-       * it is usually inherited from the parent with CSS.
-       */
-      dropdownList.style.width = width
-
-      /**
-       * Here we position the dropdownList relative to the $refs.toggle Element.
-       *
-       * The 'offset' modifier aligns the dropdown so that the $refs.toggle and
-       * the dropdownList overlap by 1 pixel.
-       *
-       * The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
-       * wrapper so that we can set some styles for when the dropdown is placed
-       * above.
-       */
-      const popper = createPopper(component.$refs.toggle, dropdownList, {
-        placement: 'top',
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [0, -1]
-            }
-          },
-          {
-            name: 'toggleClass',
-            enabled: true,
-            phase: 'write',
-            fn ({ state }) {
-              component.$el.classList.toggle('drop-up', state.placement === 'top')
-            }
-          }]
-      })
-
-      /**
-       * To prevent memory leaks Popper needs to be destroyed.
-       * If you return function, it will be called just before dropdown is removed from DOM.
-       */
-      return () => popper.destroy()
-    },
-    onPageSelected (e) {
-      console.log('onPageSelected', e)
-      this.page_selected = e
-      this.scrollToPage(e)
-      // this.scrollToPage(e.code)
     },
     scrollToPage (p) {
       // console.log('scrollToPage', p)
-      this.reftoscrollto = `span[role="pageBreak"][data-num="${p}"]`
+      this.reftoscrollto = `span[role="pageBreak"][id="${p.code}"]`
     }
   }
 }