split out header and criteria results, initial styling for result hea…

…der, got rid of debug input styling since no longer used
microsoft · Feb 28, 2024 · 59c057f · 59c057f
1 parent 3d07989
commit 59c057f
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 52 deletions.
diff --git a/teachertool/src/components/EvalResultDisplay.tsx b/teachertool/src/components/EvalResultDisplay.tsx
@@ -1,3 +1,4 @@
+import * as React from "react";
 import { useContext } from "react";
 import { AppStateContext } from "../state/appStateContext";
 import { getCatalogCriteriaWithId } from "../state/helpers";
@@ -6,18 +7,49 @@ import css from "./styling/EvalResultDisplay.module.scss";
 import { classList } from "react-common/components/util";
 
 
-interface IProps {}
-
 const ResultsHeader: React.FC = () => {
     const { state: teacherTool } = useContext(AppStateContext);
+    // TODO: change the headers to be the correct thing for html (not h3, h4)
     return (
-        <>
-            <h1>{teacherTool.rubric.name}</h1>
-        </>
+        <div className={css["header"]}>
+            <div className={css["rubric-name"]}>
+                <h3>{lf("{0}",teacherTool.rubric.name)}</h3>
+            </div>
+            <div className={css["project-details"]}>
+                <h4>{lf("{0}", teacherTool?.projectMetadata?.name)}</h4>
+                <p>{teacherTool?.projectMetadata?.id}</p>
+            </div>
+        </div>
     );
 };
 
-export const EvalResultDisplay: React.FC<IProps> = ({}) => {
+interface CriteriaResultProps {
+    criteriaId: string;
+    result: CriteriaEvaluationResult;
+    label: string;
+}
+
+const CriteriaResult: React.FC<CriteriaResultProps> = ({ criteriaId, result, label }) => {
+    return (
+        <div className={css["result-block-id"]} key={criteriaId}>
+            <p className={css["block-id-label"]}>
+                {label}:
+            </p>
+            {result === CriteriaEvaluationResult.InProgress && (
+                <div className={css["common-spinner"]} />
+            )}
+            {result === CriteriaEvaluationResult.CompleteWithNoResult && <p>{lf("N/A")}</p>}
+            {result === CriteriaEvaluationResult.Fail && (
+                <p className={css["negative-text"]}>{lf("Needs Work")}</p>
+            )}
+            {result === CriteriaEvaluationResult.Pass && (
+                <p className={css["positive-text"]}>{lf("Looks Good!")}</p>
+            )}
+        </div>
+    );
+}
+
+export const EvalResultDisplay: React.FC<{}> = () => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     function getTemplateStringFromCriteriaInstanceId(instanceId: string): string {
@@ -31,32 +63,18 @@ export const EvalResultDisplay: React.FC<IProps> = ({}) => {
     return (
         <>
             {teacherTool.projectMetadata && (
-                <div className={classList(css["eval-results-container"])}>
-                    <h3>{lf("Project: {0}", teacherTool.projectMetadata.name)}</h3>
-
-                    {teacherTool.evalResults.length === 0 && <div className={css["common-spinner"]} />}
+                <div className={css["eval-results-container"]}>
+                    <ResultsHeader />
                     {Object.keys(teacherTool.evalResults ?? {}).map(criteriaInstanceId => {
-                        const result = teacherTool.evalResults[criteriaInstanceId];
                         const label = getTemplateStringFromCriteriaInstanceId(criteriaInstanceId);
                         return (
-                            label && (
-                                <div className={css["result-block-id"]} key={criteriaInstanceId}>
-                                    <p className={css["block-id-label"]}>
-                                        {label}:
-                                    </p>
-                                    {result === CriteriaEvaluationResult.InProgress && (
-                                        <div className={css["common-spinner"]} />
-                                    )}
-                                    {result === CriteriaEvaluationResult.CompleteWithNoResult && <p>{lf("N/A")}</p>}
-                                    {result === CriteriaEvaluationResult.Fail && (
-                                        <p className={css["negative-text"]}>{lf("Needs Work")}</p>
-                                    )}
-                                    {result === CriteriaEvaluationResult.Pass && (
-                                        <p className={css["positive-text"]}>{lf("Looks Good!")}</p>
-                                    )}
-                                </div>
-                            )
-                        );
+                            label &&
+                            <CriteriaResult
+                                criteriaId={criteriaInstanceId}
+                                result={teacherTool.evalResults[criteriaInstanceId]}
+                                label={label}
+                            />
+                        )
                     })}
                 </div>
             )}

diff --git a/teachertool/src/components/styling/EvalResultDisplay.module.scss b/teachertool/src/components/styling/EvalResultDisplay.module.scss
@@ -27,4 +27,11 @@
 
 .negative-text {
     color: red;
+}
+
+.header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    // height: 2.625rem;
 }
diff --git a/teachertool/src/global.scss b/teachertool/src/global.scss
@@ -154,29 +154,6 @@ code {
     background-color: var(--pxt-button-primary-foreground);
 }
 
-/*******************************/
-/***** DEBUG INPUT STYLING  *****/
-/*******************************/
-
-.debug-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    padding: 1rem;
-}
-
-.single-share-link-input-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 100%;
-    margin-bottom: 1.5rem;
-}
-
-.link-input {
-    width: 100%;
-}
-
 /*******************************/
 /******  STYLE OVERRIDES  ******/
 /*******************************/