ScheduleList.vue

<template>
  <ASection :title="t('showSchedules.title')">
    <template #header>
      <div class="tw-ml-auto">
        <RadioGroup
          v-model="scheduleSelection"
          :choices="[
            { value: 'all', label: t('showSchedules.selection.all') },
            { value: 'relevant', label: t('showSchedules.selection.relevant') },
          ]"
          name="display-mode"
        />
      </div>
    </template>

    <div class="aura-table-wrapper tw-mb-0">
      <table class="aura-table">
        <thead>
          <tr>
            <th scope="col">
              {{ t('showSchedules.rhythm') }}
            </th>
            <th scope="col">
              {{ t('showSchedules.firstBroadcast') }}
            </th>
            <th scope="col">
              {{ t('showSchedules.lastBroadcast') }}
            </th>
            <th scope="col" class="tw-text-right">
              {{ t('showSchedules.times') }}
            </th>
          </tr>
        </thead>

        <tbody>
          <ScheduleRow v-for="schedule in result.items" :key="schedule.id" :schedule="schedule" />

          <tr v-if="result.count === 0">
            <td colspan="4">
              <p class="tw-text-center tw-py-3 tw-m-0">
                {{ t('showSchedules.noSchedulesAvailable') }}
              </p>
            </td>
          </tr>
        </tbody>
      </table>

      <div
        class="tw-flex tw-flex-wrap tw-gap-3 tw-items-center tw-px-6 tw-mt-3 tw-py-3 tw-border-0 tw-border-t tw-border-solid tw-border-gray-200 empty:tw-hidden"
      >
        <PaginationRange v-if="result.count > 0" :pagination-data="result" />
        <Pagination v-model="page" :items-per-page="result.itemsPerPage" :count="result.count" />
      </div>
    </div>
  </ASection>
</template>

<script lang="ts" setup>
import { usePaginatedList } from '@rokoli/bnb/drf'
import { ref } from 'vue'

import { useI18n } from '@/i18n'
import { useScheduleStore } from '@/stores/schedules'
import { Show } from '@/types'
import { useQuery } from '@/util'

import ASection from '@/components/generic/ASection.vue'
import ScheduleRow from './ScheduleRow.vue'
import RadioGroup from '@/components/generic/RadioGroup.vue'
import Pagination from '@/components/generic/Pagination.vue'
import PaginationRange from '@/components/generic/PaginationRange.vue'

defineOptions({ compatConfig: { MODE: 3 } })

const props = defineProps<{
  show: Show
}>()

const { t } = useI18n()
const scheduleStore = useScheduleStore()
const page = ref(1)
const scheduleSelection = ref<'all' | 'relevant'>('relevant')
const { result } = usePaginatedList(scheduleStore.listIsolated, page, 100, {
  query: useQuery(() => ({
    showIds: props.show.id,
    excludeInactive: scheduleSelection.value === 'relevant' ? '1' : undefined,
  })),
})
</script>