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

add option

Browse Source
This commit is contained in:
karimaldeen 2024-09-17 11:38:06 +03:00
parent af89180d07
commit 9409c7256d
14 changed files with 116 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,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

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;

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

@ -1,16 +1,18 @@
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 { 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, setValues } = useFormikContext<any>();
const { isBseQuestion, setIsBseQuestion } = useObjectToEdit();
const { isBseQuestion, setIsBseQuestion,ShowHint,setShowHint } = useObjectToEdit();
// const [Setting, setSetting] = useState(false)
const isEdited = ()=>{
if(isBseQuestion || values?.isBase === 1){
@ -70,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>
@ -82,6 +103,14 @@ const Header = () => {
</div>
</article>
<div>
<div className="question_header_setting">
<Popover onOpenChange={handleOpenChange} trigger="click" content={contentSetting}>
<SettingFilled/>
</Popover>
</div>
{
isEdited() ?
<Popconfirm

2
src/Pages/Admin/Grade/Table.tsx
View File

@ -17,7 +17,7 @@ const App: React.FC = () => {
sort_by
});
return <DataTable response={response} useColumns={useColumns} />;
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

7
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);
@ -98,8 +100,9 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
</div>
</div>
<div className="exercise_form_width">
{ShowHint &&
<ValidationField
className=" "
className="hint"
placeholder="_"
name={`answers.${index}.hint`}
label="hint"
@ -108,6 +111,8 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
showCount={false}
autoSize={{ minRows: 2, maxRows: 10 }}
/>
}
</div>
</>
);

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

@ -41,6 +41,7 @@ const Choices = () => {
return (
<div
key={index}
className="Choices"
>
<ChoiceFields index={index} data={item} />
</div>

8
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;
@ -122,8 +123,9 @@ const ChoiceFields = ({
</div>
<div className="exercise_form_width">
{ShowHint &&
<ValidationField
className=" "
className="hint"
placeholder="_"
name={`Questions.${parent_index}.answers.${index}.hint`}
label="hint"
@ -132,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}

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

@ -16,7 +16,7 @@ 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);
@ -116,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}
@ -138,6 +138,7 @@ const Form = () => {
)}
<div className="exercise_form_width">
{ShowHint &&
<ValidationField
className=" "
placeholder="_"
@ -148,6 +149,8 @@ const Form = () => {
autoSize={{ minRows: 2, maxRows: 10 }}
showCount={false}
/>
}
<MaltySelectTag parent_index={parent_index} />
</div>
</div>

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>

2
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;

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;
@ -262,4 +264,49 @@
font-weight: bold;
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;
}

4
src/translate/ar.json
View File

@ -138,7 +138,9 @@
"edit": "تعديل",
"change": "تغيير",
"role_list": "قائمة الأدوار",
"managers":"مدراء"
"managers":"مدراء",
"hide_hint":"اخفاء الشرح",
"show_hint":"عرض الشرح"
},
"columns": {
"id": "الرقم التعريفي",

5
src/zustand/ObjectToEditState.ts
View File

@ -24,6 +24,9 @@ interface ModelState {
SavedQuestionData: any;
setSavedQuestionData: (data: any) => void;
ShowHint: any;
setShowHint: (data: any) => void;
}
export const useObjectToEdit = create<ModelState>((set) => ({
@ -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 })),
}));