Implement pagination for files in a local emoji pack

src/api/emojiPacks.js

@@ -71,7 +71,7 @@ export async function downloadFrom(host, instance, packName, as, token) {
 export async function fetchPack(packName, page, pageSize, host, token) {
   return await request({
     baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/${packName}&page=${page}&page_size=${pageSize}`,
+    url: `/api/pleroma/emoji/packs/${packName}?page=${page}&page_size=${pageSize}`,
     method: 'get',
     headers: authHeaders(token)
   })

src/store/modules/emojiPacks.js

@@ -20,10 +20,13 @@ import Vue from 'vue'
 const emojiPacks = {
   state: {
     activeCollapseItems: [],
+    currentFilesPage: 1,
     currentPage: 1,
+    filesPageSize: 30,
+    localPackFilesCount: 0,
     localPacks: {},
     localPacksCount: 0,
-    pageSize: 20,
+    pageSize: 50,
     remoteInstance: '',
     remotePacks: {}
   },
@@ -32,10 +35,10 @@ const emojiPacks = {
       state.activeCollapseItems = items
     },
     SET_FILES_COUNT: (state, count) => {
-      state.localPacksCount = count
+      state.localPackFilesCount = count
     },
     SET_FILES_PAGE: (state, page) => {
-      state.currentPage = page
+      state.currentFilesPage = page
     },
     SET_LOCAL_PACKS: (state, packs) => {
       state.localPacks = packs
@@ -131,7 +134,7 @@ const emojiPacks = {
       commit('SET_PAGE', page)
     },
     async FetchSinglePack({ getters, commit, state }, { name, page }) {
-      const { data } = await fetchPack(name, page, state.pageSize, getters.authHost, getters.token)
+      const { data } = await fetchPack(name, page, state.filesPageSize, getters.authHost, getters.token)
       const { files, files_count } = data
       commit('SET_PACK_FILES', { name, files })
       commit('SET_FILES_COUNT', files_count)

src/views/emojiPacks/components/LocalEmojiPack.vue

@@ -54,6 +54,16 @@
             :is-local="isLocal" />
         </div>
         <span v-else class="expl">{{ $t('emoji.emptyPack') }}</span>
+        <div class="files-pagination">
+          <el-pagination
+            :total="localPackFilesCount"
+            :current-page="currentFilesPage"
+            :page-size="pageSize"
+            hide-on-single-page
+            layout="prev, pager, next"
+            @current-change="handleFilesPageChange"
+          />
+        </div>
       </el-collapse-item>
     </el-collapse>
   </el-collapse-item>
@@ -89,6 +99,9 @@ export default {
     }
   },
   computed: {
+    currentFilesPage() {
+      return this.$store.state.emojiPacks.currentFilesPage
+    },
     currentPage() {
       return this.$store.state.emojiPacks.currentPage
     },
@@ -107,6 +120,12 @@ export default {
         return '155px'
       }
     },
+    localPackFilesCount() {
+      return this.$store.state.emojiPacks.localPackFilesCount
+    },
+    pageSize() {
+      return this.$store.state.emojiPacks.filesPageSize
+    },
     sortedFiles() {
       return Object.keys(this.pack.files).sort((a, b) => a.localeCompare(b))
         .map(key => [key, this.pack.files[key]])
@@ -182,9 +201,12 @@ export default {
     },
     handleChange(openTabs, name) {
       if (openTabs.includes('manageEmoji')) {
-        this.$store.dispatch('FetchSinglePack', name)
+        this.$store.dispatch('FetchSinglePack', { name, page: 1 })
       }
     },
+    handleFilesPageChange(page) {
+      this.$store.dispatch('FetchSinglePack', { name: this.name, page })
+    },
     savePackMetadata() {
       this.$store.dispatch('SavePackMetadata', { packName: this.name })
     }
@@ -232,6 +254,10 @@ export default {
     margin-bottom: 10px;
   }
 }
+.files-pagination {
+  margin: 25px 0;
+  text-align: center;
+}
 .has-background .el-collapse-item__header {
   background: #f6f6f6;
 }

src/views/emojiPacks/index.vue

@@ -32,7 +32,7 @@
             </div>
           </el-form-item>
           <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
-            <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" @change="setActiveCollapseItems">
+            <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" accordion @change="setActiveCollapseItems">
               <local-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
             </el-collapse>
           </el-form-item>