Implement pagination for emoji files from remote packs

src/store/modules/emojiPacks.js

@@ -20,25 +20,29 @@ import Vue from 'vue'
 const emojiPacks = {
   state: {
     activeTab: '',
-    currentFilesPage: 1,
+    currentLocalFilesPage: 1,
-    currentPage: 1,
+    currentLocalPacksPage: 1,
+    currentRemoteFilesPage: 1,
+    currentRemotePacksPage: 1,
     filesPageSize: 30,
     localPackFilesCount: 0,
     localPacks: {},
     localPacksCount: 0,
     pageSize: 50,
     remoteInstance: '',
-    remotePacks: {}
+    remotePackFilesCount: 0,
+    remotePacks: {},
+    remotePacksCount: 0
   },
   mutations: {
     SET_ACTIVE_TAB: (state, tab) => {
       state.activeTab = tab
     },
-    SET_FILES_COUNT: (state, count) => {
+    SET_LOCAL_FILES_COUNT: (state, count) => {
       state.localPackFilesCount = count
     },
-    SET_FILES_PAGE: (state, page) => {
+    SET_LOCAL_FILES_PAGE: (state, page) => {
-      state.currentFilesPage = page
+      state.currentLocalFilesPage = page
     },
     SET_LOCAL_PACKS: (state, packs) => {
       state.localPacks = packs
@@ -46,15 +50,27 @@ const emojiPacks = {
     SET_LOCAL_PACKS_COUNT: (state, count) => {
       state.localPacksCount = count
     },
-    SET_PACK_FILES: (state, { name, files }) => {
+    SET_LOCAL_PACK_FILES: (state, { name, files }) => {
       state.localPacks = { ...state.localPacks, [name]: { ...state.localPacks[name], files }}
     },
-    SET_PAGE: (state, page) => {
+    SET_LOCAL_PAGE: (state, page) => {
-      state.currentPage = page
+      state.currentLocalPacksPage = page
+    },
+    SET_REMOTE_FILES_COUNT: (state, count) => {
+      state.remotePackFilesCount = count
+    },
+    SET_REMOTE_FILES_PAGE: (state, page) => {
+      state.currentRemoteFilesPage = page
     },
     SET_REMOTE_INSTANCE: (state, name) => {
       state.remoteInstance = name
     },
+    SET_REMOTE_PACKS_COUNT: (state, count) => {
+      state.remotePacksCount = count
+    },
+    SET_REMOTE_PACK_FILES: (state, { name, files }) => {
+      state.remotePacks = { ...state.remotePacks, [name]: { ...state.remotePacks[name], files }}
+    },
     SET_REMOTE_PACKS: (state, packs) => {
       state.remotePacks = packs
     },
@@ -103,10 +119,10 @@ const emojiPacks = {
         type: 'success',
         duration: 5 * 1000
       })
-      if (Object.keys(updatedPackFiles).length === 0 && state.currentFilesPage > 1) {
+      if (Object.keys(updatedPackFiles).length === 0 && state.currentLocalFilesPage > 1) {
-        dispatch('FetchSinglePack', { name: packName, page: state.currentFilesPage - 1 })
+        dispatch('FetchLocalSinglePack', { name: packName, page: state.currentLocalFilesPage - 1 })
       } else {
-        dispatch('FetchSinglePack', { name: packName, page: state.currentFilesPage })
+        dispatch('FetchLocalSinglePack', { name: packName, page: state.currentLocalFilesPage })
       }
     },
     async CreatePack({ getters }, { name }) {
@@ -136,14 +152,21 @@ const emojiPacks = {
       }, {})
       commit('SET_LOCAL_PACKS', updatedPacks)
       commit('SET_LOCAL_PACKS_COUNT', count)
-      commit('SET_PAGE', page)
+      commit('SET_LOCAL_PAGE', page)
     },
-    async FetchSinglePack({ getters, commit, state }, { name, page }) {
+    async FetchLocalSinglePack({ getters, commit, state }, { name, page }) {
       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_LOCAL_PACK_FILES', { name, files })
-      commit('SET_FILES_COUNT', files_count)
+      commit('SET_LOCAL_FILES_COUNT', files_count)
-      commit('SET_FILES_PAGE', page)
+      commit('SET_LOCAL_FILES_PAGE', page)
+    },
+    async FetchRemoteSinglePack({ getters, commit, state }, { name, page }) {
+      const { data } = await fetchPack(name, page, state.filesPageSize, getters.authHost, getters.token)
+      const { files, files_count } = data
+      commit('SET_REMOTE_PACK_FILES', { name, files })
+      commit('SET_REMOTE_FILES_COUNT', files_count)
+      commit('SET_REMOTE_FILES_PAGE', page)
     },
     async ImportFromFS({ getters }) {
       const result = await importFromFS(getters.authHost, getters.token)
@@ -187,9 +210,16 @@ const emojiPacks = {
     },
     async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
       const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)
+      const { packs, count } = data
+      const updatedPacks = Object.keys(packs).reduce((acc, packName) => {
+        const { files, ...pack } = packs[packName]
+        acc[packName] = pack
+        return acc
+      }, {})
 
       commit('SET_REMOTE_INSTANCE', remoteInstance)
-      commit('SET_REMOTE_PACKS', data.packs)
+      commit('SET_REMOTE_PACKS', updatedPacks)
+      commit('SET_REMOTE_PACKS_COUNT', count)
     },
     SetRemoteInstance({ commit }, instance) {
       commit('SET_REMOTE_INSTANCE', instance)
@@ -216,7 +246,7 @@ const emojiPacks = {
         duration: 5 * 1000
       })
 
-      dispatch('FetchSinglePack', { name: packName, page: state.currentFilesPage })
+      dispatch('FetchLocalSinglePack', { name: packName, page: state.currentLocalFilesPage })
     },
     async UpdateLocalPackVal({ commit }, args) {
       commit('UPDATE_LOCAL_PACK_VAL', args)

src/views/emojiPacks/components/LocalEmojiPack.vue

@@ -100,10 +100,10 @@ export default {
   },
   computed: {
     currentFilesPage() {
-      return this.$store.state.emojiPacks.currentFilesPage
+      return this.$store.state.emojiPacks.currentLocalFilesPage
     },
-    currentPage() {
+    currentLocalPacksPage() {
-      return this.$store.state.emojiPacks.currentPage
+      return this.$store.state.emojiPacks.currentLocalPacksPage
     },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -197,21 +197,21 @@ export default {
           .then(() => this.$store.dispatch('ReloadEmoji'))
           .then(() => {
             const { [this.name]: value, ...updatedPacks } = this.$store.state.emojiPacks.localPacks
-            if (Object.keys(updatedPacks).length === 0 && this.currentPage > 1) {
+            if (Object.keys(updatedPacks).length === 0 && this.currentLocalPacksPage > 1) {
-              this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage - 1)
+              this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage - 1)
             } else {
-              this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage)
+              this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
             }
           })
       }).catch(() => {})
     },
     handleChange(openTabs, name) {
       if (openTabs.includes('manageEmoji')) {
-        this.$store.dispatch('FetchSinglePack', { name, page: 1 })
+        this.$store.dispatch('FetchLocalSinglePack', { name, page: 1 })
       }
     },
     handleFilesPageChange(page) {
-      this.$store.dispatch('FetchSinglePack', { name: this.name, page })
+      this.$store.dispatch('FetchLocalSinglePack', { name: this.name, page })
     },
     savePackMetadata() {
       this.$store.dispatch('SavePackMetadata', { packName: this.name })

src/views/emojiPacks/components/RemoteEmojiPack.vue

@@ -33,7 +33,7 @@
           </el-link>
         </el-form-item>
       </el-form>
-      <el-collapse v-model="showPackContent" class="contents-collapse">
+      <el-collapse v-model="showPackContent" class="contents-collapse" @change="handleChange($event, name)">
         <el-collapse-item :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
           <div v-if="pack.files && Object.keys(pack.files).length > 0">
             <single-emoji-editor
@@ -46,6 +46,16 @@
               :is-local="isLocal" />
           </div>
           <span v-else class="expl">{{ $t('emoji.emptyPack') }}</span>
+          <div class="files-pagination">
+            <el-pagination
+              :total="remotePackFilesCount"
+              :current-page="currentFilesPage"
+              :page-size="pageSize"
+              hide-on-single-page
+              layout="prev, pager, next"
+              @current-change="handleFilesPageChange"
+            />
+          </div>
         </el-collapse-item>
         <el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
           <p>
@@ -95,8 +105,11 @@ export default {
     }
   },
   computed: {
-    currentPage() {
+    currentFilesPage() {
-      return this.$store.state.emojiPacks.currentPage
+      return this.$store.state.emojiPacks.currentRemoteFilesPage
+    },
+    currentRemotePacksPage() {
+      return this.$store.state.emojiPacks.currentRemotePacksPage
     },
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
@@ -119,9 +132,15 @@ export default {
     loadRemotePack() {
       return this.$store.state.emojiPacks.activeTab === this.name
     },
+    pageSize() {
+      return this.$store.state.emojiPacks.filesPageSize
+    },
     remoteInstanceAddress() {
       return this.$store.state.emojiPacks.remoteInstance
     },
+    remotePackFilesCount() {
+      return this.$store.state.emojiPacks.remotePackFilesCount
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {
@@ -186,6 +205,14 @@ export default {
         { instanceAddress: this.remoteInstanceAddress, packName: this.name, as: this.downloadSharedAs }
       ).then(() => this.$store.dispatch('ReloadEmoji'))
         .then(() => this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage))
+    },
+    handleChange(openTabs, name) {
+      if (openTabs.includes('manageEmoji')) {
+        this.$store.dispatch('FetchRemoteSinglePack', { name, page: 1 })
+      }
+    },
+    handleFilesPageChange(page) {
+      this.$store.dispatch('FetchRemoteSinglePack', { name: this.name, page })
     }
   }
 }
@@ -231,6 +258,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

@@ -40,7 +40,7 @@
         <div class="pagination">
           <el-pagination
             :total="localPacksCount"
-            :current-page="currentPage"
+            :current-page="currentLocalPacksPage"
             :page-size="pageSize"
             hide-on-single-page
             layout="prev, pager, next"
@@ -93,8 +93,8 @@ export default {
     }
   },
   computed: {
-    currentPage() {
+    currentLocalPacksPage() {
-      return this.$store.state.emojiPacks.currentPage
+      return this.$store.state.emojiPacks.currentLocalPacksPage
     },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -143,7 +143,7 @@ export default {
         .then(() => {
           this.newPackName = ''
 
-          this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage)
+          this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
           this.$store.dispatch('ReloadEmoji')
         })
     },
@@ -153,13 +153,13 @@ export default {
     importFromFS() {
       this.$store.dispatch('ImportFromFS')
         .then(() => {
-          this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage)
+          this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
           this.$store.dispatch('ReloadEmoji')
         })
     },
     refreshLocalPacks() {
       try {
-        this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage)
+        this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
       } catch (e) {
         return
       }