vue-wp/vue-theme/src/components/sidebars/exhibitions.vue

<template lang="pug">
//- most recent upcoming exhibition - sidebar in events list - max=2?
h3.t-up {{ listType }} exhibitions
ul.t-up
    li(v-for="post in exhibitions")
        featured-image(:post="post", thumbsize="'standard'")
        router-link(:to="`/exhibition/${post.slug}`")
            p.t-up {{ post.title }}
        p {{ dateFrom(post.start, false) }} &ndash; {{ dateFrom(post.end, false) }}
</template>

<script>
import featuredImage from '@/components/featured-image'
import { postTypeGetters } from '@/pages/mixin-post-types'
import { sortTypes } from '@/utils/helpers'

export default {
    mixins: [postTypeGetters],
    components: { featuredImage },
    computed: {
        loaded() {
            return this[`allExhibitionsLoaded`]
        },
        exhibitions() {
            return this[`upcomingAndCurrentExhibitions`]
        },
    },
    data() {
        return {
            listType: 'upcoming',
        }
    },
    methods: {
        dateFrom(unix, includeTime) {
            const d = new Date(parseInt(unix) * 1000)
            return includeTime ? d.toLocaleString('en-US', { timeZone: 'UTC' }) : d.toLocaleDateString('en-US')
        },
        async getPosts() {
            this.$store.commit('CLEAR_EXHIBITIONS')
            const upcoming = this.$store.dispatch(
                `getAllExhibitions`,
                {
                    sortType: sortTypes.currentAndUpcoming,
                    params: {
                        limit: 99,
                        page: 1
                    }
                }
            )
            if (upcoming.length < 1) {
                // this.listType = 'past'
                // this.$store.dispatch(`getAllExhibitions`, sortTypes.past)
            }
        },
    },
    created() {
        this.getPosts()
    },
}
</script>