Problem: impossible to use global search after selecting channel

Solution: make global search a specific option in searchpopup
This commit is contained in:
Peter Stuifzand 2022-04-18 14:18:15 +02:00
parent f559c237ca
commit 79b88d7a59
3 changed files with 27 additions and 8 deletions

View File

@ -17,6 +17,13 @@
</div> </div>
</div> </div>
<div class="field">
<div class="control">
<label for="global" class="radio"><input type="radio" name="channel" id="global" value="global" v-model="searchChannel"> Global</label>
<label for="channel" class="radio"><input type="radio" name="channel" id="channel" value="channel" v-model="searchChannel"> Channel</label>
</div>
</div>
<div class="timeline--item" v-for="item in searchItems" :key="item.id"> <div class="timeline--item" v-for="item in searchItems" :key="item.id">
<TimelineEntry :item="item" :is-main-entry="true" @debug="debug" /> <TimelineEntry :item="item" :is-main-entry="true" @debug="debug" />
</div> </div>
@ -38,7 +45,8 @@ export default {
return { return {
query: '', query: '',
loading: false, loading: false,
error: '' error: '',
searchChannel: 'global'
} }
}, },
mounted () { mounted () {
@ -65,7 +73,7 @@ export default {
search () { search () {
this.loading = true this.loading = true
this.error = '' this.error = ''
this.$store.dispatch('startQuery', this.query) this.$store.dispatch('startQuery', {query: this.query, channel: this.searchChannel})
.then(result => { .then(result => {
this.loading = false this.loading = false
if (result.error) { if (result.error) {

View File

@ -268,14 +268,22 @@ export default new Vuex.Store({
commit('setSearchPopupState', false) commit('setSearchPopupState', false)
}, },
startQuery({state, commit}, query) { startQuery({state, commit}, query) {
let channel = 'global' let channel
if (state.channel !== null && state.channel.uid !== null && state.channel.uid !== 'home') { if (query.channel) {
channel = state.channel.uid if (query.channel === 'global') {
channel = 'global'
} else if (query.channel === 'channel') {
if (state.channel !== null && state.channel.uid !== null) {
channel = state.channel.uid
}
} else {
channel = 'global'
}
} }
const url = new URL(this.state.microsubEndpoint) const url = new URL(this.state.microsubEndpoint)
url.searchParams.set('action', 'search') url.searchParams.set('action', 'search')
url.searchParams.set('channel', channel) url.searchParams.set('channel', channel)
url.searchParams.set('query', query) url.searchParams.set('query', query.query)
return fetch(url.toString(), { return fetch(url.toString(), {
headers: { headers: {
'Authorization': 'Bearer ' + this.state.access_token 'Authorization': 'Bearer ' + this.state.access_token

View File

@ -3,7 +3,7 @@
<div class="column" style="padding-top: 20px"> <div class="column" style="padding-top: 20px">
<button class="channels-toggle button" type="button" @click="showChannels">Channels</button> <button class="channels-toggle button" type="button" @click="showChannels">Channels</button>
<Channels :class="channelsClass" :channels="this.$store.state.channels"> <Channels :class="channelsClass" :channels="this.channels">
<div slot-scope="{ channel }"> <div slot-scope="{ channel }">
<Channel :channel="channel" @channel-selected="selectChannel"></Channel> <Channel :channel="channel" @channel-selected="selectChannel"></Channel>
</div> </div>
@ -80,6 +80,9 @@
channel() { channel() {
return this.$store.state.channel return this.$store.state.channel
}, },
channels() {
return this.$store.state.channels
},
channelsClass () { channelsClass () {
return { return {
'channels-open': this.channelsVisible, 'channels-open': this.channelsVisible,