Sortings Done

main
Pedram Keshavarzi 3 years ago
parent 0e05d5a0b6
commit 0353a25a6f
  1. 6
      src/redux/reducers/exam.js
  2. 104
      src/view/addExam/views/AddQuestionsFromBank.js

@ -288,6 +288,12 @@ export default function addExamReduser(state = initialState, { type, payload })
...state, ...state,
courses: newChangedCourseSort courses: newChangedCourseSort
} }
case 'CHANGE_COURSE_ORDER':
console.log(payload)
return {
...state,
courses: payload
}
default: default:

@ -10,13 +10,14 @@ import RangeDatePicker from "../../../components/RangeDatePicker";
import SelectedCourse from "../../../components/selectedCourse"; import SelectedCourse from "../../../components/selectedCourse";
import AddQuestionnaireCourse from "../components/addQuestionnaireCourse"; import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
import Question from "../components/question"; import Question from "../components/question";
import AddQuestionPopUp from "../components/addQuestion";
const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backStep }) => { const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [name, setName] = useState(null); const [name, setName] = useState(null);
const [type, setType] = useState(null); const [type, setType] = useState(null);
const [description, setDescription] = useState(null); const [description, setDescription] = useState(null);
const [questionarePopUp, setQuestionairePopUp] = useState(false); const [questionarePopUp, setQuestionairePopUp] = useState(false);
const [addCoursePopup, setAddCoursePopup] = useState(false); const [addQuestionPopup, setAddQuestionPopuo] = useState(false);
const [newQuestionaire, setNewQuestionaire] = useState({ const [newQuestionaire, setNewQuestionaire] = useState({
id: addExamState.questionnaires.length + 1, id: addExamState.questionnaires.length + 1,
name: '', name: '',
@ -117,7 +118,7 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
</div> </div>
</div> </div>
<h1 className="w-full text-right text-lg text-red52 font-bold pt-4"> <h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
افزودن دفترچه افزودن درس
</h1> </h1>
@ -165,14 +166,10 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
</div> </div>
} }
{ {
// addCoursePopup && addQuestionPopup &&
// <AddQuestionnaireCourse <AddQuestionPopUp
// closeOnClick={() => setAddCoursePopup(false)} closeOnClick={() => setAddQuestionPopuo(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)} }
// />
} }
@ -185,25 +182,68 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p> <p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
</div> </div>
<div className="w-5/6 flex flex-row"> <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.length > 0 &&
addExamState.courses.map( addExamState.courses.map(
(item => ( (item, index) => (
<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`} <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)} onClick={() => setSelectedCourse(item)}
> >
<p className="w-full text-left px-4" onClick={() => dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item })}> <p className="w-full text-left px-4" >
x <span onClick={() => { dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }); setSelectedCourse(null); setFakeState(fakeState + 24) }}> x </span>
</p> </p>
<p className="text-red52"> <p className="text-red52">
{item.title} {item.title}
</p> </p>
</div> </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)}> <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 className="" style={{ fontSize: '40px' }}>
+ +
@ -213,12 +253,13 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<DragDropContext onDragEnd={result => handleOnDragEnd(result)} <DragDropContext onDragEnd={result => handleOnDragEnd(result)}
onDragStart={(result) => onDragStart={(result) => {
{
console.log(result) console.log(result)
if (result.source.droppableId == 'Choosed_Questions_Form_Bank') { if (result.source.droppableId == 'Choosed_Questions_Form_Bank') {
seChoosedQuestion(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions[result.source.index]) seChoosedQuestion(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions[result.source.index])
@ -245,7 +286,7 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
(item, index) => ( (item, index) => (
<Draggable draggableId={`_${item.questionId}`} index={index} key={`CHOOSED_QUESTIONS_${item.questionId}`}> <Draggable draggableId={`_${item.questionId}`} index={index} key={`CHOOSED_QUESTIONS_${item.questionId}`}>
{(provided) => ( {(provided) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> <div className="flex" {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<Question data={item} /> <Question data={item} />
</div> </div>
)} )}
@ -253,18 +294,19 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
) )
) )
} }
{provided.placeholder}
</div> </div>
</div> </div>
{provided.placeholder}
</>) </>)
} }
{/* {selectedQuestionare.id !== null && {selectedCourse.id !== null &&
<div className="w-full flex justify-center mt-10"> <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 className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddQuestionPopuo(true)}>
افزودن درس افزودن سوال
</button> </button>
</div>} */} </div>}
</div> </div>
@ -274,11 +316,12 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
<Droppable droppableId="QUESTIONS_IN_BANK"> <Droppable droppableId="QUESTIONS_IN_BANK">
{(provided) => ( {(provided) => (
<div className="w-full py-8 flex flex-col items-center ">
<div className="w-4/5 py-8" {...provided.droppableProps} ref={provided.innerRef}>
{/* <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id} {selectedCourse.id !== null && <>
passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/> */} <div className="w-4/5" {...provided.droppableProps} ref={provided.innerRef}>
{selectedCourse.id !== null && {
addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map( addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map(
(course, index) => ( (course, index) => (
<Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}> <Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}>
@ -292,10 +335,17 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
) )
) )
} }
</div>
</>
}
{/* <Question /> */} {/* <Question /> */}
{provided.placeholder} {provided.placeholder}
</div> </div>
)} )}
</Droppable> </Droppable>
</div> </div>

Loading…
Cancel
Save