Karimaldeen/nerd_project_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Karimaldeen:dev
Branches Tags
Karimaldeen:main
Karimaldeen:dev
..
compare: Karimaldeen:main
Branches Tags
Karimaldeen:dev
Karimaldeen:main

No commits in common. "dev" and "main" have entirely different histories.
dev ... main

114 changed files with 6554 additions and 6725 deletions
Show Stats Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@ -10,7 +10,6 @@
"Groupbutton",
"handelnavigate",
"Karim",
"latlng",
"queryqlent",
"registraion",
"SENDNOTIFICATION",

3
package.json
View File

@ -18,7 +18,6 @@
"formik": "^2.4.6",
"html-to-image": "^1.11.11",
"i18next": "^23.11.5",
"leaflet": "^1.9.4",
"path-to-regexp": "^6.2.2",
"pdf-lib": "^1.17.1",
"react": "^18.3.1",
@ -27,7 +26,6 @@
"react-dragula": "^1.1.17",
"react-i18next": "^13.5.0",
"react-icons": "^4.12.0",
"react-leaflet": "^4.2.1",
"react-query": "^3.39.3",
"react-router-dom": "^6.23.1",
"react-toastify": "^9.1.3",
@ -68,7 +66,6 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/leaflet": "^1.9.12",
"@types/node": "^20.14.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",

8797
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

8
src/App.tsx
View File

@ -5,13 +5,11 @@ import { Spin } from "antd";
import { hasAbility } from "./utils/hasAbility";
import { renderRoutesRecursively } from "./Components/Routes/RenderRoutesRecursively";
import { RenderRouteElement } from "./Components/Routes/RenderRouteElement";
import { UserTypeEnum } from "./enums/UserType";
import { RoleByType } from "./utils/RoleByType";
const Page404 = lazy(() => import("./Layout/Ui/NotFoundPage"));
const Auth = lazy(() => import("./Pages/Auth/Page"));
const App = () => {
const App = () => {
return (
<Routes>
<Route
@ -33,14 +31,10 @@ const App = () => {
}
/>
{renderRoutesRecursively(menuItems)}
{CrudRoute.map((route) => {
const useAbility = hasAbility(route.abilities, route.abilities_value);
if(!RoleByType(route)){
return false ;
}
if (!useAbility) {
return false;
}

7
src/Components/Routes/RenderRoutesRecursively.tsx
View File

@ -3,17 +3,10 @@ import { TMenuItem } from "../../types/App";
import { hasAbility } from "../../utils/hasAbility";
import { Route } from "react-router-dom";
import { RenderRouteElement } from "./RenderRouteElement";
import { UserTypeEnum } from "../../enums/UserType";
import Item from "antd/es/list/Item";
import { RoleByType } from "../../utils/RoleByType";
export const renderRoutesRecursively = (routes: TMenuItem[]) =>
routes.map((route: TMenuItem) => {
const useAbility = hasAbility(route.abilities, route.abilities_value);
if(!RoleByType(route)){
return false ;
}
if (!useAbility) {
return false;
}

24
src/Components/ValidationField/Ui/KarimSpinner.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from "react";
import { Spin } from "antd";
interface Props {
loading: boolean;
children: React.ReactNode;
className?: string;
}
const KarimSpinner: React.FC<Props> = ({ loading, className, children }) => {
return (
<div className={className ?? ""}>
{loading ? (
<div className="text-center">
<Spin />
</div>
) : (
children
)}
</div>
);
};
export default KarimSpinner;

37
src/Components/ValidationField/Ui/SearchBar.scss Normal file
View File

@ -0,0 +1,37 @@
.SearchBar {
// margin-top: 20px;
.group {
display: flex;
align-items: center;
position: relative;
max-width: 350px;
width: 350px;
}
.input {
width: 100%;
height: 40px;
padding: 0 1rem;
padding-left: 2.5rem;
border-radius: 8px;
outline: none;
font-weight: 500;
background: var(--bg);
color: var(--text);
border: none;
box-shadow: 2px 2px 7px 0 var(--bg);
}
.input::placeholder {
color: var(--subtext);
opacity: 0.4;
}
.icon {
position: absolute;
left: 1rem;
fill: var(--subtext);
width: 1rem;
height: 1rem;
}
}

45
src/Components/ValidationField/Ui/SearchBar.tsx Normal file
View File

@ -0,0 +1,45 @@
import React, { useState } from "react";
import "./SearchBar.scss";
import { useNavigate, useSearchParams } from "react-router-dom";
const SearchBar = () => {
const [searchQuery, setSearchQuery] = useState("");
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const handleChange = (event: any) => {
const { value } = event.target;
setSearchQuery(value);
updateUrlParams(value);
};
const updateUrlParams = (value: any) => {
navigate(`?search=${value}`, { replace: true });
};
return (
<div className="SearchBar">
<div className="group">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1b5stb0 icon"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="SearchIcon"
>
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>
<input
placeholder="Search Product...."
type="search"
className="input"
value={searchQuery}
onChange={handleChange}
/>
</div>
</div>
);
};
export default SearchBar;

8
src/Components/ValidationField/ValidationField.tsx
View File

@ -6,16 +6,17 @@ import {
File,
DataRange,
SelectField,
Default,
CheckboxField,
MaltyFile,
SearchField,
TextField,
DropFile,
Default,
} from "./View";
import { ValidationFieldProps, ValidationFieldType } from "./utils/types";
import LocalSearchField from "./View/LocalSearch";
import NumberFormate from "./View/NumberFormate";
import NumberField from "./View/NumberField";
const components: { [key: string]: React.FC<any> } = {
Select: SelectField,
@ -30,11 +31,12 @@ const components: { [key: string]: React.FC<any> } = {
MaltyFile: MaltyFile,
Checkbox: CheckboxField,
NumberFormate: NumberFormate,
Number: NumberField,
};
const ValidationField: React.FC<ValidationFieldProps> = React.memo(
({ type = "text", ...otherProps }) => {
const Component = components[type ?? ("text" as ValidationFieldType)];
({ type, ...otherProps }: any) => {
const Component = components[type as ValidationFieldType];
if (!Component) {
return <Default {...otherProps} />;

18
src/Components/ValidationField/View/CheckboxField.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { Checkbox } from "antd";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
import { Checkbox, Form } from "antd";
import { getNestedValue } from "../utils/getNestedValue";
const CheckboxField = ({
name,
label,
@ -13,21 +13,25 @@ const CheckboxField = ({
}: any) => {
const { t, formik, isError, errorMsg } = useFormField(name, props);
const CheckboxhandleChange = (value: any) => {
formik.setFieldValue(name, value?.target?.checked);
formik.setFieldValue(name, value?.target?.checked ? 1 : 0);
};
return (
<div className={Group ? "d-inline mt-3 Checkbox" : ``}>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<div className={Group ? "d-inline mt-3 Checkboxs" : ``}>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Checkbox
onChange={onChange || CheckboxhandleChange}
disabled={isDisabled}
checked={formik.values?.[name] ?? false}
checked={formik.values?.[name] === 1}
className={className}
>
{t(`input.${label ? label : name}`)}
</Checkbox>
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

35
src/Components/ValidationField/View/DataRange.tsx
View File

@ -3,8 +3,6 @@ import { Form, DatePicker } from "antd";
import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { MdOutlineEdit } from "react-icons/md";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
const { RangePicker } = DatePicker;
@ -26,16 +24,28 @@ const DataRange = ({
};
return (
<div className="ValidationField w-100 ">
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
)}
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<RangePicker
placeholder={placeholder}
size="large"
@ -45,9 +55,8 @@ const DataRange = ({
onChange={onChange || onCalendarChange}
disabled={isDisabled}
defaultValue={formik.values[name]}
id={name}
/>
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

41
src/Components/ValidationField/View/Date.tsx
View File

@ -3,9 +3,6 @@ import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { MdOutlineEdit } from "react-icons/md";
import dayjs from "dayjs";
import { DateEnum } from "../../../enums/Date";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
const Date = ({
name,
@ -24,21 +21,34 @@ const Date = ({
const FormikValue = formik.values[name];
const onCalendarChange = (value: any) => {
formik.setFieldValue(name, value);
// console.log(value,"value ");
};
const Formatter = [DateEnum?.FORMATE];
const Formater = "YYYY/MM/DD";
return (
<div className="ValidationField w-100 ">
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
)}
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<DatePicker
picker={picker}
placeholder={t(`input.${placeholder}`)}
@ -48,11 +58,10 @@ const Date = ({
size="large"
onChange={onChange || onCalendarChange}
disabled={isDisabled}
format={Formatter}
id={name}
format={Formater}
/>
{/* <DatePicker onChange={onChange} /> */}
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

51
src/Components/ValidationField/View/Default.tsx
View File

@ -1,10 +1,9 @@
import { Input } from "antd";
import { Form, Input } from "antd";
import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { MdOutlineEdit } from "react-icons/md";
import { Field } from "formik";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
import { FieldProps } from "../utils/types";
import { ValidationFieldPropsInput } from "../utils/types";
const Default = ({
name,
@ -15,34 +14,52 @@ const Default = ({
type,
no_label,
label_icon,
label2,
...props
}: any) => {
}: ValidationFieldPropsInput) => {
const { errorMsg, isError, t } = useFormField(name, props);
return (
<div className="ValidationField w-100">
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
{label2 ? (
<label htmlFor={name} className="text">
{label2}
</label>
) : no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : placeholder ? placeholder : name}`)}
</label>
)}
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Field
as={Input}
type={type ?? "text"}
placeholder={t(`input.${placeholder || label || name}`)}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
name={name}
id={name}
disabled={isDisabled}
size="large"
{...(type === "number" && { min: 0 })}
{...props}
/>
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

6
src/Components/ValidationField/View/DropFile.tsx.tsx
View File

@ -3,6 +3,7 @@ import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import { message, Upload } from "antd";
import type { GetProp, UploadProps } from "antd";
import useFormField from "../../../Hooks/useFormField";
import { ImageBaseURL } from "../../../api/config";
type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
@ -11,7 +12,7 @@ const DropFile = ({
label,
onChange,
isDisabled,
placeholder,
placholder,
className,
props,
no_label,
@ -22,7 +23,7 @@ const DropFile = ({
const FormikValue =
typeof FormikName === "string"
? FormikName
? ImageBaseURL + FormikName
: FormikName instanceof File
? URL.createObjectURL(FormikName)
: "";
@ -70,7 +71,6 @@ const DropFile = ({
showUploadList={false}
customRequest={customRequest}
onChange={onChange || handleChange}
id={name}
>
{imageUrl ? (
<img

21
src/Components/ValidationField/View/File.tsx
View File

@ -1,14 +1,14 @@
import { Button, Upload, UploadFile } from "antd";
import useFormField from "../../../Hooks/useFormField";
import { UploadOutlined } from "@ant-design/icons";
import React, { useMemo } from "react";
import { useMemo } from "react";
const File = ({
name,
label,
onChange,
isDisabled,
placeholder,
placholder,
className,
props,
}: any) => {
@ -16,29 +16,29 @@ const File = ({
let imageUrl = formik?.values?.[name] ?? null;
const fileList: UploadFile[] = useMemo(() => {
if (!imageUrl) {
return [];
}
if (!imageUrl) return [];
return [
typeof imageUrl === "string"
? {
uid: "-1",
name: "",
name: "uploaded-image",
status: "done",
url: imageUrl,
thumbUrl: imageUrl,
}
: {
uid: imageUrl.uid || "-1",
name: imageUrl.name || "",
name: imageUrl.name || "uploaded-image",
status: "done",
originFileObj: imageUrl,
},
];
}, [imageUrl]);
// console.log(1);
const FilehandleChange = (value: any) => {
// console.log(value,"filevalue");
if (value.fileList.length === 0) {
formik.setFieldValue(name, null);
} else {
@ -62,15 +62,12 @@ const File = ({
onChange={onChange || FilehandleChange}
customRequest={customRequest}
className={` w-100`}
id={name}
>
<Button
className={isError ? "isError w-100 " : " w-100"}
icon={<UploadOutlined />}
>
{placeholder
? t(`input.${placeholder}`)
: t("input.Click_to_upload_the_image")}
{placholder ?? t("input.Click_to_upload_the_image")}
</Button>
<div className="Error_color"> {isError ? "required" : ""}</div>
{errorMsg}
@ -79,4 +76,4 @@ const File = ({
);
};
export default React.memo(File);
export default File;

55
src/Components/ValidationField/View/LocalSearch.tsx
View File

@ -1,9 +1,8 @@
import { Select } from "antd";
import { Form, Select } from "antd";
import React, { useState } from "react";
import useFormField from "../../../Hooks/useFormField";
import { MdOutlineEdit } from "react-icons/md";
import { translateOptions } from "../utils/translatedOptions";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
const LocalSelectField = ({
name,
@ -14,9 +13,9 @@ const LocalSelectField = ({
isMulti,
onChange,
className,
props,
no_label,
label_icon,
...props
}: any) => {
const { errorMsg, isError, t, formik } = useFormField(name, props);
@ -30,6 +29,13 @@ const LocalSelectField = ({
option?.label?.toString().toLowerCase().includes(input.toLowerCase()) ||
option?.value?.toString().toLowerCase().includes(input.toLowerCase());
const SelectableChange = (value: {
value: string;
label: React.ReactNode;
}) => {
formik.setFieldValue(name, value);
};
const handleSelectChange = (value: any) => {
formik.setFieldValue(name, value);
if (onChange) onChange(value);
@ -41,21 +47,35 @@ const LocalSelectField = ({
return (
<div className="ValidationField w-100">
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
)}
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Select
placeholder={t(`input.${placeholder || label || name}`)}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
disabled={isDisabled}
options={translateOptions(option, t)}
size="large"
className={`${className} ${isError ? "SelectError" : ""} w-100`}
className={`${className} ${isError ? "Select_error" : ""} w-100`}
value={formik.values[name]}
allowClear
{...(isMulti && { mode: "multiple" })}
@ -64,11 +84,8 @@ const LocalSelectField = ({
filterOption={handleSearch} // Custom filter function
searchValue={searchValue} // Control the search input value
onSearch={handleSearchChange} // Update search input value on change
id={name}
fieldNames={{ label: "name", value: "id" }}
{...props}
/>
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

14
src/Components/ValidationField/View/MaltyFile.tsx
View File

@ -1,6 +1,6 @@
import React, { useMemo } from "react";
import { Button, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import useFormField from "../../../Hooks/useFormField";
const MaltyFile = ({
@ -15,10 +15,11 @@ const MaltyFile = ({
const { formik, t, isError } = useFormField(name, props);
let imageUrl = formik?.values?.[name] ?? null;
// Memoizing the fileList to prevent unnecessary recalculations
const fileList = useMemo(() => {
return imageUrl
// Mapping formik values to fileList format
const fileList = imageUrl
? imageUrl.map((file: any, index: number) => {
// console.log(file,"file");
return file instanceof File
? {
uid: index,
@ -36,7 +37,6 @@ const MaltyFile = ({
};
})
: [];
}, [imageUrl]); // Dependency array ensures it recalculates only when imageUrl changes
const FilehandleChange = ({ fileList }: any) => {
if (fileList.length === 0) {
@ -48,7 +48,6 @@ const MaltyFile = ({
);
}
};
// Custom request function
const customRequest = async ({ onSuccess }: any) => {
// Perform any necessary actions before onSuccess is called
@ -64,12 +63,11 @@ const MaltyFile = ({
<Upload
disabled={isDisabled}
listType="picture"
fileList={fileList} // Using memoized fileList
fileList={fileList} // Using fileList instead of defaultFileList
onChange={onChange || FilehandleChange}
customRequest={customRequest}
className={`${className} w-100`}
multiple // Allow multiple files to be selected
id={name}
>
<Button
className={isError ? "isError w-100" : " w-100"}

70
src/Components/ValidationField/View/NumberField.tsx Normal file
View File

@ -0,0 +1,70 @@
import { Form, Input, InputNumber } from "antd";
import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { MdOutlineEdit } from "react-icons/md";
import { Field } from "formik";
import { ValidationFieldPropsInput } from "../utils/types";
const NumberField = ({
name,
label,
placeholder,
isDisabled,
onChange,
type,
no_label,
label_icon,
...props
}: ValidationFieldPropsInput) => {
const { errorMsg, isError, t, formik } = useFormField(name, props);
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
console.log("Change:", e);
formik.setFieldValue(name, e);
};
return (
<div className="ValidationField w-100">
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : placeholder ? placeholder : name}`)}
</label>
)}
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Field
as={InputNumber}
type={type ?? "text"}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
name={name}
disabled={isDisabled}
size="large"
onChange={handleChange}
{...(type === "number" && { min: 0 })}
{...props}
/>
</Form.Item>
</div>
);
};
export default React.memo(NumberField);

46
src/Components/ValidationField/View/NumberFormate.tsx
View File

@ -1,19 +1,18 @@
import { InputNumber } from "antd";
import { Form, Input, InputNumber } from "antd";
import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { MdOutlineEdit } from "react-icons/md";
import { Field } from "formik";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
const NumberFormate = ({
name,
label,
placeholder,
isDisabled,
props,
type,
no_label,
label_icon,
...props
}: any) => {
const { errorMsg, isError, t, formik } = useFormField(name, props);
const SelectableChange = (value: {
@ -24,15 +23,28 @@ const NumberFormate = ({
};
return (
<div className="ValidationField w-100">
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : placeholder ? placeholder : name}`)}
</label>
)}
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Field
as={InputNumber}
formatter={(value: any) =>
@ -45,16 +57,16 @@ const NumberFormate = ({
type={type ?? "text"}
value={formik.values[name]}
onChange={SelectableChange}
placeholder={t(`input.${placeholder || label || name}`)}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
name={name}
disabled={isDisabled}
size="large"
id={name}
{...props}
// onChange={onChange ? onChange : handleChange}
/>
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

156
src/Components/ValidationField/View/SearchField.tsx
View File

@ -1,143 +1,87 @@
import { Select, Spin } from "antd";
import { Form, Select, Spin } from "antd";
import React, { useEffect, useState } from "react";
import useFormField from "../../../Hooks/useFormField";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
import { SearchFieldProps } from "../utils/types";
import { useValidationValidationParamState } from "../state/ValidationValidationParamState";
import { useDebounce } from "../../../Hooks/useDebounce";
import { useNavigate } from "react-router-dom";
import { MdOutlineEdit } from "react-icons/md";
const SearchField = ({
name,
label,
placeholder,
isDisabled,
searchBy = "search",
option = [],
searchBy,
option,
isMulti,
onChange,
className,
props,
no_label,
label_icon,
isLoading,
canChangePage,
PageName,
page,
...props
}: SearchFieldProps) => {
}: any) => {
const { errorMsg, isError, t, formik } = useFormField(name, props);
const { pushValidationParamState, setValidationParamState } =
useValidationValidationParamState();
const [AllPagesOption, setAllPagesOption] = useState<any>([]);
const [searchQuery, setSearchQuery] = useState<string>("");
const navigate = useNavigate();
useEffect(() => {
if (option?.length > 0) {
const NewOption = [...option, ...AllPagesOption];
const FilteredOption = NewOption.filter(
(value, index, self) =>
index === self.findIndex((t) => t.id === value.id),
);
const sortedNewOption = FilteredOption.sort((a, b) => a.id - b.id);
setAllPagesOption(sortedNewOption);
}
}, [option]);
useEffect(() => {
if (page === 1) {
setAllPagesOption(option);
}
}, [page]);
const searchParams = new URLSearchParams(window?.location?.search);
setSearchQuery(searchParams?.get("search") || "");
}, []);
const SelectableChange = (value: any) => {
const SelectableChange = (value: {
value: string;
label: React.ReactNode;
}) => {
formik?.setFieldValue(name, value);
const isCleared = value?.length === 0 || !value;
if (isCleared) {
if (PageName) {
setValidationParamState({
[PageName]: 1,
});
}
}
console.log(value, "value");
};
const handleChange = useDebounce((value: string) => {
if (PageName) {
pushValidationParamState({
[PageName]: 1,
const SearchHandleChange = (value: any) => {
navigate(`${window?.location?.pathname}?${searchBy}=${value}`, {
replace: true,
});
}
pushValidationParamState({
[searchBy]: value,
});
});
const handleBlur = () => {
if (PageName && page === 1) {
setValidationParamState({
[PageName]: null,
});
}
if (PageName && page !== 1) {
setValidationParamState({
[PageName]: 1,
});
// setAllPagesOption([]);
}
};
const handleScroll = (event: any) => {
const target = event.target;
const isAtBottom =
target.scrollHeight === target.scrollTop + target.clientHeight;
if (isAtBottom && canChangePage && PageName && page) {
console.log("Scrolled to the last option!");
let newPage = page + 1;
pushValidationParamState({
[PageName]: newPage,
});
}
};
console.log(AllPagesOption);
console.log(option,"option");
return (
<div className="ValidationField w-100 ">
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
)}
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Select
placeholder={t(`input.${placeholder || label || name}`)}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
disabled={isDisabled}
options={AllPagesOption}
options={option}
size="large"
className={`${className} w-100`}
value={formik.values[name]}
// loading={isLoading}
loading={isLoading}
allowClear
{...(isMulti && { mode: "multiple" })}
onChange={onChange || SelectableChange}
showSearch
optionFilterProp="name"
notFoundContent={isLoading ? <Spin /> : t("validation.undefined")}
onSearch={handleChange}
onBlur={handleBlur}
id={name}
onPopupScroll={handleScroll}
fieldNames={{ label: "name", value: "id" }}
{...props}
optionFilterProp="label"
notFoundContent={isLoading ? <Spin /> : "لا يوجد"}
onSearch={SearchHandleChange}
/>
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

60
src/Components/ValidationField/View/SelectField.tsx
View File

@ -1,10 +1,8 @@
import { Select } from "antd";
import { Form, Select, Spin } from "antd";
import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { MdOutlineEdit } from "react-icons/md";
import { translateOptions } from "../utils/translatedOptions";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
import { SelectFieldProps } from "../utils/types";
const SelectField = ({
name,
@ -15,11 +13,10 @@ const SelectField = ({
isMulti,
onChange,
className,
props,
no_label,
label_icon,
isLoading,
...props
}: SelectFieldProps) => {
}: any) => {
const { errorMsg, isError, t, formik } = useFormField(name, props);
const SelectableChange = (value: {
value: string;
@ -27,36 +24,47 @@ const SelectField = ({
}) => {
formik.setFieldValue(name, value);
};
const options = translateOptions(option, t);
// console.log(name,"Select");
return (
<div className="ValidationField w-100">
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
)}
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Select
placeholder={t(`input.${placeholder || label || name}`)}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
disabled={isDisabled}
options={options}
{...(isLoading && { loading: isLoading })}
options={translateOptions(option, t)}
loading={option?.length < 1}
size="large"
className={`${className} ${isError ? "SelectError" : ""} w-100`}
className={`${className} ${isError ? "Select_error" : ""} w-100`}
value={formik.values[name]}
allowClear
{...(isMulti && { mode: "multiple" })}
onChange={onChange || SelectableChange}
showSearch={false}
id={name}
fieldNames={{label:"name",value:"id"}}
{...props}
/>
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

15
src/Components/ValidationField/View/TextAreaField.tsx
View File

@ -1,8 +1,7 @@
import { Input } from "antd";
import { Form, Input } from "antd";
import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { Field } from "formik";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
const { TextArea } = Input;
const TextAreaField = ({
@ -12,12 +11,14 @@ const TextAreaField = ({
isDisabled,
onChange,
props,
type,
}: any) => {
const { formik, isError, errorMsg, t } = useFormField(name, props);
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
// console.log('Change:', e.target.value);
formik.setFieldValue(name, e.target.value);
};
@ -26,7 +27,11 @@ const TextAreaField = ({
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Field
as={TextArea}
placeholder={t(`input.${placeholder ? placeholder : name}`)}
@ -34,10 +39,10 @@ const TextAreaField = ({
disabled={isDisabled}
size="large"
onChange={onChange || handleChange}
id={name}
// onChange={onChange ? onChange : handleChange}
/>
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

36
src/Components/ValidationField/View/TextField.tsx
View File

@ -3,8 +3,6 @@ import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { MdOutlineEdit } from "react-icons/md";
import { Field } from "formik";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
const { TextArea } = Input;
const TextField = ({
@ -23,20 +21,33 @@ const TextField = ({
const TextFilehandleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
// console.log('Change:', e.target.value);
formik.setFieldValue(name, e.target.value);
};
return (
<div className={`ValidationField w-100 ${className ?? ""} `}>
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{label2 ? label2 : t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{label2 ? label2 : t(`input.${label ? label : name}`)}
</label>
)}
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Field
as={TextArea}
placeholder={t(`input.${placeholder ? placeholder : name}`)}
@ -47,9 +58,8 @@ const TextField = ({
maxLength={1000}
onChange={onChange || TextFilehandleChange}
style={{ height: 120 }}
id={name}
/>
</ValidationFieldContainer>
</Form.Item>
</div>
);
};

36
src/Components/ValidationField/View/Time.tsx
View File

@ -3,7 +3,6 @@ import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { MdOutlineEdit } from "react-icons/md";
import dayjs from "dayjs";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
const Time = ({
name,
@ -21,19 +20,27 @@ const Time = ({
formik.setFieldValue(name, value);
};
const Formatter = "H:mm";
const Formater = "H:mm";
const FormikValue = formik.values[name];
return (
<div className="ValidationField w-100 ">
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
)}
<Form.Item
hasFeedback
@ -44,13 +51,14 @@ const Time = ({
allowClear
className={`${className} w-100`}
size="large"
value={FormikValue ? dayjs(FormikValue, Formatter) : null}
value={FormikValue ? dayjs(FormikValue, Formater) : null}
onChange={onChange || onCalendarChange}
disabled={isDisabled}
placeholder={t(`input.${placeholder || label || name}`)}
format={Formatter}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
format={Formater}
needConfirm={false}
id={name}
/>
</Form.Item>
</div>

24
src/Components/ValidationField/components/ValidationFieldContainer.tsx
View File

@ -1,24 +0,0 @@
import React, { FC } from "react";
import { Form } from "antd";
interface ValidationFieldContainerProps {
children: React.ReactNode;
isError: boolean;
errorMsg: string;
}
export const ValidationFieldContainer: FC<ValidationFieldContainerProps> = ({
children,
isError,
errorMsg,
}) => (
<div className="ValidationFieldContainer">
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
{children}
</Form.Item>
</div>
);

39
src/Components/ValidationField/components/ValidationFieldLabel.tsx
View File

@ -1,39 +0,0 @@
import React from "react";
import { MdOutlineEdit } from "react-icons/md";
interface ValidationFieldLabelProps {
name: string;
label?: string;
no_label?: boolean;
label_icon?: boolean;
placeholder?: string;
t: (key: string) => string;
}
export const ValidationFieldLabel: React.FC<ValidationFieldLabelProps> = ({
name,
label,
placeholder,
no_label,
label_icon,
t,
}) => (
<>
{no_label ? (
<label htmlFor={name} className="text">
<span>empty</span>
</label>
) : label_icon ? (
<div className="LabelWithIcon">
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
</div>
) : (
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
)}
</>
);

2
src/Components/ValidationField/index.tsx
View File

@ -2,6 +2,7 @@ import { useState } from "react";
import { ErrorMessage, useField, Field, useFormikContext } from "formik";
import { useTranslation } from "react-i18next";
import { FaExclamationCircle } from "react-icons/fa";
import { convert_data_to_select } from "../../Layout/app/Const";
export {
useState,
@ -11,4 +12,5 @@ export {
useFormikContext,
useTranslation,
FaExclamationCircle,
convert_data_to_select,
};

36
src/Components/ValidationField/state/ValidationValidationParamState.ts
View File

@ -1,36 +0,0 @@
import { create } from "zustand";
interface ValidationParamState {
[key: string]: any;
}
interface ModalState {
ValidationParamState: ValidationParamState;
setValidationParamState: (validationParamState: ValidationParamState) => void;
pushValidationParamState: (
validationParamState: ValidationParamState,
) => void;
clearValidationParamState: () => void;
}
export const useValidationValidationParamState = create<ModalState>((set) => ({
ValidationParamState: {},
setValidationParamState: (validationParamState) =>
set(() => ({
ValidationParamState: validationParamState,
})),
pushValidationParamState: (validationParamState) =>
set((state) => ({
ValidationParamState: {
...state.ValidationParamState,
...validationParamState,
},
})),
clearValidationParamState: () =>
set({
ValidationParamState: {},
}),
}));

31
src/Components/ValidationField/utils/ValidationField.scss
View File

@ -21,7 +21,7 @@
border: 1px solid var(--border-color);
}
.SelectError {
.Select_error {
.ant-select-selector {
border: 1px solid red !important;
}
@ -60,9 +60,12 @@
.ant-upload-select {
width: 100%;
}
.Checkbox {
.Checkboxs {
padding: 4%;
}
.ant-checkbox-wrapper {
min-width: 100px;
}
.SearchField {
button {
background: var(--primary);
@ -198,3 +201,27 @@ input:-webkit-autofill:hover {
.TwoSelectGroupbutton {
margin-bottom: 20px;
}
.ant-checkbox-wrapper {
margin-top: 25px !important;
}
.add_new_button {
margin-bottom: 20px;
svg {
color: var(--primary);
}
}
.ValidationField:has(.input_number) {
max-width: 100px;
.input_number {
max-width: 100px;
}
}
.flex {
display: flex;
gap: 30px;
max-width: 80% !important;
}

7
src/Components/ValidationField/utils/getNestedValue.ts Normal file
View File

@ -0,0 +1,7 @@
export function getNestedValue(obj: any, path: any) {
return path
.replace(/\?.\[|\]\[|\]\.?/g, ".") // Replace question mark and square brackets
.split(".") // Split by dots
.filter(Boolean) // Remove empty strings
.reduce((acc: any, key: any) => acc && acc[key], obj); // Access nested properties
}

5
src/Components/ValidationField/utils/translatedOptions.ts
View File

@ -1,7 +1,6 @@
export const translateOptions = (options: any, t: any) => {
return options?.map((opt: any) => ({
return options.map((opt: any) => ({
...opt,
label: t(`${opt?.label}`),
name: t(`${opt?.name}`),
label: t(`${opt.label}`),
}));
};

226
src/Components/ValidationField/utils/types.ts
View File

@ -1,60 +1,148 @@
import { InputProps, SelectProps } from "antd";
import { InputProps } from "antd";
// Common properties for all field types
interface BaseFieldProps {
export type ValidationFieldType =
| "text"
| "Select"
| "LocalSearch"
| "Search"
| "DataRange"
| "Date"
| "Time"
| "File"
| "MaltyFile"
| "DropFile"
| "Checkbox"
| "number"
| "password"
| "email"
| "TextArea";
export interface ValidationFieldPropsText {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "text";
placeholder?: string;
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
}
export interface ValidationFieldPropsSelect {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "Select";
placeholder?: string;
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: any;
dir?: "ltr" | "rtl";
option: any[];
isMulti?: boolean;
}
export interface ValidationFieldPropsLocalSearch {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "LocalSearch";
placeholder?: string;
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
option: any[];
isMulti?: boolean;
}
export interface ValidationFieldPropsSearch {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "Search";
placeholder?: string;
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
option: any[];
isMulti?: boolean;
searchBy: string;
isLoading?: any;
}
export interface ValidationFieldPropsDataRange {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "DataRange";
placeholder?: string;
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM" | "YYYY-MM-DD HH:mm:ss.SSS";
}
export interface ValidationFieldPropsDate {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "Date";
placeholder?: string;
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
picker?: "data" | "week" | "month" | "quarter" | "year";
}
export interface ValidationFieldPropsTime {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "Time";
label?: string;
placeholder?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
no_label?: boolean;
label_icon?: boolean;
}
// Specific field type properties
export type SelectFieldProps = BaseFieldProps &
SelectProps & {
type: "Select" | "LocalSearch";
option: any[];
isMulti?: boolean;
isLoading?: boolean;
searchBy?: string;
canChangePage?: boolean;
PageName?: string;
page?: number;
};
export type SearchFieldProps = BaseFieldProps &
SelectProps & {
type: "Search";
option: any[];
isMulti?: boolean;
isLoading: boolean;
searchBy: string;
canChangePage: boolean;
PageName: string;
page: number;
};
type DateFieldProps = BaseFieldProps & {
type: "DataRange" | "Date" | "Time";
Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM" | "YYYY-MM-DD HH:mm:ss.SSS";
picker?: "data" | "week" | "month" | "quarter" | "year";
};
type FileFieldProps = BaseFieldProps & {
export interface ValidationFieldPropsFile {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "File" | "MaltyFile" | "DropFile";
};
type CheckboxFieldProps = BaseFieldProps & {
placeholder?: string;
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
}
export interface ValidationFieldPropsCheckbox {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "Checkbox";
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
Group?: boolean;
};
export type FieldProps = BaseFieldProps &
InputProps & {
}
export interface ValidationFieldPropstext {
name: string;
no_label?: boolean;
label_icon?: boolean;
type?:
| "text"
| "number"
@ -62,19 +150,45 @@ export type FieldProps = BaseFieldProps &
| "email"
| "TextArea"
| "NumberFormate";
label?: string;
label2?: string;
className?: string;
placeholder?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
Group?: boolean;
[key: string]: any;
};
[key: string]: any; // Index signature to allow any additional props
}
///// new
export interface BaseField {
name: string;
label?: string;
placeholder?: string;
}
export type OmitBaseType = "placeholder" | "name" | "label" | "type";
export type OmitPicker = OmitBaseType | "format";
export interface ValidationFieldPropsInput
extends Omit<InputProps, OmitBaseType>,
BaseField {
type: "text" | "number" | "password" | "email" | "Number";
isDisabled?: boolean;
no_label?: string;
label_icon?: string;
label2?: string;
}
// Union type for all field types
export type ValidationFieldProps =
| SelectFieldProps
| DateFieldProps
| FileFieldProps
| CheckboxFieldProps
| SearchFieldProps
| FieldProps;
// Validation field type
export type ValidationFieldType = ValidationFieldProps["type"];
| ValidationFieldPropsInput
| ValidationFieldPropsSelect
| ValidationFieldPropsLocalSearch
| ValidationFieldPropsDataRange
| ValidationFieldPropsDate
| ValidationFieldPropsTime
| ValidationFieldPropsFile
| ValidationFieldPropsCheckbox
| ValidationFieldPropstext
| ValidationFieldPropsSearch;

25
src/Hooks/useDebounce.ts
View File

@ -1,25 +0,0 @@
import { useCallback, useRef } from "react";
export const DEBOUNCE_DELAY = 500;
export const useDebounce = (
callback: (...args: any[]) => void,
delay: number = DEBOUNCE_DELAY,
) => {
const timeoutRef = useRef<any>(null);
const debouncedCallback = useCallback(
(...args: any[]) => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
timeoutRef.current = setTimeout(() => {
callback(...args);
}, delay);
},
[callback, delay],
);
return debouncedCallback;
};

8
src/Layout/Ui/SideBar.tsx
View File

@ -9,8 +9,6 @@ import { useTranslation } from "react-i18next";
import { getLocalStorage } from "../../utils/LocalStorage";
import { BRANCH_OBJECT_KEY } from "../../config/AppKey";
import { MenuItem } from "../../Components/Layout/SideBar/MenuItem";
import { UserTypeEnum } from "../../enums/UserType";
import { RoleByType } from "../../utils/RoleByType";
const SideBar = () => {
const location = useLocation();
@ -19,6 +17,7 @@ const SideBar = () => {
const { logout } = useAuthState();
const [t] = useTranslation();
const branch_name = getLocalStorage(BRANCH_OBJECT_KEY)?.name;
return (
<div className="side_bar">
<h1>
@ -32,11 +31,6 @@ const SideBar = () => {
if (!useAbility) {
return <React.Fragment key={index}></React.Fragment>;
}
if(!RoleByType(item)){
return <React.Fragment key={index}></React.Fragment> ;
}
return (
<MenuItem
key={index}

25
src/Pages/Auth/LoginForm.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React from "react";
import { Formik } from "formik";
import useAuthState from "../../zustand/AuthState";
import useNavigateOnSuccess from "../../Hooks/useNavigateOnSuccess";
@ -8,9 +8,6 @@ import { initialValues } from "./formutils";
import { FormValues } from "../../types/Auth";
import { toast } from "react-toastify";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { getLocalStorage } from "../../utils/LocalStorage";
import { USER_KEY } from "../../config/AppKey";
const LoginForm = () => {
const { mutate, isLoading, isSuccess, data } = useLoginAdmin();
@ -19,27 +16,11 @@ const LoginForm = () => {
mutate(values);
};
const { login,isAuthenticated} = useAuthState();
const { login } = useAuthState();
const LoginData = {
...data,
} as any;
const navigate = useNavigate()
const LocalType = getLocalStorage(USER_KEY)?.type ?? false ;
useEffect(() => {
if(isSuccess){
login(LoginData?.data as any)
}
}, [isSuccess])
useEffect(() => {
if(LocalType ){
window.location.href = ("/")
}
}, [LocalType])
useNavigateOnSuccess(isSuccess, "/", () => login(LoginData?.data as any));
return (
<div className="LoginForm">

9
src/Pages/Package/Field/ConfigurationField.tsx
View File

@ -1,9 +0,0 @@
import React from 'react'
const ConfigurationField = () => {
return (
<div>ConfigurationField</div>
)
}
export default ConfigurationField

96
src/Pages/Package/Field/FieldGroup.tsx
View File

@ -1,96 +0,0 @@
import React from "react";
import { Input, Button } from "antd";
import { useFormikContext } from "formik";
import { useTranslation } from "react-i18next";
interface FieldGroupProps {
array_name: string;
title:string;
static?: boolean;
only_value?: boolean;
}
const FieldGroup: React.FC<FieldGroupProps> = ({ array_name ,title,static:isStatic,only_value}) => {
const { values, setFieldValue } = useFormikContext<any>();
const addFieldGroup = () => {
setFieldValue(array_name, [
...(values?.[array_name] || []),
{ key: null, value: null },
]);
};
const deleteFieldGroup = () => {
const updatedArray = values?.[array_name]?.slice(0, -1) || [];
setFieldValue(array_name, updatedArray);
};
const handleChangeKey = (
e: React.ChangeEvent<HTMLInputElement>,
index: number
) => {
const Selects = values?.[array_name] ?? [];
Selects[index].key = e.target.value;
setFieldValue(array_name, Selects);
};
const handleChangeValue = (
e: React.ChangeEvent<HTMLInputElement>,
index: number
) => {
const Selects = values?.[array_name] ?? [];
Selects[index].value = e.target.value;
setFieldValue(array_name, Selects);
};
const selectsArray = values?.[array_name] ?? [];
const { t } = useTranslation();
return (
<>
<label htmlFor={array_name} className="text">
<h5 className="mb-2">{t(`header.${title}`)}</h5>
</label>
{selectsArray.map((group: { key: string; value: string }, index: number) => (
<div key={index} className="d-flex gap-2 mb-3">
<Input
placeholder={t("practical.key")}
onChange={(e) => handleChangeKey(e, index)}
value={group.key}
size="large"
style={{ width: "100%" }}
allowClear
disabled={only_value}
/>
<Input
placeholder={t("practical.value")}
onChange={(e) => handleChangeValue(e, index)}
value={group.value}
size="large"
style={{ width: "100%" }}
allowClear
/>
</div>
))}
{!isStatic &&
<div className="d-flex gap-2 mb-4">
<Button
type="dashed"
onClick={addFieldGroup}
>
{t("practical.add_new")}
</Button>
<Button
type="dashed"
onClick={deleteFieldGroup}
>
{t("practical.delete_last")}
</Button>
</div>
}
</>
);
};
export default FieldGroup;

57
src/Pages/Package/Model/AddModel.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
@ -6,53 +6,40 @@ import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddPackage } from "../../../api/package";
import FormikForm from "../../../Layout/Dashboard/FormikForm";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { PackageInitialValues } from "../../../types/Package";
import { arrayToObject } from "../../../utils/arrayToObject";
const AddModel: React.FC = () => {
const { mutate, status ,isLoading,isSuccess} = useAddPackage();
const [t] = useTranslation();
const navigate = useNavigate()
const handleSubmit = (values: PackageInitialValues) => {
const DataToSend = JSON.parse(JSON.stringify(values) );
console.log(DataToSend,"DataToSend");
console.log(values?.configuration);
const configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
console.log(configuration);
const { mutate, status } = useAddPackage();
const handleSubmit = (values: any) => {
mutate({
...values,
});
};
useEffect(() => {
if(isSuccess){
navigate("/package")
}
}, [isSuccess])
useSetPageTitle(t(`page_header.package`));
return (
<div className="page">
<>
{/* <LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.Package_ADD}
modelTitle="package"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues({})}
getValidationSchema={getValidationSchema}
>
<ModelForm />
moaz
</LayoutModel> */}
casascaas
<FormikForm
handleSubmit={handleSubmit}
initialValues={getInitialValues({})}
initialValues={getInitialValues('')}
validationSchema={getValidationSchema}
>
<header>
{t("header.add_new_package")}
</header>
<main className="w-100 exercise_add_main">
<ModelForm />
<div className="exercise_add_buttons">
<button disabled={isLoading} className="relative button center" type="submit">
{/* <div onClick={handleCancel}>{t("practical.back")}</div> */}
{/* <button disabled={isLoading} className="relative" type="submit">
{t("practical.add")}
{isLoading && (
@ -60,11 +47,11 @@ const AddModel: React.FC = () => {
<Spin />
</span>
)}
</button>
</button> */}
</div>
</main>
</FormikForm>
</div>
</>
);
};

79
src/Pages/Package/Model/EditModel.tsx
View File

@ -1,78 +1,35 @@
import React, { useEffect } from "react";
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import ModelForm from "./ModelForm";
import FormikForm from "../../../Layout/Dashboard/FormikForm";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { PackageInitialValues } from "../../../types/Package";
import { arrayToObject } from "../../../utils/arrayToObject";
import { useGetAllPackage, useUpdatePackage } from "../../../api/package";
import { ParamsEnum } from "../../../enums/params";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import SpinContainer from "../../../Components/Layout/SpinContainer";
import { useUpdatePackage } from "../../../api/package";
const EditModel: React.FC = () => {
const { mutate, status ,isLoading,isSuccess} = useUpdatePackage();
const [t] = useTranslation();
const {package_id} = useParams<ParamsEnum>();
const {objectToEdit} = useObjectToEdit();
const {data,isLoading:isLoadingData} = useGetAllPackage({show:package_id})
console.log(data?.data,"data");
const handleSubmit = (values: PackageInitialValues) => {
const DataToSend = JSON.parse(JSON.stringify(values) );
console.log(DataToSend,"DataToSend");
console.log(values?.configuration);
const configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
console.log(configuration);
const { mutate, status } = useUpdatePackage();
const { objectToEdit } = useObjectToEdit((state) => state);
const handleSubmit = (values: any) => {
mutate({
...values,
});
};
const navigate = useNavigate()
useEffect(() => {
if(isSuccess){
navigate("/package")
}
}, [isSuccess])
useSetPageTitle(t(`page_header.package`));
if(isLoadingData){
return <SpinContainer/>
}
return (
<div className="page">
<FormikForm
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.Package_EDIT}
modelTitle="package_details"
handleSubmit={handleSubmit}
initialValues={getInitialValues(data?.data)}
validationSchema={getValidationSchema}
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema}
isAddModal={false}
>
<header>
{t("header.edit_package")}
</header>
<main className="w-100 exercise_Edit_main">
<ModelForm />
<div className="exercise_Edit_buttons">
<button disabled={isLoading} className="relative button center" type="submit">
{t("practical.edit")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</div>
</LayoutModel>
</>
);
};

226
src/Pages/Package/Model/ModelForm.tsx
View File

@ -1,237 +1,15 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useGetAllGrade } from "../../../api/grade";
import { useGetAllSubject } from "../../../api/subject";
import { useGetAllUnit } from "../../../api/unit";
import { useGetAllCurriculum } from "../../../api/curriculum";
import { useGetAllLesson } from "../../../api/lesson";
import { useFormikContext } from "formik";
import { PackageInitialValues } from "../../../types/Package";
import { useValidationValidationParamState } from "../../../Components/ValidationField/state/ValidationValidationParamState";
import { useEffect } from "react";
import ConfigurationField from "../Field/ConfigurationField";
import FieldGroup from "../Field/FieldGroup";
const Form = () => {
const { values, setFieldValue } = useFormikContext<PackageInitialValues>();
const { ValidationParamState } = useValidationValidationParamState();
const {
GradeName, GradeCurrentPage,
SubjectName, SubjectCurrentPage,
UnitName, UnitCurrentPage,
CurriculumName, CurriculumCurrentPage,
LessonName, LessonCurrentPage
} = ValidationParamState;
const { curriculums_ids, grade_id, subjects_ids, units_ids, lessons_ids } = values;
/// grade_id
const GradeDisabled = !!grade_id;
const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
name: GradeName,
page: GradeCurrentPage
});
const GradeOption = Grade?.data ?? []
const canChangeGradePage = !!Grade?.links?.next;
const GradePage = Grade?.meta?.currentPage;
/// subjects_ids
const SubjectDisabled = !!subjects_ids && subjects_ids?.length > 0;
const { data: Subject, isLoading: isLoadingSubject } = useGetAllSubject({
grade_id: grade_id,
name: SubjectName,
page: SubjectCurrentPage
}, { enabled: GradeDisabled });
const SubjectOption = Subject?.data ?? []
const canChangeSubjectPage = !!Subject?.links?.next;
const SubjectPage = Subject?.meta?.currentPage;
/// units_ids
const UnitDisabled = !!units_ids && units_ids?.length > 0;
const { data: Unit, isLoading: isLoadingUnit } = useGetAllUnit({
subjects_ids: subjects_ids,
name: UnitName,
page: UnitCurrentPage
}, { enabled: SubjectDisabled });
const UnitOption = Unit?.data ?? []
const canChangeUnitPage = !!Unit?.links?.next;
const UnitPage = Unit?.meta?.currentPage;
/// curriculums_ids
const CurriculumDisabled = !!curriculums_ids && curriculums_ids?.length > 0;
const { data: Curriculum, isLoading: isLoadingCurriculum } = useGetAllCurriculum({
units_ids: units_ids,
name: CurriculumName,
page: CurriculumCurrentPage
}, { enabled: UnitDisabled });
const CurriculumOption = Curriculum?.data ?? []
const canChangeCurriculumPage = !!Curriculum?.links?.next;
const CurriculumPage = Curriculum?.meta?.currentPage;
/// lessons_ids
const { data: Lesson, isLoading: isLoadingLesson } = useGetAllLesson({
curriculums_ids: curriculums_ids,
name: LessonName,
page: LessonCurrentPage
}, { enabled: CurriculumDisabled });
const LessonOption = Lesson?.data ?? []
const canChangeLessonPage = !!Lesson?.links?.next;
const LessonPage = Lesson?.meta?.currentPage;
useEffect(() => {
const GradeChildren = (subjects_ids && subjects_ids?.length > 0 || units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0);
if (!grade_id && GradeChildren) {
setFieldValue("subjects_ids", []);
setFieldValue("units_ids", []);
setFieldValue("curriculums_ids", []);
setFieldValue("lessons_ids", []);
return;
}
console.log(1);
const SubjectChildren = (units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
console.log( subjects_ids && subjects_ids?.length < 1 && SubjectChildren);
if (subjects_ids && subjects_ids?.length < 1 && SubjectChildren) {
console.log(1);
setFieldValue("units_ids", []);
setFieldValue("curriculums_ids", []);
setFieldValue("lessons_ids", []);
return;
}
const UnitChildren = (curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
if (units_ids && units_ids?.length < 1 && UnitChildren) {
setFieldValue("curriculums_ids", []);
setFieldValue("lessons_ids", []);
return;
}
const CurriculumChildren = (lessons_ids && lessons_ids?.length > 0)
if (curriculums_ids && curriculums_ids?.length < 1 && CurriculumChildren) {
setFieldValue("lessons_ids", []);
return;
}
}, [grade_id, subjects_ids, units_ids, curriculums_ids])
return (
<Row className="w-100">
<Col>
<ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="price" label="price" name="price" type="number" />
<FieldGroup array_name='configuration' title='configuration' />
<ValidationField placeholder="price" label="price" name="price" />
<ValidationField placeholder="name" label="name" name="name" />
</Col>
<Col>
{/*
grade_id
*/}
<ValidationField
searchBy="GradeName"
name="grade_id"
label="grade"
type="Search"
option={GradeOption}
isLoading={isLoadingGrade}
canChangePage={canChangeGradePage}
PageName={"GradeCurrentPage"}
page={GradePage}
/>
{/*
subjects_ids
*/}
<ValidationField
searchBy="SubjectName"
name="subjects_ids"
label="subject"
type="Search"
option={SubjectOption}
isMulti
isLoading={isLoadingSubject}
canChangePage={canChangeSubjectPage}
PageName={"SubjectCurrentPage"}
page={SubjectPage}
disabled={!GradeDisabled}
/>
{/*
units_ids
*/}
<ValidationField
searchBy="UnitName"
name="units_ids"
label="unit"
type="Search"
option={UnitOption}
isMulti
isLoading={isLoadingUnit}
canChangePage={canChangeUnitPage}
PageName={"UnitCurrentPage"}
page={UnitPage}
disabled={!SubjectDisabled}
/>
{/*
curriculums_ids
*/}
<ValidationField
searchBy="CurriculumName"
name="curriculums_ids"
label="curriculum"
type="Search"
option={CurriculumOption}
isMulti
isLoading={isLoadingCurriculum}
canChangePage={canChangeCurriculumPage}
PageName={"CurriculumCurrentPage"}
page={CurriculumPage}
disabled={!UnitDisabled}
/>
{/*
lessons_ids
*/}
<ValidationField
searchBy="LessonName"
name="lessons_ids"
label="lesson"
type="Search"
option={LessonOption}
isMulti
isLoading={isLoadingLesson}
canChangePage={canChangeLessonPage}
PageName={"LessonCurrentPage"}
page={LessonPage}
disabled={!CurriculumDisabled}
/>
</Col>
</Row>
);
};

20
src/Pages/Package/Model/formUtil.ts
View File

@ -1,32 +1,16 @@
import * as Yup from "yup";
import { Package, PackageInitialValues } from "../../../types/Package";
import { arrayToObject } from "../../../utils/arrayToObject";
import { objectToArray } from "../../../utils/objectToArray";
export const getInitialValues = (objectToEdit: Partial<Package>): PackageInitialValues => {
console.log(objectToEdit,"objectToEdit");
const configuration = Array.isArray(objectToEdit?.configuration) ? objectToEdit?.configuration : objectToArray(objectToEdit?.configuration)
export const getInitialValues = (objectToEdit: any): any => {
return {
id: objectToEdit?.id ?? null,
name: objectToEdit?.name ?? null,
price: objectToEdit?.price ?? null,
grade_id: objectToEdit?.grade_id ?? null,
curriculums_ids: objectToEdit?.curriculums_ids ?? [],
lessons_ids: objectToEdit?.lessons_ids ?? [],
subjects_ids: objectToEdit?.subjects_ids ?? [],
units_ids: objectToEdit?.units_ids ?? [],
configuration: configuration ?? [{key:"",value:""}],
};
};
export const getValidationSchema = () => {
return Yup.object().shape({
name: Yup.string().required("validation.required"),
price: Yup.number().required("validation.required").typeError("validation.Must_be_a_number"),
grade_id: Yup.string().required("validation.required"),
curriculums_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
lessons_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
subjects_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
units_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
});
};

9
src/Pages/Package/PackageItem/Field/ConfigurationField.tsx
View File

@ -1,9 +0,0 @@
import React from 'react'
const ConfigurationField = () => {
return (
<div>ConfigurationField</div>
)
}
export default ConfigurationField

96
src/Pages/Package/PackageItem/Field/FieldGroup.tsx
View File

@ -1,96 +0,0 @@
import React from "react";
import { Input, Button } from "antd";
import { useFormikContext } from "formik";
import { useTranslation } from "react-i18next";
interface FieldGroupProps {
array_name: string;
title:string;
static?: boolean;
only_value?: boolean;
}
const FieldGroup: React.FC<FieldGroupProps> = ({ array_name ,title,static:isStatic,only_value}) => {
const { values, setFieldValue } = useFormikContext<any>();
const addFieldGroup = () => {
setFieldValue(array_name, [
...(values?.[array_name] || []),
{ key: null, value: null },
]);
};
const deleteFieldGroup = () => {
const updatedArray = values?.[array_name]?.slice(0, -1) || [];
setFieldValue(array_name, updatedArray);
};
const handleChangeKey = (
e: React.ChangeEvent<HTMLInputElement>,
index: number
) => {
const Selects = values?.[array_name] ?? [];
Selects[index].key = e.target.value;
setFieldValue(array_name, Selects);
};
const handleChangeValue = (
e: React.ChangeEvent<HTMLInputElement>,
index: number
) => {
const Selects = values?.[array_name] ?? [];
Selects[index].value = e.target.value;
setFieldValue(array_name, Selects);
};
const selectsArray = values?.[array_name] ?? [];
const { t } = useTranslation();
return (
<>
<label htmlFor={array_name} className="text">
<h5 className="mb-2">{t(`header.${title}`)}</h5>
</label>
{selectsArray.map((group: { key: string; value: string }, index: number) => (
<div key={index} className="d-flex gap-2 mb-3">
<Input
placeholder={t("practical.key")}
onChange={(e) => handleChangeKey(e, index)}
value={group.key}
size="large"
style={{ width: "100%" }}
allowClear
disabled={only_value}
/>
<Input
placeholder={t("practical.value")}
onChange={(e) => handleChangeValue(e, index)}
value={group.value}
size="large"
style={{ width: "100%" }}
allowClear
/>
</div>
))}
{!isStatic &&
<div className="d-flex gap-2 mb-4">
<Button
type="dashed"
onClick={addFieldGroup}
>
{t("practical.add_new")}
</Button>
<Button
type="dashed"
onClick={deleteFieldGroup}
>
{t("practical.delete_last")}
</Button>
</div>
}
</>
);
};
export default FieldGroup;

66
src/Pages/Package/PackageItem/Model/AddModel.tsx
View File

@ -1,66 +0,0 @@
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../../enums/Model";
import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddPackage } from "../../../../api/package";
import FormikForm from "../../../../Layout/Dashboard/FormikForm";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
import { PackageInitialValues } from "../../../../types/Package";
import { arrayToObject } from "../../../../utils/arrayToObject";
const AddModel: React.FC = () => {
const { mutate, status ,isLoading} = useAddPackage();
const [t] = useTranslation();
const navigate = useNavigate()
const handleSubmit = (values: PackageInitialValues) => {
const DataToSend = JSON.parse(JSON.stringify(values) );
console.log(DataToSend,"DataToSend");
console.log(values?.configuration);
const configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
console.log(configuration);
mutate({
...values,
});
};
useSetPageTitle(t(`page_header.package`));
return (
<div className="page">
<FormikForm
handleSubmit={handleSubmit}
initialValues={getInitialValues({})}
validationSchema={getValidationSchema}
>
<header>
{t("header.add_new_package")}
</header>
<main className="w-100 exercise_add_main">
<ModelForm />
<div className="exercise_add_buttons">
<button disabled={isLoading} className="relative button center" type="submit">
{t("practical.add")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</div>
);
};
export default AddModel;

73
src/Pages/Package/PackageItem/Model/EditModel.tsx
View File

@ -1,73 +0,0 @@
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import ModelForm from "./ModelForm";
import FormikForm from "../../../../Layout/Dashboard/FormikForm";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
import { PackageInitialValues } from "../../../../types/Package";
import { arrayToObject } from "../../../../utils/arrayToObject";
import { useGetAllPackage, useUpdatePackage } from "../../../../api/package";
import { ParamsEnum } from "../../../../enums/params";
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
import SpinContainer from "../../../../Components/Layout/SpinContainer";
const EditModel: React.FC = () => {
const { mutate, status ,isLoading} = useUpdatePackage();
const [t] = useTranslation();
const {package_id} = useParams<ParamsEnum>();
const {objectToEdit} = useObjectToEdit();
const {data,isLoading:isLoadingData} = useGetAllPackage({show:package_id})
console.log(data?.data,"data");
const handleSubmit = (values: PackageInitialValues) => {
const DataToSend = JSON.parse(JSON.stringify(values) );
console.log(DataToSend,"DataToSend");
console.log(values?.configuration);
const configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
console.log(configuration);
mutate({
...values,
});
};
useSetPageTitle(t(`page_header.package`));
if(isLoadingData){
return <SpinContainer/>
}
return (
<div className="page">
<FormikForm
handleSubmit={handleSubmit}
initialValues={getInitialValues(data?.data)}
validationSchema={getValidationSchema}
>
<header>
{t("header.edit_package")}
</header>
<main className="w-100 exercise_Edit_main">
<ModelForm />
<div className="exercise_Edit_buttons">
<button disabled={isLoading} className="relative button center" type="submit">
{t("practical.edit")}
{isLoading && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</main>
</FormikForm>
</div>
);
};
export default EditModel;

238
src/Pages/Package/PackageItem/Model/ModelForm.tsx
View File

@ -1,238 +0,0 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { useGetAllGrade } from "../../../../api/grade";
import { useGetAllSubject } from "../../../../api/subject";
import { useGetAllUnit } from "../../../../api/unit";
import { useGetAllCurriculum } from "../../../../api/curriculum";
import { useGetAllLesson } from "../../../../api/lesson";
import { useFormikContext } from "formik";
import { PackageInitialValues } from "../../../../types/Package";
import { useValidationValidationParamState } from "../../../../Components/ValidationField/state/ValidationValidationParamState";
import { useEffect } from "react";
import ConfigurationField from "../../Field/ConfigurationField";
import FieldGroup from "../../Field/FieldGroup";
const Form = () => {
const { values, setFieldValue } = useFormikContext<PackageInitialValues>();
const { ValidationParamState } = useValidationValidationParamState();
const {
GradeName, GradeCurrentPage,
SubjectName, SubjectCurrentPage,
UnitName, UnitCurrentPage,
CurriculumName, CurriculumCurrentPage,
LessonName, LessonCurrentPage
} = ValidationParamState;
const { curriculums_ids, grade_id, subjects_ids, units_ids, lessons_ids } = values;
/// grade_id
const GradeDisabled = !!grade_id;
const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
name: GradeName,
page: GradeCurrentPage
});
const GradeOption = Grade?.data ?? []
const canChangeGradePage = !!Grade?.links?.next;
const GradePage = Grade?.meta?.currentPage;
/// subjects_ids
const SubjectDisabled = !!subjects_ids && subjects_ids?.length > 0;
const { data: Subject, isLoading: isLoadingSubject } = useGetAllSubject({
grade_id: grade_id,
name: SubjectName,
page: SubjectCurrentPage
}, { enabled: GradeDisabled });
const SubjectOption = Subject?.data ?? []
const canChangeSubjectPage = !!Subject?.links?.next;
const SubjectPage = Subject?.meta?.currentPage;
/// units_ids
const UnitDisabled = !!units_ids && units_ids?.length > 0;
const { data: Unit, isLoading: isLoadingUnit } = useGetAllUnit({
subjects_ids: subjects_ids,
name: UnitName,
page: UnitCurrentPage
}, { enabled: SubjectDisabled });
const UnitOption = Unit?.data ?? []
const canChangeUnitPage = !!Unit?.links?.next;
const UnitPage = Unit?.meta?.currentPage;
/// curriculums_ids
const CurriculumDisabled = !!curriculums_ids && curriculums_ids?.length > 0;
const { data: Curriculum, isLoading: isLoadingCurriculum } = useGetAllCurriculum({
units_ids: units_ids,
name: CurriculumName,
page: CurriculumCurrentPage
}, { enabled: UnitDisabled });
const CurriculumOption = Curriculum?.data ?? []
const canChangeCurriculumPage = !!Curriculum?.links?.next;
const CurriculumPage = Curriculum?.meta?.currentPage;
/// lessons_ids
const { data: Lesson, isLoading: isLoadingLesson } = useGetAllLesson({
curriculums_ids: curriculums_ids,
name: LessonName,
page: LessonCurrentPage
}, { enabled: CurriculumDisabled });
const LessonOption = Lesson?.data ?? []
const canChangeLessonPage = !!Lesson?.links?.next;
const LessonPage = Lesson?.meta?.currentPage;
useEffect(() => {
const GradeChildren = (subjects_ids && subjects_ids?.length > 0 || units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0);
if (!grade_id && GradeChildren) {
setFieldValue("subjects_ids", []);
setFieldValue("units_ids", []);
setFieldValue("curriculums_ids", []);
setFieldValue("lessons_ids", []);
return;
}
console.log(1);
const SubjectChildren = (units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
console.log( subjects_ids && subjects_ids?.length < 1 && SubjectChildren);
if (subjects_ids && subjects_ids?.length < 1 && SubjectChildren) {
console.log(1);
setFieldValue("units_ids", []);
setFieldValue("curriculums_ids", []);
setFieldValue("lessons_ids", []);
return;
}
const UnitChildren = (curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
if (units_ids && units_ids?.length < 1 && UnitChildren) {
setFieldValue("curriculums_ids", []);
setFieldValue("lessons_ids", []);
return;
}
const CurriculumChildren = (lessons_ids && lessons_ids?.length > 0)
if (curriculums_ids && curriculums_ids?.length < 1 && CurriculumChildren) {
setFieldValue("lessons_ids", []);
return;
}
}, [grade_id, subjects_ids, units_ids, curriculums_ids])
return (
<Row className="w-100">
<Col>
<ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="price" label="price" name="price" type="number" />
<FieldGroup array_name='configuration' title='configuration' />
</Col>
<Col>
{/*
grade_id
*/}
<ValidationField
searchBy="GradeName"
name="grade_id"
label="grade"
type="Search"
option={GradeOption}
isLoading={isLoadingGrade}
canChangePage={canChangeGradePage}
PageName={"GradeCurrentPage"}
page={GradePage}
/>
{/*
subjects_ids
*/}
<ValidationField
searchBy="SubjectName"
name="subjects_ids"
label="subject"
type="Search"
option={SubjectOption}
isMulti
isLoading={isLoadingSubject}
canChangePage={canChangeSubjectPage}
PageName={"SubjectCurrentPage"}
page={SubjectPage}
disabled={!GradeDisabled}
/>
{/*
units_ids
*/}
<ValidationField
searchBy="UnitName"
name="units_ids"
label="unit"
type="Search"
option={UnitOption}
isMulti
isLoading={isLoadingUnit}
canChangePage={canChangeUnitPage}
PageName={"UnitCurrentPage"}
page={UnitPage}
disabled={!SubjectDisabled}
/>
{/*
curriculums_ids
*/}
<ValidationField
searchBy="CurriculumName"
name="curriculums_ids"
label="curriculum"
type="Search"
option={CurriculumOption}
isMulti
isLoading={isLoadingCurriculum}
canChangePage={canChangeCurriculumPage}
PageName={"CurriculumCurrentPage"}
page={CurriculumPage}
disabled={!UnitDisabled}
/>
{/*
lessons_ids
*/}
<ValidationField
searchBy="LessonName"
name="lessons_ids"
label="lesson"
type="Search"
option={LessonOption}
isMulti
isLoading={isLoadingLesson}
canChangePage={canChangeLessonPage}
PageName={"LessonCurrentPage"}
page={LessonPage}
disabled={!CurriculumDisabled}
/>
</Col>
</Row>
);
};
export default Form;

33
src/Pages/Package/PackageItem/Model/formUtil.ts
View File

@ -1,33 +0,0 @@
import * as Yup from "yup";
import { Package, PackageInitialValues } from "../../../../types/Package";
import { arrayToObject } from "../../../../utils/arrayToObject";
import { objectToArray } from "../../../../utils/objectToArray";
export const getInitialValues = (objectToEdit: Partial<Package>): any => {
console.log(objectToEdit,"objectToEdit");
const configuration = Array.isArray(objectToEdit?.configuration) ? objectToEdit?.configuration : objectToArray(objectToEdit?.configuration)
return {
id: objectToEdit?.id ?? null,
name: objectToEdit?.name ?? null,
price: objectToEdit?.price ?? null,
grade_id: objectToEdit?.grade_id ?? null,
curriculums_ids: objectToEdit?.curriculums_ids ?? [],
lessons_ids: objectToEdit?.lessons_ids ?? [],
subjects_ids: objectToEdit?.subjects_ids ?? [],
units_ids: objectToEdit?.units_ids ?? [],
configuration: configuration ?? [{key:"",value:""}],
moiaed: [{key:"",value:""}],
};
};
export const getValidationSchema = () => {
return Yup.object().shape({
name: Yup.string().required("validation.required"),
price: Yup.number().required("validation.required").typeError("validation.Must_be_a_number"),
grade_id: Yup.string().required("validation.required"),
curriculums_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
lessons_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
subjects_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
units_ids: Yup.array().of(Yup.number().required()).min(1,"validation.must_have_on_item").required("validation.required"),
});
};

59
src/Pages/Package/PackageItem/Page.tsx
View File

@ -1,59 +0,0 @@
import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../../utils/useModalHandler";
import { ModalEnum } from "../../../enums/Model";
import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react";
import { Spin } from "antd";
import { canAddPackage } from "../../../utils/hasAbilityFn";
import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { useDeletePackage } from "../../../api/package";
import { useNavigate } from "react-router-dom";
import { ABILITIES_ENUM } from "../../../enums/abilities";
const Table = lazy(() => import("./Table"));
const DeleteModalForm = lazy(
() => import("../../../Layout/Dashboard/DeleteModels"),
);
const SearchField = lazy(
() => import("../../../Components/DataTable/SearchField"),
);
const TableHeader = () => {
const { handel_open_model } = useModalHandler();
const [t] = useTranslation();
const navigate = useNavigate();
useSetPageTitle(t(`page_header.package`));
const deleteMutation = useDeletePackage();
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
<header className="d-flex justify-content-between">
<SearchField
searchBy="name"
placeholder={t("practical.search_here")}
/>
{canAddPackage && (
<div className="Selects">
<button
onClick={() => navigate(`/${ABILITIES_ENUM?.Package}/add`)}
className="add_button"
>
{t("models.add_package")} <FaPlus />
</button>
</div>
)}
</header>
<Table />
<DeleteModalForm
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.PACKAGE_DELETE}
/>
</Suspense>
</div>
);
};
export default TableHeader;

21
src/Pages/Package/PackageItem/Table.tsx
View File

@ -1,21 +0,0 @@
import React from "react";
import DataTable from "../../../Layout/Dashboard/Table/DataTable";
import { useColumns } from "./useTableColumns";
import useSearchQuery from "../../../api/utils/useSearchQuery";
import { useGetAllPackage } from "../../../api/package";
import { useGetAllPackageItem } from "../../../api/packageItem";
import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../../enums/params";
const App: React.FC = () => {
const [searchQuery] = useSearchQuery("name");
const {package_id} = useParams<ParamsEnum>()
const response = useGetAllPackageItem({
name: searchQuery,
package_id:package_id,
pagination: true,
});
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

15
src/Pages/Package/PackageItem/index.tsx
View File

@ -1,15 +0,0 @@
import { useColumns } from "./useTableColumns";
import Table from "./Table";
import { FaPlus } from "react-icons/fa";
import AddModalForm from "./Model/AddModel";
import EditModalForm from "./Model/EditModel";
export {
Table,
useColumns,
AddModalForm,
EditModalForm,
FaPlus,
};

66
src/Pages/Package/PackageItem/useTableColumns.tsx
View File

@ -1,66 +0,0 @@
import { TableColumnsType } from "antd";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useModalState } from "../../../zustand/Modal";
import { useTranslation } from "react-i18next";
import { canDeletePackage,canEditPackage } from "../../../utils/hasAbilityFn";
import ActionButtons from "../../../Components/Table/ActionButtons";
import { useNavigate } from "react-router-dom";
export const useColumns = () => {
const [t] = useTranslation();
const { setIsOpen } = useModalState((state) => state);
const navigate = useNavigate()
const { setObjectToEdit } = useObjectToEdit((state) => state);
const handelDelete = (record: any) => {
setObjectToEdit(record);
setIsOpen(ModalEnum?.PACKAGE_DELETE);
};
const handleEdit = (record: any) => {
setObjectToEdit(record);
setIsOpen(ModalEnum?.PACKAGE_EDIT);
navigate(`${record?.id}`)
};
const columns: TableColumnsType<any> = [
{
title: t("columns.id"),
dataIndex: "id",
key: "id",
align: "center",
},
{
title: t("columns.name"),
dataIndex: "name",
key: "name",
align: "center",
},
{
title: t("columns.price"),
dataIndex: "price",
key: "price",
align: "center",
},
{
title: "",
key: "actions",
align: "end",
width: "25vw",
render: (_text, record, index) => {
return (
<ActionButtons
canDelete={canEditPackage}
canEdit={canDeletePackage}
index={index}
onDelete={() => handelDelete(record)}
onEdit={() => handleEdit(record)}
/>
);
},
},
];
return columns;
};

4
src/Pages/Package/Page.tsx
View File

@ -50,8 +50,10 @@ const TableHeader = () => {
<Table />
<DeleteModalForm
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.PACKAGE_DELETE}
ModelEnum={ModalEnum?.Package_DELETE}
/>
{/* <AddModalForm /> */}
<EditModalForm />
</Suspense>
</div>
);

20
src/Pages/Package/useTableColumns.tsx
View File

@ -1,33 +1,25 @@
import { TableColumnsType } from "antd";
import { ModalEnum } from "../../enums/Model";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";``
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useModalState } from "../../zustand/Modal";
import { useTranslation } from "react-i18next";
import { canDeletePackage,canEditPackage, canShowPackage } from "../../utils/hasAbilityFn";
import { canDeletePackage,canEditPackage } from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
import { useNavigate } from "react-router-dom";
import { ABILITIES_ENUM } from "../../enums/abilities";
export const useColumns = () => {
const [t] = useTranslation();
const { setIsOpen } = useModalState((state) => state);
const navigate = useNavigate()
const { setObjectToEdit } = useObjectToEdit((state) => state);
const handelDelete = (record: any) => {
setObjectToEdit(record);
setIsOpen(ModalEnum?.PACKAGE_DELETE);
setIsOpen(ModalEnum?.Package_DELETE);
};
const handleEdit = (record: any) => {
setObjectToEdit(record);
navigate(`${record?.id}`)
setIsOpen(ModalEnum?.Package_EDIT);
};
// const handleShow = (record: any) => {
// setObjectToEdit(record);
// navigate(`${record?.id}/${ABILITIES_ENUM?.PACKAGE_ITEM}`)
// };
const columns: TableColumnsType<any> = [
{
@ -58,11 +50,9 @@ export const useColumns = () => {
<ActionButtons
canDelete={canEditPackage}
canEdit={canDeletePackage}
// canShow={canShowPackage}
index={index}
onDelete={() => handelDelete(record)}
onEdit={() => handleEdit(record)}
// onShow={() => handleShow(record)}
/>
);
},

36
src/Pages/ReSeller/Model/AddModel.tsx
View File

@ -1,36 +0,0 @@
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddReSeller } from "../../../api/ReSeller";
const AddModel: React.FC = () => {
const { mutate, status } = useAddReSeller();
const handleSubmit = (values: any) => {
const newValue = JSON.parse(JSON.stringify({...values}))
const location = {lat:newValue?.lat,lng:newValue?.lng}
mutate({
...newValue,
location
});
};
return (
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.RE_SELLER_ADD}
modelTitle="ReSeller"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues({})}
getValidationSchema={getValidationSchema}
>
<ModelForm />
</LayoutModel>
</>
);
};
export default AddModel;

40
src/Pages/ReSeller/Model/EditModel.tsx
View File

@ -1,40 +0,0 @@
import React from "react";
import { getInitialValues, getValidationSchema, getValidationSchemaEdit } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import ModelForm from "./ModelForm";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useUpdateReSeller } from "../../../api/ReSeller";
import { handelImageState } from "../../../utils/DataToSendImageState";
const EditModel: React.FC = () => {
const { mutate, status } = useUpdateReSeller();
const { objectToEdit } = useObjectToEdit((state) => state);
const handleSubmit = (values: any) => {
const newValue = JSON.parse(JSON.stringify({...values}))
const location = {lat:newValue?.lat,lng:newValue?.lng}
mutate({
...newValue,
location
});
};
return (
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.RE_SELLER_EDIT}
modelTitle="ReSeller"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchemaEdit}
isAddModal={false}
>
<ModelForm isEdit={true} />
</LayoutModel>
</>
);
};
export default EditModel;

30
src/Pages/ReSeller/Model/ModelForm.tsx
View File

@ -1,30 +0,0 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import MyMap from "./field/MyMap";
const Form = ({isEdit = false}:{isEdit?:boolean}) => {
return (
<Row className="w-100">
<Col>
<ValidationField name="first_name" placeholder="first_name" label="first_name" />
<ValidationField name="last_name" placeholder="last_name" label="last_name" />
<ValidationField name="username" placeholder="username" label="username" />
{!isEdit &&
<ValidationField name="password" placeholder="password" label="password" />
}
</Col>
<Col>
<ValidationField name="contact_number1" placeholder="contact_number1" label="contact_number1" />
<ValidationField name="contact_number2" placeholder="contact_number2" label="contact_number2" />
<ValidationField name="lat" placeholder="lat" label="lat" />
<ValidationField name="lng" placeholder="lng" label="lng" />
<MyMap/>
</Col>
</Row>
);
};
export default Form;

81
src/Pages/ReSeller/Model/field/MyMap.tsx
View File

@ -1,81 +0,0 @@
import React, { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Marker, Popup, useMapEvents, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import { Input, Button } from 'antd';
import { useFormikContext } from 'formik';
import { ReSellerInitialValues } from '../../../../types/ReSeller';
import { useTranslation } from 'react-i18next';
// Fix for marker icon issue
//@ts-ignore
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: 'https://unpkg.com/leaflet/dist/images/marker-icon-2x.png',
iconUrl: 'https://unpkg.com/leaflet/dist/images/marker-icon.png',
shadowUrl: 'https://unpkg.com/leaflet/dist/images/marker-shadow.png',
});
const LocationMarker: React.FC = () => {
const { setFieldValue } = useFormikContext<ReSellerInitialValues>();
useMapEvents({
click(e) {
const { lat, lng } = e.latlng;
setFieldValue('lat', lat); // Update latitude in Formik
setFieldValue('lng', lng); // Update longitude in Formik
},
});
return null;
};
const CenterMapOnPosition: React.FC<{ position: [number, number] }> = ({ position }) => {
const map = useMap();
useEffect(() => {
map.setView(position, map.getZoom());
}, [position, map]);
return null;
};
const MyMap: React.FC = () => {
const [showMap, setShowMap] = useState(false); // State to control map visibility
const [currentPosition] = useState<[number, number] | null>(null); // State to hold current position
const { values } = useFormikContext<ReSellerInitialValues>();
const { lat, lng } = values as any;
const position: [number, number] = [lat, lng];
const [t] = useTranslation()
return (
<div className='mb-4'>
<div className='MapInputs '>
<Button onClick={() => setShowMap(!showMap)} type="primary">
{showMap ? `${t("practical.Hide")} ${t("practical.Map")}` : `${t("practical.Show")} ${t("practical.Map")}`}
</Button>
</div>
{showMap && (
<MapContainer
center={currentPosition || position} // Use currentPosition if available, otherwise fallback to form values
zoom={13}
style={{ height: "200px", width: "100%" }}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={currentPosition || position}>
</Marker>
<LocationMarker />
<CenterMapOnPosition position={currentPosition || position} />
</MapContainer>
)}
</div>
);
};
export default MyMap;

67
src/Pages/ReSeller/Model/formUtil.ts
View File

@ -1,67 +0,0 @@
import * as Yup from "yup";
import { ReSeller, ReSellerInitialValues } from "../../../types/ReSeller";
export const getInitialValues = (
objectToEdit: Partial<ReSeller>,
): ReSellerInitialValues => {
console.log(objectToEdit,"objectToEdit");
return {
id: objectToEdit?.id,
first_name: objectToEdit?.first_name ?? "",
last_name: objectToEdit?.last_name ?? "",
lat: objectToEdit?.location?.lat ?? 33.5138,
lng: objectToEdit?.location?.lng ?? 36.2765,
contact_number1:objectToEdit?.contact_number1 ?? null,
contact_number2:objectToEdit?.contact_number2 ?? null ,
username: objectToEdit?.user?.username ?? null ,
};
};
export const getValidationSchema = () => {
// validate input
return Yup.object().shape({
first_name: Yup.string().required("validation.required"),
last_name: Yup.string().required("validation.required"),
contact_number1: Yup.string()
.matches(/^([0-9\s\-\+\(\)]*)$/, 'validation.Please enter a valid phone number (e.g., +1 123-456-7890)') // Regex for phone number
.min(10, "validation.must_be_at_least_10_characters_long") // Minimum length
.max(15, "validation.must_not_exceed_15_characters_long") // Maximum length
.required("validation.required"), // Required field
contact_number2: Yup.string()
.matches(/^([0-9\s\-\+\(\)]*)$/, 'validation.Please enter a valid phone number (e.g., +1 123-456-7890)') // Regex for phone number
.min(10, "validation.must_be_at_least_10_characters_long") // Minimum length
.max(15, "validation.must_not_exceed_15_characters_long") // Maximum length
.required("validation.required"), // Required field
password: Yup.string().min(8,"validation.Password_must_be_at_least_8_characters_long").required("validation.required"),
username: Yup.string().required("validation.required"),
lat: Yup.string().required("validation.required"),
lng: Yup.string().required("validation.required"),
});
};
export const getValidationSchemaEdit = () => {
// validate input
return Yup.object().shape({
first_name: Yup.string().required("validation.required"),
last_name: Yup.string().required("validation.required"),
contact_number1: Yup.string()
.matches(/^([0-9\s\-\+\(\)]*)$/, 'validation.Please enter a valid phone number (e.g., +1 123-456-7890)') // Regex for phone number
.min(10, "validation.must_be_at_least_10_characters_long") // Minimum length
.max(15, "validation.must_not_exceed_15_characters_long") // Maximum length
.required("validation.required"), // Required field
contact_number2: Yup.string()
.matches(/^([0-9\s\-\+\(\)]*)$/, 'validation.Please enter a valid phone number (e.g., +1 123-456-7890)') // Regex for phone number
.min(10, "validation.must_be_at_least_10_characters_long") // Minimum length
.max(15, "validation.must_not_exceed_15_characters_long") // Maximum length
.required("validation.required"), // Required field
username: Yup.string().required("validation.required"),
lat: Yup.string().required("validation.required"),
lng: Yup.string().required("validation.required"),
});
};

44
src/Pages/ReSeller/Page.tsx
View File

@ -1,44 +0,0 @@
import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react";
import { Spin } from "antd";
import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { ModalEnum } from "../../enums/Model";
import { useDeleteReSeller } from "../../api/ReSeller";
import MyMap from "./Model/field/MyMap";
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 = useDeleteReSeller();
useSetPageTitle(t(`page_header.reSeller`));
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
<header>
<h6>{t("models.ReSeller")}</h6>
</header>
<Table />
<AddModalForm />
<EditModalForm />
<DeleteModalForm
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.RE_SELLER_DELETE}
/>
</Suspense>
</div>
);
};
export default TableHeader;

12
src/Pages/ReSeller/Table.tsx
View File

@ -1,12 +0,0 @@
import { useColumns } from "./useTableColumns";
import React from "react";
import DataTable from "../../Layout/Dashboard/Table/DataTable";
import { useGetAllReSeller } from "../../api/ReSeller";
const App: React.FC = () => {
const response = useGetAllReSeller({ pagination: true });
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

98
src/Pages/ReSeller/useTableColumns.tsx
View File

@ -1,98 +0,0 @@
import { TableColumnsType } from "antd";
import { ReSeller } from "../../types/ReSeller";
import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../enums/abilities";
import { useNavigate } from "react-router-dom";
import {
canAddReSeller,
canDeleteReSeller,
canEditReSeller,
canShowReSeller,
} from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
import ColumnsImage from "../../Components/Columns/ColumnsImage";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
const { setObjectToEdit } = useObjectToEdit((state) => state);
const navigate = useNavigate();
const handelDelete = (data: ReSeller) => {
setObjectToEdit(data);
handel_open_model(ModalEnum?.RE_SELLER_DELETE);
};
const handleEdit = (record: ReSeller) => {
setObjectToEdit(record);
handel_open_model(ModalEnum?.RE_SELLER_EDIT);
};
const [t] = useTranslation();
const columns: TableColumnsType<ReSeller> = [
{
title: t("columns.id"),
dataIndex: "id",
key: "id",
align: "center",
render: (_text, record) => record?.id,
},
{
title: `${t("columns.first_name")}`,
dataIndex: "first_name",
key: "first_name",
align: "center",
render: (_text, record) => record?.first_name,
},
{
title: `${t("columns.last_name")}`,
dataIndex: "last_name",
key: "last_name",
align: "center",
render: (_text, record) => record?.last_name,
},
{
title: `${t("columns.username")}`,
dataIndex: "username",
key: "username",
align: "center",
render: (_text, record) => record?.user?.username,
},
{
title: canAddReSeller ? (
<button
onClick={() => handel_open_model(ModalEnum?.RE_SELLER_ADD)}
className="add_button"
>
{t("practical.add")} {t("models.ReSeller")} <FaPlus />
</button>
) : (
""
),
key: "actions",
align: "end",
width: "25vw",
render: (_text, record, index) => {
return (
<ActionButtons
canDelete={canDeleteReSeller}
canEdit={canEditReSeller}
index={index}
onDelete={() => handelDelete(record)}
onEdit={() => handleEdit(record)}
/>
);
},
},
];
return columns;
};

33
src/Pages/Student/Model/AddModel.tsx
View File

@ -1,33 +0,0 @@
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddStudent } from "../../../api/student";
const AddModel: React.FC = () => {
const { mutate, status } = useAddStudent();
const handleSubmit = (values: any) => {
mutate({
...values,
});
};
return (
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.STUDENT_ADD}
modelTitle="student"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues({})}
getValidationSchema={getValidationSchema}
>
<ModelForm />
</LayoutModel>
</>
);
};
export default AddModel;

37
src/Pages/Student/Model/EditModel.tsx
View File

@ -1,37 +0,0 @@
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import ModelForm from "./ModelForm";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useUpdateStudent } from "../../../api/student";
import { handelImageState } from "../../../utils/DataToSendImageState";
const EditModel: React.FC = () => {
const { mutate, status } = useUpdateStudent();
const { objectToEdit } = useObjectToEdit((state) => state);
const handleSubmit = (values: any) => {
const Data_to_send = { ...values };
mutate(Data_to_send);
};
return (
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.STUDENT_EDIT}
modelTitle="student"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema}
isAddModal={false}
>
<ModelForm />
</LayoutModel>
</>
);
};
export default EditModel;

58
src/Pages/Student/Model/ModelForm.tsx
View File

@ -1,58 +0,0 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useGetAllGrade } from "../../../api/grade";
import { useValidationValidationParamState } from "../../../Components/ValidationField/state/ValidationValidationParamState";
const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
const { ValidationParamState } = useValidationValidationParamState();
const {
GradeName, GradeCurrentPage,
} = ValidationParamState;
const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
name: GradeName,
page: GradeCurrentPage
});
const GradeOption = Grade?.data ?? []
const canChangeGradePage = !!Grade?.links?.next;
const GradePage = Grade?.meta?.currentPage;
const sex = [
{name:"male" , id :"male"},
{name:"female" , id :"female"}
]
return (
<Row className="w-100">
<Col>
<ValidationField name="first_name" placeholder="first_name" label="first_name" />
<ValidationField name="last_name" placeholder="last_name" label="last_name" />
<ValidationField name="username" placeholder="username" label="username" />
{!isEdit &&
<ValidationField name="password" placeholder="password" label="password" />
}
</Col>
<Col>
<ValidationField name="phone_number" placeholder="contact_number1" label="contact_number1" />
<ValidationField
searchBy="GradeName"
name="grade_id"
label="grade"
type="Search"
option={GradeOption}
isLoading={isLoadingGrade}
canChangePage={canChangeGradePage}
PageName={"GradeCurrentPage"}
page={GradePage}
/>
<ValidationField type="Select" name="sex" option={sex} />
</Col>
</Row>
);
};
export default Form;

27
src/Pages/Student/Model/formUtil.ts
View File

@ -1,27 +0,0 @@
import * as Yup from "yup";
import { Student, StudentInitialValues } from "../../../types/Student";
export const getInitialValues = (
objectToEdit: Partial<Student>,
): StudentInitialValues => {
return {
id: objectToEdit?.user_id,
first_name: objectToEdit?.first_name ?? "",
last_name: objectToEdit?.last_name ?? "",
// address: objectToEdit?.address ?? "",
// birthday: objectToEdit?.birthday ?? "",
// city: objectToEdit?.city ?? "",
grade_id: objectToEdit?.grade_id ,
// image: objectToEdit?.image ?? "",
sex: objectToEdit?.sex ,
};
};
export const getValidationSchema = () => {
// validate input
return Yup.object().shape({
first_name: Yup.string().required("validation.required"),
last_name: Yup.string().required("validation.required"),
});
};

39
src/Pages/Student/Page.tsx
View File

@ -1,39 +0,0 @@
import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react";
import { Spin } from "antd";
import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { ModalEnum } from "../../enums/Model";
import { useDeleteStudent } from "../../api/student";
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 = useDeleteStudent();
useSetPageTitle(t(`page_header.student`));
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
<header>
<h6>{t("models.student")}</h6>
</header>
<Table />
<AddModalForm />
<EditModalForm />
<DeleteModalForm
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.STUDENT_DELETE}
/>
</Suspense>
</div>
);
};
export default TableHeader;

13
src/Pages/Student/Table.tsx
View File

@ -1,13 +0,0 @@
import { useColumns } from "./useTableColumns";
import React from "react";
import DataTable from "../../Layout/Dashboard/Table/DataTable";
import { useGetAllStudent } from "../../api/student";
const App: React.FC = () => {
const response = useGetAllStudent({ pagination: true });
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

101
src/Pages/Student/useTableColumns.tsx
View File

@ -1,101 +0,0 @@
import { TableColumnsType } from "antd";
import { Student } from "../../types/Student";
import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import {
canAddStudent,
canDeleteStudent,
canEditStudent,
canShowStudent,
} from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
const { setObjectToEdit } = useObjectToEdit((state) => state);
const navigate = useNavigate();
const handelShow = (record: Student) => {
navigate(`${record?.user_id}`);
};
const handelDelete = (data: Student) => {
setObjectToEdit(data);
handel_open_model(ModalEnum?.STUDENT_DELETE);
};
const handleEdit = (record: Student) => {
setObjectToEdit(record);
handel_open_model(ModalEnum?.STUDENT_EDIT);
};
const [t] = useTranslation();
const columns: TableColumnsType<Student> = [
{
title: t("columns.id"),
dataIndex: "id",
key: "id",
align: "center",
render: (_text, record) => record?.user_id,
},
{
title: `${t("columns.first_name")}`,
dataIndex: "first_name",
key: "first_name",
align: "center",
render: (_text, record) => record?.first_name,
},
{
title: `${t("columns.last_name")}`,
dataIndex: "last_name",
key: "last_name",
align: "center",
render: (_text, record) => record?.last_name,
},
{
title: `${t("columns.sex")}`,
dataIndex: "sex",
key: "sex",
align: "center",
render: (_text, record) => record?.sex,
},
{
title: canAddStudent ? (
<button
onClick={() => handel_open_model(ModalEnum?.STUDENT_ADD)}
className="add_button"
>
{t("practical.add")} {t("models.student")} <FaPlus />
</button>
) : (
""
),
key: "actions",
align: "end",
width: "25vw",
render: (_text, record, index) => {
return (
<ActionButtons
canDelete={canDeleteStudent}
canEdit={canEditStudent}
canShow={canShowStudent}
index={index}
onDelete={() => handelDelete(record)}
onEdit={() => handleEdit(record)}
onShow={() => handelShow(record)}
/>
);
},
},
];
return columns;
};

68
src/Pages/Unit/DrapableTable.tsx
View File

@ -12,13 +12,10 @@ import {
} 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, useUpdateUnitOrder } from "../../api/unit";
import Loading from "../../Components/DataState/Loading";
import EmptyData from "../../Components/DataState/EmptyData";
import { useTranslation } from "react-i18next";
import { useColumns } from "./useTableColumns";
import { useGetAllUnit } from "../../api/unit";
interface DataType {
id: string; // Unique identifier for each row
@ -35,7 +32,7 @@ interface RowContextProps {
const RowContext = React.createContext<RowContextProps>({});
export const DragHandleUnit: React.FC = () => {
const DragHandle: React.FC = () => {
const { setActivatorNodeRef, listeners } = useContext(RowContext);
return (
<Button
@ -49,6 +46,12 @@ export const DragHandleUnit: 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" },
];
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
"data-row-key": string;
@ -93,10 +96,13 @@ const DrapableTable: React.FC = () => {
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
...item
name: item.name,
age: item.age,
address: item.address,
})) ?? [];
const [dataSource, setDataSource] = React.useState<DataType[]>(data);
console.log(dataSource, "dataSource");
useEffect(() => {
// Update dataSource when the fetched data changes
@ -104,51 +110,28 @@ const DrapableTable: React.FC = () => {
setDataSource(sortedData);
}, [response?.data?.data]);
const {mutate:orderUnit} = useUpdateUnitOrder({},{
retry:false
})
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(
//@ts-ignore
(record) => record.id === over.id,
);
// Move the items in the array
const newState = arrayMove(prevState, activeIndex, overIndex);
const orderedNewState = newState.map((item, index) => ({
// Update the order based on the new positions
return newState.map((item, index) => ({
...item,
order: index + 1, // Update the order based on the new index
}));
// Update the order based on the new positions
const orderedNewStateWithNewChape = orderedNewState?.map((item:any)=>{
return {
"unit_id":item?.id,
"order":item?.order
}
})
orderUnit({units: orderedNewStateWithNewChape, _method:"PUT"})
return orderedNewState
});
}
};
const getRowClassName = (record: any, index: number): string => {
return index % 2 === 0 ? "even-row" : "odd-row";
};
const isRefetching = response?.isRefetching;
const [t] = useTranslation()
const columns = useColumns();
const sortedDataSource = dataSource.sort((a, b) => a.order - b.order) ;
console.log(sortedDataSource,"sortedDataSource");
return (
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
<SortableContext
@ -158,26 +141,9 @@ const DrapableTable: React.FC = () => {
<Table
rowKey="id"
components={{ body: { row: Row } }}
//@ts-ignore
columns={columns}
dataSource={sortedDataSource}
dataSource={dataSource.sort((a, b) => a.order - b.order)} // Sort by order for rendering
pagination={false}
rowClassName={(record, index) => getRowClassName(record, index)}
className="DataTable"
loading={{
spinning: response?.isLoading || isRefetching,
indicator: <Loading />,
size: "large",
}}
locale={{
emptyText: (
<EmptyData
loading={response?.isLoading}
header={t("Table.header")}
info={t("Table.info")}
/>
),
}}
/>
</SortableContext>
</DndContext>

1
src/Pages/Unit/Model/ModelForm.tsx
View File

@ -19,7 +19,6 @@ const Form = () => {
placeholder="term"
label="term"
option={termsArray}
fieldNames={{label:"label",value:"value"}}
/>
</Col>
</Row>

2
src/Pages/Unit/Page.tsx
View File

@ -60,7 +60,7 @@ const TableHeader = () => {
<header>
<h6>{t("models.units")}</h6>
</header>
<DrapableTable />
<Table />
<AddModalForm />
<EditModalForm />
<DeleteModalForm

11
src/Pages/Unit/useTableColumns.tsx
View File

@ -17,7 +17,7 @@ import {
} from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
import { Unit } from "../../types/Unit";
import { DragHandleUnit } from "./DrapableTable";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
@ -40,7 +40,6 @@ export const useColumns = () => {
const [t] = useTranslation();
const columns: TableColumnsType<Unit> = [
{ key: "sort", align: "center", width: 80, render: () => <DragHandleUnit /> },
{
title: t("columns.id"),
dataIndex: "id",
@ -61,13 +60,7 @@ export const useColumns = () => {
dataIndex: "term",
key: "term",
align: "center",
render: (text, record) => {
console.log(record);
return (
record?.term
)
},
render: (text, record) => record?.term,
},
{

185
src/Pages/lesson/DrapableTable.tsx
View File

@ -1,185 +0,0 @@
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 { useParams } from "react-router-dom";
import { ParamsEnum } from "../../enums/params";
import { useGetAllLesson, useUpdateLessonOrder } from "../../api/lesson";
import Loading from "../../Components/DataState/Loading";
import EmptyData from "../../Components/DataState/EmptyData";
import { useTranslation } from "react-i18next";
import { useColumns } from "./useTableColumns";
interface DataType {
id: string; // Unique identifier for each row
order: number;
name: string;
age: number;
address: string;
}
interface RowContextProps {
setActivatorNodeRef?: (element: HTMLElement | null) => void;
listeners?: SyntheticListenerMap;
}
const RowContext = React.createContext<RowContextProps>({});
export const DragHandleLesson: React.FC = () => {
const { setActivatorNodeRef, listeners } = useContext(RowContext);
return (
<Button
type="text"
size="small"
icon={<HolderOutlined />}
style={{ cursor: "move" }}
ref={setActivatorNodeRef}
{...listeners}
/>
);
};
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
"data-row-key": string;
}
const Row: React.FC<RowProps> = (props) => {
const {
attributes,
listeners,
setNodeRef,
setActivatorNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: props["data-row-key"] });
const style: React.CSSProperties = {
...props.style,
transform: CSS.Translate.toString(transform),
transition,
...(isDragging ? { position: "relative", zIndex: 9999 } : {}),
};
const contextValue = useMemo<RowContextProps>(
() => ({ setActivatorNodeRef, listeners }),
[setActivatorNodeRef, listeners],
);
return (
<RowContext.Provider value={contextValue}>
<tr {...props} ref={setNodeRef} style={style} {...attributes} />
</RowContext.Provider>
);
};
const DrapableTable: React.FC = () => {
const { subject_id } = useParams<ParamsEnum>();
const response = useGetAllLesson({ 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
...item
})) ?? [];
const [dataSource, setDataSource] = React.useState<DataType[]>(data);
useEffect(() => {
// Update dataSource when the fetched data changes
const sortedData = data.sort((a: any, b: any) => a.order - b.order);
setDataSource(sortedData);
}, [response?.data?.data]);
const {mutate:orderLesson} = useUpdateLessonOrder()
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(
//@ts-ignore
(record) => record.id === over.id,
);
// Move the items in the array
const newState = arrayMove(prevState, activeIndex, overIndex);
const orderedNewState = newState.map((item, index) => ({
...item,
order: index + 1, // Update the order based on the new index
}));
// Update the order based on the new positions
const orderedNewStateWithNewChape = orderedNewState?.map((item:any)=>{
return {
"lesson_id":item?.id,
"order":item?.order
}
})
orderLesson({lessons: orderedNewStateWithNewChape, _method:"PUT"})
return orderedNewState
});
}
};
const getRowClassName = (record: any, index: number): string => {
return index % 2 === 0 ? "even-row" : "odd-row";
};
const isRefetching = response?.isRefetching;
const [t] = useTranslation()
const columns = useColumns();
const sortedDataSource = dataSource.sort((a, b) => a.order - b.order) ;
console.log(sortedDataSource,"sortedDataSource");
return (
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
<SortableContext
items={dataSource.map((i) => i.id)}
strategy={verticalListSortingStrategy}
>
<Table
rowKey="id"
components={{ body: { row: Row } }}
//@ts-ignore
columns={columns}
dataSource={sortedDataSource}
pagination={false}
rowClassName={(record, index) => getRowClassName(record, index)}
className="DataTable"
loading={{
spinning: response?.isLoading || isRefetching,
indicator: <Loading />,
size: "large",
}}
locale={{
emptyText: (
<EmptyData
loading={response?.isLoading}
header={t("Table.header")}
info={t("Table.info")}
/>
),
}}
/>
</SortableContext>
</DndContext>
);
};
export default DrapableTable;

7
src/Pages/lesson/Model/AddModel.tsx
View File

@ -12,14 +12,14 @@ import { useModalState } from "../../../zustand/Modal";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
const AddModel: React.FC = () => {
const { setIsOpen } = useModalState((state) => state);
const { isOpen, setIsOpen } = useModalState((state) => state);
const queryClient = useQueryClient();
const { mutate, isSuccess, status } = useAddLesson();
const { OldObjectToEdit } = useObjectToEdit();
const { unit_id } = useParams<ParamsEnum>();
useEffect(() => {
if (isSuccess) {
setIsOpen("isSuccess");
setIsOpen("");
queryClient.invalidateQueries(["Lesson"]);
}
}, [setIsOpen, isSuccess, queryClient]);
@ -40,9 +40,8 @@ const AddModel: React.FC = () => {
ModelEnum={ModalEnum.LESSON_ADD}
modelTitle="lesson"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues({name:null})}
getInitialValues={getInitialValues({})}
getValidationSchema={getValidationSchema}
width="40vw"
>
<ModelForm />
</LayoutModel>

3
src/Pages/lesson/Model/EditModel.tsx
View File

@ -14,7 +14,7 @@ const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate, isSuccess, status } = useUpdateLesson();
const { objectToEdit } = useObjectToEdit();
const { objectToEdit, setObjectToEdit } = useObjectToEdit();
const queryClient = useQueryClient();
@ -43,7 +43,6 @@ const ModalForm: React.FC = () => {
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema}
isAddModal={false}
width="40vw"
>
<ModelForm />
</LayoutModel>

4
src/Pages/lesson/Model/formUtil.ts
View File

@ -1,11 +1,9 @@
import * as Yup from "yup";
export const getInitialValues = (objectToEdit: any): any => {
console.log(objectToEdit,"objectToEdit");
return {
id: objectToEdit?.id ?? null,
name: objectToEdit?.name ?? null,
name: objectToEdit?.name ?? "",
unit_id: objectToEdit?.term ?? null,
};
};

2
src/Pages/lesson/Page.tsx
View File

@ -11,7 +11,7 @@ import { useGetAllGrade } from "../../api/grade";
import { useGetAllCurriculum } from "../../api/curriculum";
import { useGetAllSubject } from "../../api/subject";
const Table = lazy(() => import("./DrapableTable"));
const Table = lazy(() => import("./Table"));
const AddModalForm = lazy(() => import("./Model/AddModel"));
const EditModalForm = lazy(() => import("./Model/EditModel"));
const DeleteModelsForm = lazy(

2
src/Pages/lesson/useTableColumns.tsx
View File

@ -14,7 +14,6 @@ import {
canShowLesson,
} from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
import { DragHandleLesson } from "./DrapableTable";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
@ -38,7 +37,6 @@ export const useColumns = () => {
const [t] = useTranslation();
const columns: TableColumnsType<Lesson> = [
{ key: "sort", align: "center", width: 80, render: () => <DragHandleLesson /> },
{
title: t("columns.id"),
dataIndex: "id",

33
src/Pages/studentPackage/Model/AddModel.tsx
View File

@ -1,33 +0,0 @@
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddStudentPackage } from "../../../api/StudentPackage";
const AddModel: React.FC = () => {
const { mutate, status } = useAddStudentPackage();
const handleSubmit = (values: any) => {
mutate({
...values,
});
};
return (
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.STUDENT_PACKAGE_ADD}
modelTitle="StudentPackage"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues({})}
getValidationSchema={getValidationSchema}
>
<ModelForm />
</LayoutModel>
</>
);
};
export default AddModel;

38
src/Pages/studentPackage/Model/EditModel.tsx
View File

@ -1,38 +0,0 @@
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../enums/Model";
import LayoutModel from "../../../Layout/Dashboard/LayoutModel";
import ModelForm from "./ModelForm";
import { QueryStatusEnum } from "../../../enums/QueryStatus";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useUpdateStudentPackage } from "../../../api/StudentPackage";
import { handelImageState } from "../../../utils/DataToSendImageState";
const EditModel: React.FC = () => {
const { mutate, status } = useUpdateStudentPackage();
const { objectToEdit } = useObjectToEdit((state) => state);
const handleSubmit = (values: any) => {
const Data_to_send = { ...values };
const handelImage = handelImageState(Data_to_send, "icon");
mutate(handelImage);
};
return (
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.STUDENT_PACKAGE_EDIT}
modelTitle="StudentPackage"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema}
isAddModal={false}
>
<ModelForm />
</LayoutModel>
</>
);
};
export default EditModel;

71
src/Pages/studentPackage/Model/ModelForm.tsx
View File

@ -1,71 +0,0 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useGetAllPackage } from "../../../api/package";
import { useValidationValidationParamState } from "../../../Components/ValidationField/state/ValidationValidationParamState";
import { useGetAllStudent } from "../../../api/student";
const Form = () => {
const { ValidationParamState } = useValidationValidationParamState();
const {
PackageName, PackageCurrentPage,
StudentName, StudentCurrentPage,
} = ValidationParamState;
/// Package_id
const { data: Package, isLoading: isLoadingPackage } = useGetAllPackage({
name: PackageName,
page: PackageCurrentPage
});
const PackageOption = Package?.data ?? []
const canChangePackagePage = !!Package?.links?.next;
const PackagePage = Package?.meta?.currentPage;
/// Student_id
const { data: Student, isLoading: isLoadingStudent } = useGetAllStudent({
name: StudentName,
page: StudentCurrentPage
});
const StudentOption = Student?.data ?? []
const canChangeStudentPage = !!Student?.links?.next;
const StudentPage = Student?.meta?.currentPage;
return (
<Row className="w-100">
<Col>
<ValidationField
searchBy="StudentName"
name="student_id"
label="Student"
type="Search"
option={StudentOption}
isLoading={isLoadingStudent}
canChangePage={canChangeStudentPage}
PageName={"StudentCurrentPage"}
page={StudentPage}
/>
<ValidationField
searchBy="PackageName"
name="package_id"
label="Package"
type="Search"
option={PackageOption}
isLoading={isLoadingPackage}
canChangePage={canChangePackagePage}
PageName={"PackageCurrentPage"}
page={PackagePage}
/>
</Col>
<Col>
<ValidationField name="activation_date" type="Date" />
<ValidationField name="expiration_date" type="Date" />
</Col>
</Row>
);
};
export default Form;

23
src/Pages/studentPackage/Model/formUtil.ts
View File

@ -1,23 +0,0 @@
import * as Yup from "yup";
import { StudentPackage, StudentPackageInitialValues } from "../../../types/studentPackage";
import { formateDateInitialValue } from "../../../utils/formateDateInitialValue";
export const getInitialValues = (
objectToEdit: Partial<StudentPackage>,
): StudentPackageInitialValues => {
return {
id: objectToEdit?.id ?? null,
package_id: objectToEdit?.package?.id ?? null,
student_id: objectToEdit?.student?.user_id ?? null,
activation_date: formateDateInitialValue(objectToEdit?.activation_date) ,
expiration_date: formateDateInitialValue(objectToEdit?.expiration_date) ,
};
};
export const getValidationSchema = () => {
// validate input
return Yup.object().shape({
name: Yup.string().required("validation.required"),
});
};

39
src/Pages/studentPackage/Page.tsx
View File

@ -1,39 +0,0 @@
import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react";
import { Spin } from "antd";
import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { ModalEnum } from "../../enums/Model";
import { useDeleteStudentPackage } from "../../api/StudentPackage";
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 = useDeleteStudentPackage();
useSetPageTitle(t(`page_header.studentPackage`));
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
<header>
<h6>{t("models.StudentPackage")}</h6>
</header>
<Table />
<AddModalForm />
<EditModalForm />
<DeleteModalForm
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.STUDENT_PACKAGE_DELETE}
/>
</Suspense>
</div>
);
};
export default TableHeader;

12
src/Pages/studentPackage/Table.tsx
View File

@ -1,12 +0,0 @@
import { useColumns } from "./useTableColumns";
import React from "react";
import DataTable from "../../Layout/Dashboard/Table/DataTable";
import { useGetAllStudentPackage } from "../../api/StudentPackage";
const App: React.FC = () => {
const response = useGetAllStudentPackage({ pagination: true });
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

87
src/Pages/studentPackage/useTableColumns.tsx
View File

@ -1,87 +0,0 @@
import { TableColumnsType } from "antd";
import { StudentPackage } from "../../types/studentPackage";
import { FaPlus } from "react-icons/fa";
import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../enums/abilities";
import { useNavigate } from "react-router-dom";
import {
canAddStudentPackage,
canDeleteStudentPackage,
canEditStudentPackage,
canShowStudentPackage,
} from "../../utils/hasAbilityFn";
import ActionButtons from "../../Components/Table/ActionButtons";
import ColumnsImage from "../../Components/Columns/ColumnsImage";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
const { setObjectToEdit } = useObjectToEdit((state) => state);
const navigate = useNavigate();
const handelShow = (record: StudentPackage) => {
navigate(`${record?.id}`);
};
const handelDelete = (data: StudentPackage) => {
setObjectToEdit(data);
handel_open_model(ModalEnum?.STUDENT_PACKAGE_DELETE);
};
const handleEdit = (record: StudentPackage) => {
setObjectToEdit(record);
handel_open_model(ModalEnum?.STUDENT_PACKAGE_EDIT);
};
const [t] = useTranslation();
const columns: TableColumnsType<StudentPackage> = [
{
title: t("columns.id"),
dataIndex: "id",
key: "id",
align: "center",
render: (_text, record) => record?.id,
},
{
title: `${t("columns.name")}`,
dataIndex: "name",
key: "name",
align: "center",
render: (_text, record) => record?.name,
},
{
title: canAddStudentPackage ? (
<button
onClick={() => handel_open_model(ModalEnum?.STUDENT_PACKAGE_ADD)}
className="add_button"
>
{t("practical.add")} {t("models.StudentPackage")} <FaPlus />
</button>
) : (
""
),
key: "actions",
align: "end",
width: "25vw",
render: (_text, record, index) => {
return (
<ActionButtons
canDelete={canDeleteStudentPackage}
canEdit={canEditStudentPackage}
canShow={canShowStudentPackage}
index={index}
onDelete={() => handelDelete(record)}
onEdit={() => handleEdit(record)}
onShow={() => handelShow(record)}
/>
);
},
},
];
return columns;
};

83
src/Routes.tsx
View File

@ -1,5 +1,5 @@
import { TCrudRoute, TMenuItem } from "./types/App";
import { FaHome, FaKey, FaMoneyBill, FaSellcast, FaUserGraduate } from "react-icons/fa";
import { FaHome, FaMoneyBill } from "react-icons/fa";
import { LuPackage } from "react-icons/lu";
import React from "react";
const Dummy = React.lazy(() => import("./Pages/Home/Dummy"));
@ -10,10 +10,6 @@ const Tags = React.lazy(() => import("./Pages/Tags/Page"));
const Grade = React.lazy(() => import("./Pages/Grade/Page"));
const Package = React.lazy(() => import("./Pages/Package/Page"));
const Curriculum = React.lazy(() => import("./Pages/Curriculum/Page"));
const PackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem/Page"));
const ReSeller = React.lazy(() => import("./Pages/ReSeller/Page"));
const StudentPackage = React.lazy(() => import("./Pages/studentPackage/Page"));
const Student = React.lazy(() => import("./Pages/Student/Page"));
const Unit = React.lazy(() => import("./Pages/Unit/Page"));
const Lesson = React.lazy(() => import("./Pages/lesson/Page"));
@ -23,15 +19,9 @@ const EditQuestionPage = React.lazy(() => import("./Pages/question/EditPage"));
const AddPackagePage = React.lazy(() => import("./Pages/Package/Model/AddModel"));
const EditPackagePage = React.lazy(() => import("./Pages/Package/Model/EditModel"));
const AddPackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem/Model/AddModel"));
const EditPackageItemPage = React.lazy(() => import("./Pages/Package/PackageItem/Model/EditModel"));
import { hasAbility } from "./utils/hasAbility";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities";
import { ParamsEnum } from "./enums/params";
import { BsPeople } from "react-icons/bs";
import { UserTypeEnum } from "./enums/UserType";
export const menuItems: TMenuItem[] = [
{
@ -43,13 +33,12 @@ export const menuItems: TMenuItem[] = [
abilities: ABILITIES_ENUM?.PASS,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
type:UserTypeEnum?.PASS
},
{
header: "page_header.grade",
element: <Grade />,
icon: <FaUserGraduate />,
icon: <FaMoneyBill />,
text: "sidebar.grade",
path: `/${ABILITIES_ENUM?.GRADE}`,
abilities: ABILITIES_ENUM?.GRADE,
@ -79,45 +68,13 @@ export const menuItems: TMenuItem[] = [
{
header: "page_header.tags",
element: <Tags />,
icon: <FaKey />,
icon: <FaMoneyBill />,
text: "sidebar.tags",
path: `/${ABILITIES_ENUM?.TAG}`,
abilities: ABILITIES_ENUM?.TAG,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.reSeller",
element: <ReSeller />,
icon: <FaSellcast />,
text: "sidebar.reSeller",
path: `/${ABILITIES_ENUM?.RE_SELLER}`,
abilities: ABILITIES_ENUM?.RE_SELLER,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.student",
element: <Student />,
icon: <FaSellcast />,
text: "sidebar.student",
path: `/${ABILITIES_ENUM?.STUDENT}`,
abilities: ABILITIES_ENUM?.STUDENT,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.studentPackage",
element: <StudentPackage />,
icon: <BsPeople />,
text: "sidebar.studentPackage",
path: `/${ABILITIES_ENUM?.STUDENT_PACKAGE}`,
abilities: ABILITIES_ENUM?.STUDENT_PACKAGE,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
type:UserTypeEnum.RE_SELLER
},
];
export const CrudRoute: TCrudRoute[] = [
@ -186,44 +143,16 @@ export const CrudRoute: TCrudRoute[] = [
path: `/${ABILITIES_ENUM?.Package}/add`,
abilities: ABILITIES_ENUM?.Package,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 1,
prevPath: 0,
},
{
header: "page_header.edit_package",
element: <EditPackagePage />,
path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}`,
path: `/${ABILITIES_ENUM?.Package}/add`,
abilities: ABILITIES_ENUM?.Package,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 1,
prevPath: 0,
},
{
header: "page_header.package_item",
element: <PackageItemPage />,
path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}/${ABILITIES_ENUM?.PACKAGE_ITEM}`,
abilities: ABILITIES_ENUM?.PACKAGE_ITEM,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 1,
},
{
header: "page_header.add_package_item",
element: <AddPackageItemPage />,
path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}/${ABILITIES_ENUM?.PACKAGE_ITEM}/add`,
abilities: ABILITIES_ENUM?.PACKAGE_ITEM,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 1,
},
{
header: "page_header.edit_package_item",
element: <EditPackageItemPage />,
path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}/${ABILITIES_ENUM?.PACKAGE_ITEM}/:${ParamsEnum?.PACKAGE_ITEM_ID}`,
abilities: ABILITIES_ENUM?.PACKAGE_ITEM,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 1,
},
];
export const AppRoutes: Record<string, string> = Object.fromEntries(

9
src/Styles/Pages/Map.scss
View File

@ -1,9 +0,0 @@
.MapInputs{
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.leaflet-right{
display: none;
}

11
src/Styles/Pages/exercise.scss
View File

@ -23,7 +23,7 @@
.exercise_add_main {
background: var(--bg);
padding: 2vw;
};
}
.exercise_add_buttons {
display: flex;
gap: 2%;
@ -59,7 +59,6 @@
.add_new_button {
margin-bottom: 0;
color: var(--primary) !important;
}
}
.tags {
@ -126,11 +125,3 @@
display: flex;
gap: 5px;
}
.add_new_button{
margin-bottom: 20px;
svg{
color: var(--primary);
}
}

1
src/Styles/Pages/index.scss
View File

@ -10,4 +10,3 @@
@import "./subject.scss";
@import "./Marks.scss";
@import "./exercise.scss";
@import './Map.scss';

21
src/api/ReSeller.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/reseller",
ADD: "/reseller",
DELETE: "/reseller",
UPDATE: "/reseller",
};
const KEY = "ReSeller";
export const useGetAllReSeller = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddReSeller = () => useAddMutation(KEY, API.ADD);
export const useUpdateReSeller = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteReSeller = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

21
src/api/StudentPackage.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/resellers/studentPackage",
ADD: "/resellers/studentPackage",
DELETE: "/resellers/studentPackage",
UPDATE: "/resellers/studentPackage",
};
const KEY = "StudentPackage";
export const useGetAllStudentPackage = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddStudentPackage = () => useAddMutation(KEY, API.ADD);
export const useUpdateStudentPackage = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteStudentPackage = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

2
src/api/config.ts
View File

@ -1,4 +1,4 @@
export const BaseURL = "https://nerd-back.point-dev.net/api/";
export const BaseURL = "http://127.0.0.1:8000/api/";
// export const BaseURL = "http://127.0.0.1:8000/api/";
// export const BaseURL = "http://192.168.1.120:8000/api/";

5
src/api/helper/useAddMutation.ts
View File

@ -8,8 +8,6 @@ function useAddMutation(
key: string,
url: string,
toast: boolean = true,
params: any = {},
options: any = {},
): UseMutationResult<AxiosResponse, unknown, any, unknown> {
const axios = useAxios();
return useMutation<AxiosResponse, unknown, any, unknown>(
@ -22,12 +20,9 @@ function useAddMutation(
["X-Custom-Message"]: toast,
[HEADER_KEY]: key,
},
});
return data;
},
options,
);
}

3
src/api/lesson.ts
View File

@ -8,7 +8,6 @@ const API = {
ADD: "/lesson",
DELETE: "/lesson",
UPDATE: "/lesson",
ORDER: "/lesson/order",
};
const KEY = "lesson";
@ -20,5 +19,3 @@ export const useUpdateLesson = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteLesson = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);
export const useUpdateLessonOrder = (params?: any) => useAddMutation("karim", API.ORDER);

20
src/api/packageItem.ts
View File

@ -1,20 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/packageItem",
ADD: "/packageItem",
DELETE: "/packageItem",
UPDATE: "/packageItem",
};
const KEY = "PackageItem";
export const useGetAllPackageItem = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddPackageItem = () => useAddMutation(KEY, API.ADD);
export const useUpdatePackageItem = (params?: any) => useUpdateMutation(KEY, API.GET);
export const useDeletePackageItem = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

2
src/api/unit.ts
View File

@ -8,7 +8,6 @@ const API = {
ADD: "/unit",
DELETE: "/unit",
UPDATE: "/unit",
ORDER: "/unit/order",
};
const KEY = "unit";
@ -16,6 +15,5 @@ export const useGetAllUnit = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddUnit = () => useAddMutation(KEY, API.ADD);
export const useUpdateUnit = (params?: any) => useUpdateMutation(KEY, API.GET);
export const useUpdateUnitOrder = (params?: any,option?: any,) => useAddMutation("karim", API.ORDER,true,params,option);
export const useDeleteUnit = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

1
src/enums/Date.ts
View File

@ -1,4 +1,3 @@
export enum DateEnum {
FORMATE = "YYYY-MM-DD",
SEND_DATE_FORMAT = "YYYY-MM-DD",
}

15
src/enums/Model.ts
View File

@ -155,17 +155,8 @@ export enum ModalEnum {
///package
PACKAGE_EDIT = "Package.edit",
PACKAGE_ADD = "Package.add",
PACKAGE_DELETE = "Package.delete",
Package_EDIT = "Package.edit",
Package_ADD = "Package.add",
Package_DELETE = "Package.delete",
/// ReSeller
RE_SELLER_EDIT = "ReSeller.edit",
RE_SELLER_ADD = "ReSeller.add",
RE_SELLER_DELETE = "ReSeller.delete",
/// studentPackage
STUDENT_PACKAGE_EDIT = "studentPackage.edit",
STUDENT_PACKAGE_ADD = "studentPackage.add",
STUDENT_PACKAGE_DELETE = "studentPackage.delete",
}

5
src/enums/UserType.ts
View File

@ -1,6 +1,5 @@
export enum UserTypeEnum {
ADMIN = "admin",
RE_SELLER = "reseller",
PASS="pass"
ADMIN = "ADMIN",
RE_SELLER = "RE_SELLER",
}

5
src/enums/abilities.ts
View File

@ -7,7 +7,7 @@ export enum ABILITIES_ENUM {
EARLY_DEPARTURE = "earlyDeparture",
EDUCATION_CLASS = "eduClass",
GRADE = "grade",
Package = "packages",
Package = "package",
HOMEWORK_ATTACHMENT = "homeworkAttachment",
HOMEWORK = "homework",
LATE_ARRIVAL = "lateArrival",
@ -43,9 +43,6 @@ export enum ABILITIES_ENUM {
QUESTION = "Question",
ADMIN = "admin",
CURRICULUM = "curriculum",
PACKAGE_ITEM = "package_item",
RE_SELLER = "ReSeller",
STUDENT_PACKAGE='studentPackage'
////
}

Some files were not shown because too many files have changed in this diff Show More