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,13 +121,25 @@ 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}`} /> 
+                                                <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>
@@ -155,7 +169,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                                                                     className="w-1/3"
                                                                 >از سوال {course.questionStart} تا سوال {course.questionEnd}</p>
                                                             </div>
-                                                            ) )
+                                                        ))
                                                     }
                                                 </div>
                                             }