setup artist discography page

src/views/AlbumView/index.vue

@@ -37,6 +37,7 @@ import Header from "@/components/AlbumView/Header.vue";
 import SongItem from "@/components/shared/SongItem.vue";
 
 import { isSmall } from "@/stores/content-width";
+import { discographyAlbumTypes } from "@/composables/enums";
 
 const album = useAlbumStore();
 const queue = useQueueStore();
@@ -80,14 +81,22 @@ function getSongItems() {
 }
 
 function getArtistAlbumComponents(): ScrollerItem[] {
-  return album.albumArtists.map((artist) => {
-    const artist_name = album.info.albumartists.find(
-      (a) => a.artisthash === artist.artisthash
-    )?.name;
+  return album.albumArtists.map((ar) => {
+    const artist = album.info.albumartists.find(
+      (a) => a.artisthash === ar.artisthash
+    );
+    const artistname = artist?.name;
+    const artisthash = artist?.artisthash;
+
     return {
       id: Math.random().toString(),
       component: ArtistAlbums,
-      props: { title: `More from ${artist_name}`, albums: artist.albums },
+      props: {
+        artisthash,
+        albums: ar.albums,
+        title: `More from ${artistname}`,
+        albumType: discographyAlbumTypes.all,
+      },
       size: 20 * 16,
     };
   });

src/views/AlbumsGrid.vue

@@ -1,43 +1,46 @@
 <template>
   <div class="album-grid-view v-scroll-page">
-    <div class="scrollable">
-      <AlbumCard v-for="album in albums" :album="album" :key="Math.random()" />
+    <div class="scrollable" v-auto-animate="{ duration: 100 }">
+      <AlbumCard
+        v-for="album in artist.toShow"
+        :album="album"
+        :key="album.albumhash"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import useArtistPageStore from "@/stores/pages/artist";
+import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 import AlbumCard from "@/components/shared/AlbumCard.vue";
-import { getArtistAlbums } from "@/composables/fetch/artists";
 
-import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
-import { Album } from "@/interfaces";
+import { onMounted } from "vue";
+import { onBeforeRouteLeave, useRoute } from "vue-router";
 
-const artist = useArtistPageStore();
+const artist = useArtistDiscographyStore();
 const route = useRoute();
 
-const albums = ref(<Album[]>[]);
-
 onMounted(() => {
-  // artist.getArtistAlbums(route.params.hash);
-  getArtistAlbums(route.params.hash as string).then((res) => {
-    albums.value = res.appearances;
-    // console.log(albums.value);
-  });
+  artist.fetchAlbums(route.params.hash as string);
+});
+
+onBeforeRouteLeave(() => {
+  artist.resetAlbums();
 });
 </script>
 
 <style lang="scss">
 .album-grid-view {
-  // border: solid;
+  height: 100%;
 
   .scrollable {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     grid-gap: $small;
     padding: 0 1rem;
+    padding-bottom: 4rem;
+    overflow: auto;
+    max-height: 100%;
   }
 }
 </style>

src/views/ArtistView/Main.vue

@@ -22,7 +22,6 @@
             :is="item.component"
             v-bind="item.props"
           ></component>
-          <!-- @playThis="playFromPage(item.props.index - 1)" -->
         </DynamicScrollerItem>
       </template>
     </DynamicScroller>
@@ -38,10 +37,12 @@ import useArtistPageStore from "@/stores/pages/artist";
 import ArtistAlbums from "@/components/AlbumView/ArtistAlbums.vue";
 import ArtistAlbumsFetcher from "@/components/ArtistView/ArtistAlbumsFetcher.vue";
 import { computed } from "vue";
-import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
+import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from "vue-router";
 import { Album } from "@/interfaces";
+import { discographyAlbumTypes } from "@/composables/enums";
 
 const store = useArtistPageStore();
+const route = useRoute();
 
 interface ScrollerItem {
   id: string | number;
@@ -64,13 +65,41 @@ const artist_albums_fetcher: ScrollerItem = {
   component: ArtistAlbumsFetcher,
 };
 
-function createAbumComponent(title: string, albums: Album[]) {
+enum AlbumType {
+  ALBUMS = "Albums",
+  EPS = "EPs",
+  SINGLES = "Singles",
+  APPEARANCES = "Appearances",
+}
+
+function createAbumComponent(title: AlbumType, albums: Album[]) {
+  let albumType = null;
+
+  switch (title) {
+    case AlbumType.ALBUMS:
+      albumType = discographyAlbumTypes.albums;
+      break;
+    case AlbumType.EPS:
+      albumType = discographyAlbumTypes.eps;
+      break;
+    case AlbumType.SINGLES:
+      albumType = discographyAlbumTypes.singles;
+      break;
+    case AlbumType.APPEARANCES:
+      albumType = discographyAlbumTypes.appearances;
+      break;
+
+    default:
+      break;
+  }
   return {
     id: title,
     component: ArtistAlbums,
     props: {
-      title,
+      albumType,
       albums,
+      title,
+      artisthash: route.params.hash,
     },
   };
 }
@@ -85,22 +114,25 @@ const scrollerItems = computed(() => {
   components = [...components, artist_albums_fetcher];
 
   if (store.albums.length > 0) {
-    const albums = createAbumComponent("Albums", store.albums);
+    const albums = createAbumComponent(AlbumType.ALBUMS, store.albums);
     components.push(albums);
   }
 
   if (store.eps.length > 0) {
-    const eps = createAbumComponent("EPs", store.eps);
+    const eps = createAbumComponent(AlbumType.EPS, store.eps);
     components.push(eps);
   }
 
   if (store.singles.length > 0) {
-    const singles = createAbumComponent("Singles", store.singles);
+    const singles = createAbumComponent(AlbumType.SINGLES, store.singles);
     components.push(singles);
   }
 
   if (store.appearances.length > 0) {
-    const appearances = createAbumComponent("Appearances", store.appearances);
+    const appearances = createAbumComponent(
+      AlbumType.APPEARANCES,
+      store.appearances
+    );
     components.push(appearances);
   }