Schedules.vue

<template>
    <div
        v-if="schedules.length > 0"
        :class="{ 'show-schedules': true, 'expandable': isExpandable, 'collapsed': isExpandable && collapsed }"
        @click="expand"
    >
        <table class="table b-table table-striped border">
            <thead>
                <tr>
                    <th class="top-header">
                        {{ uppercaseFirst($t('showSchedules.schedule')) }}
                    </th>
                    <th class="top-header text-right font-weight-normal">
                        {{ schedules.length }}
                        {{ schedules.length === 1
                            ? $t('showSchedules.schedule')
                            : $t('showSchedules.schedules')
                        }}
                    </th>
                </tr>
            </thead>

            <tbody>
                <tr
                    v-for="schedule in schedules"
                    :key="schedule.id"
                >
                    <td>
                        {{ renderRruleForSchedule(schedule) }}
                    </td>
                    <td class="text-right">
                        {{ prettyHours(schedule.start_time) }} - {{ prettyHours(schedule.end_time) }}
                    </td>
                </tr>
            </tbody>
        </table>

        <div
            v-if="isExpandable"
            class="collapser"
        >
            {{ $t('showSchedules.collapse') }}
        </div>
    </div>

    <div
        v-else
        class="border p-4 mb-4"
    >
        {{ $t('showSchedules.noSchedulesAvailable') }}
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import rrules from '../../mixins/rrules'
    import prettyDate from '../../mixins/prettyDate'
    import {lowercaseFirst, uppercaseFirst} from "@/utilities"

    export default {
        mixins: [
            rrules,
            prettyDate
        ],

        data() {
            return {
                collapsed: true
            }
        },

        computed: {
            ...mapGetters({
                schedules: 'shows/schedules',
                selectedShow: 'shows/selectedShow',
            }),
            isExpandable() {
                return this.schedules.length > 2
            }
        },

        created() {
            this.getSchedules()
        },

        methods: {
            uppercaseFirst,

            expand() {
                this.collapsed = !this.collapsed
            },

            getSchedules() {
                this.$store.dispatch('shows/fetchSchedules', {show: this.selectedShow.id})
            },

            renderRruleForSchedule(schedule) {
                if (schedule.rrule < 3) {
                    return uppercaseFirst(this.rruleRender(schedule.rrule))
                }

                const rrule = uppercaseFirst(this.rruleRender(schedule.rrule))
                const weekday = lowercaseFirst(this.prettyWeekday(schedule.by_weekday))

                return `${rrule} ${weekday}s`
            }
        },
    }
</script>

<style scoped>
    .show-schedules {
        box-sizing: border-box;
        width: 100%;
        margin-bottom: .5rem;
        position: relative;
        overflow-y: hidden;
    }

    .show-schedules:hover {
        cursor: pointer;
    }

    .show-schedules.expandable {
        margin-bottom: 1rem;
    }


    .show-schedules.collapsed {
        height: 10rem;
    }

    .show-schedules.collapsed::after {
        content: "click to expand";
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 9) 66%);
        height: 4rem;
        width: 100%;
        z-index: 1;
        bottom: 0;
        position: absolute;
    }

    .show-schedules.collapsed::after,
    .collapser {
        text-align: center;
        color: var(--info);
    }

    .show-schedules:hover:after,
    .show-schedules:hover .collapser {
        text-decoration: underline;
    }
</style>