feat: sort by options in the list pages

vue-theme/src/index.js

@@ -18,11 +18,11 @@ const router = new VueRouter({
         { path: '/episodes', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: false } },
         { path: '/:type', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
         // Sorted List Pages 
-        { path: '/:type/alphabetized', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
-        { path: '/:type/most-recent', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
-        { path: '/:type/by-material', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
-        { path: '/:type/by-episode', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
-        { path: '/:type/by-artist', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
+        { path: '/:type/alphabetized', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'alphabetized' } },
+        { path: '/:type/most-recent', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'most-recent' } },
+        { path: '/:type/by-material', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-material' } },
+        { path: '/:type/by-episode', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-episode' } },
+        { path: '/:type/by-artist', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true, sortBy: 'by-artist' } },
         // Single Pages
         { path: '/:type/:slug', component: () => import(/* webpackChunkName: "pages-single" */ './pages/single.vue'), props: { sidebar: true } },
     ]

vue-theme/src/pages/list.vue

@@ -3,6 +3,8 @@
     article.f-grow
         header.f-row.center
             h1 {{ type }} list
+            span(v-if="sortBy")
+                h1  sorted by {{ sortBy.replace('-', ' ') }}
         section.shadow
             h4 {{ type }}
             p {{ Object.values(posts).length }}
@@ -27,6 +29,9 @@ export default {
     props: {
         sidebar: {
             type: Boolean
+        },
+        sortBy: {
+            type: String
         }
     },
     components: {
@@ -56,7 +61,13 @@ export default {
     },
     mounted() {
         let type = this.type.charAt(0).toUpperCase() + this.type.slice(1)
-        this.$store.dispatch(`getAll${type}`)
+        
+        if(this.sortBy) {
+            // TODO: Make a sorted call instead
+            this.$store.dispatch(`getAll${type}`)
+        } else {
+            this.$store.dispatch(`getAll${type}`)
+        }
     }
 }
 </script>