diff --git a/frontend/app/components/UsabilityTesting/LiveTestsModal.tsx b/frontend/app/components/UsabilityTesting/LiveTestsModal.tsx new file mode 100644 index 000000000..18c6c33c9 --- /dev/null +++ b/frontend/app/components/UsabilityTesting/LiveTestsModal.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { useStore } from 'App/mstore'; +import { numberWithCommas } from 'App/utils'; +import { Input } from 'antd'; +import SessionItem from 'Shared/SessionItem'; +import { Pagination } from 'UI'; +import { observer } from 'mobx-react-lite'; + +function LiveTestsModal({ testId }: { testId: string }) { + const [page, setPage] = React.useState(1); + const [userId, setUserId] = React.useState(''); + const { uxtestingStore } = useStore(); + + React.useEffect(() => { + uxtestingStore.getAssistSessions(testId, page, undefined); + }, []); + + const refreshData = (page: number) => { + setPage(page); + uxtestingStore.getAssistSessions(testId, page, userId); + }; + + return ( +
+
+
Live Participants
+ setUserId(e.target.value)} + onSearch={() => refreshData(page)} + /> +
+ {uxtestingStore.testAssistSessions.list.map((s: any) => ( + + ))} +
+
+ Showing{' '} + {(uxtestingStore.testSessions.page - 1) * 10 + 1} to{' '} + + {(uxtestingStore.page - 1) * 10 + uxtestingStore.testSessions.list.length} + {' '} + of{' '} + {numberWithCommas(uxtestingStore.testSessions.total)}{' '} + ongoing tests. +
+ +
+
+ ); +} + +export default observer(LiveTestsModal); diff --git a/frontend/app/components/UsabilityTesting/TestOverview.tsx b/frontend/app/components/UsabilityTesting/TestOverview.tsx index c60658c9d..cf333eb24 100644 --- a/frontend/app/components/UsabilityTesting/TestOverview.tsx +++ b/frontend/app/components/UsabilityTesting/TestOverview.tsx @@ -3,6 +3,7 @@ import usePageTitle from 'App/hooks/usePageTitle'; import { numberWithCommas } from 'App/utils'; import { getPdf2 } from 'Components/AssistStats/pdfGenerator'; import { useModal } from 'Components/Modal'; +import LiveTestsModal from "Components/UsabilityTesting/LiveTestsModal"; import React from 'react'; import { Button, Typography, Select, Space, Popover, Dropdown } from 'antd'; import { withSiteId, usabilityTesting, usabilityTestingEdit } from 'App/routes'; @@ -36,7 +37,6 @@ import ResponsesOverview from './ResponsesOverview'; const { Option } = Select; const statusItems = [ - { value: 'preview', label: 'Draft', icon: }, { value: 'in-progress', label: 'Ongoing', icon: }, { value: 'paused', label: 'On Hold', icon: }, { value: 'closed', label: 'Closed', icon: }, @@ -104,7 +104,9 @@ function TestOverview() { {uxtestingStore.instance.liveCount} participants are engaged in this usability test at the moment. -