moaz_dw/misbar-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix validatio field

Browse Source
This commit is contained in:
Moaz Dawalibi 2024-07-03 11:23:41 +03:00
parent 42dafb46d3
commit dfa0992425
27 changed files with 217 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/Layout/body_background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 373 KiB

BIN
public/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
public/logo3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 206 KiB

39
src/Components/Karimalden/View/SelectField.tsx
View File

@ -1,39 +0,0 @@
import { Form, Select } from 'antd'
import React from 'react'
import useFormField from '../../../Hooks/useFormField';
const SelectField = ({ name, label, placeholder, isDisabled,option,isMulti,onChange, props}: any) => {
const { errorMsg, isError, t ,formik} = useFormField(name, props)
const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
formik.setFieldValue(name, value)
};
return (
<div className='KarimField'>
<label htmlFor={name} className="text">
{t(`${label ? label : name}`)}
</label>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Select
placeholder={t(`${placeholder ?placeholder : name}`)}
disabled={isDisabled}
options={option}
defaultValue={formik.values[name]}
allowClear
{...(isMulti && { mode: "multiple" })}
onChange={onChange || SelecthandleChange}
/>
</Form.Item>
</div>
)
}
export default SelectField

2
src/Components/Karimalden/KarimField.scss → src/Components/ValidationField/ValidationField.scss
View File

@ -1,4 +1,4 @@
.KarimField{
.ValidationField{
>*{
width: 100%;
}

18
src/Components/Karimalden/KarimField.tsx → src/Components/ValidationField/ValidationField.tsx
View File

@ -1,8 +1,8 @@
import React from "react";
import "./KarimField.scss";
import "./ValidationField.scss";
import { Date, Time, File, DataRange, SelectField, Default, CheckboxField } from './View';
export interface KarimFieldProps {
export interface ValidationFieldProps {
name: string;
type?: "text" | "Select" | "DataRange" | "Date" | "Time" | "File" | "number" | "Checkbox" | "password";
placeholder?: string;
@ -13,13 +13,13 @@ export interface KarimFieldProps {
isDisabled?: boolean;
picker?: "data" | "week" | "month" | "quarter" | "year";
Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM";
accept?:any
accept?: any
onChange?: (value: any) => void;
Group?: boolean
dir?:'ltr' | "rtl"
dir?: 'ltr' | "rtl"
}
const KarimField = (props: KarimFieldProps) => {
const ValidationField = (props: ValidationFieldProps) => {
switch (props?.type) {
case 'Select':
return <SelectField {...props} />;
@ -38,7 +38,7 @@ const KarimField = (props: KarimFieldProps) => {
}
};
KarimField.defaultProps = {
ValidationField.defaultProps = {
type: "text",
className: 'default-class',
option: [],
@ -47,9 +47,9 @@ KarimField.defaultProps = {
picker: "date",
Format: "YYYY/MM/DD",
onChange: undefined,
Group:false,
dir : "ltr",
Group: false,
dir: "ltr",
};
export default KarimField;
export default ValidationField;

0
src/Components/Karimalden/View/CheckboxField.tsx → src/Components/ValidationField/View/CheckboxField.tsx
View File

4
src/Components/Karimalden/View/DataRange.tsx → src/Components/ValidationField/View/DataRange.tsx
View File

@ -5,7 +5,7 @@ import useFormField from '../../../Hooks/useFormField';
const { RangePicker } = DatePicker;
const DataRange = ({ name, label, isDisabled, option, isMulti,Format ,props }: any) => {
const DataRange = ({ name, label, isDisabled, option, isMulti, Format, props }: any) => {
const { errorMsg, isError, t, formik } = useFormField(name, props)
const onCalendarChange = (value: any) => {
@ -15,7 +15,7 @@ const DataRange = ({ name, label, isDisabled, option, isMulti,Format ,props }: a
};
return (
<div className='KarimField'>
<div className='ValidationField'>
<label htmlFor={name} className="text">
{t(`${label}`)}
</label>

4
src/Components/Karimalden/View/Date.tsx → src/Components/ValidationField/View/Date.tsx
View File

@ -3,7 +3,7 @@ import React from 'react'
import useFormField from '../../../Hooks/useFormField';
import dayjs from 'dayjs';
const Date = ({ name, label, isDisabled, option, isMulti,picker="date" ,props }: any) => {
const Date = ({ name, label, isDisabled, option, isMulti, picker = "date", props }: any) => {
const { errorMsg, isError, t, formik } = useFormField(name, props)
const onCalendarChange = (value: any) => {
@ -13,7 +13,7 @@ const Date = ({ name, label, isDisabled, option, isMulti,picker="date" ,props }:
};
return (
<div className='KarimField'>
<div className='ValidationField'>
<label htmlFor={name} className="text">
{t(`${label}`)}
</label>

4
src/Components/Karimalden/View/Default.tsx → src/Components/ValidationField/View/Default.tsx
View File

@ -7,7 +7,7 @@ const Default = ({ name, label, placeholder, isDisabled, onChange, props }: any)
return (
<div className="KarimField">
<div className="ValidationField">
<label htmlFor={name} className="text">
{t(`${label ? label : name}`)}
</label>
@ -19,7 +19,7 @@ const Default = ({ name, label, placeholder, isDisabled, onChange, props }: any)
<Field
as={Input}
type="text"
placeholder={t(`${placeholder ?placeholder : name}`)}
placeholder={t(`${placeholder ? placeholder : name}`)}
name={name}
disabled={isDisabled}
// onChange={onChange ? onChange : handleChange}

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

@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
import { ErrorMessage } from 'formik';
const File = ({ name, label, onChange, isDisabled,accept, props }: any) => {
const File = ({ name, label, onChange, isDisabled, accept, props }: any) => {
const { formik, t } = useFormField(name, props)
const imageUrl = formik.values[name] ? BaseURL_IMAGE + formik.values[name] : '';
@ -20,16 +20,16 @@ const File = ({ name, label, onChange, isDisabled,accept, props }: any) => {
thumbUrl: imageUrl,
}
];
const FilehandleChange = (value:any) => {
const FilehandleChange = (value: any) => {
formik.setFieldValue(name, value.file.originFileObj)
};
const customRequest = async ({ onSuccess}: any) => {
const customRequest = async ({ onSuccess }: any) => {
onSuccess();
};
return (
<div className="KarimField">
<div className="ValidationField">
<label htmlFor={name} className="text">
{t(`${label || name}`)}
</label>

0
src/Components/Karimalden/View/SearchField.tsx → src/Components/ValidationField/View/SearchField.tsx
View File

39
src/Components/ValidationField/View/SelectField.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Form, Select } from 'antd'
import React from 'react'
import useFormField from '../../../Hooks/useFormField';
const SelectField = ({ name, label, placeholder, isDisabled, option, isMulti, onChange, props }: any) => {
const { errorMsg, isError, t, formik } = useFormField(name, props)
const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
formik.setFieldValue(name, value)
};
return (
<div className='ValidationField'>
<label htmlFor={name} className="text">
{t(`${label ? label : name}`)}
</label>
<Form.Item
hasFeedback
validateStatus={isError ? "error" : ""}
help={isError ? errorMsg : ""}
>
<Select
placeholder={t(`${placeholder ? placeholder : name}`)}
disabled={isDisabled}
options={option}
defaultValue={formik.values[name]}
allowClear
{...(isMulti && { mode: "multiple" })}
onChange={onChange || SelecthandleChange}
/>
</Form.Item>
</div>
)
}
export default SelectField

4
src/Components/Karimalden/View/Time.tsx → src/Components/ValidationField/View/Time.tsx
View File

@ -2,7 +2,7 @@ import { Form, TimePicker } from 'antd'
import React from 'react'
import useFormField from '../../../Hooks/useFormField';
const Time = ({ name, label,props }: any) => {
const Time = ({ name, label, props }: any) => {
const { errorMsg, isError, t, formik } = useFormField(name, props)
const onCalendarChange = (value: any) => {
@ -12,7 +12,7 @@ const Time = ({ name, label,props }: any) => {
};
return (
<div className='KarimField'>
<div className='ValidationField'>
<label htmlFor={name} className="text">
{t(`${label}`)}
</label>

0
src/Components/Karimalden/View/index.tsx → src/Components/ValidationField/View/index.tsx
View File

0
src/Components/Karimalden/index.tsx → src/Components/ValidationField/index.tsx
View File

8
src/Extensions/FileGenerator/generateForm.js
View File

@ -12,7 +12,7 @@ if (!fileName) {
let FileContiner = `
import React from 'react'
import { Col, Row } from 'reactstrap';
import KarimField from '../../Components/Karimalden/KarimField';
import ValidationField from '../../Components/Karimalden/ValidationField';
import { FakeSelectData } from '../../Layout/app/Const';
import { useFormikContext } from 'formik';
@ -27,7 +27,7 @@ function Form${capitalizeFirstLetter(fileName)}() {
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
{/* name from form utils */}
<KarimField name="name" type="text"label='name' placeholder='placeholder' />
<ValidationField name="name" type="text"label='name' placeholder='placeholder' />
</Col>
<Col>
@ -43,8 +43,8 @@ export default Form${capitalizeFirstLetter(fileName)}
`
fs.writeFileSync('src/Pages/'+fileName+'/Form'+ capitalizeFirstLetter(fileName)+".tsx",
FileContiner
fs.writeFileSync('src/Pages/' + fileName + '/Form' + capitalizeFirstLetter(fileName) + ".tsx",
FileContiner
);
console.log(`File "${fileName}" generated successfully.`);

10
src/Layout/app/Types.tsx
View File

@ -2,9 +2,9 @@ export interface FormTableState {
objectToEdit: any[];
OpenEdit: boolean;
OpenAdd: boolean;
}
}
export type KarimFieldProps = {
export type ValidationFieldProps = {
name: string;
name2?: string;
type: string;
@ -14,6 +14,6 @@ export interface FormTableState {
option?: any;
isMulti?: boolean;
Disabled?: boolean;
group ? : boolean;
dir?:'rtl' | 'ltr'
};
group?: boolean;
dir?: 'rtl' | 'ltr'
};

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

@ -2,26 +2,22 @@ import React from 'react'
import { Formik, Form, Field } from 'formik';
import Translate from '../../Components/Utils/Translate';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { TOKEN_KEY } from '../../config/AppKey';
import { useLoginAdmin } from '../../api/auth';
import * as Yup from "yup";
import { getInitialValues, getValidationSchema } from './formUtil';
import KarimField from '../../Components/Karimalden/KarimField';
import { LoadingButton } from '../../Components/Ui/LoadingButton';
import useNavigateOnSuccess from '../../Hooks/useNavigateOnSuccess';
import useAuthState from '../../lib/state mangment/AuthState';
import ValidationField from '../../Components/ValidationField/ValidationField';
const LoginForm = () => {
const [t] = useTranslation();
const {mutate , isLoading , isSuccess, data} = useLoginAdmin()
const {login} = useAuthState()
const { mutate, isLoading, isSuccess, data } = useLoginAdmin()
const { login } = useAuthState()
useNavigateOnSuccess(isSuccess , '/' , ()=>login(data as any ))
useNavigateOnSuccess(isSuccess, '/', () => login(data as any))
const handelSubmit = (values:any)=>{
const handelSubmit = (values: any) => {
console.log(values);
mutate(values)
@ -30,7 +26,7 @@ const LoginForm = () => {
return (
<div className='LoginForm'>
<img className='Logo' src="/Layout/MisbarLogo.png" alt="Logo" width={40}/>
<img className='Logo' src="/Layout/MisbarLogo.png" alt="Logo" width={40} />
<nav className='Login_Nav'>
<h5> {t("Login")} </h5>
@ -47,7 +43,7 @@ const LoginForm = () => {
{t("Welcome back, please login to your account.")}
</h4>
<KarimField
<ValidationField
placeholder={t('email')}
type='text'
name='email'
@ -56,7 +52,7 @@ const LoginForm = () => {
</div>
<div className='form-outline mb-4'>
<KarimField
<ValidationField
placeholder={t('password')}
type='password'
name='password'

26
src/Pages/Contact/FormContact.tsx
View File

@ -1,40 +1,38 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
import KarimField from '../../Components/Karimalden/KarimField';
import { FakeSelectData } from '../../Layout/app/Const';
import { useFormikContext } from 'formik';
import { DatePicker } from 'antd';
import ValidationField from '../../Components/ValidationField/ValidationField';
function FormContact() {
const formik = useFormikContext<any>();
const directionArray = [
{direction:"ltr",value:true},
{direction:"rtl",value:false},
{ direction: "ltr", value: true },
{ direction: "rtl", value: false },
];
const directionOptions = directionArray?.map( (e:any) => ({
label:e?.direction ,
value:e?.value
const directionOptions = directionArray?.map((e: any) => ({
label: e?.direction,
value: e?.value
}))
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
{/* name from form utils */}
<KarimField name="title" type="text"label='title' placeholder='placeholder' />
<KarimField name="sub_title" type="text"label='sub_title' placeholder='placeholder' />
<KarimField name="description" type="text"label='description' placeholder='placeholder' />
<ValidationField name="title" type="text" label='title' placeholder='placeholder' />
<ValidationField name="sub_title" type="text" label='sub_title' placeholder='placeholder' />
<ValidationField name="description" type="text" label='description' placeholder='placeholder' />
</Col>
<Col>
<KarimField name="direction" option={directionOptions || []} type="Select" label='direction' placeholder='placeholder' />
<KarimField name="is_have_button" type="Checkbox" label='Have button' placeholder='placeholder' />
<KarimField name="image" type="File"label='image' placeholder='placeholder' />
<ValidationField name="direction" option={directionOptions || []} type="Select" label='direction' placeholder='placeholder' />
<ValidationField name="is_have_button" type="Checkbox" label='Have button' placeholder='placeholder' />
<ValidationField name="image" type="File" label='image' placeholder='placeholder' />
</Col>

8
src/Pages/RecentWorks/FormRecentWorks.tsx
View File

@ -1,11 +1,11 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
import KarimField from '../../Components/Karimalden/KarimField';
import { FakeSelectData } from '../../Layout/app/Const';
import { useFormikContext } from 'formik';
import { DatePicker } from 'antd';
import ValidationField from '../../Components/ValidationField/ValidationField';
function FormRecentWorks() {
const formik = useFormikContext<any>();
@ -16,12 +16,12 @@ function FormRecentWorks() {
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
{/* name from form utils */}
<KarimField name="title" type="text"label='title' placeholder='placeholder' />
<KarimField name="description" type="text"label='description' placeholder='placeholder' />
<ValidationField name="title" type="text" label='title' placeholder='placeholder' />
<ValidationField name="description" type="text" label='description' placeholder='placeholder' />
</Col>
<Col>
<KarimField name="image" type="File"label='image' placeholder='placeholder' />
<ValidationField name="image" type="File" label='image' placeholder='placeholder' />
</Col>

8
src/Pages/Services/FormServices.tsx
View File

@ -1,11 +1,11 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
import KarimField from '../../Components/Karimalden/KarimField';
import { FakeSelectData } from '../../Layout/app/Const';
import { useFormikContext } from 'formik';
import { DatePicker } from 'antd';
import ValidationField from '../../Components/ValidationField/ValidationField';
function FormServices() {
const formik = useFormikContext<any>();
@ -16,12 +16,12 @@ function FormServices() {
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
{/* name from form utils */}
<KarimField name="title" type="text"label='title' placeholder='placeholder' />
<KarimField name="description" type="text"label='description' placeholder='placeholder' />
<ValidationField name="title" type="text" label='title' placeholder='placeholder' />
<ValidationField name="description" type="text" label='description' placeholder='placeholder' />
</Col>
<Col>
<KarimField name="image" type="File"label='image' placeholder='placeholder' />
<ValidationField name="image" type="File" label='image' placeholder='placeholder' />
</Col>

8
src/Pages/SocialMedia/FormSocialMedia.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
import KarimField from '../../Components/Karimalden/KarimField';
import { useFormikContext } from 'formik';
import ValidationField from '../../Components/ValidationField/ValidationField';
function FormSocialMedia() {
const formik = useFormikContext<any>();
@ -12,12 +12,12 @@ function FormSocialMedia() {
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
<KarimField name="link" type="text"label='link' placeholder='placeholder' />
<ValidationField name="link" type="text" label='link' placeholder='placeholder' />
</Col>
<Col>
<KarimField name="image" type="File" label='image' placeholder='placeholder' />
<KarimField name="is_active" type="Checkbox" label='is_active' placeholder='placeholder' Group />
<ValidationField name="image" type="File" label='image' placeholder='placeholder' />
<ValidationField name="is_active" type="Checkbox" label='is_active' placeholder='placeholder' Group />
</Col>

20
src/Pages/StaticInfo/FormStaticInfo.tsx
View File

@ -1,36 +1,36 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
import KarimField from '../../Components/Karimalden/KarimField';
import { FakeSelectData } from '../../Layout/app/Const';
import { useFormikContext } from 'formik';
import { DatePicker } from 'antd';
import ValidationField from '../../Components/ValidationField/ValidationField';
function FormStaticInfo({isDisable= false}:{isDisable?:boolean}) {
function FormStaticInfo({ isDisable = false }: { isDisable?: boolean }) {
const formik = useFormikContext<any>();
const valueTypeArray = [
{valueType:"string",id:"string"},
{valueType:"image",id:"image"},
{ valueType: "string", id: "string" },
{ valueType: "image", id: "image" },
];
const valueTypeOptions = valueTypeArray?.map( (e:any) => ({
label:e?.valueType ,
value:e?.id
const valueTypeOptions = valueTypeArray?.map((e: any) => ({
label: e?.valueType,
value: e?.id
}))
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
{/* name from form utils */}
<KarimField name="key" type="text"label='key' isDisabled={isDisable?true:false} placeholder='placeholder' />
<ValidationField name="key" type="text" label='key' isDisabled={isDisable ? true : false} placeholder='placeholder' />
</Col>
<Col>
<KarimField name="value_type" option={valueTypeOptions || []} type="Select" label='value_type' placeholder='placeholder' />
<ValidationField name="value_type" option={valueTypeOptions || []} type="Select" label='value_type' placeholder='placeholder' />
<KarimField name="value" type={formik?.values?.value_type == 'image'? 'File':'text'}label='value' placeholder='placeholder' />
<ValidationField name="value" type={formik?.values?.value_type == 'image' ? 'File' : 'text'} label='value' placeholder='placeholder' />
</Col>

10
src/Pages/projects/FormProjects.tsx
View File

@ -1,11 +1,11 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
import KarimField from '../../Components/Karimalden/KarimField';
import { FakeSelectData } from '../../Layout/app/Const';
import { useFormikContext } from 'formik';
import { DatePicker } from 'antd';
import ValidationField from '../../Components/ValidationField/ValidationField';
function FormProjects() {
const formik = useFormikContext<any>();
@ -16,12 +16,12 @@ function FormProjects() {
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
{/* name from form utils */}
<KarimField name="title" type="text"label='title' placeholder='placeholder' />
<ValidationField name="title" type="text" label='title' placeholder='placeholder' />
</Col>
<Col>
<KarimField name="image" type="File"label='image' placeholder='placeholder' />
<KarimField name="hover_image" type="File"label='hover_image' placeholder='placeholder' />
<KarimField name="video" type="File"label='video' placeholder='placeholder' accept={".mp4"} />
<ValidationField name="image" type="File" label='image' placeholder='placeholder' />
<ValidationField name="hover_image" type="File" label='hover_image' placeholder='placeholder' />
<ValidationField name="video" type="File" label='video' placeholder='placeholder' accept={".mp4"} />
</Col>

4
src/Pages/works/FormWorks.tsx
View File

@ -1,11 +1,11 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
import KarimField from '../../Components/Karimalden/KarimField';
import { FakeSelectData } from '../../Layout/app/Const';
import { useFormikContext } from 'formik';
import { DatePicker } from 'antd';
import ValidationField from '../../Components/ValidationField/ValidationField';
function FormWorks() {
const formik = useFormikContext<any>();
@ -16,7 +16,7 @@ function FormWorks() {
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
{/* name from form utils */}
<KarimField name="image" type="File"label='image' placeholder='placeholder' />
<ValidationField name="image" type="File" label='image' placeholder='placeholder' />
</Col>

4
src/Styles/Layout/Layout.scss
View File

@ -244,12 +244,12 @@ background: var(--bg);
background-color:transparent;
color:var(--text);
}
.react-tabs__tab-panel--selected .KarimField .ant-input-affix-wrapper,.modal-body .KarimField .ant-input-affix-wrapper{
.react-tabs__tab-panel--selected .ValidationField .ant-input-affix-wrapper,.modal-body .ValidationField .ant-input-affix-wrapper{
background-color:transparent;
}
/* Input */
.react-tabs__tab-panel--selected .KarimField input[type=text],.modal-body .KarimField input{
.react-tabs__tab-panel--selected .ValidationField input[type=text],.modal-body .ValidationField input{
background-color:transparent;
color:var(--text)!important;
&::placeholder{