Listing Courses Of Questionaires Done

src/components/selectedCourse/index.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+const SelectedCourse = ({openAnswerSheet, title, questionQuantity, coefficient, optionsQuantity }) => {
+    return(
+        <div className="w-full border border-gray-400 rounded-xl bg-white flex items-center justify-between px-6 py-8 mt-8">
+            <div className="flex flex-col w-full">
+
+                <h1 className="w-full text-lg text-right text-blue3A font-bold">
+                    {title}
+                </h1>
+                <div className="w-full flex mt-4 justify-between">
+                <p className="flex items-center w-1/4 text-sm justify-between border-l-2 px-2 border-red52">
+                        <p>تعداد سوالات</p>
+                        <input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded text-center text-xs" value={questionQuantity}/>
+                    </p>
+                    <p className="flex items-center w-1/4 text-sm justify-between border-l-2 px-2 border-red52">
+                        <p className="w-full text-center"> ضریب</p>
+                        <input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded text-center text-xs" value={coefficient}/>
+                    </p>
+                    <p className="flex items-center w-1/4 text-sm justify-between border-l-2 px-2 border-red52">
+                        <p>تعداد گزینه</p>
+                        <input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded  text-center text-xs" value={4}/>
+                    </p>
+                    <p className="flex items-center w-1/4 text-sm justify-between px-2 ">
+                        <p>نمره منفی</p>
+                        <input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded  text-center" />
+                    </p>
+
+                    
+                </div>
+                <textarea className="border border-gray-300 mt-8 rounded-xl h-32 p-4 outline-none" placeholder="توضیحات">
+
+                </textarea>
+            </div>
+            <h1 className="w-40 text-center text-lg text-blue3A font-bold cursor-pointer" onClick={openAnswerSheet}>
+                پاسخ برگ
+            </h1>
+        </div>
+    )
+}
+
+export default SelectedCourse;

src/view/addExam/views/addQuestions.js

@@ -5,6 +5,7 @@ import Button from "../../../components/Button";
 import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
 import Checkbox from "../../../components/Checkbox";
 import RangeDatePicker from "../../../components/RangeDatePicker";
+import SelectedCourse from "../../../components/selectedCourse";
 
 const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
     const [name, setName] = useState(null);
@@ -13,6 +14,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
     const [questionarePopUp, setQuestionairePopUp] = useState(false);
     const [showCoursesInList, setShowCoursesInList] = useState([]);
     const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
+    const [selectedQuestionare, setSelectedQuestionare] = useState(null)
     console.log(choosedQuestionaries)
 
     useEffect(() => {
@@ -64,12 +66,12 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
         },
         {
             id: 2,
-            title: 'دفترچه عمومی',
+            title: 'دفترچه اختصاصی',
             numberOfQuestions: 60,
             courses: [
                 {
                     sortId: 1,
-                    title: 'ادبیات فارسی',
+                    title: 'ریاضی',
                     coefficient: 3,
                     questionStart: 1,
                     questionEnd: 20,
@@ -77,7 +79,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                 },
                 {
                     sortId: 2,
-                    title: 'عربی',
+                    title: 'فیزیک',
                     coefficient: 3,
                     questionStart: 21,
                     questionEnd: 35,
@@ -85,7 +87,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                 },
                 {
                     sortId: 3,
-                    title: 'دینی',
+                    title: 'شیمی',
                     coefficient: 2,
                     questionStart: 36,
                     questionEnd: 46,
@@ -93,7 +95,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                 },
                 {
                     sortId: 4,
-                    title: 'زبان خارجه',
+                    title: 'زیست ',
                     coefficient: 1,
                     questionStart: 47,
                     questionEnd: 60,
@@ -120,7 +122,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                                 </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(
@@ -145,7 +147,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                                                 <p>تعداد دروس: {item.courses.length}</p>
                                                 <p className="cursor-pointer" onClick={() => {
                                                     let newArray = [...showCoursesInList];
-
+                                                    
                                                     newArray[index] = !newArray[index];
 
 
@@ -191,7 +193,21 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                 </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)}>
+                    {
+                        choosedQuestionaries.map(
+                            (item => (
+                                <div className={`flex flex-col ${selectedQuestionare === item ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'}  items-center justify-center w-36 h-32 mx-2 font-bold  rounded-xl cursor-pointer`}
+                                 onClick={() => setSelectedQuestionare(item)}>
+                        
+                        <p className="text-red52">
+                            {item.title}
+                        </p>
+                    </div>
+                            ))
+                        )
+                    }
+
+                    <div className="flex flex-col bg-white items-center justify-center w-36 h-32 mx-2 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>
@@ -204,8 +220,30 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
 
             </div>
 
-            <div>
+            <div className="w-full flex  px-10">
-                {addExamState.type === 'bank' ? 'بانک سوالات' : 'دفترچه سوالات'}
+
+                <div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
+                    {
+                        selectedQuestionare !== null && (<>
+                        <h1 className="text-blue3A  w-full font-bold text-lg text-right">
+                            {selectedQuestionare.title}
+                        </h1>
+                        <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '450px'}}>
+                            <div className="w-4/5 ">
+
+                            {
+                                selectedQuestionare?.courses.map(
+                                    (item) => (
+                                        <SelectedCourse title={item.title} coefficient={item.coefficient} questionQuantity={item.questionEnd - item.questionStart + 1}/>
+                                    )
+                                )
+                            }
+                        </div>
+                        </div>
+                        </>)
+                    }
+                </div>
+                
             </div>