implement album sort

src/library/album/AlbumLibrary.vue

@@ -1,43 +1,59 @@
 <template>
   <div>
+    <ul class="nav-underlined">
+      <li v-for="{ value, text } in categories" :key="value">
+        <router-link :to="{... $route, params: {... $route.params, sort: value }}">
+          {{ text }}
+        </router-link>
+      </li>
+    </ul>
     <Spinner v-slot="{ data }" :data="albums">
-      <AlbumList :items="data" />
+      <AlbumList v-if="albums" :items="data" />
     </Spinner>
   </div>
 </template>
 <script lang="ts">
   import Vue from 'vue'
   import AlbumList from './AlbumList.vue'
-  import { AlbumSort, Album } from '@/shared/api'
+  import { Album, AlbumSort } from '@/shared/api'
+
+  const categoryToSort = {
+    'a-z': 'alphabeticalByName',
+    'recently-added': 'newest',
+    'recently-played': 'recent',
+    'most-played': 'frequent',
+    random: 'random',
+  } as {[key: string]: AlbumSort}
 
   export default Vue.extend({
     components: {
       AlbumList,
     },
+    props: {
+      sort: { type: String, required: true },
+    },
     data() {
       return {
-        sort: 'newest',
         albums: null as null | Album[],
       }
     },
     computed: {
-      sortOptions() {
+      categories() {
         return [
-          { text: 'A-Z', value: 'alphabeticalByName' },
+          { text: 'A-Z', value: 'a-z' },
-          { text: 'Date', value: 'newest' },
+          { text: 'Recently added', value: 'recently-added' },
-          { text: 'frequent', value: 'frequent' },
+          { text: 'Recently played', value: 'recently-played' },
-        // { text: "random", value: "random" },
+          { text: 'Most played', value: 'most-played' },
-        // { text: "recent", value: "recent" },
+          { text: 'Random', value: 'random' },
-        // { text: "starred", value: "starred" },
         ]
       }
     },
     watch: {
       sort: {
         immediate: true,
-        handler(value: AlbumSort) {
+        handler(value: string) {
           this.albums = null
-          this.$api.getAlbums(value).then(albums => {
+          this.$api.getAlbums(categoryToSort[value]).then(albums => {
             this.albums = albums
           })
         }

src/shared/router.ts

@@ -42,7 +42,16 @@ export function setupRouter(auth: AuthService) {
       {
         name: 'albums',
         path: '/albums',
-        component: AlbumLibrary
+        redirect: {
+          name: 'albums-params',
+          params: { sort: 'a-z' }
+        }
+      },
+      {
+        name: 'albums-params',
+        path: '/albums/:sort',
+        component: AlbumLibrary,
+        props: true
       },
       {
         name: 'album',

src/style/main.scss

@@ -62,6 +62,8 @@ h1, h2, h3, h4, h5 {
   box-shadow: none !important;
 }
 
+@import './nav';
+
 $enable-print-styles: false;
 $enable-responsive-font-sizes: true;
 

src/style/nav.scss

@@ -0,0 +1,28 @@
+ul.nav-underlined {
+  white-space: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-left: 0;
+
+  li {
+    display: inline-block;
+    float: none;
+    a {
+      display: block;
+      padding: 0.5rem 1rem;
+    }
+    a:hover, a:focus {
+      text-decoration: none;
+    }
+    a.active {
+      border-bottom: 2px solid;
+    }
+    a.active:hover {
+      color: var(--primary);
+    }
+  }
+}
+
+ul.nav-underlined::-webkit-scrollbar {
+  display: none;
+}