...
 
Commits (7)
......@@ -68,10 +68,10 @@ export async function downloadFrom(host, instance, packName, as, token) {
})
}
export async function fetchPack(packName, host, token) {
export async function fetchPack(packName, page, pageSize, host, token) {
return await request({
baseURL: baseName(host),
url: `/api/pleroma/emoji/packs/${packName}`,
url: `/api/pleroma/emoji/packs/${packName}?page=${page}&page_size=${pageSize}`,
method: 'get',
headers: authHeaders(token)
})
......
......@@ -19,17 +19,26 @@ import Vue from 'vue'
const emojiPacks = {
state: {
activeCollapseItems: [],
activeTab: '',
currentFilesPage: 1,
currentPage: 1,
filesPageSize: 30,
localPackFilesCount: 0,
localPacks: {},
localPacksCount: 0,
pageSize: 20,
pageSize: 50,
remoteInstance: '',
remotePacks: {}
},
mutations: {
SET_ACTIVE_COLLAPSE_ITEMS: (state, items) => {
state.activeCollapseItems = items
SET_ACTIVE_TAB: (state, tab) => {
state.activeTab = tab
},
SET_FILES_COUNT: (state, count) => {
state.localPackFilesCount = count
},
SET_FILES_PAGE: (state, page) => {
state.currentFilesPage = page
},
SET_LOCAL_PACKS: (state, packs) => {
state.localPacks = packs
......@@ -80,10 +89,12 @@ const emojiPacks = {
commit('UPDATE_LOCAL_PACK_FILES', { name: packName, files: result.data })
},
async DeleteEmojiFile({ commit, getters }, { packName, shortcode }) {
let result
async DeleteEmojiFile({ commit, dispatch, getters, state }, { packName, shortcode }) {
const { [shortcode]: value, ...updatedPackFiles } = state.localPacks[packName].files
commit('UPDATE_LOCAL_PACK_FILES', { name: packName, files: updatedPackFiles })
try {
result = await deleteEmojiFile(packName, shortcode, getters.authHost, getters.token)
await deleteEmojiFile(packName, shortcode, getters.authHost, getters.token)
} catch (_e) {
return
}
......@@ -93,7 +104,7 @@ const emojiPacks = {
duration: 5 * 1000
})
commit('UPDATE_LOCAL_PACK_FILES', { name: packName, files: result.data })
dispatch('FetchSinglePack', { name: packName, page: state.currentFilesPage })
},
async CreatePack({ getters }, { name }) {
await createPack(getters.authHost, getters.token, name)
......@@ -124,9 +135,12 @@ const emojiPacks = {
commit('SET_LOCAL_PACKS_COUNT', count)
commit('SET_PAGE', page)
},
async FetchSinglePack({ getters, commit }, name) {
const { data } = await fetchPack(name, getters.authHost, getters.token)
commit('SET_PACK_FILES', { name, files: data.files })
async FetchSinglePack({ 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)
},
async ImportFromFS({ getters }) {
const result = await importFromFS(getters.authHost, getters.token)
......@@ -165,8 +179,8 @@ const emojiPacks = {
commit('UPDATE_LOCAL_PACK_PACK', { name: packName, pack: result.data })
}
},
SetActiveCollapseItems({ commit }, activeItems) {
commit('SET_ACTIVE_COLLAPSE_ITEMS', activeItems)
SetActiveTab({ commit }, activeTab) {
commit('SET_ACTIVE_TAB', activeTab)
},
async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)
......@@ -177,10 +191,19 @@ const emojiPacks = {
SetRemoteInstance({ commit }, instance) {
commit('SET_REMOTE_INSTANCE', instance)
},
async UpdateEmojiFile({ commit, getters }, { packName, shortcode, newShortcode, newFilename, force }) {
let result
async UpdateEmojiFile({ commit, dispatch, getters, state }, { packName, shortcode, newShortcode, newFilename, force }) {
const updatedPackFiles = Object.keys(state.localPacks[packName].files).reduce((acc, el) => {
if (el === shortcode) {
acc[newShortcode] = newFilename
} else {
acc[el] = state.localPacks[packName].files[el]
}
return acc
}, {})
commit('UPDATE_LOCAL_PACK_FILES', { name: packName, files: updatedPackFiles })
try {
result = await updateEmojiFile(packName, shortcode, newShortcode, newFilename, force, getters.authHost, getters.token)
await updateEmojiFile(packName, shortcode, newShortcode, newFilename, force, getters.authHost, getters.token)
} catch (_e) {
return
}
......@@ -190,7 +213,7 @@ const emojiPacks = {
duration: 5 * 1000
})
commit('UPDATE_LOCAL_PACK_FILES', { name: packName, files: result.data })
dispatch('FetchSinglePack', { name: packName, page: state.currentFilesPage })
},
async UpdateLocalPackVal({ commit }, args) {
commit('UPDATE_LOCAL_PACK_VAL', args)
......
......@@ -43,9 +43,9 @@
<new-emoji-uploader :pack-name="name"/>
</el-collapse-item>
<el-collapse-item :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
<div v-if="pack.files && sortedFiles.length > 0">
<div v-if="pack.files && Object.keys(pack.files).length > 0">
<single-emoji-editor
v-for="[shortcode, file] in sortedFiles"
v-for="(file, shortcode) in pack.files"
:key="shortcode"
:host="host"
:pack-name="name"
......@@ -54,6 +54,16 @@
:is-local="isLocal" />
</div>
<span v-else class="expl">{{ $t('emoji.emptyPack') }}</span>
<div class="files-pagination">
<el-pagination
:total="localPackFilesCount"
:current-page="currentFilesPage"
:page-size="pageSize"
hide-on-single-page
layout="prev, pager, next"
@current-change="handleFilesPageChange"
/>
</div>
</el-collapse-item>
</el-collapse>
</el-collapse-item>
......@@ -89,6 +99,9 @@ export default {
}
},
computed: {
currentFilesPage() {
return this.$store.state.emojiPacks.currentFilesPage
},
currentPage() {
return this.$store.state.emojiPacks.currentPage
},
......@@ -107,9 +120,11 @@ export default {
return '155px'
}
},
sortedFiles() {
return Object.keys(this.pack.files).sort((a, b) => a.localeCompare(b))
.map(key => [key, this.pack.files[key]])
localPackFilesCount() {
return this.$store.state.emojiPacks.localPackFilesCount
},
pageSize() {
return this.$store.state.emojiPacks.filesPageSize
},
share: {
get() { return this.pack.pack['share-files'] },
......@@ -169,6 +184,9 @@ export default {
}
},
methods: {
collapse() {
this.showPackContent = []
},
deletePack() {
this.$confirm('This will delete the pack, are you sure?', 'Warning', {
confirmButtonText: 'Yes, delete the pack',
......@@ -182,9 +200,12 @@ export default {
},
handleChange(openTabs, name) {
if (openTabs.includes('manageEmoji')) {
this.$store.dispatch('FetchSinglePack', name)
this.$store.dispatch('FetchSinglePack', { name, page: 1 })
}
},
handleFilesPageChange(page) {
this.$store.dispatch('FetchSinglePack', { name: this.name, page })
},
savePackMetadata() {
this.$store.dispatch('SavePackMetadata', { packName: this.name })
}
......@@ -232,6 +253,10 @@ export default {
margin-bottom: 10px;
}
}
.files-pagination {
margin: 25px 0;
text-align: center;
}
.has-background .el-collapse-item__header {
background: #f6f6f6;
}
......
......@@ -34,15 +34,18 @@
</el-form-item>
</el-form>
<el-collapse v-model="showPackContent" class="contents-collapse">
<el-collapse-item v-if="pack.files.length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
<single-emoji-editor
v-for="[shortcode, file] in pack.files"
:key="shortcode"
:host="host"
:pack-name="name"
:shortcode="shortcode"
:file="file"
:is-local="isLocal" />
<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
v-for="(file, shortcode) in pack.files"
:key="shortcode"
:host="host"
:pack-name="name"
:shortcode="shortcode"
:file="file"
:is-local="isLocal" />
</div>
<span v-else class="expl">{{ $t('emoji.emptyPack') }}</span>
</el-collapse-item>
<el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
<p>
......@@ -114,7 +117,7 @@ export default {
}
},
loadRemotePack() {
return this.$store.state.emojiPacks.activeCollapseItems.includes(this.name)
return this.$store.state.emojiPacks.activeTab === this.name
},
remoteInstanceAddress() {
return this.$store.state.emojiPacks.remoteInstance
......
......@@ -103,7 +103,7 @@ export default {
return this.$store.state.emojiPacks.localPacks
},
remoteInstance() {
return new URL(this.$store.state.emojiPacks.remoteInstance).host
return this.$store.state.emojiPacks.remoteInstance
}
},
methods: {
......
......@@ -32,8 +32,8 @@
</div>
</el-form-item>
<el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
<el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" @change="setActiveCollapseItems">
<local-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
<el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" accordion @change="setActiveTab">
<local-emoji-pack ref="localEmojiPack" :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
</el-collapse>
</el-form-item>
</el-form>
......@@ -65,8 +65,8 @@
</div>
</el-form-item>
<el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
<el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" @change="setActiveCollapseItems">
<remote-emoji-pack :name="name" :pack="sortPack(pack)" :host="$store.getters.authHost" :is-local="false" />
<el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" accordion @change="setActiveTab">
<remote-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
</el-collapse>
</el-form-item>
</el-form>
......@@ -184,9 +184,9 @@ export default {
message: i18n.t('emoji.reloaded')
})
},
setActiveCollapseItems(activeItems) {
const items = Array.isArray(activeItems) ? activeItems : [activeItems]
this.$store.dispatch('SetActiveCollapseItems', items)
setActiveTab(activeTab) {
this.$refs.localEmojiPack.forEach(el => el.collapse())
this.$store.dispatch('SetActiveTab', activeTab)
}
}
}
......