add CombinationKey
This commit is contained in:
parent
9509943a60
commit
513ba6cb6a
|
|
@ -8,7 +8,6 @@ import {
|
|||
} from "@ant-design/icons";
|
||||
import React from "react";
|
||||
import { Image, Space } from "antd";
|
||||
import { ImageBaseURL } from "../../api/config";
|
||||
import useImageError from "../../Hooks/useImageError";
|
||||
import { ErrorImage } from "../../Layout/app/Const";
|
||||
|
||||
|
|
|
|||
|
|
@ -13,9 +13,6 @@ const ImageBoxField = ({ name }: any) => {
|
|||
const value = getNestedValue(formik.values, name);
|
||||
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
console.log(formik.values);
|
||||
|
||||
console.log(value, name);
|
||||
|
||||
useEffect(() => {
|
||||
if (value instanceof File) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { Button, Image, Upload, UploadFile } from "antd";
|
||||
import useFormField from "../../Hooks/useFormField";
|
||||
import { UploadOutlined } from "@ant-design/icons";
|
||||
import { ImageBaseURL } from "../../api/config";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FaRegFilePdf } from "react-icons/fa";
|
||||
import { useState } from "react";
|
||||
|
|
@ -17,7 +16,7 @@ const PdfUploader = ({
|
|||
}: any) => {
|
||||
const { formik, t, isError } = useFormField(name, props);
|
||||
let FormikName = formik.values[name];
|
||||
const imageUrl = formik.values[name] ? ImageBaseURL + FormikName : "";
|
||||
const imageUrl = formik.values[name] ? FormikName : "";
|
||||
const [Imageurl, setImageurl] = useState(null);
|
||||
|
||||
const FilehandleChange = (value: any) => {
|
||||
|
|
|
|||
30
src/Components/FilterField/components/useFilter.tsx
Normal file
30
src/Components/FilterField/components/useFilter.tsx
Normal 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
|
||||
5
src/Components/FilterField/enums/Filter.ts
Normal file
5
src/Components/FilterField/enums/Filter.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export enum FilterEnum {
|
||||
FILTER="FILTER"
|
||||
|
||||
|
||||
}
|
||||
22
src/Components/FilterField/states/FilterState.ts
Normal file
22
src/Components/FilterField/states/FilterState.ts
Normal 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 }));
|
||||
}
|
||||
},
|
||||
}));
|
||||
32
src/Hooks/useKeyCombination.tsx
Normal file
32
src/Hooks/useKeyCombination.tsx
Normal 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;
|
||||
|
|
@ -34,6 +34,7 @@ import { useGetAllLesson } from "../../../api/lesson";
|
|||
import { useGetAllSubject } from "../../../api/subject";
|
||||
import { useGetAllGrade } from "../../../api/grade";
|
||||
import { useGetAllCurriculum } from "../../../api/curriculum";
|
||||
import useKeyCombination from "../../../Hooks/useKeyCombination";
|
||||
|
||||
const AddPage: React.FC = () => {
|
||||
const { isSuccess: isSuccessAsync, mutateAsync } = useAddQuestionAsync();
|
||||
|
|
@ -206,6 +207,9 @@ const AddPage: React.FC = () => {
|
|||
// }
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
if (isBseQuestion) {
|
||||
return (
|
||||
<div className="exercise_add">
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
|
|||
return (
|
||||
<>
|
||||
<div className="ChoiceFields">
|
||||
|
||||
<TextField
|
||||
className="textarea_exercise"
|
||||
placeholder={"choice"}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import { Choice } from "../../../../../types/Item";
|
|||
import ChoiceFields from "./ChoiceFields";
|
||||
import { useFormikContext } from "formik";
|
||||
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 formik = useFormikContext<any>();
|
||||
|
|
@ -55,6 +58,9 @@ const Choices = () => {
|
|||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<div className="HolderQuestion">
|
||||
<HolderOutlined/>
|
||||
</div>
|
||||
<ChoiceFields index={index} data={item} />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -67,6 +67,10 @@ const Form = () => {
|
|||
};
|
||||
const [t] = useTranslation();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Row className="w-100">
|
||||
<div className="exercise_form">
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@ const ChoiceFields = ({
|
|||
].answers.filter((_: any, i: any) => i !== index);
|
||||
formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="ChoiceFields">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import ChoiceFields from "./ChoiceFields";
|
|||
import { Choice } from "../../../../../../types/Item";
|
||||
import { useFormikContext } from "formik";
|
||||
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
|
||||
import { HolderOutlined } from "@ant-design/icons";
|
||||
|
||||
const Choices = ({ parent_index }: { parent_index: number }) => {
|
||||
const formik = useFormikContext<any>();
|
||||
|
|
@ -67,6 +68,9 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
|
|||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<div className="HolderQuestion">
|
||||
<HolderOutlined/>
|
||||
</div>
|
||||
<ChoiceFields
|
||||
key={index}
|
||||
parent_index={parent_index}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
|
|||
import Choices from "./ChoiceField/Choices";
|
||||
import ImageBoxField from "../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
|
||||
import MaltySelectTag from "./Tags/MaltySelectTag";
|
||||
import useKeyCombination from "../../../../../Hooks/useKeyCombination";
|
||||
import { CombinationKeyEnum } from "../../../../../enums/CombinationKeyEnum";
|
||||
|
||||
const Form = () => {
|
||||
const formik = useFormikContext<any>();
|
||||
|
|
@ -36,8 +38,7 @@ const Form = () => {
|
|||
console.log(parent_index);
|
||||
|
||||
formik.setFieldValue(`Questions.[${parent_index}].answers`, [
|
||||
...((formik?.values as any)?.Questions?.[parent_index]
|
||||
.answers as Choice[]),
|
||||
...((formik?.values as any)?.Questions?.[parent_index]?.answers as Choice[]),
|
||||
|
||||
{
|
||||
answer: null,
|
||||
|
|
@ -69,7 +70,21 @@ const Form = () => {
|
|||
};
|
||||
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 (
|
||||
|
||||
<Row className="w-100 exercise_form_container">
|
||||
<div className="exercise_form">
|
||||
<ValidationField
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import { useEffect } from "react";
|
|||
import Choices from "./Field/Choices";
|
||||
import ImageBoxField from "../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
|
||||
import SelectTag from "../../../../Components/CustomFields/SelectTag";
|
||||
import useKeyCombination from "../../../../Hooks/useKeyCombination";
|
||||
import { CombinationKeyEnum } from "../../../../enums/CombinationKeyEnum";
|
||||
|
||||
const Form = () => {
|
||||
const [t] = useTranslation();
|
||||
|
|
@ -42,7 +44,13 @@ const Form = () => {
|
|||
]);
|
||||
};
|
||||
|
||||
console.log(formik?.values);
|
||||
|
||||
useKeyCombination({ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.CHOICE }, () => {
|
||||
|
||||
handleAddChoice()
|
||||
});
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Row className="w-100 exercise_form_container">
|
||||
|
|
|
|||
|
|
@ -2,12 +2,21 @@ import React from "react";
|
|||
import { useTranslation } from "react-i18next";
|
||||
import { ABILITIES_ENUM } from "../../enums/abilities";
|
||||
import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
import useFilter from "../../Components/FilterField/components/useFilter";
|
||||
|
||||
const Dummy = () => {
|
||||
const [t] = useTranslation();
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -204,4 +204,9 @@
|
|||
.add_new_button{
|
||||
padding-inline: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.HolderQuestion{
|
||||
transform: translateY(25px);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
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";
|
||||
6
src/enums/CombinationKeyEnum.ts
Normal file
6
src/enums/CombinationKeyEnum.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export enum CombinationKeyEnum {
|
||||
|
||||
QUESTION = "KeyK",
|
||||
CHOICE = "KeyJ"
|
||||
|
||||
}
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
"Pass": "نجاح",
|
||||
"users": "المستخدمين",
|
||||
"branchAdmin": "مسؤول الفروع",
|
||||
"grade": "الدرجات",
|
||||
"grade": "الصفوف",
|
||||
"homeworkAttachment": "مرفق الواجب المنزلي",
|
||||
"lateArrival": "وصول متأخر",
|
||||
"noteAttachment": "مرفق الملاحظة",
|
||||
|
|
@ -685,7 +685,7 @@
|
|||
"tags": "كلمات مفتاحية",
|
||||
"main_menu": "القائمة الرئيسية",
|
||||
"setting": "الإعدادات",
|
||||
"grade": "الدرجات",
|
||||
"grade": "الصفوف",
|
||||
"curriculum": "مقرر",
|
||||
"package": "حزمة",
|
||||
"subjects": "مواد",
|
||||
|
|
@ -751,7 +751,7 @@
|
|||
"Question": "لوحة القيادة /اسئلة ",
|
||||
"add_Question": "لوحة القيادة /إضافة اسئلة ",
|
||||
"edit_Question": "لوحة القيادة /تعديل اسئلة ",
|
||||
"grade": "الدرجات",
|
||||
"grade": "الصفوف",
|
||||
"report": "تقرير",
|
||||
"user": "مستخدم",
|
||||
"reseller":" لوحة القيادة / البائعين"
|
||||
|
|
@ -761,31 +761,31 @@
|
|||
"reseller":"البائعين"
|
||||
},
|
||||
"alphabet": {
|
||||
"A": "أ",
|
||||
"B": "ب",
|
||||
"C": "ت",
|
||||
"D": "ث",
|
||||
"E": "ج",
|
||||
"F": "ح",
|
||||
"G": "خ",
|
||||
"H": "د",
|
||||
"I": "ذ",
|
||||
"J": "ر",
|
||||
"K": "ز",
|
||||
"L": "س",
|
||||
"M": "ش",
|
||||
"N": "ص",
|
||||
"O": "ض",
|
||||
"P": "ط",
|
||||
"Q": "ظ",
|
||||
"R": "ع",
|
||||
"S": "غ",
|
||||
"T": "ف",
|
||||
"U": "ق",
|
||||
"V": "ك",
|
||||
"W": "ل",
|
||||
"X": "م",
|
||||
"Y": "ن",
|
||||
"Z": "ه"
|
||||
"A": "A",
|
||||
"B": "B",
|
||||
"C": "C",
|
||||
"D": "D",
|
||||
"E": "E",
|
||||
"F": "F",
|
||||
"G": "G",
|
||||
"H": "H",
|
||||
"I": "I",
|
||||
"J": "J",
|
||||
"K": "K",
|
||||
"L": "L",
|
||||
"M": "M",
|
||||
"N": "N",
|
||||
"O": "O",
|
||||
"P": "P",
|
||||
"Q": "Q",
|
||||
"R": "R",
|
||||
"S": "S",
|
||||
"T": "T",
|
||||
"U": "U",
|
||||
"V": "V",
|
||||
"W": "W",
|
||||
"X": "X",
|
||||
"Y": "Y",
|
||||
"Z": "Z"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ const useAuthState = create<AuthStore>((set) => {
|
|||
const storedToken = localStorage.getItem(TOKEN_KEY);
|
||||
const storedAbilities = localStorage.getItem(ABILITIES_KEY);
|
||||
const storedType = localStorage.getItem(TYPE_KEY);
|
||||
console.log(storedAbilities);
|
||||
|
||||
return {
|
||||
isAuthenticated: !!storedToken,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user