diff --git a/web/src/app/schedules/ScheduleOverrideList.jsx b/web/src/app/schedules/ScheduleOverrideList.jsx index 5801276994..4f415d7b67 100644 --- a/web/src/app/schedules/ScheduleOverrideList.jsx +++ b/web/src/app/schedules/ScheduleOverrideList.jsx @@ -2,8 +2,7 @@ import React, { Suspense, useCallback, useState } from 'react' import { Button, Grid, FormControlLabel, Switch, Tooltip } from '@mui/material' import { GroupAdd } from '@mui/icons-material' import { DateTime } from 'luxon' -import { gql } from 'urql' -import QueryList from '../lists/QueryList' +import { gql, useQuery } from 'urql' import { UserAvatar } from '../util/avatars' import OtherActions from '../util/OtherActions' import FilterContainer from '../util/FilterContainer' @@ -19,6 +18,8 @@ import TempSchedDialog from './temp-sched/TempSchedDialog' import { defaultTempSchedValue } from './temp-sched/sharedUtils' import ScheduleOverrideDialog from './ScheduleOverrideDialog' import CreateFAB from '../lists/CreateFAB' +import ListPageControls from '../lists/ListPageControls' +import FlatList from '../lists/FlatList' const query = gql` query scheduleOverrides($input: UserOverrideSearchOptions) { @@ -44,6 +45,7 @@ const query = gql` } } ` +const context = { suspense: false } export default function ScheduleOverrideList({ scheduleID }) { const isMobile = useIsWidthDown('md') @@ -64,6 +66,23 @@ export default function ScheduleOverrideList({ scheduleID }) { () => setConfigTempSchedule(defaultTempSchedValue(zone)), [], ) + const [cursor, setCursor] = useState('') + + const inputVars = { + scheduleID, + start: showPast ? null : now, + filterAnyUserID: userFilter, + after: cursor, + } + + const [q] = useQuery({ + query, + variables: { input: inputVars }, + context, + }) + const nextCursor = q.data?.userOverrides.pageInfo.hasNextPage + ? q.data?.userOverrides.pageInfo.endCursor + : '' const subText = (n) => { const tzTimeStr = formatOverrideTime(n.start, n.end, zone) @@ -118,81 +137,86 @@ export default function ScheduleOverrideList({ scheduleID }) { setOverrideDialog, }} > - ({ - title: n.addUser ? n.addUser.name : n.removeUser.name, - subText: subText(n), - icon: ( - - ), - action: ( - setEditID(n.id), - }, - { - label: 'Delete', - onClick: () => setDeleteID(n.id), - }, - ]} + ({ + title: n.addUser ? n.addUser.name : n.removeUser.name, + subText: subText(n), + icon: ( + + ), + action: ( + setEditID(n.id), + }, + { + label: 'Delete', + onClick: () => setDeleteID(n.id), + }, + ]} + /> + ), + })) || [] + } + headerAction={ + + resetFilter()}> + + setShowPast(e.target.checked)} + value='showPast' + /> + } + label='Show past overrides' + /> + + + setUserFilter(value)} + /> + + + {!isMobile && ( + + )} + + } /> ), - })} - variables={{ - input: { - scheduleID, - start: showPast ? null : now, - filterAnyUserID: userFilter, - }, }} - headerAction={ - - resetFilter()}> - - setShowPast(e.target.checked)} - value='showPast' - /> - } - label='Show past overrides' - /> - - - setUserFilter(value)} - /> - - - {!isMobile && ( - - )} - - } /> + {isMobile && (