vue-wp/vue-theme/src/pages/list.vue

<template lang="pug">
.page--list.f-row.between
    article.f-grow
        header.f-row.center
            h1 {{ type }} list
            span(v-if="sortBy")
                h1 &nbsp;sorted by {{ sortBy.replace('-', ' ') }}

        .posts(:class="{ 'is-grid': grid }")
            section(v-for="post in posts" :key="post.slug").shadow.post
                router-link(:to="`/${type}/${post.slug}`")
                    h4 {{ post.title }} 
                    p(style="font-size: 9px;") {{ post.date }}

        footer
            p {{ `${type} count: ${Object.values(posts).length}` }}
            p {{ `show sidebar: ${sidebar}` }}
        
    sidebar(v-if="sidebar" :type="`${type}`")
        .shadow
            h1.t-up slots stuff
            div
                p more body whatever
                p another line of stuff
</template>

<script>
import sidebar from '@/components/sidebars/sidebar'
import { postTypeGetters } from './mixin-post-types'

import { convertTitleCase, typeFromRoute, sortTypes } from '@/utils/helpers'

export default {
    components: { sidebar },
    props: {
        sidebar: { type: Boolean },
        grid: { type: Boolean },
        sortBy: { type: String }
    },
    mixins: [postTypeGetters],
    computed: {
        type() { // Checks for type and fixes Episodes route edge case 
            return typeFromRoute(this.$route)
        },
        dispatchName() {
            let type = convertTitleCase(this.type)
            return this.sortBy ? `getAll${type.split('/')[0]}` : `getAll${type}`
        },
        posts() {
            let type = convertTitleCase(this.type)
            if(!type) return

            /**
             * We override the API to sort by date
             * because items are returned by ID so
             * we need to resort it by date
             */ 
            let unsortedOfType = Object.values(this[`all${type}`])
            let sortedByRecent = unsortedOfType.sort((postA, postB) => new Date(postB.date) - new Date(postA.date))
            
            /**
             * Sorting of this[`all${type}`] is also controlled by API
             * so if a sortBy is specified we return it sorted or
             * we fail over to sorted by date
             */
            return this.sortBy ? this[`all${type}`] : sortedByRecent
        },
    },
    methods: {
        setHeroAndGetPosts() {
            let type = convertTitleCase(this.type)

            let sort = this.sortBy ? this.sortBy : this.$route.path.split('/').pop()
            
            console.log('trying to sort by:', sort)
            console.log('includes:', Object.values(sortTypes).includes(sort))

            // Is this a sort type?
            if(this.type !== sort || !Object.values(sortTypes).includes(sort)) sort = null
            
            // Don't dispatch if there's no type
            if(this.type) {
                this.$store.dispatch(this.dispatchName, sort)
            }
            
            if(this.$store.state.hero.url !== type) this.$store.commit('SET_HERO', type)
        }
    },
    watch: {
        $route(to, from){
            let type = convertTitleCase(this.type)
            let sort = this.sortBy ? this.sortBy : to.path.split('/').pop()
            
            if(!this[`all${type}Loaded`] || sort) this.setHeroAndGetPosts()
        }
    },
    created() {
        let type = convertTitleCase(this.type)
        // console.log('already loaded ?:', this[`all${type}Loaded`])
        
        if(!this[`all${type}Loaded`]) this.setHeroAndGetPosts()
    }
}
</script>

<style lang="postcss">
.page--list
    article
        .is-grid
            display: flex
            flex-direction: row
            flex-wrap: wrap
            section
                width: 33%
</style>