|
|
|
|
|
|
|
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 filterIcon from '../../../assets/img/filter.svg'
|
|
|
|
import Question from "../components/question";
|
|
|
|
import { numOfinitQs } from "../../../redux/reducers/exam";
|
|
|
|
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);
|
|
|
|
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: [],
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 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 };
|
|
|
|
|
|
|
|
const handleOnDragEnd = (result) => {
|
|
|
|
const { source, destination } = result;
|
|
|
|
|
|
|
|
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 })
|
|
|
|
|
|
|
|
} 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)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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)
|
|
|
|
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">
|
|
|
|
افزودن درس
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
addExamState.courseBank.map(
|
|
|
|
(item, index) => (
|
|
|
|
<>
|
|
|
|
<div className="w-full flex items-center py-2 justify-between 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 })
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/>
|
|
|
|
<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-200">
|
|
|
|
<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">
|
|
|
|
<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}>
|
|
|
|
{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>
|
|
|
|
|
|
|
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{/* Picking Question Container */}
|
|
|
|
<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 border-b border-gray-200 px-2 pl-0">
|
|
|
|
{/* Picked Qeustions From Bank */}
|
|
|
|
<Droppable droppableId="Choosed_Questions_Form_Bank">
|
|
|
|
{(provided) => (
|
|
|
|
|
|
|
|
|
|
|
|
<div className="w-1/2 border-l flex flex-col border-gray-200 py-0 pb-6" {...provided.droppableProps} ref={provided.innerRef}>
|
|
|
|
{
|
|
|
|
selectedCourse.id !== null && (<>
|
|
|
|
|
|
|
|
{/* Picked Questions Top Bar */}
|
|
|
|
<div className="w-full flex h-16 px-8 mb-3 justify-start pt-4 items-center">
|
|
|
|
<h1 className="text-blue3A font-bold text-lg text-right pl-4">
|
|
|
|
سوالات {selectedCourse.title}
|
|
|
|
</h1>
|
|
|
|
<div className="px-2 pl-4 text-gray37 text-sm flex items-center border-l border-red52">
|
|
|
|
<p>ضریب</p>
|
|
|
|
<input type='number' value={selectedCourse?.coefficient} onChange={(e) => console.log(e.target.value)}
|
|
|
|
className="w-5 h-5 placeholder:text-blue3A flex text-center items-center pt-1 rounded border border-red5B text-sm text-gray-600 mr-2" />
|
|
|
|
</div>
|
|
|
|
<div className="px-2 pl-0 text-gray37 text-sm flex items-center ">
|
|
|
|
<p>تعداد گزینه</p>
|
|
|
|
<input type='number' value={selectedCourse?.numberOfOptions}
|
|
|
|
min='2'
|
|
|
|
max='6'
|
|
|
|
onChange={(e) => {
|
|
|
|
setSelectedCourse({...selectedCourse, numberOfOptions: e.target.value})
|
|
|
|
dispatch({type:'CHANGE_COURSE_NUM_OF_OPTIONS', payload:{
|
|
|
|
courseId: selectedCourse.id,
|
|
|
|
value: parseInt(e.target.value)
|
|
|
|
}})}}
|
|
|
|
className="w-5 h-5 flex text-center placeholder:text-blue3A items-center pt-1 rounded border border-red5B text-sm text-gray-600 mr-2" />
|
|
|
|
</div>
|
|
|
|
<div className="px-2 pl-4 text-gray37 text-sm flex items-center ">
|
|
|
|
<Checkbox name={`ADD_QUESTION_HAS_MINUS__${selectedCourse.id}`} />
|
|
|
|
<p>نمره منفی</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{ height: '550px' }}>
|
|
|
|
<div className="w-11/12 ">
|
|
|
|
{
|
|
|
|
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) => (
|
|
|
|
<div className="flex items-start" {...provided.draggableProps} ref={provided.innerRef}>
|
|
|
|
<div className="mt-8 px-2 m-0" {...provided.dragHandleProps}>
|
|
|
|
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<path d="M3 7H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
|
|
|
|
<path d="M3 12H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
|
|
|
|
<path d="M3 17H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<Question data={item} />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</Draggable>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
{provided.placeholder}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</>)
|
|
|
|
}
|
|
|
|
{selectedCourse.id !== null &&
|
|
|
|
<div className="w-full flex justify-center mt-10">
|
|
|
|
{addQuestionPopup == false &&
|
|
|
|
<div className="flex flex-col w-full items-center">
|
|
|
|
<div className="flex w-4/5 items-center justify-center">
|
|
|
|
|
|
|
|
<input type='file' className="hidden" id="Upload_Pdf_To_Exam" accept=".pdf,.doc"/>
|
|
|
|
<label
|
|
|
|
htmlFor="Upload_Pdf_To_Exam"
|
|
|
|
className=" w-1/3 ml-1 cursor-pointer bg-transparent text-xl flex items-center justify-center text-blue3A border-gray-300 h-12 rounded-xl border mb-6"
|
|
|
|
|
|
|
|
>
|
|
|
|
آپلود PDF
|
|
|
|
</label>
|
|
|
|
<button className=" w-2/3 mr-1 bg-transparent text-xl text-blue3A border-gray-300 h-12 rounded-xl border mb-6"
|
|
|
|
onClick={() => { setFakeState(fakeState + 5); setNumberOfOptions(selectedCourse.numberOfOptions); setAddQuestionPopuo('component') }}>
|
|
|
|
اضافه کردن سوال جدید +
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<h1 className="w-4/5 text-center border-b border-red52 my-5 mx-0" style={{ lineHeight: '0.1em' }}>
|
|
|
|
<span className="bg-white py-0 px-10 text-blue3A"
|
|
|
|
>پایان سوالات</span>
|
|
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
}
|
|
|
|
</div>}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
</Droppable>
|
|
|
|
<div className="w-1/2 flex flex-col items-center justify-start">
|
|
|
|
{selectedCourse.id !== null ?
|
|
|
|
<>
|
|
|
|
<div className="w-full flex pb-4 py-2 px-8 mb-3 justify-between pt-4 border-b border-gray-200 items-center">
|
|
|
|
<div className="flex justify-start items-center">
|
|
|
|
<div className="text-blue3A flex items-center font-bold text-lg text-right pl-4">
|
|
|
|
<Checkbox name={`CHOOSE_ALL_QUESTIONS_IN_BANK_${selectedCourse.id}`} />
|
|
|
|
<h1 className="pr-2">انتخاب همه</h1>
|
|
|
|
</div>
|
|
|
|
<div className="px-2 pl-4 text-gray37 text-sm flex items-center ">
|
|
|
|
<img src={filterIcon} />
|
|
|
|
<select className="mr-2 bg-transparent border border-gray-200 text-gray-500 pl-4 outline-none pr-2 rounded-md py-2">
|
|
|
|
<option className="hover:bg-red52">فیلتر بر اساس</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className="px-2 pl-10 text-gray37 text-sm flex items-center ">
|
|
|
|
|
|
|
|
<input type='search' placeholder="جستجو..." onChange={(e) => console.log(e.target.value)}
|
|
|
|
className="w-full h-10 flex px-4 items-center pt-1 outline-none rounded-md border border-gray-300 text-sm text-gray-600 mr-2" />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<Droppable droppableId="QUESTIONS_IN_BANK">
|
|
|
|
{(provided) => (
|
|
|
|
|
|
|
|
<div className="w-full py-1 flex flex-col items-center overflow-x-hidden overflow-scroll" >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="w-11/12" {...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} ref={provided.innerRef} className="flex items-start justify-center w-full">
|
|
|
|
<div className="mt-8 px-2 m-0" {...provided.dragHandleProps}>
|
|
|
|
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<path d="M3 7H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
|
|
|
|
<path d="M3 12H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
|
|
|
|
<path d="M3 17H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<Question data={course} />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</Draggable>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <Question /> */}
|
|
|
|
{provided.placeholder}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
)}
|
|
|
|
</Droppable>
|
|
|
|
</>
|
|
|
|
:
|
|
|
|
<div className="w-full" style={{ height: '450px' }}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</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);
|