handle discs in album page

src/components/FolderView/SongList.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="folder">
     <div class="table rounded" v-if="tracks.length">
+      <div class="header" v-if="disc">
+        <div class="disc-number">Disc {{ disc }}</div>
+      </div>
       <div class="songlist">
         <SongItem
           v-for="track in getTracks()"
@@ -40,6 +43,7 @@ const props = defineProps<{
   pname?: string;
   playlistid?: string;
   on_album_page?: boolean;
+  disc?: string | number;
 }>();
 
 const route = useRoute();
@@ -135,6 +139,17 @@ function getTracks() {
   background-color: $gray5;
   padding: $small 0;
 
+  .header {
+    margin: $small;
+
+    .disc-number {
+      font-size: small;
+      font-weight: bold;
+      margin: $small 1.5rem;
+      color: $gray1;
+    }
+  }
+
   .current {
     a {
       color: inherit;

src/interfaces.ts

@@ -14,7 +14,7 @@ export interface Track {
   genre?: string;
   image: string;
   tracknumber?: number;
-  disknumber?: number;
+  discnumber?: number;
   index?: number;
   uniq_hash: string;
 }

src/views/album/Content.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="songs rounded">
-    <SongList :tracks="tracks" :on_album_page="true" />
+  <div class="album-tracks rounded">
+    <div v-for="(disc, key) in discs" class="album-disc">
+      <SongList :key="key" :tracks="disc" :on_album_page="true" :c="key" />
+    </div>
   </div>
 </template>
 
@@ -9,6 +11,15 @@ import { Track } from "@/interfaces";
 import SongList from "@/components/FolderView/SongList.vue";
 
 defineProps<{
-  tracks: Track[];
+  discs: {
+    [key: string]: Track[];
+  };
 }>();
 </script>
+
+<style lang="scss">
+.album-tracks {
+  display: grid;
+  gap: 1rem;
+}
+</style>

src/views/album/index.vue

@@ -4,7 +4,7 @@
       <Header :album="album.info" />
     </template>
     <template #content>
-      <Content :tracks="album.tracks" />
+      <Content :discs="discs" />
     </template>
     <template #bottom>
       <Bottom
@@ -28,14 +28,36 @@ import Page from "@/layouts/HeaderContentBottom.vue";
 import Bottom from "./Bottom.vue";
 import Content from "./Content.vue";
 import Header from "./Header.vue";
+import { Track } from "@/interfaces";
+import { ref } from "vue";
 
 const album = useAStore();
 
+// function that takes in a Track[] and returns a Track[][] which is a list of tracks split into discs
+interface Disc {
+  [key: string]: Track[];
+}
+
+function createDiscs(tracks: Track[]): Disc {
+  // group tracks by disc using array.reduce
+  return tracks.reduce((group, track) => {
+    const { discnumber } = track;
+    group[discnumber] = group[discnumber] ?? [];
+    group[discnumber].push(track);
+    return group;
+  }, {} as Disc);
+}
+
+const discs = ref(createDiscs(album.tracks));
+
+console.log(discs.value);
 function fetchAlbumBio(params: RouteParams) {
   album.fetchBio(params.hash.toString());
 }
 
 onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
-  await album.fetchTracksAndArtists(to.params.hash.toString());
+  await album.fetchTracksAndArtists(to.params.hash.toString()).then(() => {
+    discs.value = createDiscs(album.tracks);
+  });
 });
 </script>