[client] Fix search tab reactivation

This commit is contained in:
Laura Hausmann 2023-11-19 02:46:25 +01:00
parent 16057fb237
commit b346cc20d9
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
2 changed files with 28 additions and 21 deletions

View file

@ -8,7 +8,7 @@
:display-back-button="true" :display-back-button="true"
/></template> /></template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<MkSearch :query="query" :hideFilters="!$i || tab === 'users'" @query="search"/> <MkSearch :query="searchQuery" :hideFilters="!$i || tab === 'users'" @query="search"/>
<swiper <swiper
:round-lengths="true" :round-lengths="true"
:touch-angle="25" :touch-angle="25"
@ -27,7 +27,7 @@
> >
<swiper-slide> <swiper-slide>
<template v-if="$i && tabs[swiperRef!.activeIndex] == 'notes'"> <template v-if="$i && tabs[swiperRef!.activeIndex] == 'notes'">
<template v-if="query == null || query.trim().length < 1"> <template v-if="searchQuery == null || searchQuery.trim().length < 1">
<transition :name="$store.state.animation ? 'zoom' : ''" appear> <transition :name="$store.state.animation ? 'zoom' : ''" appear>
<div class="_fullinfo" ref="notes"> <div class="_fullinfo" ref="notes">
<img <img
@ -62,7 +62,7 @@
</template> </template>
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<template v-if="query == null || query.trim().length < 1"> <template v-if="searchQuery == null || searchQuery.trim().length < 1">
<transition :name="$store.state.animation ? 'zoom' : ''" appear> <transition :name="$store.state.animation ? 'zoom' : ''" appear>
<div class="_fullinfo" ref="notes"> <div class="_fullinfo" ref="notes">
<img <img
@ -90,7 +90,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, watch, onMounted } from "vue"; import { computed, watch, onMounted, onActivated, ref } from "vue";
import { Virtual } from "swiper/modules"; import { Virtual } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import XNotes from "@/components/MkNotes.vue"; import XNotes from "@/components/MkNotes.vue";
@ -107,22 +107,25 @@ import MkSearch from "@/components/MkSearch.vue";
import { mainRouter } from "@/router.js"; import { mainRouter } from "@/router.js";
import * as os from "@/os.js"; import * as os from "@/os.js";
const props = withDefaults( const getUrlParams = () =>
defineProps<{ window.location.search
query: string; .substring(1)
channel?: string; .split("&")
}>(), .reduce((result, query) => {
{ const [k, v] = query.split("=");
query: "" result[k] = decodeURIComponent(v);
} return result;
); }, {});
let searchQuery = $ref<string>(getUrlParams()['q'] ?? "");
let channel = $ref<string|undefined>(getUrlParams()['channel'] ?? undefined);
const notesPagination = { const notesPagination = {
endpoint: "notes/search" as const, endpoint: "notes/search" as const,
limit: 10, limit: 10,
params: computed(() => ({ params: computed(() => ({
query: props.query, query: searchQuery,
channelId: props.channel, channelId: channel,
})), })),
}; };
@ -130,7 +133,7 @@ const usersPagination = {
endpoint: "users/search" as const, endpoint: "users/search" as const,
limit: 10, limit: 10,
params: computed(() => ({ params: computed(() => ({
query: props.query, query: searchQuery,
origin: "combined", origin: "combined",
})), })),
}; };
@ -170,7 +173,14 @@ function syncSlide(index) {
} }
onMounted(() => { onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex)); syncSlide(tabs.indexOf(tab));
});
onActivated(() => {
searchQuery = getUrlParams()['q'];
channel = getUrlParams()['channel'] ?? undefined;
syncSlide(tabs.indexOf(tab));
}); });
definePageMetadata( definePageMetadata(
@ -211,6 +221,7 @@ async function search(query: string) {
return; return;
} }
searchQuery = q;
mainRouter.push(`/search?q=${encodeURIComponent(q)}`); mainRouter.push(`/search?q=${encodeURIComponent(q)}`);
} }
</script> </script>

View file

@ -313,10 +313,6 @@ export const routes = [
{ {
path: "/search", path: "/search",
component: page(() => import("./pages/search.vue")), component: page(() => import("./pages/search.vue")),
query: {
q: "query",
channel: "channel",
},
}, },
{ {
path: "/authorize-follow", path: "/authorize-follow",