Teacher tool: print results page (#9916)

* printing hooked up * not showing add notes button, chevron for status on print * showing a toast if printing errors * keep the label for notes and make the individual result larger if there are notes * got rid of pill on status, made height on criteria entries shorter * got rid of useref in evalresultdisplay * rename withrefprops * use prop interface in evalresultdisplay * update ternary operator in classlist on result notes Co-authored-by: Thomas Sparks <[email protected]> * sanitizing project name for print document title * get rid of unused onHandlePrint * ran prettier * renamed printref to resultsref, split toolbar buttons, tabpanels props into their own thing * using rubric name - project name for the printed document title * sanitizing rubric name, too --------- Co-authored-by: Thomas Sparks <[email protected]>
microsoft · Mar 20, 2024 · 21be101 · 21be101
1 parent 21ac3dc
commit 21be101
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 21 deletions.
diff --git a/teachertool/src/components/CriteriaResultEntry.tsx b/teachertool/src/components/CriteriaResultEntry.tsx
@@ -22,7 +22,7 @@ const AddNotesButton: React.FC<AddNotesButtonProps> = ({ criteriaId, setShowInpu
         setShowInput(true);
     };
     return (
-        <div className={css["button-container"]}>
+        <div className={classList(css["button-container"], css["no-print"])}>
             <Button
                 className={classList("inline", "outline-button")}
                 label={Strings.AddNotes}
@@ -49,8 +49,8 @@ const CriteriaResultNotes: React.FC<CriteriaResultNotesProps> = ({ criteriaId, n
         <div className={css["notes-container"]}>
             <DebouncedTextarea
                 placeholder={lf("Write your notes here")}
-                ariaLabel={lf("Notes regarding the criteria result")}
-                label={lf("Notes")}
+                ariaLabel={lf("Feedback regarding the criteria result")}
+                label={lf("Feedback")}
                 title={lf("Write your notes here")}
                 initialValue={teacherTool.evalResults[criteriaId]?.notes ?? undefined}
                 resize="vertical"
@@ -88,7 +88,12 @@ export const CriteriaResultEntry: React.FC<CriteriaResultEntryProps> = ({ criter
                             criteriaId={criteriaId}
                         />
                     </div>
-                    <div className={css["result-notes"]}>
+                    <div
+                        className={classList(
+                            css["result-notes"],
+                            teacherTool.evalResults[criteriaId]?.notes ? undefined : css["no-print"]
+                        )}
+                    >
                         {!showInput && <AddNotesButton criteriaId={criteriaId} setShowInput={setShowInput} />}
                         {showInput && <CriteriaResultNotes criteriaId={criteriaId} />}
                     </div>

diff --git a/teachertool/src/components/EvalResultDisplay.tsx b/teachertool/src/components/EvalResultDisplay.tsx
@@ -27,13 +27,17 @@ const ResultsHeader: React.FC = () => {
     );
 };
 
-export const EvalResultDisplay: React.FC<{}> = () => {
+interface EvalResultDisplayProps {
+    resultsRef: React.RefObject<HTMLDivElement>;
+}
+
+export const EvalResultDisplay: React.FC<EvalResultDisplayProps> = ({ resultsRef }) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     return (
         <>
             {teacherTool.projectMetadata && (
-                <div className={css["eval-results-container"]}>
+                <div className={css["eval-results-container"]} ref={resultsRef}>
                     <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
@@ -1,17 +1,24 @@
 import * as React from "react";
-import { useRef } from "react";
 import { useReactToPrint } from "react-to-print";
 import { Toolbar } from "./Toolbar";
+import { stateAndDispatch } from "../state";
+import { showToast } from "../state/actions";
+import { makeToast } from "../utils";
+import { Strings } from "../constants";
+import { getSafeRubricName } from "../state/helpers";
 
 interface PrintButtonProps {
     printRef: React.RefObject<HTMLDivElement>;
-    onHandlePrint: () => void;
 }
 
-export const PrintButton: React.FC<PrintButtonProps> = ({ printRef, onHandlePrint }) => {
+export const PrintButton: React.FC<PrintButtonProps> = ({ printRef }) => {
+    const { state: teacherTool } = stateAndDispatch();
     const handlePrint = useReactToPrint({
         content: () => printRef.current,
-        onAfterPrint: onHandlePrint,
+        onPrintError: () => showToast(makeToast("error", lf("Unable to print evaluation results"), 2000)),
+        documentTitle: `${pxt.Util.sanitizeFileName(getSafeRubricName(teacherTool)!)} - ${pxt.Util.sanitizeFileName(
+            teacherTool.projectMetadata?.name || Strings.UntitledProject
+        )}`,
     });
     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 WorkspaceTabPanelsProps {
+    resultsRef: React.RefObject<HTMLDivElement>;
+}
+
+const WorkspaceTabPanels: React.FC<WorkspaceTabPanelsProps> = ({ resultsRef }) => {
     return (
         <>
             <TabPanel name="home">
@@ -63,7 +68,7 @@ const WorkspaceTabPanels: React.FC = () => {
                 <ActiveRubricDisplay />
             </TabPanel>
             <TabPanel name="results">
-                <EvalResultDisplay />
+                <EvalResultDisplay resultsRef={resultsRef} />
             </TabPanel>
         </>
     );
@@ -101,7 +106,11 @@ function getActionMenuItems(tab: TabName): MenuItem[] {
     return items;
 }
 
-const WorkspaceToolbarButtons: React.FC = () => {
+interface WorkspaceToolbarButtonsProps {
+    resultsRef: React.RefObject<HTMLDivElement>;
+}
+
+const WorkspaceToolbarButtons: React.FC<WorkspaceToolbarButtonsProps> = ({ resultsRef }) => {
     const { state: teacherTool } = useContext(AppStateContext);
     const { activeTab, autorun } = teacherTool;
 
@@ -114,9 +123,7 @@ const WorkspaceToolbarButtons: React.FC = () => {
 
     return (
         <Toolbar.ControlGroup>
-            {activeTab === "results" && (
-                <Toolbar.Button icon="fas fa-print" title={lf("Print")} onClick={() => console.log("Print")} />
-            )}
+            {activeTab === "results" && <PrintButton printRef={resultsRef} />}
             {/* Conditional buttons go above this line */}
             <Toolbar.Toggle
                 label={Strings.AutoRun}
@@ -136,10 +143,11 @@ const WorkspaceToolbarButtons: React.FC = () => {
 };
 
 export const RubricWorkspace: React.FC = () => {
+    const resultsRef = useRef<HTMLDivElement>(null);
     return (
         <div className={css.panel}>
-            <Toolbar left={<WorkspaceTabButtons />} right={<WorkspaceToolbarButtons />} />
-            <WorkspaceTabPanels />
+            <Toolbar left={<WorkspaceTabButtons />} right={<WorkspaceToolbarButtons resultsRef={resultsRef} />} />
+            <WorkspaceTabPanels resultsRef={resultsRef} />
         </div>
     );
 };
diff --git a/teachertool/src/components/styling/EvalResultDisplay.module.scss b/teachertool/src/components/styling/EvalResultDisplay.module.scss
@@ -12,8 +12,8 @@
     padding-bottom: 0.5rem;
     margin-top: 0.5rem;
     min-height: 9rem;
-    max-height: 12rem;
-    border-bottom: solid 1px var(--pxt-content-accent) ;
+    border-bottom: solid 1px var(--pxt-content-accent);
+    break-inside: avoid;
 }
 
 .result-details {
@@ -110,3 +110,21 @@
         }
     }
 }
+
+@media print {
+    .no-print {
+        display: none !important;
+    }
+
+    .specific-criteria-result {
+        min-height: 5.5rem;
+    }
+
+    .result-notes {
+        height: 7rem;
+    }
+
+    .result-notes.no-print {
+        height: 1rem;
+    }
+}
diff --git a/teachertool/src/style.overrides/Button.scss b/teachertool/src/style.overrides/Button.scss
@@ -49,6 +49,19 @@
         padding: 0.75rem;
     }
 
+    @media print {
+        i {
+            display: none;
+        }
+
+        text-align: center;
+        padding-right: 8px;
+        border: none;
+
+        .common-button-label {
+            border-bottom: 1px solid var(--pxt-page-foreground);
+        }
+    }
 }
 
 .fail > .common-button.common-dropdown-button {

diff --git a/teachertool/src/style.overrides/Textarea.scss b/teachertool/src/style.overrides/Textarea.scss
@@ -12,4 +12,12 @@
             border-radius: 0.5rem;
         }
     }
+}
+
+@media print {
+    .common-textarea-wrapper {
+        div[class*="common-textarea-group"] {
+            border-radius: 0;
+        }
+    }
 }