feat: show search icon in header instead of input

+ fix: persistent updating text on update playlist modal
+ move router routes to a separate file
    + lazy import route components
+ remove loading: lazy from songcard
+ remove unused imports on navigation component
This commit is contained in:
geoffrey45
2022-09-18 10:07:58 +03:00
parent 5af3d9cfc3
commit 194a615b2d
14 changed files with 221 additions and 183 deletions
+3 -114
View File
@@ -1,121 +1,10 @@
import state from "@/composables/state";
import useAStore from "@/stores/pages/album";
import useFStore from "@/stores/pages/folder";
import usePTrackStore from "@/stores/pages/playlist";
import usePStore from "@/stores/pages/playlists";
import AlbumsExplorer from "@/views/AlbumsExplorer.vue";
import AlbumView from "@/views/album/index.vue";
import ArtistsExplorer from "@/views/ArtistsExplorer.vue";
import FolderView from "@/views/FolderView.vue";
import Home from "@/views/Home.vue";
import PlaylistList from "@/views/PlaylistList.vue";
import PlaylistView from "@/views/playlist/index.vue";
import SettingsView from "@/views/SettingsView.vue";
import SearchView from "@/views/Search.vue";
import QueueView from "@/views/QueueView.vue";
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
path: "/",
name: "Home",
component: Home,
redirect: "/folder/$home",
},
{
path: "/folder/:path",
name: "FolderView",
component: FolderView,
beforeEnter: async (to: any) => {
state.loading.value = true;
await useFStore()
.fetchAll(to.params.path)
.then(() => {
state.loading.value = false;
});
},
},
{
path: "/folder/",
redirect: "/folder/home",
},
{
path: "/playlists",
name: "PlaylistList",
component: PlaylistList,
beforeEnter: async () => {
state.loading.value = true;
await usePStore()
.fetchAll()
.then(() => {
state.loading.value = false;
});
},
},
{
path: "/playlist/:pid",
name: "PlaylistView",
component: PlaylistView,
beforeEnter: async (to: any) => {
state.loading.value = true;
await usePTrackStore()
.fetchAll(to.params.pid)
.then(() => {
state.loading.value = false;
});
},
},
{
path: "/albums",
name: "AlbumsView",
component: AlbumsExplorer,
},
{
path: "/albums/:hash",
name: "AlbumView",
component: AlbumView,
beforeEnter: async (to: any) => {
state.loading.value = true;
const store = useAStore();
await store
.fetchTracksAndArtists(to.params.hash)
.then(() => {
state.loading.value = false;
});
},
},
{
path: "/artists",
name: "ArtistsView",
component: ArtistsExplorer,
},
{
path: "/settings",
name: "SettingsView",
component: SettingsView,
},
{
path: "/search",
name: "SearchView",
component: SearchView,
},
{
path: "/queue",
name: "QueueView",
component: QueueView,
},
{
path: "/:pathMatch(.*)",
component: () => import("../views/NotFound.vue"),
},
];
import { routes } from "./routes";
import { createRouter, createWebHashHistory, RouterOptions } from "vue-router";
const router = createRouter({
mode: "hash",
history: createWebHashHistory(import.meta.env.BASE_URL),
routes,
});
} as RouterOptions);
export default router;
+121
View File
@@ -0,0 +1,121 @@
import state from "@/composables/state";
import useAStore from "@/stores/pages/album";
import useFStore from "@/stores/pages/folder";
import usePTrackStore from "@/stores/pages/playlist";
import usePStore from "@/stores/pages/playlists";
import Home from "@/views/Home.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
redirect: "/folder/$home",
},
{
path: "/folder/:path",
name: "FolderView",
component: () => import("@/views/FolderView.vue"),
beforeEnter: async (to: any) => {
state.loading.value = true;
await useFStore()
.fetchAll(to.params.path)
.then(() => {
state.loading.value = false;
});
},
},
{
path: "/playlists",
name: "PlaylistList",
component: () => import("@/views/PlaylistList.vue"),
beforeEnter: async () => {
state.loading.value = true;
await usePStore()
.fetchAll()
.then(() => {
state.loading.value = false;
});
},
},
{
path: "/playlist/:pid",
name: "PlaylistView",
component: () => import("@/views/playlist/index.vue"),
beforeEnter: async (to: any) => {
state.loading.value = true;
await usePTrackStore()
.fetchAll(to.params.pid)
.then(() => {
state.loading.value = false;
});
},
},
{
path: "/albums",
name: "AlbumsView",
component: () => import("@/views/AlbumsExplorer.vue"),
},
{
path: "/albums/:hash",
name: "AlbumView",
component: () => import("@/views/album/index.vue"),
beforeEnter: async (to: any) => {
state.loading.value = true;
const store = useAStore();
await store.fetchTracksAndArtists(to.params.hash).then(() => {
state.loading.value = false;
});
},
},
{
path: "/artists",
name: "ArtistsView",
component: () => import("@/views/ArtistsExplorer.vue"),
},
{
path: "/settings",
name: "SettingsView",
component: () => import("@/views/SettingsView.vue"),
},
{
path: "/search",
name: "SearchView",
component: () => import("@/views/Search.vue"),
},
{
path: "/queue",
name: "QueueView",
component: () => import("@/views/QueueView.vue"),
},
{
name: "NotFound",
path: "/:pathMatch(.*)",
component: () => import("../views/NotFound.vue"),
},
];
const keys = [
"home",
"folder",
"playlists",
"playlist",
"albums",
"album",
"artists",
"settings",
"search",
"queue",
"notfound",
];
const routesList = routes.map((route, index) => {
const key = keys[index];
return { route: route.name };
});
// TODO: Use dynamic keys in routesList
export { routes, routesList };