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

Compare commits

base: Karimaldeen:6213253337fcf8184549cc140c112f70ff008d41
Branches Tags
Karimaldeen:main
Karimaldeen:dev
...
compare: Karimaldeen:8f993912fcb474abb6ff3da4e2a375a36e99655d
Branches Tags
Karimaldeen:dev
Karimaldeen:main

3 Commits
6213253337 ... 8f993912fc

Author SHA1 Message Date
karimaldeen
8f993912fc end seller page 2024-08-19 15:13:54 +03:00
karimaldeen
7e8fa6431c add package item 2024-08-18 16:07:34 +03:00
karimaldeen
5e0e0afd01 end package 2024-08-18 15:25:56 +03:00
73 changed files with 5546 additions and 6503 deletions
Show Stats Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

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

3
package.json
View File

@ -18,6 +18,7 @@
"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",
@ -26,6 +27,7 @@
"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",
@ -66,6 +68,7 @@
"@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",

8915
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

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

@ -1,24 +0,0 @@
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
View File

@ -1,37 +0,0 @@
.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
View File

@ -1,45 +0,0 @@
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,17 +6,16 @@ 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,
@ -31,12 +30,11 @@ const components: { [key: string]: React.FC<any> } = {
MaltyFile: MaltyFile,
Checkbox: CheckboxField,
NumberFormate: NumberFormate,
Number: NumberField,
};
const ValidationField: React.FC<ValidationFieldProps> = React.memo(
({ type, ...otherProps }: any) => {
const Component = components[type as ValidationFieldType];
({ type = "text", ...otherProps }) => {
const Component = components[type ?? ("text" 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, Form } from "antd";
import { getNestedValue } from "../utils/getNestedValue";
import { Checkbox } from "antd";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
const CheckboxField = ({
name,
label,
@ -13,25 +13,21 @@ const CheckboxField = ({
}: any) => {
const { t, formik, isError, errorMsg } = useFormField(name, props);
const CheckboxhandleChange = (value: any) => {
formik.setFieldValue(name, value?.target?.checked ? 1 : 0);
formik.setFieldValue(name, value?.target?.checked);
};
return (
<div className={Group ? "d-inline mt-3 Checkboxs" : ``}>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<div className={Group ? "d-inline mt-3 Checkbox" : ``}>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Checkbox
onChange={onChange || CheckboxhandleChange}
disabled={isDisabled}
checked={formik.values?.[name] === 1}
checked={formik.values?.[name] ?? false}
className={className}
>
{t(`input.${label ? label : name}`)}
</Checkbox>
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

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

@ -3,6 +3,8 @@ 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;
@ -24,28 +26,16 @@ const DataRange = ({
};
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 : name}`)}
</label>
)}
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<RangePicker
placeholder={placeholder}
size="large"
@ -55,8 +45,9 @@ const DataRange = ({
onChange={onChange || onCalendarChange}
disabled={isDisabled}
defaultValue={formik.values[name]}
id={name}
/>
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

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

@ -3,6 +3,9 @@ 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,
@ -21,34 +24,21 @@ const Date = ({
const FormikValue = formik.values[name];
const onCalendarChange = (value: any) => {
formik.setFieldValue(name, value);
// console.log(value,"value ");
};
const Formater = "YYYY/MM/DD";
const Formatter = [DateEnum?.FORMATE, DateEnum?.FORMATE2];
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 : name}`)}
</label>
)}
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<DatePicker
picker={picker}
placeholder={t(`input.${placeholder}`)}
@ -58,10 +48,11 @@ const Date = ({
size="large"
onChange={onChange || onCalendarChange}
disabled={isDisabled}
format={Formater}
format={Formatter}
id={name}
/>
{/* <DatePicker onChange={onChange} /> */}
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

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

@ -1,9 +1,10 @@
import { Form, Input } from "antd";
import { Input } 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";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
import { FieldProps } from "../utils/types";
const Default = ({
name,
@ -14,52 +15,34 @@ const Default = ({
type,
no_label,
label_icon,
label2,
...props
}: ValidationFieldPropsInput) => {
}: any) => {
const { errorMsg, isError, t } = useFormField(name, props);
return (
<div className="ValidationField w-100">
{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>
)}
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Field
as={Input}
type={type ?? "text"}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
placeholder={t(`input.${placeholder || label || name}`)}
name={name}
id={name}
disabled={isDisabled}
size="large"
{...(type === "number" && { min: 0 })}
{...props}
/>
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

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

@ -3,7 +3,6 @@ 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];
@ -12,7 +11,7 @@ const DropFile = ({
label,
onChange,
isDisabled,
placholder,
placeholder,
className,
props,
no_label,
@ -23,7 +22,7 @@ const DropFile = ({
const FormikValue =
typeof FormikName === "string"
? ImageBaseURL + FormikName
? FormikName
: FormikName instanceof File
? URL.createObjectURL(FormikName)
: "";
@ -71,6 +70,7 @@ 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 { useMemo } from "react";
import React, { useMemo } from "react";
const File = ({
name,
label,
onChange,
isDisabled,
placholder,
placeholder,
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: "uploaded-image",
name: "",
status: "done",
url: imageUrl,
thumbUrl: imageUrl,
}
: {
uid: imageUrl.uid || "-1",
name: imageUrl.name || "uploaded-image",
name: imageUrl.name || "",
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,12 +62,15 @@ const File = ({
onChange={onChange || FilehandleChange}
customRequest={customRequest}
className={` w-100`}
id={name}
>
<Button
className={isError ? "isError w-100 " : " w-100"}
icon={<UploadOutlined />}
>
{placholder ?? t("input.Click_to_upload_the_image")}
{placeholder
? t(`input.${placeholder}`)
: t("input.Click_to_upload_the_image")}
</Button>
<div className="Error_color"> {isError ? "required" : ""}</div>
{errorMsg}
@ -76,4 +79,4 @@ const File = ({
);
};
export default File;
export default React.memo(File);

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

@ -1,8 +1,9 @@
import { Form, Select } from "antd";
import { 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,
@ -13,9 +14,9 @@ const LocalSelectField = ({
isMulti,
onChange,
className,
props,
no_label,
label_icon,
...props
}: any) => {
const { errorMsg, isError, t, formik } = useFormField(name, props);
@ -29,13 +30,6 @@ 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);
@ -47,35 +41,21 @@ const LocalSelectField = ({
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 : name}`)}
</label>
)}
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Select
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
placeholder={t(`input.${placeholder || label || name}`)}
disabled={isDisabled}
options={translateOptions(option, t)}
size="large"
className={`${className} ${isError ? "Select_error" : ""} w-100`}
className={`${className} ${isError ? "SelectError" : ""} w-100`}
value={formik.values[name]}
allowClear
{...(isMulti && { mode: "multiple" })}
@ -84,8 +64,11 @@ 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}
/>
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

18
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,11 +15,10 @@ const MaltyFile = ({
const { formik, t, isError } = useFormField(name, props);
let imageUrl = formik?.values?.[name] ?? null;
// Mapping formik values to fileList format
const fileList = imageUrl
// Memoizing the fileList to prevent unnecessary recalculations
const fileList = useMemo(() => {
return imageUrl
? imageUrl.map((file: any, index: number) => {
// console.log(file,"file");
return file instanceof File
? {
uid: index,
@ -37,6 +36,7 @@ const MaltyFile = ({
};
})
: [];
}, [imageUrl]); // Dependency array ensures it recalculates only when imageUrl changes
const FilehandleChange = ({ fileList }: any) => {
if (fileList.length === 0) {
@ -48,6 +48,7 @@ const MaltyFile = ({
);
}
};
// Custom request function
const customRequest = async ({ onSuccess }: any) => {
// Perform any necessary actions before onSuccess is called
@ -63,19 +64,20 @@ const MaltyFile = ({
<Upload
disabled={isDisabled}
listType="picture"
fileList={fileList} // Using fileList instead of defaultFileList
fileList={fileList} // Using memoized fileList
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"}
className={isError ? "isError w-100" : "w-100"}
icon={<UploadOutlined />}
>
{t(`input.` + placeholder) ?? t("input.upload_image")}
</Button>
<div className="Error_color"> {isError ? "required" : ""}</div>
<div className="Error_color">{isError ? "required" : ""}</div>
</Upload>
</div>
);

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

@ -1,70 +0,0 @@
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,18 +1,19 @@
import { Form, Input, InputNumber } from "antd";
import { 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: {
@ -23,28 +24,15 @@ const NumberFormate = ({
};
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 : ""}
>
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Field
as={InputNumber}
formatter={(value: any) =>
@ -57,16 +45,16 @@ const NumberFormate = ({
type={type ?? "text"}
value={formik.values[name]}
onChange={SelectableChange}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
placeholder={t(`input.${placeholder || label || name}`)}
name={name}
disabled={isDisabled}
size="large"
id={name}
{...props}
// onChange={onChange ? onChange : handleChange}
/>
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

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

@ -1,87 +1,143 @@
import { Form, Select, Spin } from "antd";
import { Select, Spin } from "antd";
import React, { useEffect, useState } from "react";
import useFormField from "../../../Hooks/useFormField";
import { useNavigate } from "react-router-dom";
import { MdOutlineEdit } from "react-icons/md";
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";
const SearchField = ({
name,
label,
placeholder,
isDisabled,
searchBy,
option,
searchBy = "search",
option = [],
isMulti,
onChange,
className,
props,
no_label,
label_icon,
isLoading,
}: any) => {
canChangePage,
PageName,
page,
...props
}: SearchFieldProps) => {
const { errorMsg, isError, t, formik } = useFormField(name, props);
const [searchQuery, setSearchQuery] = useState<string>("");
const navigate = useNavigate();
useEffect(() => {
const searchParams = new URLSearchParams(window?.location?.search);
setSearchQuery(searchParams?.get("search") || "");
}, []);
const { pushValidationParamState, setValidationParamState } =
useValidationValidationParamState();
const SelectableChange = (value: {
value: string;
label: React.ReactNode;
}) => {
const [AllPagesOption, setAllPagesOption] = useState<any>([]);
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 SelectableChange = (value: any) => {
formik?.setFieldValue(name, value);
};
const SearchHandleChange = (value: any) => {
navigate(`${window?.location?.pathname}?${searchBy}=${value}`, {
replace: true,
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,
});
}
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 ">
{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 : ""}
>
<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}>
<Select
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
placeholder={t(`input.${placeholder || label || name}`)}
disabled={isDisabled}
options={option}
options={AllPagesOption}
size="large"
className={`${className} w-100`}
value={formik.values[name]}
loading={isLoading}
// loading={isLoading}
allowClear
{...(isMulti && { mode: "multiple" })}
onChange={onChange || SelectableChange}
showSearch
optionFilterProp="label"
notFoundContent={isLoading ? <Spin /> : "لا يوجد"}
onSearch={SearchHandleChange}
optionFilterProp="name"
notFoundContent={isLoading ? <Spin /> : t("validation.undefined")}
onSearch={handleChange}
onBlur={handleBlur}
id={name}
onPopupScroll={handleScroll}
fieldNames={{ label: "name", value: "id" }}
{...props}
/>
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

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

@ -1,8 +1,10 @@
import { Form, Select, Spin } from "antd";
import { Select } 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,
@ -13,10 +15,11 @@ const SelectField = ({
isMulti,
onChange,
className,
props,
no_label,
label_icon,
}: any) => {
isLoading,
...props
}: SelectFieldProps) => {
const { errorMsg, isError, t, formik } = useFormField(name, props);
const SelectableChange = (value: {
value: string;
@ -24,47 +27,36 @@ const SelectField = ({
}) => {
formik.setFieldValue(name, value);
};
// console.log(name,"Select");
const options = translateOptions(option, t);
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 : name}`)}
</label>
)}
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Select
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
placeholder={t(`input.${placeholder || label || name}`)}
disabled={isDisabled}
options={translateOptions(option, t)}
loading={option?.length < 1}
options={options}
{...(isLoading && { loading: isLoading })}
size="large"
className={`${className} ${isError ? "Select_error" : ""} w-100`}
className={`${className} ${isError ? "SelectError" : ""} w-100`}
value={formik.values[name]}
allowClear
{...(isMulti && { mode: "multiple" })}
onChange={onChange || SelectableChange}
showSearch={false}
id={name}
fieldNames={{label:"name",value:"id"}}
{...props}
/>
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

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

@ -1,7 +1,8 @@
import { Form, Input } from "antd";
import { 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 = ({
@ -11,14 +12,12 @@ 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);
};
@ -27,11 +26,7 @@ const TextAreaField = ({
<label htmlFor={name} className="text">
{t(`input.${label ? label : name}`)}
</label>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Field
as={TextArea}
placeholder={t(`input.${placeholder ? placeholder : name}`)}
@ -39,10 +34,10 @@ const TextAreaField = ({
disabled={isDisabled}
size="large"
onChange={onChange || handleChange}
id={name}
// onChange={onChange ? onChange : handleChange}
/>
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

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

@ -3,6 +3,8 @@ 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 = ({
@ -21,33 +23,20 @@ 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 ?? ""} `}>
{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>
)}
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Field
as={TextArea}
placeholder={t(`input.${placeholder ? placeholder : name}`)}
@ -58,8 +47,9 @@ const TextField = ({
maxLength={1000}
onChange={onChange || TextFilehandleChange}
style={{ height: 120 }}
id={name}
/>
</Form.Item>
</ValidationFieldContainer>
</div>
);
};

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

@ -3,6 +3,7 @@ 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,
@ -20,27 +21,19 @@ const Time = ({
formik.setFieldValue(name, value);
};
const Formater = "H:mm";
const Formatter = "H:mm";
const FormikValue = formik.values[name];
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 : name}`)}
</label>
)}
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<Form.Item
hasFeedback
@ -51,14 +44,13 @@ const Time = ({
allowClear
className={`${className} w-100`}
size="large"
value={FormikValue ? dayjs(FormikValue, Formater) : null}
value={FormikValue ? dayjs(FormikValue, Formatter) : null}
onChange={onChange || onCalendarChange}
disabled={isDisabled}
placeholder={t(
`input.${placeholder ? placeholder : label ? label : name}`,
)}
format={Formater}
placeholder={t(`input.${placeholder || label || name}`)}
format={Formatter}
needConfirm={false}
id={name}
/>
</Form.Item>
</div>

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

@ -0,0 +1,24 @@
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 Normal file
View File

@ -0,0 +1,39 @@
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,7 +2,6 @@ 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,
@ -12,5 +11,4 @@ export {
useFormikContext,
useTranslation,
FaExclamationCircle,
convert_data_to_select,
};

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

@ -0,0 +1,36 @@
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);
}
.Select_error {
.SelectError {
.ant-select-selector {
border: 1px solid red !important;
}
@ -60,12 +60,9 @@
.ant-upload-select {
width: 100%;
}
.Checkboxs {
.Checkbox {
padding: 4%;
}
.ant-checkbox-wrapper {
min-width: 100px;
}
.SearchField {
button {
background: var(--primary);
@ -201,27 +198,3 @@ 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
View File

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

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

@ -1,148 +1,60 @@
import { InputProps } from "antd";
import { InputProps, SelectProps } from "antd";
export type ValidationFieldType =
| "text"
| "Select"
| "LocalSearch"
| "Search"
| "DataRange"
| "Date"
| "Time"
| "File"
| "MaltyFile"
| "DropFile"
| "Checkbox"
| "number"
| "password"
| "email"
| "TextArea";
export interface ValidationFieldPropsText {
// Common properties for all field types
interface BaseFieldProps {
name: string;
no_label?: boolean;
label_icon?: boolean;
type: "text";
placeholder?: string;
label?: string;
placeholder?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
no_label?: boolean;
label_icon?: boolean;
}
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";
// 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 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;
export type SearchFieldProps = BaseFieldProps &
SelectProps & {
type: "Search";
placeholder?: string;
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
option: any[];
isMulti?: boolean;
isLoading: 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";
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";
}
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";
}
export interface ValidationFieldPropsFile {
name: string;
no_label?: boolean;
label_icon?: boolean;
type FileFieldProps = BaseFieldProps & {
type: "File" | "MaltyFile" | "DropFile";
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 CheckboxFieldProps = BaseFieldProps & {
type: "Checkbox";
label?: string;
className?: string;
isDisabled?: boolean;
onChange?: (value: any) => void;
dir?: "ltr" | "rtl";
Group?: boolean;
}
export interface ValidationFieldPropstext {
name: string;
no_label?: boolean;
label_icon?: boolean;
};
export type FieldProps = BaseFieldProps &
InputProps & {
type?:
| "text"
| "number"
@ -150,45 +62,19 @@ export interface ValidationFieldPropstext {
| "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; // 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;
}
[key: string]: any;
};
// Union type for all field types
export type ValidationFieldProps =
| ValidationFieldPropsInput
| ValidationFieldPropsSelect
| ValidationFieldPropsLocalSearch
| ValidationFieldPropsDataRange
| ValidationFieldPropsDate
| ValidationFieldPropsTime
| ValidationFieldPropsFile
| ValidationFieldPropsCheckbox
| ValidationFieldPropstext
| ValidationFieldPropsSearch;
| SelectFieldProps
| DateFieldProps
| FileFieldProps
| CheckboxFieldProps
| SearchFieldProps
| FieldProps;
// Validation field type
export type ValidationFieldType = ValidationFieldProps["type"];

25
src/Hooks/useDebounce.ts Normal file
View File

@ -0,0 +1,25 @@
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;
};

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

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

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

@ -0,0 +1,96 @@
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;

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

@ -6,40 +6,48 @@ 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 } = useAddPackage();
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);
const handleSubmit = (values: any) => {
mutate({
...values,
});
};
useSetPageTitle(t(`page_header.package`));
return (
<>
{/* <LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.Package_ADD}
modelTitle="package"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues({})}
getValidationSchema={getValidationSchema}
>
<ModelForm />
moaz
</LayoutModel> */}
casascaas
<div className="page">
<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">
{/* <div onClick={handleCancel}>{t("practical.back")}</div> */}
{/* <button disabled={isLoading} className="relative" type="submit">
<button disabled={isLoading} className="relative button center" type="submit">
{t("practical.add")}
{isLoading && (
@ -47,11 +55,11 @@ const AddModel: React.FC = () => {
<Spin />
</span>
)}
</button> */}
</button>
</div>
</main>
</FormikForm>
</>
</div>
);
};

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

@ -1,35 +1,72 @@
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 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 { useUpdatePackage } from "../../../api/package";
import SpinContainer from "../../../Components/Layout/SpinContainer";
const EditModel: React.FC = () => {
const { mutate, status } = useUpdatePackage();
const { objectToEdit } = useObjectToEdit((state) => state);
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);
const handleSubmit = (values: any) => {
mutate({
...values,
});
};
useSetPageTitle(t(`page_header.package`));
if(isLoadingData){
return <SpinContainer/>
}
return (
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.Package_EDIT}
modelTitle="package_details"
<div className="page">
<FormikForm
handleSubmit={handleSubmit}
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema}
isAddModal={false}
initialValues={getInitialValues(data?.data)}
validationSchema={getValidationSchema}
>
<header>
{t("header.edit_package")}
</header>
<main className="w-100 exercise_Edit_main">
<ModelForm />
</LayoutModel>
</>
<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>
);
};

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

@ -1,15 +1,236 @@
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" />
<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>
);
};

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

@ -1,16 +1,32 @@
import * as Yup from "yup";
export const getInitialValues = (objectToEdit: any): any => {
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)
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 Normal file
View File

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

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

@ -0,0 +1,96 @@
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 Normal file
View File

@ -0,0 +1,66 @@
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 Normal file
View File

@ -0,0 +1,73 @@
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 Normal file
View File

@ -0,0 +1,238 @@
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;

32
src/Pages/Package/PackageItem/Model/formUtil.ts Normal file
View File

@ -0,0 +1,32 @@
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)
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"),
});
};

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

@ -0,0 +1,59 @@
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 Normal file
View File

@ -0,0 +1,21 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,66 @@
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,10 +50,8 @@ 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,25 +1,33 @@
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 } from "../../utils/hasAbilityFn";
import { canDeletePackage,canEditPackage, canShowPackage } 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);
setIsOpen(ModalEnum?.Package_EDIT);
navigate(`${record?.id}`)
};
// const handleShow = (record: any) => {
// setObjectToEdit(record);
// navigate(`${record?.id}/${ABILITIES_ENUM?.PACKAGE_ITEM}`)
// };
const columns: TableColumnsType<any> = [
{
@ -50,9 +58,11 @@ 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 Normal file
View File

@ -0,0 +1,36 @@
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 Normal file
View File

@ -0,0 +1,40 @@
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 Normal file
View File

@ -0,0 +1,30 @@
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 Normal file
View File

@ -0,0 +1,81 @@
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 Normal file
View File

@ -0,0 +1,67 @@
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 Normal file
View File

@ -0,0 +1,44 @@
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 Normal file
View File

@ -0,0 +1,12 @@
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 Normal file
View File

@ -0,0 +1,98 @@
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;
};

56
src/Routes.tsx
View File

@ -1,5 +1,5 @@
import { TCrudRoute, TMenuItem } from "./types/App";
import { FaHome, FaMoneyBill } from "react-icons/fa";
import { FaHome, FaKey, FaMoneyBill, FaSellcast, FaUserGraduate } from "react-icons/fa";
import { LuPackage } from "react-icons/lu";
import React from "react";
const Dummy = React.lazy(() => import("./Pages/Home/Dummy"));
@ -10,6 +10,8 @@ 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 Unit = React.lazy(() => import("./Pages/Unit/Page"));
const Lesson = React.lazy(() => import("./Pages/lesson/Page"));
@ -19,6 +21,10 @@ 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";
@ -38,7 +44,7 @@ export const menuItems: TMenuItem[] = [
{
header: "page_header.grade",
element: <Grade />,
icon: <FaMoneyBill />,
icon: <FaUserGraduate />,
text: "sidebar.grade",
path: `/${ABILITIES_ENUM?.GRADE}`,
abilities: ABILITIES_ENUM?.GRADE,
@ -68,13 +74,23 @@ export const menuItems: TMenuItem[] = [
{
header: "page_header.tags",
element: <Tags />,
icon: <FaMoneyBill />,
icon: <FaKey />,
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,
},
];
export const CrudRoute: TCrudRoute[] = [
@ -143,16 +159,44 @@ export const CrudRoute: TCrudRoute[] = [
path: `/${ABILITIES_ENUM?.Package}/add`,
abilities: ABILITIES_ENUM?.Package,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
prevPath: 1,
},
{
header: "page_header.edit_package",
element: <EditPackagePage />,
path: `/${ABILITIES_ENUM?.Package}/add`,
path: `/${ABILITIES_ENUM?.Package}/:${ParamsEnum?.PACKAGE_ID}`,
abilities: ABILITIES_ENUM?.Package,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
prevPath: 1,
},
{
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 Normal file
View File

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

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

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

21
src/api/ReSeller.ts Normal file
View File

@ -0,0 +1,21 @@
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);

2
src/api/config.ts
View File

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

20
src/api/packageItem.ts Normal file
View File

@ -0,0 +1,20 @@
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);

10
src/enums/Model.ts
View File

@ -155,8 +155,12 @@ 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",
}

2
src/enums/abilities.ts
View File

@ -43,6 +43,8 @@ export enum ABILITIES_ENUM {
QUESTION = "Question",
ADMIN = "admin",
CURRICULUM = "curriculum",
PACKAGE_ITEM = "package_item",
RE_SELLER = "ReSeller"
////
}

2
src/enums/params.ts
View File

@ -10,5 +10,7 @@ export enum ParamsEnum {
UNIT_ID = "unit_id",
LESSON_ID = "lesson_id",
QUESTION_ID = "question_id",
PACKAGE_ID = "package_id",
CHILDREN_QUESTION_ID = "children_question_id",
PACKAGE_ITEM_ID= "package_item_id"
}

43
src/translate/ar.json
View File

@ -13,6 +13,7 @@
"Email_is_required": "البريد الإلكتروني مطلوب",
"Password_is_required": "كلمة المرور مطلوبة",
"Password_must_be_at_least_8_characters_long": "يجب أن تكون كلمة المرور مكونة من 8 أحرف على الأقل",
"must_be_at_least_10_characters_long":"يجب أن تكون مكونة من 10 أحرف على الأقل",
"Nationality_is_required": "الجنسية مطلوبة",
"Address_is_required": "العنوان مطلوب",
"Place_of_birth_is_required": "مكان الميلاد مطلوب",
@ -46,7 +47,9 @@
"Due_date_must_be_before_assigning_date": "يجب أن يكون تاريخ الاستحقاق بعد تاريخ التعيين",
"grade_to_pass_must_be_less_than_max_grade": "يجب أن تكون درجة النجاح أقل من الحد الأقصى للدرجة",
"max_mark_must_be_greater_than_min_mark_to_pass": "يجب ان تكون اكبر من علامة النجاح",
"Sorry, the question must have at least one option": "عذرًا، يجب أن يحتوي السؤال على خيار واحد على الأقل"
"Sorry, the question must have at least one option": "عذرًا، يجب أن يحتوي السؤال على خيار واحد على الأقل",
"must_have_on_item":"يجب ان يحتوي على عنصر واحد على الاقل",
"Please enter a valid phone number (e.g., +1 123-456-7890)":"يرجى إدخال رقم هاتف صالح (مثل: +1 123-456-7890)"
},
"header": {
"register_students": "تسجيل الطلاب",
@ -107,7 +110,9 @@
"malty_exercise": "تمرين متعدد",
"add_new_question": "اضافة سؤال جديد",
"exercise": "تمارين",
"icon": "الايقونة"
"icon": "الايقونة",
"add_new_package":"اضافة حزمة جديدة",
"configuration":"إعدادات"
},
"columns": {
"id": "الرقم التعريفي",
@ -157,7 +162,8 @@
"question_options_count": "عدد الخيارات",
"canAnswersBeShuffled":"يمكن خلط الإجابات",
"price":"السعر",
"grade_id":"رقم تعريف الدرجة"
"grade_id":"رقم تعريف الدرجة",
"first_name":"الاسم الأول"
},
"practical": {
"to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@ -199,7 +205,15 @@
"Are you sure you want to go back and not save any changes?": "هل أنت متأكد أنك تريد العودة وعدم حفظ أي تغييرات؟",
"accept_back": "قبول العودة ",
"accept": "قبول ",
"to_confirm_deletion_please_re_enter_id": "يرجى اعادة ادخال رقم التعريف"
"to_confirm_deletion_please_re_enter_id": "يرجى اعادة ادخال رقم التعريف",
"add_new":"اضافة عنصر",
"delete_last":"حذف عنصر",
"key":"الاسم",
"value":"القيمة",
"delete_this_item":"حذف هذا العنصر",
"Hide":"اخفاء",
"Show":"عرض",
"Map":"خريطة"
},
"Table": {
"header": "",
@ -264,7 +278,8 @@
"curriculum": "مقرر",
"package":"حزمة",
"package_details":"تفاصيل الحزمة",
"add_package":"اضافة حزمة"
"add_package":"اضافة حزمة",
"ReSeller":"بائع"
},
"education_class_actions": {
"Student_Records": "سجلات الطلاب",
@ -365,7 +380,17 @@
"question": "السؤال",
"id": "الرقم التعريفي",
"canAnswersBeShuffled": "يمكن خلط الإجابات",
"hint": "تَلمِيح"
"hint": "تَلمِيح",
"grade":"الدرجات",
"subject":"المادة",
"curriculum":"مقرر",
"lesson":"الدرس",
"unit":"الوحدة",
"contact_number1":"رقم التواصل 1",
"contact_number2":"رقم التواصل 2",
"lat":"خط العرض",
"lng":" خط الطول "
},
"select": {
@ -668,7 +693,8 @@
"tags": "كلمات مفتاحية",
"grade": "الدرجات",
"curriculum": "مقرر",
"package":"حزمة"
"package":"حزمة",
"reSeller":"البائع"
},
"message": {
"some_thing_went_wrong": "حدث خطأ ما",
@ -725,6 +751,7 @@
"edit_Question": "لوحة القيادة /تعديل اسئلة ",
"grade": "لوحة القيادة /الدرجات ",
"curriculum": "لوحة القيادة / تعديل مقرر ",
"package":"حزمة"
"package":"لوحة القيادة / الحزم ",
"ReSeller":"لوحة القيادة / البائع "
}
}

30
src/types/Package.ts Normal file
View File

@ -0,0 +1,30 @@
import { Nullable } from "./App";
// Define the Teacher interface
export interface Package {
id: number;
name: string;
price: string;
grade_id: number;
subjects_ids: any[];
units_ids: any[];
curriculums_ids: any[];
lessons_ids: any[];
configuration:{}
}
export interface InitialValues {
id: number;
name: string;
price: string;
grade_id: number;
subjects_ids: any[];
units_ids: any[];
curriculums_ids: any[];
lessons_ids: any[];
configuration:{key:string,value:string}[]
}
export type PackageInitialValues = Partial<Nullable<InitialValues>>;

50
src/types/ReSeller.ts Normal file
View File

@ -0,0 +1,50 @@
import { Nullable } from "./App";
// Define the Teacher interface
interface ReSellerUser {
id: number;
username: string;
phone_number: string | null;
type: 'reseller' | 'other'; // Specify other types if needed
}
interface ReSellerLocation {
lat: string;
lng: string;
}
interface ContactInfo {
contact_number1: string;
contact_number2: string;
card_number: string | null;
}
export interface ReSeller {
id: number;
user: ReSellerUser;
first_name: string;
last_name: string;
location: ReSellerLocation;
contact_info: ContactInfo;
contact_number1 : string | number
contact_number2 : string | number
}
export interface InitialValues {
id: number;
user: ReSellerUser;
first_name: string;
last_name: string;
location: ReSellerLocation;
lat: string | Number;
lng: string | Number;
contact_info: ContactInfo;
contact_number1 : string | number
contact_number2 : string | number
username : string
}
export type ReSellerInitialValues = Partial<Nullable<InitialValues>>;

15
src/utils/arrayToObject.ts Normal file
View File

@ -0,0 +1,15 @@
interface KeyValue {
key: string;
value: string;
}
// Function to convert an array of key-value objects to an object
export function arrayToObject(arr: KeyValue[] | null | undefined ): Record<string, string> {
if(!arr){
return {}
}
return arr.reduce((obj, item) => {
obj[item.key] = item.value;
return obj;
}, {} as Record<string, string>);
}

21
src/utils/hasAbilityFn.ts
View File

@ -583,3 +583,24 @@ export const canShowPackage = hasAbility(
ABILITIES_ENUM.Package,
ABILITIES_VALUES_ENUM.SHOW,
);
/// ReSeller
export const canAddReSeller = hasAbility(
ABILITIES_ENUM.RE_SELLER,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditReSeller = hasAbility(
ABILITIES_ENUM.RE_SELLER,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteReSeller = hasAbility(
ABILITIES_ENUM.RE_SELLER,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowReSeller = hasAbility(
ABILITIES_ENUM.RE_SELLER,
ABILITIES_VALUES_ENUM.SHOW,
);

14
src/utils/objectToArray.ts Normal file
View File

@ -0,0 +1,14 @@
interface KeyValue {
key: string;
value: string;
}
export function objectToArray(obj: Record<string, string> | null | undefined): KeyValue[] {
if(!obj){
return [{key:"",value:""}]
}
return Object.entries(obj).map(([key, value]) => ({
key,
value
}));
}

7
tsconfig.json
View File

@ -14,7 +14,10 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"types": ["node"]
},
"include": ["src"]
"include": ["src"],
}