Karimaldeen/school-dashboard-exercise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

QUESTION

Browse Source
This commit is contained in:
karimalden 2024-06-27 12:47:33 +03:00
parent 6ec573a61d
commit b0bde77082
23 changed files with 232 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Components/ValidationField/View/File.tsx
View File

@ -14,6 +14,9 @@ const File = ({
}: any) => {
const { formik, t, isError,errorMsg } = useFormField(name, props);
let imageUrl = formik?.values?.[name] ?? null;
console.log(imageUrl);
console.log(typeof imageUrl === 'string');
const fileList: UploadFile[] = useMemo(() => {
if (!imageUrl) return [];

33
src/Hooks/useSaveOnDisconnect.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useEffect } from 'react';
const useSaveOnDisconnect = (noChange: boolean, QUESTION_OBJECT_KEY: string, SavedQuestionData: any) => {
useEffect(() => {
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
console.log("disconnect");
if (noChange) {
const jsonData = JSON.stringify(SavedQuestionData);
localStorage.setItem(QUESTION_OBJECT_KEY, jsonData);
}
};
const handleOffline = () => {
console.log("disconnect");
if (noChange) {
const jsonData = JSON.stringify(SavedQuestionData);
localStorage.setItem(QUESTION_OBJECT_KEY, jsonData);
}
};
// Add event listeners
window.addEventListener('beforeunload', handleBeforeUnload);
window.addEventListener('offline', handleOffline);
// Cleanup function
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
window.removeEventListener('offline', handleOffline);
};
}, [noChange, QUESTION_OBJECT_KEY, SavedQuestionData]); // Add dependencies to the hook
};
export default useSaveOnDisconnect;

1
src/Layout/Dashboard/FormikFormModel.tsx
View File

@ -43,6 +43,7 @@ const FormikFormModel: React.FC<FormikFormProps> = ({
}
}, [isOpen]);
return <Form className="w-100">{children}</Form>;
}}
</Formik>

30
src/Pages/question/AddPage.tsx
View File

@ -17,12 +17,17 @@ import { toast } from "react-toastify";
import AcceptModal from "./Model/AcceptModal";
import { useModalState } from "../../zustand/Modal";
import { ModalEnum } from "../../enums/Model";
import { cleanObject } from "../../utils/cleanObject";
import { hasItems } from "../../utils/hasItems";
import { QUESTION_OBJECT_KEY } from "../../config/AppKey";
import useSaveOnDisconnect from "../../Hooks/useSaveOnDisconnect";
import { getLocalStorage } from "../../utils/LocalStorage";
const AddPage: React.FC = () => {
const { mutate, isSuccess, isLoading ,mutateAsync} = useAddQuestion();
const {object_to_edit,set_Tags_search,set_object_to_edit,set_Success} = useObjectToEdit()
const {object_to_edit,set_Tags_search,set_object_to_edit,set_Success,SavedQuestionData} = useObjectToEdit()
const {subject_id} = useParams<ParamsEnum>()
const {isBseQuestion,set_isBseQuestion} = useObjectToEdit()
@ -43,6 +48,8 @@ const AddPage: React.FC = () => {
"isBase": 1,
};
mutateAsync(newBseQuestion).then((data) => {
const newBseQuestionId = (data as any)?.data?.id;
const Questions = DataToSend?.Questions;
@ -73,16 +80,35 @@ const AddPage: React.FC = () => {
toast.success(t("validation.the_possess_done_successful"))
set_object_to_edit(null)
set_Success(true)
localStorage.removeItem(QUESTION_OBJECT_KEY)
}
}, [isSuccess])
let cleanedQuestionOptions = cleanObject(SavedQuestionData);
let noChange =hasItems(cleanedQuestionOptions)
useSaveOnDisconnect(noChange, QUESTION_OBJECT_KEY, SavedQuestionData);
const SavedData = {} as any
console.log(SavedData);
const handleCancel = () => {
setIsOpen(ModalEnum?.QUESTION_ACCEPT);
if(!noChange){
navigate(-1)
localStorage.removeItem(QUESTION_OBJECT_KEY)
}else{
setIsOpen(ModalEnum?.QUESTION_ACCEPT);
}
};
const [t] = useTranslation();
if(isBseQuestion){
return (
<div className="exercise_add">

23
src/Pages/question/EditPage.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import { Modal, Spin } from "antd";
import FormikForm from "../../Layout/Dashboard/FormikFormModel";
import { getInitialValues, getValidationSchema ,getInitialValuesBase, getValidationSchemaBase, processTags} from "./Model/formUtil";
import { useAddQuestion, useGetAllQuestion, useUpdateQuestion } from "../../api/Question";
import { useAddQuestion, useDeleteQuestion, useGetAllQuestion, useUpdateQuestion } from "../../api/Question";
import { useQueryClient } from "react-query";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
@ -19,10 +19,10 @@ import { toast } from "react-toastify";
const EditPage: React.FC = () => {
const {question_id,subject_id} = useParams<ParamsEnum>()
const {isBseQuestion,set_isBseQuestion,set_Tags_search} = useObjectToEdit()
const {isBseQuestion,set_isBseQuestion,set_Tags_search,DeletedQuestions} = useObjectToEdit()
const { mutate, isSuccess, isLoading } = useUpdateQuestion();
const { mutate:AddQuestion} = useAddQuestion();
const { mutate:DeleteQuestion} = useDeleteQuestion();
const {data,isLoading:dataLoading}= useGetAllQuestion({show:question_id})
@ -45,7 +45,6 @@ const EditPage: React.FC = () => {
console.log(DataToSend);
if(isBseQuestion){
console.log(1);
const UpdateBseQuestion = {
"id":DataToSend?.id,
@ -55,11 +54,18 @@ const EditPage: React.FC = () => {
if( typeof UpdateBseQuestion?.image === "string"){
delete UpdateBseQuestion["image"]
}
console.log(UpdateBseQuestion);
console.log(DeletedQuestions,"DeletedQuestions");
mutate(UpdateBseQuestion)
mutate(UpdateBseQuestion)
const Questions = DataToSend?.Questions;
DeletedQuestions?.map((item:any)=>{
DeleteQuestion({id:item?.id})
})
const Questions = DataToSend?.Questions;
console.log(Questions,"Questions");
Questions?.map((item:Question)=>{
@ -84,7 +90,8 @@ const EditPage: React.FC = () => {
const QuestionOptions = {
old: oldQuestionOptions,
new: newQuestionOptions
};
} ;
console.log(QuestionOptions);
mutate({
...updatedObject,

5
src/Pages/question/Model/AcceptModal.tsx
View File

@ -5,6 +5,7 @@ import { ModalEnum } from "../../../enums/Model";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { QUESTION_OBJECT_KEY } from "../../../config/AppKey";
const AcceptModal: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
@ -12,8 +13,12 @@ const AcceptModal: React.FC = () => {
const handleSubmit = () => {
localStorage.removeItem(QUESTION_OBJECT_KEY)
console.log("Handle submit clicked");
setIsOpen("");
navigate(-1)
};
const handleCancel = () => {

7
src/Pages/question/Model/Add.tsx
View File

@ -15,7 +15,7 @@ import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
const Form = () => {
const formik = useFormikContext<any>();
const{set_Success,Success} = useObjectToEdit()
const{set_Success,Success,set_SavedQuestionData} = useObjectToEdit()
useEffect(() => {
if (Success) {
@ -25,6 +25,9 @@ const Form = () => {
}
}, [Success]);
useEffect(() => {
set_SavedQuestionData(formik.values)
}, [formik?.values])
@ -79,7 +82,7 @@ const Form = () => {
}
)
}
{formik?.values?.QuestionOptions?.length < 4 && (
{formik?.values?.QuestionOptions?.length < 5 && (
<p className="add_new_button" >
<FaCirclePlus onClick={handleAddChoice} size={23} /> {t("header.add_new_choice")}
</p>

2
src/Pages/question/Model/Edit.tsx
View File

@ -65,7 +65,7 @@ const Form = () => {
}
)
}
{formik?.values?.QuestionOptions?.length < 4 && (
{formik?.values?.QuestionOptions?.length < 5 && (
<p className="add_new_button" >
<FaCirclePlus onClick={handleAddChoice} size={23} /> {t("header.add_new_choice")}
</p>

19
src/Pages/question/Model/Field/ChoiceFields.tsx
View File

@ -7,11 +7,24 @@ import { getCharFromNumber } from '../../../../utils/getCharFromNumber';
import CheckboxField from './CheckboxField';
import TextField from './TextField';
import File from './File';
import { FaCirclePlus, FaDeleteLeft } from 'react-icons/fa6';
import { FaTrash } from 'react-icons/fa';
const ChoiceFields = ({index,data}:{index:number , data :Choice }) => {
const formik = useFormikContext();
const formik = useFormikContext<any>();
const [t] = useTranslation()
const handleDeleteChoice = () => {
console.log(index);
console.log(formik.values.QuestionOptions[index]);
const updatedQuestionOptions = formik.values.QuestionOptions.filter((_:any, i:any) => i !== index);
formik.setFieldValue('QuestionOptions', updatedQuestionOptions);
};
console.log(formik.values);
return (
<div className='ChoiceFields'>
@ -20,7 +33,9 @@ const ChoiceFields = ({index,data}:{index:number , data :Choice }) => {
<File className="file_exercise" label={"attachment"} name={index} type="File" />
<CheckboxField className="" label="The_correct_answer" name={index} type="Checkbox" />
<p className="delete_question_options" >
<FaTrash onClick={handleDeleteChoice} size={17} />
</p>
</div>
)
}

1
src/Pages/question/Model/Field/File.tsx
View File

@ -18,6 +18,7 @@ const File = ({
const { formik, t, isError,errorMsg } = useFormField(newName, props);
let imageUrl = formik?.values?.QuestionOptions[name]?.answer_image ?? null;
// console.log(imageUrl);
console.log(imageUrl);
const fileList: UploadFile[] = useMemo(() => {
if (!imageUrl) return [];

10
src/Pages/question/Model/Malty/Add.tsx
View File

@ -107,9 +107,15 @@ const Form = () => {
}
)
}
<p className="add_new_button" >
{formik?.values?.Questions?.[parent_index]?.QuestionOptions?.length < 5 && (
<p className="add_new_button" >
<FaCirclePlus onClick={()=> handleAddChoice(parent_index)} size={23} /> {t("header.add_new_choice")}
</p>
</p>
)}
<DynamicTags parent_index={parent_index} />
</div>

26
src/Pages/question/Model/Malty/ChoiceField/ChoiceFields.tsx
View File

@ -7,11 +7,31 @@ import { getCharFromNumber } from '../../../../../utils/getCharFromNumber';
import CheckboxField from './CheckboxField';
import TextField from './TextField';
import File from './File';
import { FaTrash } from 'react-icons/fa';
import { toast } from 'react-toastify';
const ChoiceFields = ({index,parent_index,data}:{index:number ,parent_index:number, data :Choice }) => {
const formik = useFormikContext();
const formik = useFormikContext<any>();
const [t] = useTranslation()
const handleDeleteChoice = () => {
const arrayLength = formik.values.Questions?.[parent_index].QuestionOptions?.length
console.log(arrayLength);
if(arrayLength === 1)
{
toast.error(t("validation.Sorry, the question must have at least one option"))
return ;
}
const updatedQuestionOptions = formik.values.Questions?.[parent_index].QuestionOptions.filter((_:any, i:any) => i !== index);
formik.setFieldValue(`Questions[${parent_index}].QuestionOptions`, updatedQuestionOptions);
}
;
return (
<div className='ChoiceFields'>
@ -20,7 +40,9 @@ const ChoiceFields = ({index,parent_index,data}:{index:number ,parent_index:numb
<File className="file_exercise" label={"attachment"} name={index} type="File" parent_index={parent_index} />
<CheckboxField className="" label="The_correct_answer" name={index} type="Checkbox" parent_index={parent_index} />
<p className="delete_question_options" >
<FaTrash onClick={handleDeleteChoice} size={17} />
</p>
</div>
)
}

7
src/Pages/question/Model/Malty/Edit.tsx
View File

@ -101,9 +101,12 @@ const Form = () => {
}
)
}
<p className="add_new_button" >
{formik?.values?.Questions?.[parent_index]?.QuestionOptions?.length < 5 && (
<p className="add_new_button" >
<FaCirclePlus onClick={()=> handleAddChoice(parent_index)} size={23} /> {t("header.add_new_choice")}
</p>
</p>
)}
<DynamicTags parent_index={parent_index} />
</div>

28
src/Pages/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect } from 'react'
import { Choice } from '../../../../../types/Item'
import ValidationField from '../../../../../Components/ValidationField/ValidationField'
import { useFormikContext } from 'formik';
@ -6,18 +6,40 @@ import { useTranslation } from 'react-i18next';
import { getCharFromNumber } from '../../../../../utils/getCharFromNumber';
import TextField from './TextField';
import File from './File';
import { FaTrash } from 'react-icons/fa';
import { useObjectToEdit } from '../../../../../zustand/ObjectToEditState';
import { toast } from 'react-toastify';
const QuestionFIeld = ({index,data}:{index:number , data :Choice }) => {
const formik = useFormikContext();
const formik = useFormikContext<any>();
console.log(index);
const {set_DeletedQuestions,DeletedQuestions} = useObjectToEdit()
const [t] = useTranslation()
useEffect(() => {
set_DeletedQuestions([])
}, [window?.location.pathname])
const handleDeleteQuestion = () => {
const DeleteQuestionId = formik.values.Questions?.[index];
if(DeleteQuestionId?.id){
set_DeletedQuestions([...DeletedQuestions,DeleteQuestionId])
}
const updatedQuestionOptions = formik.values.Questions.filter((_:any, i:any) => i !== index);
formik.setFieldValue(`Questions`, updatedQuestionOptions);
};
return (
<div className='ChoiceFields'>
<TextField className="textarea_exercise" placeholder={"choice"} label2={t(`input.question`)+ ` ` +`${index + 1}`} name={index} type="TextArea" />
<File className="file_exercise" label={"attachment"} name={index} type="File" />
<p className="delete_question_options" >
<FaTrash onClick={handleDeleteQuestion} size={17} />
</p>
</div>
)
}

8
src/Pages/question/useTableColumns.tsx
View File

@ -79,7 +79,13 @@ export const useColumns = () => {
align: "center",
render: (text, record) => record?.isBase === 1 ? t("practical.yes") : t ("practical.no"),
},
{
title: `${t("columns.question_options_count")}`,
dataIndex: "name",
key: "name",
align: "center",
render: (text, record) => record?.question_options_count,
},
{
title: can_add_Question ? (
<button

7
src/Styles/Pages/exercise.scss
View File

@ -119,3 +119,10 @@
.inputSmall{
width: 100px;
}
.delete_question_options{
margin-top: 25px;
color: var(--primary);
position: absolute;
left: 100px;
}

4
src/api/config.ts
View File

@ -1,7 +1,7 @@
export const BaseURL = "http://192.168.1.108:8000/api/";
// export const BaseURL = "http://192.168.1.108:8000/api/";
// export const BaseURL = "http://127.0.0.1:8000/api/";
// export const BaseURL = "https://school-back-dev.point-dev.net/api/";
export const BaseURL = "https://exercise-automation.point-dev.net/api/";
export const ImageBaseURL = "http://192.168.1.9:8000/";

1
src/config/AppKey.ts
View File

@ -6,6 +6,7 @@ export const Currency = "ل.س";
export const TOKEN_KEY = PROJECT_NAME + "_TOKEN";
export const USER_KEY = PROJECT_NAME + "_USER";
export const ABILITIES_KEY = PROJECT_NAME + "_ABILITIES";
export const QUESTION_OBJECT_KEY = PROJECT_NAME + "_QUESTION";
export const TERM_OBJECT_KEY = PROJECT_NAME + "_OBJECT_TERM";
export const BRANCH_OBJECT_KEY = PROJECT_NAME + "_OBJECT_BRANCH";

6
src/translate/ar.json
View File

@ -45,7 +45,8 @@
"some_thing_went_wrong": "حدث خطأ ما",
"Due_date_must_be_before_assigning_date": "يجب أن يكون تاريخ الاستحقاق بعد تاريخ التعيين",
"grade_to_pass_must_be_less_than_max_grade": "يجب أن تكون درجة النجاح أقل من الحد الأقصى للدرجة",
"max_mark_must_be_greater_than_min_mark_to_pass":"يجب ان تكون اكبر من علامة النجاح"
"max_mark_must_be_greater_than_min_mark_to_pass":"يجب ان تكون اكبر من علامة النجاح",
"Sorry, the question must have at least one option":"عذرًا، يجب أن يحتوي السؤال على خيار واحد على الأقل"
},
"header": {
"register_students": "تسجيل الطلاب",
@ -151,7 +152,8 @@
"lesson_count":"عدد الدروس",
"max_mark":"العلامة الكاملة",
"min_mark_to_pass" : "علامة النجاح",
"isBase":"سؤال رئيسي"
"isBase":"سؤال رئيسي",
"question_options_count":"عدد الخيارات"
},
"practical": {
"to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",

1
src/types/Item.ts
View File

@ -315,6 +315,7 @@ export interface Question {
min_mark_to_pass: number;
image: string | null;
Questions?:any[]
question_options_count?:any
QuestionOptions: QuestionOption[];
tags: tags[]; // Assuming tags are strings, adjust as per actual data type
}

21
src/utils/cleanObject.ts Normal file
View File

@ -0,0 +1,21 @@
export function cleanObject(obj:any) {
// Create a new object to store the cleaned data
let cleanedObj = {} as any;
// Iterate over each property in the input object
for (let key in obj) {
// Check if the property value is not null, an empty string, or an empty array
if (
obj[key] !== null &&
obj[key] !== undefined &&
obj[key] !== "" &&
!(Array.isArray(obj[key]) && obj[key].length === 0)
) {
// Add the property to the cleaned object
cleanedObj[key] = obj[key];
}
}
// Return the cleaned object
return cleanedObj;
}

4
src/utils/hasItems.ts Normal file
View File

@ -0,0 +1,4 @@
export function hasItems(obj:any) {
// Check if the object has any properties
return Object.keys(obj).length > 0;
}

9
src/zustand/ObjectToEditState.ts
View File

@ -21,6 +21,11 @@ interface ModelState {
set_isBseQuestion: (data: any) => void;
Success: boolean;
set_Success: (data: any) => void;
DeletedQuestions: any;
set_DeletedQuestions: (data: any) => void;
SavedQuestionData: any;
set_SavedQuestionData: (data: any) => void;
}
export const useObjectToEdit = create<ModelState>((set) => ({
@ -44,4 +49,8 @@ export const useObjectToEdit = create<ModelState>((set) => ({
set_isBseQuestion: (data) => set(() => ({ isBseQuestion: data })),
Success: false,
set_Success: (data) => set(() => ({ Success: data })),
DeletedQuestions: [],
set_DeletedQuestions: (data) => set(() => ({ DeletedQuestions: data })),
SavedQuestionData: [],
set_SavedQuestionData: (data) => set(() => ({ SavedQuestionData: data })),
}));