feat(client,server): revamp course chapter submission mechanism

ia-toki · Sep 5, 2023 · c2c09dd · c2c09dd
1 parent 051a6f1
commit c2c09dd
Show file tree

Hide file tree

Showing 80 changed files with 1,332 additions and 1,514 deletions.
diff --git a/...-server-app/src/main/java/judgels/jerahmeel/submission/bundle/ItemSubmissionResource.java b/...-server-app/src/main/java/judgels/jerahmeel/submission/bundle/ItemSubmissionResource.java
@@ -195,6 +195,7 @@ public SubmissionSummaryResponse getSubmissionSummary(
             @QueryParam("containerJid") String containerJid,
             @QueryParam("problemJid") Optional<String> problemJid,
             @QueryParam("username") Optional<String> username,
+            @QueryParam("problemAlias") Optional<String> problemAlias,
             @QueryParam("language") Optional<String> language) {
 
         String actorJid = actorChecker.check(authHeader);
@@ -211,8 +212,11 @@ public SubmissionSummaryResponse getSubmissionSummary(
         List<String> problemJids;
         if (problemJid.isPresent()) {
             problemJids = ImmutableList.of(problemJid.get());
-            submissions = submissionStore
-                    .getLatestSubmissionsByUserForProblemInContainer(containerJid, problemJid.get(), userJid);
+            submissions = submissionStore.getLatestSubmissionsByUserForProblemInContainer(containerJid, problemJid.get(), userJid);
+        } else if (problemAlias.isPresent()) {
+            String problemJidFromAlias = getProblemJidByAlias(containerJid, problemAlias.get()).orElse("");
+            problemJids = List.of(problemJidFromAlias);
+            submissions = submissionStore.getLatestSubmissionsByUserForProblemInContainer(containerJid, problemJidFromAlias, userJid);
         } else {
             problemJids = chapterProblemStore.getBundleProblemJids(containerJid);
             submissions = submissionStore.getLatestSubmissionsByUserInContainer(containerJid, userJid);

diff --git a/judgels-client/src/components/ContentWithTopbar/ContentWithTopbar.jsx b/judgels-client/src/components/ContentWithTopbar/ContentWithTopbar.jsx
@@ -3,12 +3,10 @@ import { Redirect, Switch, withRouter } from 'react-router';
 
 import { Topbar } from '../Topbar/Topbar';
 
-function ContentAndTopbar({ className, contentHeader, topbarElement, contentElement }) {
+function ContentAndTopbar({ className, topbarElement, contentElement }) {
   return (
     <div className={classNames('content-with-topbar', className)}>
-      {contentHeader}
       {topbarElement}
-      <hr />
       {contentElement}
     </div>
   );
@@ -19,7 +17,7 @@ function resolveUrl(parentPath, childPath) {
   return (parentPath + '/' + actualChildPath).replace(/\/\/+/g, '/');
 }
 
-function ContentWithTopbar({ match, location, className, contentHeader, items }) {
+function ContentWithTopbar({ match, location, className, items }) {
   const renderTopbar = () => {
     const topbarItems = items
       .filter(item => !item.disabled)
@@ -46,12 +44,10 @@ function ContentWithTopbar({ match, location, className, contentHeader, items })
     const redirect = items[0].id !== '@' && <Redirect exact from={match.url} to={resolveUrl(match.url, items[0].id)} />;
 
     return (
-      <div>
-        <Switch>
-          {redirect}
-          {components}
-        </Switch>
-      </div>
+      <Switch>
+        {redirect}
+        {components}
+      </Switch>
     );
   };
 
@@ -69,14 +65,7 @@ function ContentWithTopbar({ match, location, className, contentHeader, items })
     return currentPath.substring(match.url.length + 1, nextSlashPos);
   };
 
-  return (
-    <ContentAndTopbar
-      className={className}
-      contentHeader={contentHeader}
-      topbarElement={renderTopbar()}
-      contentElement={renderContent()}
-    />
-  );
+  return <ContentAndTopbar className={className} topbarElement={renderTopbar()} contentElement={renderContent()} />;
 }
 
 export default withRouter(ContentWithTopbar);
diff --git a/judgels-client/src/components/FullWidthPageLayout/FullWidthPageLayout.scss b/judgels-client/src/components/FullWidthPageLayout/FullWidthPageLayout.scss
@@ -1,6 +1,5 @@
 @import '../../styles/base';
 
 .layout-full-width-page {
-  max-width: 1260px;
   min-height: 100vh;
 }
diff --git a/.../src/components/ProblemWorksheetCard/Bundle/ProblemStatementCard/ProblemStatementCard.jsx b/.../src/components/ProblemWorksheetCard/Bundle/ProblemStatementCard/ProblemStatementCard.jsx
@@ -17,7 +17,7 @@ export function ProblemStatementCard({
   statement,
   onAnswerItem,
   latestSubmissions,
-  reasonNotAllowedToSubmit,
+  disabled,
 }) {
   const generateOnAnswer = itemJid => {
     return async answer => {
@@ -40,7 +40,7 @@ export function ProblemStatementCard({
         {...item}
         itemNumber={item.number}
         initialAnswer={initialAnswer}
-        disabled={!!reasonNotAllowedToSubmit}
+        disabled={disabled}
       />
     );
   };
@@ -56,7 +56,7 @@ export function ProblemStatementCard({
         {...item}
         itemNumber={item.number}
         initialAnswer={initialAnswer}
-        disabled={!!reasonNotAllowedToSubmit}
+        disabled={disabled}
       />
     );
   };
@@ -72,7 +72,7 @@ export function ProblemStatementCard({
         {...item}
         itemNumber={item.number}
         initialAnswer={initialAnswer}
-        disabled={!!reasonNotAllowedToSubmit}
+        disabled={disabled}
       />
     );
   };

diff --git a/...rc/components/ProblemWorksheetCard/Bundle/ProblemSubmissionCard/ProblemSubmissionCard.jsx b/...rc/components/ProblemWorksheetCard/Bundle/ProblemSubmissionCard/ProblemSubmissionCard.jsx
@@ -0,0 +1,24 @@
+import { Callout, Intent } from '@blueprintjs/core';
+import { BanCircle } from '@blueprintjs/icons';
+
+import { ContentCard } from '../../../ContentCard/ContentCard';
+import { ButtonLink } from '../../../ButtonLink/ButtonLink';
+
+export function ProblemSubmissionCard({ reasonNotAllowedToSubmit, resultsUrl }) {
+  const renderSubmissionForm = () => {
+    if (reasonNotAllowedToSubmit) {
+      return (
+        <Callout icon={<BanCircle />} className="secondary-info">
+          <span data-key="reason-not-allowed-to-submit">{reasonNotAllowedToSubmit}</span>
+        </Callout>
+      );
+    }
+    return (
+      <ButtonLink intent={Intent.PRIMARY} to={resultsUrl}>
+        Finish and show results
+      </ButtonLink>
+    );
+  };
+
+  return <ContentCard>{renderSubmissionForm()}</ContentCard>;
+}
diff --git a/judgels-client/src/components/ProblemWorksheetCard/Bundle/ProblemWorksheetCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Bundle/ProblemWorksheetCard.jsx
@@ -1,13 +1,10 @@
 import { ProblemStatementCard } from './ProblemStatementCard/ProblemStatementCard';
+import { ProblemSubmissionCard } from './ProblemSubmissionCard/ProblemSubmissionCard';
 
 import './ProblemWorksheetCard.scss';
 
-export function ProblemWorksheetCard({
-  alias,
-  worksheet: { statement, items, reasonNotAllowedToSubmit },
-  latestSubmissions,
-  onAnswerItem,
-}) {
+export function ProblemWorksheetCard({ alias, worksheet, latestSubmissions, onAnswerItem, resultsUrl, disabled }) {
+  const { statement, items, reasonNotAllowedToSubmit } = worksheet;
   return (
     <div className="bundle-problem-worksheet">
       <ProblemStatementCard
@@ -16,8 +13,9 @@ export function ProblemWorksheetCard({
         onAnswerItem={onAnswerItem}
         items={items}
         latestSubmissions={latestSubmissions}
-        reasonNotAllowedToSubmit={reasonNotAllowedToSubmit}
+        disabled={disabled || !!reasonNotAllowedToSubmit}
       />
+      <ProblemSubmissionCard reasonNotAllowedToSubmit={reasonNotAllowedToSubmit} resultsUrl={resultsUrl} />
     </div>
   );
 }
diff --git a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx
@@ -15,6 +15,9 @@ export function ProblemWorksheetCard({
   };
 
   const renderSubmission = () => {
+    if (!onSubmit) {
+      return null;
+    }
     return (
       <ProblemSubmissionCard
         config={submissionConfig}

diff --git a/...SubmissionsCard/ProblemSubmissionCard.jsx → ...e/SubmissionDetails/SubmissionDetails.jsx b/...SubmissionsCard/ProblemSubmissionCard.jsx → ...e/SubmissionDetails/SubmissionDetails.jsx
@@ -6,9 +6,9 @@ import { ContentCard } from '../../../ContentCard/ContentCard';
 import { FormattedAnswer } from '../FormattedAnswer/FormattedAnswer';
 import { VerdictTag } from '../VerdictTag/VerdictTag';
 
-import './ProblemSubmissionCard.scss';
+import './SubmissionDetails.scss';
 
-export function ProblemSubmissionCard({
+export function SubmissionDetails({
   name,
   alias,
   itemJids,
@@ -63,7 +63,7 @@ export function ProblemSubmissionCard({
   };
 
   return (
-    <ContentCard className="bundle-problem-submission">
+    <ContentCard className="bundle-submission-details">
       <div className="card-header">
         <h4>
           {alias ? `${alias} . ` : ''}

diff --git a/...ubmissionsCard/ProblemSubmissionCard.scss → .../SubmissionDetails/SubmissionDetails.scss b/...ubmissionsCard/ProblemSubmissionCard.scss → .../SubmissionDetails/SubmissionDetails.scss
@@ -1,6 +1,6 @@
 @import '../../../../styles/table';
 
-.bundle-problem-submission {
+.bundle-submission-details {
     .card-header {
         display: flex;
         align-items: baseline;

diff --git a/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.jsx b/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.jsx
@@ -80,20 +80,24 @@ export function SubmissionDetails({
                   <UserRef profile={profile} />
                 </td>
               </tr>
-              <tr>
-                <td>Problem</td>
-                <td>
-                  {!!problemUrl ? (
-                    <Link to={problemUrl}>{constructProblemName(problemName, problemAlias)}</Link>
-                  ) : (
-                    constructProblemName(problemName, problemAlias)
-                  )}
-                </td>
-              </tr>
-              <tr>
-                <td>{containerTitle}</td>
-                <td>{containerName}</td>
-              </tr>
+              {problemName && (
+                <tr>
+                  <td>Problem</td>
+                  <td>
+                    {!!problemUrl ? (
+                      <Link to={problemUrl}>{constructProblemName(problemName, problemAlias)}</Link>
+                    ) : (
+                      constructProblemName(problemName, problemAlias)
+                    )}
+                  </td>
+                </tr>
+              )}
+              {containerName && (
+                <tr>
+                  <td>{containerTitle}</td>
+                  <td>{containerName}</td>
+                </tr>
+              )}
               <tr>
                 <td>Language</td>
                 <td>{getGradingLanguageName(gradingLanguage)}</td>

diff --git a/judgels-client/src/components/Topbar/Topbar.scss b/judgels-client/src/components/Topbar/Topbar.scss
@@ -2,10 +2,5 @@
 
 .topbar {
   font-family: $accent-font;
-}
-
-@media only screen and (max-width: 600px) {
-  .topbar__item {
-    display: none;
-  }
+  margin-bottom: 10px;
 }
diff --git a/judgels-client/src/modules/api/jerahmeel/submissionBundle.js b/judgels-client/src/modules/api/jerahmeel/submissionBundle.js
@@ -15,8 +15,8 @@ export const submissionBundleAPI = {
     return post(`${baseSubmissionsURL}/`, token, data);
   },
 
-  getSubmissionSummary: (token, containerJid, problemJid, username, language) => {
-    const params = stringify({ containerJid, problemJid, username, language });
+  getSubmissionSummary: (token, containerJid, problemJid, username, problemAlias, language) => {
+    const params = stringify({ containerJid, problemJid, username, problemAlias, language });
     return get(`${baseSubmissionsURL}/summary?${params}`, token);
   },
 

diff --git a/judgels-client/src/modules/api/sandalphon/lesson.js b/judgels-client/src/modules/api/sandalphon/lesson.js
@@ -1,5 +1,5 @@
 export function getLessonName(lesson, language) {
-  return lesson.titlesByLanguage[language] || lesson.titlesByLanguage[lesson.defaultLanguage];
+  return (language && lesson.titlesByLanguage[language]) || lesson.titlesByLanguage[lesson.defaultLanguage];
 }
 
 export function constructLessonName(title, alias) {

diff --git a/judgels-client/src/modules/api/sandalphon/problem.js b/judgels-client/src/modules/api/sandalphon/problem.js
@@ -4,7 +4,7 @@ export const ProblemType = {
 };
 
 export function getProblemName(problem, language) {
-  return problem.titlesByLanguage[language] || problem.titlesByLanguage[problem.defaultLanguage];
+  return (language && problem.titlesByLanguage[language]) || problem.titlesByLanguage[problem.defaultLanguage];
 }
 
 export function constructProblemName(title, alias) {

diff --git a/...s/single/submissions/Bundle/ContestSubmissionSummaryPage/ContestSubmissionSummaryPage.jsx b/...s/single/submissions/Bundle/ContestSubmissionSummaryPage/ContestSubmissionSummaryPage.jsx
@@ -7,7 +7,7 @@ import { UserRef } from '../../../../../../../components/UserRef/UserRef';
 import { selectStatementLanguage } from '../../../../../../../modules/webPrefs/webPrefsSelectors';
 import { selectContest } from '../../../../modules/contestSelectors';
 
-import { ProblemSubmissionCard } from '../../../../../../../components/SubmissionDetails/Bundle/ProblemSubmissionsCard/ProblemSubmissionCard';
+import { SubmissionDetails } from '../../../../../../../components/SubmissionDetails/Bundle/SubmissionDetails/SubmissionDetails';
 import * as contestSubmissionActions from '../modules/contestSubmissionActions';
 
 class SubmissionSummaryPage extends Component {
@@ -51,7 +51,7 @@ class SubmissionSummaryPage extends Component {
           Summary for <UserRef profile={this.state.profile} />
         </ContentCard>
         {this.state.problemSummaries.map(props => (
-          <ProblemSubmissionCard key={props.alias} {...props} />
+          <SubmissionDetails key={props.alias} {...props} />
         ))}
       </ContentCard>
     );

diff --git a/...-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.jsx b/...-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.jsx
@@ -1,4 +1,3 @@
-import { ChevronDown } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { Component } from 'react';
 import { connect } from 'react-redux';
@@ -8,7 +7,6 @@ import { Link } from 'react-router-dom';
 import { ProgressTag } from '../../../../../components/ProgressTag/ProgressTag';
 import { ProgressBar } from '../../../../../components/ProgressBar/ProgressBar';
 import { selectCourse } from '../../modules/courseSelectors';
-import { selectCourseChapter } from '../chapters/modules/courseChapterSelectors';
 import * as courseChapterActions from '../chapters/modules/courseChapterActions';
 
 import './CourseChaptersSidebar.scss';
@@ -24,44 +22,49 @@ class CourseChaptersSidebar extends Component {
   }
 
   render() {
-    const { course, chapter } = this.props;
+    const { course, match } = this.props;
     const { response } = this.state;
     if (!course || !response) {
       return null;
     }
 
     const { data: courseChapters, chaptersMap, chapterProgressesMap } = response;
-    const activeChapterJid = chapter && chapter.jid;
 
     return (
-      <div className="course-chapters-sidebar">
-        <Link
-          className={classNames('course-chapters-sidebar__item', 'course-chapters-sidebar__title', {
-            'course-chapters-sidebar__item--selected': !activeChapterJid,
-          })}
-          to={`/courses/${course.slug}`}
-        >
-          <ChevronDown />
-          <h4>{course.name}</h4>
-        </Link>
+      <div
+        className={classNames('course-chapters-sidebar', {
+          'course-chapters-sidebar--compact': this.isInProblemPath(),
+        })}
+      >
         {courseChapters.map(courseChapter => (
           <Link
             className={classNames('course-chapters-sidebar__item', {
-              'course-chapters-sidebar__item--selected': courseChapter.chapterJid === activeChapterJid,
+              'course-chapters-sidebar__item--selected': this.isInChapterPath(courseChapter.alias),
             })}
-            to={`/courses/${course.slug}/chapters/${courseChapter.alias}`}
+            to={`${match.url}/chapters/${courseChapter.alias}`}
           >
             <div className="course-chapters-sidebar__item-title">
-              {courseChapter.alias}. {chaptersMap[courseChapter.chapterJid].name}
+              {courseChapter.alias}{' '}
+              {this.isInProblemPath() ? <>&nbsp;</> : <>. {chaptersMap[courseChapter.chapterJid].name}</>}
               {this.renderProgress(chapterProgressesMap[courseChapter.chapterJid])}
             </div>
-            {this.renderProgressBar(chapterProgressesMap[courseChapter.chapterJid])}
+            {!this.isInProblemPath() && this.renderProgressBar(chapterProgressesMap[courseChapter.chapterJid])}
           </Link>
         ))}
       </div>
     );
   }
 
+  isInChapterPath = chapterAlias => {
+    return (this.props.location.pathname + '/')
+      .replace('//', '/')
+      .startsWith(this.props.match.url + '/chapters/' + chapterAlias);
+  };
+
+  isInProblemPath = () => {
+    return this.props.location.pathname.includes('/problems/');
+  };
+
   renderProgress = progress => {
     if (!progress || progress.totalProblems === 0) {
       return null;
@@ -85,7 +88,6 @@ class CourseChaptersSidebar extends Component {
 
 const mapStateToProps = state => ({
   course: selectCourse(state),
-  chapter: selectCourseChapter(state),
 });
 
 const mapDispatchToProps = {