fix: [#593] permanent link to search result

This fixes loading the search term from the GET parameter in the URL before loading the torrents list from the API.
torrust · Aug 5, 2024 · de44e47 · de44e47
1 parent b91f1f4
commit de44e47
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 38 deletions.
diff --git a/components/navigation/NavigationBar.vue b/components/navigation/NavigationBar.vue
@@ -7,18 +7,6 @@
       <NuxtLink to="/" class="flex flex-row text-xl normal-case btn btn-ghost">
         <span>{{ settings?.website_name || "Torrust" }}</span>
       </NuxtLink>
-      <div class="hidden form-control md:flex">
-        <input
-          v-model="searchQuery"
-          name="search"
-          type="text"
-          class="border-2 input input-bordered rounded-2xl placeholder-neutral-content"
-          :placeholder="`Search torrents`"
-          @keyup.enter="submitSearch"
-          @focusin="typingInSearch = true"
-          @focusout="typingInSearch = false"
-        >
-      </div>
       <div class="flex-none gap-2 ml-auto">
         <template v-if="user">
           <NuxtLink id="upload-button" to="/upload" class="hidden md:flex btn bg-base-100 rounded-2xl">
@@ -56,18 +44,6 @@
     <template v-if="!mobileCollapsed">
       <div class="items-center justify-between w-full py-4 md:hidden">
         <div class="flex flex-row gap-2">
-          <div class="w-full form-control">
-            <input
-              v-model="searchQuery"
-              name="search"
-              type="text"
-              class="border-2 input input-bordered"
-              :placeholder="`Search ${settings?.website_name ?? 'Torrust'}`"
-              @keyup.enter="submitSearch"
-              @focusin="typingInSearch = true"
-              @focusout="typingInSearch = false"
-            >
-          </div>
           <button class="btn btn-square btn-ghost" @click="submitSearch">
             <MagnifyingGlassIcon class="w-6" />
           </button>
@@ -104,17 +80,6 @@ const settings: PublicSettings = useSettings().value;
 const user = useUser();
 
 const mobileCollapsed = ref(true);
-const searchQuery: Ref<string> = ref("");
-const typingInSearch = ref(false);
-
-function submitSearch () {
-  navigateTo({
-    path: "/torrents",
-    query: {
-      search: searchQuery.value ?? null
-    }
-  });
-}
 
 </script>
 

diff --git a/pages/torrents.vue b/pages/torrents.vue
@@ -3,6 +3,17 @@
     <div class="flex w-full">
       <div class="flex flex-wrap justify-between w-full gap-2">
         <div class="flex flex-wrap gap-2">
+          <input
+            v-model="searchQuery"
+            name="search"
+            type="text"
+            class="border-2 input input-bordered rounded-2xl placeholder-neutral-content"
+            :placeholder="`Search torrents`"
+            @keyup.enter="submitSearch"
+          >
+
+        </div>
+        <div class="flex flex-wrap gap-1">
           <TorrustSelect
             v-model:selected="categoryFilters"
             :options="categories.map(entry => ({ name: entry.name, value: entry.name }))"
@@ -17,8 +28,6 @@
             :multiple="true"
             search
           />
-        </div>
-        <div>
           <TorrustSelect v-model:selected="selectedSorting" class="ml-auto" :options="sortingOptions" label="Sort by" />
         </div>
       </div>
@@ -102,7 +111,13 @@ const selectedSorting = computed({
 });
 
 watch(() => route.fullPath, () => {
-  searchQuery.value = route.query.search as string;
+  searchQuery.value = route.query.search as string ?? null;
+  itemsSorting.value = route.query.sorting as string ?? null;
+  pageSize.value = route.query.pageSize as number ?? null;
+  currentPage.value = route.query.page as number ?? null;
+  layout.value = route.query.layout as string ?? null;
+  categoryFilters.value = route.query.categoryFilters as string[] ?? null;
+  tagFilters.value = route.query.tagFilters as string[] ?? null;
 });
 
 watch([searchQuery, itemsSorting, pageSize, currentPage, layout, categoryFilters, tagFilters], () => {
@@ -123,12 +138,34 @@ watch([searchQuery, itemsSorting, pageSize, currentPage, layout, categoryFilters
 
 onActivated(() => {
   searchQuery.value = route.query.search as string ?? null;
+  itemsSorting.value = route.query.sorting as string ?? null;
+  pageSize.value = route.query.pageSize as number ?? null;
+  currentPage.value = route.query.page as number ?? null;
+  layout.value = route.query.layout as string ?? null;
+  categoryFilters.value = route.query.categoryFilters as string[] ?? null;
+  tagFilters.value = route.query.tagFilters as string[] ?? null;
 });
 
 onMounted(() => {
+  searchQuery.value = route.query.search as string ?? null;
   loadTorrents();
 });
 
+function submitSearch () {
+  navigateTo({
+    path: "/torrents",
+    query: {
+      search: searchQuery.value,
+      sorting: itemsSorting.value,
+      pageSize: pageSize.value,
+      page: 1,
+      layout: layout.value,
+      categoryFilters: categoryFilters.value,
+      tagFilters: tagFilters.value
+    }
+  });
+}
+
 function loadTorrents () {
   rest.value.torrent.getTorrents(
     {