Mission editing slang

src/components/assessment/__tests__/index.tsx

@@ -5,13 +5,14 @@ import { MemoryRouter } from 'react-router'
 import Assessment, { IAssessmentProps } from '../'
 import { mockAssessmentOverviews } from '../../../mocks/assessmentAPI'
 import { mockRouterProps } from '../../../mocks/components'
-import { AssessmentCategories } from '../assessmentShape'
+import { AssessmentCategories, IAssessment } from '../assessmentShape'
 
 const defaultProps: IAssessmentProps = {
   assessmentCategory: AssessmentCategories.Mission,
   assessmentOverviews: undefined,
   handleAssessmentOverviewFetch: () => {},
   handleSubmitAssessment: (id: number) => {},
+  newAssessment: (assessment: IAssessment) => {},
   isStudent: false,
   ...mockRouterProps('/academy/missions', {})
 }

src/components/assessment/index.tsx

@@ -28,13 +28,15 @@ import {
   AssessmentCategory,
   AssessmentStatuses,
   GradingStatuses,
+  IAssessment,
   IAssessmentOverview
 } from '../assessment/assessmentShape'
 import { OwnProps as AssessmentProps } from '../assessment/AssessmentWorkspace'
 import { controlButton } from '../commons'
 import ContentDisplay from '../commons/ContentDisplay'
 import ImportFromFileComponent from '../commons/ImportFromFileComponent'
 import Markdown from '../commons/Markdown'
+// import { AnyAction } from 'redux';
 
 const DEFAULT_QUESTION_ID: number = 0
 
@@ -52,6 +54,7 @@ export interface IAssessmentProps
 export interface IDispatchProps {
   handleAssessmentOverviewFetch: () => void
   handleSubmitAssessment: (id: number) => void
+  newAssessment: (assessment: IAssessment) => void
 }
 
 export interface IOwnProps {
@@ -68,6 +71,7 @@ type State = {
   showClosedAssessments: boolean
   showOpenedAssessments: boolean
   showUpcomingAssessments: boolean
+  editOverview: string
 }
 
 class Assessment extends React.Component<IAssessmentProps, State> {
@@ -80,17 +84,18 @@ class Assessment extends React.Component<IAssessmentProps, State> {
       betchaAssessment: null,
       showClosedAssessments: false,
       showOpenedAssessments: true,
-      showUpcomingAssessments: true
+      showUpcomingAssessments: true,
+      editOverview: ''
     }
   }
 
   public render() {
     const assessmentId: number | null = stringParamToInt(this.props.match.params.assessmentId)
     const questionId: number =
-      stringParamToInt(this.props.match.params.questionId) || DEFAULT_QUESTION_ID;
+      stringParamToInt(this.props.match.params.questionId) || DEFAULT_QUESTION_ID
 
     // If mission for testing is to render, create workspace
-    const editingOverview = localStorage.getItem("MissionEditingOverviewSA"); 
+    const editingOverview = localStorage.getItem('MissionEditingOverviewSA')
     if (assessmentId === -1 && editingOverview) {
       const overview = JSON.parse(editingOverview)
       const assessmentProps: AssessmentProps = {
@@ -150,15 +155,15 @@ class Assessment extends React.Component<IAssessmentProps, State> {
         )
 
       /** Mission editing card, stored in local storage and have index of -1. */
-      const missionEditingCard = editingOverview ? 
-        makeOverviewCard(
-          JSON.parse(editingOverview),
-          -1,
-          this.setBetchaAssessment,
-          true,
-          false
-        ) :
-        null;
+      const missionEditingCard = editingOverview
+        ? this.makeEditingOverviewCard(
+            JSON.parse(editingOverview),
+            -1,
+            this.setBetchaAssessment,
+            true,
+            false
+          )
+        : null
 
       /** Render cards */
       const upcomingCardsCollapsible =
@@ -295,6 +300,110 @@ class Assessment extends React.Component<IAssessmentProps, State> {
       this.setBetchaAssessmentNull()
     }
   }
+
+  private editOverview = (field: string, value: any) => {
+    const overviewString: string | null = localStorage.getItem('MissionEditingOverviewSA')
+    if (overviewString) {
+      const overview = JSON.parse(overviewString)
+      overview[field] = value
+      localStorage.setItem('MissionEditingOverviewSA', JSON.stringify(overview))
+      this.props.newAssessment(overview)
+    }
+  }
+
+  private handleEditOverview = (field: string) => (e: any) =>
+    this.editOverview(field, e.target.value)
+  private toggleEditField = (field: string) => (e: any) => {
+    this.setState({ editOverview: field })
+  }
+
+  private makeEditingOverviewCard = (
+    overview: IAssessmentOverview,
+    index: number,
+    setBetchaAssessment: (assessment: IAssessmentOverview | null) => void,
+    renderAttemptButton: boolean,
+    renderGradingStatus: boolean
+  ) => (
+    <div key={index}>
+      You can edit this card
+      <Card className="row listing" elevation={Elevation.ONE}>
+        <div className="col-xs-3 listing-picture">
+          <img
+            className={`cover-image-${overview.status}`}
+            src={overview.coverImage ? overview.coverImage : defaultCoverImage}
+          />
+        </div>
+        <div className="col-xs-9 listing-text">
+          {this.makeEditingOverviewCardTitle(
+            overview,
+            index,
+            setBetchaAssessment,
+            renderGradingStatus
+          )}
+          <div className="row listing-grade">
+            <h6>
+              {' '}
+              {beforeNow(overview.openAt)
+                ? `Grade: ${overview.grade} / ${overview.maxGrade}`
+                : `Max Grade: ${overview.maxGrade}`}{' '}
+            </h6>
+          </div>
+          <div className="row listing-xp">
+            <h6>
+              {' '}
+              {beforeNow(overview.openAt)
+                ? `XP: ${overview.xp} / ${overview.maxXp}`
+                : `Max XP: ${overview.maxXp}`}{' '}
+            </h6>
+          </div>
+          <div className="row listing-description" onClick={this.toggleEditField('shortSummary')}>
+            {this.state.editOverview === 'shortSummary' ? (
+              <input
+                type="text"
+                onChange={this.handleEditOverview('shortSummary')}
+                value={overview.shortSummary}
+              />
+            ) : (
+              <Markdown content={overview.shortSummary} />
+            )}
+          </div>
+          <div className="listing-controls">
+            <Text className="listing-due-date">
+              <Icon className="listing-due-icon" iconSize={12} icon={IconNames.TIME} />
+              <div className="date-container" onClick={this.toggleEditField("date")}>
+                {this.state.editOverview === "date" 
+                ? [<input type="text" key="openAt" onChange={this.handleEditOverview("openAt")} value={overview.openAt}/>,
+                  <input type="text" key="closeAt" onChange={this.handleEditOverview("closeAt")} value={overview.closeAt}/>]
+                : (beforeNow(overview.openAt)
+                  ? `Due: ${getPrettyDate(overview.closeAt)}`
+                  : `Opens at: ${getPrettyDate(overview.openAt)}`)}
+              </div>
+            </Text>
+            {renderAttemptButton ? makeOverviewCardButton(overview) : null}
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+
+  private makeEditingOverviewCardTitle = (
+    overview: IAssessmentOverview,
+    index: number,
+    setBetchaAssessment: (assessment: IAssessmentOverview | null) => void,
+    renderGradingStatus: boolean
+  ) => (
+    <div className="row listing-title">
+      <Text ellipsize={true} className={'col-xs-10'}>
+        <h4 onClick={this.toggleEditField("title")}>
+          { this.state.editOverview === 'title' 
+            ? <input type="text" onChange={this.handleEditOverview('title')} value={overview.title} />
+            : overview.title }{' '}
+          {renderGradingStatus ? makeGradingStatus(overview.gradingStatus) : null}
+        </h4>
+      </Text>
+      <div className="col-xs-2">{makeSubmissionButton(overview, index, setBetchaAssessment)}</div>
+    </div>
+  )
 }
 
 /**

src/containers/assessment/index.ts

@@ -2,7 +2,7 @@ import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'
 import { withRouter } from 'react-router'
 import { bindActionCreators, Dispatch } from 'redux'
 
-import { fetchAssessmentOverviews, submitAssessment } from '../../actions/session'
+import { fetchAssessmentOverviews, submitAssessment, updateAssessment } from '../../actions/session'
 import Assessment, { IDispatchProps, IOwnProps, IStateProps } from '../../components/assessment'
 import { IAssessmentOverview } from '../../components/assessment/assessmentShape'
 import { IState, Role } from '../../reducers/states'
@@ -23,7 +23,8 @@ const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Di
   bindActionCreators(
     {
       handleAssessmentOverviewFetch: fetchAssessmentOverviews,
-      handleSubmitAssessment: submitAssessment
+      handleSubmitAssessment: submitAssessment,
+      newAssessment: updateAssessment,
     },
     dispatch
   )