Questionnaire Exam Order Can Change Now!

src/redux/reducers/exam.js

@@ -326,6 +326,13 @@ export default function addExamReduser(state = initialState, { type, payload })
                
             }
 
+        case 'CHANGE_QUESTIONNAIRES_ORDER':
+            return {
+                ...state,
+                questionnaires: payload
+
+            }    
+
         default:
             return state;
 

src/view/addExam/views/AddQuestionsFromBank.js

@@ -422,10 +422,11 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
                                             <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"/>
+                                                <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>

src/view/addExam/views/addQuestionnaireExam.js

@@ -8,6 +8,9 @@ import Checkbox from "../../../components/Checkbox";
 import RangeDatePicker from "../../../components/RangeDatePicker";
 import SelectedCourse from "../../../components/selectedCourse";
 import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
+import { DragDropContext } from "react-beautiful-dnd";
+import { Droppable } from "react-beautiful-dnd";
+import { Draggable } from "react-beautiful-dnd";
 
 const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
     const [name, setName] = useState(null);
@@ -30,7 +33,7 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
     const [newCourse, setNewCourse] = useState({
         id: addExamState.questionairesCourses.length + 1,
         questionnaireId: selectedQuestionare.id,
-        questionsQuantity:20,
+        questionsQuantity: 20,
         name: '',
         coefficient: 4
     })
@@ -55,8 +58,8 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
 
     useEffect(() => {
         // questoinaresLists.map(item => showCoursesInList.push(false));
-        if(answers !== null && answers !== []) {
+        if (answers !== null && answers !== []) {
-        answers.map(item => dispatch({type: 'ADD_ANSWERS', payload : item}))
+            answers.map(item => dispatch({ type: 'ADD_ANSWERS', payload: item }))
         }
 
     }, [answers])
@@ -88,13 +91,13 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
                         <div className="w-full flex items-center flex-col  mt-6 px-2 ">
                             <div className="flex justify-between w-full">
                                 <input type='text' placeholder="نام دفترچه..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
-                                onChange={e => setNewQuestionaire({...newQuestionaire, name: e.target.value})} />
+                                    onChange={e => setNewQuestionaire({ ...newQuestionaire, name: e.target.value })} />
                                 <input type="file" placeholder="آپلود فایل دفترچه" className="bg-white items-center flex h-12 text-red26 outline-none"
                                 />
                             </div>
                             <div className="flex w-full justify-end pt-2">
                                 <button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
-                                onClick={() => {dispatch({type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire}); setQuestionairePopUp(false) }}
+                                    onClick={() => { dispatch({ type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire }); setQuestionairePopUp(false) }}
                                 >
                                     تایید
                                 </button>
@@ -164,10 +167,10 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
                 addCoursePopup &&
                 <AddQuestionnaireCourse
                     closeOnClick={() => setAddCoursePopup(false)}
-                  nameOnChange={e => setNewCourse({...newCourse, name: e.target.value})}
+                    nameOnChange={e => setNewCourse({ ...newCourse, name: e.target.value })}
-                  coefficientOnChange={e => setNewCourse({...newCourse, coefficient: e.target.vlaue})}
+                    coefficientOnChange={e => setNewCourse({ ...newCourse, coefficient: e.target.vlaue })}
-                  questionQuantityOnChange={e => setNewCourse({...newCourse, questionsQuantity: e.target.value, questionnaireId: selectedQuestionare.id})}
+                    questionQuantityOnChange={e => setNewCourse({ ...newCourse, questionsQuantity: e.target.value, questionnaireId: selectedQuestionare.id })}
-                  submitOnClick={() => {dispatch({type: 'ADD_QUESTIONNAIRE_COURSES', payload : newCourse}); setAddCoursePopup(false); setFakeState(fakeState + 356)} }
+                    submitOnClick={() => { dispatch({ type: 'ADD_QUESTIONNAIRE_COURSES', payload: newCourse }); setAddCoursePopup(false); setFakeState(fakeState + 356) }}
                 />
 
 
@@ -181,22 +184,68 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
                     <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_Questionnaires') {
+                                // const data = {
+                                //     startIndex: choosedQuestion,
+                                //     endIndex: destination.index
+                                // }
+                                // dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
+                                // console.log(data)
+
+                                const aaa = [...addExamState.questionnaires];
+                                const [removed] = aaa.splice(source.index, 1);
+
+                                aaa.splice(destination.index, 0, removed);
+                                dispatch({ type: 'CHANGE_QUESTIONNAIRES_ORDER', payload: aaa })
+                                console.log(result)
+                                console.log(source.index)
+                                console.log(destination.index)
+                                console.log(aaa)
 
+                            }
+                        }}
+                    >
+                        <Droppable droppableId="Choosed_Questionnaires" direction="horizontal" >
+                            {(provided) => (
+                                <div className="flex">
+                                    
+                                    <div className=" flex " {...provided.droppableProps} ref={provided.innerRef}>
                                         {
                                             addExamState.questionnaires.map(
-                            (item => (
+                                                ((item, index) => (
-                                <div className={`flex flex-col ${selectedQuestionare.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'}  items-center justify-center w-36 h-32 mx-2 font-bold  rounded-xl cursor-pointer`}
+                                                <Draggable draggableId={`QUESTIONNAIRE_${item.id}`} index={index} key={`CHOOSED_QUESTIONNAIRE_${item.id}`}>
-                                 onClick={() => setSelectedQuestionare({id : item.id,name: item.name, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})}
+                                                {(provided) => (
+                                               
+                                                    <div
+                                                    {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}
+                                                    className={`flex flex-col ${selectedQuestionare.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'}  items-center justify-center w-36 h-32 mx-2 font-bold  rounded-xl cursor-pointer`}
+                                                        onClick={() => setSelectedQuestionare({ id: item.id, name: item.name, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id) })}
                                                     >
 
                                                         <p className="text-red52">
                                                             دفترچه {item.name}
                                                         </p>
                                                     </div>
+                                                
+                                                )}
+
+                                                </Draggable>
                                                 ))
                                             )
+                                            
                                         }
                                        
+                                    </div>
+                                    
+                                    {provided.placeholder}
+                                </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={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
                         <p className="" style={{ fontSize: '40px' }}>
                             +
@@ -218,14 +267,14 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
                             <h1 className="text-blue3A  w-full font-bold text-lg text-right">
                                 دفترچه {selectedQuestionare.name}
                             </h1>
-                        <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '500px'}}>
+                            <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{ height: '500px' }}>
                                 <div className="w-4/5 ">
 
                                     {
                                         addExamState.questionairesCourses.filter(itm => itm.questionnaireId == selectedQuestionare.id).map(
                                             (item) => (
                                                 <SelectedCourse title={item.name} coefficient={item.coefficient} questionQuantity={item.questionsQuantity}
-                                        onClick={() => {setSelectedCourse(item); console.log(selectedCourse)}}/>
+                                                    onClick={() => { setSelectedCourse(item); console.log(selectedCourse) }} />
                                             )
                                         )
                                     }
@@ -243,7 +292,7 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
                 <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)}}/>
+                            passAnswers={data => { setAnswers(data); setFakeState(fakeState - 2) }} />
                     </div>
                 </div>