Implement pack pagination, more localization fixes

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -1,4 +1,4 @@
-import { clone } from 'lodash'
+import { clone, assign } from 'lodash'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import StringSetting from '../helpers/string_setting.vue'
 import Checkbox from 'components/checkbox/checkbox.vue'
@@ -203,46 +203,68 @@ const EmojiTab = {
         this.sortPackFiles(this.packName)
       })
     },
-    refreshPackList () {
-      return this.$store.state.api.backendInteractor.listEmojiPacks()
+
+    loadPacksPaginated (listFunction) {
+      const pageSize = 25
+      const allPacks = {}
+
+      return listFunction({ instance: this.remotePackInstance, page: 1, pageSize: 0 })
         .then(data => data.json())
-        .then(packData => {
-          if (packData.error !== undefined) {
-            this.displayError(packData.error)
-            return
+        .then(data => {
+          if (data.error !== undefined) { return Promise.reject(data.error) }
+
+          let resultingPromise = Promise.resolve({})
+          for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
+            resultingPromise = resultingPromise.then(() => listFunction({ instance: this.remotePackInstance, page: i, pageSize })
+            ).then(data => data.json()).then(pageData => {
+              if (pageData.error !== undefined) { return Promise.reject(pageData.error) }
+
+              assign(allPacks, pageData.packs)
+            })
           }
 
-          this.knownLocalPacks = packData.packs
+          return resultingPromise
+        })
+        .then(finished => allPacks)
+        .catch(data => {
+          this.displayError(data)
+        })
+    },
+
+    refreshPackList () {
+      this.loadPacksPaginated(this.$store.state.api.backendInteractor.listEmojiPacks)
+        .then(allPacks => {
+          this.knownLocalPacks = allPacks
           for (const name of Object.keys(this.knownLocalPacks)) {
             this.sortPackFiles(name)
           }
         })
     },
     listRemotePacks () {
-      this.$store.state.api.backendInteractor.listRemoteEmojiPacks({ instance: this.remotePackInstance })
-        .then(data => data.json())
-        .then(packData => {
-          if (packData.error !== undefined) {
-            this.displayError(packData.error)
-            return
-          }
-
+      this.loadPacksPaginated(this.$store.state.api.backendInteractor.listRemoteEmojiPacks)
+        .then(allPacks => {
           let inst = this.remotePackInstance
           if (!inst.startsWith('http')) { inst = 'https://' + inst }
           const instUrl = new URL(inst)
           inst = instUrl.host
 
-          for (const packName in packData.packs) {
-            packData.packs[packName].remote = {
+          for (const packName in allPacks) {
+            allPacks[packName].remote = {
               baseName: packName,
               instance: instUrl.origin
             }
           }
 
-          this.knownRemotePacks[inst] = packData.packs
+          this.knownRemotePacks[inst] = allPacks
+          for (const pack in this.knownRemotePacks[inst]) {
+            this.sortPackFiles(`${pack}@${inst}`)
+          }
 
           this.$refs.remotePackPopover.hidePopover()
         })
+        .catch(data => {
+          this.displayError(data)
+        })
     },
     downloadRemotePack () {
       if (this.remotePackDownloadAs.trim() === '') {

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -195,7 +195,7 @@
                   :confirm-text="$t('status.delete_confirm_accept_button')"
                   @cancelled="deleteModalVisible = false"
                   @accepted="deleteEmojiPack" >
-                  {{ $t('admin_dash.emoji.delete_confirm', packName) }}
+                  {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
                 </ConfirmModal>
               </button>
 
@@ -282,7 +282,7 @@
                   :confirm-text="$t('status.delete_confirm_accept_button')"
                   @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
                   @accepted="deleteEmoji(shortcode)" >
-                  {{ $t('admin_dash.emoji.delete_confirm', shortcode) }}
+                  {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
                 </ConfirmModal>
               </div>
             </template>

src/services/api/api.service.js

@@ -1812,17 +1812,17 @@ const createEmojiPack = ({ name }) => {
   return fetch(PLEROMA_EMOJI_PACK_URL(name), { method: 'POST' })
 }
 
-const listEmojiPacks = () => {
-  return fetch(PLEROMA_EMOJI_PACKS_URL(1, 25))
+const listEmojiPacks = ({ page, pageSize }) => {
+  return fetch(PLEROMA_EMOJI_PACKS_URL(page, pageSize))
 }
 
-const listRemoteEmojiPacks = ({ instance }) => {
+const listRemoteEmojiPacks = ({ instance, page, pageSize }) => {
   if (!instance.startsWith('http')) {
     instance = 'https://' + instance
   }
 
   return fetch(
-    PLEROMA_EMOJI_PACKS_LS_REMOTE_URL(instance, 1, 25),
+    PLEROMA_EMOJI_PACKS_LS_REMOTE_URL(instance, page, pageSize),
     {
       headers: { 'Content-Type': 'application/json' }
     }