Fixed #33: sort by track position in album in API vy default, also reuse that information on frontend side

api/funkwhale_api/music/models.py

@@ -27,6 +27,7 @@ class APIModelMixin(models.Model):
     api_includes = []
     creation_date = models.DateTimeField(default=timezone.now)
     import_hooks = []
+
     class Meta:
         abstract = True
         ordering = ['-creation_date']
@@ -291,6 +292,9 @@ class Track(APIModelMixin):
     ]
     tags = TaggableManager()
 
+    class Meta:
+        ordering = ['album', 'position']
+
     def __str__(self):
         return self.title
 
@@ -386,6 +390,8 @@ class ImportJob(models.Model):
     )
     status = models.CharField(choices=STATUS_CHOICES, default='pending', max_length=30)
 
+    class Meta:
+        ordering = ('id', )
     @celery.app.task(name='ImportJob.run', filter=celery.task_method)
     def run(self, replace=False):
         try:

api/funkwhale_api/music/serializers.py

@@ -62,7 +62,15 @@ class TrackSerializer(LyricsMixin):
     tags = TagSerializer(many=True, read_only=True)
     class Meta:
         model = models.Track
-        fields = ('id', 'mbid', 'title', 'artist', 'files', 'tags', 'lyrics')
+        fields = (
+            'id',
+            'mbid',
+            'title',
+            'artist',
+            'files',
+            'tags',
+            'position',
+            'lyrics')
 
 class TrackSerializerNested(LyricsMixin):
     artist = ArtistSerializer()

front/src/components/audio/album/Card.vue

@@ -22,6 +22,9 @@
                 </td>
                 <td colspan="6">
                   <router-link class="track discrete link" :to="{name: 'library.track', params: {id: track.id }}">
+                    <template v-if="track.position">
+                      {{ track.position }}.
+                    </template>
                     {{ track.title }}
                   </router-link>
                 </td>

front/src/components/audio/track/Table.vue

@@ -20,9 +20,12 @@
           <img class="ui mini image" v-else src="../../..//assets/audio/default-cover.png">
         </td>
         <td colspan="6">
-            <router-link class="track" :to="{name: 'library.track', params: {id: track.id }}">
-              {{ track.title }}
-            </router-link>
+          <router-link class="track" :to="{name: 'library.track', params: {id: track.id }}">
+            <template v-if="displayPosition && track.position">
+              {{ track.position }}.
+            </template>
+            {{ track.title }}
+          </router-link>
         </td>
         <td colspan="6">
           <router-link class="artist discrete link" :to="{name: 'library.artist', params: {id: track.artist.id }}">
@@ -46,7 +49,10 @@ import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
 import PlayButton from '@/components/audio/PlayButton'
 
 export default {
-  props: ['tracks'],
+  props: {
+    tracks: {type: Array, required: true},
+    displayPosition: {type: Boolean, default: false}
+  },
   components: {
     TrackFavoriteIcon,
     PlayButton

front/src/components/library/Album.vue

@@ -34,7 +34,7 @@
       </div>
       <div class="ui vertical stripe segment">
         <h2>Tracks</h2>
-        <track-table v-if="album" :tracks="album.tracks"></track-table>
+        <track-table v-if="album" display-position="true" :tracks="album.tracks"></track-table>
       </div>
     </template>
   </div>