Implement pack pagination, more localization fixes

This commit is contained in:
Ekaterina Vaartis 2024-01-07 16:41:17 +03:00
parent 4eeb3e5f78
commit 872dffe51b
3 changed files with 47 additions and 25 deletions

View File

@ -1,4 +1,4 @@
import { clone } from 'lodash' import { clone, assign } from 'lodash'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import StringSetting from '../helpers/string_setting.vue' import StringSetting from '../helpers/string_setting.vue'
import Checkbox from 'components/checkbox/checkbox.vue' import Checkbox from 'components/checkbox/checkbox.vue'
@ -203,46 +203,68 @@ const EmojiTab = {
this.sortPackFiles(this.packName) 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(data => data.json())
.then(packData => { .then(data => {
if (packData.error !== undefined) { if (data.error !== undefined) { return Promise.reject(data.error) }
this.displayError(packData.error)
return 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)) { for (const name of Object.keys(this.knownLocalPacks)) {
this.sortPackFiles(name) this.sortPackFiles(name)
} }
}) })
}, },
listRemotePacks () { listRemotePacks () {
this.$store.state.api.backendInteractor.listRemoteEmojiPacks({ instance: this.remotePackInstance }) this.loadPacksPaginated(this.$store.state.api.backendInteractor.listRemoteEmojiPacks)
.then(data => data.json()) .then(allPacks => {
.then(packData => {
if (packData.error !== undefined) {
this.displayError(packData.error)
return
}
let inst = this.remotePackInstance let inst = this.remotePackInstance
if (!inst.startsWith('http')) { inst = 'https://' + inst } if (!inst.startsWith('http')) { inst = 'https://' + inst }
const instUrl = new URL(inst) const instUrl = new URL(inst)
inst = instUrl.host inst = instUrl.host
for (const packName in packData.packs) { for (const packName in allPacks) {
packData.packs[packName].remote = { allPacks[packName].remote = {
baseName: packName, baseName: packName,
instance: instUrl.origin 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() this.$refs.remotePackPopover.hidePopover()
}) })
.catch(data => {
this.displayError(data)
})
}, },
downloadRemotePack () { downloadRemotePack () {
if (this.remotePackDownloadAs.trim() === '') { if (this.remotePackDownloadAs.trim() === '') {

View File

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

View File

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