parent
156a4f4364
commit
4510b210c3
14 changed files with 476 additions and 41 deletions
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 532 B After Width: | Height: | Size: 528 B |
@ -0,0 +1,57 @@ |
|||||||
|
const initialState = { |
||||||
|
grade: 8, |
||||||
|
groupId: 0, |
||||||
|
name: '', |
||||||
|
startDate: new Date(), |
||||||
|
endDate: new Date(), |
||||||
|
startTime: '19:0', |
||||||
|
endTime: '', |
||||||
|
description: '', |
||||||
|
type: 1, |
||||||
|
courses: [], |
||||||
|
questionnaires: [] |
||||||
|
} |
||||||
|
|
||||||
|
export default function addExamReduser(state = initialState, { type, payload }) { |
||||||
|
|
||||||
|
switch (type) { |
||||||
|
case 'ADD_EXAM_GRADE_AND_GROUP': |
||||||
|
return { |
||||||
|
...state, |
||||||
|
grade: payload.grade, |
||||||
|
groupId: payload.groupId |
||||||
|
} |
||||||
|
|
||||||
|
case 'ADD_EXAM_DESCRIPTION': |
||||||
|
return { |
||||||
|
...state, |
||||||
|
name: payload.name, |
||||||
|
startDate: new Date(), |
||||||
|
endDate: new Date(), |
||||||
|
startTime: '19:0', |
||||||
|
endTime: '', |
||||||
|
description: payload.description, |
||||||
|
type: payload.type |
||||||
|
} |
||||||
|
case 'ADD_EXAM_QUESTIONS': |
||||||
|
return { |
||||||
|
...state, |
||||||
|
name: payload.name, |
||||||
|
startDate: new Date(), |
||||||
|
endDate: new Date(), |
||||||
|
startTime: '19:0', |
||||||
|
endTime: '', |
||||||
|
description: payload.description, |
||||||
|
} |
||||||
|
case 'ADD_EXAM_QUESTIONAIRES': |
||||||
|
return { |
||||||
|
...state, |
||||||
|
payload |
||||||
|
} |
||||||
|
|
||||||
|
default: |
||||||
|
return state; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
import React,{useState} from 'react'; |
||||||
|
import Stepper from '../../components/Stepper'; |
||||||
|
import AddGradeGroup from './views/AddGradeGroup'; |
||||||
|
import AddExamDescription from './views/AddDescription'; |
||||||
|
import AddQuestions from './views/addQuestions'; |
||||||
|
|
||||||
|
const AddExam = () => { |
||||||
|
const [activeStep, setActiveStep] = useState([true, false, false, false, false]); |
||||||
|
const [step, setStep] = useState(0); |
||||||
|
const steps = [ |
||||||
|
{ |
||||||
|
title: 'انتخاب گروه و پایه تحصیلی', |
||||||
|
active: activeStep[0] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'تنظیمات آزمون', |
||||||
|
active: activeStep[1] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: ' ورود سوالات ', |
||||||
|
active: activeStep[2] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'پیش نمایش', |
||||||
|
active: activeStep[3] |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'ثبت نهایی', |
||||||
|
active: activeStep[4] |
||||||
|
}, |
||||||
|
] |
||||||
|
console.log(activeStep) |
||||||
|
const backStep = () => { |
||||||
|
|
||||||
|
const backStepArray = () => { |
||||||
|
const fakeArray = []; |
||||||
|
[0,1,2,3,4].map((item, index) => index < step ? fakeArray.push(true) : fakeArray.push(false)) |
||||||
|
return fakeArray; |
||||||
|
} |
||||||
|
|
||||||
|
step > 0 && setStep(step - 1); setActiveStep(backStepArray);
|
||||||
|
} |
||||||
|
|
||||||
|
const content = [ |
||||||
|
<AddGradeGroup |
||||||
|
stepClick={() => {setStep(1); setActiveStep([true, true, false, false, false, false])}} |
||||||
|
backStep={() => backStep()} |
||||||
|
/>, |
||||||
|
<AddExamDescription |
||||||
|
stepClick={() => {setStep(2); setActiveStep([true, true, true, false, false, false])}} |
||||||
|
backStep={() => backStep()} |
||||||
|
/>, |
||||||
|
<AddQuestions
|
||||||
|
stepClick={() => {setStep(2); setActiveStep([true, true, true, false, false, false])}}
|
||||||
|
backStep={() => backStep()} |
||||||
|
/>, |
||||||
|
'', |
||||||
|
] |
||||||
|
|
||||||
|
return( |
||||||
|
<div className='flex flex-col w-[96%] py-[6%] bg-gray-100 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"> |
||||||
|
ساخت آزمون جدید |
||||||
|
</h1> |
||||||
|
|
||||||
|
<div className='w-full '> |
||||||
|
<Stepper steps={steps} count={5} direction="horizontal"/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{ |
||||||
|
content[step] |
||||||
|
} |
||||||
|
|
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default AddExam; |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
|
||||||
|
import React, { useState } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import Button from "../../../components/Button"; |
||||||
|
import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker"; |
||||||
|
import RangeDatePicker from "../../../components/RangeDatePicker"; |
||||||
|
|
||||||
|
const AddExamDescription = ({grades, addExamState, dispatch, stepClick, backStep}) => { |
||||||
|
const [name, setName] = useState(null); |
||||||
|
const [type, setType] = useState(null); |
||||||
|
const [description, setDescription] = useState(null); |
||||||
|
|
||||||
|
const payload = {name: name, description: description, type: type}; |
||||||
|
|
||||||
|
return( |
||||||
|
<> |
||||||
|
<div className="flex py-10 items-start px-10 border-b border-gray-300"> |
||||||
|
<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"> |
||||||
|
تنظیمات آزمون |
||||||
|
|
||||||
|
</div> |
||||||
|
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex w-5/6 pl-[10%] flex-col"> |
||||||
|
<div className="flex items-center justify-between"> |
||||||
|
<input type='text' placeholder="نام آزمون" className="w-1/2 bg-white px-4 h-14 border border-gray-300 rounded-lg text-blue3A outline-blue65" |
||||||
|
onChange={(e) => setName(e.target.value)} |
||||||
|
/> |
||||||
|
|
||||||
|
<RangeDatePicker title='تاریخ شروع و پایان آزمون'/> |
||||||
|
<RangeDatePicker title='تاریخ شروع و پایان آزمون'/> |
||||||
|
|
||||||
|
</div> |
||||||
|
<textarea className="w-full mt-6 h-60 border border-gray-300 rounded-lg p-4 outline-blue65 text-blue3A" placeholder="توضیحات آزمون"
|
||||||
|
onChange={(e) => setDescription(e.target.value)} |
||||||
|
> |
||||||
|
|
||||||
|
</textarea> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex pt-10 items-start px-10 "> |
||||||
|
<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"> |
||||||
|
تنظیمات آزمون |
||||||
|
|
||||||
|
</div> |
||||||
|
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا یک مدل از آزمون را انتخاب کنید</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex w-5/6 flex-wrap"> |
||||||
|
|
||||||
|
<div className={`w-1/6 border ${type == 'bank' ? 'border-red52 text-red52 bg-pinkF5' : ' border-gray-300 text-blue3A bg-white'} font-bold cursor-pointer py-10 m-4 rounded-xl`} onClick={() => setType('bank')}> |
||||||
|
بانک سوالات |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
<div className={`w-1/6 border ${type == 'pdf' ? 'border-red52 text-red52 bg-pinkF5' : ' border-gray-300 text-blue3A bg-white'} font-bold cursor-pointer py-10 m-4 rounded-xl`} onClick={() => setType('pdf')}> |
||||||
|
ذفترچه سوالات |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="flex w-full px-10 justify-end"> |
||||||
|
<button className='w-1/12 mx-2 h-12 mt-4 text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button> |
||||||
|
<Button
|
||||||
|
title='ارسال پیام'
|
||||||
|
className='w-1/12'
|
||||||
|
onClick={() => { |
||||||
|
dispatch({type: 'ADD_EXAM_DESCRIPTION',payload }); |
||||||
|
stepClick() |
||||||
|
}} |
||||||
|
|
||||||
|
/> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
grades: state.publicApi.grades, |
||||||
|
addExamState: state.addExamReduser |
||||||
|
}) |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(AddExamDescription); |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
|
||||||
|
import React, { useState } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import Button from "../../../components/Button"; |
||||||
|
import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker"; |
||||||
|
import RangeDatePicker from "../../../components/RangeDatePicker"; |
||||||
|
|
||||||
|
const AddQuestions = ({grades, addExamState, dispatch, stepClick, backStep}) => { |
||||||
|
const [name, setName] = useState(null); |
||||||
|
const [type, setType] = useState(null); |
||||||
|
const [description, setDescription] = useState(null); |
||||||
|
|
||||||
|
const payload = {name: name, description: description, type: type}; |
||||||
|
|
||||||
|
return( |
||||||
|
<> |
||||||
|
|
||||||
|
<div className="flex py-10 items-start px-10 border-b border-gray-300"> |
||||||
|
<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"> |
||||||
|
تنظیمات آزمون |
||||||
|
|
||||||
|
</div> |
||||||
|
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p> |
||||||
|
</div> |
||||||
|
<div className="w-5/6 flex flex-row"> |
||||||
|
|
||||||
|
<div className="flex flex-col bg-white items-center justify-center w-36 h-32 font-bold border border-gray-300 text-blue3A rounded-xl cursor-pointer"> |
||||||
|
<p className="" style={{fontSize: '40px'}}> |
||||||
|
+ |
||||||
|
</p> |
||||||
|
<p className=""> |
||||||
|
{addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
{addExamState.type === 'bank' ? 'بانک سوالات' : 'دفترچه سوالات'} |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div className="flex w-full px-10 items-center justify-end"> |
||||||
|
<button className=' mx-6 h-12 mt-4 text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button> |
||||||
|
<Button
|
||||||
|
title='ارسال پیام'
|
||||||
|
className='w-1/12'
|
||||||
|
onClick={() => { |
||||||
|
dispatch({type: 'ADD_EXAM_DESCRIPTION',payload }); |
||||||
|
stepClick() |
||||||
|
}} |
||||||
|
|
||||||
|
/> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
grades: state.publicApi.grades, |
||||||
|
addExamState: state.addExamReduser |
||||||
|
}) |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(AddQuestions); |
||||||
Loading…
Reference in new issue