From 25c9da4c82b83a3023672823928ce3642948d15e Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Fri, 16 Sep 2022 19:10:09 +0700
Subject: [PATCH] fix: properly sort album/artist songs (closes #1486)

---
 resources/assets/js/components/screens/AlbumScreen.vue  | 5 ++++-
 resources/assets/js/components/screens/ArtistScreen.vue | 3 ++-
 resources/assets/js/composables/useSongList.ts          | 6 +++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/components/screens/AlbumScreen.vue b/resources/assets/js/components/screens/AlbumScreen.vue
index 20debd53..9dea4b3b 100644
--- a/resources/assets/js/components/screens/AlbumScreen.vue
+++ b/resources/assets/js/components/screens/AlbumScreen.vue
@@ -38,7 +38,7 @@
     </ScreenHeader>
 
     <SongListSkeleton v-if="loading"/>
-    <SongList v-else ref="songList" @press:enter="onPressEnter" @scroll-breakpoint="onScrollBreakpoint"/>
+    <SongList v-else ref="songList" @sort="sort" @press:enter="onPressEnter" @scroll-breakpoint="onScrollBreakpoint"/>
 
     <section v-if="!loading && useLastfm && showingInfo" class="info-wrapper">
       <CloseModalBtn class="close-modal" @click="showingInfo = false"/>
@@ -85,6 +85,7 @@ const {
   showingControls,
   isPhone,
   duration,
+  sort,
   onPressEnter,
   playAll,
   playSelected,
@@ -110,6 +111,8 @@ onMounted(async () => {
       albumStore.resolve(id.value),
       songStore.fetchForAlbum(id.value)
     ])
+
+    sort('track')
   } catch (e) {
     logger.error(e)
     dialog.value.error('Failed to load album. Please try again.')
diff --git a/resources/assets/js/components/screens/ArtistScreen.vue b/resources/assets/js/components/screens/ArtistScreen.vue
index 05960a6e..43d2c9bd 100644
--- a/resources/assets/js/components/screens/ArtistScreen.vue
+++ b/resources/assets/js/components/screens/ArtistScreen.vue
@@ -38,7 +38,7 @@
     </ScreenHeader>
 
     <SongListSkeleton v-if="loading"/>
-    <SongList v-else ref="songList" @press:enter="onPressEnter" @scroll-breakpoint="onScrollBreakpoint"/>
+    <SongList v-else ref="songList" @sort="sort" @press:enter="onPressEnter" @scroll-breakpoint="onScrollBreakpoint"/>
 
     <section v-if="!loading && useLastfm && showingInfo" class="info-wrapper">
       <CloseModalBtn class="close-modal" @click="showingInfo = false"/>
@@ -82,6 +82,7 @@ const {
   showingControls,
   isPhone,
   duration,
+  sort,
   onPressEnter,
   playAll,
   playSelected,
diff --git a/resources/assets/js/composables/useSongList.ts b/resources/assets/js/composables/useSongList.ts
index 9598fd0f..3cf12a88 100644
--- a/resources/assets/js/composables/useSongList.ts
+++ b/resources/assets/js/composables/useSongList.ts
@@ -81,11 +81,11 @@ export const useSongList = (songs: Ref<Song[]>, type: SongListType, config: Part
     let sortFields: SongListSortField[] = [by]
 
     if (by === 'track') {
-      sortFields.push('disc', 'title')
+      sortFields = ['disc', 'track', 'title']
     } else if (by === 'album_name') {
-      sortFields.push('artist_name', 'track', 'disc', 'title')
+      sortFields.push('artist_name', 'disc', 'track', 'title')
     } else if (by === 'artist_name') {
-      sortFields.push('album_name', 'track', 'disc', 'title')
+      sortFields.push('album_name', 'disc', 'track', 'title')
     }
 
     songs.value = orderBy(songs.value, sortFields, order)