Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhance(apps/frontend-manage): make activity evaluation pages resizable #4362

Merged
merged 16 commits into from
Nov 30, 2024
Merged

enhance(apps/frontend-manage): make activity evaluation pages resizable #4362

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
9869645
use resizable panel for ativity evalutaion pages
TheHummel Nov 5, 2024
ee4d096
Merge branch 'v3' of https://github.com/uzh-bf/klicker-uzh into resiz…
TheHummel Nov 5, 2024
f5d7dbb
save collapsed state
TheHummel Nov 5, 2024
52487b9
enofrce rerendering to init collapsed state
TheHummel Nov 5, 2024
b570107
fix: hide right panel content when collapsed
TheHummel Nov 5, 2024
7f24499
only show panelgroup when solution is active for FTeval
TheHummel Nov 5, 2024
09c947b
Merge branch 'v3' into resizable-activity-evaluation
sjschlapbach Nov 6, 2024
73f2847
Merge branch 'v3' into resizable-activity-evaluation
sjschlapbach Nov 8, 2024
f518861
Merge branch 'v3' into resizable-activity-evaluation
sjschlapbach Nov 8, 2024
0c706a2
use autosaveid prop instead of manual local store
TheHummel Nov 12, 2024
4fac625
use autosaveid and usestate instead of local store
TheHummel Nov 12, 2024
fb6f372
Merge branch 'resizable-activity-evaluation' of https://github.com/uz…
TheHummel Nov 12, 2024
42d14a4
Merge branch 'v3' of https://github.com/uzh-bf/klicker-uzh into resiz…
TheHummel Nov 12, 2024
3377b06
fix: make autosave just depend on question type, not specific id
rschlaefli Nov 25, 2024
bbed3e5
Merge branch 'v3' of https://github.com/uzh-bf/klicker-uzh into resiz…
rschlaefli Nov 30, 2024
be4501a
fix: add tw merge imports
rschlaefli Nov 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 22 additions & 10 deletions apps/frontend-manage/src/components/evaluation/elements/ChoicesEvaluation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ import ElementChart from '../ElementChart'
import { TextSizeType } from '../textSizes'
import ChoicesSidebar from './ChoicesSidebar'

import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from '@uzh-bf/design-system/dist/future'

interface ChoicesEvaluationProps {
instanceEvaluation: ChoicesElementInstanceEvaluation
textSize: TextSizeType
Expand All @@ -19,28 +25,34 @@ function ChoicesEvaluation({
showSolution,
}: ChoicesEvaluationProps) {
return (
<>
<div className="order-2 flex-1 px-4 md:order-1">
<ResizablePanelGroup
autoSaveId={`evaluation-${instanceEvaluation.id}`}
key={`panel-group-${instanceEvaluation.id}`}
direction="horizontal"
>
<ResizablePanel defaultSize={80} minSize={50} className="px-4">
<ElementChart
chartType={chartType}
instanceEvaluation={instanceEvaluation}
showSolution={showSolution}
textSize={textSize}
/>
</div>
<div
className={twMerge(
'order-1 flex flex-none flex-col gap-2 border-l px-4 py-2 md:order-2 md:w-64 lg:w-72 xl:w-80',
textSize.text
)}
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel
defaultSize={20}
minSize={10}
collapsible
collapsedSize={0}
className={twMerge('gap-2 border-l px-4 py-2', textSize.text)}
>
<ChoicesSidebar
instance={instanceEvaluation}
textSize={textSize}
showSolution={showSolution}
/>
</div>
</>
</ResizablePanel>
</ResizablePanelGroup>
)
}

Expand Down
66 changes: 49 additions & 17 deletions apps/frontend-manage/src/components/evaluation/elements/FTEvaluation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ import ElementChart from '../ElementChart'
import { TextSizeType } from '../textSizes'
import FTSidebar from './FTSidebar'

import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from '@uzh-bf/design-system/dist/future'
import { useState } from 'react'

interface FTEvaluationProps {
instanceEvaluation: FreeElementInstanceEvaluation
textSize: TextSizeType
Expand All @@ -18,27 +25,52 @@ function FTEvaluation({
chartType,
showSolution,
}: FTEvaluationProps) {
const [isCollapsed, setIsCollapsed] = useState(false)

return (
<>
<div className="order-2 flex-1 px-4 md:order-1">
<ElementChart
chartType={chartType}
instanceEvaluation={instanceEvaluation}
showSolution={showSolution}
textSize={textSize}
/>
</div>
{instanceEvaluation.results.solutions && showSolution && (
<div
className={twMerge(
'order-1 flex flex-none flex-col gap-2 border-l px-4 py-2 md:order-2 md:w-64 lg:w-72 xl:w-80',
textSize.text
)}
{showSolution ? (
<ResizablePanelGroup
autoSaveId={`evaluation-${instanceEvaluation.id}`}
key={`panel-group-${instanceEvaluation.id}`}
direction="horizontal"
>
<FTSidebar
instance={instanceEvaluation}
textSize={textSize}
<ResizablePanel defaultSize={80} minSize={50} className="px-4">
<ElementChart
chartType={chartType}
instanceEvaluation={instanceEvaluation}
showSolution={showSolution}
textSize={textSize}
/>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel
defaultSize={20}
minSize={10}
collapsible
collapsedSize={0}
onCollapse={() => setIsCollapsed(true)}
onExpand={() => setIsCollapsed(false)}
className={twMerge('gap-2 border-l px-4 py-2', textSize.text)}
>
{instanceEvaluation.results.solutions &&
showSolution &&
!isCollapsed && (
<FTSidebar
instance={instanceEvaluation}
textSize={textSize}
showSolution={showSolution}
/>
)}
</ResizablePanel>
</ResizablePanelGroup>
) : (
<div className="order-2 flex-1 px-4 md:order-1">
<ElementChart
chartType={chartType}
instanceEvaluation={instanceEvaluation}
showSolution={showSolution}
textSize={textSize}
/>
</div>
)}
Expand Down
49 changes: 34 additions & 15 deletions apps/frontend-manage/src/components/evaluation/elements/NREvaluation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ import ElementChart from '../ElementChart'
import { TextSizeType } from '../textSizes'
import NumericalSidebar from './NumericalSidebar'

import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from '@uzh-bf/design-system/dist/future'
import { useState } from 'react'

interface NREvaluationProps {
instanceEvaluation: NumericalElementInstanceEvaluation
textSize: TextSizeType
Expand All @@ -18,29 +25,41 @@ function NREvaluation({
chartType,
showSolution,
}: NREvaluationProps) {
const [isCollapsed, setIsCollapsed] = useState(false)

return (
<>
<div className="order-2 flex-1 px-4 md:order-1">
<ResizablePanelGroup
autoSaveId={`evaluation-${instanceEvaluation.id}`}
key={`panel-group-${instanceEvaluation.id}`}
direction="horizontal"
>
<ResizablePanel defaultSize={80} minSize={50} className="px-4">
<ElementChart
chartType={chartType}
instanceEvaluation={instanceEvaluation}
showSolution={showSolution}
textSize={textSize}
/>
</div>
<div
className={twMerge(
'order-1 flex flex-none flex-col gap-2 border-l px-4 py-2 md:order-2 md:w-64 lg:w-72 xl:w-80',
textSize.text
)}
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel
defaultSize={20}
minSize={10}
collapsible
collapsedSize={0}
onCollapse={() => setIsCollapsed(true)}
onExpand={() => setIsCollapsed(false)}
className={twMerge('gap-2 border-l px-4 py-2', textSize.text)}
rschlaefli marked this conversation as resolved.
Show resolved Hide resolved
>
<NumericalSidebar
instance={instanceEvaluation}
textSize={textSize}
showSolution={showSolution}
/>
</div>
</>
{!isCollapsed && (
<NumericalSidebar
instance={instanceEvaluation}
textSize={textSize}
showSolution={showSolution}
/>
)}
</ResizablePanel>
</ResizablePanelGroup>
)
}

Expand Down
Loading