Verified Commit ab514d4a authored by Hugo Kerstens's avatar Hugo Kerstens
Browse files

Move exam name panel back

parent 57e29123
......@@ -4,7 +4,6 @@ import Hero from '../components/Hero.jsx'
import ConfirmationModal from '../components/ConfirmationModal.jsx'
import ExamZesje from './exam/ExamZesje.jsx'
import ExamUnstructured from './exam/ExamUnstructured.jsx'
import PanelExamName from './exam/PanelExamName.jsx'
import * as api from '../api.jsx'
......@@ -43,16 +42,24 @@ class Exams extends React.Component {
renderExamContent = () => {
const layout = this.state.exam.layout.value
const commonProps = {
'examID': this.state.exam.id,
'examName': this.state.exam.name,
'updateExamList': this.props.updateExamList,
'updateExam': this.loadExam
}
if (layout === 1) {
// zesje exam
return <ExamZesje
exam={this.state.exam}
updateExam={this.loadExam}
deleteExam={() => { this.setState({deletingExam: true}) }}
setHelpPage={this.props.setHelpPage} />
setHelpPage={this.props.setHelpPage}
{...commonProps} />
} else if (layout === 2) {
// unstructured
return <ExamUnstructured examID={this.state.exam.id} />
return <ExamUnstructured
{...commonProps} />
}
}
......@@ -67,18 +74,6 @@ class Exams extends React.Component {
exam
? (
<React.Fragment>
<PanelExamName
name={exam.name}
examID={exam.id}
onChange={(name) => {
// In order to change the name everywhere in the UI we are forced to
// update the whole exam here as well as the exam list in the navbar.
// This is not ideal and should be addressed in
// https://gitlab.kwant-project.org/zesje/zesje/issues/388
// TODO: implement data locality for this view
this.loadExam(exam.id)
this.props.updateExamList()
}} />
{ this.renderExamContent() }
</React.Fragment>
......
......@@ -5,6 +5,7 @@ import FeedbackPanel from '../../components/feedback/FeedbackPanel.jsx'
import ConfirmationModal from '../../components/ConfirmationModal.jsx'
import ExamUnstructuredMarkdown from './ExamUnstructuredRules.md'
import PanelGradeAnonymous from './PanelGradeAnonymous.jsx'
import PanelExamName from './PanelExamName.jsx'
import * as api from '../../api.jsx'
......@@ -294,6 +295,12 @@ class PanelEditUnstructured extends React.Component {
<React.Fragment>
<div className='columns is-centered' >
<div className='column is-one-third-fullhd is-half-tablet' >
<PanelExamName
name={this.props.examName}
examID={this.props.examID}
updateExam={this.props.updateExam}
updateExamList={this.props.updateExamList} />
<this.PanelProblem
problem={problem} />
......
import React from 'react'
import Notification from 'react-bulma-notification'
import update from 'immutability-helper'
import './Exam.css'
import GeneratedExamPreview from '../../components/GeneratedExamPreview.jsx'
import PanelGenerate from '../../components/PanelGenerate.jsx'
import PanelMCQ from '../../components/PanelMCQ.jsx'
import ExamEditor from './ExamEditor.jsx'
import PanelGradeAnonymous from './PanelGradeAnonymous.jsx'
import update from 'immutability-helper'
import ExamFinalizeMarkdown from './ExamFinalize.md'
import ConfirmationModal from '../../components/ConfirmationModal.jsx'
import FeedbackPanel from '../../components/feedback/FeedbackPanel.jsx'
import Tooltip from '../../components/Tooltip.jsx'
import ExamEditor from './ExamEditor.jsx'
import PanelGradeAnonymous from './PanelGradeAnonymous.jsx'
import ExamFinalizeMarkdown from './ExamFinalize.md'
import PanelExamName from './PanelExamName.jsx'
import './Exam.css'
import * as api from '../../api.jsx'
const Pager = (props) => {
......@@ -865,6 +868,11 @@ class ExamZesje extends React.Component {
return <React.Fragment>
<div className='columns is-centered' >
<div className='column is-one-quarter-fullhd is-one-third-desktop' >
<PanelExamName
name={this.props.examName}
examID={this.state.examID}
updateExam={this.props.updateExam}
updateExamList={this.props.updateExamList} />
<this.SidePanel
examID={this.state.examID}
setHelpPage={this.props.setHelpPage} />
......
......@@ -13,17 +13,14 @@ class PanelExamName extends React.Component {
static getDerivedStateFromProps (nextProps, prevState) {
// In case nothing is set, use an empty function that no-ops
const onChange = nextProps.onChange || ((_, name) => {})
if (prevState.examID !== nextProps.examID) {
return {
examID: nextProps.examID,
examName: nextProps.name,
editing: false,
onChange: onChange
editing: false
}
}
return {onChange: onChange}
return null
}
inputColor = () => {
......@@ -46,7 +43,7 @@ class PanelExamName extends React.Component {
editing: false
})
this.props.onChange(name)
this.onChange()
})
.catch(err => {
this.setState({
......@@ -60,69 +57,72 @@ class PanelExamName extends React.Component {
})
}
render = () => {
return <div className='columns is-centered'>
<div className='column is-one-third-desktop is-half-tablet is-full-mobile'>
{ this.state.editing ? (
<nav className='panel'>
<p className='panel-heading'>
Exam details
</p>
<div className='panel-block'>
<input className={'input ' + this.inputColor()}
type='text'
placeholder='Exam name'
value={this.state.examName}
onChange={(e) => {
this.setState({
examName: e.target.value
})
}} />
</div>
<div className='panel-block buttons is-right'>
<button
className='button is-danger'
style={{marginBottom: '0'}}
onClick={() => {
this.setState({
examName: this.props.name,
editing: false
})
}}
>
Cancel
</button>
<button
className='button is-link'
style={{marginBottom: '0'}}
disabled={this.state.examName === this.props.name || this.state.examName === ''}
onClick={() => { this.saveName(this.state.examName) }}
>
Save
</button>
</div>
</nav>
) : (
<nav className='panel'>
<p className='panel-heading'>
Exam details
</p>
<div className='panel-block'>
<p className='is-size-3'>
{this.state.examName}
</p>
<Tooltip
icon='pencil'
location='top'
text='Click to edit the exam name.'
clickAction={() => this.setState({editing: true})}
/>
</div>
</nav>
) }
</div>
</div>
onChange = () => {
// In order to change the name everywhere in the UI we are forced to
// update the whole exam here as well as the exam list in the navbar.
// This is not ideal and should be addressed in
// https://gitlab.kwant-project.org/zesje/zesje/issues/388
// TODO: implement data locality for this view
this.props.updateExam(this.state.examID)
this.props.updateExamList()
}
render = () => (
<nav className='panel'>
<p className='panel-heading'>
Exam details
</p>
{this.state.editing ? (
<React.Fragment>
<div className='panel-block'>
<input className={'input ' + this.inputColor()}
type='text'
placeholder='Exam name'
value={this.state.examName}
onChange={(e) => {
this.setState({
examName: e.target.value
})
}} />
</div>
<div className='panel-block buttons is-right'>
<button
className='button is-danger'
style={{marginBottom: '0'}}
onClick={() => {
this.setState({
examName: this.props.name,
editing: false
})
}}
>
Cancel
</button>
<button
className='button is-link'
style={{marginBottom: '0'}}
disabled={this.state.examName === this.props.name || this.state.examName === ''}
onClick={() => { this.saveName(this.state.examName) }}
>
Save
</button>
</div>
</React.Fragment>
) : (
<div className='panel-block'>
<p className='is-size-3'>
{this.state.examName}
</p>
<Tooltip
icon='pencil'
location='top'
text='Click to edit the exam name.'
clickAction={() => this.setState({editing: true})}
/>
</div>
)}
</nav>
)
}
export default PanelExamName
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment