Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
<section>
<header class="tw-flex tw-items-center tw-gap-6 tw-mt-12 tw-mb-4">
<SectionTitle>{{ t('showTimeslots.title') }}</SectionTitle>
<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>
</header>
<div class="tw-bg-white tw-rounded tw-shadow tw-mb-12" style="contain: paint">
<table ref="tableEl" class="tw-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>{{ 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-pt-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>
</section>
</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 SectionTitle from '@/components/generic/SectionTitle.vue'
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>
<script lang="ts">
export default {
compatConfig: {
MODE: 3,
},
}
</script>
<style scoped>
.tw-table {
@apply tw-border-separate tw-border-spacing-0 tw-w-full;
}
.tw-table th {
@apply tw-text-sm tw-text-gray-500 tw-border-0 tw-border-b tw-border-solid tw-border-gray-200;
}
.tw-table th,
.tw-table :deep(td) {
@apply tw-py-2 tw-px-4;
}
.tw-table th:first-child,
.tw-table :deep(td:first-child) {
@apply tw-pl-6;
}
.tw-table th:first-child,
.tw-table :deep(td:last-child) {
@apply tw-pr-6;
}
</style>