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

View File

@ -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) {

View 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) => {

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 { 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">

View File

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

View File

@ -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>
)}

View File

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

View File

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

View File

@ -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}

View File

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

View File

@ -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">

View File

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

View File

@ -205,3 +205,8 @@
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 = "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";

View File

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

View File

@ -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"
}
}

View File

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