Add Question, Questionare PopUp Made

src/view/addExam/views/addQuestions.js

@@ -1,57 +1,209 @@
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Button from "../../../components/Button";
 import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
+import Checkbox from "../../../components/Checkbox";
 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 [type, setType] = useState(null);
     const [description, setDescription] = useState(null);
-
+    const [questionarePopUp, setQuestionairePopUp] = useState(false);
-    const payload = {name: name, description: description, type: type};
+    const [showCoursesInList, setShowCoursesInList] = useState([]);
-    
+
-    return(
+    useEffect(() => {
+        questoinaresLists.map(item => showCoursesInList.push(false));
+        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 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>
+                    </div>
-            <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">
 
-                <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 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 className="" style={{ fontSize: '40px' }}>
                             +
                         </p>
                         <p className="">
                             {addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'}
                         </p>
-                </div>
+                    </div>
 
-            </div>
+                </div>
 
             </div>
 
             <div>
-                {addExamState.type === 'bank'  ? 'بانک سوالات' : 'دفترچه سوالات'}
+                {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 className=' mx-6 h-12 mt-4  text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </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()
-                }}
+                    }}
 
                 />