Add Question, Questionare PopUp Made

main
Pedram Keshavarzi 3 years ago
parent 4510b210c3
commit 9ef8944ab6
  1. 208
      src/view/addExam/views/addQuestions.js

@ -1,60 +1,212 @@
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Button from "../../../components/Button"; import Button from "../../../components/Button";
import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker"; import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
import Checkbox from "../../../components/Checkbox";
import RangeDatePicker from "../../../components/RangeDatePicker"; import RangeDatePicker from "../../../components/RangeDatePicker";
const AddQuestions = ({grades, addExamState, dispatch, stepClick, backStep}) => { const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [name, setName] = useState(null); const [name, setName] = useState(null);
const [type, setType] = useState(null); const [type, setType] = useState(null);
const [description, setDescription] = useState(null); const [description, setDescription] = useState(null);
const [questionarePopUp, setQuestionairePopUp] = useState(false);
const [showCoursesInList, setShowCoursesInList] = useState([]);
const payload = {name: name, description: description, type: type}; useEffect(() => {
questoinaresLists.map(item => showCoursesInList.push(false));
return( console.log(showCoursesInList)
}, [])
const payload = { name: name, description: description, type: type };
const questoinaresLists = [
{
id: 1,
title: 'دفترچه عمومی',
numberOfQuestions: 60,
courses: [
{
sortId: 1,
title: 'ادبیات فارسی',
coefficient: 3,
questionStart: 1,
questionEnd: 20,
},
{
sortId: 2,
title: 'عربی',
coefficient: 3,
questionStart: 21,
questionEnd: 35,
},
{
sortId: 3,
title: 'دینی',
coefficient: 2,
questionStart: 36,
questionEnd: 46,
},
{
sortId: 4,
title: 'زبان خارجه',
coefficient: 1,
questionStart: 47,
questionEnd: 60,
},
]
},
{
id: 1,
title: 'دفترچه عمومی',
numberOfQuestions: 60,
courses: [
{
sortId: 1,
title: 'ادبیات فارسی',
coefficient: 3,
questionStart: 1,
questionEnd: 20,
},
{
sortId: 2,
title: 'عربی',
coefficient: 3,
questionStart: 21,
questionEnd: 35,
},
{
sortId: 3,
title: 'دینی',
coefficient: 2,
questionStart: 36,
questionEnd: 46,
},
{
sortId: 4,
title: 'زبان خارجه',
coefficient: 1,
questionStart: 47,
questionEnd: 60,
},
]
}
]
return (
<> <>
{
questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center justify-center">
<div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6">
<div className="w-full">
<div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={() => setQuestionairePopUp(false)}>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
<g id="card-remove" transform="translate(253.309 512.31)">
<path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
</g>
</g>
</svg>
</div>
</div>
<div className="w-full flex items-center flex-col overflow-x-hidden mt-6 px-2 overflow-scroll" style={{height: '400px'}}>
{
questoinaresLists.map(
(item, index) => (
<>
<div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-300">
<Checkbox name={`PICK_QUESTIONARE_${index}`} />
<h2 className="text-red26 font-bold">{item.title}</h2>
<h4>تعداد سوالات: {item.numberOfQuestions}</h4>
<p>تعداد دروس: {item.courses.length}</p>
<p className="cursor-pointer" onClick={() => {
let newArray = [...showCoursesInList];
newArray[index] = !newArray[index];
setShowCoursesInList(newArray)
}}>نمایش دروس</p>
</div>
{
showCoursesInList[index] && <div className="w-full flex flex-col">
{
item.courses.map((course) => (
<div className="w-full flex items-center text-right px-8 py-1 border-b border-gray-100" key={`COURSE_IN_LIST__${course.sortId}`}>
<p className="w-1/3">
{course.title}
</p>
<p className="w-1/3">
ضریب : {course.coefficient}
</p>
<p
className="w-1/3"
>از سوال {course.questionStart} تا سوال {course.questionEnd}</p>
</div>
) )
}
</div>
}
</>
)
)
}
</div>
</div>
</div>
}
<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">
<div className="text-blue3A text-lg font-bold text-right px-4 border-r-4 border-blue65"> <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"> </div>
<p className="" style={{fontSize: '40px'}}> <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" onClick={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
<p className="" style={{ fontSize: '40px' }}>
+ +
</p> </p>
<p className=""> <p className="">
{addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'} {addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
{addExamState.type === 'bank' ? 'بانک سوالات' : 'دفترچه سوالات'} {addExamState.type === 'bank' ? 'بانک سوالات' : 'دفترچه سوالات'}
</div> </div>
<div className="flex w-full px-10 items-center justify-end"> <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 className=' mx-6 h-12 mt-4 text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button>
<Button <Button
title='ارسال پیام' title='ارسال پیام'
className='w-1/12' className='w-1/12'
onClick={() => { onClick={() => {
dispatch({type: 'ADD_EXAM_DESCRIPTION',payload }); dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload });
stepClick() stepClick()
}} }}
/> />
</div> </div>

Loading…
Cancel
Save