From 3826d313a03faa07fe3a9dd3cb352fff03771674 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Wed, 9 Mar 2022 12:11:09 +0330 Subject: [PATCH] Filter And Information Bar Of Add Exam Made + Styling All Done --- src/assets/img/filter.svg | 4 + src/redux/reducers/exam.js | 5 + src/view/addExam/index.js | 2 +- .../addExam/views/AddQuestionsFromBank.js | 234 +++++++++++------- tailwind.config.js | 1 + 5 files changed, 158 insertions(+), 88 deletions(-) create mode 100644 src/assets/img/filter.svg diff --git a/src/assets/img/filter.svg b/src/assets/img/filter.svg new file mode 100644 index 0000000..b64b5d9 --- /dev/null +++ b/src/assets/img/filter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/redux/reducers/exam.js b/src/redux/reducers/exam.js index 5d0a118..8555a5f 100644 --- a/src/redux/reducers/exam.js +++ b/src/redux/reducers/exam.js @@ -37,6 +37,7 @@ const initialState = { questionsQuantity: 20, name: 'ریاضی', coefficient: 4, + }, ], @@ -49,11 +50,15 @@ const initialState = { { id: 1, title: 'ریاضی', + coefficient: 4, + numberOfOptions: 4, selectedQuestions: [] }, { id: 2, title: 'شیمی', + coefficient: 3, + numberOfOptions: 3, selectedQuestions: [] }, ], diff --git a/src/view/addExam/index.js b/src/view/addExam/index.js index 2b01685..b93f795 100644 --- a/src/view/addExam/index.js +++ b/src/view/addExam/index.js @@ -58,7 +58,7 @@ const AddExam = () => { ] return( -
+

ساخت آزمون جدید diff --git a/src/view/addExam/views/AddQuestionsFromBank.js b/src/view/addExam/views/AddQuestionsFromBank.js index 1aaaab8..b10ec4c 100644 --- a/src/view/addExam/views/AddQuestionsFromBank.js +++ b/src/view/addExam/views/AddQuestionsFromBank.js @@ -8,7 +8,7 @@ import DatePicker from "../../../components/Calendar/CalendarComponents/DatePick import Checkbox from "../../../components/Checkbox"; import RangeDatePicker from "../../../components/RangeDatePicker"; import SelectedCourse from "../../../components/selectedCourse"; -import AddQuestionnaireCourse from "../components/addQuestionnaireCourse"; +import filterIcon from '../../../assets/img/filter.svg' import Question from "../components/question"; import { numOfinitQs } from "../../../redux/reducers/exam"; import AddQuestionPopUp from "../components/addQuestion"; @@ -47,7 +47,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS const [fakeState, setFakeState] = useState(2); - + const payload = { name: name, description: description, type: type }; @@ -95,11 +95,11 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS const [question, setQuestion] = useState({ title: '', options: [], - - + + }) useEffect(() => { - + const arr = []; for (var i = 1; i <= numberOfOptions; i++) { arr.push({ @@ -113,9 +113,9 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS ...question, options: arr, courseId: selectedCourse.id, - questionId:numOfinitQs + addExamState.questionBank.length + fakeState, + questionId: numOfinitQs + addExamState.questionBank.length + fakeState, }) - + }, [numberOfOptions]) console.log(question) @@ -147,7 +147,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS addExamState.courseBank.map( (item, index) => ( <> -
+
e.target.checked ? @@ -186,7 +186,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
} { - addQuestionPopup === 'component' && + addQuestionPopup === 'component' && // setAddQuestionPopuo(false)} // submitOnClick={data => { @@ -206,7 +206,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS } -
+
تنظیمات آزمون @@ -217,7 +217,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
{ - const {source, destination} = result; + const { source, destination } = result; if (source.droppableId == 'Choosed_Courses_Form_Bank') { // const data = { // startIndex: choosedQuestion, @@ -225,17 +225,17 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS // } // 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) - + } }} > @@ -264,7 +264,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
)} - + )) @@ -291,6 +291,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
+ {/* Picking Question Container */} handleOnDragEnd(result)} onDragStart={(result) => { console.log(result) @@ -300,22 +301,45 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS seChoosedQuestion(addExamState.questionBank.find(itm => itm.questionId == result.source.index)) } }}> -
+ +
+ {/* Picked Qeustions From Bank */} {(provided) => ( -
+
{ selectedCourse.id !== null && (<> -

- {selectedCourse.title} -

-
-
+ + {/* Picked Questions Top Bar */} +
+

+ سوالات {selectedCourse.title} +

+
+

ضریب

+ console.log(e.target.value)} + className="w-5 h-5 flex text-center items-center pt-1 rounded border border-red5B text-sm text-gray-600 mr-2" /> +
+
+

تعداد گزینه

+ console.log(e.target.value)} + className="w-5 h-5 flex text-center items-center pt-1 rounded border border-red5B text-sm text-gray-600 mr-2" /> +
+
+ +

نمره منفی

+
+ +
+ + +
+
{ - addQuestionPopup === 'component' && - setQuestion({ ...question, title: title @@ -324,12 +348,12 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS setAsAnswer={e => { let thisOption = question.options.find(itm => itm.id == e) thisOption.isAnswer = !thisOption.isAnswer - + setQuestion({ ...question, - options : [...options] + options: [...options] }) - + }} scorePass={score => setQuestion( { @@ -342,17 +366,17 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS thisOption.title = optionTitle setQuestion({ ...question, - options : [...options] + options: [...options] }) }} - submitOnClick={() => - {setAddQuestionPopuo(false) - - dispatch({type: 'ADD_CUSTOM_QUESTION', payload: question}); - setNumberOfOptions(null) - - } } - cancelOnClick ={() => setAddQuestionPopuo(false)} + submitOnClick={() => { + setAddQuestionPopuo(false) + + dispatch({ type: 'ADD_CUSTOM_QUESTION', payload: question }); + setNumberOfOptions(null) + + }} + cancelOnClick={() => setAddQuestionPopuo(false)} /> } @@ -361,7 +385,15 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS (item, index) => ( {(provided) => ( -
+
+
+ + + + + + +
)} @@ -377,76 +409,104 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS ) } {selectedCourse.id !== null && -
- {addQuestionPopup == false ? - - - - : - addQuestionPopup === 'select' && - - - - - - } -
} +
+ {addQuestionPopup == false && +
+ +

+ پایان سوالات +

+
+ + } +
}
)}
-
+ {selectedCourse.id !== null ? + <> +
+
+
+ +

انتخاب همه

+
+
+ + +
+
-
- - {(provided) => ( -
+
+ + console.log(e.target.value)} + className="w-full h-10 flex px-4 items-center pt-1 outline-none rounded-md border border-gray-300 text-sm text-gray-600 mr-2" /> +
+ + +
+ + {(provided) => ( +
- {selectedCourse.id !== null && <> -
- { - addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map( - (course, index) => ( - - {(provided) => ( -
- -
- )} - + +
+ { + addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map( + (course, index) => ( + + {(provided) => ( + +
+
+ + + + + + +
+ +
+ )} + + ) ) - ) - } + } + +
+ + + {/* */} + {provided.placeholder}
- - } - {/* */} - {provided.placeholder} -
+ )} + + + : +
- )} - +
+ }
+
diff --git a/tailwind.config.js b/tailwind.config.js index 88f8680..83e5b22 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -33,6 +33,7 @@ module.exports = { grayE0 : '#e0e0e0', gray81 : '#818181', gray70 : '#707070', + gray37: '#373737', red82OP: 'rgba(223, 20, 82, 0.08)', pinkF5: '#fff1f5', pinkD6 : '#ffd6d6',