|
@@ -1,66 +1,150 @@
|
|
|
import React, { Component } from "react";
|
|
|
-import { Modal } from "antd";
|
|
|
+import { Modal } from "react-bootstrap";
|
|
|
+import { Header } from "react-bootstrap/ModalHeader";
|
|
|
+import { Button } from "react-bootstrap"
|
|
|
import { Field, reduxForm } from 'redux-form';
|
|
|
import formInput from '../../common/formInput'
|
|
|
|
|
|
class EditModal extends React.Component {
|
|
|
state = {
|
|
|
- clicked: false
|
|
|
+ clicked: false,
|
|
|
+ answers_id: null,
|
|
|
+ answers: [],
|
|
|
+ clicks: false,
|
|
|
+ questionId: null
|
|
|
}
|
|
|
submit = (payload) => {
|
|
|
+ const { name, categoryId, description, question, simple, topicId } = payload
|
|
|
+ const { answers, questionId } = this.state
|
|
|
+ console.log(name, categoryId, description, question, simple, topicId, answers)
|
|
|
const { actions: { changeTestRequest } } = this.props;
|
|
|
- changeTestRequest({ payload })
|
|
|
- console.log(payload)
|
|
|
+ changeTestRequest({ questionId, name, categoryId, description, question, simple, topicId, answers })
|
|
|
+
|
|
|
+ // console.log(payload)
|
|
|
}
|
|
|
changeQuestion = (event) => {
|
|
|
- const { value, name} = event.target
|
|
|
- // const { actions: { getAnswersRequest } } = this.props;
|
|
|
+ const { value } = event.target
|
|
|
+ const { actions: { getAnswersRequest } } = this.props;
|
|
|
console.log(event.target.valus, value)
|
|
|
- // getAnswersRequest({ value })
|
|
|
- this.setState((prevState) => ({ clicked: !prevState.clicked }))
|
|
|
+ getAnswersRequest({ value })
|
|
|
+ this.setState((prevState) => ({ clicked: !prevState.clicked, }))
|
|
|
+ this.setState({ questionId: value })
|
|
|
+
|
|
|
+ }
|
|
|
+ answersChange = (event) => {
|
|
|
+ const { value } = event.target
|
|
|
+ this.setState({ clicks: true, answers_id: value })
|
|
|
+ }
|
|
|
+ changeAnswers = (payload) => {
|
|
|
+ const { answers_id } = this.state
|
|
|
+ const { answer, price, correct } = payload
|
|
|
+ const value = {
|
|
|
+ _id: answers_id,
|
|
|
+ answer: answer,
|
|
|
+ price: +price,
|
|
|
+ correct: correct
|
|
|
+ }
|
|
|
+ this.setState((prevState) => ({ answers: prevState.answers.concat(value) }))
|
|
|
+ this.setState({ clicks: false })
|
|
|
+
|
|
|
+ }
|
|
|
+ deleteAnswer = () => {
|
|
|
+ const { answers_id } = this.state
|
|
|
+ const { actions: { deleteAnswerRequest } } = this.props;
|
|
|
+ deleteAnswerRequest({ answers_id })
|
|
|
+
|
|
|
+ }
|
|
|
+ deleteQuestions = () => {
|
|
|
+ const{questionId} =this.state
|
|
|
+ const { actions: { deleteQuestionRequest } } = this.props;
|
|
|
+ deleteQuestionRequest({questionId})
|
|
|
+ }
|
|
|
+ deleteTopic=(payload)=>{
|
|
|
+ const{topicId}=payload
|
|
|
+ const{actions:{deleteTopicRequest}} =this.props;
|
|
|
+ deleteTopicRequest({topicId})
|
|
|
+
|
|
|
}
|
|
|
render() {
|
|
|
const { visible, handleClose: { closeModal }, inputData, editLoads, initialValues, arrayQuestions: { questions, _id }, answers, handlers: { handelClick }, click, handleSubmit } = this.props;
|
|
|
- const { submit } = this
|
|
|
- const { clicked } = this.state
|
|
|
- console.log(initialValues)
|
|
|
+ const { submit, answersChange, changeAnswers, deleteAnswer, deleteQuestions, deleteTopic } = this
|
|
|
+ const { clicked, clicks } = this.state
|
|
|
+ console.log(this.state)
|
|
|
return (
|
|
|
- <Modal footer={false} title="Basic Modal" visible={visible} onCancel={closeModal} >
|
|
|
- <form onSubmit={handleSubmit(submit)}>
|
|
|
- <Field name="name" type="name" component={formInput} />
|
|
|
- <Field name="description" type="description" component={formInput} />
|
|
|
-
|
|
|
+ <Modal show={visible} onHide={closeModal} aria-labelledby="contained-modal-title-vcenter" >
|
|
|
+ < Modal.Header closeButton >
|
|
|
+ < Modal.Title className="text-center text-white font-ci font-ci-bold" >Changes Test </ Modal.Title >
|
|
|
+ </ Modal.Header >
|
|
|
+ < Modal.Body >
|
|
|
+ <h4 class="text-center text-white font-ci font-ci-bold">Topic</h4>
|
|
|
+ <form onSubmit={handleSubmit(submit)}>
|
|
|
+ <Field name="name" type="name" component={formInput} className="form-control mb-3" />
|
|
|
+ <h4 class="text-center text-white font-ci font-ci-bold">Description</h4>
|
|
|
+ <Field name="description" type="description" component={formInput} className="form-control mb-3" />
|
|
|
|
|
|
- <select class="custom-select bg-mist bg-mist-op text-white mt-3 mb-3" onChange={this.changeQuestion} >
|
|
|
- <option selected>Question</option>
|
|
|
- {questions !== null
|
|
|
- ?
|
|
|
- questions.map(el =>
|
|
|
- <option key={el._id} name={el._id} value={el.question}>{el.question}</option>
|
|
|
+ <h4 class="text-center text-white font-ci font-ci-bold">Questions</h4>
|
|
|
+ <select class="custom-select bg-mist bg-mist-op text-white mt-3 mb-3" onChange={this.changeQuestion} >
|
|
|
+ <option selected>Question</option>
|
|
|
+ {questions !== null
|
|
|
+ ?
|
|
|
+ questions.map(el =>
|
|
|
+ <option key={el._id} name={el._id} value={el._id}>{el.question}</option>
|
|
|
|
|
|
|
|
|
- )
|
|
|
- : null
|
|
|
+ )
|
|
|
+ : null
|
|
|
+ }
|
|
|
+ </select>
|
|
|
+ {
|
|
|
+ clicked
|
|
|
+ ?
|
|
|
+ <React.Fragment>
|
|
|
+ <h4 class="text-center text-white font-ci font-ci-bold">Questions and Simple</h4>
|
|
|
+ <Field name="question" type="question" component={formInput} />
|
|
|
+ <Field name="simple" type="checkbox" component={formInput} />
|
|
|
+ <button className="btn btn-outline-light bg-stone m-3" onClick={handleSubmit(deleteQuestions)} >Change Question</button >
|
|
|
+ </React.Fragment>
|
|
|
+ : null
|
|
|
}
|
|
|
- </select>
|
|
|
- {
|
|
|
- clicked
|
|
|
- ?
|
|
|
- <React.Fragment>
|
|
|
- <Field name ="question" type ="question" component ={formInput}/>
|
|
|
- <Field name ="simple" type ="checkbox" component ={formInput}/>
|
|
|
- </React.Fragment>
|
|
|
- :null
|
|
|
- }
|
|
|
- <ul class="list-group list-group-flush">
|
|
|
+ <ul class="list-group list-group-flush">
|
|
|
+ {
|
|
|
+ clicked
|
|
|
+ ?
|
|
|
+ <select class="custom-select bg-mist bg-mist-op text-white mt-3 mb-3" onChange={answersChange} >
|
|
|
+ <option selected>Aswers</option>
|
|
|
+ {answers !== null
|
|
|
+ ?
|
|
|
+ answers.map(el =>
|
|
|
+ <option key={el._id} name={el._id} value={el._id}>{el.answer}</option>
|
|
|
|
|
|
- {
|
|
|
+
|
|
|
+ )
|
|
|
+ : null
|
|
|
+ }
|
|
|
+ </select>
|
|
|
+ : null
|
|
|
+ }
|
|
|
+ {
|
|
|
+ clicks
|
|
|
+ ?
|
|
|
+ <React.Fragment>
|
|
|
+ <Field name="answer" type="answer" component={formInput} className="form-control mb-3" />
|
|
|
+ <Field name="correct" type="checkbox" component={formInput} />
|
|
|
+ <Field name="price" type="number" component={formInput} />
|
|
|
+ <div>
|
|
|
+ <button className="btn btn-outline-light bg-stone m-3" onClick={handleSubmit(deleteAnswer)}>Delete Answer</button>
|
|
|
+ <button className="btn btn-outline-light bg-stone m-3" onClick={handleSubmit(changeAnswers)} >Change Answers</button >
|
|
|
+ </div>
|
|
|
+ </React.Fragment>
|
|
|
+ : null
|
|
|
+ }
|
|
|
+ {/* {
|
|
|
answers !== null
|
|
|
?
|
|
|
answers.map(el =>
|
|
|
|
|
|
- !click
|
|
|
- ?
|
|
|
+
|
|
|
+
|
|
|
<React.Fragment>
|
|
|
<li class="list-group-item" key={el._id} id={el._id}>{el.answer}</li>
|
|
|
<button type="button" onClick={handelClick.bind(null, { el })}>Change</button>
|
|
@@ -68,19 +152,28 @@ class EditModal extends React.Component {
|
|
|
</React.Fragment>
|
|
|
:
|
|
|
<React.Fragment>
|
|
|
- <Field name="answer" type="answer" component={formInput} />
|
|
|
+ <Field name="answer" type="answer" component={formInput} className="form-control mb-3" />
|
|
|
<Field name="corrent" type="checkbox" component={formInput} />
|
|
|
<Field name="price" type="price" component={formInput} />
|
|
|
- {/* <button onClick={handelClick.bind(null, { el })}>Change</button>
|
|
|
- <button>Delete</button> */}
|
|
|
- </React.Fragment>
|
|
|
+ <button onClick={handelClick.bind(null, { el })}>Change</button>
|
|
|
+ <button>Delete</button>
|
|
|
+ </React.Fragment>
|
|
|
)
|
|
|
:
|
|
|
null
|
|
|
- }
|
|
|
- <button>create</button>
|
|
|
- </ul>
|
|
|
- </form>
|
|
|
+ } */}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </form>
|
|
|
+ </ Modal.Body >
|
|
|
+ < Modal.Footer>
|
|
|
+ <React.Fragment>
|
|
|
+ <button className="btn btn-outline-light bg-stone m-3" onClick={handleSubmit(deleteTopic)}>Delete Answer</button>
|
|
|
+ <button type="submit" >Change</button>
|
|
|
+ </React.Fragment>
|
|
|
+ </ Modal.Footer >
|
|
|
</Modal>
|
|
|
);
|
|
|
}
|