Append new results and keep scroll position.

This commit is contained in:
Richard Lewis 2020-04-23 19:50:45 +03:00
parent 9a1fb0c0a0
commit 5d017b09b8
3 changed files with 36 additions and 4 deletions

View File

@ -39,10 +39,13 @@
</button>
</div>
<div v-if="$store.state.messageSearchInProgress" class="search-status">
<div
v-if="$store.state.messageSearchInProgress && !offset"
class="search-status"
>
Searching
</div>
<div v-else-if="!messages.length" class="search-status">
<div v-else-if="!messages.length && !offset" class="search-status">
No results found.
</div>
<div
@ -94,6 +97,8 @@ export default {
return {
offset: 0,
moreResultsAvailable: false,
oldScrollTop: 0,
oldChatHeight: 0,
};
},
computed: {
@ -145,7 +150,16 @@ export default {
},
messages() {
this.moreResultsAvailable = this.messages.length && !(this.messages.length % 100);
this.jumpToBottom();
if (!this.offset) {
this.jumpToBottom();
} else {
this.$nextTick(() => {
const currentChatHeight = this.$refs.chat.scrollHeight;
this.$refs.chat.scrollTop =
this.oldScrollTop + currentChatHeight - this.oldChatHeight;
});
}
},
},
mounted() {
@ -164,7 +178,11 @@ export default {
doSearch() {
this.offset = 0;
this.$store.commit("messageSearchInProgress", true);
this.$store.commit("messageSearchResults", null); // Only reset if not getting offset
if (!this.offset) {
this.$store.commit("messageSearchResults", null); // Only reset if not getting offset
}
socket.emit("search", {
networkUuid: this.$route.params.uuid,
channelName: this.$route.params.target,
@ -175,6 +193,10 @@ export default {
onShowMoreClick() {
this.offset += 100;
this.$store.commit("messageSearchInProgress", true);
this.oldScrollTop = this.$refs.chat.scrollTop;
this.oldChatHeight = this.$refs.chat.scrollHeight;
socket.emit("search", {
networkUuid: this.$route.params.uuid,
channelName: this.$route.params.target,

View File

@ -3,5 +3,11 @@ import store from "../store";
socket.on("search:results", (response) => {
store.commit("messageSearchInProgress", false);
if (store.state.messageSearchResults) {
store.commit("addMessageSearchResults", response);
return;
}
store.commit("messageSearchResults", response);
});

View File

@ -120,6 +120,10 @@ const store = new Vuex.Store({
messageSearchResults(state, value) {
state.messageSearchResults = value;
},
addMessageSearchResults(state, value) {
value.results = [...state.messageSearchResults.results, ...value.results];
state.messageSearchResults = value;
},
},
getters: {
findChannelOnCurrentNetwork: (state) => (name) => {