Show feedback options in exam editor

client/views/Exam.jsx

@@ -10,6 +10,9 @@ import ExamEditor from './ExamEditor.jsx'
 import update from 'immutability-helper'
 import ExamFinalizeMarkdown from './ExamFinalize.md'
 import ConfirmationModal from '../components/ConfirmationModal.jsx'
+import FeedbackPanel from './grade/FeedbackPanel.jsx'
+// import ProblemSelector from './grade/ProblemSelector.jsx'
+import EditPanel from './grade/EditPanel.jsx'
 
 import * as api from '../api.jsx'
 
@@ -34,12 +37,7 @@ class Exams extends React.Component {
         // keep page and name of problem as widget.problem object
         widgets[problem.widget.id] = {
           ...problem.widget,
-          problem: {
-            id: problem.id,
-            page: problem.page,
-            name: problem.name,
-            graded: problem.graded
-          }
+          problem : problem
         }
       })
 
@@ -303,6 +301,33 @@ class Exams extends React.Component {
                     onBlur={(e) => {
                       props.saveProblemName(e.target.value)
                     }} />
+                  {/*  Here the feedback options should be added. */}
+                  {/* console.log(props.problem) */}
+                  {/* {this.state.editActive
+                  ? <EditPanel problemID={problem.id} feedback={this.state.feedbackToEdit}
+                    goBack={this.backToFeedback} />
+                  : <FeedbackPanel problem={problem}
+                    editFeedback={this.editFeedback} showTooltips={this.state.showTooltips}
+                    />
+                  } */}
+                  {/* <nav className="panel">
+                    {this.props.problem.feedback.map((feedback, index) =>
+                      <FeedbackBlock key={feedback.id} uri={blockURI} graderID={this.props.graderID}
+                        feedback={feedback} checked={this.props.solution.feedback.includes(feedback.id)}
+                        editFeedback={() => this.props.editFeedback(feedback)} updateSubmission={this.props.updateSubmission}
+                        ref={(selectedFeedbackId === feedback.id) ? this.feedbackBlock : null}
+                        selected={selectedFeedbackId === feedback.id} showIndex={this.props.showTooltips} index={index + 1} />
+                    )}
+                  </nav> */}
+                  <FeedbackPanel examID={this.props.examID} problem={props.problem}
+                    editFeedback={this.editFeedback} showTooltips={this.state.showTooltips}
+                    grading={false} updateSubmission={() => {
+                      this.props.updateSubmission(this.state.sIndex)
+                    }
+                    } />
+                  {/* { console.log(this.props.problem)} */}
+                  {/* { console.log(this.props.exam)} */}
+                  {console.log(props.problem)}
                 </div>
               </React.Fragment>
             )}

client/views/Grade.jsx

@@ -216,7 +216,7 @@ class Grade extends React.Component {
                   : <FeedbackPanel examID={exam.id} submissionID={submission.id}
                     problem={problem} solution={solution} graderID={this.props.graderID}
                     editFeedback={this.editFeedback} showTooltips={this.state.showTooltips}
-                    updateSubmission={() => {
+                    grading={true} updateSubmission={() => {
                       this.props.updateSubmission(this.state.sIndex)
                     }
                     } />

client/views/grade/FeedbackBlock.jsx

@@ -32,7 +32,7 @@ class FeedbackBlock extends React.Component {
   render () {
     const shortcut = (this.props.index < 11 ? '' : 'shift + ') + this.props.index % 10
     return (
-      <a className='panel-block is-active' onClick={this.toggle}
+      <a className='panel-block is-active' onClick={this.props.grading ? this.toggle : this.props.editFeedback}
         style={this.props.selected ? {backgroundColor: '#209cee'} : {}}
       >
         <span
@@ -40,7 +40,9 @@ class FeedbackBlock extends React.Component {
             ? ' tooltip is-tooltip-active is-tooltip-left' : '')}
           data-tooltip={shortcut}
         >
+          {this.props.grading &&
             <i className={'fa fa-' + (this.props.checked ? 'check-square-o' : 'square-o')} />
+          }
         </span>
         <span style={{ width: '80%' }}>
           {this.props.feedback.name}

client/views/grade/FeedbackPanel.jsx

@@ -35,7 +35,7 @@ class FeedbackPanel extends React.Component {
   static getDerivedStateFromProps (nextProps, prevState) {
     if (prevState.problemID !== nextProps.problem.id || prevState.submissionID !== nextProps.submissionID) {
       return {
-        remark: nextProps.solution.remark,
+        remark: nextProps.grading && nextProps.solution.remark,
         problemID: nextProps.problem.id,
         submissionID: nextProps.submissionID,
         selectedFeedbackIndex: null
@@ -90,29 +90,34 @@ class FeedbackPanel extends React.Component {
     const blockURI = this.props.examID + '/' + this.props.submissionID + '/' + this.props.problem.id
 
     let totalScore = 0
+    if(this.props.grading) {
       for (let i = 0; i < this.props.solution.feedback.length; i++) {
         const probIndex = this.props.problem.feedback.findIndex(fb => fb.id === this.props.solution.feedback[i])
         if (probIndex >= 0) totalScore += this.props.problem.feedback[probIndex].score
       }
+    }
 
     let selectedFeedbackId = this.state.selectedFeedbackIndex !== null &&
       this.props.problem.feedback[this.state.selectedFeedbackIndex].id
 
     return (
       <nav className='panel'>
+        {this.props.grading &&
           <p className='panel-heading'>
             Total:&nbsp;<b>{totalScore}</b>
-        </p>
+          </p>}
         {this.props.problem.feedback.map((feedback, index) =>
           <FeedbackBlock key={feedback.id} uri={blockURI} graderID={this.props.graderID}
-            feedback={feedback} checked={this.props.solution.feedback.includes(feedback.id)}
+            feedback={feedback} checked={this.props.grading && this.props.solution.feedback.includes(feedback.id)}
             editFeedback={() => this.props.editFeedback(feedback)} updateSubmission={this.props.updateSubmission}
-            ref={(selectedFeedbackId === feedback.id) ? this.feedbackBlock : null}
+            ref={(selectedFeedbackId === feedback.id) ? this.feedbackBlock : null} grading={this.props.grading}
             selected={selectedFeedbackId === feedback.id} showIndex={this.props.showTooltips} index={index + 1} />
         )}
+        {this.props.grading &&
           <div className='panel-block'>
             <textarea className='textarea' rows='2' placeholder='remark' value={this.state.remark} onBlur={this.saveRemark} onChange={this.changeRemark} />
           </div>
+        }
         <div className='panel-block'>
           <button className='button is-link is-outlined is-fullwidth' onClick={() => this.props.editFeedback()}>
             <span className='icon is-small'>