Append new results and keep scroll position.
This commit is contained in:
parent
9a1fb0c0a0
commit
5d017b09b8
@ -39,10 +39,13 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="$store.state.messageSearchInProgress" class="search-status">
|
<div
|
||||||
|
v-if="$store.state.messageSearchInProgress && !offset"
|
||||||
|
class="search-status"
|
||||||
|
>
|
||||||
Searching…
|
Searching…
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="!messages.length" class="search-status">
|
<div v-else-if="!messages.length && !offset" class="search-status">
|
||||||
No results found.
|
No results found.
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -94,6 +97,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
offset: 0,
|
offset: 0,
|
||||||
moreResultsAvailable: false,
|
moreResultsAvailable: false,
|
||||||
|
oldScrollTop: 0,
|
||||||
|
oldChatHeight: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -145,7 +150,16 @@ export default {
|
|||||||
},
|
},
|
||||||
messages() {
|
messages() {
|
||||||
this.moreResultsAvailable = this.messages.length && !(this.messages.length % 100);
|
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() {
|
mounted() {
|
||||||
@ -164,7 +178,11 @@ export default {
|
|||||||
doSearch() {
|
doSearch() {
|
||||||
this.offset = 0;
|
this.offset = 0;
|
||||||
this.$store.commit("messageSearchInProgress", true);
|
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", {
|
socket.emit("search", {
|
||||||
networkUuid: this.$route.params.uuid,
|
networkUuid: this.$route.params.uuid,
|
||||||
channelName: this.$route.params.target,
|
channelName: this.$route.params.target,
|
||||||
@ -175,6 +193,10 @@ export default {
|
|||||||
onShowMoreClick() {
|
onShowMoreClick() {
|
||||||
this.offset += 100;
|
this.offset += 100;
|
||||||
this.$store.commit("messageSearchInProgress", true);
|
this.$store.commit("messageSearchInProgress", true);
|
||||||
|
|
||||||
|
this.oldScrollTop = this.$refs.chat.scrollTop;
|
||||||
|
this.oldChatHeight = this.$refs.chat.scrollHeight;
|
||||||
|
|
||||||
socket.emit("search", {
|
socket.emit("search", {
|
||||||
networkUuid: this.$route.params.uuid,
|
networkUuid: this.$route.params.uuid,
|
||||||
channelName: this.$route.params.target,
|
channelName: this.$route.params.target,
|
||||||
|
@ -3,5 +3,11 @@ import store from "../store";
|
|||||||
|
|
||||||
socket.on("search:results", (response) => {
|
socket.on("search:results", (response) => {
|
||||||
store.commit("messageSearchInProgress", false);
|
store.commit("messageSearchInProgress", false);
|
||||||
|
|
||||||
|
if (store.state.messageSearchResults) {
|
||||||
|
store.commit("addMessageSearchResults", response);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
store.commit("messageSearchResults", response);
|
store.commit("messageSearchResults", response);
|
||||||
});
|
});
|
||||||
|
@ -120,6 +120,10 @@ const store = new Vuex.Store({
|
|||||||
messageSearchResults(state, value) {
|
messageSearchResults(state, value) {
|
||||||
state.messageSearchResults = value;
|
state.messageSearchResults = value;
|
||||||
},
|
},
|
||||||
|
addMessageSearchResults(state, value) {
|
||||||
|
value.results = [...state.messageSearchResults.results, ...value.results];
|
||||||
|
state.messageSearchResults = value;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
findChannelOnCurrentNetwork: (state) => (name) => {
|
findChannelOnCurrentNetwork: (state) => (name) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user