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">
            <template v-if="schedule.first_date === schedule.last_date">
              {{ prettyDate(parseISO(schedule.first_date)) }} <br />
            </template>

            {{ 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 { parseISO } from 'date-fns'
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: {
    parseISO,
    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: 0.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>