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

Filter And Information Bar Of Add Exam Made + Styling All Done

Browse Source
main
Pedram Keshavarzi 3 years ago
parent ced6e17471
commit 3826d313a0
5 changed files with 158 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/assets/img/filter.svg
  2. 5
      src/redux/reducers/exam.js
  3. 2
      src/view/addExam/index.js
  4. 234
      src/view/addExam/views/AddQuestionsFromBank.js
  5. 1
      tailwind.config.js

4
src/assets/img/filter.svg
Unescape View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.40002 2.09998H18.6C19.7 2.09998 20.6 2.99998 20.6 4.09998V6.29998C20.6 7.09998 20.1 8.09998 19.6 8.59998L15.3 12.4C14.7 12.9 14.3 13.9 14.3 14.7V19C14.3 19.6 13.9 20.4 13.4 20.7L12 21.6C10.7 22.4 8.90002 21.5 8.90002 19.9V14.6C8.90002 13.9 8.50002 13 8.10002 12.5L4.30002 8.49998C3.80002 7.99998 3.40002 7.09998 3.40002 6.49998V4.19998C3.40002 2.99998 4.30002 2.09998 5.40002 2.09998Z" stroke="#373737" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.93 2.09998L6 9.99998" stroke="#373737" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 752 B

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

@ -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: []
},
],

2
src/view/addExam/index.js
Unescape View File

@ -58,7 +58,7 @@ const AddExam = () => {
]
return(
<div className='flex flex-col w-[96%] py-[6%] bg-gray-100 rtl'>
<div className='flex flex-col w-[96%] py-[6%] bg-grayFD rtl'>
<div className='flex w-full items-center py-4 pb-8 px-10 border-b border-gray-300'>
<h1 className="text-blue3A text-lg font-bold w-1/5 text-right px-4 border-r-4 border-blue65">
ساخت آزمون جدید

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

@ -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) => (
<>
<div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-300">
<div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-200">
<Checkbox name={`PICK_QUESTIONARE_${index}`}
onChange={(e) =>
e.target.checked ?
@ -186,7 +186,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
</div>
}
{
addQuestionPopup === 'component' &&
addQuestionPopup === 'component' &&
// <AddQuestionPopUp
// closeOnClick={() => setAddQuestionPopuo(false)}
// submitOnClick={data => {
@ -206,7 +206,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
}
<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-200">
<div className="flex flex-col w-1/6">
<div className="text-blue3A text-lg font-bold text-right px-4 border-r-4 border-blue65">
تنظیمات آزمون
@ -217,7 +217,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
<div className="w-5/6 flex flex-row">
<DragDropContext
onDragEnd={(result) => {
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
</div>
)}
</Draggable>
))
@ -291,6 +291,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
</div>
</div>
{/* Picking Question Container */}
<DragDropContext onDragEnd={result => 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))
}
}}>
<div className="w-full flex px-10 pl-0">
<div className="w-full flex border-b border-gray-200 px-2 pl-0">
{/* Picked Qeustions From Bank */}
<Droppable droppableId="Choosed_Questions_Form_Bank">
{(provided) => (
<div className="w-1/2 border-l flex flex-col border-gray-300 py-10" {...provided.droppableProps} ref={provided.innerRef}>
<div className="w-1/2 border-l flex flex-col border-gray-200 py-0 pb-6" {...provided.droppableProps} ref={provided.innerRef}>
{
selectedCourse.id !== null && (<>
<h1 className="text-blue3A w-full font-bold text-lg text-right">
{selectedCourse.title}
</h1>
<div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '550px'}}>
<div className="w-4/5 ">
{/* Picked Questions Top Bar */}
<div className="w-full flex h-16 px-8 mb-3 justify-start pt-4 items-center">
<h1 className="text-blue3A font-bold text-lg text-right pl-4">
سوالات {selectedCourse.title}
</h1>
<div className="px-2 pl-4 text-gray37 text-sm flex items-center border-l border-red52">
<p>ضریب</p>
<input type='number' value={selectedCourse?.coefficient} onChange={(e) => 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" />
</div>
<div className="px-2 pl-0 text-gray37 text-sm flex items-center ">
<p>تعداد گزینه</p>
<input type='number' value={selectedCourse?.numberOfOptions} onChange={(e) => 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" />
</div>
<div className="px-2 pl-4 text-gray37 text-sm flex items-center ">
<Checkbox name={`ADD_QUESTION_HAS_MINUS__${selectedCourse.id}`} />
<p>نمره منفی</p>
</div>
</div>
<div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{ height: '550px' }}>
<div className="w-11/12 ">
{
addQuestionPopup === 'component' &&
<AddQuestionPopUp
addQuestionPopup === 'component' &&
<AddQuestionPopUp
titlePass={title => 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) => (
<Draggable draggableId={`_${item.questionId}`} index={index} key={`CHOOSED_QUESTIONS_${item.questionId}`}>
{(provided) => (
<div className="flex" {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<div className="flex items-start" {...provided.draggableProps} ref={provided.innerRef}>
<div className="mt-8 px-2 m-0" {...provided.dragHandleProps}>
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 7H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 12H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 17H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
</svg>
</div>
<Question data={item} />
</div>
)}
@ -377,76 +409,104 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
</>)
}
{selectedCourse.id !== null &&
<div className="w-full flex justify-center mt-10">
{addQuestionPopup == false ?
<button className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddQuestionPopuo('select')}>
افزودن سوال
</button>
:
addQuestionPopup === 'select' &&
<select onChange={(e) => { setFakeState(fakeState + 5); setNumberOfOptions(e.target.value); setAddQuestionPopuo('component')}}>
<option>تعداد گزینه ها</option>
{
[1,2,3,4,5,6].map(
item => <option>{item}</option>
)
}
</select>
}
</div>}
<div className="w-full flex justify-center mt-10">
{addQuestionPopup == false &&
<div className="flex flex-col w-full items-center">
<button className=" w-4/5 bg-transparent text-xl text-blue3A border-gray-300 h-12 rounded-xl border mb-6"
onClick={() => { setFakeState(fakeState + 5); setNumberOfOptions(selectedCourse.numberOfOptions); setAddQuestionPopuo('component') }}>
اضافه کردن سوال جدید +
</button>
<h1 className="w-4/5 text-center border-b border-red52 my-5 mx-0" style={{ lineHeight: '0.1em' }}>
<span className="bg-white py-0 px-10 text-blue3A"
>پایان سوالات</span>
</h1>
</div>
}
</div>}
</div>
)}
</Droppable>
<div className="w-1/2 flex flex-col items-center justify-start">
<div className="w-full h-16 mb-1 bg-green-400 border-b border-gray-200">
{selectedCourse.id !== null ?
<>
<div className="w-full flex pb-4 py-2 px-8 mb-3 justify-between pt-4 border-b border-gray-200 items-center">
<div className="flex justify-start items-center">
<div className="text-blue3A flex items-center font-bold text-lg text-right pl-4">
<Checkbox name={`CHOOSE_ALL_QUESTIONS_IN_BANK_${selectedCourse.id}`} />
<h1 className="pr-2">انتخاب همه</h1>
</div>
<div className="px-2 pl-4 text-gray37 text-sm flex items-center ">
<img src={filterIcon} />
<select className="mr-2 bg-transparent border border-gray-200 text-gray-500 pl-4 outline-none pr-2 rounded-md py-2">
<option className="hover:bg-red52">فیلتر بر اساس</option>
</select>
</div>
</div>
</div>
<Droppable droppableId="QUESTIONS_IN_BANK">
{(provided) => (
<div className="w-full py-1 flex flex-col items-center overflow-x-hidden overflow-scroll" >
<div className="px-2 pl-10 text-gray37 text-sm flex items-center ">
<input type='search' placeholder="جستجو..." onChange={(e) => 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" />
</div>
</div>
<Droppable droppableId="QUESTIONS_IN_BANK">
{(provided) => (
<div className="w-full py-1 flex flex-col items-center overflow-x-hidden overflow-scroll" >
{selectedCourse.id !== null && <>
<div className="w-4/5" {...provided.droppableProps} ref={provided.innerRef}>
{
addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map(
(course, index) => (
<Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}>
{(provided) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} className="flex items-start justify-center w-full">
<Question data={course} />
</div>
)}
</Draggable>
<div className="w-11/12" {...provided.droppableProps} ref={provided.innerRef}>
{
addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map(
(course, index) => (
<Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}>
{(provided) => (
<div {...provided.draggableProps} ref={provided.innerRef} className="flex items-start justify-center w-full">
<div className="mt-8 px-2 m-0" {...provided.dragHandleProps}>
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 7H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 12H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 17H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
</svg>
</div>
<Question data={course} />
</div>
)}
</Draggable>
)
)
)
}
}
</div>
{/* <Question /> */}
{provided.placeholder}
</div>
</>
}
{/* <Question /> */}
{provided.placeholder}
</div>
)}
</Droppable>
</>
:
<div className="w-full" style={{ height: '450px' }}>
)}
</Droppable>
</div>
}
</div>
</div>
</DragDropContext>

1
tailwind.config.js
Unescape View File

@ -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',

Write Preview
Loading…
Cancel
Save