feat(client): Revamp chapter bundle problem submission layout (#592)

ia-toki · Feb 8, 2024 · 33d3cbd · 33d3cbd
1 parent 1579930
commit 33d3cbd
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 44 deletions.
diff --git a/.../src/components/ProblemWorksheetCard/Bundle/ProblemStatementCard/ProblemStatementCard.jsx b/.../src/components/ProblemWorksheetCard/Bundle/ProblemStatementCard/ProblemStatementCard.jsx
@@ -10,7 +10,15 @@ import { ItemStatementCard } from './ItemStatementCard/ItemStatementCard';
 
 import './ProblemStatementCard.scss';
 
-export function ProblemStatementCard({ items, alias, statement, onAnswerItem, latestSubmissions, disabled }) {
+export function ProblemStatementCard({
+  items,
+  alias,
+  statement,
+  showTitle = true,
+  onAnswerItem,
+  latestSubmissions,
+  disabled,
+}) {
   const generateOnAnswer = itemJid => {
     return async answer => {
       return await onAnswerItem(itemJid, answer || '');
@@ -71,14 +79,15 @@ export function ProblemStatementCard({ items, alias, statement, onAnswerItem, la
 
   return (
     <ContentCard>
-      <h2 className="bundle-problem-statement__name">
-        {alias ? `${alias}. ` : ''}
-        {statement.title}
-      </h2>
+      {showTitle && (
+        <h2 className="bundle-problem-statement__name">
+          {alias ? `${alias}. ` : ''}
+          {statement.title}
+        </h2>
+      )}
       <div className="bundle-problem-statement__text">
         <HtmlText>{statement.text}</HtmlText>
       </div>
-      <Divider />
       {items.map(item => {
         switch (item.type) {
           case ItemType.MultipleChoice:

diff --git a/...rc/components/ProblemWorksheetCard/Bundle/ProblemSubmissionCard/ProblemSubmissionCard.jsx b/...rc/components/ProblemWorksheetCard/Bundle/ProblemSubmissionCard/ProblemSubmissionCard.jsx
@@ -15,7 +15,7 @@ export function ProblemSubmissionCard({ reasonNotAllowedToSubmit, resultsUrl })
     }
     return (
       <ButtonLink intent={Intent.PRIMARY} to={resultsUrl}>
-        Finish and show results
+        Submit
       </ButtonLink>
     );
   };

diff --git a/judgels-client/src/components/ProblemWorksheetCard/Bundle/ProblemWorksheetCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Bundle/ProblemWorksheetCard.jsx
@@ -3,13 +3,22 @@ import { ProblemSubmissionCard } from './ProblemSubmissionCard/ProblemSubmission
 
 import './ProblemWorksheetCard.scss';
 
-export function ProblemWorksheetCard({ alias, worksheet, latestSubmissions, onAnswerItem, resultsUrl, disabled }) {
+export function ProblemWorksheetCard({
+  alias,
+  worksheet,
+  showTitle,
+  latestSubmissions,
+  onAnswerItem,
+  resultsUrl,
+  disabled,
+}) {
   const { statement, items, reasonNotAllowedToSubmit } = worksheet;
   return (
     <div className="bundle-problem-worksheet">
       <ProblemStatementCard
         alias={alias}
         statement={statement}
+        showTitle={showTitle}
         onAnswerItem={onAnswerItem}
         items={items}
         latestSubmissions={latestSubmissions}

diff --git a/...ls-client/src/components/SubmissionDetails/Bundle/SubmissionDetails/SubmissionDetails.jsx b/...ls-client/src/components/SubmissionDetails/Bundle/SubmissionDetails/SubmissionDetails.jsx
@@ -11,6 +11,7 @@ import './SubmissionDetails.scss';
 export function SubmissionDetails({
   name,
   alias,
+  showTitle = true,
   itemJids,
   submissionsByItemJid,
   itemTypesMap,
@@ -28,22 +29,18 @@ export function SubmissionDetails({
             <FormattedAnswer answer={submission.answer} type={itemTypesMap[itemJid]} />
           </td>
           {canViewGrading && (
-            <td className="col-verdict">
+            <td className="col-fit">
               {submission.grading ? <VerdictTag verdict={submission.grading.verdict} /> : '-'}
             </td>
           )}
-          <td className="col-time">
-            <FormattedRelative value={submission.time} />
-          </td>
         </tr>
       );
     } else {
       return (
         <tr key={itemJid}>
           <td className="col-item-num">{index + 1}</td>
           <td>-</td>
-          {canViewGrading && <td className="col-verdict">-</td>}
-          <td className="col-time">-</td>
+          {canViewGrading && <td className="col-fit">-</td>}
         </tr>
       );
     }
@@ -65,10 +62,12 @@ export function SubmissionDetails({
   return (
     <ContentCard className="bundle-submission-details">
       <div className="card-header">
-        <h4>
-          {alias ? `${alias} . ` : ''}
-          {name}
-        </h4>
+        {showTitle && (
+          <h4>
+            {alias ? `${alias} . ` : ''}
+            {name}
+          </h4>
+        )}
         {canManage && onRegrade && (
           <Button intent="primary" icon={<Refresh />} onClick={onRegrade}>
             Regrade
@@ -81,8 +80,7 @@ export function SubmissionDetails({
           <tr>
             <th className="col-item-num">No.</th>
             <th>Answer</th>
-            {canViewGrading && <th className="col-verdict">Verdict</th>}
-            <th className="col-time">Time</th>
+            {canViewGrading && <th className="col-fit">Verdict</th>}
           </tr>
         </thead>
         <tbody>{itemJids.map(renderSingleRow)}</tbody>

diff --git a/...s-client/src/components/SubmissionDetails/Bundle/SubmissionDetails/SubmissionDetails.scss b/...s-client/src/components/SubmissionDetails/Bundle/SubmissionDetails/SubmissionDetails.scss
@@ -11,18 +11,10 @@
   }
 
   .submission-table {
-    table-layout: fixed;
     margin-top: 4px;
     border: solid 1px #a0a0a0;
     .col-item-num {
       width: 50px;
     }
-    .col-verdict {
-      width: 70px;
-      text-align: center;
-    }
-    .col-time {
-      width: 200px;
-    }
   }
 }
diff --git a/judgels-client/src/components/SubmissionDetails/Bundle/VerdictTag/VerdictTag.jsx b/judgels-client/src/components/SubmissionDetails/Bundle/VerdictTag/VerdictTag.jsx
@@ -12,26 +12,26 @@ const verdictIntentMap = {
   [Verdict.WRONG_ANSWER]: Intent.DANGER,
 };
 
-const verdictDisplayCode = {
-  [Verdict.ACCEPTED]: 'AC',
+const verdictDisplayName = {
+  [Verdict.ACCEPTED]: 'Correct',
   [Verdict.INTERNAL_ERROR]: '???',
   [Verdict.OK]: 'OK',
-  [Verdict.PENDING_REGRADE]: 'PENDING',
-  [Verdict.PENDING_MANUAL_GRADING]: 'MANUAL',
-  [Verdict.WRONG_ANSWER]: 'WA',
+  [Verdict.PENDING_REGRADE]: 'Pending',
+  [Verdict.PENDING_MANUAL_GRADING]: 'Manual',
+  [Verdict.WRONG_ANSWER]: 'Incorrect',
 };
 
 export function VerdictTag({ verdict }) {
   const intent = verdictIntentMap[verdict] || Intent.NONE;
-  let displayCode = verdictDisplayCode[verdict] || verdict;
+  let displayName = verdictDisplayName[verdict] || verdict;
   if (verdict === Verdict.PENDING_REGRADE) {
-    displayCode = <Time />;
+    displayName = <Time />;
   } else if (verdict === Verdict.PENDING_MANUAL_GRADING) {
-    displayCode = <Follower />;
+    displayName = <Follower />;
   }
   return (
     <Tag round intent={intent}>
-      {displayCode}
+      {displayName}
     </Tag>
   );
 }
diff --git a/...utes/courses/courses/single/chapters/single/problems/single/Bundle/ChapterProblemPage.jsx b/...utes/courses/courses/single/chapters/single/problems/single/Bundle/ChapterProblemPage.jsx
@@ -3,11 +3,11 @@ import ChapterProblemSubmissionRoutes from './submissions/ChapterProblemSubmissi
 
 import './ChapterProblemPage.scss';
 
-export default function ChapterProblemPage({ worksheet }) {
+export default function ChapterProblemPage({ worksheet, renderNavigation }) {
   return (
     <div className="chapter-bundle-problem-page">
       <ChapterProblemStatementPage worksheet={worksheet} />
-      <ChapterProblemSubmissionRoutes />
+      <ChapterProblemSubmissionRoutes renderNavigation={renderNavigation} />
     </div>
   );
 }
diff --git a/...single/problems/single/Bundle/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx b/...single/problems/single/Bundle/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx
@@ -75,6 +75,7 @@ export class ChapterProblemStatementPage extends Component {
         latestSubmissions={latestSubmissions}
         onAnswerItem={this.createSubmission}
         worksheet={{ ...worksheet, reasonNotAllowedToSubmit }}
+        showTitle={false}
         resultsUrl={resultsUrl}
       />
     );

diff --git a/...gle/chapters/single/problems/single/Bundle/submissions/ChapterProblemSubmissionRoutes.jsx b/...gle/chapters/single/problems/single/Bundle/submissions/ChapterProblemSubmissionRoutes.jsx
@@ -2,12 +2,12 @@ import { Route, withRouter } from 'react-router';
 
 import ChapterProblemSubmissionsPage from './ChapterProblemSubmissionsPage/ChapterProblemSubmissionsPage';
 
-function ChapterProblemSubmissionRoutes() {
+function ChapterProblemSubmissionRoutes({ renderNavigation }) {
   return (
     <Route
       exact
       path="/courses/:courseSlug/chapters/:chapterAlias/problems/:problemAlias/submissions"
-      component={ChapterProblemSubmissionsPage}
+      render={props => <ChapterProblemSubmissionsPage {...props} renderNavigation={renderNavigation} />}
     />
   );
 }

diff --git a/...single/Bundle/submissions/ChapterProblemSubmissionsPage/ChapterProblemSubmissionsPage.jsx b/...single/Bundle/submissions/ChapterProblemSubmissionsPage/ChapterProblemSubmissionsPage.jsx
@@ -52,20 +52,22 @@ class ChapterProblemSubmissionsPage extends Component {
   }
 
   render() {
-    const { course, chapter, match } = this.props;
+    const { course, chapter, match, renderNavigation } = this.props;
 
     return (
       <ContentCard className="chapter-bundle-problem-submissions-page">
         <ScrollToTopOnMount />
         <h3 className="heading-with-button-action">Results</h3>
         <ButtonLink
+          small
           intent={Intent.PRIMARY}
           to={`/courses/${course.slug}/chapters/${chapter.alias}/problems/${match.params.problemAlias}`}
         >
           Retake
         </ButtonLink>
         <hr />
         {this.renderResults()}
+        {renderNavigation({ hidePrev: true })}
       </ContentCard>
     );
   }
@@ -88,7 +90,7 @@ class ChapterProblemSubmissionsPage extends Component {
     return (
       <>
         {this.state.problemSummaries.map(props => (
-          <SubmissionDetails key={props.alias} {...props} />
+          <SubmissionDetails key={props.alias} {...props} showTitle={false} />
         ))}
       </>
     );

diff --git a/.../courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx b/.../courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx
@@ -182,7 +182,7 @@ export class ChapterProblemPage extends Component {
     if (problem.type === ProblemType.Programming) {
       return <ChapterProblemProgrammingPage worksheet={response} renderNavigation={this.renderNavigation} />;
     } else {
-      return <ChapterProblemBundlePage worksheet={response} />;
+      return <ChapterProblemBundlePage worksheet={response} renderNavigation={this.renderNavigation} />;
     }
   };
 }