pagination

experra_forum/src/components/ForumSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-list class="shadow-box shadow-1" bordered>
+  <q-list style="background-color: white" class="shadow-box shadow-1" bordered>
     <q-item class="row" style="background-color: #f8f8fc;">
       <q-item-section style="display: flex; flex-basis: 50%;">
         <q-item-label class="q-pt-sm text-h5">
@@ -51,20 +51,16 @@
         <p v-if="!topicsMode"> тема: "{{item.lastMessage.topic}}" </p>
       </q-item-section>
     </q-item>
-    <q-item style="background-color: white">
+    <q-item class="float-right" style="background-color: white">
-      <q-btn v-if="pageN != 0" @click="pageN = 0" flat color="primary" label="<<" />
+      <q-btn :disabled="pageN == 0" @click="pageN--" flat color="primary" label="<" />
-      <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" label="<" />
+      <q-btn v-if="pageN - 5 > 0" flat color="primary" @click="pageN=0" label="1" />
-      <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" :label="pageN" />
+      <q-btn disabled v-if="pageN - 5 > 0" flat color="primary" label="..." />
-      <q-btn outline color="primary" :label="pageN + 1" />
+      <q-btn v-for="i in getPreviousPages()" :key="i" @click="pageN=i" flat color="primary" :label="i + 1" />
-      <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" :label="pageN + 2" />
+      <q-btn style="border-radius: 0px;" color="primary" :label="pageN + 1" />
-      <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" label=">" />
+      <q-btn v-for="i in getNextPages()" :key="i" @click="pageN=i" flat color="primary" :label="i + 1" />
-      <q-btn v-if="pageN + 1 != pages.length" @click="pageN = pages.length - 1" flat color="primary" label=">>" />
+      <q-btn disabled v-if="pages.length - pageN > 5" flat color="primary" label="..." />
-
+      <q-btn v-if="pages.length - pageN > 5" flat color="primary" @click="pageN=pages.length - 1" :label="pages.length" />
-      <!-- <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" label="<" />
+      <q-btn :disabled="pageN + 1 == pages.length" @click="pageN++" flat color="primary" label=">" />
-      <q-btn v-for="i in (5-pageN)" v-if="pageN - i > 0" @click="pageN=i" flat color="primary" :label="pageN" />
-      <q-btn outline color="primary" :label="pageN + 1" />
-      <q-btn v-for="i in (5-pageN)" v-if="pageN - i > 0" @click="pageN=i" flat color="primary" :label="pageN" />
-      <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" label=">" /> -->
     </q-item>
   </q-list>
 </template>
@@ -127,6 +123,25 @@ export default {
       } else {
         this.$router.push({ path: '/topics/1' })
       }
+    },
+    getPreviousPages () {
+      const res = []
+      for (let i = 0; i < this.pageN; i++) {
+        if (this.pageN - i < 6) {
+          res.push(i)
+        }
+      }
+      return res
+    },
+    getNextPages () {
+      const res = []
+      const prevLen = this.getPreviousPages().length
+      for (let i = 1; i < 10 - prevLen; i++) {
+        if (this.pageN + i < this.pages.length) {
+          res.push(this.pageN + i)
+        }
+      }
+      return res
     }
   }
 }

experra_forum/src/pages/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md row justify-center full-height">
-    <ForumSection style="max-width: 905px" class="q-mt-lg q-mb-md col" title="Семейства методик" description="Какое-то описание" :maxPerPage="3" :items="sections"/>
+    <ForumSection style="max-width: 905px" class="q-mt-lg q-mb-md col" title="Семейства методик" description="Какое-то описание" :maxPerPage="2" :items="sections"/>
   </div>
 </template>
 
@@ -19,7 +19,42 @@ export default {
         { name: 'Семейство 2', icon: 'warning', nMessages: 10, nTopics: 10 },
         { name: 'Семейство 5', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
         { name: 'Семейство 14', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
-        { name: 'Семейство -1', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 }
+        { name: 'Семейство -1', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 11', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 22', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 53', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 144', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство -15', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 12', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 22', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 52', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 142', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство -12', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 13', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 23', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 53', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 143', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство -13', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 01', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 02', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 05', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 014', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 0-1', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 011', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 022', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 053', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 0144', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 0-15', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 012', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 022', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 052', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 0142', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 0-12', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 013', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 023', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 053', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 0143', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 0-13', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 }
       ]
     }
   }