refactor: re-work Schedules component for new schedules Pinia store

src/components/shows/Schedules.vue

 <template>
   <ASection :title="t('showSchedules.title')">
-    <template #header>
-      <button
-        v-if="collapseSchedules"
-        type="button"
-        class="btn btn-default"
-        aria-controls="schedule-collapsable"
-        :aria-expanded="!isCollapsed"
-        @click="isCollapsed = !isCollapsed"
-      >
-        {{ t(isCollapsed ? 'showSchedules.showAll' : 'showSchedules.hide') }}
-      </button>
-    </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>
 
-    <Collapse
-      id="schedule-collapsable"
-      :is-collapsed="collapseSchedules ? isCollapsed : false"
-      class="tw-mb-12"
-      peek="10rem"
-    >
-      <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>
-            <tr
-              v-for="schedule in relevantSchedules"
-              :key="schedule.id"
-              :aria-label="
-                t(
-                  schedule.lastDate
-                    ? 'showSchedules.scheduleDescriptionFinite'
-                    : 'showSchedules.scheduleDescription',
-                  {
-                    rhythm: renderRruleForSchedule(schedule),
-                    startDate: prettyDate(parseISO(schedule.firstDate)),
-                    endDate: schedule.lastDate ? prettyDate(parseISO(schedule.lastDate)) : '',
-                    startTime: prettyHours(schedule.startTime),
-                    endTime: prettyHours(schedule.endTime),
-                  },
-                )
-              "
-            >
-              <th scope="row">
-                {{ renderRruleForSchedule(schedule) }}
-              </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">
-                {{ prettyHours(schedule.startTime) }} - {{ prettyHours(schedule.endTime) }}
-              </td>
-            </tr>
-            <tr v-if="relevantSchedules.length === 0">
-              <td colspan="4">
-                <p class="tw-text-center tw-py-3 tw-m-0">
-                  {{ t('showSchedules.noSchedulesAvailable') }}
-                </p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </Collapse>
+        <tbody>
+          <tr
+            v-for="schedule in relevantSchedules"
+            :key="schedule.id"
+            :aria-label="
+              t(
+                schedule.lastDate
+                  ? 'showSchedules.scheduleDescriptionFinite'
+                  : 'showSchedules.scheduleDescription',
+                {
+                  rhythm: renderRruleForSchedule(schedule),
+                  startDate: prettyDate(parseISO(schedule.firstDate)),
+                  endDate: schedule.lastDate ? prettyDate(parseISO(schedule.lastDate)) : '',
+                  startTime: prettyHours(schedule.startTime),
+                  endTime: prettyHours(schedule.endTime),
+                },
+              )
+            "
+          >
+            <th scope="row">
+              {{ renderRruleForSchedule(schedule) }}
+            </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">
+              {{ prettyHours(schedule.startTime) }} - {{ prettyHours(schedule.endTime) }}
+            </td>
+          </tr>
+          <tr v-if="relevantSchedules.length === 0">
+            <td colspan="4">
+              <p class="tw-text-center tw-py-3 tw-m-0">
+                {{ t('showSchedules.noSchedulesAvailable') }}
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </ASection>
 </template>
 
 <script lang="ts" setup>
 import { parseISO } from 'date-fns'
-import { computed, ref, watch } from 'vue'
-import { useStore } from 'vuex'
+import { computed } from 'vue'
 
 import { useRRule } from '@/mixins/rrules'
 import { usePretty } from '@/mixins/prettyDate'
-import { lowercaseFirst, uppercaseFirst, useSelectedShow } from '@/utilities'
+import { lowercaseFirst, uppercaseFirst } from '@/utilities'
 import { useI18n } from '@/i18n'
-import { Schedule } from '@/types'
-import Collapse from '@/components/generic/Collapse.vue'
+import { Schedule, Show } from '@/types'
 import ASection from '@/components/generic/ASection.vue'
+import { useScheduleStore } from '@/stores/schedules'
+import { usePaginatedList } from '@rokoli/bnb/drf'
 
-defineOptions({
-  compatConfig: { MODE: 3 },
-})
+defineOptions({ compatConfig: { MODE: 3 } })
+
+const props = defineProps<{
+  show: Show
+}>()
 
 const { t } = useI18n()
 const { rruleRender } = useRRule()
 const { prettyWeekday, prettyDate, prettyHours } = usePretty()
-const store = useStore()
-const selectedShow = useSelectedShow()
-const schedules = computed<Schedule[]>(() => store.state.shows.schedules)
-const relevantSchedules = computed(() => schedules.value.filter((s) => !isPossiblyPastSchedule(s)))
-const collapseSchedules = computed(() => relevantSchedules.value.length > 2)
-const isCollapsed = ref(true)
+const scheduleStore = useScheduleStore()
+const { result: schedule } = usePaginatedList(scheduleStore.listIsolated, 1, 100, {
+  query: () => new URLSearchParams({ showIds: props.show.id.toString() }),
+})
+const relevantSchedules = computed(() =>
+  schedule.value.items.filter((s) => !isPossiblyPastSchedule(s)),
+)
 
 function isPossiblyPastSchedule(schedule: Schedule) {
-  // Recurrence rules get very complex very fast, so we only give
+  // Recurrence rules get complex very fast, so we only give
   // a definitive answer if a lastDate is set for this schedule.
   if (!schedule.lastDate) {
     return false
@@ -126,12 +109,6 @@ function isPossiblyPastSchedule(schedule: Schedule) {
   return new Date() > lastDate
 }
 
-function updateSchedules() {
-  if (selectedShow.value) {
-    store.dispatch('shows/fetchSchedules', { showId: selectedShow.value.id })
-  }
-}
-
 function renderRruleForSchedule(schedule: Schedule) {
   if (schedule.rruleId < 3) {
     return uppercaseFirst(rruleRender(schedule.rruleId))
@@ -142,7 +119,4 @@ function renderRruleForSchedule(schedule: Schedule) {
 
   return `${rrule} ${weekday}s`
 }
-
-// TODO[#127]: this belongs in the store
-watch(selectedShow, updateSchedules, { immediate: true })
 </script>