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);
@@ -181,11 +184,44 @@ 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}`}>
+                                                {(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) })}
                                                     >
 
@@ -193,10 +229,23 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
                                                             دفترچه {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' }}>
                             +