enhance(apps/frontend-manage): make activity evaluation pages resizab…

…le (#4362) Co-authored-by: Julius Schlapbach <80708107+sjschlapbach@users.noreply.github.com> Co-authored-by: Roland Schläfli <rolandschlaefli@gmail.com>
uzh-bf · Nov 30, 2024 · 192ce17 · 192ce17
1 parent 801d9f0
commit 192ce17
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 39 deletions.
diff --git a/apps/frontend-manage/src/components/evaluation/elements/ChoicesEvaluation.tsx b/apps/frontend-manage/src/components/evaluation/elements/ChoicesEvaluation.tsx
@@ -5,6 +5,13 @@ import ElementChart from '../ElementChart'
 import { TextSizeType } from '../textSizes'
 import ChoicesSidebar from './ChoicesSidebar'
 
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@uzh-bf/design-system/dist/future'
+import { twMerge } from 'tailwind-merge'
+
 interface ChoicesEvaluationProps {
   instanceEvaluation: ChoicesElementInstanceEvaluation
   textSize: TextSizeType
@@ -21,23 +28,35 @@ function ChoicesEvaluation({
   type,
 }: ChoicesEvaluationProps) {
   return (
-    <>
-      <div className="order-2 flex-1 px-4 md:order-1">
+    <ResizablePanelGroup
+      autoSaveId="evaluation-choices"
+      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>
-
-      <ChoicesSidebar
-        instance={instanceEvaluation}
-        textSize={textSize}
-        showSolution={showSolution}
-        type={type}
-      />
-    </>
+      </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}
+          type={type}
+        />
+      </ResizablePanel>
+    </ResizablePanelGroup>
   )
 }
 

diff --git a/apps/frontend-manage/src/components/evaluation/elements/FTEvaluation.tsx b/apps/frontend-manage/src/components/evaluation/elements/FTEvaluation.tsx
@@ -5,6 +5,14 @@ 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'
+import { twMerge } from 'tailwind-merge'
+
 interface FTEvaluationProps {
   instanceEvaluation: FreeElementInstanceEvaluation
   textSize: TextSizeType
@@ -20,23 +28,55 @@ function FTEvaluation({
   showSolution,
   type,
 }: 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 && (
-        <FTSidebar
-          instance={instanceEvaluation}
-          textSize={textSize}
-          showSolution={showSolution}
-          type={type}
-        />
+      {showSolution ? (
+        <ResizablePanelGroup
+          autoSaveId="evaluation-ft"
+          key={`panel-group-${instanceEvaluation.id}`}
+          direction="horizontal"
+        >
+          <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}
+                  type={type}
+                />
+              )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      ) : (
+        <div className="order-2 flex-1 px-4 md:order-1">
+          <ElementChart
+            chartType={chartType}
+            instanceEvaluation={instanceEvaluation}
+            showSolution={showSolution}
+            textSize={textSize}
+          />
+        </div>
       )}
     </>
   )

diff --git a/apps/frontend-manage/src/components/evaluation/elements/NREvaluation.tsx b/apps/frontend-manage/src/components/evaluation/elements/NREvaluation.tsx
@@ -6,6 +6,13 @@ import ElementChart from '../ElementChart'
 import { TextSizeType } from '../textSizes'
 import NRSidebar from './NRSidebar'
 
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@uzh-bf/design-system/dist/future'
+import { twMerge } from 'tailwind-merge'
+
 interface NREvaluationProps {
   instanceEvaluation: NumericalElementInstanceEvaluation
   textSize: TextSizeType
@@ -29,6 +36,7 @@ function NREvaluation({
   showSolution,
   type,
 }: NREvaluationProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
   const [showStatistics, setShowStatistics] = useState<ShowStatisticsType>({
     mean: false,
     median: false,
@@ -38,26 +46,43 @@ function NREvaluation({
   })
 
   return (
-    <>
-      <div className="order-2 flex-1 px-4 md:order-1">
+    <ResizablePanelGroup
+      autoSaveId="evaluation-nr"
+      key={`panel-group-${instanceEvaluation.id}`}
+      direction="horizontal"
+    >
+      <ResizablePanel defaultSize={80} minSize={50} className="px-4">
         <ElementChart
           chartType={chartType}
           instanceEvaluation={instanceEvaluation}
           showSolution={showSolution}
           showStatistics={showStatistics}
           textSize={textSize}
         />
-      </div>
-      <NRSidebar
-        instance={instanceEvaluation}
-        chartType={chartType}
-        textSize={textSize}
-        showSolution={showSolution}
-        showStatistics={showStatistics}
-        setShowStatistics={setShowStatistics}
-        type={type}
-      />
-    </>
+      </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)}
+      >
+        {!isCollapsed && (
+          <NRSidebar
+            instance={instanceEvaluation}
+            chartType={chartType}
+            textSize={textSize}
+            showSolution={showSolution}
+            showStatistics={showStatistics}
+            setShowStatistics={setShowStatistics}
+            type={type}
+          />
+        )}
+      </ResizablePanel>
+    </ResizablePanelGroup>
   )
 }