Add pagination to local emoji packs

src/api/emojiPacks.js

@@ -86,11 +86,12 @@ export async function importFromFS(host, token) {
   })
 }
 
-export async function listPacks(host) {
+export async function listPacks(page, pageSize, host, token) {
   return await request({
     baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/`,
+    url: `/api/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`,
-    method: 'get'
+    method: 'get',
+    headers: authHeaders(token)
   })
 }
 

src/store/modules/emojiPacks.js

@@ -20,7 +20,10 @@ import Vue from 'vue'
 const emojiPacks = {
   state: {
     activeCollapseItems: [],
+    currentPage: 1,
     localPacks: {},
+    localPacksCount: 0,
+    pageSize: 20,
     remoteInstance: '',
     remotePacks: {}
   },
@@ -31,6 +34,9 @@ const emojiPacks = {
     SET_LOCAL_PACKS: (state, packs) => {
       state.localPacks = packs
     },
+    SET_LOCAL_PACKS_COUNT: (state, count) => {
+      state.localPacksCount = count
+    },
     SET_PACK_FILES: (state, { name, files }) => {
       state.localPacks = { ...state.localPacks, [name]: { ...state.localPacks[name], files }}
     },
@@ -103,7 +109,18 @@ const emojiPacks = {
         })
       }
     },
-    async FetchPack({ getters, commit }, name) {
+    async FetchLocalEmojiPacks({ commit, getters, state }, page) {
+      const { data } = await listPacks(page, state.pageSize, getters.authHost, getters.token)
+      const { packs, count } = data
+      const updatedPacks = Object.keys(packs).reduce((acc, packName) => {
+        const { files, ...pack } = packs[packName]
+        acc[packName] = pack
+        return acc
+      }, {})
+      commit('SET_LOCAL_PACKS', updatedPacks)
+      commit('SET_LOCAL_PACKS_COUNT', count)
+    },
+    async FetchSinglePack({ getters, commit }, name) {
       const { data } = await fetchPack(name, getters.authHost, getters.token)
       commit('SET_PACK_FILES', { name, files: data.files })
     },
@@ -147,15 +164,6 @@ const emojiPacks = {
     SetActiveCollapseItems({ commit }, activeItems) {
       commit('SET_ACTIVE_COLLAPSE_ITEMS', activeItems)
     },
-    async SetLocalEmojiPacks({ commit, getters }) {
-      const { data } = await listPacks(getters.authHost)
-      const packs = Object.keys(data).reduce((acc, packName) => {
-        const { files, ...pack } = data[packName]
-        acc[packName] = pack
-        return acc
-      }, {})
-      commit('SET_LOCAL_PACKS', packs)
-    },
     async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
       const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)
 

src/views/emojiPacks/index.vue

@@ -18,7 +18,7 @@
       <el-tab-pane :label="$t('emoji.localPacks')" name="local">
         <el-form :label-width="labelWidth" class="emoji-packs-form">
           <el-form-item :label="$t('emoji.localPacks')">
-            <el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
+            <el-button @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
           </el-form-item>
           <el-form-item :label="$t('emoji.createLocalPack')">
             <div class="create-pack">
@@ -37,6 +37,16 @@
             </el-collapse>
           </el-form-item>
         </el-form>
+        <div class="pagination">
+          <el-pagination
+            :total="localPacksCount"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            hide-on-single-page
+            layout="prev, pager, next"
+            @current-change="handlePageChange"
+          />
+        </div>
       </el-tab-pane>
       <el-tab-pane :label="$t('emoji.remotePacks')" name="remote">
         <el-form :label-width="labelWidth" class="emoji-packs-form">
@@ -83,6 +93,9 @@ export default {
     }
   },
   computed: {
+    currentPage() {
+      return this.$store.state.emojiPacks.currentPage
+    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -95,12 +108,18 @@ export default {
       } else if (this.isTablet) {
         return '180px'
       } else {
-        return '240px'
+        return '200px'
       }
     },
     localPacks() {
       return this.$store.state.emojiPacks.localPacks
     },
+    localPacksCount() {
+      return this.$store.state.emojiPacks.localPacksCount
+    },
+    pageSize() {
+      return this.$store.state.emojiPacks.pageSize
+    },
     remoteInstanceAddress: {
       get() {
         return this.$store.state.emojiPacks.remoteInstance
@@ -124,20 +143,23 @@ export default {
         .then(() => {
           this.newPackName = ''
 
-          this.$store.dispatch('SetLocalEmojiPacks')
+          this.$store.dispatch('FetchLocalEmojiPacks')
           this.$store.dispatch('ReloadEmoji')
         })
     },
+    handlePageChange(page) {
+      this.$store.dispatch('FetchLocalEmojiPacks', page)
+    },
     importFromFS() {
       this.$store.dispatch('ImportFromFS')
         .then(() => {
-          this.$store.dispatch('SetLocalEmojiPacks')
+          this.$store.dispatch('FetchLocalEmojiPacks')
           this.$store.dispatch('ReloadEmoji')
         })
     },
     refreshLocalPacks() {
       try {
-        this.$store.dispatch('SetLocalEmojiPacks')
+        this.$store.dispatch('FetchLocalEmojiPacks', 1)
       } catch (e) {
         return
       }
@@ -188,7 +210,7 @@ export default {
   display: flex;
 }
 .emoji-packs-form {
-  margin: 0 30px;
+  margin-top: 15px;
 }
 .emoji-packs-header {
   display: flex;
@@ -213,6 +235,10 @@ h1 {
   border: 1px solid #eee;
   margin-bottom: 22px;
 }
+.pagination {
+  margin: 25px 0;
+  text-align: center;
+}
 .reboot-button {
   padding: 10px;
   margin: 0;

src/views/users/index.vue

@@ -95,7 +95,7 @@
         :total="usersCount"
         :current-page="currentPage"
         :page-size="pageSize"
-        background
+        hide-on-single-page
         layout="prev, pager, next"
         @current-change="handlePageChange"
       />