Picking DAFTARCHES Allowd

src/components/Checkbox/index.js

@@ -3,6 +3,7 @@ import './index.css';
 
 export default function Checkbox(props) {
   // console.log(props)
+  // document.getElementById('ch'+props.name).checked === true && props.checkedFunction();
   return (
     <div>
       <svg className="checkbox-symbol">
@@ -17,7 +18,7 @@ export default function Checkbox(props) {
       </svg>
 
       <div className="checkbox-container">
-        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} onChange={props.onChange}/>
+        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox"  onClick={props.onclick} onChange={props.onChange}/>
         <label className="checkbox" htmlFor={"ch"+props.name}>
           <span>
             <svg width="12px" height="10px">

src/view/addExam/views/addQuestions.js

@@ -12,6 +12,8 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
     const [description, setDescription] = useState(null);
     const [questionarePopUp, setQuestionairePopUp] = useState(false);
     const [showCoursesInList, setShowCoursesInList] = useState([]);
+    const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
+    console.log(choosedQuestionaries)
 
     useEffect(() => {
         questoinaresLists.map(item => showCoursesInList.push(false));
@@ -61,7 +63,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
             ]
         },
         {
-            id: 1,
+            id: 2,
             title: 'دفترچه عمومی',
             numberOfQuestions: 60,
             courses: [
@@ -119,48 +121,60 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                             </div>
                         </div>
 
-                        <div className="w-full flex items-center flex-col overflow-x-hidden mt-6 px-2 overflow-scroll" style={{height: '400px'}}>
+                        <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
+                                    (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}`}
+                                                    onChange={(e) => 
+                                                         e.target.checked ? 
+                                                            seChoosedQuestionaries([...choosedQuestionaries, item])
+                                                        : 
+                                                        
+
+                                                        seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id))
+
+
+                                                    }
+
+                                                />
+                                                <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>
-                                                            ) )
-                                                        }
+                                                                >از سوال {course.questionStart} تا سوال {course.questionEnd}</p>
+                                                            </div>
+                                                        ))
+                                                    }
                                                 </div>
-                                        }
-                                    </>
-                                   )
+                                            }
+                                        </>
+                                    )
                                 )
                             }
                         </div>