Karimaldeen/Quiz_dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of into dev

Browse Source
This commit is contained in:
Moaz Dawalibi 2024-09-17 11:40:14 +03:00
commit 3a877b5053
34 changed files with 437 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx
View File

@ -27,6 +27,7 @@ const ImageBoxField = ({ name }: any) => {
const handleFileChange = (event: any) => {
const file = event.target.files[0];
if (file) {
const maxSize = 2 * 1024 * 1024;
@ -42,6 +43,8 @@ const ImageBoxField = ({ name }: any) => {
if (file) {
generateImagePreview(file, setImagePreview);
console.log(file,"file");
formik.setFieldValue(name, file);
}
};
@ -55,7 +58,7 @@ const ImageBoxField = ({ name }: any) => {
const handleCancel = () => {
setImagePreview("");
formik.setFieldValue(name, "");
formik.setFieldValue(name, null);
if (fileInputRef.current) {
fileInputRef.current.value = "";
@ -79,9 +82,9 @@ const ImageBoxField = ({ name }: any) => {
</div>
<div className="ImageBox" onClick={handleButtonClick}>
{imagePreview ? (
<img src={imagePreview} onClick={handleButtonClick} alt="Preview" className="imagePreview" />
<img src={imagePreview} alt="Preview" className="imagePreview" />
) : (
<ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
<ImageIcon className="ImageBoxIcon" />
)}
</div>
<input

33
src/Components/CustomFields/SelectTag.tsx
View File

@ -9,20 +9,32 @@ const SelectTag: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>("");
const [fieldValue, setFieldValue] = useState<string>("");
const [NewAdditionalData, setNewAdditionalData] = useState({})
const formik = useFormikContext<any>();
const handleChange = (value: string[]) => {
const handleChange = (value: any,option:any) => {
console.log(option);
console.log(value);
const newSelectedOption = option?.pop()
console.log(newSelectedOption);
const newObject = {
id:newSelectedOption?.id,
name:newSelectedOption?.name
}
setNewAdditionalData(newObject)
formik.setFieldValue("tags", value);
setSearchValue("");
setFieldValue("");
};
const handleSearch = useDebounce((value: string) => {
console.log(value,"value");
setSearchValue(value);
});
const handleFieldChange = (value: string) => {
setFieldValue(value);
};
@ -36,6 +48,12 @@ const SelectTag: React.FC = () => {
});
const [t] = useTranslation();
const initialData = formik?.values?.tags?.filter((item:any)=>{
return item?.id
}) ?? []
const options = data?.data ?? [];
const additionalData =
@ -46,7 +64,16 @@ const SelectTag: React.FC = () => {
const value =
formik?.values?.tags?.map((item: any) => item?.id ?? item) ?? [];
const AllOptions = [...options, ...additionalData];
const AllOptions = [...options, ...additionalData,NewAdditionalData, ...(initialData)];
const uniqueOptions = Array.from(
new Map(
AllOptions
.filter(item => Object.keys(item).length > 0) // Filter out empty objects
.map(item => [item.id, item]) // Create [id, item] pairs to ensure uniqueness
).values()
);
return (
<div className="SelectTag">
@ -58,7 +85,7 @@ const SelectTag: React.FC = () => {
placeholder=""
fieldNames={{ label: "name", value: "id" }}
onChange={handleChange}
options={AllOptions}
options={uniqueOptions}
filterOption={false}
loading={isLoading}
notFoundContent={isLoading ? <Spin /> : t("practical.not_found")}

1
src/Components/ValidationField/utils/ValidationField.scss
View File

@ -7,7 +7,6 @@
margin-bottom: 10px;
position: relative;
min-height: 80px;
// padding-inline: 20px;
> * {
width: 100% !important;
min-width: 150px;

92
src/Components/exercise/Header.tsx
View File

@ -1,37 +1,59 @@
import { useFormikContext } from "formik";
import React from "react";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { GoArrowSwitch } from "react-icons/go";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { QUESTION_OBJECT_KEY } from "../../config/AppKey";
import { Popconfirm, Popover } from "antd";
import { Checkbox, CheckboxProps, Popconfirm, Popover } from "antd";
import { CombinationKeyEnum } from "../../enums/CombinationKeyEnum";
import { PopconfirmProps } from "antd/lib";
import { SettingFilled } from "@ant-design/icons";
const Header = () => {
const [t] = useTranslation();
const { values, setFieldValue, setValues } = useFormikContext<any>();
const { isBseQuestion, setIsBseQuestion } = useObjectToEdit();
const { setSavedQuestionData } = useObjectToEdit();
const { values, setValues } = useFormikContext<any>();
const { isBseQuestion, setIsBseQuestion,ShowHint,setShowHint } = useObjectToEdit();
// const [Setting, setSetting] = useState(false)
const isEdited = ()=>{
if(isBseQuestion || values?.isBase === 1){
const content = !values?.content ;
const content_image = !values?.content_image ;
const Questions = values?.Questions?.length <= 1 && values?.Questions?.[0]?.answers?.length === 0 ;
const defaultQuestionHint = Object.keys(values?.Questions?.[0] ?? {})?.length <= 1
if(content && content_image && Questions && defaultQuestionHint) {
return false
}
}else{
const content = !values?.content ;
const content_image = !values?.content_image ;
const hint = !values?.hint ;
const answers = !(values?.answers?.length > 0) ;
const tags = !(values?.tags?.length > 0) ;
if(content && content_image && hint && answers && tags) {
return false
}
}
return true
}
const handleChange = () => {
setSavedQuestionData(null);
localStorage.removeItem(QUESTION_OBJECT_KEY);
if (isBseQuestion) {
setIsBseQuestion(false);
setValues(null);
setFieldValue("isBase", 0);
} else {
setIsBseQuestion(true);
setValues(null);
setFieldValue("isBase", 1);
}
};
const confirm: PopconfirmProps['onConfirm'] = (e) => {
console.log(e);
setTimeout(() => {
handleChange()
handleChange() ;
}, 500);
};
@ -50,6 +72,25 @@ const Header = () => {
</div>
);
const handleOpenChange = (newOpen: boolean) => {
// setSetting(newOpen);
};
const onChange: CheckboxProps['onChange'] = (e) => {
setShowHint(e.target.checked);
};
const contentSetting = (
<div>
<Checkbox checked={ShowHint} onChange={onChange}>
{ t("header.show_hint")}
</Checkbox>
</div>
);
return (
<header className="exercise_add_header mb-4">
<article>
@ -62,6 +103,16 @@ const Header = () => {
</div>
</article>
<div>
<div className="question_header_setting">
<Popover onOpenChange={handleOpenChange} trigger="click" content={contentSetting}>
<SettingFilled/>
</Popover>
</div>
{
isEdited() ?
<Popconfirm
title={t("header.this_will_un_do_all_your_changes")}
okText={t("practical.yes")}
@ -77,6 +128,23 @@ const Header = () => {
: t("header.exercise")}
</Popconfirm>
:
<>
<GoArrowSwitch onClick={()=>confirm()} className="m-2" />
{isBseQuestion || values?.isBase === 1
? t("header.malty_exercise")
: t("header.exercise")}
</>
}
</div>
</header>
);

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

@ -33,7 +33,7 @@ const FormikFormModel: React.FC<FormikFormProps> = ({
>
{(formik) => {
useEffect(() => {
if (isOpen === "") {
if (isOpen === "" || isOpen === "isSuccess") {
formik.setErrors({});
formik.resetForm();
}

14
src/Layout/Dashboard/Table/DataTable.tsx
View File

@ -1,6 +1,7 @@
import React, { lazy, Suspense } from "react";
import React, { lazy, Suspense, useEffect } from "react";
import { useAddKeyToData, Table, useTranslation, usePagination } from ".";
import { DataTableProps } from "../../../types/Table";
import { useDataTableState } from "../../../zustand/TabState";
const NotFoundLottie = React.lazy(
() => import("../../../Components/Lottie/NotFound/NotFoundLottie"),
);
@ -14,21 +15,26 @@ const DataTable: React.FC<DataTableProps> = ({
...props
}) => {
const data: any[] = response?.data?.data || [];
const dataSource = useAddKeyToData(data);
const columns = useColumns();
const { pagination, handlePageChange } = usePagination(response?.data);
const [t] = useTranslation();
const getRowClassName = (record: any, index: number): string => {
const getRowClassName = (_record: any, index: number): string => {
return index % 2 === 0 ? "even-row" : "odd-row";
};
const isRefetching = response?.isRefetching;
const isLoading = response?.isLoading;
const dataLength = data?.length ;
const {setDataTableLength} = useDataTableState()
useEffect(() => {
setDataTableLength(dataLength)
}, [dataLength])
return (
<Table
style={{ minHeight: "300px" }}
columns={columns}
dataSource={dataSource}
dataSource={data}
rowKey={"id"}
rowClassName={(record, index) => getRowClassName(record, index)}
className="DataTable"
loading={{

4
src/Layout/Dashboard/usePagination.ts
View File

@ -1,5 +1,4 @@
import { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { PaginationAntd, PaginationMeta } from "../../types/Table";
import { useFilterStateState } from "../../zustand/Filter";
@ -8,8 +7,6 @@ interface Data {
}
const usePagination = (data: Data) => {
const navigate = useNavigate();
const location = useLocation();
const { Filter ,setFilter } = useFilterStateState();
const [pagination, setPagination] = useState<PaginationAntd>({
@ -29,7 +26,6 @@ const usePagination = (data: Data) => {
}, [data]);
const handlePageChange = (page: number) => {
// navigate(`?page=${page}`);
setFilter({
...Filter,
page:page

4
src/Pages/Admin/Grade/useTableColumns.tsx
View File

@ -1,13 +1,10 @@
import { TableColumnsType } from "antd";
import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../../utils/useModalHandler";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../../enums/abilities";
import { useNavigate } from "react-router-dom";
import {
canAddGrade,
canDeleteGrade,
canEditGrade,
canShowGrade,
@ -15,7 +12,6 @@ import {
import ActionButtons from "../../../Components/Table/ActionButtons";
import ColumnsImage from "../../../Components/Columns/ColumnsImage";
import { Grade } from "../../../types/Grade";
import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
import { useFilterStateState } from "../../../zustand/Filter";
export const useColumns = () => {

2
src/Pages/Admin/Tags/field/SelectTag.tsx
View File

@ -11,7 +11,7 @@ const SelectTag: React.FC = () => {
const [fieldValue, setFieldValue] = useState<string>("");
const formik = useFormikContext<any>();
const handleChange = (value: string[]) => {
console.log(value);
console.log(value,"value");
formik.setFieldValue("tags", value);
setSearchValue("");

7
src/Pages/Admin/question/AddPage.tsx
View File

@ -115,7 +115,7 @@ const AddPage: React.FC = () => {
return false ;
}
if(haveImageOrContent){
toast.error("validation.one_of_image_and_content_should_be_enter")
toast.error(t("validation.one_of_image_and_content_should_be_enter"))
return false
}
@ -127,7 +127,8 @@ const AddPage: React.FC = () => {
const haveAnswers = answers?.length > 0;
const haveMoreThanOneAnswer = haveAnswers && answers?.length > 1;
const haveOneAnswerRight = haveMoreThanOneAnswer && answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true);
const haveImageOrContent = haveOneAnswerRight && values?.answers?.some((item:any)=> !(item?.content) && !(item.content_image) )
const haveImageOrContent = haveOneAnswerRight && answers?.some((item:any)=> !(item?.content) && !(item.content_image) )
console.log(haveImageOrContent,"haveImageOrContent");
if (!haveAnswers) {
toast.error(t("validation.it_should_have_more_than_one_answers"));
@ -145,7 +146,7 @@ const AddPage: React.FC = () => {
}
if(haveImageOrContent){
toast.error("validation.one_of_image_and_content_should_be_enter")
toast.error(t("validation.one_of_image_and_content_should_be_enter"))
return false
}

50
src/Pages/Admin/question/EditPage.tsx
View File

@ -58,7 +58,6 @@ const EditPage: React.FC = () => {
const handleSubmit = (values: any) => {
const DataToSend = structuredClone(values);
setTagsSearch(null);
console.log(DataToSend);
if (isBseQuestion) {
const UpdateBseQuestion = {
@ -89,6 +88,8 @@ const EditPage: React.FC = () => {
if (item?.id) {
const itemToSend = structuredClone(item);
const keysToRemove = ["content_image"];
console.log(itemToSend,"itemToSend");
const updatedObject = removeStringKeys(itemToSend, keysToRemove);
console.log(updatedObject, "updatedObject");
@ -96,16 +97,6 @@ const EditPage: React.FC = () => {
const oldAnswers = [] as any;
const newAnswers = [] as any;
if (updatedObject?.answers?.length > 0) {
const isValidAnswers = updatedObject?.answers?.some(
(answer: any) => answer?.isCorrect === 1,
);
// if(!isValidAnswers){
// toast.error(t("validation.at_least_one_answer_should_be_correct"));
// return;
// }
}
updatedObject?.answers?.forEach((item: any) => {
if (item?.id) {
oldAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
@ -118,7 +109,6 @@ const EditPage: React.FC = () => {
new: newAnswers,
};
console.log(answers);
mutate({
...updatedObject,
answers,
@ -127,7 +117,10 @@ const EditPage: React.FC = () => {
} else {
console.log(values?.id);
const tags = processTags(DataToSend);
const tags = processTags(item);
console.log(item,"DataToSend");
console.log(tags,"tags");
mutateAdd({
...item,
subject_id: subject_id,
@ -149,19 +142,17 @@ const EditPage: React.FC = () => {
const oldAnswers = [] as any;
const newAnswers = [] as any;
if (updatedObject?.answers?.length > 0) {
// const isValidAnswers = updatedObject?.answers?.some((answer:any) => answer?.isCorrect === 1 || answer?.isCorrect === true)
// const isValidAnswers2 = updatedObject?.answers?.filter((answer: any) => answer?.isCorrect === 1 || answer?.isCorrect === true ).length > 1;
// console.log(isValidAnswers2);
// console.log(isValidAnswers,"isValidAnswers");
// if(!isValidAnswers || isValidAnswers2){
// toast.error(t("validation.at_least_one_answer_should_be_correct"));
// return;
// }
}
updatedObject?.answers?.forEach((item: any) => {
if (item?.id) {
console.log(item,"item");
const deletedImage = item?.content_image === null
if(deletedImage){
oldAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0, content_image:"" });
}else{
oldAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
}
} else {
newAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
}
@ -181,7 +172,6 @@ const EditPage: React.FC = () => {
};
const location = useLocation();
const navigate = useNavigate();
const handleCancel = () => {
navigate(-1);
@ -191,6 +181,7 @@ const EditPage: React.FC = () => {
const handleValidateSingleQuestion = (values:any)=>{
const haveMoreThanOneAnswer = values?.answers?.length > 1;
const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item:any)=> item?.isCorrect === 1 || item.isCorrect === true )
const haveImageOrContent = haveOneAnswerRight && values?.answers?.some((item:any)=> !(item?.content) && !(item.content_image) )
if(!haveMoreThanOneAnswer){
toast.error(t("validation.it_should_have_more_than_one_answers")) ;
@ -200,6 +191,10 @@ const EditPage: React.FC = () => {
toast.error(t("validation.it_should_have_more_than_one_correct_answers")) ;
return false ;
}
if(haveImageOrContent){
toast.error(t("validation.one_of_image_and_content_should_be_enter"))
return false
}
}
@ -210,6 +205,7 @@ const handleValidateBaseQuestion = (values: any) => {
const haveMoreThanOneAnswer = haveAnswers && answers?.length > 1;
const haveOneAnswerRight =
haveMoreThanOneAnswer && answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true);
const haveImageOrContent = haveOneAnswerRight && answers?.some((item:any)=> !(item?.content) && !(item.content_image) )
if (!haveAnswers) {
toast.error(t("validation.it_should_have_more_than_one_answers"));
@ -226,6 +222,12 @@ const handleValidateBaseQuestion = (values: any) => {
return false;
}
if(haveImageOrContent){
toast.error(t("validation.one_of_image_and_content_should_be_enter"))
return false
}
return true;
});

29
src/Pages/Admin/question/Model/Field/ChoiceFields.tsx
View File

@ -9,11 +9,13 @@ import TextField from "./TextField";
import ImageBoxField from "../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
import { GoTrash } from "react-icons/go";
import { Popconfirm } from "antd";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
const formik = useFormikContext<any>();
const [t] = useTranslation();
const { ShowHint } = useObjectToEdit();
const handleDeleteChoice = () => {
console.log(index);
@ -26,6 +28,16 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
formik.setFieldValue("answers", updatedAnswers);
};
const values = formik?.values?.answers?.[index] ;
const handelCanDeleteAnswers = ()=>{
const content = values?.content ;
const content_image = values?.content_image ;
if(!content && !content_image ){
return true
}
return false
}
return (
<>
<div className="ChoiceFields">
@ -52,7 +64,17 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
name={index}
type="Checkbox"
/>
{handelCanDeleteAnswers() ?
<p className="delete_question_options" onClick={()=>{handleDeleteChoice()}}>
{t("header.delete_choice")}
<GoTrash
className="trash_icon"
size={17}
/>
</p>
:
<Popconfirm
title={t("header.this_will_un_do_all_your_changes")}
okText={t("practical.yes")}
@ -72,12 +94,15 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
</Popconfirm>
}
</div>
</div>
<div className="exercise_form_width">
{ShowHint &&
<ValidationField
className=" "
className="hint"
placeholder="_"
name={`answers.${index}.hint`}
label="hint"
@ -86,6 +111,8 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
showCount={false}
autoSize={{ minRows: 2, maxRows: 10 }}
/>
}
</div>
</>
);

2
src/Pages/Admin/question/Model/Field/Choices.tsx
View File

@ -40,6 +40,8 @@ const Choices = () => {
{formik?.values?.answers?.map((item: Choice, index: number) => {
return (
<div
key={index}
className="Choices"
>
<ChoiceFields index={index} data={item} />
</div>

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

@ -10,6 +10,7 @@ import { toast } from "react-toastify";
import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
import { GoTrash } from "react-icons/go";
import { Popconfirm } from "antd";
import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
const ChoiceFields = ({
index,
@ -23,7 +24,7 @@ const ChoiceFields = ({
const formik = useFormikContext<any>();
const [t] = useTranslation();
const { ShowHint } = useObjectToEdit();
const handleDeleteChoice = () => {
const arrayLength = formik.values.Questions?.[parent_index].answers?.length;
@ -42,6 +43,19 @@ const ChoiceFields = ({
formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers);
};
const values = formik.values.Questions?.[parent_index]?.answers?.[index] ;
console.log(values,"values");
const handelCanDeleteAnswers = ()=>{
const content = values?.content ;
const content_image = values?.content_image ;
if(!content && !content_image ){
return true
}
return false
}
return (
<>
<div className="ChoiceFields">
@ -71,6 +85,18 @@ const ChoiceFields = ({
parent_index={parent_index}
/>
{handelCanDeleteAnswers() ?
<p className="delete_question_options" onClick={()=>{handleDeleteChoice()}} >
{t("header.delete_choice")}
<GoTrash
className="trash_icon"
size={17}
/>
</p>
:
<Popconfirm
title={t("header.this_will_un_do_all_your_changes")}
okText={t("practical.yes")}
@ -89,12 +115,17 @@ const ChoiceFields = ({
</p>
</Popconfirm>
}
</div>
</div>
<div className="exercise_form_width">
{ShowHint &&
<ValidationField
className=" "
className="hint"
placeholder="_"
name={`Questions.${parent_index}.answers.${index}.hint`}
label="hint"
@ -103,6 +134,8 @@ const ChoiceFields = ({
showCount={false}
autoSize={{ minRows: 2, maxRows: 10 }}
/>
}
</div>
</>
);

3
src/Pages/Admin/question/Model/Malty/ChoiceField/Choices.tsx
View File

@ -52,7 +52,8 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
).map((item: Choice, index: number) => {
return (
<div
className="Choices ChoicesMalty"
key={index}
>
<ChoiceFields
key={index}

14
src/Pages/Admin/question/Model/Malty/Form.tsx
View File

@ -16,14 +16,12 @@ import { toast } from "react-toastify";
const Form = () => {
const formik = useFormikContext<any>();
const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
const { setSuccess, Success, setSavedQuestionData ,ShowHint} = useObjectToEdit();
useEffect(() => {
setSavedQuestionData(formik.values);
}, [formik?.values]);
// console.log(formik?.errors);
const handleAddChoice = (
parent_index: number,
fromKeyCombination: boolean = false,
@ -94,6 +92,11 @@ const Form = () => {
}
}, [Success]);
return (
<Row className="w-100 exercise_form_container">
<div className="exercise_form">
@ -113,7 +116,7 @@ const Form = () => {
(item: Choice, parent_index: number) => {
return (
<div key={parent_index}>
<div className="exercise_form">
<div className="exercise_form QuestionFIeld">
<QuestionFIeld
key={parent_index}
index={parent_index}
@ -135,6 +138,7 @@ const Form = () => {
)}
<div className="exercise_form_width">
{ShowHint &&
<ValidationField
className=" "
placeholder="_"
@ -145,6 +149,8 @@ const Form = () => {
autoSize={{ minRows: 2, maxRows: 10 }}
showCount={false}
/>
}
<MaltySelectTag parent_index={parent_index} />
</div>
</div>

33
src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx
View File

@ -29,6 +29,21 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
formik.setFieldValue(`Questions`, updatedAnswers);
};
const values = formik.values.Questions?.[index] ;
const handelCanDeleteAnswers = ()=>{
const content = values?.content ;
const content_image = values?.content_image ;
if(!content && !content_image ){
return true
}
return false
}
return (
<>
<div className="exercise_forms">
@ -48,7 +63,22 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
<ImageBoxField name={`Questions.${index}.content_image`} />
{handelCanDeleteAnswers() ?
<div className="answer_status" >
<p className="delete_question_options" onClick={()=>{handleDeleteQuestion()}}>
{t("header.delete_question")}
<GoTrash
className="trash_icon"
size={17}
/>
</p>
</div>
:
<div className="answer_status" >
<Popconfirm
title={t("header.this_will_un_do_all_your_changes")}
okText={t("practical.yes")}
@ -68,6 +98,9 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
</Popconfirm>
</div>
}
</div>
</div>

30
src/Pages/Admin/question/Model/Malty/Tags/MaltySelectTag.tsx
View File

@ -10,7 +10,16 @@ const MaltySelectTag = ({ parent_index }: { parent_index: number }) => {
const [fieldValue, setFieldValue] = useState<string>("");
const formik = useFormikContext<any>();
const values = formik?.values?.Questions?.[parent_index]?.tags;
const handleChange = (value: string[]) => {
const [NewAdditionalData, setNewAdditionalData] = useState({})
const handleChange = (value: string[],option:any) => {
const newSelectedOption = option?.pop()
const newObject = {
id:newSelectedOption?.id,
name:newSelectedOption?.name
}
setNewAdditionalData(newObject)
formik.setFieldValue(`Questions.[${parent_index}].tags`, value);
setSearchValue("");
setFieldValue("");
@ -46,7 +55,22 @@ const MaltySelectTag = ({ parent_index }: { parent_index: number }) => {
(item: any) => item?.id ?? item,
) ?? [];
const AllOptions = [...options, ...additionalData];
const initialData = formik?.values?.Questions[parent_index]?.tags?.filter((item:any)=>{
return item?.id
}) ?? []
const AllOptions = [...options, ...additionalData,NewAdditionalData , ...(initialData)];
const uniqueOptions = Array.from(
new Map(
AllOptions
.filter(item => Object.keys(item).length > 0) // Filter out empty objects
.map(item => [item.id, item]) // Create [id, item] pairs to ensure uniqueness
).values()
);
return (
<div className="SelectTag">
@ -58,7 +82,7 @@ const MaltySelectTag = ({ parent_index }: { parent_index: number }) => {
placeholder=""
fieldNames={{ label: "name", value: "id" }}
onChange={handleChange}
options={AllOptions}
options={uniqueOptions}
filterOption={false}
loading={isLoading}
notFoundContent={isLoading ? <Spin /> : t("practical.not_found")}

6
src/Pages/Admin/question/Model/ModelForm.tsx
View File

@ -16,7 +16,7 @@ import { toast } from "react-toastify";
const Form = () => {
const [t] = useTranslation();
const formik = useFormikContext<any>();
const { setSuccess, Success } = useObjectToEdit();
const { setSuccess, Success,ShowHint } = useObjectToEdit();
const handleAddChoice = (fromKeyCombination: boolean = false) => {
formik.setFieldValue("answers", [
@ -68,7 +68,9 @@ const Form = () => {
</p>
)}
<div className="exercise_form_width">
{ShowHint &&
<ValidationField
className=" "
placeholder="_"
@ -80,6 +82,8 @@ const Form = () => {
autoSize={{ minRows: 2, maxRows: 10 }}
/>
}
<SelectTag />
</div>
</Row>

1
src/Pages/Admin/question/Page.tsx
View File

@ -51,7 +51,6 @@ const TableHeader = () => {
{name:LessonName, path:`lesson/${lesson_id }`}
]);
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>

3
src/Pages/Admin/question/formUtil.ts
View File

@ -1,6 +1,5 @@
import * as Yup from "yup";
import { Question } from "../../../types/Item";
import { toast } from "react-toastify";
export const getInitialValues = (objectToEdit: Question): any => {
const tags = objectToEdit?.tags?.map((item: any, index: number) => {
@ -60,7 +59,6 @@ export const getInitialValuesBase = (objectToEdit: Question): any => {
}
})
console.log(newAnswers,"newAnswers");
return {
...item,
@ -123,6 +121,7 @@ export const getValidationSchemaBase = () => {
export function processTags(DataToSend: any) {
console.log(DataToSend?.tags);
console.log(DataToSend);
const oldTags = DataToSend?.tags
?.map((item: any, index: number) => {

6
src/Pages/Admin/subject/Model/EditModel.tsx
View File

@ -7,14 +7,16 @@ import { handelImageState } from "../../../../utils/DataToSendImageState";
import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../../../enums/params";
const ModalForm: React.FC = () => {
const { objectToEdit } = useObjectToEdit((state) => state);
const { mutate, status } = useUpdateSubject();
const {subject_id} = useParams<ParamsEnum>()
const handleSubmit = (values: any) => {
const Data_to_send = { ...values };
const Data_to_send = { ...values,subject_id };
const handelImage = handelImageState(Data_to_send, "icon");
mutate(handelImage);
};

8
src/Pages/Home/Dummy.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import { useTranslation } from "react-i18next";
import useFilter from "../../Components/FilterField/components/useFilter";
import { Select } from "antd";
const Dummy = () => {
const [t] = useTranslation();
@ -8,12 +9,15 @@ const Dummy = () => {
return (
<div className="DummyHomePage">
<FilterButton/>
{/* <FilterButton/>
<FilterBody>
karim
</FilterBody>
<Select
style={{width:"200px"}}
showSearch
/> */}
karim2
</div>
);
};

14
src/Styles/Layout/FilterLayout.scss
View File

@ -1,7 +1,7 @@
.filter_header {
padding: 20px 20px;
border-radius: 10px 10px 0 0;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 32px 2px #080F3414;
>div {
display: flex;
@ -105,15 +105,3 @@
.model_sub_children {
padding-bottom: 30px;
}
.ant-select-selection-search {
// color: var(--value) !important;
// display: none !important;
}
:where(.css-dev-only-do-not-override-oad6qy).ant-select-single.ant-select-lg .ant-select-selector .ant-select-selection-search {
input {}
}
:where(.css-dev-only-do-not-override-oad6qy).ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input {}

1
src/Styles/Layout/index.scss
View File

@ -3,6 +3,7 @@
@import "./Layout.scss";
@import "./SideBar.scss";
@import "./DataTable.scss";
@import "./DataState.scss";
@import "./PageHeader.scss";
@import "./FilterLayout.scss";

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

@ -133,6 +133,7 @@
.exercise_add_header {
display: flex;
gap: 30px;
justify-content: space-between;
width: 100%;
padding: 14px 20px;
@ -142,6 +143,7 @@
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
div{
margin-left: 25px;
display: flex;
}
img {
cursor: pointer;
@ -263,3 +265,48 @@
font-size: 19px;
}
}
.Choices{
padding-inline: 20px;
.textarea_exercise,.hint{
width: calc(50vw - 10px) !important;
}
.ValidationField{
.text{
font-size: 14px;
}
}
}
.QuestionFIeld{
padding-inline: 10px;
.textarea_exercise{
width: calc(50vw - 10px) !important;
}
.ValidationField{
.text{
font-size: 17px;
}
}
}
.Choices.ChoicesMalty{
.textarea_exercise,.hint{
width: calc(50vw - 20px) !important;
}
.ValidationField{
.text{
font-size: 14px;
}
}
}
.question_header_setting{
margin-inline: 40px;
}

2
src/api/helper/useAxios.ts
View File

@ -53,7 +53,7 @@ function useAxios() {
console.log(error?.response);
const status = error?.request?.status;
const errorMsg = error?.response?.data?.message;
const errorMsg = error?.response?.data?.error;
const errorField = error?.response?.data;
const method = error.config.method;

22
src/api/helper/useDeleteMutation.ts
View File

@ -2,6 +2,8 @@ import { useMutation, UseMutationResult } from "react-query";
import useAxios from "./useAxios";
import { HEADER_KEY } from "../config";
import { AxiosResponse } from "../../types/Axios";
import { useDataTableState } from "../../zustand/TabState";
import { useFilterStateState } from "../../zustand/Filter";
type DataToSend = {
id?: number | string | any;
@ -14,8 +16,12 @@ function useDeleteMutation(
toast: boolean = true,
): UseMutationResult<AxiosResponse, unknown, DataToSend, unknown> {
const axios = useAxios();
const {DataTableLength} = useDataTableState()
const { setFilter ,Filter } = useFilterStateState();
const page = Filter?.page ;
return useMutation<AxiosResponse, unknown, DataToSend, unknown>(
async (dataToSend) => {
const { data } = await axios.delete(url + `/` + dataToSend?.id, {
headers: {
[HEADER_KEY]: key,
@ -25,7 +31,21 @@ function useDeleteMutation(
return data;
},
);
{
onSuccess : (data) =>{
if(DataTableLength === 1 && page > 1){
setFilter(
{
...Filter,
page: page - 1
}
)
}
}
}
)
}
export default useDeleteMutation;

6
src/api/helper/useGetQuery.ts
View File

@ -1,7 +1,5 @@
import { useQuery } from "react-query";
import useAxios from "./useAxios";
import { useLocation } from "react-router-dom";
import { PaginationParams } from "../utils/PaginationParams";
import { filterParams } from "../utils/filterParams";
import { useFilterStateState } from "../../zustand/Filter";
function useGetQuery(
@ -13,11 +11,9 @@ function useGetQuery(
const axios = useAxios();
const { show, pagination, ...remainingParams } = params;
const location = useLocation();
const { Filter ,setFilter } = useFilterStateState();
const { Filter } = useFilterStateState();
const page = Filter?.page ;
const per_page = Filter?.per_page ;
// const { per_page } = PaginationParams(location);
const paramToSend = pagination

7
src/translate/ar.json
View File

@ -49,7 +49,8 @@
"at_least_one_answer_should_be_correct": "يجب أن تكون إجابة واحدة صحيحة",
"it_should_have_more_than_one_answers": "يجب أن يحتوي على أكثر من إجابة",
"it_should_have_more_than_one_correct_answers": "يجب أن يحتوي على إجابة صحيحة",
"File_size_exceeds_2_MB_limit.":"حجم الملف يتجاوز الحد الأقصى البالغ 2 ميجابايت"
"File_size_exceeds_2_MB_limit.":"حجم الملف يتجاوز الحد الأقصى البالغ 2 ميجابايت",
"one_of_image_and_content_should_be_enter":"يجب إدخال صورة أو محتوى واحد على الأقل"
},
"header": {
"register_students": "تسجيل الطلاب",
@ -138,7 +139,9 @@
"change": "تغيير",
"role_list": "قائمة الأدوار",
"managers":"مدراء",
"sales":"المبيعات"
"sales":"المبيعات",
"hide_hint":"اخفاء الشرح",
"show_hint":"عرض الشرح"
},
"columns": {
"id": "الرقم التعريفي",

2
src/utils/removeStringKeys.ts
View File

@ -14,7 +14,7 @@ export function removeStringKeys(obj: any, keysToRemove: string[]): any {
// Check if the value is a string or "null" and the key is in keysToRemove
if (
keysToRemove.includes(key) &&
(typeof value === "string" || value === "null")
(typeof value === "string")
) {
delete obj[key];
} else {

7
src/zustand/ObjectToEditState.ts
View File

@ -24,10 +24,13 @@ interface ModelState {
SavedQuestionData: any;
setSavedQuestionData: (data: any) => void;
ShowHint: any;
setShowHint: (data: any) => void;
}
export const useObjectToEdit = create<ModelState>((set) => ({
c: null,
objectToEdit: null,
setObjectToEdit: (data) => set(() => ({ objectToEdit: data })),
OldObjectToEdit: null,
setOldObjectToEdit: (data) => set(() => ({ OldObjectToEdit: data })),
@ -49,4 +52,6 @@ export const useObjectToEdit = create<ModelState>((set) => ({
setDeletedQuestions: (data) => set(() => ({ DeletedQuestions: data })),
SavedQuestionData: [],
setSavedQuestionData: (data) => set(() => ({ SavedQuestionData: data })),
ShowHint: true,
setShowHint: (data) => set(() => ({ ShowHint: data })),
}));

12
src/zustand/TabState.ts Normal file
View File

@ -0,0 +1,12 @@
import { create } from "zustand";
interface DataTableState {
DataTableLength: number;
setDataTableLength: (Key: number) => void;
}
export const useDataTableState = create<DataTableState>((set) => ({
DataTableLength: 0,
setDataTableLength: (Key) => set((state) => ({ DataTableLength: Key })),
}));