From 6a9ec907046934d26eaa5b79c497f0fe59e67f02 Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Wed, 9 Mar 2022 15:40:15 +0330
Subject: [PATCH] Questionnaire Exam Order Can Change Now!

---
 src/redux/reducers/exam.js                    |   7 +
 .../addExam/views/AddQuestionsFromBank.js     |   5 +-
 .../addExam/views/addQuestionnaireExam.js     | 159 ++++++++++++------
 3 files changed, 114 insertions(+), 57 deletions(-)

diff --git a/src/redux/reducers/exam.js b/src/redux/reducers/exam.js
index b52c3aa..3c793b3 100644
--- a/src/redux/reducers/exam.js
+++ b/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;
 
diff --git a/src/view/addExam/views/AddQuestionsFromBank.js b/src/view/addExam/views/AddQuestionsFromBank.js
index fa8717b..fd96318 100644
--- a/src/view/addExam/views/AddQuestionsFromBank.js
+++ b/src/view/addExam/views/AddQuestionsFromBank.js
@@ -422,11 +422,12 @@ 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>
                                                 <button className=" w-2/3 mr-1 bg-transparent text-xl  text-blue3A border-gray-300 h-12 rounded-xl border mb-6"
diff --git a/src/view/addExam/views/addQuestionnaireExam.js b/src/view/addExam/views/addQuestionnaireExam.js
index b39df10..90e86d0 100644
--- a/src/view/addExam/views/addQuestionnaireExam.js
+++ b/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);
@@ -23,14 +26,14 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
     const [showCoursesInList, setShowCoursesInList] = useState([]);
     const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
     const [selectedQuestionare, setSelectedQuestionare] = useState({
-        id: null, 
+        id: null,
         courses: []
     });
     const [answers, setAnswers] = useState(null);
     const [newCourse, setNewCourse] = useState({
         id: addExamState.questionairesCourses.length + 1,
         questionnaireId: selectedQuestionare.id,
-        questionsQuantity:20,
+        questionsQuantity: 20,
         name: '',
         coefficient: 4
     })
@@ -49,21 +52,21 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
     console.log(addExamState.questionairesCourses)
     console.log(selectedCourse)
     console.log(answers)
- 
+
     const [fakeState, setFakeState] = useState(2);
 
 
     useEffect(() => {
         // questoinaresLists.map(item => showCoursesInList.push(false));
-        if(answers !== null && answers !== []) {
-        answers.map(item => dispatch({type: 'ADD_ANSWERS', payload : item}))
+        if (answers !== null && answers !== []) {
+            answers.map(item => dispatch({ type: 'ADD_ANSWERS', payload: item }))
         }
-        
+
     }, [answers])
 
     const payload = { name: name, description: description, type: type };
 
-    
+
 
     return (
         <>
@@ -87,16 +90,16 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
                         </h1>
                         <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})} />
+                                <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 })} />
                                 <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>
                             </div>
 
@@ -161,16 +164,16 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
                 </div>
             }
             {
-                addCoursePopup && 
+                addCoursePopup &&
                 <AddQuestionnaireCourse
-                  closeOnClick={() => setAddCoursePopup(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)} }
-                  />
-
-               
+                    closeOnClick={() => setAddCoursePopup(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) }}
+                />
+
+
             }
             <div className="flex py-10 items-start px-10 border-b border-gray-300">
                 <div className="flex flex-col w-1/6">
@@ -181,21 +184,67 @@ 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)
 
-                    {
-                        addExamState.questionnaires.map(
-                            (item => (
-                                <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`}
-                                 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>
-                            ))
-                        )
-                    }
+                            }
+                        }}
+                    >
+                        <Droppable droppableId="Choosed_Questionnaires" direction="horizontal" >
+                            {(provided) => (
+                                <div className="flex">
+                                    
+                                    <div className=" flex " {...provided.droppableProps} ref={provided.innerRef}>
+                                        {
+                                            addExamState.questionnaires.map(
+                                                ((item, index) => (
+                                                <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) })}
+                                                    >
+
+                                                        <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' }}>
@@ -215,38 +264,38 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
                 <div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
                     {
                         selectedQuestionare.id !== null && (<>
-                        <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="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)}}/>
-                                    )
-                                )
-                            }
-                        </div>
-                        </div>
+                            <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="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) }} />
+                                            )
+                                        )
+                                    }
+                                </div>
+                            </div>
                         </>)
                     }
                     {selectedQuestionare.id !== null &&
                         <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={() => setAddCoursePopup(true)}>
                                 افزودن درس
-                        </button>
+                            </button>
                         </div>}
                 </div>
                 <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)}}/>
+                        <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
+                            passAnswers={data => { setAnswers(data); setFakeState(fakeState - 2) }} />
                     </div>
                 </div>
-                
+
             </div>