chat message pagination

This commit is contained in:
Mary Kate 2020-09-10 16:34:58 -05:00 committed by Angelina Filippova
parent 0153bb98e2
commit d843d44d13
4 changed files with 47 additions and 13 deletions

View file

@ -23,10 +23,13 @@ export async function fetchChat(id, authHost, token) {
})
}
export async function fetchChatMessages(id, authHost, token) {
export async function fetchChatMessages(id, max_id, authHost, token) {
console.log(max_id)
let url
max_id !== null ? url = `/api/pleroma/admin/chats/${id}/messages?max_id=${max_id}` : url = `/api/pleroma/admin/chats/${id}/messages`
return await request({
baseURL: baseName(authHost),
url: `/api/pleroma/admin/chats/${id}/messages`,
url: url,
method: 'get',
headers: authHeaders(token)
})

View file

@ -324,6 +324,7 @@ export default {
pending: 'Pending',
noStatuses: 'No statuses to show',
noChats: 'No chats to show',
noMessages: 'No messages to show',
openAccountInInstance: 'Open account in instance',
securitySettings: {
email: 'Email',

View file

@ -4,17 +4,29 @@ const chat = {
state: {
fetchedChat: {},
fetchedChatMessages: {},
loading: false
loading: false,
buttonLoading: false,
allLoaded: false,
max_id: null
},
mutations: {
SET_LOADING: (state, status) => {
state.loading = status
SET_LOADING: (state, chat) => {
state.loading = chat
},
SET_ALL_LOADED: (state, chat) => {
state.allLoaded = chat
},
SET_BUTTON_LOADING: (state, chat) => {
state.buttonLoading = chat
},
SET_CHAT: (state, chat) => {
state.fetchedChat = chat
},
SET_CHAT_MESSAGES: (state, chatMessages) => {
state.fetchedChatMessages = chatMessages
},
CHANGE_MAX_ID: (state, max_id) => {
state.max_id = max_id
}
},
actions: {
@ -25,15 +37,18 @@ const chat = {
commit('SET_CHAT', chat.data)
commit('SET_LOADING', false)
},
async FetchChatMessages({ commit, dispatch, getters, state }, id) {
async FetchChatMessages({ commit, dispatch, getters, state }, id, max_id) {
commit('SET_LOADING', true)
const chat = await fetchChatMessages(id, getters.authHost, getters.token)
const chat = await fetchChatMessages(id, state.max_id, getters.authHost, getters.token)
commit('SET_CHAT_MESSAGES', chat.data)
commit('SET_LOADING', false)
},
async DeleteMessage({ commit, dispatch, getters, state }, params) {
await deleteChatMessage(params.chat_id, params.message_id, getters.authHost, getters.token)
dispatch('FetchChatMessages', params.chat_id)
},
HandlePageChange({ commit }, max_id) {
commit('CHANGE_MAX_ID', max_id)
}
}
}

View file

@ -40,7 +40,11 @@
<el-timeline-item v-for="message in chatMessages" :key="message.id">
<chat-message :message="message" :author="getAuthor(message.account_id)"/>
</el-timeline-item>
<p v-if="chatMessages.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
<p v-if="chatMessages.length === 0" class="no-messages">{{ $t('userProfile.noMessages') }}</p>
<div v-if="chatMessages.length === 20" class="statuses-pagination">
<el-button v-if="!allLoaded" :loading="buttonLoading" @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
<el-button v-else icon="el-icon-check" circle/>
</div>
</el-timeline>
</div>
@ -54,11 +58,6 @@ import RebootButton from '@/components/RebootButton'
export default {
name: 'ChatShow',
components: { RebootButton, ChatMessage },
data() {
return {
}
},
computed: {
isDesktop() {
return this.$store.state.app.device === 'desktop'
@ -69,6 +68,12 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
allLoaded() {
return this.$store.state.chat.allLoaded
},
buttonLoading() {
return this.$store.state.chat.buttonLoading
},
loading() {
return this.$store.state.chat.loading
},
@ -80,6 +85,7 @@ export default {
}
},
beforeMount: function() {
this.$store.dispatch('HandlePageChange', null)
this.$store.dispatch('NeedReboot')
this.$store.dispatch('GetNodeInfo')
this.$store.dispatch('FetchChat', this.$route.params.id)
@ -93,6 +99,11 @@ export default {
const sender = this.chat.sender
const receiver = this.chat.receiver
return account_id === sender.id ? sender : receiver
},
handleLoadMore() {
const max_id = this.chatMessages.pop().id
this.$store.dispatch('HandlePageChange', max_id)
this.$store.dispatch('FetchChatMessages', this.$route.params.id)
}
}
}
@ -152,6 +163,10 @@ export default {
.chats {
padding: 0 20px 0 0;
}
.statuses-pagination {
padding: 15px 0;
text-align: center;
}
@media only screen and (min-width: 1824px) {