Schedules.vue

<template>
  <div
    v-if="schedules.length > 0"
    :class="{
      'show-schedules': true,
      expandable: isExpandable,
      collapsed: isExpandable && isCollapsed,
    }"
    @click="isCollapsed = !isCollapsed"
  >
    <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 setup>
import { parseISO } from 'date-fns'
import { useStore } from 'vuex'
import { useRRule } from '@/mixins/rrules'
import { usePretty } from '@/mixins/prettyDate'
import { lowercaseFirst, uppercaseFirst, useSelectedShow } from '@/utilities'
import { computed, ref, watch } from 'vue'
import { useI18n } from '@/i18n'

const { t } = useI18n()
const { rruleRender } = useRRule()
const { prettyWeekday, prettyDate, prettyHours } = usePretty()
const store = useStore()
const selectedShow = useSelectedShow()
const schedules = computed(() => store.state.shows.schedules)
const isExpandable = computed(() => schedules.value.length > 2)

const isCollapsed = ref(true)

function updateSchedules() {
  if (selectedShow.value) {
    store.dispatch('shows/fetchSchedules', { show: selectedShow.value.id })
  }
}

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

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

  return `${rrule} ${weekday}s`
}

// TODO[#127]: this belongs in the store
watch(selectedShow, updateSchedules, { immediate: true })
</script>

<script>
export default {
  compatConfig: {
    MODE: 3,
  },
}
</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>