Implement fuzzy page search using fuse.js (#86)

src/views/FolderView.vue

@@ -24,7 +24,11 @@
 
 <script setup lang="ts">
 import { ref } from "@vue/reactivity";
-import { onBeforeRouteUpdate, RouteLocationNormalized } from "vue-router";
+import {
+  onBeforeRouteLeave,
+  onBeforeRouteUpdate,
+  RouteLocationNormalized,
+} from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
@@ -47,24 +51,27 @@ function getFolderName(route: RouteLocationNormalized) {
 }
 
 function playFromPage(index: number) {
-  queue.playFromFolder(folder.path, folder.tracks);
+  queue.playFromFolder(folder.path, folder.allTracks);
   queue.play(index);
 }
 
 onBeforeRouteUpdate((to, from) => {
-  if (isSameRoute(to, from)) return;
-
   loader.startLoading();
   folder
     .fetchAll(to.params.path as string)
 
     .then(() => {
       scrollable.value.scrollTop = 0;
+      folder.resetQuery();
     })
     .then(() => {
       loader.stopLoading();
     });
 });
+
+onBeforeRouteLeave(() => {
+  setTimeout(() => folder.resetQuery(), 500);
+});
 </script>
 
 <style lang="scss">

src/views/Search.vue

@@ -36,7 +36,7 @@ import Main from "@/components/RightSideBar/Search/Main.vue";
 
   #tracks-results {
     margin-right: 1rem;
-    margin-left: -2.25rem;
+    // margin-left: -2.25rem;
   }
 }
 </style>

src/views/SettingsView.vue

@@ -1,28 +1,9 @@
 <template>
   <div class="settingspage">
-    <div class="scrollable">
-      <Content :current="0" />
-    </div>
-    <Nav />
+    <Content :current="0" />
   </div>
 </template>
 
 <script setup lang="ts">
-import Nav from "@/components/SettingsView/Nav.vue";
 import Content from "../components/SettingsView/Content.vue";
-</script>
-
-<style lang="scss">
-.settingspage {
-  height: 100%;
-  padding: 1rem;
-  display: grid;
-  grid-template-rows: 1fr max-content;
-  gap: 1rem;
-  background-color: $black;
-
-  .scrollable {
-    overflow: auto;
-  }
-}
-</style>
+</script>

src/views/album/Content.vue

@@ -37,7 +37,7 @@ const isLastDisc = (disc: string | number) => {
 
 function playFromAlbumPage(index: number) {
   const { title, artist, hash } = album.info;
-  queue.playFromAlbum(title, artist, hash, album.tracks);
+  queue.playFromAlbum(title, artist, hash, album.allTracks);
   queue.play(index);
 }
 </script>

src/views/album/index.vue

@@ -12,24 +12,26 @@
 <script setup lang="ts">
 import useAStore from "@/stores/pages/album";
 import {
+  onBeforeRouteLeave,
   onBeforeRouteUpdate,
   RouteLocationNormalized,
-  RouteParams,
 } from "vue-router";
 
-import Page from "@/layouts/HeaderContentBottom.vue";
-import Content from "./Content.vue";
 import Header from "./Header.vue";
+import Content from "./Content.vue";
+import Page from "@/layouts/HeaderContentBottom.vue";
 
 const album = useAStore();
 
-function fetchAlbumBio(params: RouteParams) {
-  album.fetchBio(params.hash.toString());
-}
-
 onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
   await album
     .fetchTracksAndArtists(to.params.hash.toString())
-    .then(() => album.fetchBio(to.params.hash.toString()));
+    .then(() => album.resetQuery());
+});
+
+onBeforeRouteLeave(() => {
+  setTimeout(() => {
+    album.resetQuery();
+  }, 500);
 });
 </script>

src/views/playlist/Content.vue

@@ -27,8 +27,9 @@ import usePlaylistStore from "@/stores/pages/playlist";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import { Track } from "@/interfaces";
+import { onUpdated } from "vue";
 
-defineProps<{
+const props = defineProps<{
   tracks: Track[];
   count: number;
   name: string;
@@ -40,7 +41,7 @@ const playlist = usePlaylistStore();
 
 function playFromPlaylistPage(index: number) {
   const { name, playlistid } = playlist.info;
-  queue.playFromPlaylist(name, playlistid, playlist.tracks);
+  queue.playFromPlaylist(name, playlistid, playlist.allTracks);
   queue.play(index);
 }
 </script>

src/views/playlist/index.vue

@@ -1,37 +1,37 @@
 <template>
   <Page>
     <template #header>
-      <Header :info="playlist.info" />
+      <Header :info="playlist" />
     </template>
     <template #content>
       <Content
-        :tracks="playlist.tracks"
-        :count="playlist.info?.count"
-        :name="playlist.info.name"
-        :playlistid="playlist.info.playlistid"
+        :tracks="tracks"
+        :count="playlist.count"
+        :name="playlist.name"
+        :playlistid="playlist.playlistid"
       />
     </template>
   </Page>
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from "pinia";
 import Page from "@/layouts/HeaderContentBottom.vue";
 
 import Header from "@/components/PlaylistView/Header.vue";
 import Content from "./Content.vue";
 
-import usePTrackStore from "@/stores/pages/playlist";
-import { onMounted, onUnmounted } from "vue";
-import { useRoute } from "vue-router";
+import usePlaylistStore from "@/stores/pages/playlist";
+import { onBeforeRouteLeave } from "vue-router";
 
-const route = useRoute();
-const playlist = usePTrackStore();
+const store = usePlaylistStore();
+const { info: playlist, tracks } = storeToRefs(store);
 
-onMounted(() => {
-  playlist.fetchArtists(route.params.pid as string);
+onBeforeRouteLeave(() => {
+  setTimeout(() => {
+    store.resetQuery();
+  }, 500);
 });
-
-onUnmounted(() => playlist.resetArtists());
 </script>
 
 <style lang="scss"></style>