forked from AkkomaGang/admin-fe
Add pagination component for remote emoji packs
This commit is contained in:
parent
cd74fa18a2
commit
efbd75834f
|
@ -92,10 +92,10 @@ export async function listPacks(page, pageSize, host, token) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function listRemotePacks(host, token, instance) {
|
export async function listRemotePacks(instance, page, pageSize, host, token) {
|
||||||
return await request({
|
return await request({
|
||||||
baseURL: baseName(host),
|
baseURL: baseName(host),
|
||||||
url: `/api/pleroma/emoji/packs/remote?url=${baseName(instance)}`,
|
url: `/api/pleroma/emoji/packs/remote?url=${baseName(instance)}&page=${page}&page_size=${pageSize}`,
|
||||||
method: 'get',
|
method: 'get',
|
||||||
headers: authHeaders(token)
|
headers: authHeaders(token)
|
||||||
})
|
})
|
||||||
|
|
|
@ -208,8 +208,8 @@ const emojiPacks = {
|
||||||
SetActiveTab({ commit }, activeTab) {
|
SetActiveTab({ commit }, activeTab) {
|
||||||
commit('SET_ACTIVE_TAB', activeTab)
|
commit('SET_ACTIVE_TAB', activeTab)
|
||||||
},
|
},
|
||||||
async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
|
async SetRemoteEmojiPacks({ commit, getters, state }, { page, remoteInstance }) {
|
||||||
const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)
|
const { data } = await listRemotePacks(remoteInstance, page, state.pageSize, getters.authHost, getters.token)
|
||||||
const { packs, count } = data
|
const { packs, count } = data
|
||||||
const updatedPacks = Object.keys(packs).reduce((acc, packName) => {
|
const updatedPacks = Object.keys(packs).reduce((acc, packName) => {
|
||||||
const { files, ...pack } = packs[packName]
|
const { files, ...pack } = packs[packName]
|
||||||
|
|
|
@ -45,7 +45,7 @@
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
hide-on-single-page
|
hide-on-single-page
|
||||||
layout="prev, pager, next"
|
layout="prev, pager, next"
|
||||||
@current-change="handlePageChange"
|
@current-change="handleLocalPageChange"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
@ -71,6 +71,16 @@
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination
|
||||||
|
:total="remotePacksCount"
|
||||||
|
:current-page="currentRemotePacksPage"
|
||||||
|
:page-size="pageSize"
|
||||||
|
hide-on-single-page
|
||||||
|
layout="prev, pager, next"
|
||||||
|
@current-change="handleRemotePageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
@ -97,6 +107,9 @@ export default {
|
||||||
currentLocalPacksPage() {
|
currentLocalPacksPage() {
|
||||||
return this.$store.state.emojiPacks.currentLocalPacksPage
|
return this.$store.state.emojiPacks.currentLocalPacksPage
|
||||||
},
|
},
|
||||||
|
currentRemotePacksPage() {
|
||||||
|
return this.$store.state.emojiPacks.currentRemotePacksPage
|
||||||
|
},
|
||||||
isMobile() {
|
isMobile() {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
|
@ -131,6 +144,9 @@ export default {
|
||||||
},
|
},
|
||||||
remotePacks() {
|
remotePacks() {
|
||||||
return this.$store.state.emojiPacks.remotePacks
|
return this.$store.state.emojiPacks.remotePacks
|
||||||
|
},
|
||||||
|
remotePacksCount() {
|
||||||
|
return this.$store.state.emojiPacks.remotePacksCount
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -148,9 +164,12 @@ export default {
|
||||||
this.$store.dispatch('ReloadEmoji')
|
this.$store.dispatch('ReloadEmoji')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handlePageChange(page) {
|
handleLocalPageChange(page) {
|
||||||
this.$store.dispatch('FetchLocalEmojiPacks', page)
|
this.$store.dispatch('FetchLocalEmojiPacks', page)
|
||||||
},
|
},
|
||||||
|
handleRemotePageChange(page) {
|
||||||
|
this.$store.dispatch('SetRemoteEmojiPacks', { page, remoteInstance: this.remoteInstanceAddress })
|
||||||
|
},
|
||||||
importFromFS() {
|
importFromFS() {
|
||||||
this.$store.dispatch('ImportFromFS')
|
this.$store.dispatch('ImportFromFS')
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
@ -171,7 +190,7 @@ export default {
|
||||||
},
|
},
|
||||||
async refreshRemotePacks() {
|
async refreshRemotePacks() {
|
||||||
this.fullscreenLoading = true
|
this.fullscreenLoading = true
|
||||||
await this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress })
|
await this.$store.dispatch('SetRemoteEmojiPacks', { page: 1, remoteInstance: this.remoteInstanceAddress })
|
||||||
this.fullscreenLoading = false
|
this.fullscreenLoading = false
|
||||||
},
|
},
|
||||||
async reloadEmoji() {
|
async reloadEmoji() {
|
||||||
|
|
Loading…
Reference in a new issue