printing hooked up

microsoft · Mar 7, 2024 · 383b6d7 · 383b6d7
1 parent c93a681
commit 383b6d7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/teachertool/src/components/EvalResultDisplay.tsx b/teachertool/src/components/EvalResultDisplay.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useContext } from "react";
+import { useContext, useRef } from "react";
 import css from "./styling/EvalResultDisplay.module.scss";
 import { AppStateContext } from "../state/appStateContext";
 import { CriteriaResultEntry } from "./CriteriaResultEntry";
@@ -27,13 +27,13 @@ const ResultsHeader: React.FC = () => {
     );
 };
 
-export const EvalResultDisplay: React.FC<{}> = () => {
+export const EvalResultDisplay: React.FC<{printRef: React.RefObject<HTMLDivElement>}> = ({ printRef }) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     return (
         <>
             {teacherTool.projectMetadata && (
-                <div className={css["eval-results-container"]}>
+                <div className={css["eval-results-container"]} ref={printRef}>
                     <ResultsHeader />
                     {Object.keys(teacherTool.evalResults ?? {}).map(criteriaInstanceId => {
                         return <CriteriaResultEntry criteriaId={criteriaInstanceId} key={criteriaInstanceId} />;

diff --git a/teachertool/src/components/PrintButton.tsx b/teachertool/src/components/PrintButton.tsx
@@ -5,13 +5,12 @@ import { Toolbar } from "./Toolbar";
 
 interface PrintButtonProps {
     printRef: React.RefObject<HTMLDivElement>;
-    onHandlePrint: () => void;
+    onHandlePrint?: () => void;
 }
 
 export const PrintButton: React.FC<PrintButtonProps> = ({ printRef, onHandlePrint }) => {
     const handlePrint = useReactToPrint({
         content: () => printRef.current,
-        onAfterPrint: onHandlePrint,
     });
     return <Toolbar.Button icon="fas fa-print" title={lf("Print")} onClick={handlePrint} />;
 };
diff --git a/teachertool/src/components/RubricWorkspace.tsx b/teachertool/src/components/RubricWorkspace.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import css from "./styling/RubricWorkspace.module.scss";
-import { useContext } from "react";
+import { useContext, useRef } from "react";
 import { AppStateContext, stateAndDispatch } from "../state/appStateContext";
 import { Toolbar } from "./Toolbar";
 import { TabGroup, TabButton } from "./TabGroup";
@@ -17,6 +17,7 @@ import { isProjectLoaded } from "../state/helpers";
 import { setAutorun } from "../transforms/setAutorun";
 import { Strings, Ticks } from "../constants";
 import { resetRubricAsync } from "../transforms/resetRubricAsync";
+import { PrintButton } from "./PrintButton";
 
 function handleImportRubricClicked() {
     pxt.tickEvent(Ticks.ImportRubric);
@@ -53,7 +54,11 @@ const WorkspaceTabButtons: React.FC = () => {
     );
 };
 
-const WorkspaceTabPanels: React.FC = () => {
+interface WithRefProps {
+    printRef: React.RefObject<HTMLDivElement>;
+}
+
+const WorkspaceTabPanels: React.FC<WithRefProps> = ({ printRef }) => {
     return (
         <>
             <TabPanel name="home">
@@ -63,7 +68,7 @@ const WorkspaceTabPanels: React.FC = () => {
                 <ActiveRubricDisplay />
             </TabPanel>
             <TabPanel name="results">
-                <EvalResultDisplay />
+                <EvalResultDisplay printRef={printRef}/>
             </TabPanel>
         </>
     );
@@ -101,7 +106,7 @@ function getActionMenuItems(tab: TabName): MenuItem[] {
     return items;
 }
 
-const WorkspaceToolbarButtons: React.FC = () => {
+const WorkspaceToolbarButtons: React.FC<WithRefProps> = ({ printRef }) => {
     const { state: teacherTool } = useContext(AppStateContext);
     const { activeTab, autorun } = teacherTool;
 
@@ -115,7 +120,7 @@ const WorkspaceToolbarButtons: React.FC = () => {
     return (
         <Toolbar.ControlGroup>
             {activeTab === "results" && (
-                <Toolbar.Button icon="fas fa-print" title={lf("Print")} onClick={() => console.log("Print")} />
+                <PrintButton printRef={printRef} />
             )}
             {/* Conditional buttons go above this line */}
             <Toolbar.Toggle
@@ -136,10 +141,11 @@ const WorkspaceToolbarButtons: React.FC = () => {
 };
 
 export const RubricWorkspace: React.FC = () => {
+    const printRef = useRef<HTMLDivElement>(null);
     return (
         <div className={css.panel}>
-            <Toolbar left={<WorkspaceTabButtons />} right={<WorkspaceToolbarButtons />} />
-            <WorkspaceTabPanels />
+            <Toolbar left={<WorkspaceTabButtons />} right={<WorkspaceToolbarButtons printRef={printRef} />} />
+            <WorkspaceTabPanels printRef={printRef}/>
         </div>
     );
 };