parentAdd api, examGroupList api, lessonList api | 420

main
alireza khaji 2 years ago
parent 3a7f53ca9b
commit bed10f4245
  1. 22
      src/redux/actions/exam.js
  2. 21
      src/redux/actions/examGroup.js
  3. 2
      src/redux/actions/index.js
  4. 23
      src/redux/actions/lesson.js
  5. 6
      src/redux/reducers/exam.js
  6. 1
      src/redux/reducers/exam2.js
  7. 24
      src/redux/reducers/examGroup.js
  8. 3
      src/redux/reducers/index.js
  9. 24
      src/redux/reducers/lesson.js
  10. 154
      src/view/addExam/components/addQuestionnaireCourse.js
  11. 161
      src/view/addExam/views/AddDescription.js
  12. 188
      src/view/addExam/views/AddGradeGroup.js
  13. 1264
      src/view/addExam/views/AddQuestionsFromBank.js
  14. 26
      src/view/addExam/views/ViewExam.js
  15. 600
      src/view/addExam/views/addQuestionnaireExam.js
  16. 46
      src/view/addExam/views/addQuestions.js

@ -9,6 +9,26 @@ const exam = {
(data = {}) =>
async (dispatch) =>
await proxy.post("exam/parentAdd", data, { dispatch }),
addExamDescription:(data = {}) =>{
return(dispatch)=>{
dispatch({
type: "ADD_EXAM_DESCRIPTION",
payload:data
});
}
},
addExamGradeAndGroup:(data = {}) =>{
return(dispatch)=>{
dispatch({
type: "ADD_EXAM_GRADE_AND_GROUP",
payload: data,
});
}
}
};
export default exam;
export default exam;
// ADD_EXAM_DESCRIPTION;

@ -0,0 +1,21 @@
import proxy from "../proxy";
const examGroup = {
info:
(data = {}) =>
async (dispatch) =>
await proxy.get("examGroup/info", data, { dispatch }),
list:
(data = {}) =>
async (dispatch) =>
await proxy.get("examGroup/list", data, { dispatch }),
add:
(data = {}) =>
async (dispatch) =>
await proxy.post("examGroup/add", data, { dispatch }),
};
export default examGroup;

@ -14,6 +14,8 @@ export {default as qr} from "./qr";
export { default as userTransaction } from "./userTransaction";
export { default as term } from "./term";
export { default as exam } from "./exam";
export { default as examGroup } from "./examGroup";
export { default as lesson } from "./lesson";

@ -0,0 +1,23 @@
import proxy from "../proxy";
const lesson = {
info:
(data = {}) =>
async (dispatch) =>
await proxy.get("lesson/info", data, { dispatch }),
list:
(data = {}) =>
async (dispatch) =>
await proxy.get("lesson/list", data, { dispatch }),
add:
(data = {}) =>
async (dispatch) =>
await proxy.post("lesson/add", data, { dispatch }),
delete:
(data = {}) =>
async (dispatch) =>
await proxy.delete("lesson/delete", data, { dispatch }),
};
export default lesson;

@ -12,6 +12,7 @@ const initialState = {
description: '',
type: 'bank',
duration:null,
budgetFileId:null,
questionnaires: [
{
@ -217,8 +218,9 @@ export default function addExamReduser(state = initialState, { type, payload })
description: payload.description,
type: payload.type,
duration: payload.duration,
startDate:payload.startDate,
endDate:payload.endDate
startDate: payload.startDate,
endDate: payload.endDate,
budgetFileId: payload.budgetFileId,
};
case 'ADD_EXAM_QUESTIONAIRES':

@ -13,6 +13,7 @@ export default function exam2(state = initialState, action) {
case "exam/info":
return { ...state, loading: false, info: data, error: null };
case "exam/parentAdd":
toast.success("آزمون شما با موفقیت ثبت شد");
return { ...state, loading: false, error: null };
default:
return state;

@ -0,0 +1,24 @@
import { toast } from "react-toastify";
const initialState = {
loading: false,
error: null,
info: null,
list:null
};
export default function examGroup(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "examGroup/info":
return { ...state, loading: false, info: data, error: null };
case "examGroup/add":
return { ...state, loading: false, error: null };
case "examGroup/list":
return { ...state, loading: false, error: null,list:data };
default:
return state;
}
}

@ -14,3 +14,6 @@ export {default as addExamReduser} from "./exam";
export { default as userTransaction } from "./userTransaction";
export { default as term } from "./term";
export { default as exam2 } from "./exam2";
export { default as examGroup } from "./examGroup";
export { default as lesson } from "./lesson";

@ -0,0 +1,24 @@
import { toast } from "react-toastify";
const initialState = {
loading: false,
error: null,
info: null,
list: null,
};
export default function lesson(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "lesson/info":
return { ...state, loading: false, info: data, error: null };
case "lesson/add":
return { ...state, loading: false, error: null };
case "lesson/list":
return { ...state, loading: false, error: null, list: data };
default:
return state;
}
}

@ -1,57 +1,103 @@
import React from "react";
const AddQuestionnaireCourse = ({submitOnClick, nameOnChange, questionStart, questionEnd, coefficientOnChange, closeOnClick}) => {
return(
<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={closeOnClick}>
<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>
<div className="w-full flex items-center flex-col mt-6 px-2 ">
<div className="flex justify-between w-full">
<input type='text' placeholder="نام درس..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={nameOnChange}
/>
<input type='number' placeholder="از سوال..." className="w-2/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={questionStart}
/>
<input type='number' placeholder="تا سوال..." className="w-2/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={questionEnd}
/>
<input type='number' placeholder="ضریب ..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={coefficientOnChange}
/>
<input type='number' placeholder="تعداد گزینه" className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
// onChange={}
/>
</div>
<div className="flex w-full justify-end pt-4">
<button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
onClick={submitOnClick}
>
تایید
</button>
</div>
const AddQuestionnaireCourse = ({
submitOnClick,
nameOnChange,
questionStart,
questionEnd,
coefficientOnChange,
closeOnClick,
}) => {
return (
<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={closeOnClick}
>
<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>
<div className="w-full flex items-center flex-col mt-6 px-2 ">
<div className="flex justify-between w-full">
<input
type="text"
placeholder="نام درس..."
className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={nameOnChange}
/>
<input
type="number"
placeholder="از سوال..."
className="w-2/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={questionStart}
/>
<input
type="number"
placeholder="تا سوال..."
className="w-2/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={questionEnd}
/>
<input
type="number"
placeholder="ضریب ..."
className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={coefficientOnChange}
/>
<input
type="number"
placeholder="تعداد گزینه"
className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
// onChange={}
/>
</div>
<div className="flex w-full justify-end pt-4">
<button
className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
onClick={submitOnClick}
>
تایید
</button>
</div>
</div>
</div>
</div>
);
};
</div>
</div>
</div>
)
}
export default AddQuestionnaireCourse;
export default AddQuestionnaireCourse;

@ -1,5 +1,5 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import Button from "../../../components/Button";
import DatePicker from "react-multi-date-picker";
@ -8,48 +8,80 @@ import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
import InputIcon from "react-multi-date-picker/components/input_icon"
import RangeDatePicker from "../../../components/RangeDatePicker";
import FileInput from "../../../components/fileInput";
import { exam, file } from "../../../redux/actions";
const AddExamDescription = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [name, setName] = useState(null);
const [type, setType] = useState(null);
const [description, setDescription] = useState(null);
const [duration,setDuration]=useState(null);
const [date, setDate] = useState({ format: "MM/DD/YYYY" });
const [startDate,setStartDate]=useState(null);
const [endDate, setEndDate] = useState(null);
const AddExamDescription = ({
grades,
addExamState,
dispatch,
stepClick,
backStep,
uploadImg,
loading,
lastUploadId,
addExamDescription,
}) => {
const [name, setName] = useState(null);
const [type, setType] = useState(null);
const [description, setDescription] = useState(null);
const [duration, setDuration] = useState(null);
const [date, setDate] = useState({ format: "MM/DD/YYYY" });
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
// const [budgetFileId,setBudgetFileId]=useState(null);
const payload = {
name: name,
description: description,
type: type,
duration,
startDate,
endDate,
};
console.log("uuuuuuuuuuu")
const CostumeDatePickerInput = ({ openCalendar, value, handleValueChange, title,index }) => {
return (
<input
onFocus={openCalendar}
value={value}
// onChange={(e) => changeHandler(e)}
placeholder={title}
className="create-exame-date-input w-full h-14 rounded-lg p-3 border border-gray-200 text-blue3A outline-blue-300"
/>
);
}
const dateChangeHandler=(index)=>{
let inputs = document.querySelectorAll(".create-exame-date-input");
console.log(inputs[index].value);
let dateList = inputs[index].value.split(" ")[0].split("/");
let timeList = inputs[index].value.split(" ")[1].split(":");
console.log(dateList);
console.log(timeList);
console.log(Number(dateList[0]));
}
const payload = {
name: name,
description: description,
type: type,
duration,
startDate,
endDate,
budgetFileId: lastUploadId,
};
console.log("uuuuuuuuuuu");
const CostumeDatePickerInput = ({
openCalendar,
value,
handleValueChange,
title,
index,
}) => {
return (
<>
<input
onFocus={openCalendar}
value={value}
// onChange={(e) => changeHandler(e)}
placeholder={title}
className="create-exame-date-input w-full h-14 rounded-lg p-3 border border-gray-200 text-blue3A outline-blue-300"
/>
);
};
const dateChangeHandler = (index) => {
let inputs = document.querySelectorAll(".create-exame-date-input");
console.log(inputs[index].value);
let dateList = inputs[index].value.split(" ")[0].split("/");
let timeList = inputs[index].value.split(" ")[1].split(":");
console.log(dateList);
console.log(timeList);
console.log(Number(dateList[0]));
};
const [file, setFile] = useState(null);
const uploadImghandler1 = (e) => {
console.log(e);
setFile(e);
uploadImg({
file: e,
});
// setUploadImgNumber(1);
};
// useEffect(() => {}, [lastUploadId]);
return (
<>
<div className="w-full">
<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">
@ -153,7 +185,29 @@ const AddExamDescription = ({ grades, addExamState, dispatch, stepClick, backSte
</div>
</div>
</div>
<div className="flex fixed bottom-10 left-0 w-full px-10 justify-end">
<div className="w-full flex items-start border-t border-gray-300 mt-10 p-10">
<div className="flex flex-col w-2/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-4/6 ltr">
<FileInput
title="بارگزاری عکس بودجهبندی آزمون"
file={file}
id={2}
onChange={(e) => uploadImghandler1(e)}
deleteHandler={(e) => setFile(null)}
loading={loading}
/>
</div>
</div>
<div className="w-full flex mt-10 w-full px-10 justify-end">
<button
className=" mx-2 h-12 mt-4 text-red52 font-bold flex items-center justify-center"
onClick={() => backStep()}
@ -165,18 +219,27 @@ const AddExamDescription = ({ grades, addExamState, dispatch, stepClick, backSte
title="مرحله بعدی"
className="w-1/12"
onClick={() => {
dispatch({ type: "ADD_EXAM_DESCRIPTION", payload });
// dispatch({ type: "ADD_EXAM_DESCRIPTION", payload });
addExamDescription(payload);
stepClick();
}}
/>
</div>
</>
);
}
</div>
</>
);
};
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
addExamState: state.addExamReduser
})
grades: state.publicApi.grades,
addExamState: state.addExamReduser,
loading: state.file.loading,
lastUploadId: state.file.lastUpload,
});
const mapDispatchToProps = {
uploadImg: file.upload,
addExamDescription : exam.addExamDescription
};
export default connect(mapStateToProps)(AddExamDescription);
export default connect(mapStateToProps, mapDispatchToProps)(AddExamDescription);

@ -1,88 +1,132 @@
import React, { useState } from "react";
import React, { useMemo, useState } from "react";
import { useEffect } from "react";
import { connect } from "react-redux";
import Button from "../../../components/Button";
import { exam } from "../../../redux/actions";
import { exam, examGroup } from "../../../redux/actions";
const AddGradeGroup = ({grades, addExamState, dispatch, stepClick}) => {
const [examGrade, setExamGrade] = useState(null);
const [group, setGroup] = useState(null);
console.log(addExamState)
const payload = {grade: examGrade, groupId: group};
return(
<>
<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>
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا یک پایه تحصیلی برای آزمون انتخاب کنید</p>
</div>
const AddGradeGroup = ({
grades,
addExamState,
dispatch,
stepClick,
getExamGroupList,
examGroupAdd,
examGroupList,
}) => {
const [examGrade, setExamGrade] = useState(null);
const [group, setGroup] = useState(null);
console.log(addExamState);
const payload = { grade: examGrade, groupId: group };
<div className="flex w-5/6 flex-wrap">
{
grades.map((item) =>(
<div className={`w-1/6 border ${examGrade == item.id ? 'border-red52 text-red52 bg-pinkF5' : ' border-gray-300 text-blue3A bg-white'} font-bold cursor-pointer py-10 m-4 rounded-xl`} key={`ADD_EXAM_GRADE__${item.id}`} onClick={() => setExamGrade(item.id)}>
پایه {item.title}
useEffect(() => {
getExamGroupList();
}, []);
</div>
))
}
</div>
</div>
// useEffect(()=>{})
<div className="flex pt-10 items-start px-10 ">
<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>
return (
<div className="w-full">
<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>
<p className="text-sm text-right font-bold pt-4 text-gray-500">
لطفا یک پایه تحصیلی برای آزمون انتخاب کنید
</p>
</div>
<div className="flex w-5/6 flex-wrap">
<div className={`w-1/6 border ${group == 1 ? 'border-red52 text-red52 bg-pinkF5' : ' border-gray-300 text-blue3A bg-white'} font-bold cursor-pointer py-10 m-4 rounded-xl`} onClick={() => setGroup(1)}>
ابر ذهن
</div>
<div className={`w-1/6 border ${group == 2 ? 'border-red52 text-red52 bg-pinkF5' : ' border-gray-300 text-blue3A bg-white'} font-bold cursor-pointer py-10 m-4 rounded-xl`} onClick={() => setGroup(2)}>
تیزهوشان
</div>
</div>
<div className="flex w-5/6 flex-wrap">
{grades.map((item) => (
<div
className={`w-1/6 border ${
examGrade == item.id
? "border-red52 text-red52 bg-pinkF5"
: " border-gray-300 text-blue3A bg-white"
} font-bold cursor-pointer py-10 m-4 rounded-xl`}
key={`ADD_EXAM_GRADE__${item.id}`}
onClick={() => setExamGrade(item.id)}
>
پایه {item.title}
</div>
<div className="flex fixed bottom-10 left-0 w-full px-10 justify-end">
))}
</div>
</div>
<Button
title='مرحله بعدی'
className='w-1/12'
onClick={() => {
dispatch({type: 'ADD_EXAM_GRADE_AND_GROUP',payload });
stepClick()
}}
/>
<div className="w-full flex pt-10 items-start px-10 ">
<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="flex w-5/6 flex-wrap gap-x-[2.5%] gap-y-3 pr-2">
{examGroupList?.map((item, index) => (
<div
key={index}
className="w-[18%] aspect-[1/0.5] rounded-lg flex items-center justify-center cursor-pointer shrink-0 text-base border border-gray-300 bg-white font-bold"
onClick={() => setGroup(item?.id)}
style={
item.id === group
? { borderColor: "#df1452", backgroundColor: "#fff1f5" }
: null
}
>
{item?.name}
</div>
</>
)
}
))}
</div>
</div>
<div className="flex mt-10 w-full px-10 justify-end">
<Button
title="مرحله بعدی"
className="w-1/12"
onClick={() => {
// dispatch({ type: "ADD_EXAM_GRADE_AND_GROUP", payload });
stepClick();
}}
/>
</div>
</div>
);
};
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
addExamState: state.addExamReduser
})
grades: state.publicApi.grades,
addExamState: state.addExamReduser,
examGroupList: state.examGroup.list,
});
const mapDispatchToProps = {
getExamGroupList: examGroup.list,
examGroupAdd: examGroup.add,
addExamGradeAndGroup: exam.addExamGradeAndGroup,
};
export default connect(mapStateToProps, mapDispatchToProps)(AddGradeGroup);
export default connect(mapStateToProps)(AddGradeGroup);
{
/* <div
className={`w-1/6 border ${
group == 1
? "border-red52 text-red52 bg-pinkF5"
: " border-gray-300 text-blue3A bg-white"
} font-bold cursor-pointer py-10 m-4 rounded-xl`}
onClick={() => setGroup(1)}
>
ابر ذهن
</div>
<div
className={`w-1/6 border ${
group == 2
? "border-red52 text-red52 bg-pinkF5"
: " border-gray-300 text-blue3A bg-white"
} font-bold cursor-pointer py-10 m-4 rounded-xl`}
onClick={() => setGroup(2)}
>
تیزهوشان
</div> */
}

File diff suppressed because it is too large Load Diff

@ -10,6 +10,7 @@ import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import Preview from "../../../components/AnswerSheet/preview";
import { exam } from "../../../redux/actions";
import moment from "jalali-moment";
const ViewExam = ({ addExamState, stepClick, backStep, parentAdd }) => {
useEffect(() => {
@ -50,13 +51,30 @@ const ViewExam = ({ addExamState, stepClick, backStep, parentAdd }) => {
}
console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>");
console.log(addExamState.startDate);
console.log(addExamState.startDate.month);
const submitHandler=()=>{
parentAdd({
name: addExamState.name,
description: addExamState.description,
startDate: addExamState.startDate,
endDate: addExamState.endDate,
// startDate: moment(
// `${addExamState.startDate?.year}/${addExamState.startDate?.month}/${addExamState.startDate?.day} ${addExamState.startDate?.hour}:${addExamState.startDate?.minute}`
// )
// .locale("en")
// .format("YYYY-MM-DD HH:mm"),
startDate: moment
.from(
`${addExamState.startDate?.year}/${addExamState.startDate?.month}/${addExamState.startDate?.day} ${addExamState.startDate?.hour}:${addExamState.startDate?.minute}`,
"fa",
"YYYY/MM/DD HH:mm"
)
.format("YYYY-MM-DD HH:mm"),
endDate: moment
.from(
`${addExamState.endDate?.year}/${addExamState.endDate?.month}/${addExamState.endDate?.day} ${addExamState.endDate?.hour}:${addExamState.endDate?.minute}`,
"fa",
"YYYY/MM/DD HH:mm"
)
.format("YYYY-MM-DD HH:mm"),
duration: addExamState?.duration || 60,
// duration:30,
type: addExamState.type,
@ -64,7 +82,7 @@ const ViewExam = ({ addExamState, stepClick, backStep, parentAdd }) => {
questionCount,
examGroupId: addExamState.groupId,
levelCriterion: null,
budgetFileId:null
budgetFileId: addExamState.budgetFileId,
});
// stepClick();
}

@ -1,4 +1,3 @@
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import AnswerSheet from "../../../components/AnswerSheet";
@ -13,98 +12,144 @@ import { Droppable } from "react-beautiful-dnd";
import { Draggable } from "react-beautiful-dnd";
import { toMap } from "draft-js/lib/DefaultDraftBlockRenderMap";
const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [questionarePopUp, setQuestionairePopUp] = useState(false);
const [addCoursePopup, setAddCoursePopup] = useState(false);
const [newQuestionaire, setNewQuestionaire] = useState({
id: addExamState.questionnaires.length + 1,
name: '',
fileUrl: '',
});
const [showCoursesInList, setShowCoursesInList] = useState([]);
const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
const [selectedQuestionare, setSelectedQuestionare] = useState({
id: null,
courses: []
});
const [answers, setAnswers] = useState(null);
const [newCourse, setNewCourse] = useState({
id: selectedQuestionare.courses.length + selectedQuestionare.id + 1,
questionnaireId: selectedQuestionare.id,
questionsQuantity: 20,
name: '',
coefficient: 4
})
const [selectedCourse, setSelectedCourse] = useState({
sortId: 1,
title: 'ادبیات فارسی',
coefficient: 3,
questionStart: 1,
questionEnd: 0,
})
// console.log(choosedQuestionaries)
// console.log(newQuestionaire)
// console.log(addExamState.questionnaires)
console.log(newCourse)
console.log(selectedQuestionare)
console.log(selectedCourse.id)
console.log(answers)
const [fakeState, setFakeState] = useState(2);
useEffect(() => {
setSelectedCourse(selectedCourse)
setFakeState(fakeState + 15)
}, [addExamState])
useEffect(() => {
// questoinaresLists.map(item => showCoursesInList.push(false));
if (answers !== null && answers !== []) {
answers.map(item => dispatch({ type: 'ADD_ANSWERS', payload: item }))
}
}, [answers])
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>
<div className="w-full flex items-center flex-col mt-6 px-2 ">
<div className="flex justify-between w-full">
<input type='text' placeholder="نام دفترچه..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={e => setNewQuestionaire({ ...newQuestionaire, name: e.target.value })} />
<input type="file" placeholder="آپلود فایل دفترچه" className="bg-white items-center flex h-12 text-red26 outline-none"
/>
</div>
<div className="flex w-full justify-end pt-2">
<button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
onClick={() => { dispatch({ type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire }); setQuestionairePopUp(false) }}
>
تایید
</button>
</div>
{/* {
const AddQuestionnaireExam = ({
grades,
addExamState,
dispatch,
stepClick,
backStep,
}) => {
const [questionarePopUp, setQuestionairePopUp] = useState(false);
const [addCoursePopup, setAddCoursePopup] = useState(false);
const [newQuestionaire, setNewQuestionaire] = useState({
id: addExamState.questionnaires.length + 1,
name: "",
fileUrl: "",
});
const [showCoursesInList, setShowCoursesInList] = useState([]);
const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
const [selectedQuestionare, setSelectedQuestionare] = useState({
id: null,
courses: [],
});
const [answers, setAnswers] = useState(null);
const [newCourse, setNewCourse] = useState({
id: selectedQuestionare.courses.length + selectedQuestionare.id + 1,
questionnaireId: selectedQuestionare.id,
questionsQuantity: 20,
name: "",
coefficient: 4,
});
const [selectedCourse, setSelectedCourse] = useState({
sortId: 1,
title: "ادبیات فارسی",
coefficient: 3,
questionStart: 1,
questionEnd: 0,
});
// console.log(choosedQuestionaries)
// console.log(newQuestionaire)
// console.log(addExamState.questionnaires)
console.log(newCourse);
console.log(selectedQuestionare);
console.log(selectedCourse.id);
console.log(answers);
const [fakeState, setFakeState] = useState(2);
useEffect(() => {
setSelectedCourse(selectedCourse);
setFakeState(fakeState + 15);
}, [addExamState]);
useEffect(() => {
// questoinaresLists.map(item => showCoursesInList.push(false));
if (answers !== null && answers !== []) {
answers.map((item) => dispatch({ type: "ADD_ANSWERS", payload: item }));
}
}, [answers]);
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>
<div className="w-full flex items-center flex-col mt-6 px-2 ">
<div className="flex justify-between w-full">
<input
type="text"
placeholder="نام دفترچه..."
className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={(e) =>
setNewQuestionaire({
...newQuestionaire,
name: e.target.value,
})
}
/>
<input
type="file"
placeholder="آپلود فایل دفترچه"
className="bg-white items-center flex h-12 text-red26 outline-none"
/>
</div>
<div className="flex w-full justify-end pt-2">
<button
className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
onClick={() => {
dispatch({
type: "ADD_EXAM_QUESTIONAIRES",
payload: newQuestionaire,
});
setQuestionairePopUp(false);
}}
>
تایید
</button>
</div>
{/* {
questoinaresLists.map(
(item, index) => (
<>
@ -159,173 +204,218 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
)
)
} */}
</div>
</div>
</div>
</div>
</div>
)}
{addCoursePopup && (
<AddQuestionnaireCourse
closeOnClick={() => setAddCoursePopup(false)}
nameOnChange={(e) =>
setNewCourse({ ...newCourse, name: e.target.value })
}
coefficientOnChange={(e) =>
setNewCourse({ ...newCourse, coefficient: e.target.vlaue })
}
questionEnd={(e) =>
setNewCourse({
...newCourse,
questionEnd: e.target.value,
questionnaireId: selectedQuestionare.id,
})
}
questionStart={(e) =>
setNewCourse({
...newCourse,
questionStart: e.target.value,
questionnaireId: selectedQuestionare.id,
id: selectedQuestionare.id + selectedCourse.id + 1,
})
}
submitOnClick={() => {
dispatch({ type: "ADD_QUESTIONNAIRE_COURSES", payload: newCourse });
setAddCoursePopup(false);
setFakeState(fakeState + 356);
}}
/>
)}
<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>
<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_Questionnaires") {
// const data = {
// startIndex: choosedQuestion,
// endIndex: destination.index
// }
// dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
// console.log(data)
const aaa = [...addExamState.questionnaires];
const [removed] = aaa.splice(source.index, 1);
aaa.splice(destination.index, 0, removed);
dispatch({ type: "CHANGE_QUESTIONNAIRES_ORDER", payload: aaa });
console.log(result);
console.log(source.index);
console.log(destination.index);
console.log(aaa);
}
}}
>
<Droppable
droppableId="Choosed_Questionnaires"
direction="horizontal"
>
{(provided) => (
<div className="flex">
<div
className=" flex "
{...provided.droppableProps}
ref={provided.innerRef}
>
{addExamState.questionnaires.map((item, index) => (
<Draggable
draggableId={`QUESTIONNAIRE_${item.id}`}
index={index}
key={`CHOOSED_QUESTIONNAIRE_${item.id}`}
>
{(provided) => (
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
className={`flex flex-col ${
selectedQuestionare.id === item.id
? "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({
id: item.id,
name: item.name,
courses: item.courses,
})
}
>
<p className="text-red52">دفترچه {item.name}</p>
</div>
)}
</Draggable>
))}
</div>
{provided.placeholder}
</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={() =>
addExamState.type == "bank"
? console.log("bank")
: setQuestionairePopUp(true)
}
{
addCoursePopup &&
<AddQuestionnaireCourse
closeOnClick={() => setAddCoursePopup(false)}
nameOnChange={e => setNewCourse({ ...newCourse, name: e.target.value })}
coefficientOnChange={e => setNewCourse({ ...newCourse, coefficient: e.target.vlaue })}
questionEnd={e => setNewCourse({ ...newCourse, questionEnd: e.target.value, questionnaireId: selectedQuestionare.id })}
questionStart={e => setNewCourse({ ...newCourse, questionStart: e.target.value, questionnaireId: selectedQuestionare.id, id: selectedQuestionare.id + selectedCourse.id + 1 })}
submitOnClick={() => { dispatch({ type: 'ADD_QUESTIONNAIRE_COURSES', payload: newCourse }); setAddCoursePopup(false); setFakeState(fakeState + 356) }}
/>
}
<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>
<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_Questionnaires') {
// const data = {
// startIndex: choosedQuestion,
// endIndex: destination.index
// }
// dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
// console.log(data)
const aaa = [...addExamState.questionnaires];
const [removed] = aaa.splice(source.index, 1);
aaa.splice(destination.index, 0, removed);
dispatch({ type: 'CHANGE_QUESTIONNAIRES_ORDER', payload: aaa })
console.log(result)
console.log(source.index)
console.log(destination.index)
console.log(aaa)
}
>
<p className="" style={{ fontSize: "40px" }}>
+
</p>
<p className="">
{addExamState.type == "bank" ? "افزودن درس" : "افزودن دفترچه"}
</p>
</div>
</div>
</div>
<div className="w-full flex px-10">
<div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
{selectedQuestionare.id !== null && (
<>
<h1 className="text-blue3A w-full font-bold text-lg text-right">
دفترچه {selectedQuestionare.name}
</h1>
<div
className="flex flex-col items-center overflow-x-hidden overflow-scroll"
style={{ height: "500px" }}
>
<div className="w-4/5 ">
{addExamState.questionnaires
.find((itm) => itm.id == selectedQuestionare.id)
?.courses.map((item) => (
<SelectedCourse
title={item.name}
coefficient={item.coefficient}
questionQuantity={item.questionEnd - item.questionStart}
onClick={() => {
setSelectedCourse(item);
console.log(selectedCourse);
}}
>
<Droppable droppableId="Choosed_Questionnaires" direction="horizontal" >
{(provided) => (
<div className="flex">
<div className=" flex " {...provided.droppableProps} ref={provided.innerRef}>
{
addExamState.questionnaires.map(
((item, index) => (
<Draggable draggableId={`QUESTIONNAIRE_${item.id}`} index={index} key={`CHOOSED_QUESTIONNAIRE_${item.id}`}>
{(provided) => (
<div
{...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}
className={`flex flex-col ${selectedQuestionare.id === item.id ? '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({ id: item.id, name: item.name, courses: item.courses})}
>
<p className="text-red52">
دفترچه {item.name}
</p>
</div>
)}
</Draggable>
))
)
}
</div>
{provided.placeholder}
</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={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
<p className="" style={{ fontSize: '40px' }}>
+
</p>
<p className="">
{addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'}
</p>
</div>
</div>
</div>
<div className="w-full flex px-10">
<div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
{
selectedQuestionare.id !== null && (<>
<h1 className="text-blue3A w-full font-bold text-lg text-right">
دفترچه {selectedQuestionare.name}
</h1>
<div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{ height: '500px' }}>
<div className="w-4/5 ">
{
addExamState.questionnaires.find(itm => itm.id == selectedQuestionare.id)?.courses.map(
(item) => (
<SelectedCourse title={item.name} coefficient={item.coefficient} questionQuantity={item.questionEnd - item.questionStart}
onClick={() => { setSelectedCourse(item); console.log(selectedCourse) }} />
)
)
}
</div>
</div>
</>)
}
{selectedQuestionare.id !== null &&
<div className="w-full flex justify-center mt-10">
<button className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddCoursePopup(true)}>
افزودن درس
</button>
</div>}
</div>
<div className="w-1/2 flex justify-center">
<div className="w-4/5 py-8">
<AnswerSheet selectedCourseId={selectedCourse.id}
selectedQId={selectedQuestionare.id}
questionEnd={selectedCourse.questionEnd} questionStart={selectedCourse.questionStart}
passAnswers={data => dispatch({type: 'ADD_ANSWERS', payload: data})} />
</div>
/>
))}
</div>
</div>
</>
)}
{selectedQuestionare.id !== null && (
<div className="w-full flex justify-center mt-10">
<button
className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border"
onClick={() => setAddCoursePopup(true)}
>
افزودن درس
</button>
</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
title='مرحله بعدی'
className='w-1/12'
onClick={() => {
stepClick()
}}
/>
</div>
</>
)
}
)}
</div>
<div className="w-1/2 flex justify-center">
<div className="w-4/5 py-8">
<AnswerSheet
selectedCourseId={selectedCourse.id}
selectedQId={selectedQuestionare.id}
questionEnd={selectedCourse.questionEnd}
questionStart={selectedCourse.questionStart}
passAnswers={(data) =>
dispatch({ type: "ADD_ANSWERS", payload: data })
}
/>
</div>
</div>
</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
title="مرحله بعدی"
className="w-1/12"
onClick={() => {
stepClick();
}}
/>
</div>
</>
);
};
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
addExamState: state.addExamReduser
})
grades: state.publicApi.grades,
addExamState: state.addExamReduser,
});
export default connect(mapStateToProps)(AddQuestionnaireExam);
export default connect(mapStateToProps)(AddQuestionnaireExam);

@ -1,4 +1,3 @@
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import AnswerSheet from "../../../components/AnswerSheet";
@ -7,21 +6,44 @@ import DatePicker from "../../../components/Calendar/CalendarComponents/DatePick
import Checkbox from "../../../components/Checkbox";
import RangeDatePicker from "../../../components/RangeDatePicker";
import SelectedCourse from "../../../components/selectedCourse";
import { lesson } from "../../../redux/actions";
import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
import AddQuestionnaireExam from "./addQuestionnaireExam";
import AddQuestionsFromBank from "./AddQuestionsFromBank";
const AddQuestions = ({ addExamState, stepClick, backStep }) => {
return(
addExamState.type == 'pdf' ?
<AddQuestionnaireExam stepClick={stepClick} backStep={backStep} /> :
<AddQuestionsFromBank stepClick={stepClick} backStep={backStep} />
)
}
const AddQuestions = ({
addExamState,
stepClick,
backStep,
getLesson,
lessonList,
addLesson,
}) => {
useEffect(() => {
getLesson();
}, []);
return addExamState.type == 2 ? (
<AddQuestionnaireExam stepClick={stepClick} backStep={backStep} />
) : (
<AddQuestionsFromBank
stepClick={stepClick}
backStep={backStep}
lessonList={lessonList}
addLesson={addLesson}
/>
);
};
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
addExamState: state.addExamReduser
})
grades: state.publicApi.grades,
addExamState: state.addExamReduser,
lessonList: state.lesson.list,
});
const mapDispatchToProps = {
getLesson: lesson.list,
addLesson: lesson.add
};
export default connect(mapStateToProps)(AddQuestions);
export default connect(mapStateToProps, mapDispatchToProps)(AddQuestions);

Loading…
Cancel
Save