fear: add medical
This commit is contained in:
rezakarimi
+286
-218
@@ -1,226 +1,294 @@
|
||||
import React, {useState} from 'react';
|
||||
import { useForm } from "react-hook-form";
|
||||
import {useDispatch, useSelector} from "react-redux";
|
||||
import {ADDFRAMEWORK, FORM_CAST} from "../src/redux/actions";
|
||||
import AppContainer from "./appContainer";
|
||||
import Image from "next/image";
|
||||
import { Step, Steps, useSteps } from 'chakra-ui-steps';
|
||||
import {MDBContainer, MDBInput, MDBTypography} from "mdb-react-ui-kit";
|
||||
import {Box, Button, Center, Flex, Heading, Input, Select, SimpleGrid, Stack} from "@chakra-ui/react";
|
||||
import { withKeepAlive } from 'react-next-keep-alive';
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { ADDFRAMEWORK, FORM_CAST } from '../src/redux/actions'
|
||||
import AppContainer from './appContainer'
|
||||
import Image from 'next/image'
|
||||
import { Step, Steps, useSteps } from 'chakra-ui-steps'
|
||||
import { MDBContainer, MDBInput, MDBTypography } from 'mdb-react-ui-kit'
|
||||
import { Box, Button, Center, Flex, Heading, Input, Select, SimpleGrid, Stack } from '@chakra-ui/react'
|
||||
import { withKeepAlive } from 'react-next-keep-alive'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
const CooperationRequest = () => {
|
||||
const Parallax = ({ quality }) => {
|
||||
return `../resource/parallax/about.jpg`;
|
||||
}
|
||||
const userData = useSelector((state => state.Global))
|
||||
const formReq = useSelector((state => state.FormRequest))
|
||||
const dispatch = useDispatch()
|
||||
console.log('formReq',formReq)
|
||||
const [Access, SetAccess] =useState(true)
|
||||
const Parallax = ({ quality }) => {
|
||||
return `../resource/parallax/about.jpg`
|
||||
}
|
||||
const { replace } = useRouter()
|
||||
useEffect(() => {
|
||||
replace('/recruitment')
|
||||
}, [])
|
||||
const userData = useSelector(state => state.Global)
|
||||
const formReq = useSelector(state => state.FormRequest)
|
||||
const dispatch = useDispatch()
|
||||
console.log('formReq', formReq)
|
||||
const [Access, SetAccess] = useState(true)
|
||||
|
||||
const PersonalForm= () => {
|
||||
const [Sex, SetSex] = useState(0)
|
||||
const {register, handleSubmit, watch, formState: { errors }} = useForm()
|
||||
let hasErr = Object.keys(errors).length
|
||||
const onSubmit = async (data) => {
|
||||
console.log('dadadada', data)
|
||||
if (hasErr === 0) {
|
||||
dispatch(FORM_CAST(data))
|
||||
nextStep()
|
||||
}
|
||||
else {
|
||||
alert('مقادیر وارد شده معبتر نمی باشد')
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Flex className={'flex lg:p-2 sm:p-1 m-2'}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<SimpleGrid dir={'rtl'} columns={[1, 2, 5]} spacing={5}>
|
||||
<Box>
|
||||
<Input dir={'rtl'} {...register('name', {required: true, maxLength: 100})} borderColor={'teal'} variant='outline' placeholder='نام و نام خانوادگی ' />
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.name?.type === "required" && <p> وارد کردن نام اجباری است</p>}
|
||||
{errors?.name?.type === "maxLength" && <p>نام وارد شده معبتر نمی باشد</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Input value={12345678912} dir={'rtl'} {...register('national_code', {required: true, maxLength: 11})} borderColor={'teal'} variant='outline' type={'number'} placeholder='کد ملی' />
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.national_code?.type === "required" && <p> وارد کردن کد ملی اجباری است</p>}
|
||||
{errors?.national_code?.type === "maxLength" && <p>کد ملی وارد شده معبتر نمی باشد</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Input dir={'rtl'} {...register('birth_location', {required: true})} borderColor={'teal'} variant='outline' placeholder='محل تولد ' />
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.birth_location?.type === "required" && <p> وارد کردن محل تولد اجباری است</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Input dir={'rtl'} {...register('birthdate', {required: true})} borderColor={'teal'} variant='outline' placeholder='تاریخ تولد ' />
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.birthdate?.type === "required" && <p> وارد کردن تاریخ تولد اجباری است</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Select {...register('gender', {required: true})} onChange={(e) => SetSex(e.target.value)} borderColor={'teal'} dir={'ltr'} placeholder='جنسیت '>
|
||||
<option dir={'rtl'} value='1'> مرد</option>
|
||||
<option dir={'rtl'} value='0'> رن</option>
|
||||
</Select>
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.gender?.type === "required" && <p>مشخص کردن جنسیت اجباری است</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Select {...register('marital', {required: true})} borderColor={'teal'} dir={'ltr'} placeholder='وضعیت تاهل '>
|
||||
<option dir={'rtl'} value='married'> متاهل</option>
|
||||
<option dir={'rtl'} value='single'> مجرد</option>
|
||||
</Select>
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.marital?.type === "required" && <p>مشخص کردن جنسیت اجباری است</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
{Sex === '1' ? (
|
||||
<Select {...register('military')} borderColor={'teal'} dir={'ltr'} placeholder='وضعیت مظام وظیفه '>
|
||||
<option dir={'rtl'} value='Done'> انجام شده </option>
|
||||
<option dir={'rtl'} value='not'> انجام نشده</option>
|
||||
<option dir={'rtl'} value='bug'> خرید خدمت </option>
|
||||
<option dir={'rtl'} value='specific'> معافیت خاص </option>
|
||||
</Select>
|
||||
): ''}
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
<Flex width="100%" flexDir={'row'} mt={150} justify="space-between">
|
||||
<Button
|
||||
mr={4}
|
||||
size="sm"
|
||||
colorScheme='teal'
|
||||
variant="ghost"
|
||||
onClick={prevStep}
|
||||
isDisabled={activeStep === 0}
|
||||
>
|
||||
مرحله قبل
|
||||
</Button>
|
||||
<Button type={'submit'} colorScheme={'teal'} size="sm" >
|
||||
{activeStep === steps.length - 1 ? "ثبت اطلاعات" : "مرحله بعد"}
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
</Flex>
|
||||
)
|
||||
};
|
||||
const WorkHistoryForm= () => (
|
||||
<Flex className={'flex p-2 m-2 justify-content-center'}>
|
||||
<form>
|
||||
<SimpleGrid dir={'rtl'} columns={[1, 2, 4]} spacing={5}>
|
||||
<Input dir={'rtl'} borderColor={'teal'} variant='outline' placeholder='نام و نام خانوادگی ' />
|
||||
<Input dir={'rtl'} borderColor={'teal'} variant='outline' placeholder='Basic usage' />
|
||||
<Input dir={'rtl'} borderColor={'teal'} variant='outline' placeholder='Basic usage' />
|
||||
<Input dir={'rtl'} borderColor={'teal'} variant='outline' placeholder='Basic usage' />
|
||||
</SimpleGrid>
|
||||
<Flex width="100%" flexDir={'row'} mt={150} justify="space-between">
|
||||
<Button
|
||||
mr={4}
|
||||
size="sm"
|
||||
colorScheme='teal'
|
||||
variant="ghost"
|
||||
onClick={prevStep}
|
||||
isDisabled={activeStep === 0}
|
||||
>
|
||||
مرحله قبل
|
||||
</Button>
|
||||
<Button colorScheme={'teal'} size="sm" onClick={CanAccess}>
|
||||
{activeStep === steps.length - 1 ? "ثبت اطلاعات" : "مرحله بعد"}
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
</Flex>
|
||||
);
|
||||
function HandleShowForm (index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return <PersonalForm />
|
||||
case 1:
|
||||
return <WorkHistoryForm />
|
||||
default:
|
||||
return index
|
||||
}
|
||||
}
|
||||
const Content = ({index}) => {return (<div>{HandleShowForm(index)}</div>)}
|
||||
|
||||
const steps = [
|
||||
{ label: 'اطلاعات شخص', Content },
|
||||
{ label: ' مشخصات تماس', Content },
|
||||
{ label: ' اطلاعات تحصیلی', Content },
|
||||
{ label: 'سوابق کاری ', Content },
|
||||
{ label: ' مدارک و مستندات ', Content },
|
||||
];
|
||||
const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
|
||||
initialStep: 0,
|
||||
});
|
||||
const CanAccess = () => {
|
||||
if (Access) {
|
||||
nextStep()
|
||||
}else {
|
||||
alert('اطلاعات را بررسی کنید')
|
||||
}
|
||||
const PersonalForm = () => {
|
||||
const [Sex, SetSex] = useState(0)
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
formState: { errors }
|
||||
} = useForm()
|
||||
let hasErr = Object.keys(errors).length
|
||||
const onSubmit = async data => {
|
||||
console.log('dadadada', data)
|
||||
if (hasErr === 0) {
|
||||
dispatch(FORM_CAST(data))
|
||||
nextStep()
|
||||
} else {
|
||||
alert('مقادیر وارد شده معبتر نمی باشد')
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Flex className={'flex lg:p-2 sm:p-1 m-2'}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<SimpleGrid dir={'rtl'} columns={[1, 2, 5]} spacing={5}>
|
||||
<Box>
|
||||
<Input
|
||||
dir={'rtl'}
|
||||
{...register('name', { required: true, maxLength: 100 })}
|
||||
borderColor={'teal'}
|
||||
variant='outline'
|
||||
placeholder='نام و نام خانوادگی '
|
||||
/>
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.name?.type === 'required' && <p> وارد کردن نام اجباری است</p>}
|
||||
{errors?.name?.type === 'maxLength' && <p>نام وارد شده معبتر نمی باشد</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Input
|
||||
value={12345678912}
|
||||
dir={'rtl'}
|
||||
{...register('national_code', { required: true, maxLength: 11 })}
|
||||
borderColor={'teal'}
|
||||
variant='outline'
|
||||
type={'number'}
|
||||
placeholder='کد ملی'
|
||||
/>
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.national_code?.type === 'required' && <p> وارد کردن کد ملی اجباری است</p>}
|
||||
{errors?.national_code?.type === 'maxLength' && <p>کد ملی وارد شده معبتر نمی باشد</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Input
|
||||
dir={'rtl'}
|
||||
{...register('birth_location', { required: true })}
|
||||
borderColor={'teal'}
|
||||
variant='outline'
|
||||
placeholder='محل تولد '
|
||||
/>
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.birth_location?.type === 'required' && <p> وارد کردن محل تولد اجباری است</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Input
|
||||
dir={'rtl'}
|
||||
{...register('birthdate', { required: true })}
|
||||
borderColor={'teal'}
|
||||
variant='outline'
|
||||
placeholder='تاریخ تولد '
|
||||
/>
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.birthdate?.type === 'required' && <p> وارد کردن تاریخ تولد اجباری است</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Select
|
||||
{...register('gender', { required: true })}
|
||||
onChange={e => SetSex(e.target.value)}
|
||||
borderColor={'teal'}
|
||||
dir={'ltr'}
|
||||
placeholder='جنسیت '
|
||||
>
|
||||
<option dir={'rtl'} value='1'>
|
||||
{' '}
|
||||
مرد
|
||||
</option>
|
||||
<option dir={'rtl'} value='0'>
|
||||
{' '}
|
||||
رن
|
||||
</option>
|
||||
</Select>
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.gender?.type === 'required' && <p>مشخص کردن جنسیت اجباری است</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<Select
|
||||
{...register('marital', { required: true })}
|
||||
borderColor={'teal'}
|
||||
dir={'ltr'}
|
||||
placeholder='وضعیت تاهل '
|
||||
>
|
||||
<option dir={'rtl'} value='married'>
|
||||
{' '}
|
||||
متاهل
|
||||
</option>
|
||||
<option dir={'rtl'} value='single'>
|
||||
{' '}
|
||||
مجرد
|
||||
</option>
|
||||
</Select>
|
||||
<p className={'position-absolute text-sm text-danger'}>
|
||||
{errors?.marital?.type === 'required' && <p>مشخص کردن جنسیت اجباری است</p>}
|
||||
</p>
|
||||
</Box>
|
||||
<Box>
|
||||
{Sex === '1' ? (
|
||||
<Select {...register('military')} borderColor={'teal'} dir={'ltr'} placeholder='وضعیت مظام وظیفه '>
|
||||
<option dir={'rtl'} value='Done'>
|
||||
{' '}
|
||||
انجام شده{' '}
|
||||
</option>
|
||||
<option dir={'rtl'} value='not'>
|
||||
{' '}
|
||||
انجام نشده
|
||||
</option>
|
||||
<option dir={'rtl'} value='bug'>
|
||||
{' '}
|
||||
خرید خدمت{' '}
|
||||
</option>
|
||||
<option dir={'rtl'} value='specific'>
|
||||
{' '}
|
||||
معافیت خاص{' '}
|
||||
</option>
|
||||
</Select>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
<Flex width='100%' flexDir={'row'} mt={150} justify='space-between'>
|
||||
<Button
|
||||
mr={4}
|
||||
size='sm'
|
||||
colorScheme='teal'
|
||||
variant='ghost'
|
||||
onClick={prevStep}
|
||||
isDisabled={activeStep === 0}
|
||||
>
|
||||
مرحله قبل
|
||||
</Button>
|
||||
<Button type={'submit'} colorScheme={'teal'} size='sm'>
|
||||
{activeStep === steps.length - 1 ? 'ثبت اطلاعات' : 'مرحله بعد'}
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
const WorkHistoryForm = () => (
|
||||
<Flex className={'flex p-2 m-2 justify-content-center'}>
|
||||
<form>
|
||||
<SimpleGrid dir={'rtl'} columns={[1, 2, 4]} spacing={5}>
|
||||
<Input dir={'rtl'} borderColor={'teal'} variant='outline' placeholder='نام و نام خانوادگی ' />
|
||||
<Input dir={'rtl'} borderColor={'teal'} variant='outline' placeholder='Basic usage' />
|
||||
<Input dir={'rtl'} borderColor={'teal'} variant='outline' placeholder='Basic usage' />
|
||||
<Input dir={'rtl'} borderColor={'teal'} variant='outline' placeholder='Basic usage' />
|
||||
</SimpleGrid>
|
||||
<Flex width='100%' flexDir={'row'} mt={150} justify='space-between'>
|
||||
<Button mr={4} size='sm' colorScheme='teal' variant='ghost' onClick={prevStep} isDisabled={activeStep === 0}>
|
||||
مرحله قبل
|
||||
</Button>
|
||||
<Button colorScheme={'teal'} size='sm' onClick={CanAccess}>
|
||||
{activeStep === steps.length - 1 ? 'ثبت اطلاعات' : 'مرحله بعد'}
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
</Flex>
|
||||
)
|
||||
function HandleShowForm(index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return <PersonalForm />
|
||||
case 1:
|
||||
return <WorkHistoryForm />
|
||||
default:
|
||||
return index
|
||||
}
|
||||
}
|
||||
const Content = ({ index }) => {
|
||||
return <div>{HandleShowForm(index)}</div>
|
||||
}
|
||||
|
||||
<AppContainer title={'درخواست همکاری'}>
|
||||
<div className="parallax-container">
|
||||
<h1 className={'center-align text-white service-text dana font-weight-bold'}> درخواست همکاری </h1>
|
||||
<Image
|
||||
loader={Parallax}
|
||||
src="Parallax.png"
|
||||
className={'responsive-img shadow-5'}
|
||||
alt="درباره بیارستان مهر ایرانیان پرند "
|
||||
width={3000}
|
||||
height={1300}
|
||||
/>
|
||||
</div>
|
||||
<MDBContainer className={'mt-5 mb-5'}>
|
||||
<Steps className={'fix-res-steps'} dir={'rtl'} activeStep={activeStep}>
|
||||
{steps.map(({ label, content }, index) => (
|
||||
<Step className={'dana fix-res-step'} label={label} key={label}>
|
||||
<div dir={'rtl'} className={'bg-gray-100 m-4 p-2 rounded-md'}>
|
||||
<Content index={index} />
|
||||
</div>
|
||||
</Step>
|
||||
))}
|
||||
</Steps>
|
||||
{activeStep === 5 ? (
|
||||
<Center p={4} flexDir="column">
|
||||
<Heading fontSize="xl"> درخواست شما با موفقیت ثبت شد پس از بررسی کارشناسان ما با شما تماس خواهند گرفت</Heading>
|
||||
<Button color={'green'} mt={6} size="sm" onClick={reset}>
|
||||
Reset
|
||||
</Button>
|
||||
</Center>
|
||||
) : (
|
||||
<Flex width="100%" flexDir={'row-reverse'} justify="space-between">
|
||||
<Button
|
||||
mr={4}
|
||||
size="sm"
|
||||
colorScheme='teal'
|
||||
variant="ghost"
|
||||
onClick={prevStep}
|
||||
isDisabled={activeStep === 0}
|
||||
>
|
||||
مرحله قبل
|
||||
</Button>
|
||||
<Button colorScheme={'teal'} size="sm" onClick={CanAccess}>
|
||||
{activeStep === steps.length - 1 ? "ثبت اطلاعات" : "مرحله بعد"}
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
</MDBContainer>
|
||||
</AppContainer>
|
||||
const steps = [
|
||||
{ label: 'اطلاعات شخص', Content },
|
||||
{ label: ' مشخصات تماس', Content },
|
||||
{ label: ' اطلاعات تحصیلی', Content },
|
||||
{ label: 'سوابق کاری ', Content },
|
||||
{ label: ' مدارک و مستندات ', Content }
|
||||
]
|
||||
const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
|
||||
initialStep: 0
|
||||
})
|
||||
const CanAccess = () => {
|
||||
if (Access) {
|
||||
nextStep()
|
||||
} else {
|
||||
alert('اطلاعات را بررسی کنید')
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<AppContainer title={'درخواست همکاری'}>
|
||||
<div className='parallax-container'>
|
||||
<h1 className={'center-align text-white service-text dana font-weight-bold'}> درخواست همکاری </h1>
|
||||
<Image
|
||||
loader={Parallax}
|
||||
src='Parallax.png'
|
||||
className={'responsive-img shadow-5'}
|
||||
alt='درباره بیارستان مهر ایرانیان پرند '
|
||||
width={3000}
|
||||
height={1300}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<MDBContainer className={'mt-5 mb-5'}>
|
||||
<Steps className={'fix-res-steps'} dir={'rtl'} activeStep={activeStep}>
|
||||
{steps.map(({ label, content }, index) => (
|
||||
<Step className={'dana fix-res-step'} label={label} key={label}>
|
||||
<div dir={'rtl'} className={'bg-gray-100 m-4 p-2 rounded-md'}>
|
||||
<Content index={index} />
|
||||
</div>
|
||||
</Step>
|
||||
))}
|
||||
</Steps>
|
||||
{activeStep === 5 ? (
|
||||
<Center p={4} flexDir='column'>
|
||||
<Heading fontSize='xl'>
|
||||
{' '}
|
||||
درخواست شما با موفقیت ثبت شد پس از بررسی کارشناسان ما با شما تماس خواهند گرفت
|
||||
</Heading>
|
||||
<Button color={'green'} mt={6} size='sm' onClick={reset}>
|
||||
Reset
|
||||
</Button>
|
||||
</Center>
|
||||
) : (
|
||||
<Flex width='100%' flexDir={'row-reverse'} justify='space-between'>
|
||||
<Button
|
||||
mr={4}
|
||||
size='sm'
|
||||
colorScheme='teal'
|
||||
variant='ghost'
|
||||
onClick={prevStep}
|
||||
isDisabled={activeStep === 0}
|
||||
>
|
||||
مرحله قبل
|
||||
</Button>
|
||||
<Button colorScheme={'teal'} size='sm' onClick={CanAccess}>
|
||||
{activeStep === steps.length - 1 ? 'ثبت اطلاعات' : 'مرحله بعد'}
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
</MDBContainer>
|
||||
</AppContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CooperationRequest;
|
||||
export default CooperationRequest
|
||||
|
||||
Reference in New Issue
Block a user