...
 
Commits (3)
......@@ -86,11 +86,12 @@ export async function importFromFS(host, token) {
})
}
export async function listPacks(host) {
export async function listPacks(page, pageSize, host, token) {
return await request({
baseURL: baseName(host),
url: `/api/pleroma/emoji/packs/`,
method: 'get'
url: `/api/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`,
method: 'get',
headers: authHeaders(token)
})
}
......
......@@ -20,7 +20,10 @@ import Vue from 'vue'
const emojiPacks = {
state: {
activeCollapseItems: [],
currentPage: 1,
localPacks: {},
localPacksCount: 0,
pageSize: 20,
remoteInstance: '',
remotePacks: {}
},
......@@ -31,9 +34,15 @@ const emojiPacks = {
SET_LOCAL_PACKS: (state, packs) => {
state.localPacks = packs
},
SET_LOCAL_PACKS_COUNT: (state, count) => {
state.localPacksCount = count
},
SET_PACK_FILES: (state, { name, files }) => {
state.localPacks = { ...state.localPacks, [name]: { ...state.localPacks[name], files }}
},
SET_PAGE: (state, page) => {
state.currentPage = page
},
SET_REMOTE_INSTANCE: (state, name) => {
state.remoteInstance = name
},
......@@ -103,7 +112,19 @@ const emojiPacks = {
})
}
},
async FetchPack({ getters, commit }, name) {
async FetchLocalEmojiPacks({ commit, getters, state }, page) {
const { data } = await listPacks(page, state.pageSize, getters.authHost, getters.token)
const { packs, count } = data
const updatedPacks = Object.keys(packs).reduce((acc, packName) => {
const { files, ...pack } = packs[packName]
acc[packName] = pack
return acc
}, {})
commit('SET_LOCAL_PACKS', updatedPacks)
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 })
},
......@@ -147,15 +168,6 @@ const emojiPacks = {
SetActiveCollapseItems({ commit }, activeItems) {
commit('SET_ACTIVE_COLLAPSE_ITEMS', activeItems)
},
async SetLocalEmojiPacks({ commit, getters }) {
const { data } = await listPacks(getters.authHost)
const packs = Object.keys(data).reduce((acc, packName) => {
const { files, ...pack } = data[packName]
acc[packName] = pack
return acc
}, {})
commit('SET_LOCAL_PACKS', packs)
},
async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)
......
......@@ -89,6 +89,9 @@ export default {
}
},
computed: {
currentPage() {
return this.$store.state.emojiPacks.currentPage
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
......@@ -174,12 +177,12 @@ export default {
}).then(() => {
this.$store.dispatch('DeletePack', { name: this.name })
.then(() => this.$store.dispatch('ReloadEmoji'))
.then(() => this.$store.dispatch('SetLocalEmojiPacks'))
.then(() => this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage))
}).catch(() => {})
},
handleChange(openTabs, name) {
if (openTabs.includes('manageEmoji')) {
this.$store.dispatch('FetchPack', name)
this.$store.dispatch('FetchSinglePack', name)
}
},
savePackMetadata() {
......
......@@ -92,6 +92,9 @@ export default {
}
},
computed: {
currentPage() {
return this.$store.state.emojiPacks.currentPage
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
......@@ -179,7 +182,7 @@ export default {
'DownloadFrom',
{ instanceAddress: this.remoteInstanceAddress, packName: this.name, as: this.downloadSharedAs }
).then(() => this.$store.dispatch('ReloadEmoji'))
.then(() => this.$store.dispatch('SetLocalEmojiPacks'))
.then(() => this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage))
}
}
}
......
......@@ -6,56 +6,72 @@
</div>
<div class="emoji-header-container">
<div class="emoji-packs-header-button-container">
<el-button type="primary" class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
<el-button class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
<el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" popper-class="import-pack-button">
<el-button type="primary" @click="importFromFS">
<el-button @click="importFromFS">
{{ $t('emoji.importPacks') }}
</el-button>
</el-tooltip>
</div>
</div>
<el-divider class="divider"/>
<el-form :label-width="labelWidth" class="emoji-packs-form">
<el-form-item :label="$t('emoji.localPacks')">
<el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
</el-form-item>
<el-form-item :label="$t('emoji.createLocalPack')">
<div class="create-pack">
<el-input v-model="newPackName" :placeholder="$t('users.name')" />
<el-button
:disabled="newPackName.trim() === ''"
class="create-pack-button"
@click="createLocalPack">
{{ $t('users.create') }}
</el-button>
</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>
</el-form-item>
<el-divider class="divider"/>
<el-form-item :label="$t('emoji.remotePacks')">
<div class="create-pack">
<el-input
v-model="remoteInstanceAddress"
:placeholder="$t('emoji.remoteInstanceAddress')" />
<el-button
v-loading.fullscreen.lock="fullscreenLoading"
:disabled="remoteInstanceAddress.trim() === ''"
class="create-pack-button"
@click="refreshRemotePacks">
{{ $t('emoji.refreshRemote') }}
</el-button>
<el-tabs v-model="activeTab" type="card" class="emoji-packs-tabs">
<el-tab-pane :label="$t('emoji.localPacks')" name="local">
<el-form :label-width="labelWidth" class="emoji-packs-form">
<el-form-item :label="$t('emoji.localPacks')">
<el-button @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
</el-form-item>
<el-form-item :label="$t('emoji.createLocalPack')">
<div class="create-pack">
<el-input v-model="newPackName" :placeholder="$t('users.name')" />
<el-button
:disabled="newPackName.trim() === ''"
class="create-pack-button"
@click="createLocalPack">
{{ $t('users.create') }}
</el-button>
</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>
</el-form-item>
</el-form>
<div class="pagination">
<el-pagination
:total="localPacksCount"
:current-page="currentPage"
:page-size="pageSize"
hide-on-single-page
layout="prev, pager, next"
@current-change="handlePageChange"
/>
</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>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane :label="$t('emoji.remotePacks')" name="remote">
<el-form :label-width="labelWidth" class="emoji-packs-form">
<el-form-item :label="$t('emoji.remotePacks')">
<div class="create-pack">
<el-input
v-model="remoteInstanceAddress"
:placeholder="$t('emoji.remoteInstanceAddress')" />
<el-button
v-loading.fullscreen.lock="fullscreenLoading"
:disabled="remoteInstanceAddress.trim() === ''"
class="create-pack-button"
@click="refreshRemotePacks">
{{ $t('emoji.refreshRemote') }}
</el-button>
</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>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</template>
......@@ -69,6 +85,7 @@ export default {
components: { LocalEmojiPack, RebootButton, RemoteEmojiPack },
data() {
return {
activeTab: 'local',
newPackName: '',
activeLocalPack: [],
activeRemotePack: [],
......@@ -76,6 +93,9 @@ export default {
}
},
computed: {
currentPage() {
return this.$store.state.emojiPacks.currentPage
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
......@@ -88,12 +108,18 @@ export default {
} else if (this.isTablet) {
return '180px'
} else {
return '240px'
return '200px'
}
},
localPacks() {
return this.$store.state.emojiPacks.localPacks
},
localPacksCount() {
return this.$store.state.emojiPacks.localPacksCount
},
pageSize() {
return this.$store.state.emojiPacks.pageSize
},
remoteInstanceAddress: {
get() {
return this.$store.state.emojiPacks.remoteInstance
......@@ -117,20 +143,23 @@ export default {
.then(() => {
this.newPackName = ''
this.$store.dispatch('SetLocalEmojiPacks')
this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage)
this.$store.dispatch('ReloadEmoji')
})
},
handlePageChange(page) {
this.$store.dispatch('FetchLocalEmojiPacks', page)
},
importFromFS() {
this.$store.dispatch('ImportFromFS')
.then(() => {
this.$store.dispatch('SetLocalEmojiPacks')
this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage)
this.$store.dispatch('ReloadEmoji')
})
},
refreshLocalPacks() {
try {
this.$store.dispatch('SetLocalEmojiPacks')
this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage)
} catch (e) {
return
}
......@@ -164,6 +193,13 @@ export default {
</script>
<style rel='stylesheet/scss' lang='scss'>
.create-pack {
display: flex;
justify-content: space-between
}
.create-pack-button {
margin-left: 10px;
}
.emoji-header-container {
display: flex;
align-items: center;
......@@ -173,15 +209,8 @@ export default {
.emoji-packs-header-button-container {
display: flex;
}
.create-pack {
display: flex;
justify-content: space-between
}
.create-pack-button {
margin-left: 10px;
}
.emoji-packs-form {
margin: 0 30px;
margin-top: 15px;
}
.emoji-packs-header {
display: flex;
......@@ -189,6 +218,9 @@ export default {
justify-content: space-between;
margin: 10px 15px 15px 15px;
}
.emoji-packs-tabs {
margin: 0 15px 15px 15px;
}
.import-pack-button {
margin-left: 10px;
width: 30%;
......@@ -203,6 +235,10 @@ h1 {
border: 1px solid #eee;
margin-bottom: 22px;
}
.pagination {
margin: 25px 0;
text-align: center;
}
.reboot-button {
padding: 10px;
margin: 0;
......
......@@ -95,7 +95,7 @@
:total="usersCount"
:current-page="currentPage"
:page-size="pageSize"
background
hide-on-single-page
layout="prev, pager, next"
@current-change="handlePageChange"
/>
......