From 1a7847412019aeac4e9e19c8da7b6f77a624d8e4 Mon Sep 17 00:00:00 2001 From: karimaldeen Date: Tue, 10 Sep 2024 10:19:33 +0300 Subject: [PATCH] add karim field v4 --- src/Components/CustomFields/SelectTag.tsx | 4 +- .../ValidationField/Ui/KarimSpinner.tsx | 24 -- .../ValidationField/Ui/SearchBar.scss | 37 --- .../ValidationField/Ui/SearchBar.tsx | 45 ---- .../ValidationField/ValidationField.tsx | 8 +- .../ValidationField/View/CheckboxField.tsx | 20 +- .../ValidationField/View/DataRange.tsx | 35 +-- src/Components/ValidationField/View/Date.tsx | 41 ++- .../ValidationField/View/Default.tsx | 51 ++-- .../ValidationField/View/DropFile.tsx.tsx | 6 +- src/Components/ValidationField/View/File.tsx | 23 +- .../ValidationField/View/LocalSearch.tsx | 55 ++-- .../ValidationField/View/MaltyFile.tsx | 54 ++-- .../ValidationField/View/NumberField.tsx | 70 ------ .../ValidationField/View/NumberFormate.tsx | 46 ++-- .../ValidationField/View/SearchField.tsx | 160 ++++++++---- .../ValidationField/View/SelectField.tsx | 60 ++--- .../ValidationField/View/TextAreaField.tsx | 17 +- .../ValidationField/View/TextField.tsx | 40 ++- src/Components/ValidationField/View/Time.tsx | 36 ++- .../components/ValidationFieldContainer.tsx | 24 ++ .../components/ValidationFieldLabel.tsx | 39 +++ src/Components/ValidationField/index.tsx | 2 - .../state/ValidationValidationParamState.ts | 36 +++ .../utils/ValidationField.scss | 3 +- .../ValidationField/utils/getNestedValue.ts | 7 - .../utils/translatedOptions.ts | 5 +- src/Components/ValidationField/utils/types.ts | 237 +++++------------- src/Layout/Dashboard/FilterLayout.tsx | 2 +- src/Pages/Admin/Student/Model/AddModel.tsx | 33 +++ src/Pages/Admin/Student/Model/EditModel.tsx | 37 +++ src/Pages/Admin/Student/Model/FilterForm.tsx | 25 ++ src/Pages/Admin/Student/Model/ModelForm.tsx | 58 +++++ src/Pages/Admin/Student/Model/formUtil.ts | 27 ++ src/Pages/Admin/Student/Page.tsx | 47 ++++ src/Pages/Admin/Student/Table.tsx | 13 + src/Pages/Admin/Student/useTableColumns.tsx | 91 +++++++ src/Pages/Admin/question/AddPage.tsx | 14 +- .../question/Model/Field/ChoiceFields.tsx | 4 +- src/Pages/Admin/question/Model/ModelForm.tsx | 6 +- src/Pages/Admin/question/Model/formUtil.ts | 28 ++- src/Routes.tsx | 12 +- src/Styles/Layout/PageHeader.scss | 7 + src/Styles/Pages/exercise.scss | 11 + src/api/Question.ts | 2 +- src/translate/ar.json | 7 +- src/types/App.ts | 4 + src/types/Item.ts | 2 +- src/types/Student.ts | 34 +++ 49 files changed, 905 insertions(+), 744 deletions(-) delete mode 100644 src/Components/ValidationField/Ui/KarimSpinner.tsx delete mode 100644 src/Components/ValidationField/Ui/SearchBar.scss delete mode 100644 src/Components/ValidationField/Ui/SearchBar.tsx delete mode 100644 src/Components/ValidationField/View/NumberField.tsx create mode 100644 src/Components/ValidationField/components/ValidationFieldContainer.tsx create mode 100644 src/Components/ValidationField/components/ValidationFieldLabel.tsx create mode 100644 src/Components/ValidationField/state/ValidationValidationParamState.ts delete mode 100644 src/Components/ValidationField/utils/getNestedValue.ts create mode 100644 src/Pages/Admin/Student/Model/AddModel.tsx create mode 100644 src/Pages/Admin/Student/Model/EditModel.tsx create mode 100644 src/Pages/Admin/Student/Model/FilterForm.tsx create mode 100644 src/Pages/Admin/Student/Model/ModelForm.tsx create mode 100644 src/Pages/Admin/Student/Model/formUtil.ts create mode 100644 src/Pages/Admin/Student/Page.tsx create mode 100644 src/Pages/Admin/Student/Table.tsx create mode 100644 src/Pages/Admin/Student/useTableColumns.tsx create mode 100644 src/types/Student.ts diff --git a/src/Components/CustomFields/SelectTag.tsx b/src/Components/CustomFields/SelectTag.tsx index 0d844b9..052edb7 100644 --- a/src/Components/CustomFields/SelectTag.tsx +++ b/src/Components/CustomFields/SelectTag.tsx @@ -10,6 +10,8 @@ const SelectTag: React.FC = () => { const [fieldValue, setFieldValue] = useState(''); const formik = useFormikContext() const handleChange = (value: string[]) => { + console.log(value); + formik.setFieldValue("tags",value) setSearchValue(''); setFieldValue(''); @@ -38,7 +40,7 @@ const SelectTag: React.FC = () => { const [t] = useTranslation(); const options = data?.data ?? [] - const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`new_${searchValue}`,name:searchValue}] :[]; + const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`${searchValue}`,name:searchValue}] :[]; return (
diff --git a/src/Components/ValidationField/Ui/KarimSpinner.tsx b/src/Components/ValidationField/Ui/KarimSpinner.tsx deleted file mode 100644 index 53a29d4..0000000 --- a/src/Components/ValidationField/Ui/KarimSpinner.tsx +++ /dev/null @@ -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 = ({ loading, className, children }) => { - return ( -
- {loading ? ( -
- -
- ) : ( - children - )} -
- ); -}; - -export default KarimSpinner; diff --git a/src/Components/ValidationField/Ui/SearchBar.scss b/src/Components/ValidationField/Ui/SearchBar.scss deleted file mode 100644 index 6796871..0000000 --- a/src/Components/ValidationField/Ui/SearchBar.scss +++ /dev/null @@ -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; -// } -// } diff --git a/src/Components/ValidationField/Ui/SearchBar.tsx b/src/Components/ValidationField/Ui/SearchBar.tsx deleted file mode 100644 index 46d2566..0000000 --- a/src/Components/ValidationField/Ui/SearchBar.tsx +++ /dev/null @@ -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 ( -
-
- - -
-
- ); -}; - -export default SearchBar; diff --git a/src/Components/ValidationField/ValidationField.tsx b/src/Components/ValidationField/ValidationField.tsx index c02aa07..3b2f503 100644 --- a/src/Components/ValidationField/ValidationField.tsx +++ b/src/Components/ValidationField/ValidationField.tsx @@ -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 } = { Select: SelectField, @@ -31,12 +30,11 @@ const components: { [key: string]: React.FC } = { MaltyFile: MaltyFile, Checkbox: CheckboxField, NumberFormate: NumberFormate, - Number: NumberField, }; const ValidationField: React.FC = React.memo( - ({ type, ...otherProps }: any) => { - const Component = components[type as ValidationFieldType]; + ({ type = "text", ...otherProps }) => { + const Component = components[type ?? ("text" as ValidationFieldType)]; if (!Component) { return ; diff --git a/src/Components/ValidationField/View/CheckboxField.tsx b/src/Components/ValidationField/View/CheckboxField.tsx index ad070a9..c29116f 100644 --- a/src/Components/ValidationField/View/CheckboxField.tsx +++ b/src/Components/ValidationField/View/CheckboxField.tsx @@ -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, @@ -17,25 +17,17 @@ const CheckboxField = ({ }; return ( -
- -
- {t(`input.${label ? label : name}`)} -
+
+ - + {t(`input.${label ? label : name}`)} - - +
); }; diff --git a/src/Components/ValidationField/View/DataRange.tsx b/src/Components/ValidationField/View/DataRange.tsx index 85dd3a3..ce8b585 100644 --- a/src/Components/ValidationField/View/DataRange.tsx +++ b/src/Components/ValidationField/View/DataRange.tsx @@ -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 (
- {no_label ? ( - - ) : label_icon ? ( -
- - -
- ) : ( - - )} + - + - +
); }; diff --git a/src/Components/ValidationField/View/Date.tsx b/src/Components/ValidationField/View/Date.tsx index a14663d..54cc5bc 100644 --- a/src/Components/ValidationField/View/Date.tsx +++ b/src/Components/ValidationField/View/Date.tsx @@ -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]; return (
- {no_label ? ( - - ) : label_icon ? ( -
- - -
- ) : ( - - )} + - + {/* */} - +
); }; diff --git a/src/Components/ValidationField/View/Default.tsx b/src/Components/ValidationField/View/Default.tsx index 1893127..5a0db12 100644 --- a/src/Components/ValidationField/View/Default.tsx +++ b/src/Components/ValidationField/View/Default.tsx @@ -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 (
- {label2 ? ( - - ) : no_label ? ( - - ) : label_icon ? ( -
- - -
- ) : ( - - )} + - + - +
); }; diff --git a/src/Components/ValidationField/View/DropFile.tsx.tsx b/src/Components/ValidationField/View/DropFile.tsx.tsx index 2f45684..b9e870f 100644 --- a/src/Components/ValidationField/View/DropFile.tsx.tsx +++ b/src/Components/ValidationField/View/DropFile.tsx.tsx @@ -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>[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 ? ( { const { formik, t, isError, errorMsg } = useFormField(name, props); 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 { @@ -64,12 +62,15 @@ const File = ({ onChange={onChange || FilehandleChange} customRequest={customRequest} className={` w-100`} + id={name} >
{isError ? "required" : ""}
{errorMsg} @@ -78,4 +79,4 @@ const File = ({ ); }; -export default File; +export default React.memo(File); diff --git a/src/Components/ValidationField/View/LocalSearch.tsx b/src/Components/ValidationField/View/LocalSearch.tsx index 03b3efc..04c40cd 100644 --- a/src/Components/ValidationField/View/LocalSearch.tsx +++ b/src/Components/ValidationField/View/LocalSearch.tsx @@ -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 (
- {no_label ? ( - - ) : label_icon ? ( -
- - -
- ) : ( - - )} - + + : "لا يوجد"} - onSearch={SearchHandleChange} + optionFilterProp="name" + notFoundContent={isLoading ? : t("validation.undefined")} + onSearch={handleChange} + onBlur={handleBlur} + id={name} + onPopupScroll={handleScroll} + fieldNames={{ label: "name", value: "id" }} + {...props} /> - +
); }; diff --git a/src/Components/ValidationField/View/SelectField.tsx b/src/Components/ValidationField/View/SelectField.tsx index 1470bca..4236a47 100644 --- a/src/Components/ValidationField/View/SelectField.tsx +++ b/src/Components/ValidationField/View/SelectField.tsx @@ -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 (
- {no_label ? ( - - ) : label_icon ? ( -
- - -
- ) : ( - - )} + - +