sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implement pagination for emoji files from remote packs

Browse source
This commit is contained in:
Angelina Filippova 2020-08-17 00:40:42 +03:00
parent 462ca3bf4b
commit f3c28930ea
4 changed files with 97 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/store/modules/emojiPacks.js
View file

@ -20,25 +20,29 @@ import Vue from 'vue'
const emojiPacks = {
state: {
activeTab: '',
currentFilesPage: 1,
currentPage: 1,
currentLocalFilesPage: 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) => {
state.currentFilesPage = page
SET_LOCAL_FILES_PAGE: (state, 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) => {
state.currentPage = page
SET_LOCAL_PAGE: (state, 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) {
dispatch('FetchSinglePack', { name: packName, page: state.currentFilesPage - 1 })
if (Object.keys(updatedPackFiles).length === 0 && state.currentLocalFilesPage > 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_FILES_COUNT', files_count)
commit('SET_FILES_PAGE', page)
commit('SET_LOCAL_PACK_FILES', { name, files })
commit('SET_LOCAL_FILES_COUNT', files_count)
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)

16
src/views/emojiPacks/components/LocalEmojiPack.vue
View file

@ -100,10 +100,10 @@ export default {
},
computed: {
currentFilesPage() {
return this.$store.state.emojiPacks.currentFilesPage
return this.$store.state.emojiPacks.currentLocalFilesPage
},
currentPage() {
return this.$store.state.emojiPacks.currentPage
currentLocalPacksPage() {
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) {
this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage - 1)
if (Object.keys(updatedPacks).length === 0 && this.currentLocalPacksPage > 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 })

37
src/views/emojiPacks/components/RemoteEmojiPack.vue
View file

@ -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() {
return this.$store.state.emojiPacks.currentPage
currentFilesPage() {
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;
}

12
src/views/emojiPacks/index.vue
View file

@ -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() {
return this.$store.state.emojiPacks.currentPage
currentLocalPacksPage() {
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
}