add CombinationKey

This commit is contained in:
karimaldeen 2024-09-11 14:55:59 +03:00
parent 9509943a60
commit 513ba6cb6a
21 changed files with 189 additions and 42 deletions

View File

@ -8,7 +8,6 @@ import {
} from "@ant-design/icons"; } from "@ant-design/icons";
import React from "react"; import React from "react";
import { Image, Space } from "antd"; import { Image, Space } from "antd";
import { ImageBaseURL } from "../../api/config";
import useImageError from "../../Hooks/useImageError"; import useImageError from "../../Hooks/useImageError";
import { ErrorImage } from "../../Layout/app/Const"; import { ErrorImage } from "../../Layout/app/Const";

View File

@ -13,9 +13,6 @@ const ImageBoxField = ({ name }: any) => {
const value = getNestedValue(formik.values, name); const value = getNestedValue(formik.values, name);
const [imagePreview, setImagePreview] = useState<string | null>(null); const [imagePreview, setImagePreview] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement | null>(null); const fileInputRef = useRef<HTMLInputElement | null>(null);
console.log(formik.values);
console.log(value, name);
useEffect(() => { useEffect(() => {
if (value instanceof File) { if (value instanceof File) {

View File

@ -1,7 +1,6 @@
import { Button, Image, Upload, UploadFile } from "antd"; import { Button, Image, Upload, UploadFile } from "antd";
import useFormField from "../../Hooks/useFormField"; import useFormField from "../../Hooks/useFormField";
import { UploadOutlined } from "@ant-design/icons"; import { UploadOutlined } from "@ant-design/icons";
import { ImageBaseURL } from "../../api/config";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FaRegFilePdf } from "react-icons/fa"; import { FaRegFilePdf } from "react-icons/fa";
import { useState } from "react"; import { useState } from "react";
@ -17,7 +16,7 @@ const PdfUploader = ({
}: any) => { }: any) => {
const { formik, t, isError } = useFormField(name, props); const { formik, t, isError } = useFormField(name, props);
let FormikName = formik.values[name]; let FormikName = formik.values[name];
const imageUrl = formik.values[name] ? ImageBaseURL + FormikName : ""; const imageUrl = formik.values[name] ? FormikName : "";
const [Imageurl, setImageurl] = useState(null); const [Imageurl, setImageurl] = useState(null);
const FilehandleChange = (value: any) => { const FilehandleChange = (value: any) => {

View File

@ -0,0 +1,30 @@
import React from 'react'
interface IFilterBody {
children:React.ReactNode
}
const useFilter = () => {
const FilterButton = ()=>{
return (
<div>
FilterButton
</div>
)
}
const FilterBody = ({children}:IFilterBody)=>{
return (
<div>
FilterBody
</div>
)
}
return {
FilterButton , FilterBody
}
}
export default useFilter

View File

@ -0,0 +1,5 @@
export enum FilterEnum {
FILTER="FILTER"
}

View File

@ -0,0 +1,22 @@
import { create } from "zustand";
interface FilterState {
filterState: any[];
setFilterState: (data: any) => void;
clearFilterState: () => void;
setWithOldValue: (data: any) => void;
setInitialValue: (data: any) => void;
}
export const useFilterState = create<FilterState>((set, get) => ({
filterState: [],
setFilterState: (data) => set(() => ({ filterState: data })),
clearFilterState: () => set(() => ({ filterState: [] })),
setWithOldValue: (data) =>
set((state) => ({ filterState: [...state.filterState, data] })),
setInitialValue: (data) => {
if (get().filterState.length < 1) {
set(() => ({ filterState: data }));
}
},
}));

View File

@ -0,0 +1,32 @@
import { useEffect } from 'react';
type KeyCombination = {
ctrlKey?: boolean;
shiftKey?: boolean;
code: string; // Use string here for flexibility
};
const useKeyCombination = (keyCombination: KeyCombination, callback: () => void) => {
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
const matches =
(keyCombination.ctrlKey === undefined || event.ctrlKey === keyCombination.ctrlKey) &&
(keyCombination.shiftKey === undefined || event.shiftKey === keyCombination.shiftKey) &&
event.code === keyCombination.code;
if (matches) {
callback();
event.preventDefault(); // Prevent the default action for the event
event.stopPropagation(); // Stop the event from propagating further
}
};
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [keyCombination, callback]);
};
export default useKeyCombination;

View File

@ -34,6 +34,7 @@ import { useGetAllLesson } from "../../../api/lesson";
import { useGetAllSubject } from "../../../api/subject"; import { useGetAllSubject } from "../../../api/subject";
import { useGetAllGrade } from "../../../api/grade"; import { useGetAllGrade } from "../../../api/grade";
import { useGetAllCurriculum } from "../../../api/curriculum"; import { useGetAllCurriculum } from "../../../api/curriculum";
import useKeyCombination from "../../../Hooks/useKeyCombination";
const AddPage: React.FC = () => { const AddPage: React.FC = () => {
const { isSuccess: isSuccessAsync, mutateAsync } = useAddQuestionAsync(); const { isSuccess: isSuccessAsync, mutateAsync } = useAddQuestionAsync();
@ -206,6 +207,9 @@ const AddPage: React.FC = () => {
// } // }
}; };
if (isBseQuestion) { if (isBseQuestion) {
return ( return (
<div className="exercise_add"> <div className="exercise_add">

View File

@ -28,6 +28,7 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
return ( return (
<> <>
<div className="ChoiceFields"> <div className="ChoiceFields">
<TextField <TextField
className="textarea_exercise" className="textarea_exercise"
placeholder={"choice"} placeholder={"choice"}

View File

@ -3,6 +3,9 @@ import { Choice } from "../../../../../types/Item";
import ChoiceFields from "./ChoiceFields"; import ChoiceFields from "./ChoiceFields";
import { useFormikContext } from "formik"; import { useFormikContext } from "formik";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { FaIcons } from "react-icons/fa";
import { DragHandleUnit } from "../../../Unit/DrapableTable";
import { HolderOutlined } from "@ant-design/icons";
const Choices = () => { const Choices = () => {
const formik = useFormikContext<any>(); const formik = useFormikContext<any>();
@ -55,6 +58,9 @@ const Choices = () => {
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<div className="HolderQuestion">
<HolderOutlined/>
</div>
<ChoiceFields index={index} data={item} /> <ChoiceFields index={index} data={item} />
</div> </div>
)} )}

View File

@ -67,6 +67,10 @@ const Form = () => {
}; };
const [t] = useTranslation(); const [t] = useTranslation();
return ( return (
<Row className="w-100"> <Row className="w-100">
<div className="exercise_form"> <div className="exercise_form">

View File

@ -43,6 +43,8 @@ const ChoiceFields = ({
].answers.filter((_: any, i: any) => i !== index); ].answers.filter((_: any, i: any) => i !== index);
formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers); formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers);
}; };
return ( return (
<> <>
<div className="ChoiceFields"> <div className="ChoiceFields">

View File

@ -3,6 +3,7 @@ import ChoiceFields from "./ChoiceFields";
import { Choice } from "../../../../../../types/Item"; import { Choice } from "../../../../../../types/Item";
import { useFormikContext } from "formik"; import { useFormikContext } from "formik";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { HolderOutlined } from "@ant-design/icons";
const Choices = ({ parent_index }: { parent_index: number }) => { const Choices = ({ parent_index }: { parent_index: number }) => {
const formik = useFormikContext<any>(); const formik = useFormikContext<any>();
@ -67,6 +68,9 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<div className="HolderQuestion">
<HolderOutlined/>
</div>
<ChoiceFields <ChoiceFields
key={index} key={index}
parent_index={parent_index} parent_index={parent_index}

View File

@ -13,6 +13,8 @@ import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import Choices from "./ChoiceField/Choices"; import Choices from "./ChoiceField/Choices";
import ImageBoxField from "../../../../../Components/CustomFields/ImageBoxField/ImageBoxField"; import ImageBoxField from "../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
import MaltySelectTag from "./Tags/MaltySelectTag"; import MaltySelectTag from "./Tags/MaltySelectTag";
import useKeyCombination from "../../../../../Hooks/useKeyCombination";
import { CombinationKeyEnum } from "../../../../../enums/CombinationKeyEnum";
const Form = () => { const Form = () => {
const formik = useFormikContext<any>(); const formik = useFormikContext<any>();
@ -36,8 +38,7 @@ const Form = () => {
console.log(parent_index); console.log(parent_index);
formik.setFieldValue(`Questions.[${parent_index}].answers`, [ formik.setFieldValue(`Questions.[${parent_index}].answers`, [
...((formik?.values as any)?.Questions?.[parent_index] ...((formik?.values as any)?.Questions?.[parent_index]?.answers as Choice[]),
.answers as Choice[]),
{ {
answer: null, answer: null,
@ -69,7 +70,21 @@ const Form = () => {
}; };
const [t] = useTranslation(); const [t] = useTranslation();
const lastQuestions = formik?.values?.Questions?.length -1 ;
useKeyCombination({ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.CHOICE }, () => {
handleAddChoice(lastQuestions)
});
useKeyCombination({ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.QUESTION }, () => {
handleAddQuestion()
});
return ( return (
<Row className="w-100 exercise_form_container"> <Row className="w-100 exercise_form_container">
<div className="exercise_form"> <div className="exercise_form">
<ValidationField <ValidationField

View File

@ -11,6 +11,8 @@ import { useEffect } from "react";
import Choices from "./Field/Choices"; import Choices from "./Field/Choices";
import ImageBoxField from "../../../../Components/CustomFields/ImageBoxField/ImageBoxField"; import ImageBoxField from "../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
import SelectTag from "../../../../Components/CustomFields/SelectTag"; import SelectTag from "../../../../Components/CustomFields/SelectTag";
import useKeyCombination from "../../../../Hooks/useKeyCombination";
import { CombinationKeyEnum } from "../../../../enums/CombinationKeyEnum";
const Form = () => { const Form = () => {
const [t] = useTranslation(); const [t] = useTranslation();
@ -42,7 +44,13 @@ const Form = () => {
]); ]);
}; };
console.log(formik?.values);
useKeyCombination({ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.CHOICE }, () => {
handleAddChoice()
});
return ( return (
<Row className="w-100 exercise_form_container"> <Row className="w-100 exercise_form_container">

View File

@ -2,12 +2,21 @@ import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../enums/abilities"; import { ABILITIES_ENUM } from "../../enums/abilities";
import useSetPageTitle from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
import useFilter from "../../Components/FilterField/components/useFilter";
const Dummy = () => { const Dummy = () => {
const [t] = useTranslation(); const [t] = useTranslation();
useSetPageTitle(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`); useSetPageTitle(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`);
const {FilterButton,FilterBody} = useFilter()
return(
<div className="DummyHomePage">
<FilterButton/>
<FilterBody>
karim
</FilterBody>
return <div className="DummyHomePage"></div>; </div>
);
}; };
export default Dummy; export default Dummy;

View File

@ -205,3 +205,8 @@
padding-inline: 20px !important; padding-inline: 20px !important;
} }
} }
.HolderQuestion{
transform: translateY(25px);
}

View File

@ -1,4 +1,4 @@
export const BaseURL = "https://nerd-back.point-dev.net/api/"; export const BaseURL = "https://nerd-back.point-dev.net/api/";
// export const BaseURL = "http://192.168.1.109:8000/api/";
export const ImageBaseURL = "https://nerd-back.point-dev.net/api/";
export const HEADER_KEY = "X-Custom-Query-Key"; export const HEADER_KEY = "X-Custom-Query-Key";

View File

@ -0,0 +1,6 @@
export enum CombinationKeyEnum {
QUESTION = "KeyK",
CHOICE = "KeyJ"
}

View File

@ -241,7 +241,7 @@
"Pass": "نجاح", "Pass": "نجاح",
"users": "المستخدمين", "users": "المستخدمين",
"branchAdmin": "مسؤول الفروع", "branchAdmin": "مسؤول الفروع",
"grade": "الدرجات", "grade": "الصفوف",
"homeworkAttachment": "مرفق الواجب المنزلي", "homeworkAttachment": "مرفق الواجب المنزلي",
"lateArrival": "وصول متأخر", "lateArrival": "وصول متأخر",
"noteAttachment": "مرفق الملاحظة", "noteAttachment": "مرفق الملاحظة",
@ -685,7 +685,7 @@
"tags": "كلمات مفتاحية", "tags": "كلمات مفتاحية",
"main_menu": "القائمة الرئيسية", "main_menu": "القائمة الرئيسية",
"setting": "الإعدادات", "setting": "الإعدادات",
"grade": "الدرجات", "grade": "الصفوف",
"curriculum": "مقرر", "curriculum": "مقرر",
"package": "حزمة", "package": "حزمة",
"subjects": "مواد", "subjects": "مواد",
@ -751,7 +751,7 @@
"Question": "لوحة القيادة /اسئلة ", "Question": "لوحة القيادة /اسئلة ",
"add_Question": "لوحة القيادة /إضافة اسئلة ", "add_Question": "لوحة القيادة /إضافة اسئلة ",
"edit_Question": "لوحة القيادة /تعديل اسئلة ", "edit_Question": "لوحة القيادة /تعديل اسئلة ",
"grade": "الدرجات", "grade": "الصفوف",
"report": "تقرير", "report": "تقرير",
"user": "مستخدم", "user": "مستخدم",
"reseller":" لوحة القيادة / البائعين" "reseller":" لوحة القيادة / البائعين"
@ -761,31 +761,31 @@
"reseller":"البائعين" "reseller":"البائعين"
}, },
"alphabet": { "alphabet": {
"A": "أ", "A": "A",
"B": "ب", "B": "B",
"C": "ت", "C": "C",
"D": "ث", "D": "D",
"E": "ج", "E": "E",
"F": "ح", "F": "F",
"G": "خ", "G": "G",
"H": "د", "H": "H",
"I": "ذ", "I": "I",
"J": "ر", "J": "J",
"K": "ز", "K": "K",
"L": "س", "L": "L",
"M": "ش", "M": "M",
"N": "ص", "N": "N",
"O": "ض", "O": "O",
"P": "ط", "P": "P",
"Q": "ظ", "Q": "Q",
"R": "ع", "R": "R",
"S": "غ", "S": "S",
"T": "ف", "T": "T",
"U": "ق", "U": "U",
"V": "ك", "V": "V",
"W": "ل", "W": "W",
"X": "م", "X": "X",
"Y": "ن", "Y": "Y",
"Z": "ه" "Z": "Z"
} }
} }

View File

@ -15,7 +15,6 @@ const useAuthState = create<AuthStore>((set) => {
const storedToken = localStorage.getItem(TOKEN_KEY); const storedToken = localStorage.getItem(TOKEN_KEY);
const storedAbilities = localStorage.getItem(ABILITIES_KEY); const storedAbilities = localStorage.getItem(ABILITIES_KEY);
const storedType = localStorage.getItem(TYPE_KEY); const storedType = localStorage.getItem(TYPE_KEY);
console.log(storedAbilities);
return { return {
isAuthenticated: !!storedToken, isAuthenticated: !!storedToken,