ScheduleRow.vue

<template>
  <tr
    :aria-label="
      t(
        schedule.lastDate
          ? 'showSchedules.scheduleDescriptionFinite'
          : 'showSchedules.scheduleDescription',
        {
          rhythm: rruleLabel,
          startDate: prettyDate(parseISO(schedule.firstDate)),
          endDate: schedule.lastDate ? prettyDate(parseISO(schedule.lastDate)) : '',
          startTime: stripSecondsFromTimeString(schedule.startTime),
          endTime: schedule.endTime ? stripSecondsFromTimeString(schedule.endTime) : '',
        },
      )
    "
  >
    <th scope="row">
      <span v-bind="rruleAttrs">{{ rruleLabel }}</span>
    </th>
    <td :colspan="schedule.firstDate === schedule.lastDate ? 2 : 1">
      {{ prettyDate(parseISO(schedule.firstDate)) }}
    </td>
    <td v-if="schedule.firstDate !== schedule.lastDate">
      <template v-if="schedule.lastDate">
        {{ prettyDate(parseISO(schedule.lastDate)) }}
      </template>
      <template v-else> offen </template>
    </td>
    <td class="tw-text-right">
      {{ stripSecondsFromTimeString(schedule.startTime) }}
      <template v-if="schedule.endTime"
        >- {{ stripSecondsFromTimeString(schedule.endTime) }}</template
      >
    </td>
  </tr>
</template>
<script setup lang="ts">
import { parseISO } from 'date-fns'
import { stripSecondsFromTimeString } from '@/util'
import { Schedule } from '@/types'
import { usePretty } from '@/mixins/prettyDate'
import { useRRuleLabel, useRRuleStore } from '@/stores/rrules'
import { useObjectFromStore } from '@rokoli/bnb/drf'
import { useI18n } from '@/i18n'

const props = defineProps<{
  schedule: Schedule
}>()

const { t } = useI18n()
const { prettyDate } = usePretty()
const rruleStore = useRRuleStore()
const { obj: rrule } = useObjectFromStore(() => props.schedule.rruleId, rruleStore)
const { label: rruleLabel, attrs: rruleAttrs } = useRRuleLabel(rrule, () => props.schedule)
</script>