From 9409c7256de1f98dddaf4883a16c8c8f1a69bbad Mon Sep 17 00:00:00 2001 From: karimaldeen Date: Tue, 17 Sep 2024 11:38:06 +0300 Subject: [PATCH] add option --- .../ImageBoxField/ImageBoxField.tsx | 4 +- .../utils/ValidationField.scss | 1 - src/Components/exercise/Header.tsx | 35 ++++++++++++-- src/Pages/Admin/Grade/Table.tsx | 2 +- .../question/Model/Field/ChoiceFields.tsx | 7 ++- .../Admin/question/Model/Field/Choices.tsx | 1 + .../Model/Malty/ChoiceField/ChoiceFields.tsx | 8 +++- .../Model/Malty/ChoiceField/Choices.tsx | 3 +- src/Pages/Admin/question/Model/Malty/Form.tsx | 7 ++- src/Pages/Admin/question/Model/ModelForm.tsx | 6 ++- src/Styles/Layout/FilterLayout.scss | 2 +- src/Styles/Pages/exercise.scss | 47 +++++++++++++++++++ src/translate/ar.json | 4 +- src/zustand/ObjectToEditState.ts | 5 ++ 14 files changed, 116 insertions(+), 16 deletions(-) diff --git a/src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx b/src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx index 574815d..89888fc 100644 --- a/src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx +++ b/src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx @@ -82,9 +82,9 @@ const ImageBoxField = ({ name }: any) => {
{imagePreview ? ( - Preview + Preview ) : ( - + )}
* { width: 100% !important; min-width: 150px; diff --git a/src/Components/exercise/Header.tsx b/src/Components/exercise/Header.tsx index a595208..325ee98 100644 --- a/src/Components/exercise/Header.tsx +++ b/src/Components/exercise/Header.tsx @@ -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(); - 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 = () => { ); + + const handleOpenChange = (newOpen: boolean) => { + // setSetting(newOpen); + }; + const onChange: CheckboxProps['onChange'] = (e) => { + setShowHint(e.target.checked); + }; + + + const contentSetting = ( +
+ + + { t("header.show_hint")} + + +
+ ); + return (
@@ -82,6 +103,14 @@ const Header = () => {
+ +
+ + + + +
+ { isEdited() ? { sort_by }); - return ; + return ; }; export default App; diff --git a/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx b/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx index 89ea85a..5698eac 100644 --- a/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx +++ b/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx @@ -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(); const [t] = useTranslation(); + const { ShowHint } = useObjectToEdit(); const handleDeleteChoice = () => { console.log(index); @@ -98,8 +100,9 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
+ {ShowHint && { showCount={false} autoSize={{ minRows: 2, maxRows: 10 }} /> + + }
); diff --git a/src/Pages/Admin/question/Model/Field/Choices.tsx b/src/Pages/Admin/question/Model/Field/Choices.tsx index c3759ab..c3d5148 100644 --- a/src/Pages/Admin/question/Model/Field/Choices.tsx +++ b/src/Pages/Admin/question/Model/Field/Choices.tsx @@ -41,6 +41,7 @@ const Choices = () => { return (
diff --git a/src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx b/src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx index a3f12a1..584f803 100644 --- a/src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx +++ b/src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx @@ -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(); const [t] = useTranslation(); - + const { ShowHint } = useObjectToEdit(); const handleDeleteChoice = () => { const arrayLength = formik.values.Questions?.[parent_index].answers?.length; @@ -122,8 +123,9 @@ const ChoiceFields = ({
+ {ShowHint && + + }
); diff --git a/src/Pages/Admin/question/Model/Malty/ChoiceField/Choices.tsx b/src/Pages/Admin/question/Model/Malty/ChoiceField/Choices.tsx index af7cbf9..0e1fb95 100644 --- a/src/Pages/Admin/question/Model/Malty/ChoiceField/Choices.tsx +++ b/src/Pages/Admin/question/Model/Malty/ChoiceField/Choices.tsx @@ -52,7 +52,8 @@ const Choices = ({ parent_index }: { parent_index: number }) => { ).map((item: Choice, index: number) => { return (
{ const formik = useFormikContext(); - 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 (
-
+
{ )}
+ {ShowHint && { autoSize={{ minRows: 2, maxRows: 10 }} showCount={false} /> + + }
diff --git a/src/Pages/Admin/question/Model/ModelForm.tsx b/src/Pages/Admin/question/Model/ModelForm.tsx index 6de101f..25d0668 100644 --- a/src/Pages/Admin/question/Model/ModelForm.tsx +++ b/src/Pages/Admin/question/Model/ModelForm.tsx @@ -16,7 +16,7 @@ import { toast } from "react-toastify"; const Form = () => { const [t] = useTranslation(); const formik = useFormikContext(); - const { setSuccess, Success } = useObjectToEdit(); + const { setSuccess, Success,ShowHint } = useObjectToEdit(); const handleAddChoice = (fromKeyCombination: boolean = false) => { formik.setFieldValue("answers", [ @@ -68,7 +68,9 @@ const Form = () => {

)} +
+ {ShowHint && { autoSize={{ minRows: 2, maxRows: 10 }} /> + + }
diff --git a/src/Styles/Layout/FilterLayout.scss b/src/Styles/Layout/FilterLayout.scss index 356d055..b138b96 100644 --- a/src/Styles/Layout/FilterLayout.scss +++ b/src/Styles/Layout/FilterLayout.scss @@ -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; diff --git a/src/Styles/Pages/exercise.scss b/src/Styles/Pages/exercise.scss index 12f1087..6ebdd9e 100644 --- a/src/Styles/Pages/exercise.scss +++ b/src/Styles/Pages/exercise.scss @@ -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; } \ No newline at end of file diff --git a/src/translate/ar.json b/src/translate/ar.json index b8c0203..a92114c 100644 --- a/src/translate/ar.json +++ b/src/translate/ar.json @@ -138,7 +138,9 @@ "edit": "تعديل", "change": "تغيير", "role_list": "قائمة الأدوار", - "managers":"مدراء" + "managers":"مدراء", + "hide_hint":"اخفاء الشرح", + "show_hint":"عرض الشرح" }, "columns": { "id": "الرقم التعريفي", diff --git a/src/zustand/ObjectToEditState.ts b/src/zustand/ObjectToEditState.ts index b0c56c6..76bdd64 100644 --- a/src/zustand/ObjectToEditState.ts +++ b/src/zustand/ObjectToEditState.ts @@ -24,6 +24,9 @@ interface ModelState { SavedQuestionData: any; setSavedQuestionData: (data: any) => void; + + ShowHint: any; + setShowHint: (data: any) => void; } export const useObjectToEdit = create((set) => ({ @@ -49,4 +52,6 @@ export const useObjectToEdit = create((set) => ({ setDeletedQuestions: (data) => set(() => ({ DeletedQuestions: data })), SavedQuestionData: [], setSavedQuestionData: (data) => set(() => ({ SavedQuestionData: data })), + ShowHint: true, + setShowHint: (data) => set(() => ({ ShowHint: data })), }));