TimeSlotList.vue

<template>
  <ASection :title="t('showTimeslots.title')">
    <template #header>
      <Popover class="tw-relative">
        <!-- TODO: this span is on purpose because headless ui seems to interfere with vue compat -->
        <PopoverButton as="span">
          <button type="button" class="btn btn-default">
            <icon-system-uicons-filter />
            {{ t('showTimeslots.filter') }}
          </button>
        </PopoverButton>

        <PopoverPanel
          :unmount="false"
          class="tw-absolute tw-mt-3 tw-right-0 tw-w-max tw-max-w-sm tw-top-full tw-z-20 tw-bg-white tw-p-6 tw-shadow-lg tw-rounded-lg"
        >
          <TimeSlotFilter v-model="page" class="tw-flex-col" @paginate="paginationData = $event" />
        </PopoverPanel>
      </Popover>
    </template>

    <div class="aura-table-wrapper">
      <table ref="tableEl" class="aura-table">
        <thead class="tw-sticky tw-top-0 tw-bg-white">
          <tr>
            <th></th>
            <th>{{ t('emissionTable.title') }}</th>
            <th>{{ t('emissionTable.start') }}</th>
            <th>{{ t('emissionTable.duration') }}</th>
            <th>{{ t('emissionTable.playlist') }}</th>
            <th class="tw-text-right">{{ t('emissionTable.actions') }}</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="timeslot in timeslots" :key="timeslot.id">
            <TimeSlotRow class="tw-transition hover:tw-bg-gray-50" :timeslot="timeslot" />
          </template>
          <template v-if="!hasTimeslots">
            <tr>
              <td colspan="6">
                <p class="tw-text-center tw-p-3 tw-m-0">
                  {{ t('showTimeslots.noTimeslotsScheduled') }}
                </p>
              </td>
            </tr>
          </template>
        </tbody>
      </table>

      <div
        v-if="paginationData"
        class="tw-flex 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="paginationData.count > 0" :pagination-data="paginationData" />
        <Pagination
          v-model="page"
          class="tw-ml-auto"
          :items-per-page="paginationData.itemsPerPage"
          :count="paginationData.count"
        />
      </div>
    </div>
  </ASection>
</template>

<script lang="ts" setup>
import { computed, ref, watchEffect } from 'vue'
import { useStore } from 'vuex'
import { Popover, PopoverPanel, PopoverButton } from '@headlessui/vue'
import { useI18n } from '@/i18n'
import TimeSlotFilter from './TimeSlotFilter.vue'
import TimeSlotRow from '@/components/shows/TimeSlotRow.vue'
import { PaginationData } from '@/types'
import Pagination from '@/components/generic/Pagination.vue'
import PaginationRange from '@/components/generic/PaginationRange.vue'
import ASection from '@/components/generic/ASection.vue'

defineOptions({
  compatConfig: { MODE: 3 },
  ATTR_FALSE_VALUE: false,
})

const { t } = useI18n()
const store = useStore()
const page = ref(1)
const paginationData = ref<PaginationData>()
const timeslots = computed(() => store.getters['shows/timeslots'])
const tableEl = ref<HTMLTableElement>()
const hasPageBeenModified = ref(false)
const hasTimeslots = computed(() => paginationData.value?.count !== 0)

watchEffect(() => {
  if (page.value !== 1) {
    hasPageBeenModified.value = true
  }
  if (hasPageBeenModified.value && tableEl.value) {
    tableEl.value.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
  }
})
</script>