move the Routes enum to router/routes.ts

+ fix context menu not being normalized
+ fix nav bar padding-right on no sidebar
This commit is contained in:
geoffrey45
2022-12-12 10:41:23 +03:00
committed by Mungai Njoroge
parent cb51107ffd
commit 7f344b51db
22 changed files with 361 additions and 144 deletions
+140 -116
View File
@@ -5,131 +5,155 @@ import usePlaylistPageStore from "@/stores/pages/playlist";
import usePlaylistListPageStore from "@/stores/pages/playlists";
import useArtistPageStore from "@/stores/pages/artist";
const routes = [
{
path: "/",
name: "Home",
redirect: "/folder/$home",
},
{
path: "/folder/:path",
name: "FolderView",
component: () => import("@/views/FolderView.vue"),
beforeEnter: async (to: any) => {
state.loading.value = true;
await useFolderPageStore()
.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 usePlaylistListPageStore()
.fetchAll()
.then(() => {
state.loading.value = false;
});
},
},
{
path: "/playlist/:pid",
name: "PlaylistView",
component: () => import("@/views/PlaylistView/index.vue"),
beforeEnter: async (to: any) => {
state.loading.value = true;
await usePlaylistPageStore()
.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/AlbumView/index.vue"),
beforeEnter: async (to: any) => {
state.loading.value = true;
const store = useAlbumPageStore();
const home = {
path: "/",
name: "Home",
redirect: "/folder/$home",
};
await store.fetchTracksAndArtists(to.params.hash).then(() => {
const folder = {
path: "/folder/:path",
name: "FolderView",
component: () => import("@/views/FolderView.vue"),
beforeEnter: async (to: any) => {
state.loading.value = true;
await useFolderPageStore()
.fetchAll(to.params.path)
.then(() => {
state.loading.value = false;
});
},
},
{
path: "/artists",
name: "ArtistsView",
component: () => import("@/views/ArtistsExplorer.vue"),
},
{
path: "/artists/:hash",
name: "ArtistView",
component: () => import("@/views/ArtistView"),
beforeEnter: async (to: any) => {
state.loading.value = true;
};
await useArtistPageStore()
.getData(to.params.hash)
.then(() => {
state.loading.value = false;
});
},
const playlists = {
path: "/playlists",
name: "PlaylistList",
component: () => import("@/views/PlaylistList.vue"),
beforeEnter: async () => {
state.loading.value = true;
await usePlaylistListPageStore()
.fetchAll()
.then(() => {
state.loading.value = false;
});
},
{
path: "/settings",
name: "SettingsView",
component: () => import("@/views/SettingsView.vue"),
};
const playlistView = {
path: "/playlist/:pid",
name: "PlaylistView",
component: () => import("@/views/PlaylistView/index.vue"),
beforeEnter: async (to: any) => {
state.loading.value = true;
await usePlaylistPageStore()
.fetchAll(to.params.pid)
.then(() => {
state.loading.value = false;
});
},
{
path: "/search/:page",
name: "SearchView",
component: () => import("@/views/SearchView"),
};
const albums = {
path: "/albums",
name: "AlbumsView",
component: () => import("@/views/AlbumsExplorer.vue"),
};
const albumView = {
path: "/albums/:hash",
name: "AlbumView",
component: () => import("@/views/AlbumView/index.vue"),
beforeEnter: async (to: any) => {
state.loading.value = true;
const store = useAlbumPageStore();
await store.fetchTracksAndArtists(to.params.hash).then(() => {
state.loading.value = false;
});
},
{
path: "/queue",
name: "QueueView",
component: () => import("@/views/QueueView.vue"),
},
{
name: "NotFound",
path: "/:pathMatch(.*)",
component: () => import("@/views/NotFound.vue"),
};
const artists = {
path: "/artists",
name: "ArtistsView",
component: () => import("@/views/ArtistsExplorer.vue"),
};
const artistView = {
path: "/artists/:hash",
name: "ArtistView",
component: () => import("@/views/ArtistView"),
beforeEnter: async (to: any) => {
state.loading.value = true;
await useArtistPageStore()
.getData(to.params.hash)
.then(() => {
state.loading.value = false;
});
},
};
const artistDiscography = {
path: "/artists/:hash/discography",
name: "ArtistDiscographyView",
component: () => import("@/views/AlbumsGrid.vue"),
};
const settings = {
path: "/settings",
name: "SettingsView",
component: () => import("@/views/SettingsView.vue"),
};
const search = {
path: "/search/:page",
name: "SearchView",
component: () => import("@/views/SearchView"),
};
const queue = {
path: "/queue",
name: "QueueView",
component: () => import("@/views/QueueView.vue"),
};
const notFound = {
name: "NotFound",
path: "/:pathMatch(.*)",
component: () => import("@/views/NotFound.vue"),
};
const routes = [
home,
folder,
playlists,
playlistView,
albums,
albumView,
artists,
artistView,
artistDiscography,
settings,
search,
queue,
notFound,
];
const keys = [
"home",
"folder",
"playlists",
"playlist",
"albums",
"album",
"artists",
"settings",
"search",
"queue",
"notfound",
];
const Routes = {
home: home.name,
folder: folder.name,
playlists: playlists.name,
playlist: playlistView.name,
albums: albums.name,
album: albumView.name,
artists: artists.name,
artist: artistView.name,
artistDiscography: artistDiscography.name,
settings: settings.name,
search: search.name,
queue: queue.name,
notFound: notFound.name,
};
const routesList = routes.map((route, index) => {
const key = keys[index];
return { route: route.name };
});
// TODO: Use dynamic keys in routesList
// Try adding an index.ts on Foldered views, import main component and export it ...
// Then try importing it here as @/views/ThatView
export { routes, routesList };
export { routes, Routes };