Skip to content
Snippets Groups Projects
Commit 386fde9d authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt :koala:
Browse files

feat: add pagination to schedule list

parent 46bfda46
No related branches found
No related tags found
No related merge requests found
...@@ -31,12 +31,20 @@ ...@@ -31,12 +31,20 @@
</tr> </tr>
</tbody> </tbody>
</table> </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> </div>
</ASection> </ASection>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { usePaginatedList } from '@rokoli/bnb/drf' import { usePaginatedList } from '@rokoli/bnb/drf'
import { ref } from 'vue'
import { useI18n } from '@/i18n' import { useI18n } from '@/i18n'
import { useScheduleStore } from '@/stores/schedules' import { useScheduleStore } from '@/stores/schedules'
...@@ -45,6 +53,8 @@ import { useQuery } from '@/util' ...@@ -45,6 +53,8 @@ import { useQuery } from '@/util'
import ASection from '@/components/generic/ASection.vue' import ASection from '@/components/generic/ASection.vue'
import ScheduleRow from './ScheduleRow.vue' import ScheduleRow from './ScheduleRow.vue'
import Pagination from '@/components/generic/Pagination.vue'
import PaginationRange from '@/components/generic/PaginationRange.vue'
defineOptions({ compatConfig: { MODE: 3 } }) defineOptions({ compatConfig: { MODE: 3 } })
...@@ -54,7 +64,8 @@ const props = defineProps<{ ...@@ -54,7 +64,8 @@ const props = defineProps<{
const { t } = useI18n() const { t } = useI18n()
const scheduleStore = useScheduleStore() const scheduleStore = useScheduleStore()
const { result } = usePaginatedList(scheduleStore.listIsolated, 1, 100, { const page = ref(1)
const { result } = usePaginatedList(scheduleStore.listIsolated, page, 100, {
query: useQuery(() => ({ query: useQuery(() => ({
showIds: props.show.id, showIds: props.show.id,
excludeInactive: '1', excludeInactive: '1',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment