setup artist discography page

src/components/AlbumView/ArtistAlbums.vue

@@ -2,8 +2,16 @@
   <div class="artist-albums">
     <h3>
       <span>{{ title }} </span>
-      <span class="see-more" v-if="maxAbumCards <= albums.length">
-        <RouterLink :to="{ name: Routes.artistDiscography }"
+      <span
+        class="see-more"
+        v-if="maxAbumCards <= albums.length"
+        @click="store.setPage(albumType)"
+      >
+        <RouterLink
+          :to="{
+            name: Routes.artistDiscography,
+            params: { hash: artisthash },
+          }"
           >SEE ALL</RouterLink
         >
       </span>
@@ -21,9 +29,16 @@ import { Album } from "@/interfaces";
 import { maxAbumCards } from "@/stores/content-width";
 import { Routes } from "@/router/routes";
 
+import { discographyAlbumTypes } from "@/composables/enums";
+import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
+
+const store = useArtistDiscographyStore();
+
 defineProps<{
   title: string;
+  artisthash: string;
   albums: Album[];
+  albumType: discographyAlbumTypes;
 }>();
 </script>
 

src/components/AlbumView/Header.vue

@@ -81,9 +81,10 @@ import { albumHeaderSmall } from "@/stores/content-width";
 import useNavStore from "@/stores/nav";
 import useAlbumStore from "@/stores/pages/album";
 import { formatSeconds, useVisibility } from "@/utils";
-import { isLight } from "../../composables/colors/album";
-import { playSources, Routes } from "../../composables/enums";
-import { Album } from "../../interfaces";
+import { isLight } from "@/composables/colors/album";
+import { playSources } from "@/composables/enums";
+import { Album } from "@/interfaces";
+import { Routes } from "@/router/routes";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 

src/components/nav/Titles/ArtistDiscographyTitle.vue

@@ -2,20 +2,23 @@
   <div class="artist-discography-nav">
     <h1 class="ellip">Creedence Clearwater Revival</h1>
     <div class="buttons">
-      <!-- create dropdown -->
-      <div class="select rounded-sm" v-auto-animate="{ duration: 100 }">
+      <div class="select rounded-sm" v-auto-animate="{ duration: 10 }">
         <button class="selected" @click.prevent="showDropDown = !showDropDown">
-          <span class="ellip">Albums and appearances</span>
+          <span class="ellip">{{ store.page }}</span>
           <ArrowSvg />
         </button>
         <div
           ref="dropOptionsRef"
-          class="options rounded-sm"
+          class="options rounded-sm shadow-lg"
           v-if="showDropDown"
         >
-          <div class="option selected" value="1">Albums</div>
-          <div class="option" value="2">Singles & EPs</div>
-          <div class="option" value="3">Appearances</div>
+          <div
+            class="option"
+            v-for="a in albums"
+            @click.prevent="switchView(a)"
+          >
+            {{ a }}
+          </div>
         </div>
       </div>
       <button class="rounded-sm"><GridSvg /></button>
@@ -29,6 +32,11 @@ import { onClickOutside } from "@vueuse/core";
 import ArrowSvg from "@/assets/icons/expand.svg";
 import GridSvg from "@/assets/icons/grid.svg";
 import { Ref, ref } from "vue";
+import { discographyAlbumTypes as albums } from "@/composables/enums";
+
+import useArtistDiscogStore from "@/stores/pages/artistDiscog";
+
+const store = useArtistDiscogStore();
 
 const showDropDown = ref(false);
 const dropOptionsRef: Ref<HTMLElement | undefined> = ref();
@@ -37,6 +45,11 @@ function hideDropDown() {
   showDropDown.value = false;
 }
 
+function switchView(album: albums) {
+  store.setAlbums(album);
+  hideDropDown();
+}
+
 onClickOutside(dropOptionsRef, (e) => {
   e.stopImmediatePropagation();
   hideDropDown();

src/components/shared/ArtistName.vue

@@ -34,7 +34,7 @@ import { Routes } from "@/router/routes";
 
 const props = defineProps<{
   artists: Artist[] | null;
-  albumartists: Artist[] | null;
+  albumartists: Artist[] | string | null;
   small?: boolean;
   smaller?: boolean;
 }>();