Skip to content

Commit 2a6a6bc

Browse files
HRemonenHRemonen
authored
Merge pull request #1369 from UniversityOfHelsinkiCS/summary-row-filters
resturctured course summary header row components
2 parents 30effb4 + 04802bb commit 2a6a6bc

File tree

5 files changed

+105
-50
lines changed

5 files changed

+105
-50
lines changed

‎src/client/pages/CourseSummary/MyCourses.jsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import { useTranslation } from 'react-i18next'
44
import { useSummaryContext } from './context'
55
import { useTeacherSummaries } from './api'
66
import TeacherOrganisationRow from './components/TeacherOrganisationRow'
7-
import { OPEN_UNIVERSITY_ORG_ID } from '../../util/common'
8-
import ExtraOrganisationModeSelector from './components/ExtraOrganisationModeSelector'
9-
import SorterRowWithFilters from './components/SorterRow'
7+
import SummaryRowFilters from './components/SummaryRowFilters'
108

119
/**
1210
*
@@ -20,8 +18,7 @@ const MyCourses = () => {
2018

2119
return (
2220
<Box display="flex" flexDirection="column" alignItems="stretch" gap="0.3rem">
23-
{OPEN_UNIVERSITY_ORG_ID && <ExtraOrganisationModeSelector organisationId={OPEN_UNIVERSITY_ORG_ID} />}
24-
<SorterRowWithFilters />
21+
<SummaryRowFilters filterType="my-courses" />
2522
{show &&
2623
organisations.length > 0 &&
2724
organisations.map(organisation => (

‎src/client/pages/CourseSummary/MyOrganisations.jsx‎

Lines changed: 4 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,23 @@
11
import React from 'react'
2-
import { useTranslation } from 'react-i18next'
3-
import { Box, LinearProgress, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material'
4-
import { Reorder, Segment } from '@mui/icons-material'
2+
import { Box, LinearProgress } from '@mui/material'
53
import { useSummaryContext } from './context'
64
import { useOrganisationSummaries } from './api'
75
import { useOrderedAndFilteredOrganisations } from './utils'
8-
import { OPEN_UNIVERSITY_ORG_ID } from '../../util/common'
9-
import ExtraOrganisationModeSelector from './components/ExtraOrganisationModeSelector'
10-
import SorterRowWithFilters from './components/SorterRow'
116
import OrganisationSummaryRow from './components/OrganisationRow'
12-
13-
const ViewingModeSelector = ({ viewingMode, setViewingMode }) => {
14-
const { t } = useTranslation()
15-
const handleChange = (_ev, value) => {
16-
if (!value) return
17-
setViewingMode(value)
18-
}
19-
20-
return (
21-
<ToggleButtonGroup
22-
exclusive
23-
value={viewingMode}
24-
onChange={handleChange}
25-
color="primary"
26-
size="small"
27-
sx={{ height: '40px' }}
28-
>
29-
<ToggleButton value="flat">
30-
<Tooltip title={t('courseSummary:flatView')}>
31-
<Reorder fontSize="medium" />
32-
</Tooltip>
33-
</ToggleButton>
34-
<ToggleButton value="tree">
35-
<Tooltip title={t('courseSummary:treeView')}>
36-
<Segment fontSize="medium" />
37-
</Tooltip>
38-
</ToggleButton>
39-
</ToggleButtonGroup>
40-
)
41-
}
7+
import SummaryRowFilters from './components/SummaryRowFilters'
428

439
/**
4410
*
4511
*/
4612
const MyOrganisations = () => {
47-
const { dateRange, viewingMode, setViewingMode } = useSummaryContext()
13+
const { dateRange } = useSummaryContext()
4814
const { organisations, isLoading } = useOrganisationSummaries()
4915

5016
const orderedAndFilteredOrganisations = useOrderedAndFilteredOrganisations(organisations)
5117

5218
return (
5319
<Box display="flex" flexDirection="column" alignItems="stretch" gap="0.3rem">
54-
<ViewingModeSelector viewingMode={viewingMode} setViewingMode={setViewingMode} />
55-
{OPEN_UNIVERSITY_ORG_ID && <ExtraOrganisationModeSelector organisationId={OPEN_UNIVERSITY_ORG_ID} />}
56-
<SorterRowWithFilters />
20+
<SummaryRowFilters filterType="my-organisation" />
5721
{isLoading ? (
5822
<LinearProgress />
5923
) : (

‎src/client/pages/CourseSummary/University.jsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react'
22
import { Box } from '@mui/material'
33
import { useSummaries } from './api'
4-
import { OPEN_UNIVERSITY_ORG_ID, UNIVERSITY_ROOT_ID } from '../../util/common'
4+
import { UNIVERSITY_ROOT_ID } from '../../util/common'
55
import { useSummaryContext } from './context'
6-
import ExtraOrganisationModeSelector from './components/ExtraOrganisationModeSelector'
7-
import SorterRowWithFilters from './components/SorterRow'
86
import OrganisationSummaryRow from './components/OrganisationRow'
7+
import SummaryRowFilters from './components/SummaryRowFilters'
98

109
/**
1110
*
@@ -21,8 +20,7 @@ const University = () => {
2120

2221
return (
2322
<Box display="flex" flexDirection="column" alignItems="stretch" gap="0.3rem">
24-
{OPEN_UNIVERSITY_ORG_ID && <ExtraOrganisationModeSelector organisationId={OPEN_UNIVERSITY_ORG_ID} />}
25-
<SorterRowWithFilters />
23+
<SummaryRowFilters filterType="university" />
2624
<OrganisationSummaryRow
2725
organisationId={UNIVERSITY_ROOT_ID}
2826
organisation={universityOrganisation}

‎src/client/pages/CourseSummary/components/SummaryRowFilters.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import ViewingModeSelector from './ViewingModeSelector'
3+
import { OPEN_UNIVERSITY_ORG_ID } from '../../../util/common'
4+
import ExtraOrganisationModeSelector from './ExtraOrganisationModeSelector'
5+
import SorterRowWithFilters from './SorterRow'
6+
7+
interface SummaryRowFiltersProps {
8+
filterType: 'my-organisation' | 'my-courses' | 'university' | 'course'
9+
}
10+
11+
const SummaryRowFilters = ({ filterType = 'course' }: SummaryRowFiltersProps) => {
12+
if (filterType === 'my-organisation') {
13+
return (
14+
<>
15+
<ViewingModeSelector />
16+
{OPEN_UNIVERSITY_ORG_ID && <ExtraOrganisationModeSelector organisationId={OPEN_UNIVERSITY_ORG_ID} />}
17+
<SorterRowWithFilters />
18+
</>
19+
)
20+
}
21+
22+
if (filterType === 'my-courses' || filterType === 'university') {
23+
return (
24+
<>
25+
{OPEN_UNIVERSITY_ORG_ID && <ExtraOrganisationModeSelector organisationId={OPEN_UNIVERSITY_ORG_ID} />}
26+
<SorterRowWithFilters />
27+
</>
28+
)
29+
}
30+
31+
return <SorterRowWithFilters />
32+
}
33+
34+
export default SummaryRowFilters

‎src/client/pages/CourseSummary/components/ViewingModeSelector.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { Dispatch, SetStateAction } from 'react'
2+
import { useTranslation } from 'react-i18next'
3+
import { ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material'
4+
import { Reorder, Segment } from '@mui/icons-material'
5+
import { useSummaryContext } from '../context'
6+
7+
interface DateRangeType {
8+
start: Date
9+
end: Date
10+
}
11+
12+
interface SummaryContextType {
13+
showSummariesWithNoFeedback: boolean
14+
setShowSummariesWithNoFeedback: Dispatch<SetStateAction<boolean>>
15+
dateRange: DateRangeType
16+
setDateRange: Dispatch<SetStateAction<DateRangeType>>
17+
option: 'year' | 'semester'
18+
setOption: Dispatch<SetStateAction<'year' | 'semester'>>
19+
sortBy: [string, 'asc' | 'desc']
20+
setSortBy: Dispatch<SetStateAction<[string, 'asc' | 'desc']>>
21+
sortFunction: (summary: any) => number
22+
questions: any[]
23+
viewingMode: 'tree' | 'flat'
24+
setViewingMode: Dispatch<SetStateAction<'tree' | 'flat'>>
25+
extraOrgId: string
26+
setExtraOrgId: Dispatch<SetStateAction<string>>
27+
extraOrgMode: 'include' | 'exclude'
28+
setExtraOrgMode: Dispatch<SetStateAction<'include' | 'exclude'>>
29+
}
30+
31+
const ViewingModeSelector = () => {
32+
const { t } = useTranslation()
33+
const { viewingMode, setViewingMode } = useSummaryContext() as unknown as SummaryContextType
34+
const handleChange = (_ev: React.MouseEvent<HTMLElement>, value: 'flat' | 'tree') => {
35+
if (!value) return
36+
setViewingMode(value)
37+
}
38+
39+
return (
40+
<ToggleButtonGroup
41+
exclusive
42+
value={viewingMode}
43+
onChange={handleChange}
44+
color="primary"
45+
size="small"
46+
sx={{ height: '40px' }}
47+
>
48+
<ToggleButton value="flat">
49+
<Tooltip title={t('courseSummary:flatView')}>
50+
<Reorder fontSize="medium" />
51+
</Tooltip>
52+
</ToggleButton>
53+
<ToggleButton value="tree">
54+
<Tooltip title={t('courseSummary:treeView')}>
55+
<Segment fontSize="medium" />
56+
</Tooltip>
57+
</ToggleButton>
58+
</ToggleButtonGroup>
59+
)
60+
}
61+
62+
export default ViewingModeSelector

0 commit comments

Comments
 (0)