|
|
|
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
import AnswerSheet from "../../../components/AnswerSheet";
|
|
|
|
import Button from "../../../components/Button";
|
|
|
|
import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
|
|
|
|
import Checkbox from "../../../components/Checkbox";
|
|
|
|
import RangeDatePicker from "../../../components/RangeDatePicker";
|
|
|
|
import SelectedCourse from "../../../components/selectedCourse";
|
|
|
|
import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
|
|
|
|
import Question from "../components/question";
|
|
|
|
|
|
|
|
const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
|
|
|
|
const [name, setName] = useState(null);
|
|
|
|
const [type, setType] = useState(null);
|
|
|
|
const [description, setDescription] = useState(null);
|
|
|
|
const [questionarePopUp, setQuestionairePopUp] = useState(false);
|
|
|
|
const [addCoursePopup, setAddCoursePopup] = useState(false);
|
|
|
|
const [newQuestionaire, setNewQuestionaire] = useState({
|
|
|
|
id: addExamState.questionnaires.length + 1,
|
|
|
|
name: '',
|
|
|
|
fileUrl: '',
|
|
|
|
});
|
|
|
|
const [showCoursesInList, setShowCoursesInList] = useState([]);
|
|
|
|
const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
|
|
|
|
const [selectedCourse, setSelectedCourse] = useState({
|
|
|
|
id: null,
|
|
|
|
title: ''
|
|
|
|
});
|
|
|
|
const [answers, setAnswers] = useState(null);
|
|
|
|
const [newCourse, setNewCourse] = useState({
|
|
|
|
id: addExamState.questionairesCourses.length + 1,
|
|
|
|
questionnaireId: selectedCourse.id,
|
|
|
|
questionsQuantity: 20,
|
|
|
|
name: '',
|
|
|
|
coefficient: 4
|
|
|
|
})
|
|
|
|
// console.log(choosedQuestionaries)
|
|
|
|
// console.log(newQuestionaire)
|
|
|
|
// console.log(addExamState.questionnaires)
|
|
|
|
console.log(newCourse)
|
|
|
|
console.log(addExamState.questionairesCourses)
|
|
|
|
console.log(selectedCourse)
|
|
|
|
console.log(answers)
|
|
|
|
|
|
|
|
const [fakeState, setFakeState] = useState(2);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
// questoinaresLists.map(item => showCoursesInList.push(false));
|
|
|
|
if (answers !== null && answers !== []) {
|
|
|
|
answers.map(item => dispatch({ type: 'ADD_ANSWERS', payload: item }))
|
|
|
|
}
|
|
|
|
|
|
|
|
}, [answers])
|
|
|
|
|
|
|
|
const payload = { name: name, description: description, type: type };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{
|
|
|
|
questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 justify-center">
|
|
|
|
<div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6">
|
|
|
|
<div className="w-full">
|
|
|
|
<div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={() => setQuestionairePopUp(false)}>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
|
|
|
|
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
|
|
|
|
<g id="card-remove" transform="translate(253.309 512.31)">
|
|
|
|
<path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
|
|
|
|
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
|
|
|
|
</g>
|
|
|
|
</g>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
|
|
|
|
افزودن دفترچه
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
addExamState.courseBank.map(
|
|
|
|
(item, index) => (
|
|
|
|
<>
|
|
|
|
<div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-300">
|
|
|
|
<Checkbox name={`PICK_QUESTIONARE_${index}`}
|
|
|
|
onChange={(e) =>
|
|
|
|
e.target.checked ?
|
|
|
|
dispatch({ type: 'ADD_EXAM_COURSE', payload: item })
|
|
|
|
:
|
|
|
|
|
|
|
|
|
|
|
|
dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item })
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/>
|
|
|
|
<h2 className="text-red26 font-bold">{item.title}</h2>
|
|
|
|
{/* <h4>تعداد سوالات: {item.numberOfQuestions}</h4>
|
|
|
|
<p>تعداد دروس: {item.courses.length}</p> */}
|
|
|
|
{/* <p className="cursor-pointer" onClick={() => {
|
|
|
|
let newArray = [...showCoursesInList];
|
|
|
|
|
|
|
|
newArray[index] = !newArray[index];
|
|
|
|
|
|
|
|
|
|
|
|
setShowCoursesInList(newArray)
|
|
|
|
|
|
|
|
}}>نمایش دروس</p> */}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
{
|
|
|
|
// addCoursePopup &&
|
|
|
|
// <AddQuestionnaireCourse
|
|
|
|
// closeOnClick={() => setAddCoursePopup(false)}
|
|
|
|
// nameOnChange={e => setNewCourse({...newCourse, name: e.target.value})}
|
|
|
|
// coefficientOnChange={e => setNewCourse({...newCourse, coefficient: e.target.vlaue})}
|
|
|
|
// questionQuantityOnChange={e => setNewCourse({...newCourse, questionsQuantity: e.target.value, questionnaireId: selectedQuestionare.id})}
|
|
|
|
// submitOnClick={() => {dispatch({type: 'ADD_QUESTIONNAIRE_COURSES', payload : newCourse}); setAddCoursePopup(false); setFakeState(fakeState + 356)} }
|
|
|
|
// />
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
<div className="flex py-10 items-start px-10 border-b border-gray-300">
|
|
|
|
<div className="flex flex-col w-1/6">
|
|
|
|
<div className="text-blue3A text-lg font-bold text-right px-4 border-r-4 border-blue65">
|
|
|
|
تنظیمات آزمون
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
|
|
|
|
</div>
|
|
|
|
<div className="w-5/6 flex flex-row">
|
|
|
|
|
|
|
|
{addExamState.courses.length > 0 &&
|
|
|
|
addExamState.courses.map(
|
|
|
|
(item => (
|
|
|
|
<div className={`flex flex-col ${selectedCourse.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-between pb-12 pt-2 w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`}
|
|
|
|
onClick={() => setSelectedCourse(item)}
|
|
|
|
>
|
|
|
|
<p className="w-full text-left px-4" onClick={() => dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item })}>
|
|
|
|
x
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p className="text-red52">
|
|
|
|
{item.title}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
))
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
<div className="flex flex-col bg-white items-center justify-center w-36 h-32 mx-2 font-bold border border-gray-300 text-blue3A rounded-xl cursor-pointer" onClick={() => setQuestionairePopUp(true)}>
|
|
|
|
<p className="" style={{ fontSize: '40px' }}>
|
|
|
|
+
|
|
|
|
</p>
|
|
|
|
<p className="">
|
|
|
|
افزودن درس
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="w-full flex px-10">
|
|
|
|
|
|
|
|
<div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
|
|
|
|
{
|
|
|
|
selectedCourse.id !== null && (<>
|
|
|
|
<h1 className="text-blue3A w-full font-bold text-lg text-right">
|
|
|
|
{selectedCourse.title}
|
|
|
|
</h1>
|
|
|
|
<div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '500px'}}>
|
|
|
|
<div className="w-4/5 ">
|
|
|
|
|
|
|
|
{
|
|
|
|
addExamState.questions.filter(itm => itm.courseId == selectedCourse.id).map(
|
|
|
|
(item) => (
|
|
|
|
<Question data={item} />
|
|
|
|
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</>)
|
|
|
|
}
|
|
|
|
{/* {selectedQuestionare.id !== null &&
|
|
|
|
<div className="w-full flex justify-center mt-10">
|
|
|
|
<button className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddCoursePopup(true)}>
|
|
|
|
افزودن درس
|
|
|
|
</button>
|
|
|
|
</div>} */}
|
|
|
|
</div>
|
|
|
|
<div className="w-1/2 flex justify-center">
|
|
|
|
<div className="w-4/5 py-8">
|
|
|
|
{/* <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
|
|
|
|
passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/> */}
|
|
|
|
{selectedCourse.id !== null &&
|
|
|
|
addExamState.questionBank.filter(itm => itm.courseId == selectedCourse.id).map(
|
|
|
|
(course , index) => (
|
|
|
|
|
|
|
|
<div className="flex items-start justify-between w-full">
|
|
|
|
<Checkbox name={`PICK_QUESTIONS_${index}_${course.courseId}`}
|
|
|
|
onChange={(e) =>
|
|
|
|
e.target.checked ?
|
|
|
|
dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: course })
|
|
|
|
// console.log('asodjasd')
|
|
|
|
:
|
|
|
|
|
|
|
|
|
|
|
|
dispatch({ type: 'REMOVE_EXAM_QUESTIONS', payload: course })
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/>
|
|
|
|
{/* <button onClick={() => dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: course })}>ادد کردن</button> */}
|
|
|
|
|
|
|
|
<Question data={course} />
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
{/* <Question /> */}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className="flex w-full px-10 items-center justify-end">
|
|
|
|
<button className=' mx-6 h-12 mt-4 text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button>
|
|
|
|
<Button
|
|
|
|
title='مرحله بعدی'
|
|
|
|
className='w-1/12'
|
|
|
|
onClick={() => {
|
|
|
|
dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload });
|
|
|
|
stepClick()
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({
|
|
|
|
grades: state.publicApi.grades,
|
|
|
|
addExamState: state.addExamReduser
|
|
|
|
})
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(AddQuestionsFromBank);
|