|
|
|
@ -11,7 +11,9 @@ import filterIcon from "../../../assets/img/filter.svg"; |
|
|
|
|
import Question from "../components/question"; |
|
|
|
|
import { numOfinitQs } from "../../../redux/reducers/exam"; |
|
|
|
|
import AddQuestionPopUp from "../components/addQuestion"; |
|
|
|
|
import { lesson } from "../../../redux/actions"; |
|
|
|
|
import { exam, lesson, question } from "../../../redux/actions"; |
|
|
|
|
import { AiOutlineCloseCircle } from "react-icons/ai"; |
|
|
|
|
import loadingGiff from "../../../assets/img/Rolling-2s-223px.gif"; |
|
|
|
|
|
|
|
|
|
const AddQuestionsFromBank = ({ |
|
|
|
|
grades, |
|
|
|
@ -21,12 +23,22 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
backStep, |
|
|
|
|
lessonList, |
|
|
|
|
addLesson, |
|
|
|
|
addLessonLoading, |
|
|
|
|
addExamCourse, |
|
|
|
|
removeExamCourse, |
|
|
|
|
getQuestion, |
|
|
|
|
questionList, |
|
|
|
|
addExamQuestion, |
|
|
|
|
removeQuestionFromBank, |
|
|
|
|
removeExamQuestions, |
|
|
|
|
getQuestionBackToBank, |
|
|
|
|
}) => { |
|
|
|
|
const [name, setName] = useState(null); |
|
|
|
|
const [type, setType] = useState(null); |
|
|
|
|
const [description, setDescription] = useState(null); |
|
|
|
|
const [questionarePopUp, setQuestionairePopUp] = useState(false); |
|
|
|
|
const [addQuestionPopup, setAddQuestionPopuo] = useState(false); |
|
|
|
|
const [addLessonPart, setAddLessonPart] = useState(false); |
|
|
|
|
const [newQuestionaire, setNewQuestionaire] = useState({ |
|
|
|
|
id: addExamState.questionnaires.length + 1, |
|
|
|
|
name: "", |
|
|
|
@ -52,9 +64,6 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
|
|
|
|
|
const [fakeState, setFakeState] = useState(2); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const payload = { name: name, description: description, type: type }; |
|
|
|
|
|
|
|
|
|
const handleOnDragEnd = (result) => { |
|
|
|
@ -62,17 +71,21 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
|
|
|
|
|
if (source.droppableId !== destination?.droppableId) { |
|
|
|
|
if (destination?.droppableId == "Choosed_Questions_Form_Bank") { |
|
|
|
|
dispatch({ type: "ADD_EXAM_QUESTIONS", payload: choosedQuestion }); |
|
|
|
|
dispatch({ |
|
|
|
|
type: "REMOVE_QUESTION_FROM_BANK", |
|
|
|
|
payload: choosedQuestion, |
|
|
|
|
}); |
|
|
|
|
// dispatch({ type: "ADD_EXAM_QUESTIONS", payload: choosedQuestion });
|
|
|
|
|
addExamQuestion(choosedQuestion); |
|
|
|
|
// dispatch({
|
|
|
|
|
// type: "REMOVE_QUESTION_FROM_BANK",
|
|
|
|
|
// payload: choosedQuestion,
|
|
|
|
|
// });
|
|
|
|
|
removeQuestionFromBank(choosedQuestion); |
|
|
|
|
} else { |
|
|
|
|
dispatch({ type: "REMOVE_EXAM_QUESTIONS", payload: choosedQuestion }); |
|
|
|
|
dispatch({ |
|
|
|
|
type: "GET_QUESTION_BACK_TO_BANK", |
|
|
|
|
payload: choosedQuestion, |
|
|
|
|
}); |
|
|
|
|
// dispatch({ type: "REMOVE_EXAM_QUESTIONS", payload: choosedQuestion });
|
|
|
|
|
removeExamQuestions(choosedQuestion); |
|
|
|
|
// dispatch({
|
|
|
|
|
// type: "GET_QUESTION_BACK_TO_BANK",
|
|
|
|
|
// payload: choosedQuestion,
|
|
|
|
|
// });
|
|
|
|
|
getQuestionBackToBank(choosedQuestion); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
if (source.droppableId == "Choosed_Questions_Form_Bank") { |
|
|
|
@ -104,6 +117,17 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
addExamState.questionBank |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const [activeCourse, setActiveCourse] = useState(null); |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (activeCourse) { |
|
|
|
|
getQuestion({ |
|
|
|
|
// lessonId: activeCourse,
|
|
|
|
|
// gradeId: addExamState.grade,
|
|
|
|
|
lessonId: 3, |
|
|
|
|
gradeId: 7, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, [activeCourse]); |
|
|
|
|
useEffect(() => { |
|
|
|
|
setSortedQuestionBank(addExamState.questionBank); |
|
|
|
|
}, [addExamState]); |
|
|
|
@ -137,6 +161,16 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
addExamState.courses.filter((itm) => itm.id == selectedCourse.id)[0] |
|
|
|
|
?.selectedQuestions |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const addLessonHandler = () => { |
|
|
|
|
setAddLessonPart(true); |
|
|
|
|
setQuestionairePopUp(false); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const addLessonPartBtnHandler = () => { |
|
|
|
|
let name = document.querySelector("#addLessonPartInput").value; |
|
|
|
|
addLesson({ name }); |
|
|
|
|
}; |
|
|
|
|
return ( |
|
|
|
|
<div className="flex flex-col h-screen relative"> |
|
|
|
|
{questionarePopUp && ( |
|
|
|
@ -186,51 +220,66 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
</h1> |
|
|
|
|
|
|
|
|
|
{lessonList?.map((item, index) => ( |
|
|
|
|
<> |
|
|
|
|
<React.Fragment key={index}> |
|
|
|
|
<div className="w-full flex items-center py-2 justify-start border-b pl-8 border-gray-200"> |
|
|
|
|
<Checkbox |
|
|
|
|
name={`PICK_QUESTIONARE_${index}`} |
|
|
|
|
onChange={(e) => |
|
|
|
|
e.target.checked |
|
|
|
|
? dispatch({ type: "ADD_EXAM_COURSE", payload: item }) |
|
|
|
|
: dispatch({ |
|
|
|
|
type: "REMOVE_EXAM_COURSE", |
|
|
|
|
payload: item, |
|
|
|
|
}) |
|
|
|
|
? addExamCourse(item) |
|
|
|
|
: removeExamCourse(item) |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
<h2 className="text-red26 font-bold mr-4">{item?.name}</h2> |
|
|
|
|
</div> |
|
|
|
|
</> |
|
|
|
|
</React.Fragment> |
|
|
|
|
))} |
|
|
|
|
<div className="w-full pt-4 flex justify-end px-5"> |
|
|
|
|
<button |
|
|
|
|
className="p-2 px-4 bg-red52 text-white rounded-md shadow-md" |
|
|
|
|
onClick={addLessonHandler} |
|
|
|
|
> |
|
|
|
|
افزودن درس جدید |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
|
className="p-2 px-4 bg-red52 text-white rounded-md shadow-md mr-2" |
|
|
|
|
onClick={() => setQuestionairePopUp(false)} |
|
|
|
|
> |
|
|
|
|
افزودن |
|
|
|
|
ثبت دروس |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{addQuestionPopup === "component" && ( |
|
|
|
|
// <AddQuestionPopUp
|
|
|
|
|
// closeOnClick={() => setAddQuestionPopuo(false)}
|
|
|
|
|
// submitOnClick={data => {
|
|
|
|
|
// dispatch({type: 'ADD_CUSTOM_QUESTION', payload: {
|
|
|
|
|
// ...data,
|
|
|
|
|
// questionId:addExamState.questionBank.length + 1 ,
|
|
|
|
|
// courseId: selectedCourse.id,
|
|
|
|
|
// }})
|
|
|
|
|
// console.log({
|
|
|
|
|
// ...data,
|
|
|
|
|
// questionId: addExamState.questionBank.length + 1,
|
|
|
|
|
// courseId: selectedCourse.id,
|
|
|
|
|
// })
|
|
|
|
|
// }}
|
|
|
|
|
// />
|
|
|
|
|
<></> |
|
|
|
|
{addLessonPart && ( |
|
|
|
|
<div className="w-full z-10 fixed h-screen backdrop-blur flex items-center top-0 justify-center "> |
|
|
|
|
<AiOutlineCloseCircle |
|
|
|
|
className="text-4xl text-red-600 cursor-pointer absolute top-6 left-20 z-20" |
|
|
|
|
onClick={() => setAddLessonPart(false)} |
|
|
|
|
/> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
id="addLessonPartInput" |
|
|
|
|
className="w-1/3 h-10 rounded px-2 border" |
|
|
|
|
placeholder="نام درس" |
|
|
|
|
/> |
|
|
|
|
{!addLessonLoading && ( |
|
|
|
|
<div |
|
|
|
|
className="h-10 w-20 px-2 flex items-center justify-center text-white bg-red52 rounded-md mr-2 cursor-pointer" |
|
|
|
|
onClick={addLessonPartBtnHandler} |
|
|
|
|
> |
|
|
|
|
افزودن |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{addLessonLoading && ( |
|
|
|
|
<div |
|
|
|
|
className="h-10 w-20 px-2 flex items-center justify-center text-white bg-red52 rounded-md mr-2" |
|
|
|
|
onClick={addLessonPartBtnHandler} |
|
|
|
|
> |
|
|
|
|
<img src={loadingGiff} alt="loadingGiff" className="h-7" /> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
<div className="flex py-3 items-center px-10 border-b border-gray-200"> |
|
|
|
|
<div className="flex flex-col w-1/6"> |
|
|
|
@ -277,7 +326,7 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
{...provided.droppableProps} |
|
|
|
|
ref={provided.innerRef} |
|
|
|
|
> |
|
|
|
|
{addExamState.courses.length > 0 && |
|
|
|
|
{addExamState?.courses?.length > 0 && |
|
|
|
|
addExamState.courses.map((item, index) => ( |
|
|
|
|
<Draggable |
|
|
|
|
draggableId={`COURSE_${item.id}`} |
|
|
|
@ -294,14 +343,17 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
? "bg-pinkF5 border border-red52 text-red52" |
|
|
|
|
: "bg-white border border-gray-300 text-blue3A" |
|
|
|
|
} items-center justify-between pt-4 w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`}
|
|
|
|
|
onClick={() => setSelectedCourse(item)} |
|
|
|
|
onClick={() => { |
|
|
|
|
setSelectedCourse(item); |
|
|
|
|
setActiveCourse(item.id); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
className="w-full flex justify-between items-center " |
|
|
|
|
style={{ direction: "ltr" }} |
|
|
|
|
> |
|
|
|
|
<div className=" rtl px-2 text-white bg-red52"> |
|
|
|
|
{item.selectedQuestions.length} سوال |
|
|
|
|
{item?.selectedQuestions?.length} سوال |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<p className=" text-left px-4"> |
|
|
|
@ -640,20 +692,20 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
{(provided) => ( |
|
|
|
|
<div |
|
|
|
|
className="w-full py-1 flex flex-col items-center overflow-x-hidden overflow-scroll" |
|
|
|
|
style={{ height: "30vh" }} |
|
|
|
|
style={{ height: "50vh" }} |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
className="w-11/12" |
|
|
|
|
{...provided.droppableProps} |
|
|
|
|
ref={provided.innerRef} |
|
|
|
|
> |
|
|
|
|
{sortedQuestionBank |
|
|
|
|
?.filter((itm) => itm.courseId == selectedCourse.id) |
|
|
|
|
?.map((course, index) => ( |
|
|
|
|
{/* sortedQuestionBan-------------- */} |
|
|
|
|
{questionList?.map((course, index) => ( |
|
|
|
|
<React.Fragment key={index}> |
|
|
|
|
<Draggable |
|
|
|
|
draggableId={`_${course.questionId}`} |
|
|
|
|
index={course.questionId} |
|
|
|
|
key={`CHOOSED_QUESTIONS_${course.questionId}`} |
|
|
|
|
draggableId={`_${course.id}`} |
|
|
|
|
index={course.id} |
|
|
|
|
key={`CHOOSED_QUESTIONS_${course.id}`} |
|
|
|
|
> |
|
|
|
|
{(provided) => ( |
|
|
|
|
<div |
|
|
|
@ -696,6 +748,7 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</Draggable> |
|
|
|
|
</React.Fragment> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
@ -735,11 +788,21 @@ const AddQuestionsFromBank = ({ |
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
grades: state.publicApi.grades, |
|
|
|
|
addExamState: state.addExamReduser, |
|
|
|
|
addLessonLoading: state.lesson.loading, |
|
|
|
|
questionList: state.question.list, |
|
|
|
|
// lessonList: state.lesson.list
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
// getLesson:lesson.list
|
|
|
|
|
addLesson: lesson.add, |
|
|
|
|
addExamCourse: exam.addExamCourse, |
|
|
|
|
removeExamCourse: exam.removeExamCourse, |
|
|
|
|
getQuestion: question.list, |
|
|
|
|
addExamQuestion: exam.addExamQuestion, |
|
|
|
|
removeQuestionFromBank: exam.removeQuestionFromBank, |
|
|
|
|
removeExamQuestions: exam.removeExamQuestions, |
|
|
|
|
getQuestionBackToBank: exam.getQuestionBackToBank, |
|
|
|
|
changeQuestionOrder: exam.changeQuestionOrder, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default connect( |
|
|
|
|