diff --git a/src/pages/CscPageConversations.vue b/src/pages/CscPageConversations.vue index f37800df..2f7d8aed 100644 --- a/src/pages/CscPageConversations.vue +++ b/src/pages/CscPageConversations.vue @@ -43,12 +43,6 @@
-
- -
@@ -79,14 +73,11 @@ {{ noResultsMessage }}
- import platformMixin from 'src/mixins/platform' import { - mapGetters, - mapActions, + mapGetters, mapMutations, mapState } from 'vuex' import CscPageStickyTabs from 'components/CscPageStickyTabs' @@ -113,6 +103,7 @@ import CscListSpinner from 'components/CscListSpinner' import CscConversationItem from 'components/pages/Conversations/CscConversationItem' import CscConversationsFilter from 'components/pages/Conversations/CscConversationsFilter' import CscRemoveDialog from 'components/CscRemoveDialog' +import { mapWaitingActions } from 'vue-wait' export default { name: 'CscConversations', components: { @@ -169,20 +160,10 @@ export default { ]), ...mapGetters('conversations', [ 'items', - 'isNextPageRequesting', - 'downloadFaxState', - 'downloadVoiceMailState', - 'downloadFaxError', - 'downloadVoiceMailError', - 'itemsReloaded', - 'reloadItemsError', - 'toggleBlockedState', - 'lastToggledType', 'isNumberIncomingBlocked', 'isNumberOutgoingBlocked' ]), ...mapGetters('call', [ - 'callState', 'isCallEnabled' ]), pageStyle () { @@ -237,21 +218,27 @@ export default { }, async mounted () { this.topMargin = this.$refs.pageSticky.$el.offsetHeight - this.$store.commit('conversations/resetList') + this.resetList() await this.$store.dispatch('conversations/getBlockedNumbers') this.$refs.infiniteScroll.poll() }, methods: { - ...mapActions('conversations', [ - 'deleteVoicemail' + ...mapWaitingActions('conversations', { + nextPage: 'csc-conversations', + deleteVoicemail: 'csc-conversations', + toggleBlockIncoming: 'csc-conversations', + toggleBlockOutgoing: 'csc-conversations', + toggleBlockBoth: 'csc-conversations' + }), + ...mapMutations('conversations', [ + 'resetList' ]), - loadNextPage (index, done) { + async loadNextPage (index, done) { let type = this.selectedTab if (this.selectedTab === 'call-fax-voicemail') { type = null } - this.startLoader() - this.$store.dispatch('conversations/nextPage', { + await this.nextPage({ type: type, index: index, filter: this.filter, @@ -267,8 +254,10 @@ export default { }, forceTabReload (tabName) { this.selectedTab = tabName - this.startLoader() - this.$store.commit('conversations/resetList') + // Note: we have to set loading mark manually as a workaround that we cannot force infinitScroll to load data immediately + this.$wait.start('csc-conversations') + + this.resetList() this.$refs.infiniteScroll.reset() if (this.reachedLastPage) { this.$refs.infiniteScroll.resume() @@ -299,33 +288,37 @@ export default { format: voiceMail.format }) }, - toggleBlockIncoming (options) { - this.startLoader() - this.$store.commit('conversations/resetList') - this.$store.dispatch('conversations/toggleBlockIncoming', options).finally(() => { + async toggleBlockIncomingAction (options) { + this.resetList() + try { + await this.toggleBlockIncoming(options) + } finally { this.forceReload() - }) + } }, - toggleBlockOutgoing (options) { - this.startLoader() - this.$store.commit('conversations/resetList') - this.$store.dispatch('conversations/toggleBlockOutgoing', options).finally(() => { + async toggleBlockOutgoingAction (options) { + this.resetList() + try { + await this.toggleBlockOutgoing(options) + } finally { this.forceReload() - }) + } }, - toggleBlockBoth (options) { - this.startLoader() - this.$store.commit('conversations/resetList') - this.$store.dispatch('conversations/toggleBlockBoth', options).finally(() => { + async toggleBlockBothAction (options) { + this.resetList() + try { + await this.toggleBlockBoth(options) + } finally { this.forceReload() - }) + } }, - deleteVoicemailConfirmed (payload) { - this.startLoader() - this.$store.commit('conversations/resetList') - this.deleteVoicemail(payload).finally(() => { + async deleteVoicemailConfirmed (payload) { + this.resetList() + try { + await this.deleteVoicemail(payload) + } finally { this.forceReload() - }) + } }, blockedIncoming (item) { if (item.direction === 'out') { @@ -340,9 +333,6 @@ export default { } else { return this.isNumberOutgoingBlocked(item.caller) } - }, - startLoader () { - this.$wait.start('csc-conversations') } } } diff --git a/src/store/conversations/actions.js b/src/store/conversations/actions.js index 4571d768..c34bf7d6 100644 --- a/src/store/conversations/actions.js +++ b/src/store/conversations/actions.js @@ -16,7 +16,7 @@ import { toggleNumberInBothLists } from 'src/api/call-blocking' -const ROWS_PER_PAGE = 15 +export const ROWS_PER_PAGE = 15 const ReloadConfig = { retryLimit: 5, @@ -96,12 +96,12 @@ export default { } catch (err) { context.commit('nextPageFailed', err.message) } finally { - if (options.done !== undefined && (res === undefined || res.items === undefined)) { - options.done(true) - } else if (options.done !== undefined && res.items && res.items.length === 0) { - options.done(true) - } else if (options.done !== undefined) { - options.done() + if (typeof options.done === 'function') { + if (res?.items === undefined || res?.items?.length === 0 || res?.items?.length < ROWS_PER_PAGE) { + options.done(true) + } else { + options.done() + } } } }, diff --git a/src/store/conversations/mutations.js b/src/store/conversations/mutations.js index 3327eb46..f73260a7 100644 --- a/src/store/conversations/mutations.js +++ b/src/store/conversations/mutations.js @@ -2,6 +2,7 @@ import Vue from 'vue' import { RequestState } from '../common' +import { ROWS_PER_PAGE } from './actions' function linkCallsWithSameId (state) { let callId = null @@ -86,7 +87,7 @@ export default { state.nextPageState = RequestState.succeeded state.nextPageError = null state.items = state.items.concat(res.items) - state.reachedLastPage = res.items.length === 0 + state.reachedLastPage = res.items.length === 0 || res.items.length < ROWS_PER_PAGE }, nextPageFailed (state, error) { state.nextPageState = RequestState.failed