format
This commit is contained in:
karimaldeen
parent
aece39ae8f
commit
a0000066ab
8860
pnpm-lock.yaml
8860
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -15,7 +15,6 @@ const ColumnsImage = ({ src }: any) => {
|
|||
|
||||
const handleError = useImageError;
|
||||
|
||||
|
||||
return (
|
||||
<Image
|
||||
width={45}
|
||||
|
|
|
|||
|
|
@ -4,23 +4,21 @@ import { Button } from "antd";
|
|||
import React, { useContext } from "react";
|
||||
|
||||
export const DragHandle: React.FC = () => {
|
||||
|
||||
interface RowContextProps {
|
||||
interface RowContextProps {
|
||||
setActivatorNodeRef?: (element: HTMLElement | null) => void;
|
||||
listeners?: SyntheticListenerMap;
|
||||
}
|
||||
|
||||
const RowContext = React.createContext<RowContextProps>({});
|
||||
const { setActivatorNodeRef, listeners } = useContext(RowContext);
|
||||
return (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<HolderOutlined />}
|
||||
style={{ cursor: 'move' }}
|
||||
ref={setActivatorNodeRef}
|
||||
{...listeners}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const RowContext = React.createContext<RowContextProps>({});
|
||||
const { setActivatorNodeRef, listeners } = useContext(RowContext);
|
||||
return (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<HolderOutlined />}
|
||||
style={{ cursor: "move" }}
|
||||
ref={setActivatorNodeRef}
|
||||
{...listeners}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import React, { useContext, useMemo } from 'react';
|
||||
import { HolderOutlined } from '@ant-design/icons';
|
||||
import type { DragEndEvent } from '@dnd-kit/core';
|
||||
import { DndContext } from '@dnd-kit/core';
|
||||
import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
|
||||
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
|
||||
import React, { useContext, useMemo } from "react";
|
||||
import { HolderOutlined } from "@ant-design/icons";
|
||||
import type { DragEndEvent } from "@dnd-kit/core";
|
||||
import { DndContext } from "@dnd-kit/core";
|
||||
import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
|
||||
import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { Button, Table } from 'antd';
|
||||
import type { TableColumnsType } from 'antd';
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { Button, Table } from "antd";
|
||||
import type { TableColumnsType } from "antd";
|
||||
|
||||
interface DataType {
|
||||
key: string;
|
||||
|
|
@ -36,7 +36,7 @@ const DragHandle: React.FC = () => {
|
|||
type="text"
|
||||
size="small"
|
||||
icon={<HolderOutlined />}
|
||||
style={{ cursor: 'move' }}
|
||||
style={{ cursor: "move" }}
|
||||
ref={setActivatorNodeRef}
|
||||
{...listeners}
|
||||
/>
|
||||
|
|
@ -44,20 +44,20 @@ const DragHandle: React.FC = () => {
|
|||
};
|
||||
|
||||
const columns: TableColumnsType<DataType> = [
|
||||
{ key: 'sort', align: 'center', width: 80, render: () => <DragHandle /> },
|
||||
{ title: 'Name', dataIndex: 'name' },
|
||||
{ title: 'Age', dataIndex: 'age' },
|
||||
{ title: 'Address', dataIndex: 'address' },
|
||||
{ key: "sort", align: "center", width: 80, render: () => <DragHandle /> },
|
||||
{ title: "Name", dataIndex: "name" },
|
||||
{ title: "Age", dataIndex: "age" },
|
||||
{ title: "Address", dataIndex: "address" },
|
||||
];
|
||||
|
||||
const initialData: DataType[] = [
|
||||
{ key: '1', order: 1, name: '1', age: 32, address: 'Long text Long' },
|
||||
{ key: '4', order: 4, name: '4', age: 42, address: 'London No. 1 Lake Park' },
|
||||
{ key: '3', order: 3, name: '3', age: 32, address: 'Sidney No. 1 Lake Park' },
|
||||
{ key: "1", order: 1, name: "1", age: 32, address: "Long text Long" },
|
||||
{ key: "4", order: 4, name: "4", age: 42, address: "London No. 1 Lake Park" },
|
||||
{ key: "3", order: 3, name: "3", age: 32, address: "Sidney No. 1 Lake Park" },
|
||||
].sort((a, b) => a.order - b.order);
|
||||
|
||||
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
||||
'data-row-key': string;
|
||||
"data-row-key": string;
|
||||
}
|
||||
|
||||
const Row: React.FC<RowProps> = (props) => {
|
||||
|
|
@ -69,13 +69,13 @@ const Row: React.FC<RowProps> = (props) => {
|
|||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: props['data-row-key'] });
|
||||
} = useSortable({ id: props["data-row-key"] });
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
...props.style,
|
||||
transform: CSS.Translate.toString(transform),
|
||||
transition,
|
||||
...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
|
||||
...(isDragging ? { position: "relative", zIndex: 9999 } : {}),
|
||||
};
|
||||
|
||||
const contextValue = useMemo<RowContextProps>(
|
||||
|
|
@ -99,8 +99,12 @@ const DrapableTable: React.FC = () => {
|
|||
console.log("Old Data:", dataSource);
|
||||
|
||||
setDataSource((prevState) => {
|
||||
const activeIndex = prevState.findIndex((record) => record.key === active?.id);
|
||||
const overIndex = prevState.findIndex((record) => record.key === over?.id);
|
||||
const activeIndex = prevState.findIndex(
|
||||
(record) => record.key === active?.id,
|
||||
);
|
||||
const overIndex = prevState.findIndex(
|
||||
(record) => record.key === over?.id,
|
||||
);
|
||||
const newState = arrayMove(prevState, activeIndex, overIndex);
|
||||
|
||||
// Log the new state after reordering
|
||||
|
|
@ -113,7 +117,10 @@ const DrapableTable: React.FC = () => {
|
|||
|
||||
return (
|
||||
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
|
||||
<SortableContext items={dataSource.map((i) => i.key)} strategy={verticalListSortingStrategy}>
|
||||
<SortableContext
|
||||
items={dataSource.map((i) => i.key)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<Table
|
||||
rowKey="key"
|
||||
components={{ body: { row: Row } }}
|
||||
|
|
@ -125,4 +132,4 @@ const DrapableTable: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default DrapableTable;
|
||||
export default DrapableTable;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
import React from "react";
|
||||
import useFormField from "../../../Hooks/useFormField";
|
||||
import { Checkbox, Form } from "antd";
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import React, { useContext, useMemo } from 'react';
|
||||
import { HolderOutlined } from '@ant-design/icons';
|
||||
import type { DragEndEvent } from '@dnd-kit/core';
|
||||
import { DndContext } from '@dnd-kit/core';
|
||||
import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
|
||||
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
|
||||
import React, { useContext, useMemo } from "react";
|
||||
import { HolderOutlined } from "@ant-design/icons";
|
||||
import type { DragEndEvent } from "@dnd-kit/core";
|
||||
import { DndContext } from "@dnd-kit/core";
|
||||
import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
|
||||
import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { Button, Table } from 'antd';
|
||||
import type { TableColumnsType } from 'antd';
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { Button, Table } from "antd";
|
||||
import type { TableColumnsType } from "antd";
|
||||
|
||||
interface DataType {
|
||||
key: string;
|
||||
|
|
@ -36,7 +36,7 @@ const DragHandle: React.FC = () => {
|
|||
type="text"
|
||||
size="small"
|
||||
icon={<HolderOutlined />}
|
||||
style={{ cursor: 'move' }}
|
||||
style={{ cursor: "move" }}
|
||||
ref={setActivatorNodeRef}
|
||||
{...listeners}
|
||||
/>
|
||||
|
|
@ -44,20 +44,20 @@ const DragHandle: React.FC = () => {
|
|||
};
|
||||
|
||||
const columns: TableColumnsType<DataType> = [
|
||||
{ key: 'sort', align: 'center', width: 80, render: () => <DragHandle /> },
|
||||
{ title: 'Name', dataIndex: 'name' },
|
||||
{ title: 'Age', dataIndex: 'age' },
|
||||
{ title: 'Address', dataIndex: 'address' },
|
||||
{ key: "sort", align: "center", width: 80, render: () => <DragHandle /> },
|
||||
{ title: "Name", dataIndex: "name" },
|
||||
{ title: "Age", dataIndex: "age" },
|
||||
{ title: "Address", dataIndex: "address" },
|
||||
];
|
||||
|
||||
const initialData: DataType[] = [
|
||||
{ key: '1', order: 1, name: '1', age: 32, address: 'Long text Long' },
|
||||
{ key: '4', order: 4, name: '4', age: 42, address: 'London No. 1 Lake Park' },
|
||||
{ key: '3', order: 3, name: '3', age: 32, address: 'Sidney No. 1 Lake Park' },
|
||||
{ key: "1", order: 1, name: "1", age: 32, address: "Long text Long" },
|
||||
{ key: "4", order: 4, name: "4", age: 42, address: "London No. 1 Lake Park" },
|
||||
{ key: "3", order: 3, name: "3", age: 32, address: "Sidney No. 1 Lake Park" },
|
||||
].sort((a, b) => a.order - b.order);
|
||||
|
||||
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
||||
'data-row-key': string;
|
||||
"data-row-key": string;
|
||||
}
|
||||
|
||||
const Row: React.FC<RowProps> = (props) => {
|
||||
|
|
@ -69,13 +69,13 @@ const Row: React.FC<RowProps> = (props) => {
|
|||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: props['data-row-key'] });
|
||||
} = useSortable({ id: props["data-row-key"] });
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
...props.style,
|
||||
transform: CSS.Translate.toString(transform),
|
||||
transition,
|
||||
...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
|
||||
...(isDragging ? { position: "relative", zIndex: 9999 } : {}),
|
||||
};
|
||||
|
||||
const contextValue = useMemo<RowContextProps>(
|
||||
|
|
@ -99,8 +99,12 @@ const App: React.FC = () => {
|
|||
console.log("Old Data:", dataSource);
|
||||
|
||||
setDataSource((prevState) => {
|
||||
const activeIndex = prevState.findIndex((record) => record.key === active?.id);
|
||||
const overIndex = prevState.findIndex((record) => record.key === over?.id);
|
||||
const activeIndex = prevState.findIndex(
|
||||
(record) => record.key === active?.id,
|
||||
);
|
||||
const overIndex = prevState.findIndex(
|
||||
(record) => record.key === over?.id,
|
||||
);
|
||||
const newState = arrayMove(prevState, activeIndex, overIndex);
|
||||
|
||||
// Log the new state after reordering
|
||||
|
|
@ -113,7 +117,10 @@ const App: React.FC = () => {
|
|||
|
||||
return (
|
||||
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
|
||||
<SortableContext items={dataSource.map((i) => i.key)} strategy={verticalListSortingStrategy}>
|
||||
<SortableContext
|
||||
items={dataSource.map((i) => i.key)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<Table
|
||||
rowKey="key"
|
||||
components={{ body: { row: Row } }}
|
||||
|
|
@ -125,4 +132,4 @@ const App: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -27,10 +27,10 @@ const NavBar = () => {
|
|||
return (
|
||||
<div className="NavBar">
|
||||
<Suspense fallback={<SpinContainer />}>
|
||||
<span className="navbar_link" onClick={handelNavigate}>
|
||||
<MdOutlineArrowForwardIos /> {PageTitle}
|
||||
</span>
|
||||
<NavBarRightSide />
|
||||
<span className="navbar_link" onClick={handelNavigate}>
|
||||
<MdOutlineArrowForwardIos /> {PageTitle}
|
||||
</span>
|
||||
<NavBarRightSide />
|
||||
<ChangePasswordModel />
|
||||
</Suspense>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const EditModel: React.FC = () => {
|
|||
getInitialValues={getInitialValues(objectToEdit)}
|
||||
getValidationSchema={getValidationSchema}
|
||||
isAddModal={false}
|
||||
width="40vw"
|
||||
width="40vw"
|
||||
>
|
||||
<ModelForm />
|
||||
</LayoutModel>
|
||||
|
|
|
|||
|
|
@ -9,16 +9,18 @@ import { ModalEnum } from "../../enums/Model";
|
|||
import { useDeleteCurriculum } from "../../api/curriculum";
|
||||
import { useGetAllGrade } from "../../api/grade";
|
||||
|
||||
const Table = lazy(() => import('./Table'));
|
||||
const AddModalForm = lazy(() => import('./Model/AddModel'));
|
||||
const EditModalForm = lazy(() => import('./Model/EditModel'));
|
||||
const DeleteModalForm = lazy(() => import('../../Layout/Dashboard/DeleteModels'));
|
||||
const Table = lazy(() => import("./Table"));
|
||||
const AddModalForm = lazy(() => import("./Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("./Model/EditModel"));
|
||||
const DeleteModalForm = lazy(
|
||||
() => import("../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
|
||||
const TableHeader = () => {
|
||||
const [t] = useTranslation();
|
||||
const deleteMutation = useDeleteCurriculum();
|
||||
|
||||
const { subject_id,grade_id} = useParams<ParamsEnum>();
|
||||
const { subject_id, grade_id } = useParams<ParamsEnum>();
|
||||
|
||||
const { data: Subject } = useGetAllSubject({
|
||||
show: subject_id,
|
||||
|
|
@ -27,28 +29,35 @@ const TableHeader = () => {
|
|||
show: grade_id,
|
||||
});
|
||||
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
|
||||
const SubjectName = Subject?.data?.name ?? "";
|
||||
|
||||
useSetPageTitle( t(`page_header.grade`)+ "/"+ gradeName +"/"+t(`PageTitle.subject`)+"/"+SubjectName+"/"+t("PageTitle.curriculum"));
|
||||
|
||||
useSetPageTitle(
|
||||
t(`page_header.grade`) +
|
||||
"/" +
|
||||
gradeName +
|
||||
"/" +
|
||||
t(`PageTitle.subject`) +
|
||||
"/" +
|
||||
SubjectName +
|
||||
"/" +
|
||||
t("PageTitle.curriculum"),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="TableWithHeader">
|
||||
<Suspense fallback={<Spin />}>
|
||||
<header>
|
||||
<h6>
|
||||
{t("models.curriculum")}
|
||||
</h6>
|
||||
<h6>{t("models.curriculum")}</h6>
|
||||
</header>
|
||||
<Table />
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
<DeleteModalForm
|
||||
<EditModalForm />
|
||||
<DeleteModalForm
|
||||
deleteMutation={deleteMutation}
|
||||
ModelEnum={ModalEnum?.CURRICULUM_DELETE}
|
||||
/>
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@ import { ParamsEnum } from "../../enums/params";
|
|||
|
||||
const App: React.FC = () => {
|
||||
const { subject_id } = useParams<ParamsEnum>();
|
||||
const response = useGetAllCurriculum({ subject_id: subject_id, pagination: true });
|
||||
const response = useGetAllCurriculum({
|
||||
subject_id: subject_id,
|
||||
pagination: true,
|
||||
});
|
||||
console.log(response?.data?.data, "response?.data");
|
||||
|
||||
return <DataTable response={response} useColumns={useColumns} />;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { TableColumnsType } from "antd";
|
||||
import { TableColumnsType } from "antd";
|
||||
import { Curriculum } from "../../types/Curriculum";
|
||||
import { FaPlus } from "react-icons/fa";
|
||||
import useModalHandler from "../../utils/useModalHandler";
|
||||
|
|
@ -52,7 +52,6 @@ export const useColumns = () => {
|
|||
render: (text, record) => record?.name,
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: canAddCurriculum ? (
|
||||
<button
|
||||
|
|
@ -64,7 +63,7 @@ export const useColumns = () => {
|
|||
) : (
|
||||
""
|
||||
),
|
||||
|
||||
|
||||
key: "actions",
|
||||
align: "end",
|
||||
width: "25vw",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import * as Yup from "yup";
|
||||
import { Grade, GradeInitialValues } from "../../../types/Grade";
|
||||
|
||||
export const getInitialValues = (objectToEdit: Partial<Grade>): GradeInitialValues => {
|
||||
export const getInitialValues = (
|
||||
objectToEdit: Partial<Grade>,
|
||||
): GradeInitialValues => {
|
||||
return {
|
||||
id: objectToEdit?.id,
|
||||
name: objectToEdit?.name ?? "",
|
||||
|
|
@ -13,6 +15,5 @@ export const getValidationSchema = () => {
|
|||
// validate input
|
||||
return Yup.object().shape({
|
||||
name: Yup.string().required("validation.required"),
|
||||
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@ import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
|||
import { ModalEnum } from "../../enums/Model";
|
||||
import { useDeleteGrade } from "../../api/grade";
|
||||
|
||||
const Table = lazy(() => import('./Table'));
|
||||
const AddModalForm = lazy(() => import('./Model/AddModel'));
|
||||
const EditModalForm = lazy(() => import('./Model/EditModel'));
|
||||
const DeleteModalForm = lazy(() => import('../../Layout/Dashboard/DeleteModels'));
|
||||
const Table = lazy(() => import("./Table"));
|
||||
const AddModalForm = lazy(() => import("./Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("./Model/EditModel"));
|
||||
const DeleteModalForm = lazy(
|
||||
() => import("../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
|
||||
const TableHeader = () => {
|
||||
const [t] = useTranslation();
|
||||
|
|
@ -20,17 +22,15 @@ const TableHeader = () => {
|
|||
<div className="TableWithHeader">
|
||||
<Suspense fallback={<Spin />}>
|
||||
<header>
|
||||
<h6>
|
||||
{t("models.grade")}
|
||||
</h6>
|
||||
<h6>{t("models.grade")}</h6>
|
||||
</header>
|
||||
<Table />
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
<DeleteModalForm
|
||||
<EditModalForm />
|
||||
<DeleteModalForm
|
||||
deleteMutation={deleteMutation}
|
||||
ModelEnum={ModalEnum?.GRADE_DELETE}
|
||||
/>
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { TableColumnsType } from "antd";
|
||||
import { TableColumnsType } from "antd";
|
||||
import { Grade } from "../../types/Grade";
|
||||
import { FaPlus } from "react-icons/fa";
|
||||
import useModalHandler from "../../utils/useModalHandler";
|
||||
|
|
@ -57,7 +57,7 @@ export const useColumns = () => {
|
|||
dataIndex: "image",
|
||||
key: "image",
|
||||
align: "center",
|
||||
render: (_text: any,record:Grade) => {
|
||||
render: (_text: any, record: Grade) => {
|
||||
let str = record?.icon;
|
||||
return <ColumnsImage src={str} />;
|
||||
},
|
||||
|
|
@ -73,7 +73,7 @@ export const useColumns = () => {
|
|||
) : (
|
||||
""
|
||||
),
|
||||
|
||||
|
||||
key: "actions",
|
||||
align: "end",
|
||||
width: "25vw",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ import { useDeleteTag } from "../../api/tags";
|
|||
const Table = lazy(() => import("./Table"));
|
||||
const AddModalForm = lazy(() => import("./Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("./Model/EditModel"));
|
||||
const DeleteModalForm = lazy(() => import("../../Layout/Dashboard/DeleteModels"));
|
||||
const DeleteModalForm = lazy(
|
||||
() => import("../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
const SearchField = lazy(
|
||||
() => import("../../Components/DataTable/SearchField"),
|
||||
);
|
||||
|
|
@ -18,9 +20,7 @@ const SearchField = lazy(
|
|||
const TableHeader = () => {
|
||||
const { handel_open_model } = useModalHandler();
|
||||
const [t] = useTranslation();
|
||||
useSetPageTitle(
|
||||
t(`page_header.tags`),
|
||||
);
|
||||
useSetPageTitle(t(`page_header.tags`));
|
||||
const deleteMutation = useDeleteTag();
|
||||
|
||||
return (
|
||||
|
|
@ -48,7 +48,7 @@ const TableHeader = () => {
|
|||
<DeleteModalForm
|
||||
deleteMutation={deleteMutation}
|
||||
ModelEnum={ModalEnum?.TAGS_DELETE}
|
||||
/>
|
||||
/>
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
</Suspense>
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ export const useColumns = () => {
|
|||
const { setIsOpen } = useModalState((state) => state);
|
||||
|
||||
const { setObjectToEdit } = useObjectToEdit((state) => state);
|
||||
const handelDelete = (record:any) => {
|
||||
const handelDelete = (record: any) => {
|
||||
setObjectToEdit(record);
|
||||
setIsOpen(ModalEnum?.TAGS_DELETE);
|
||||
};
|
||||
const handleEdit = (record:any) => {
|
||||
const handleEdit = (record: any) => {
|
||||
setObjectToEdit(record);
|
||||
setIsOpen(ModalEnum?.TAGS_EDIT);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import React, { useContext, useEffect, useMemo } from 'react';
|
||||
import { HolderOutlined } from '@ant-design/icons';
|
||||
import type { DragEndEvent } from '@dnd-kit/core';
|
||||
import { DndContext } from '@dnd-kit/core';
|
||||
import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
|
||||
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
|
||||
import React, { useContext, useEffect, useMemo } from "react";
|
||||
import { HolderOutlined } from "@ant-design/icons";
|
||||
import type { DragEndEvent } from "@dnd-kit/core";
|
||||
import { DndContext } from "@dnd-kit/core";
|
||||
import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
|
||||
import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { Button, Table } from 'antd';
|
||||
import type { TableColumnsType } from 'antd';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { ParamsEnum } from '../../enums/params';
|
||||
import { useGetAllUnit } from '../../api/unit';
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { Button, Table } from "antd";
|
||||
import type { TableColumnsType } from "antd";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { ParamsEnum } from "../../enums/params";
|
||||
import { useGetAllUnit } from "../../api/unit";
|
||||
|
||||
interface DataType {
|
||||
id: string; // Unique identifier for each row
|
||||
|
|
@ -39,7 +39,7 @@ const DragHandle: React.FC = () => {
|
|||
type="text"
|
||||
size="small"
|
||||
icon={<HolderOutlined />}
|
||||
style={{ cursor: 'move' }}
|
||||
style={{ cursor: "move" }}
|
||||
ref={setActivatorNodeRef}
|
||||
{...listeners}
|
||||
/>
|
||||
|
|
@ -47,14 +47,14 @@ const DragHandle: React.FC = () => {
|
|||
};
|
||||
|
||||
const columns: TableColumnsType<DataType> = [
|
||||
{ key: 'sort', align: 'center', width: 80, render: () => <DragHandle /> },
|
||||
{ title: 'Name', dataIndex: 'name' },
|
||||
{ title: 'Age', dataIndex: 'age' },
|
||||
{ title: 'Address', dataIndex: 'address' },
|
||||
{ key: "sort", align: "center", width: 80, render: () => <DragHandle /> },
|
||||
{ title: "Name", dataIndex: "name" },
|
||||
{ title: "Age", dataIndex: "age" },
|
||||
{ title: "Address", dataIndex: "address" },
|
||||
];
|
||||
|
||||
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
||||
'data-row-key': string;
|
||||
"data-row-key": string;
|
||||
}
|
||||
|
||||
const Row: React.FC<RowProps> = (props) => {
|
||||
|
|
@ -66,13 +66,13 @@ const Row: React.FC<RowProps> = (props) => {
|
|||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: props['data-row-key'] });
|
||||
} = useSortable({ id: props["data-row-key"] });
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
...props.style,
|
||||
transform: CSS.Translate.toString(transform),
|
||||
transition,
|
||||
...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
|
||||
...(isDragging ? { position: "relative", zIndex: 9999 } : {}),
|
||||
};
|
||||
|
||||
const contextValue = useMemo<RowContextProps>(
|
||||
|
|
@ -92,29 +92,34 @@ const DrapableTable: React.FC = () => {
|
|||
const response = useGetAllUnit({ subject_id: subject_id, pagination: false });
|
||||
|
||||
// Assuming the response contains a unique id for each item
|
||||
const data = response?.data?.data?.map((item: any, index: number) => ({
|
||||
id: item.id, // Ensure this is a unique identifier
|
||||
order: index + 1, // Assign order based on index
|
||||
name: item.name,
|
||||
age: item.age,
|
||||
address: item.address,
|
||||
})) ?? [];
|
||||
const data =
|
||||
response?.data?.data?.map((item: any, index: number) => ({
|
||||
id: item.id, // Ensure this is a unique identifier
|
||||
order: index + 1, // Assign order based on index
|
||||
name: item.name,
|
||||
age: item.age,
|
||||
address: item.address,
|
||||
})) ?? [];
|
||||
|
||||
const [dataSource, setDataSource] = React.useState<DataType[]>(data);
|
||||
console.log(dataSource,"dataSource");
|
||||
|
||||
console.log(dataSource, "dataSource");
|
||||
|
||||
useEffect(() => {
|
||||
// Update dataSource when the fetched data changes
|
||||
const sortedData = data.sort((a:any, b:any) => a.order - b.order);
|
||||
const sortedData = data.sort((a: any, b: any) => a.order - b.order);
|
||||
setDataSource(sortedData);
|
||||
}, [response?.data?.data]);
|
||||
|
||||
const onDragEnd = ({ active, over }: DragEndEvent) => {
|
||||
if (active.id !== over?.id) {
|
||||
setDataSource((prevState) => {
|
||||
const activeIndex = prevState.findIndex((record) => record.id === active.id);
|
||||
const overIndex = prevState.findIndex((record) => record.id === over.id);
|
||||
|
||||
const activeIndex = prevState.findIndex(
|
||||
(record) => record.id === active.id,
|
||||
);
|
||||
const overIndex = prevState.findIndex(
|
||||
(record) => record.id === over.id,
|
||||
);
|
||||
|
||||
// Move the items in the array
|
||||
const newState = arrayMove(prevState, activeIndex, overIndex);
|
||||
|
||||
|
|
@ -129,7 +134,10 @@ const DrapableTable: React.FC = () => {
|
|||
|
||||
return (
|
||||
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
|
||||
<SortableContext items={dataSource.map((i) => i.id)} strategy={verticalListSortingStrategy}>
|
||||
<SortableContext
|
||||
items={dataSource.map((i) => i.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<Table
|
||||
rowKey="id"
|
||||
components={{ body: { row: Row } }}
|
||||
|
|
@ -142,4 +150,4 @@ const DrapableTable: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default DrapableTable;
|
||||
export default DrapableTable;
|
||||
|
|
|
|||
|
|
@ -11,20 +11,18 @@ import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
|
|||
const AddModel: React.FC = () => {
|
||||
const { mutate, status } = useAddUnit();
|
||||
const { curriculum_id } = useParams();
|
||||
const {OldObjectToEdit} = useObjectToEdit()
|
||||
|
||||
const { OldObjectToEdit } = useObjectToEdit();
|
||||
|
||||
const handleSubmit = (values: any) => {
|
||||
let order = 0 ;
|
||||
if(OldObjectToEdit?.order || OldObjectToEdit?.order === 0){
|
||||
let order = 0;
|
||||
if (OldObjectToEdit?.order || OldObjectToEdit?.order === 0) {
|
||||
order = Number(OldObjectToEdit.order) + 1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
mutate({
|
||||
mutate({
|
||||
...values,
|
||||
curriculum_id: curriculum_id,
|
||||
order:order
|
||||
order: order,
|
||||
});
|
||||
};
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ const EditModel: React.FC = () => {
|
|||
const { mutate, status } = useUpdateUnit();
|
||||
const { objectToEdit } = useObjectToEdit((state) => state);
|
||||
|
||||
|
||||
const handleSubmit = (values: any) => {
|
||||
mutate({
|
||||
...values,
|
||||
|
|
|
|||
|
|
@ -4,9 +4,8 @@ import { TermEnum } from "../../../enums/Term";
|
|||
import { enumToArray } from "../../../utils/enumToArray";
|
||||
|
||||
const Form = () => {
|
||||
|
||||
const termsArray = enumToArray(TermEnum);
|
||||
console.log(termsArray,"termsArray");
|
||||
const termsArray = enumToArray(TermEnum);
|
||||
console.log(termsArray, "termsArray");
|
||||
|
||||
return (
|
||||
<Row className="w-100">
|
||||
|
|
@ -14,7 +13,13 @@ console.log(termsArray,"termsArray");
|
|||
<ValidationField name="name" placeholder="name" label="name" />
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField name="term" type="Select" placeholder="term" label="term" option={termsArray} />
|
||||
<ValidationField
|
||||
name="term"
|
||||
type="Select"
|
||||
placeholder="term"
|
||||
label="term"
|
||||
option={termsArray}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import * as Yup from "yup";
|
||||
import { UnitInitialValues,Unit } from "../../../types/Unit";
|
||||
import { UnitInitialValues, Unit } from "../../../types/Unit";
|
||||
|
||||
export const getInitialValues = (objectToEdit: Partial<Unit>): UnitInitialValues => {
|
||||
export const getInitialValues = (
|
||||
objectToEdit: Partial<Unit>,
|
||||
): UnitInitialValues => {
|
||||
return {
|
||||
id: objectToEdit?.id,
|
||||
name: objectToEdit?.name ?? null,
|
||||
|
|
|
|||
|
|
@ -11,16 +11,18 @@ import DrapableTable from "./DrapableTable";
|
|||
import { useGetAllGrade } from "../../api/grade";
|
||||
import { useGetAllCurriculum } from "../../api/curriculum";
|
||||
|
||||
const Table = lazy(() => import('./Table'));
|
||||
const AddModalForm = lazy(() => import('./Model/AddModel'));
|
||||
const EditModalForm = lazy(() => import('./Model/EditModel'));
|
||||
const DeleteModalForm = lazy(() => import('../../Layout/Dashboard/DeleteModels'));
|
||||
const Table = lazy(() => import("./Table"));
|
||||
const AddModalForm = lazy(() => import("./Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("./Model/EditModel"));
|
||||
const DeleteModalForm = lazy(
|
||||
() => import("../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
|
||||
const TableHeader = () => {
|
||||
const [t] = useTranslation();
|
||||
const deleteMutation = useDeleteUnit();
|
||||
|
||||
const { subject_id,grade_id,curriculum_id} = useParams<ParamsEnum>();
|
||||
const { subject_id, grade_id, curriculum_id } = useParams<ParamsEnum>();
|
||||
|
||||
const { data: Subject } = useGetAllSubject({
|
||||
show: subject_id,
|
||||
|
|
@ -32,30 +34,39 @@ const TableHeader = () => {
|
|||
const { data: Curriculum } = useGetAllCurriculum({
|
||||
show: curriculum_id,
|
||||
});
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
|
||||
const SubjectName = Subject?.data?.name ?? "";
|
||||
const CurriculumName = Curriculum?.data?.name ?? "";
|
||||
useSetPageTitle( t(`page_header.grade`)+ "/"+ gradeName +"/"+t(`PageTitle.subject`)+"/"+SubjectName+"/"+t("PageTitle.curriculum")+"/"+CurriculumName+"/"+t("PageTitle.unit"));
|
||||
|
||||
|
||||
useSetPageTitle(
|
||||
t(`page_header.grade`) +
|
||||
"/" +
|
||||
gradeName +
|
||||
"/" +
|
||||
t(`PageTitle.subject`) +
|
||||
"/" +
|
||||
SubjectName +
|
||||
"/" +
|
||||
t("PageTitle.curriculum") +
|
||||
"/" +
|
||||
CurriculumName +
|
||||
"/" +
|
||||
t("PageTitle.unit"),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="TableWithHeader">
|
||||
<Suspense fallback={<Spin />}>
|
||||
<header>
|
||||
<h6>
|
||||
{t("models.units")}
|
||||
</h6>
|
||||
|
||||
<h6>{t("models.units")}</h6>
|
||||
</header>
|
||||
<Table />
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
<DeleteModalForm
|
||||
<EditModalForm />
|
||||
<DeleteModalForm
|
||||
deleteMutation={deleteMutation}
|
||||
ModelEnum={ModalEnum?.UNIT_DELETE}
|
||||
/>
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,18 +9,19 @@ import { useObjectToEdit } from "../../zustand/ObjectToEditState";
|
|||
const App: React.FC = () => {
|
||||
const { subject_id } = useParams<ParamsEnum>();
|
||||
const response = useGetAllUnit({ subject_id: subject_id, pagination: true });
|
||||
const {setOldObjectToEdit} = useObjectToEdit()
|
||||
const { setOldObjectToEdit } = useObjectToEdit();
|
||||
console.log(response?.data?.data, "response?.data");
|
||||
const data = response?.data?.data;
|
||||
const lastElement = response?.data?.data && response?.data?.data[data?.length - 1]
|
||||
const lastElement =
|
||||
response?.data?.data && response?.data?.data[data?.length - 1];
|
||||
console.log(lastElement);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if(lastElement){
|
||||
setOldObjectToEdit(lastElement)
|
||||
if (lastElement) {
|
||||
setOldObjectToEdit(lastElement);
|
||||
}
|
||||
}, [lastElement])
|
||||
|
||||
}, [lastElement]);
|
||||
|
||||
return <DataTable response={response} useColumns={useColumns} />;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export const useColumns = () => {
|
|||
) : (
|
||||
""
|
||||
),
|
||||
|
||||
|
||||
key: "actions",
|
||||
align: "end",
|
||||
width: "25vw",
|
||||
|
|
|
|||
|
|
@ -12,11 +12,10 @@ import { useModalState } from "../../../zustand/Modal";
|
|||
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
|
||||
|
||||
const AddModel: React.FC = () => {
|
||||
|
||||
const { isOpen, setIsOpen } = useModalState((state) => state);
|
||||
const queryClient = useQueryClient();
|
||||
const { mutate, isSuccess, status } = useAddLesson();
|
||||
const {OldObjectToEdit} = useObjectToEdit()
|
||||
const { OldObjectToEdit } = useObjectToEdit();
|
||||
const { unit_id } = useParams<ParamsEnum>();
|
||||
useEffect(() => {
|
||||
if (isSuccess) {
|
||||
|
|
@ -26,11 +25,9 @@ const AddModel: React.FC = () => {
|
|||
}, [setIsOpen, isSuccess, queryClient]);
|
||||
|
||||
const handleSubmit = (values: any) => {
|
||||
|
||||
let order = 0 ;
|
||||
if(OldObjectToEdit?.order || OldObjectToEdit?.order === 0){
|
||||
let order = 0;
|
||||
if (OldObjectToEdit?.order || OldObjectToEdit?.order === 0) {
|
||||
order = Number(OldObjectToEdit.order) + 1;
|
||||
|
||||
}
|
||||
|
||||
mutate({ ...values, unit_id: unit_id });
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import ValidationField from "../../../Components/ValidationField/ValidationField
|
|||
const Form = () => {
|
||||
return (
|
||||
<Row className="w-100">
|
||||
<ValidationField name="name" label="name" />
|
||||
<ValidationField name="name" label="name" />
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,19 +11,21 @@ import { useGetAllGrade } from "../../api/grade";
|
|||
import { useGetAllCurriculum } from "../../api/curriculum";
|
||||
import { useGetAllSubject } from "../../api/subject";
|
||||
|
||||
const Table = lazy(() => import('./Table'));
|
||||
const AddModalForm = lazy(() => import('./Model/AddModel'));
|
||||
const EditModalForm = lazy(() => import('./Model/EditModel'));
|
||||
const DeleteModelsForm = lazy(() => import('../../Layout/Dashboard/DeleteModels'));
|
||||
const Table = lazy(() => import("./Table"));
|
||||
const AddModalForm = lazy(() => import("./Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("./Model/EditModel"));
|
||||
const DeleteModelsForm = lazy(
|
||||
() => import("../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
|
||||
const TableHeader = () => {
|
||||
const [t] = useTranslation();
|
||||
const deleteMutation = useDeleteLesson();
|
||||
|
||||
const { unit_id,curriculum_id,grade_id ,subject_id} = useParams<ParamsEnum>();
|
||||
const { unit_id, curriculum_id, grade_id, subject_id } =
|
||||
useParams<ParamsEnum>();
|
||||
const { data: unit } = useGetAllUnit({ show: unit_id });
|
||||
|
||||
|
||||
const { data: Subject } = useGetAllSubject({
|
||||
show: subject_id,
|
||||
});
|
||||
|
|
@ -34,15 +36,30 @@ const TableHeader = () => {
|
|||
show: curriculum_id,
|
||||
});
|
||||
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const SubjectName = Subject?.data?.name ?? "";
|
||||
const CurriculumName = Curriculum?.data?.name ?? "";
|
||||
const unitName = unit?.data?.name ?? "";
|
||||
|
||||
|
||||
useSetPageTitle( t(`page_header.grade`)+ "/"+ gradeName +"/"+t(`PageTitle.subject`)+"/"+SubjectName+"/"+t("PageTitle.curriculum")+"/"+CurriculumName+"/"+t("PageTitle.unit")+"/"+unitName+"/"+t("PageTitle.lesson"));
|
||||
|
||||
|
||||
useSetPageTitle(
|
||||
t(`page_header.grade`) +
|
||||
"/" +
|
||||
gradeName +
|
||||
"/" +
|
||||
t(`PageTitle.subject`) +
|
||||
"/" +
|
||||
SubjectName +
|
||||
"/" +
|
||||
t("PageTitle.curriculum") +
|
||||
"/" +
|
||||
CurriculumName +
|
||||
"/" +
|
||||
t("PageTitle.unit") +
|
||||
"/" +
|
||||
unitName +
|
||||
"/" +
|
||||
t("PageTitle.lesson"),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="TableWithHeader">
|
||||
|
|
@ -54,11 +71,11 @@ const TableHeader = () => {
|
|||
</header>
|
||||
<Table />
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
<DeleteModelsForm
|
||||
<EditModalForm />
|
||||
<DeleteModelsForm
|
||||
deleteMutation={deleteMutation}
|
||||
ModelEnum={ModalEnum?.LESSON_DELETE}
|
||||
/>
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,17 +10,18 @@ const App: React.FC = () => {
|
|||
const { unit_id } = useParams<ParamsEnum>();
|
||||
const response = useGetAllLesson({ unit_id: unit_id, pagination: true });
|
||||
|
||||
const {setOldObjectToEdit} = useObjectToEdit()
|
||||
const { setOldObjectToEdit } = useObjectToEdit();
|
||||
console.log(response?.data?.data, "response?.data");
|
||||
const data = response?.data?.data;
|
||||
const lastElement = response?.data?.data && response?.data?.data[data?.length - 1]
|
||||
const lastElement =
|
||||
response?.data?.data && response?.data?.data[data?.length - 1];
|
||||
console.log(lastElement);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if(lastElement){
|
||||
setOldObjectToEdit(lastElement)
|
||||
if (lastElement) {
|
||||
setOldObjectToEdit(lastElement);
|
||||
}
|
||||
}, [lastElement])
|
||||
}, [lastElement]);
|
||||
|
||||
return <DataTable response={response} useColumns={useColumns} />;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ import { useObjectToEdit } from "../../zustand/ObjectToEditState";
|
|||
|
||||
import Header from "../../Components/exercise/Header";
|
||||
import { Question } from "../../types/Item";
|
||||
import BaseForm from './Model/Malty/Add'
|
||||
import ModelForm from './Model/ModelForm'
|
||||
const AcceptModal = lazy(() => import('./Model/AcceptModal'));
|
||||
import BaseForm from "./Model/Malty/Add";
|
||||
import ModelForm from "./Model/ModelForm";
|
||||
const AcceptModal = lazy(() => import("./Model/AcceptModal"));
|
||||
|
||||
import { useModalState } from "../../zustand/Modal";
|
||||
import { ModalEnum } from "../../enums/Model";
|
||||
|
|
@ -48,12 +48,11 @@ const AddPage: React.FC = () => {
|
|||
|
||||
const { setIsOpen } = useModalState((state) => state);
|
||||
|
||||
|
||||
const [t] = useTranslation();
|
||||
const { unit_id,curriculum_id,grade_id ,subject_id,lesson_id} = useParams<ParamsEnum>();
|
||||
const { unit_id, curriculum_id, grade_id, subject_id, lesson_id } =
|
||||
useParams<ParamsEnum>();
|
||||
const { data: unit } = useGetAllUnit({ show: unit_id });
|
||||
|
||||
|
||||
const { data: Subject } = useGetAllSubject({
|
||||
show: subject_id,
|
||||
});
|
||||
|
|
@ -67,21 +66,45 @@ const AddPage: React.FC = () => {
|
|||
show: lesson_id,
|
||||
});
|
||||
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const SubjectName = Subject?.data?.name ?? "";
|
||||
const CurriculumName = Curriculum?.data?.name ?? "";
|
||||
const unitName = unit?.data?.name ?? "";
|
||||
const LessonName = Lesson?.data?.name ?? "";
|
||||
|
||||
useSetPageTitle( t(`page_header.grade`)+ "/"+ gradeName +"/"+t(`PageTitle.subject`)+"/"+SubjectName+"/"+t("PageTitle.curriculum")+"/"+CurriculumName+"/"+t("PageTitle.unit")+"/"+unitName+"/"+t("PageTitle.lesson")+"/"+LessonName+"/"+t("PageTitle.question")+"/"+t("practical.add"));
|
||||
useSetPageTitle(
|
||||
t(`page_header.grade`) +
|
||||
"/" +
|
||||
gradeName +
|
||||
"/" +
|
||||
t(`PageTitle.subject`) +
|
||||
"/" +
|
||||
SubjectName +
|
||||
"/" +
|
||||
t("PageTitle.curriculum") +
|
||||
"/" +
|
||||
CurriculumName +
|
||||
"/" +
|
||||
t("PageTitle.unit") +
|
||||
"/" +
|
||||
unitName +
|
||||
"/" +
|
||||
t("PageTitle.lesson") +
|
||||
"/" +
|
||||
LessonName +
|
||||
"/" +
|
||||
t("PageTitle.question") +
|
||||
"/" +
|
||||
t("practical.add"),
|
||||
);
|
||||
const handleSubmit = (
|
||||
values: any,
|
||||
{ resetForm }: { resetForm: () => void },
|
||||
) => {
|
||||
const DataToSend = structuredClone(values);
|
||||
|
||||
|
||||
setTagsSearch(null);
|
||||
const canAnswersBeShuffled = DataToSend?.canAnswersBeShuffled ? 1 : 0 ;
|
||||
const canAnswersBeShuffled = DataToSend?.canAnswersBeShuffled ? 1 : 0;
|
||||
if (isBseQuestion || DataToSend?.isBase === 1) {
|
||||
const newBseQuestion = {
|
||||
subject_id: subject_id,
|
||||
|
|
@ -90,8 +113,7 @@ const AddPage: React.FC = () => {
|
|||
isBase: 1,
|
||||
lessons_ids: [lesson_id],
|
||||
canAnswersBeShuffled,
|
||||
hint:DataToSend?.hint
|
||||
|
||||
hint: DataToSend?.hint,
|
||||
};
|
||||
|
||||
mutateAsync(newBseQuestion).then((data: any) => {
|
||||
|
|
@ -120,7 +142,7 @@ const AddPage: React.FC = () => {
|
|||
subject_id: subject_id,
|
||||
tags,
|
||||
lessons_ids: [lesson_id],
|
||||
canAnswersBeShuffled
|
||||
canAnswersBeShuffled,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -169,9 +191,9 @@ const AddPage: React.FC = () => {
|
|||
validationSchema={getValidationSchemaBase}
|
||||
>
|
||||
<main className="w-100 exercise_add_main">
|
||||
<Header/>
|
||||
<BaseForm/>
|
||||
|
||||
<Header />
|
||||
<BaseForm />
|
||||
|
||||
<div className="exercise_add_buttons">
|
||||
<div onClick={handleCancel}>{t("practical.back")}</div>
|
||||
<button disabled={isLoading} className="relative" type="submit">
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ import { ParamsEnum } from "../../enums/params";
|
|||
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
|
||||
import { removeStringKeys } from "../../utils/removeStringKeys";
|
||||
import SpinContainer from "../../Components/Layout/SpinContainer";
|
||||
import ModelForm from './Model/ModelForm'
|
||||
import BaseForm from './Model/Malty/Edit'
|
||||
import ModelForm from "./Model/ModelForm";
|
||||
import BaseForm from "./Model/Malty/Edit";
|
||||
import { Question } from "../../types/Item";
|
||||
import { toast } from "react-toastify";
|
||||
import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
|
|
@ -33,7 +33,14 @@ import { useGetAllGrade } from "../../api/grade";
|
|||
import { useGetAllCurriculum } from "../../api/curriculum";
|
||||
|
||||
const EditPage: React.FC = () => {
|
||||
const { unit_id,curriculum_id,grade_id ,subject_id,lesson_id,question_id } = useParams<ParamsEnum>();
|
||||
const {
|
||||
unit_id,
|
||||
curriculum_id,
|
||||
grade_id,
|
||||
subject_id,
|
||||
lesson_id,
|
||||
question_id,
|
||||
} = useParams<ParamsEnum>();
|
||||
const { isBseQuestion, setIsBseQuestion, setTagsSearch, DeletedQuestions } =
|
||||
useObjectToEdit();
|
||||
|
||||
|
|
@ -59,12 +66,9 @@ const EditPage: React.FC = () => {
|
|||
}
|
||||
}, [objectToEdit?.isBase]);
|
||||
|
||||
|
||||
|
||||
const [t] = useTranslation();
|
||||
const { data: unit } = useGetAllUnit({ show: unit_id });
|
||||
|
||||
|
||||
const { data: Subject } = useGetAllSubject({
|
||||
show: subject_id,
|
||||
});
|
||||
|
|
@ -78,13 +82,37 @@ const EditPage: React.FC = () => {
|
|||
show: lesson_id,
|
||||
});
|
||||
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const SubjectName = Subject?.data?.name ?? "";
|
||||
const CurriculumName = Curriculum?.data?.name ?? "";
|
||||
const unitName = unit?.data?.name ?? "";
|
||||
const LessonName = Lesson?.data?.name ?? "";
|
||||
|
||||
useSetPageTitle( t(`page_header.grade`)+ "/"+ gradeName +"/"+t(`PageTitle.subject`)+"/"+SubjectName+"/"+t("PageTitle.curriculum")+"/"+CurriculumName+"/"+t("PageTitle.unit")+"/"+unitName+"/"+t("PageTitle.lesson")+"/"+LessonName+"/"+t("PageTitle.question")+"/"+t("practical.edit"));
|
||||
useSetPageTitle(
|
||||
t(`page_header.grade`) +
|
||||
"/" +
|
||||
gradeName +
|
||||
"/" +
|
||||
t(`PageTitle.subject`) +
|
||||
"/" +
|
||||
SubjectName +
|
||||
"/" +
|
||||
t("PageTitle.curriculum") +
|
||||
"/" +
|
||||
CurriculumName +
|
||||
"/" +
|
||||
t("PageTitle.unit") +
|
||||
"/" +
|
||||
unitName +
|
||||
"/" +
|
||||
t("PageTitle.lesson") +
|
||||
"/" +
|
||||
LessonName +
|
||||
"/" +
|
||||
t("PageTitle.question") +
|
||||
"/" +
|
||||
t("practical.edit"),
|
||||
);
|
||||
|
||||
const handleSubmit = (values: any) => {
|
||||
const DataToSend = structuredClone(values);
|
||||
|
|
@ -96,8 +124,6 @@ const EditPage: React.FC = () => {
|
|||
id: DataToSend?.id,
|
||||
content: DataToSend?.content,
|
||||
image: DataToSend?.image ?? "",
|
||||
|
||||
|
||||
};
|
||||
if (
|
||||
typeof UpdateBseQuestion?.image === "string" &&
|
||||
|
|
@ -157,8 +183,6 @@ const EditPage: React.FC = () => {
|
|||
tags,
|
||||
lessons_ids: [lesson_id],
|
||||
parent_id: values?.id,
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -28,44 +28,38 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="ChoiceFields">
|
||||
<TextField
|
||||
className="textarea_exercise"
|
||||
placeholder={"choice"}
|
||||
label2={t(`input.choice`) + ` ` + `(${getCharFromNumber(index)})`}
|
||||
name={index}
|
||||
id={`choice_${index + 1}`}
|
||||
type="TextArea"
|
||||
/>
|
||||
<File
|
||||
className="file_exercise"
|
||||
label={"attachment"}
|
||||
name={index}
|
||||
type="File"
|
||||
/>
|
||||
<>
|
||||
<div className="ChoiceFields">
|
||||
<TextField
|
||||
className="textarea_exercise"
|
||||
placeholder={"choice"}
|
||||
label2={t(`input.choice`) + ` ` + `(${getCharFromNumber(index)})`}
|
||||
name={index}
|
||||
id={`choice_${index + 1}`}
|
||||
type="TextArea"
|
||||
/>
|
||||
<File
|
||||
className="file_exercise"
|
||||
label={"attachment"}
|
||||
name={index}
|
||||
type="File"
|
||||
/>
|
||||
|
||||
<CheckboxField
|
||||
className=""
|
||||
label="The_correct_answer"
|
||||
name={index}
|
||||
type="Checkbox"
|
||||
/>
|
||||
|
||||
<p className="delete_question_options">
|
||||
<FaTrash onClick={handleDeleteChoice} size={17} />
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<HintField
|
||||
placeholder={"hint"}
|
||||
name={index}
|
||||
label="hint"
|
||||
id={`hint`}
|
||||
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<CheckboxField
|
||||
className=""
|
||||
label="The_correct_answer"
|
||||
name={index}
|
||||
type="Checkbox"
|
||||
/>
|
||||
|
||||
<p className="delete_question_options">
|
||||
<FaTrash onClick={handleDeleteChoice} size={17} />
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<HintField placeholder={"hint"} name={index} label="hint" id={`hint`} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import { Choice } from '../../../../types/Item';
|
||||
import ChoiceFields from './ChoiceFields';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
||||
import React from "react";
|
||||
import { Choice } from "../../../../types/Item";
|
||||
import ChoiceFields from "./ChoiceFields";
|
||||
import { useFormikContext } from "formik";
|
||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||
|
||||
const Choices = () => {
|
||||
const formik = useFormikContext<any>();
|
||||
|
|
@ -13,52 +13,56 @@ const Choices = () => {
|
|||
|
||||
// Create a new array from the current QuestionOptions
|
||||
const items = Array.from(formik?.values?.QuestionOptions);
|
||||
|
||||
|
||||
// Remove the item from the original position
|
||||
const [reorderedItem] = items.splice(result.source.index, 1);
|
||||
|
||||
|
||||
// Insert the item at the new position
|
||||
items.splice(result.destination.index, 0, reorderedItem);
|
||||
|
||||
|
||||
// Update the order keys based on the new indices
|
||||
const updatedItems = items.map((item, index) => ({
|
||||
...item ?? {},
|
||||
...(item ?? {}),
|
||||
order: index + 1, // Update order to be 1-based index
|
||||
}));
|
||||
|
||||
// Update the formik state with the new order
|
||||
console.log(updatedItems,"updatedItems");
|
||||
|
||||
formik.setFieldValue('QuestionOptions', updatedItems);
|
||||
console.log(updatedItems, "updatedItems");
|
||||
|
||||
formik.setFieldValue("QuestionOptions", updatedItems);
|
||||
};
|
||||
|
||||
return (
|
||||
<DragDropContext onDragEnd={handleDragEnd}>
|
||||
<Droppable droppableId="choices">
|
||||
{(provided) => (
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
<div {...provided.droppableProps} ref={provided.innerRef}>
|
||||
{formik?.values?.QuestionOptions?.map(
|
||||
(item: Choice, index: number) => {
|
||||
// Use a unique identifier for draggableId
|
||||
const draggableId = item.name
|
||||
? item.name.toString()
|
||||
: `item-${index}`;
|
||||
|
||||
>
|
||||
{formik?.values?.QuestionOptions?.map((item: Choice, index: number) => {
|
||||
// Use a unique identifier for draggableId
|
||||
const draggableId = item.name ? item.name.toString() : `item-${index}`;
|
||||
|
||||
return (
|
||||
<Draggable key={draggableId} draggableId={draggableId} index={index}>
|
||||
{(provided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<ChoiceFields index={index} data={item} />
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<Draggable
|
||||
key={draggableId}
|
||||
draggableId={draggableId}
|
||||
index={index}
|
||||
>
|
||||
{(provided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<ChoiceFields index={index} data={item} />
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
},
|
||||
)}
|
||||
{provided.placeholder} {/* Placeholder for spacing */}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -67,4 +71,4 @@ const Choices = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default Choices;
|
||||
export default Choices;
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ const HintField = ({
|
|||
disabled={isDisabled}
|
||||
size="large"
|
||||
onChange={onChange || TextFilehandleChange}
|
||||
style={{width:200}}
|
||||
style={{ width: 200 }}
|
||||
id={id}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ const Form = () => {
|
|||
<div></div>
|
||||
</div>
|
||||
<div className=" flex "></div>
|
||||
|
||||
|
||||
{((formik?.values as any)?.Questions || [])?.map(
|
||||
(item: Choice, parent_index: number) => {
|
||||
return (
|
||||
|
|
@ -104,7 +104,7 @@ const Form = () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<Choices parent_index={parent_index} />
|
||||
<Choices parent_index={parent_index} />
|
||||
|
||||
{formik?.values?.Questions?.[parent_index]?.QuestionOptions
|
||||
?.length < 5 && (
|
||||
|
|
|
|||
|
|
@ -1,87 +1,82 @@
|
|||
import React from 'react'
|
||||
import ChoiceFields from './ChoiceFields';
|
||||
import { Choice } from '../../../../../types/Item';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
|
||||
import React from "react";
|
||||
import ChoiceFields from "./ChoiceFields";
|
||||
import { Choice } from "../../../../../types/Item";
|
||||
import { useFormikContext } from "formik";
|
||||
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
|
||||
|
||||
const Choices = ({parent_index}:{parent_index:number}) => {
|
||||
const Choices = ({ parent_index }: { parent_index: number }) => {
|
||||
const formik = useFormikContext<any>();
|
||||
|
||||
|
||||
const handleDragEnd = (result: any) => {
|
||||
// Check if the item was dropped outside the list
|
||||
if (!result.destination) return;
|
||||
|
||||
// Create a new array from the current QuestionOptions
|
||||
const items = Array.from(formik?.values?.QuestionOptions);
|
||||
|
||||
|
||||
// Remove the item from the original position
|
||||
const [reorderedItem] = items.splice(result.source.index, 1);
|
||||
|
||||
|
||||
// Insert the item at the new position
|
||||
items.splice(result.destination.index, 0, reorderedItem);
|
||||
|
||||
|
||||
// Update the order keys based on the new indices
|
||||
const updatedItems = items.map((item, index) => ({
|
||||
...item ?? {},
|
||||
...(item ?? {}),
|
||||
order: index + 1, // Update order to be 1-based index
|
||||
}));
|
||||
|
||||
// Update the formik state with the new order
|
||||
console.log(updatedItems,"updatedItems");
|
||||
|
||||
formik.setFieldValue('QuestionOptions', updatedItems);
|
||||
console.log(updatedItems, "updatedItems");
|
||||
|
||||
formik.setFieldValue("QuestionOptions", updatedItems);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DragDropContext onDragEnd={handleDragEnd}>
|
||||
<Droppable droppableId="choices">
|
||||
{(provided) => (
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
|
||||
>
|
||||
{(
|
||||
(formik?.values as any)?.Questions?.[parent_index]
|
||||
<DragDropContext onDragEnd={handleDragEnd}>
|
||||
<Droppable droppableId="choices">
|
||||
{(provided) => (
|
||||
<div {...provided.droppableProps} ref={provided.innerRef}>
|
||||
{(
|
||||
(formik?.values as any)?.Questions?.[parent_index]
|
||||
?.QuestionOptions || []
|
||||
).map((item: Choice, index: number) => {
|
||||
const draggableId = item.name ? item.name.toString() : `item-${index}`;
|
||||
const draggableId = item.name
|
||||
? item.name.toString()
|
||||
: `item-${index}`;
|
||||
|
||||
return (
|
||||
<Draggable key={draggableId} draggableId={draggableId} index={index}>
|
||||
{(provided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
|
||||
<ChoiceFields
|
||||
key={index}
|
||||
parent_index={parent_index}
|
||||
<Draggable
|
||||
key={draggableId}
|
||||
draggableId={draggableId}
|
||||
index={index}
|
||||
data={item}
|
||||
/>
|
||||
>
|
||||
{(provided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<ChoiceFields
|
||||
key={index}
|
||||
parent_index={parent_index}
|
||||
index={index}
|
||||
data={item}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
})}
|
||||
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
|
||||
|
||||
|
||||
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Choices
|
||||
export default Choices;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const CheckboxField = ({
|
|||
const [t] = useTranslation();
|
||||
const newName = `Questions[${name}].canAnswersBeShuffled`;
|
||||
console.log(formik.values?.Questions?.[name]);
|
||||
|
||||
|
||||
const CheckboxhandleChange = (value: any, index: number) => {
|
||||
formik.setFieldValue(newName, value?.target?.checked ? 1 : 0);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -47,12 +47,11 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
|
|||
name={index}
|
||||
type="File"
|
||||
/>
|
||||
<CheckboxField
|
||||
className="canAnswersBeShuffled"
|
||||
label={"canAnswersBeShuffled"}
|
||||
name={index}
|
||||
|
||||
/>
|
||||
<CheckboxField
|
||||
className="canAnswersBeShuffled"
|
||||
label={"canAnswersBeShuffled"}
|
||||
name={index}
|
||||
/>
|
||||
|
||||
<p className="delete_question_options">
|
||||
<FaTrash onClick={handleDeleteQuestion} size={17} />
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { useEffect } from "react";
|
|||
import Choices from "./Field/Choices";
|
||||
|
||||
const Form = () => {
|
||||
const [t] = useTranslation()
|
||||
const [t] = useTranslation();
|
||||
const formik = useFormikContext<any>();
|
||||
const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
|
||||
|
||||
|
|
@ -24,37 +24,58 @@ const Form = () => {
|
|||
}, [Success]);
|
||||
|
||||
useEffect(() => {
|
||||
setSavedQuestionData(formik.values)
|
||||
}, [formik?.values])
|
||||
setSavedQuestionData(formik.values);
|
||||
}, [formik?.values]);
|
||||
|
||||
|
||||
|
||||
const handleAddChoice = () => {
|
||||
formik.setFieldValue('QuestionOptions', [...(formik?.values as any)?.QuestionOptions as Choice[],
|
||||
{
|
||||
answer:null,
|
||||
answer_image:null,
|
||||
isCorrect:0,
|
||||
}])
|
||||
}
|
||||
const handleAddChoice = () => {
|
||||
formik.setFieldValue("QuestionOptions", [
|
||||
...((formik?.values as any)?.QuestionOptions as Choice[]),
|
||||
{
|
||||
answer: null,
|
||||
answer_image: null,
|
||||
isCorrect: 0,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Row className="w-100">
|
||||
<div className="exercise_form">
|
||||
<ValidationField className="textarea_exercise" name="content" label="details" type="TextArea" />
|
||||
<ValidationField className="file_exercise" name="image" label="attachment" type="File" />
|
||||
<ValidationField name="canAnswersBeShuffled" label="canAnswersBeShuffled" type="Checkbox" />
|
||||
<ValidationField
|
||||
className="textarea_exercise"
|
||||
name="content"
|
||||
label="details"
|
||||
type="TextArea"
|
||||
/>
|
||||
<ValidationField
|
||||
className="file_exercise"
|
||||
name="image"
|
||||
label="attachment"
|
||||
type="File"
|
||||
/>
|
||||
<ValidationField
|
||||
name="canAnswersBeShuffled"
|
||||
label="canAnswersBeShuffled"
|
||||
type="Checkbox"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ValidationField className="hint" name="hint" label="hint" type="text" style={{width:200}} />
|
||||
<ValidationField
|
||||
className="hint"
|
||||
name="hint"
|
||||
label="hint"
|
||||
type="text"
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
</div>
|
||||
<Choices />
|
||||
{formik?.values?.QuestionOptions?.length < 5 && (
|
||||
<p className="add_new_button" >
|
||||
<FaCirclePlus onClick={handleAddChoice} size={23} /> {t("header.add_new_choice")}
|
||||
</p>
|
||||
{formik?.values?.QuestionOptions?.length < 5 && (
|
||||
<p className="add_new_button">
|
||||
<FaCirclePlus onClick={handleAddChoice} size={23} />{" "}
|
||||
{t("header.add_new_choice")}
|
||||
</p>
|
||||
)}
|
||||
<DynamicTags/>
|
||||
<DynamicTags />
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@ export const getValidationSchema = () => {
|
|||
};
|
||||
|
||||
export const getInitialValuesBase = (objectToEdit: Question): any => {
|
||||
|
||||
const newQuestions = objectToEdit?.Questions?.map((item: any) => {
|
||||
const tags = item?.tags?.map((tag: any) => ({
|
||||
id: tag?.id,
|
||||
|
|
@ -69,7 +68,6 @@ export const getInitialValuesBase = (objectToEdit: Question): any => {
|
|||
};
|
||||
};
|
||||
|
||||
|
||||
export const getValidationSchemaBase = () => {
|
||||
// validate input
|
||||
return Yup.object().shape({
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ const TableHeader = () => {
|
|||
|
||||
const deleteMutation = useDeleteQuestion();
|
||||
|
||||
const { unit_id,curriculum_id,grade_id ,subject_id,lesson_id} = useParams<ParamsEnum>();
|
||||
const { unit_id, curriculum_id, grade_id, subject_id, lesson_id } =
|
||||
useParams<ParamsEnum>();
|
||||
const { data: unit } = useGetAllUnit({ show: unit_id });
|
||||
|
||||
|
||||
const { data: Subject } = useGetAllSubject({
|
||||
show: subject_id,
|
||||
});
|
||||
|
|
@ -36,28 +36,48 @@ const TableHeader = () => {
|
|||
show: lesson_id,
|
||||
});
|
||||
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
const SubjectName = Subject?.data?.name ?? "";
|
||||
const CurriculumName = Curriculum?.data?.name ?? "";
|
||||
const unitName = unit?.data?.name ?? "";
|
||||
const LessonName = Lesson?.data?.name ?? "";
|
||||
|
||||
useSetPageTitle( t(`page_header.grade`)+ "/"+ gradeName +"/"+t(`PageTitle.subject`)+"/"+SubjectName+"/"+t("PageTitle.curriculum")+"/"+CurriculumName+"/"+t("PageTitle.unit")+"/"+unitName+"/"+t("PageTitle.lesson")+"/"+LessonName+"/"+t("PageTitle.question"));
|
||||
useSetPageTitle(
|
||||
t(`page_header.grade`) +
|
||||
"/" +
|
||||
gradeName +
|
||||
"/" +
|
||||
t(`PageTitle.subject`) +
|
||||
"/" +
|
||||
SubjectName +
|
||||
"/" +
|
||||
t("PageTitle.curriculum") +
|
||||
"/" +
|
||||
CurriculumName +
|
||||
"/" +
|
||||
t("PageTitle.unit") +
|
||||
"/" +
|
||||
unitName +
|
||||
"/" +
|
||||
t("PageTitle.lesson") +
|
||||
"/" +
|
||||
LessonName +
|
||||
"/" +
|
||||
t("PageTitle.question"),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="TableWithHeader">
|
||||
<Suspense fallback={<Spin />}>
|
||||
<header>
|
||||
<h6>
|
||||
{t("models.Question")}
|
||||
</h6>
|
||||
<h6>{t("models.Question")}</h6>
|
||||
</header>
|
||||
<Table />
|
||||
</Suspense>
|
||||
<DeleteModels
|
||||
deleteMutation={deleteMutation}
|
||||
ModelEnum={ModalEnum?.QUESTION_DELETE}
|
||||
/>
|
||||
deleteMutation={deleteMutation}
|
||||
ModelEnum={ModalEnum?.QUESTION_DELETE}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ import { ParamsEnum } from "../../../enums/params";
|
|||
|
||||
const AddModel: React.FC = () => {
|
||||
const { mutate, status } = useAddSubject();
|
||||
const {grade_id} = useParams<ParamsEnum>()
|
||||
const { grade_id } = useParams<ParamsEnum>();
|
||||
const handleSubmit = (values: any) => {
|
||||
mutate({ ...values,grade_id });
|
||||
mutate({ ...values, grade_id });
|
||||
};
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import ModelForm from "./ModelForm";
|
|||
const ModalForm: React.FC = () => {
|
||||
const { objectToEdit } = useObjectToEdit((state) => state);
|
||||
|
||||
const { mutate ,status} = useUpdateSubject();
|
||||
const { mutate, status } = useUpdateSubject();
|
||||
|
||||
const handleSubmit = (values: any) => {
|
||||
const Data_to_send = { ...values };
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import * as Yup from "yup";
|
||||
import { SubjectInitialValues } from "../../../types/Subject";
|
||||
|
||||
export const getInitialValues = (objectToEdit: Partial<SubjectInitialValues>): SubjectInitialValues => {
|
||||
export const getInitialValues = (
|
||||
objectToEdit: Partial<SubjectInitialValues>,
|
||||
): SubjectInitialValues => {
|
||||
// console.log(objectToEdit,"objectToEdit");
|
||||
|
||||
|
||||
return {
|
||||
id: objectToEdit?.id ?? null,
|
||||
name: objectToEdit?.name ?? null,
|
||||
icon: objectToEdit?.icon ?? null,
|
||||
grade_id: objectToEdit?.grade_id ?? null,
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -13,22 +13,29 @@ import { useGetAllGrade } from "../../../api/grade";
|
|||
const Table = lazy(() => import("./TablePage"));
|
||||
const AddModalForm = lazy(() => import("../Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("../Model/EditModel"));
|
||||
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels"));
|
||||
const DeleteModalForm = lazy(
|
||||
() => import("../../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
|
||||
const TableWithHeader = () => {
|
||||
const { handel_open_model } = useModalHandler();
|
||||
const [t] = useTranslation();
|
||||
const deleteMutation = useDeleteSubject();
|
||||
|
||||
const { grade_id} = useParams<ParamsEnum>();
|
||||
const { grade_id } = useParams<ParamsEnum>();
|
||||
|
||||
const { data: grade } = useGetAllGrade({
|
||||
show: grade_id,
|
||||
});
|
||||
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
useSetPageTitle( t(`page_header.grade`)+ "/"+ `${gradeName}` +"/"+t(`PageTitle.subject`));
|
||||
|
||||
const gradeName = grade?.data?.name ?? "";
|
||||
useSetPageTitle(
|
||||
t(`page_header.grade`) +
|
||||
"/" +
|
||||
`${gradeName}` +
|
||||
"/" +
|
||||
t(`PageTitle.subject`),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="TableWithHeader">
|
||||
|
|
@ -50,9 +57,9 @@ const TableWithHeader = () => {
|
|||
<DeleteModalForm
|
||||
deleteMutation={deleteMutation}
|
||||
ModelEnum={ModalEnum?.SUBJECT_DELETE}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableWithHeader;
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ export const useColumns = () => {
|
|||
const { setObjectToEdit } = useObjectToEdit((state) => state);
|
||||
const { setIsOpen } = useModalState((state) => state);
|
||||
|
||||
const handelDelete = (record:Subject) => {
|
||||
const handelDelete = (record: Subject) => {
|
||||
setObjectToEdit(record);
|
||||
setIsOpen(ModalEnum?.SUBJECT_DELETE);
|
||||
};
|
||||
const handleEdit = (record:Subject) => {
|
||||
const handleEdit = (record: Subject) => {
|
||||
setObjectToEdit(record);
|
||||
setIsOpen(ModalEnum?.SUBJECT_EDIT);
|
||||
};
|
||||
|
|
@ -44,7 +44,7 @@ export const useColumns = () => {
|
|||
dataIndex: "icon",
|
||||
key: "icon",
|
||||
align: "center",
|
||||
render: (row: Subject,record) => {
|
||||
render: (row: Subject, record) => {
|
||||
let str = record.icon;
|
||||
return <ColumnsImage src={str} />;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -63,8 +63,6 @@ export const menuItems: TMenuItem[] = [
|
|||
];
|
||||
|
||||
export const CrudRoute: TCrudRoute[] = [
|
||||
|
||||
|
||||
{
|
||||
header: "page_header.grade_details",
|
||||
element: <Subject />,
|
||||
|
|
@ -74,7 +72,6 @@ export const CrudRoute: TCrudRoute[] = [
|
|||
prevPath: 1,
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
header: "page_header.subject_details",
|
||||
element: <Curriculum />,
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
@import "./Segmented.scss";
|
||||
@import "./Mix.scss";
|
||||
|
||||
|
||||
.draggable-row {
|
||||
cursor: move; /* Change cursor to indicate draggable rows */
|
||||
}
|
||||
cursor: move; /* Change cursor to indicate draggable rows */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -272,7 +272,6 @@ button:disabled {
|
|||
.h1 {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.buttonAction {
|
||||
|
|
|
|||
|
|
@ -121,9 +121,7 @@
|
|||
left: 100px;
|
||||
}
|
||||
|
||||
|
||||
.hint_canAnswersBeShuffled{
|
||||
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.hint_canAnswersBeShuffled {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ const KEY = "grade";
|
|||
export const useGetAllGrade = (params?: any, options?: any) =>
|
||||
useGetQuery(KEY, API.GET, params, options);
|
||||
export const useAddGrade = () => useAddMutation(KEY, API.ADD);
|
||||
export const useUpdateGrade = (params?: any) =>
|
||||
useUpdateMutation(KEY, API.GET);
|
||||
export const useUpdateGrade = (params?: any) => useUpdateMutation(KEY, API.GET);
|
||||
export const useDeleteGrade = (params?: any) =>
|
||||
useDeleteMutation(KEY, API.DELETE);
|
||||
|
|
|
|||
|
|
@ -141,19 +141,15 @@ export enum ModalEnum {
|
|||
QUESTION_DELETE = "Question.delete",
|
||||
QUESTION_ACCEPT = "Question.ACCEPT",
|
||||
|
||||
///Grade
|
||||
|
||||
///Grade
|
||||
|
||||
GRADE_EDIT = "GRADE.edit",
|
||||
GRADE_ADD = "GRADE.add",
|
||||
GRADE_DELETE = "GRADE.delete",
|
||||
|
||||
///Curriculum
|
||||
|
||||
CURRICULUM_EDIT = "CURRICULUM.edit",
|
||||
CURRICULUM_ADD = "CURRICULUM.add",
|
||||
CURRICULUM_DELETE = "CURRICULUM.delete",
|
||||
|
||||
GRADE_EDIT = "GRADE.edit",
|
||||
GRADE_ADD = "GRADE.add",
|
||||
GRADE_DELETE = "GRADE.delete",
|
||||
|
||||
///Curriculum
|
||||
|
||||
CURRICULUM_EDIT = "CURRICULUM.edit",
|
||||
CURRICULUM_ADD = "CURRICULUM.add",
|
||||
CURRICULUM_DELETE = "CURRICULUM.delete",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
export enum TermEnum {
|
||||
FIRST_TERM = "first_term",
|
||||
SECOND_TERM = "second_term",
|
||||
}
|
||||
|
||||
FIRST_TERM = "first_term",
|
||||
SECOND_TERM = "second_term",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,8 +107,7 @@
|
|||
"malty_exercise": "تمرين متعدد",
|
||||
"add_new_question": "اضافة سؤال جديد",
|
||||
"exercise": "تمارين",
|
||||
"icon" :"الايقونة"
|
||||
|
||||
"icon": "الايقونة"
|
||||
},
|
||||
"columns": {
|
||||
"id": "الرقم التعريفي",
|
||||
|
|
@ -121,7 +120,7 @@
|
|||
"payment_type": "نوع الدفع",
|
||||
"value": "القيمة",
|
||||
"subject_name": "اسم المادة",
|
||||
"icon" :"الايقونة",
|
||||
"icon": "الايقونة",
|
||||
"image": "الصورة",
|
||||
"card": "البطاقة",
|
||||
"birthday": "تاريخ الميلاد",
|
||||
|
|
@ -197,7 +196,7 @@
|
|||
"Are you sure you want to go back and not save any changes?": "هل أنت متأكد أنك تريد العودة وعدم حفظ أي تغييرات؟",
|
||||
"accept_back": "قبول العودة ",
|
||||
"accept": "قبول ",
|
||||
"to_confirm_deletion_please_re_enter_id":"يرجى اعادة ادخال رقم التعريف"
|
||||
"to_confirm_deletion_please_re_enter_id": "يرجى اعادة ادخال رقم التعريف"
|
||||
},
|
||||
"Table": {
|
||||
"header": "",
|
||||
|
|
@ -255,10 +254,10 @@
|
|||
"exams": "اختبارات",
|
||||
"lessons": "دروس",
|
||||
"sex": "الجنس",
|
||||
"Question":"اسئلة",
|
||||
"tags":"كلمات مفتاحية",
|
||||
|
||||
"tags_details":"تفاصيل الكلمة المفتاحية",
|
||||
"Question": "اسئلة",
|
||||
"tags": "كلمات مفتاحية",
|
||||
|
||||
"tags_details": "تفاصيل الكلمة المفتاحية",
|
||||
"curriculum": "مقرر"
|
||||
},
|
||||
"education_class_actions": {
|
||||
|
|
@ -320,7 +319,7 @@
|
|||
"due_date": "تاريخ الاستحقاق",
|
||||
"assigning_date": "تاريخ التعيين",
|
||||
"subject_name": "اسم المادة",
|
||||
"icon" :"الايقونة",
|
||||
"icon": "الايقونة",
|
||||
"exam_type": "نوع الامتحان",
|
||||
"grade_to_pass": "الدرجة اللازمة للنجاح",
|
||||
"max_grade": "الدرجة القصوى",
|
||||
|
|
@ -359,8 +358,8 @@
|
|||
"main_question": "النص الأساسي ",
|
||||
"question": "السؤال",
|
||||
"id": "الرقم التعريفي",
|
||||
"canAnswersBeShuffled":"يمكن خلط الإجابات",
|
||||
"hint":"لحليح"
|
||||
"canAnswersBeShuffled": "يمكن خلط الإجابات",
|
||||
"hint": "لحليح"
|
||||
},
|
||||
|
||||
"select": {
|
||||
|
|
@ -661,7 +660,7 @@
|
|||
"admin": "المسؤولون",
|
||||
"subject": "المواد",
|
||||
"tags": "كلمات مفتاحية",
|
||||
"grade":"الدرجات",
|
||||
"grade": "الدرجات",
|
||||
"curriculum": "مقرر"
|
||||
},
|
||||
"message": {
|
||||
|
|
@ -686,8 +685,8 @@
|
|||
"questions": "اسئلة",
|
||||
"lesson": "الدرس",
|
||||
"curriculum": "مقرر",
|
||||
"subject":"المادة",
|
||||
"question":"السؤال"
|
||||
"subject": "المادة",
|
||||
"question": "السؤال"
|
||||
},
|
||||
"page_header": {
|
||||
"dashboard": "لوحة القيادة / الصفحة الرئيسية",
|
||||
|
|
@ -718,6 +717,6 @@
|
|||
"add_Question": "لوحة القيادة /إضافة اسئلة ",
|
||||
"edit_Question": "لوحة القيادة /تعديل اسئلة ",
|
||||
"grade": "لوحة القيادة /الدرجات ",
|
||||
"curriculum":"لوحة القيادة / تعديل مقرر "
|
||||
"curriculum": "لوحة القيادة / تعديل مقرر "
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@
|
|||
"param": "Param",
|
||||
"subjectProgress": "Subject Progress",
|
||||
"main_page": "Main Page",
|
||||
"tags_details":"tags details"
|
||||
"tags_details": "tags details"
|
||||
},
|
||||
"education_class_actions": {
|
||||
"Student_Records": "Student_Records",
|
||||
|
|
|
|||
|
|
@ -404,5 +404,4 @@ export interface showAdmin {
|
|||
branches: BranchRole[];
|
||||
}
|
||||
|
||||
|
||||
export type Nullable<T> = { [K in keyof T]: T[K] | null };
|
||||
|
|
|
|||
|
|
@ -3,15 +3,13 @@ import { Nullable } from "./App";
|
|||
// Define the Teacher interface
|
||||
|
||||
export interface InitialValues {
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
|
||||
}
|
||||
export type Curriculum ={
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
}
|
||||
export type Curriculum = {
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
};
|
||||
export type CurriculumInitialValues = Partial<Nullable<InitialValues>>;
|
||||
|
|
|
|||
|
|
@ -3,15 +3,13 @@ import { Nullable } from "./App";
|
|||
// Define the Teacher interface
|
||||
|
||||
export interface InitialValues {
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
|
||||
}
|
||||
export type Grade ={
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
}
|
||||
export type Grade = {
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
};
|
||||
export type GradeInitialValues = Partial<Nullable<InitialValues>>;
|
||||
|
|
|
|||
|
|
@ -306,7 +306,7 @@ export interface Question {
|
|||
parent_id: number;
|
||||
isBase: number;
|
||||
content: string;
|
||||
canAnswersBeShuffled:number ;
|
||||
canAnswersBeShuffled: number;
|
||||
max_mark: number;
|
||||
min_mark_to_pass: number;
|
||||
image: string | null;
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@ import { Nullable } from "./App";
|
|||
// Define the Teacher interface
|
||||
|
||||
export interface Subject {
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
grade_id: number;
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
grade_id: number;
|
||||
}
|
||||
|
||||
export interface InitialValues {
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
grade_id: number;
|
||||
id: number; // Unique identifier for the user
|
||||
name: string; // Name of the user
|
||||
icon: string; // URL of the user's icon
|
||||
grade_id: number;
|
||||
}
|
||||
|
||||
export type SubjectInitialValues = Partial<Nullable<InitialValues>>;
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@ import { Nullable } from "./App";
|
|||
|
||||
// Define the type for the object
|
||||
export interface Unit {
|
||||
curriculum_id: number;
|
||||
id: number; // Represents the student ID
|
||||
name: string; // Represents the student's name
|
||||
order: number; // Represents the order (could be for sorting)
|
||||
term: TermEnum; // Represents the term using the Term enum
|
||||
curriculum_id: number;
|
||||
id: number; // Represents the student ID
|
||||
name: string; // Represents the student's name
|
||||
order: number; // Represents the order (could be for sorting)
|
||||
term: TermEnum; // Represents the term using the Term enum
|
||||
}
|
||||
|
||||
export interface InitialValues {
|
||||
curriculum_id: number;
|
||||
id: number; // Represents the student ID
|
||||
name: string; // Represents the student's name
|
||||
order: number; // Represents the order (could be for sorting)
|
||||
term: TermEnum;
|
||||
curriculum_id: number;
|
||||
id: number; // Represents the student ID
|
||||
name: string; // Represents the student's name
|
||||
order: number; // Represents the order (could be for sorting)
|
||||
term: TermEnum;
|
||||
}
|
||||
|
||||
export type UnitInitialValues = Partial<Nullable<InitialValues>>;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export const enumToArray = (enumObj: any) => {
|
||||
return Object.keys(enumObj).map(key => ({
|
||||
value: enumObj[key],
|
||||
label: enumObj[key],
|
||||
}));
|
||||
export const enumToArray = (enumObj: any) => {
|
||||
return Object.keys(enumObj).map((key) => ({
|
||||
value: enumObj[key],
|
||||
label: enumObj[key],
|
||||
}));
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ class AbilityManager {
|
|||
}
|
||||
|
||||
private loadAbilities(): Set<string> {
|
||||
const abilitiesString = getLocalStorage(ABILITIES_KEY)
|
||||
|
||||
const abilitiesString = getLocalStorage(ABILITIES_KEY);
|
||||
|
||||
if (!abilitiesString) {
|
||||
return new Set<string>();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -518,8 +518,6 @@ export const canShowQuestion = hasAbility(
|
|||
ABILITIES_VALUES_ENUM.SHOW,
|
||||
);
|
||||
|
||||
|
||||
|
||||
///// Grade
|
||||
|
||||
export const canAddGrade = hasAbility(
|
||||
|
|
@ -543,7 +541,6 @@ export const canIndexGrade = hasAbility(
|
|||
ABILITIES_VALUES_ENUM.INDEX,
|
||||
);
|
||||
|
||||
|
||||
///// Curriculum
|
||||
|
||||
export const canAddCurriculum = hasAbility(
|
||||
|
|
@ -566,4 +563,3 @@ export const canIndexCurriculum = hasAbility(
|
|||
ABILITIES_ENUM.EDUCATION_CLASS,
|
||||
ABILITIES_VALUES_ENUM.INDEX,
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ interface AuthStore {
|
|||
const useAuthState = create<AuthStore>((set) => {
|
||||
const storedToken = localStorage.getItem(TOKEN_KEY);
|
||||
const storedAbilities = localStorage.getItem(ABILITIES_KEY);
|
||||
|
||||
|
||||
return {
|
||||
isAuthenticated: true,
|
||||
token: storedToken,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user