refactor: re-work TimeslotFilter/TimeslotList for new timeslot Pinia store

src/components/shows/TimeSlotFilter.vue

 <template>
-  <div class="tw-flex tw-gap-6 tw-whitespace-nowrap">
-    <label class="form-group tw-mb-0">
-      <span class="form-label">{{ t('showTimeslots.numberOfSlots') }}</span>
-      <input v-model.number="numberOfTimeslots" type="number" class="form-control" />
-    </label>
-
-    <label class="form-group tw-mb-0">
-      <span class="form-label">{{ t('showTimeslots.from') }}</span>
-      <input v-model="formattedStartDate" type="date" class="form-control" />
-    </label>
-
-    <label class="form-group tw-mb-0">
-      <span class="form-label">{{ t('showTimeslots.to') }}</span>
-      <input v-model="formattedEndDate" type="date" class="form-control" />
-    </label>
+  <div class="tw-whitespace-nowrap">
+    <FormGroup v-slot="attrs" :label="t('showTimeslots.numberOfSlots')">
+      <input v-model.number="numberOfTimeslots" type="number" v-bind="attrs" />
+    </FormGroup>
+
+    <FormGroup v-slot="attrs" :label="t('showTimeslots.from')">
+      <input v-model="startDate" type="date" v-bind="attrs" />
+    </FormGroup>
+
+    <FormGroup v-slot="attrs" :label="t('showTimeslots.to')">
+      <input v-model="endDate" type="date" v-bind="attrs" />
+    </FormGroup>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { addDays } from 'date-fns'
-import { computed, ref, watch, watchEffect } from 'vue'
-import { useStore } from 'vuex'
 import { useI18n } from '@/i18n'
-import { useSelectedShow } from '@/utilities'
-import { useFormattedISODate } from '@/util'
-import { PaginationData } from '@/types'
-
-const DEFAULT_DATE_OFFSET = parseInt(import.meta.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS)
-const DEFAULT_TIMESLOT_LIMIT = parseInt(import.meta.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS)
+import FormGroup from '@/components/generic/FormGroup.vue'
 
-type PaginationResponseData = {
-  count: number
-  next: string | null
-  previous: string | null
-}
+defineOptions({ compatConfig: { MODE: 3 } })
 
-const props = defineProps<{
-  modelValue: number
-}>()
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: number): void
-  (e: 'paginate', value: PaginationData): void
-}>()
+const numberOfTimeslots = defineModel<number>('numberOfTimeslots', { required: true })
+const startDate = defineModel<string>('startDate', { required: true })
+const endDate = defineModel<string>('endDate', { required: true })
 
-const store = useStore()
 const { t } = useI18n()
-const selectedShow = useSelectedShow()
-const numberOfTimeslots = ref(DEFAULT_TIMESLOT_LIMIT)
-const startDate = ref(new Date())
-const formattedStartDate = useFormattedISODate(startDate)
-const endDate = ref(addDays(startDate.value, DEFAULT_DATE_OFFSET))
-const formattedEndDate = useFormattedISODate(endDate)
-const page = computed({
-  get: () => props.modelValue,
-  set: (page: number) => {
-    emit('update:modelValue', page)
-  },
-})
-
-watch([numberOfTimeslots, startDate, endDate], () => (page.value = 1))
-watchEffect(
-  () => {
-    store.dispatch('shows/fetchTimeslots', {
-      id: selectedShow.value.id,
-      start: formattedStartDate.value,
-      end: formattedEndDate.value,
-      limit: numberOfTimeslots.value,
-      offset: (page.value - 1) * numberOfTimeslots.value,
-      callback({ data }: { data: PaginationResponseData }) {
-        emit('paginate', {
-          count: data.count,
-          hasNext: data.next !== null,
-          hasPrevious: data.previous !== null,
-          itemsPerPage: numberOfTimeslots.value,
-          itemRange: [
-            (page.value - 1) * numberOfTimeslots.value + 1,
-            Math.min(data.count, page.value * numberOfTimeslots.value),
-          ],
-          page: page.value,
-        })
-      },
-    })
-  },
-  { flush: 'post' },
-)
-</script>
-
-<script lang="ts">
-export default {
-  compatConfig: {
-    MODE: 3,
-  },
-}
 </script>

src/components/shows/TimeSlotList.vue

@@ -14,7 +14,11 @@
           :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" />
+          <TimeSlotFilter
+            v-model:number-of-timeslots="limit"
+            v-model:start-date="formattedStartDate"
+            v-model:end-date="formattedEndDate"
+          />
         </PopoverPanel>
       </Popover>
     </template>
@@ -32,7 +36,7 @@
           </tr>
         </thead>
         <tbody>
-          <template v-for="timeslot in timeslots" :key="timeslot.id">
+          <template v-for="timeslot in result.items" :key="timeslot.id">
             <TimeSlotRow class="tw-transition hover:tw-bg-gray-50" :timeslot="timeslot" />
           </template>
           <template v-if="!hasTimeslots">
@@ -48,15 +52,14 @@
       </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" />
+        <PaginationRange v-if="result.count > 0" :pagination-data="result" />
         <Pagination
           v-model="page"
           class="tw-ml-auto"
-          :items-per-page="paginationData.itemsPerPage"
-          :count="paginationData.count"
+          :items-per-page="result.itemsPerPage"
+          :count="result.count"
         />
       </div>
     </div>
@@ -65,29 +68,56 @@
 
 <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'
+import { Show } from '@/types'
+import { useTimeSlotStore } from '@/stores/timeslots'
+import { usePaginatedList } from '@rokoli/bnb/drf'
+import { useFormattedISODate } from '@/util'
+import { addDays } from 'date-fns'
+import { useEventListener } from '@vueuse/core'
+
+const DEFAULT_TIMESLOT_LIMIT = parseInt(import.meta.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS)
+const DEFAULT_DATE_OFFSET = parseInt(import.meta.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS)
 
 defineOptions({
   compatConfig: { MODE: 3 },
   ATTR_FALSE_VALUE: false,
 })
 
+const props = defineProps<{
+  show: Show
+}>()
+
 const { t } = useI18n()
-const store = useStore()
+const timeslotStore = useTimeSlotStore()
+
 const page = ref(1)
-const paginationData = ref<PaginationData>()
-const timeslots = computed(() => store.getters['shows/timeslots'])
+const limit = ref(DEFAULT_TIMESLOT_LIMIT)
+const startDate = ref(new Date())
+const formattedStartDate = useFormattedISODate(startDate)
+const endDate = ref(addDays(startDate.value, DEFAULT_DATE_OFFSET))
+const formattedEndDate = useFormattedISODate(endDate)
 const tableEl = ref<HTMLTableElement>()
 const hasPageBeenModified = ref(false)
-const hasTimeslots = computed(() => paginationData.value?.count !== 0)
+const query = computed(
+  () =>
+    new URLSearchParams({
+      showIds: props.show.id.toString(),
+      start: formattedStartDate.value,
+      end: formattedEndDate.value,
+    }),
+)
+const { result } = usePaginatedList(timeslotStore.listIsolated, page, limit, {
+  query,
+  events: timeslotStore.events,
+})
+const hasTimeslots = computed(() => result.value.count > 0)
 
 watchEffect(() => {
   if (page.value !== 1) {