import React, { useEffect, useState } from "react"; import { connect } from "react-redux"; import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; import AnswerSheet from "../../../components/AnswerSheet"; 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"; import filterIcon from '../../../assets/img/filter.svg' import Question from "../components/question"; import { numOfinitQs } from "../../../redux/reducers/exam"; import AddQuestionPopUp from "../components/addQuestion"; const AddQuestionsFromBank = ({ 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 [addQuestionPopup, setAddQuestionPopuo] = useState(false); const [newQuestionaire, setNewQuestionaire] = useState({ id: addExamState.questionnaires.length + 1, name: '', fileUrl: '', }); const [showCoursesInList, setShowCoursesInList] = useState([]); const [choosedQuestion, seChoosedQuestion] = useState(null); const [selectedCourse, setSelectedCourse] = useState({ id: null, title: '', selectedQuestions: [], }); // console.log(choosedQuestionaries) // console.log(newQuestionaire) // console.log(addExamState.questionnaires) // console.log(newCourse) // console.log(addExamState.questionairesCourses) console.log(selectedCourse) // console.log(answers) console.log(choosedQuestion) console.log(selectedCourse.selectedQuestions) const [fakeState, setFakeState] = useState(2); const payload = { name: name, description: description, type: type }; const handleOnDragEnd = (result) => { const { source, destination } = result; if (source.droppableId !== destination?.droppableId) { if (destination?.droppableId == 'Choosed_Questions_Form_Bank') { dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: choosedQuestion }) dispatch({ type: 'REMOVE_QUESTION_FROM_BANK', payload: choosedQuestion }) } else { dispatch({ type: 'REMOVE_EXAM_QUESTIONS', payload: choosedQuestion }) dispatch({ type: 'GET_QUESTION_BACK_TO_BANK', payload: choosedQuestion }) } } else { if (source.droppableId == 'Choosed_Questions_Form_Bank') { // const data = { // startIndex: choosedQuestion, // endIndex: destination.index // } // dispatch({type:'CHANGE_QUESTION_ORDER', payload : data}) // console.log(data) const aaa = [...addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions]; const [removed] = aaa.splice(source.index, 1); aaa.splice(destination.index, 0, removed); dispatch({ type: 'CHANGE_QUESTION_ORDER', payload: aaa }) console.log(result) console.log(source.index) console.log(destination.index) console.log(aaa) } } } const [numberOfOptions, setNumberOfOptions] = useState(null); const [options, setOptions] = useState([]) const [question, setQuestion] = useState({ title: '', options: [], }) useEffect(() => { const arr = []; for (var i = 1; i <= numberOfOptions; i++) { arr.push({ id: i, title: '', isAnswer: false }) } setOptions(arr) setQuestion({ ...question, options: arr, courseId: selectedCourse.id, questionId: numOfinitQs + addExamState.questionBank.length + fakeState, }) }, [numberOfOptions]) console.log(question) console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions) return ( <> { questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 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> <h1 className="w-full text-right text-lg text-red52 font-bold pt-4"> افزودن درس </h1> { addExamState.courseBank.map( (item, index) => ( <> <div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-200"> <Checkbox name={`PICK_QUESTIONARE_${index}`} onChange={(e) => e.target.checked ? dispatch({ type: 'ADD_EXAM_COURSE', payload: item }) : dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }) } /> <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> </> ) ) } </div> </div> } { addQuestionPopup === 'component' && // <AddQuestionPopUp // closeOnClick={() => setAddQuestionPopuo(false)} // submitOnClick={data => { // dispatch({type: 'ADD_CUSTOM_QUESTION', payload: { // ...data, // questionId:addExamState.questionBank.length + 1 , // courseId: selectedCourse.id, // }}) // console.log({ // ...data, // questionId: addExamState.questionBank.length + 1, // courseId: selectedCourse.id, // }) // }} // /> <></> } <div className="flex py-10 items-start px-10 border-b border-gray-200"> <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> <p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p> </div> <div className="w-5/6 flex flex-row"> <DragDropContext onDragEnd={(result) => { const { source, destination } = result; if (source.droppableId == 'Choosed_Courses_Form_Bank') { // const data = { // startIndex: choosedQuestion, // endIndex: destination.index // } // dispatch({type:'CHANGE_QUESTION_ORDER', payload : data}) // console.log(data) const aaa = [...addExamState.courses]; const [removed] = aaa.splice(source.index, 1); aaa.splice(destination.index, 0, removed); dispatch({ type: 'CHANGE_COURSE_ORDER', payload: aaa }) console.log(result) console.log(source.index) console.log(destination.index) console.log(aaa) } }} > <Droppable droppableId="Choosed_Courses_Form_Bank" direction="horizontal" > {(provided) => ( <div className="flex"> {provided.placeholder} <div className=" flex " {...provided.droppableProps} ref={provided.innerRef}> {addExamState.courses.length > 0 && addExamState.courses.map( (item, index) => ( <Draggable draggableId={`COURSE_${item.id}`} index={index} key={`CHOOSED_COURSE_${item.id}`}> {(provided) => ( <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} className={`flex flex-col ${selectedCourse.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-between pb-12 pt-2 w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`} onClick={() => setSelectedCourse(item)} > <p className="w-full text-left px-4" > <span onClick={() => { dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }); setSelectedCourse(null); setFakeState(fakeState + 24) }}> x </span> </p> <p className="text-red52"> {item.title} </p> </div> )} </Draggable> )) } </div> </div> )} </Droppable> </DragDropContext> <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={() => setQuestionairePopUp(true)}> <p className="" style={{ fontSize: '40px' }}> + </p> <p className=""> افزودن درس </p> </div> </div> </div> {/* Picking Question Container */} <DragDropContext onDragEnd={result => handleOnDragEnd(result)} onDragStart={(result) => { console.log(result) if (result.source.droppableId == 'Choosed_Questions_Form_Bank') { seChoosedQuestion(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions[result.source.index]) } else { seChoosedQuestion(addExamState.questionBank.find(itm => itm.questionId == result.source.index)) } }}> <div className="w-full flex border-b border-gray-200 px-2 pl-0"> {/* Picked Qeustions From Bank */} <Droppable droppableId="Choosed_Questions_Form_Bank"> {(provided) => ( <div className="w-1/2 border-l flex flex-col border-gray-200 py-0 pb-6" {...provided.droppableProps} ref={provided.innerRef}> { selectedCourse.id !== null && (<> {/* Picked Questions Top Bar */} <div className="w-full flex h-16 px-8 mb-3 justify-start pt-4 items-center"> <h1 className="text-blue3A font-bold text-lg text-right pl-4"> سوالات {selectedCourse.title} </h1> <div className="px-2 pl-4 text-gray37 text-sm flex items-center border-l border-red52"> <p>ضریب</p> <input type='number' value={selectedCourse?.coefficient} onChange={(e) => console.log(e.target.value)} className="w-5 h-5 flex text-center items-center pt-1 rounded border border-red5B text-sm text-gray-600 mr-2" /> </div> <div className="px-2 pl-0 text-gray37 text-sm flex items-center "> <p>تعداد گزینه</p> <input type='number' value={selectedCourse?.numberOfOptions} onChange={(e) => console.log(e.target.value)} className="w-5 h-5 flex text-center items-center pt-1 rounded border border-red5B text-sm text-gray-600 mr-2" /> </div> <div className="px-2 pl-4 text-gray37 text-sm flex items-center "> <Checkbox name={`ADD_QUESTION_HAS_MINUS__${selectedCourse.id}`} /> <p>نمره منفی</p> </div> </div> <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{ height: '550px' }}> <div className="w-11/12 "> { addQuestionPopup === 'component' && <AddQuestionPopUp titlePass={title => setQuestion({ ...question, title: title })} options={question.options} setAsAnswer={e => { let thisOption = question.options.find(itm => itm.id == e) thisOption.isAnswer = !thisOption.isAnswer setQuestion({ ...question, options: [...options] }) }} scorePass={score => setQuestion( { ...question, score: parseInt(score) } )} passOptionTitle={(optionTitle, id) => { let thisOption = question.options.find(itm => itm.id == id) thisOption.title = optionTitle setQuestion({ ...question, options: [...options] }) }} submitOnClick={() => { setAddQuestionPopuo(false) dispatch({ type: 'ADD_CUSTOM_QUESTION', payload: question }); setNumberOfOptions(null) }} cancelOnClick={() => setAddQuestionPopuo(false)} /> } { addExamState.courses?.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions?.map( (item, index) => ( <Draggable draggableId={`_${item.questionId}`} index={index} key={`CHOOSED_QUESTIONS_${item.questionId}`}> {(provided) => ( <div className="flex items-start" {...provided.draggableProps} ref={provided.innerRef}> <div className="mt-8 px-2 m-0" {...provided.dragHandleProps}> <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 7H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" /> <path d="M3 12H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" /> <path d="M3 17H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" /> </svg> </div> <Question data={item} /> </div> )} </Draggable> ) ) } {provided.placeholder} </div> </div> </>) } {selectedCourse.id !== null && <div className="w-full flex justify-center mt-10"> {addQuestionPopup == false && <div className="flex flex-col w-full items-center"> <button className=" w-4/5 bg-transparent text-xl text-blue3A border-gray-300 h-12 rounded-xl border mb-6" onClick={() => { setFakeState(fakeState + 5); setNumberOfOptions(selectedCourse.numberOfOptions); setAddQuestionPopuo('component') }}> اضافه کردن سوال جدید + </button> <h1 className="w-4/5 text-center border-b border-red52 my-5 mx-0" style={{ lineHeight: '0.1em' }}> <span className="bg-white py-0 px-10 text-blue3A" >پایان سوالات</span> </h1> </div> } </div>} </div> )} </Droppable> <div className="w-1/2 flex flex-col items-center justify-start"> {selectedCourse.id !== null ? <> <div className="w-full flex pb-4 py-2 px-8 mb-3 justify-between pt-4 border-b border-gray-200 items-center"> <div className="flex justify-start items-center"> <div className="text-blue3A flex items-center font-bold text-lg text-right pl-4"> <Checkbox name={`CHOOSE_ALL_QUESTIONS_IN_BANK_${selectedCourse.id}`} /> <h1 className="pr-2">انتخاب همه</h1> </div> <div className="px-2 pl-4 text-gray37 text-sm flex items-center "> <img src={filterIcon} /> <select className="mr-2 bg-transparent border border-gray-200 text-gray-500 pl-4 outline-none pr-2 rounded-md py-2"> <option className="hover:bg-red52">فیلتر بر اساس</option> </select> </div> </div> <div className="px-2 pl-10 text-gray37 text-sm flex items-center "> <input type='search' placeholder="جستجو..." onChange={(e) => console.log(e.target.value)} className="w-full h-10 flex px-4 items-center pt-1 outline-none rounded-md border border-gray-300 text-sm text-gray-600 mr-2" /> </div> </div> <Droppable droppableId="QUESTIONS_IN_BANK"> {(provided) => ( <div className="w-full py-1 flex flex-col items-center overflow-x-hidden overflow-scroll" > <div className="w-11/12" {...provided.droppableProps} ref={provided.innerRef}> { addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map( (course, index) => ( <Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}> {(provided) => ( <div {...provided.draggableProps} ref={provided.innerRef} className="flex items-start justify-center w-full"> <div className="mt-8 px-2 m-0" {...provided.dragHandleProps}> <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 7H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" /> <path d="M3 12H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" /> <path d="M3 17H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" /> </svg> </div> <Question data={course} /> </div> )} </Draggable> ) ) } </div> {/* <Question /> */} {provided.placeholder} </div> )} </Droppable> </> : <div className="w-full" style={{ height: '450px' }}> </div> } </div> </div> </DragDropContext> <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 title='مرحله بعدی' className='w-1/12' onClick={() => { dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload }); stepClick() }} /> </div> </> ) } const mapStateToProps = (state) => ({ grades: state.publicApi.grades, addExamState: state.addExamReduser }) export default connect(mapStateToProps)(AddQuestionsFromBank);