pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Questionnaire Exam Order Can Change Now!

Browse Source
main
Pedram Keshavarzi 3 years ago
parent b9e3f2cdd2
commit 6a9ec90704
3 changed files with 114 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/redux/reducers/exam.js
  2. 5
      src/view/addExam/views/AddQuestionsFromBank.js
  3. 159
      src/view/addExam/views/addQuestionnaireExam.js

7
src/redux/reducers/exam.js
Unescape View File

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

5
src/view/addExam/views/AddQuestionsFromBank.js
Unescape View File

@ -422,11 +422,12 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
<div className="flex flex-col w-full items-center"> <div className="flex flex-col w-full items-center">
<div className="flex w-4/5 items-center justify-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 <label
htmlFor="Upload_Pdf_To_Exam" 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" 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 آپلود PDF
</label> </label>
<button className=" w-2/3 mr-1 bg-transparent text-xl text-blue3A border-gray-300 h-12 rounded-xl border mb-6" <button className=" w-2/3 mr-1 bg-transparent text-xl text-blue3A border-gray-300 h-12 rounded-xl border mb-6"

159
src/view/addExam/views/addQuestionnaireExam.js
Unescape View File

@ -8,6 +8,9 @@ import Checkbox from "../../../components/Checkbox";
import RangeDatePicker from "../../../components/RangeDatePicker"; 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 { 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 AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [name, setName] = useState(null); const [name, setName] = useState(null);
@ -23,14 +26,14 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
const [showCoursesInList, setShowCoursesInList] = useState([]); const [showCoursesInList, setShowCoursesInList] = useState([]);
const [choosedQuestionaries, seChoosedQuestionaries] = useState([]); const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
const [selectedQuestionare, setSelectedQuestionare] = useState({ const [selectedQuestionare, setSelectedQuestionare] = useState({
id: null, id: null,
courses: [] courses: []
}); });
const [answers, setAnswers] = useState(null); const [answers, setAnswers] = useState(null);
const [newCourse, setNewCourse] = useState({ const [newCourse, setNewCourse] = useState({
id: addExamState.questionairesCourses.length + 1, id: addExamState.questionairesCourses.length + 1,
questionnaireId: selectedQuestionare.id, questionnaireId: selectedQuestionare.id,
questionsQuantity:20, questionsQuantity: 20,
name: '', name: '',
coefficient: 4 coefficient: 4
}) })
@ -49,21 +52,21 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
console.log(addExamState.questionairesCourses) console.log(addExamState.questionairesCourses)
console.log(selectedCourse) console.log(selectedCourse)
console.log(answers) console.log(answers)
const [fakeState, setFakeState] = useState(2); const [fakeState, setFakeState] = useState(2);
useEffect(() => { useEffect(() => {
// questoinaresLists.map(item => showCoursesInList.push(false)); // 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]) }, [answers])
const payload = { name: name, description: description, type: type }; const payload = { name: name, description: description, type: type };
return ( return (
<> <>
@ -87,16 +90,16 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
</h1> </h1>
<div className="w-full flex items-center flex-col mt-6 px-2 "> <div className="w-full flex items-center flex-col mt-6 px-2 ">
<div className="flex justify-between w-full"> <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" <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" <input type="file" placeholder="آپلود فایل دفترچه" className="bg-white items-center flex h-12 text-red26 outline-none"
/> />
</div> </div>
<div className="flex w-full justify-end pt-2"> <div className="flex w-full justify-end pt-2">
<button className="px-6 py-2 rounded-md bg-red52 text-white font-bold" <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> </button>
</div> </div>
@ -161,16 +164,16 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
</div> </div>
} }
{ {
addCoursePopup && addCoursePopup &&
<AddQuestionnaireCourse <AddQuestionnaireCourse
closeOnClick={() => setAddCoursePopup(false)} 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) }}
/> />
} }
<div className="flex py-10 items-start px-10 border-b border-gray-300"> <div className="flex py-10 items-start px-10 border-b border-gray-300">
<div className="flex flex-col w-1/6"> <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> <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_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`} <Droppable droppableId="Choosed_Questionnaires" direction="horizontal" >
onClick={() => setSelectedQuestionare({id : item.id,name: item.name, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})} {(provided) => (
> <div className="flex">
<p className="text-red52"> <div className=" flex " {...provided.droppableProps} ref={provided.innerRef}>
دفترچه {item.name} {
</p> addExamState.questionnaires.map(
</div> ((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)}> <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' }}> <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"> <div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
{ {
selectedQuestionare.id !== null && (<> selectedQuestionare.id !== null && (<>
<h1 className="text-blue3A w-full font-bold text-lg text-right"> <h1 className="text-blue3A w-full font-bold text-lg text-right">
دفترچه {selectedQuestionare.name} دفترچه {selectedQuestionare.name}
</h1> </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 "> <div className="w-4/5 ">
{ {
addExamState.questionairesCourses.filter(itm => itm.questionnaireId == selectedQuestionare.id).map( addExamState.questionairesCourses.filter(itm => itm.questionnaireId == selectedQuestionare.id).map(
(item) => ( (item) => (
<SelectedCourse title={item.name} coefficient={item.coefficient} questionQuantity={item.questionsQuantity} <SelectedCourse title={item.name} coefficient={item.coefficient} questionQuantity={item.questionsQuantity}
onClick={() => {setSelectedCourse(item); console.log(selectedCourse)}}/> onClick={() => { setSelectedCourse(item); console.log(selectedCourse) }} />
) )
) )
} }
</div> </div>
</div> </div>
</>) </>)
} }
{selectedQuestionare.id !== null && {selectedQuestionare.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={() => setAddCoursePopup(true)}>
افزودن درس افزودن درس
</button> </button>
</div>} </div>}
</div> </div>
<div className="w-1/2 flex justify-center"> <div className="w-1/2 flex justify-center">
<div className="w-4/5 py-8"> <div className="w-4/5 py-8">
<AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id} <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>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save