You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

478 lines
24 KiB

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
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";
import { numOfinitQs } from "../../../redux/reducers/exam";
3 years ago
import AddQuestionPopUp from "../components/addQuestion";
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);
3 years ago
const [addQuestionPopup, setAddQuestionPopuo] = useState(false);
const [newQuestionaire, setNewQuestionaire] = useState({
id: addExamState.questionnaires.length + 1,
name: '',
fileUrl: '',
});
const [showCoursesInList, setShowCoursesInList] = useState([]);
const [choosedQuestion, seChoosedQuestion] = useState(null);
const [selectedCourse, setSelectedCourse] = useState({
id: null,
title: '',
selectedQuestions: [],
});
3 years ago
// console.log(choosedQuestionaries)
// console.log(newQuestionaire)
// console.log(addExamState.questionnaires)
// console.log(newCourse)
// console.log(addExamState.questionairesCourses)
console.log(selectedCourse)
// console.log(answers)
console.log(choosedQuestion)
console.log(selectedCourse.selectedQuestions)
const [fakeState, setFakeState] = useState(2);
const payload = { name: name, description: description, type: type };
3 years ago
const handleOnDragEnd = (result) => {
const { source, destination } = result;
if (source.droppableId !== destination?.droppableId) {
if (destination?.droppableId == 'Choosed_Questions_Form_Bank') {
3 years ago
dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: choosedQuestion })
dispatch({ type: 'REMOVE_QUESTION_FROM_BANK', payload: choosedQuestion })
} else {
dispatch({ type: 'REMOVE_EXAM_QUESTIONS', payload: choosedQuestion })
dispatch({ type: 'GET_QUESTION_BACK_TO_BANK', payload: choosedQuestion })
}
} else {
if (source.droppableId == 'Choosed_Questions_Form_Bank') {
// const data = {
// startIndex: choosedQuestion,
// endIndex: destination.index
// }
// dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
// console.log(data)
const aaa = [...addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions];
const [removed] = aaa.splice(source.index, 1);
aaa.splice(destination.index, 0, removed);
dispatch({ type: 'CHANGE_QUESTION_ORDER', payload: aaa })
console.log(result)
console.log(source.index)
console.log(destination.index)
console.log(aaa)
}
}
3 years ago
}
const [numberOfOptions, setNumberOfOptions] = useState(null);
const [options, setOptions] = useState([])
const [question, setQuestion] = useState({
title: '',
options: [],
})
useEffect(() => {
const arr = [];
for (var i = 1; i <= numberOfOptions; i++) {
arr.push({
id: i,
title: '',
isAnswer: false
})
}
setOptions(arr)
setQuestion({
...question,
options: arr,
courseId: selectedCourse.id,
questionId:numOfinitQs + addExamState.questionBank.length + fakeState,
})
}, [numberOfOptions])
console.log(question)
3 years ago
console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions)
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">
3 years ago
افزودن درس
</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>
}
{
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,
// })
// }}
// />
<></>
}
<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">
3 years ago
<DragDropContext
onDragEnd={(result) => {
const {source, destination} = result;
if (source.droppableId == 'Choosed_Courses_Form_Bank') {
// const data = {
// startIndex: choosedQuestion,
// endIndex: destination.index
// }
// dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
// console.log(data)
const aaa = [...addExamState.courses];
const [removed] = aaa.splice(source.index, 1);
aaa.splice(destination.index, 0, removed);
dispatch({ type: 'CHANGE_COURSE_ORDER', payload: aaa })
console.log(result)
console.log(source.index)
console.log(destination.index)
console.log(aaa)
}
}}
>
<Droppable droppableId="Choosed_Courses_Form_Bank" direction="horizontal" >
{(provided) => (
<div className="flex">
{provided.placeholder}
<div className=" flex " {...provided.droppableProps} ref={provided.innerRef}>
3 years ago
{addExamState.courses.length > 0 &&
addExamState.courses.map(
(item, index) => (
<Draggable draggableId={`COURSE_${item.id}`} index={index} key={`CHOOSED_COURSE_${item.id}`}>
{(provided) => (
<div
{...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}
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" >
<span onClick={() => { dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }); setSelectedCourse(null); setFakeState(fakeState + 24) }}> x </span>
</p>
<p className="text-red52">
{item.title}
</p>
</div>
)}
</Draggable>
))
}
</div>
3 years ago
</div>
)}
</Droppable>
</DragDropContext>
<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>
3 years ago
</div>
</div>
3 years ago
<DragDropContext onDragEnd={result => handleOnDragEnd(result)}
onDragStart={(result) => {
console.log(result)
if (result.source.droppableId == 'Choosed_Questions_Form_Bank') {
seChoosedQuestion(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions[result.source.index])
} else {
seChoosedQuestion(addExamState.questionBank.find(itm => itm.questionId == result.source.index))
}
}}>
<div className="w-full flex px-10 pl-0">
<Droppable droppableId="Choosed_Questions_Form_Bank">
{(provided) => (
<div className="w-1/2 border-l flex flex-col border-gray-300 py-10" {...provided.droppableProps} ref={provided.innerRef}>
{
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: '550px'}}>
<div className="w-4/5 ">
{
addQuestionPopup === 'component' &&
<AddQuestionPopUp
titlePass={title => setQuestion({
...question,
title: title
})}
options={question.options}
setAsAnswer={e => {
let thisOption = question.options.find(itm => itm.id == e)
thisOption.isAnswer = !thisOption.isAnswer
setQuestion({
...question,
options : [...options]
})
}}
scorePass={score => setQuestion(
{
...question,
score: parseInt(score)
}
)}
passOptionTitle={(optionTitle, id) => {
let thisOption = question.options.find(itm => itm.id == id)
thisOption.title = optionTitle
setQuestion({
...question,
options : [...options]
})
}}
submitOnClick={() =>
{setAddQuestionPopuo(false)
dispatch({type: 'ADD_CUSTOM_QUESTION', payload: question});
setNumberOfOptions(null)
} }
cancelOnClick ={() => setAddQuestionPopuo(false)}
/>
}
{
addExamState.courses?.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions?.map(
(item, index) => (
<Draggable draggableId={`_${item.questionId}`} index={index} key={`CHOOSED_QUESTIONS_${item.questionId}`}>
{(provided) => (
3 years ago
<div className="flex" {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<Question data={item} />
</div>
)}
</Draggable>
)
)
}
3 years ago
{provided.placeholder}
</div>
</div>
3 years ago
</>)
}
3 years ago
{selectedCourse.id !== null &&
<div className="w-full flex justify-center mt-10">
{addQuestionPopup == false ?
<button className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddQuestionPopuo('select')}>
افزودن سوال
</button>
:
addQuestionPopup === 'select' &&
<select onChange={(e) => { setFakeState(fakeState + 5); setNumberOfOptions(e.target.value); setAddQuestionPopuo('component')}}>
<option>تعداد گزینه ها</option>
{
[1,2,3,4,5,6].map(
item => <option>{item}</option>
)
}
</select>
}
3 years ago
</div>}
</div>
)}
</Droppable>
<div className="w-1/2 flex flex-col items-center justify-start">
<div className="w-full h-16 mb-1 bg-green-400 border-b border-gray-200">
</div>
<Droppable droppableId="QUESTIONS_IN_BANK">
{(provided) => (
<div className="w-full py-1 flex flex-col items-center overflow-x-hidden overflow-scroll" >
3 years ago
3 years ago
{selectedCourse.id !== null && <>
<div className="w-4/5" {...provided.droppableProps} ref={provided.innerRef}>
{
addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map(
(course, index) => (
<Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}>
{(provided) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} className="flex items-start justify-center w-full">
<Question data={course} />
</div>
)}
</Draggable>
)
)
}
</div>
</>
}
{/* <Question /> */}
3 years ago
{provided.placeholder}
</div>
3 years ago
)}
</Droppable>
</div>
</div>
</DragDropContext>
<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);