434 lines
25 KiB
JavaScript
434 lines
25 KiB
JavaScript
import React, {Suspense, useMemo, useState} from 'react';
|
|
import { useForm } from "react-hook-form";
|
|
import {Alert, AlertDescription, AlertIcon, AlertTitle, Checkbox, useDisclosure} from '@chakra-ui/react'
|
|
import AppContainer from "../../../appContainer";
|
|
import {
|
|
MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle,
|
|
MDBContainer, MDBSpinner,
|
|
} from "mdb-react-ui-kit";
|
|
import {
|
|
Box,
|
|
Divider,
|
|
ListItem, Progress,
|
|
SimpleGrid, SlideFade, Text,
|
|
UnorderedList,
|
|
Button,Modal,ModalOverlay,ModalContent,ModalHeader,
|
|
ModalCloseButton,ModalBody,ModalFooter
|
|
} from "@chakra-ui/react";
|
|
import {FiUser, FiCheck} from 'react-icons/fi'
|
|
import {FcApproval} from 'react-icons/fc'
|
|
import { MDBRadio } from 'mdb-react-ui-kit';
|
|
import Employer from '../../../../public/resource/icons/portfolio-outline.png'
|
|
import axios from "axios";
|
|
import {FORM_CAST} from "../../../../src/redux/actions";
|
|
import {HandleFormReq} from "../../../../lib/HandleFormReq";
|
|
import PersonData from "./PersonData";
|
|
import EducationalData from "./EducationalData";
|
|
import CoursesData from "./CoursesData";
|
|
import JobData from "./JobData";
|
|
import ScientificData from "./ScientificData";
|
|
import PcSkill from "./PcSkill";
|
|
import Furtherinformation from "./Furtherinformation";
|
|
import log from "tailwindcss/lib/util/log";
|
|
|
|
|
|
|
|
const requestForm = (SelectedJob) => {
|
|
console.log('sdsds', SelectedJob.SelectedJob.data);
|
|
const { isOpen, onOpen, onClose } = useDisclosure()
|
|
const [loading, setLoading] = useState(false);
|
|
const [ShowSuccess, seShowSuccess] = useState(false);
|
|
const [CheckCode, setCheckCode] = useState()
|
|
const [page, setPage] = useState(1)
|
|
const [personData, setpersondata] = useState({
|
|
Insurance: '',
|
|
address: '',
|
|
birthday: '',
|
|
childIndex: "",
|
|
degree: "",
|
|
healthreason: '',
|
|
health: '1',
|
|
dependants: "",
|
|
fatherName: "",
|
|
firstname: "",
|
|
gender: '2',
|
|
lastname: '',
|
|
marital: "",
|
|
mobile_number: "",
|
|
national_code: "",
|
|
phone: "",
|
|
placenational: "",
|
|
wifeJob: ""
|
|
})
|
|
const [educationalData,setEducationalData] = useState([{
|
|
university: '',
|
|
field : '',
|
|
trend: '',
|
|
score: '',
|
|
dateField: '',
|
|
}])
|
|
const [coursesData,setCoursesData] = useState([{
|
|
courseName: '',
|
|
courseEdu: '',
|
|
courseLocal: '',
|
|
courseTime: '',
|
|
}])
|
|
const [langStatus,setLangStatus] = useState({
|
|
status: 0
|
|
})
|
|
const [jobData, setJob] = useState([{
|
|
companyName: '',
|
|
position: '',
|
|
workTime: '',
|
|
exitReason: '',
|
|
lastIncome: ''
|
|
}])
|
|
const [scientificData, setScientificData] = useState({
|
|
text: ''
|
|
});
|
|
const [pcSkillData, setPcSkillData] = useState({
|
|
text: '',
|
|
icdlLevel: 2
|
|
});
|
|
const [furtherinformation,setFurtherinformation] = useState({
|
|
criminal: '1',
|
|
salary: '',
|
|
Introduced: ''
|
|
})
|
|
const [isSubmitPersonData, setIsSubmitPersonData] = useState(false)
|
|
const [iAgree, setAgree] = useState(true)
|
|
const value = useMemo(
|
|
() => ({ page, setPage, personData, setpersondata,educationalData, setEducationalData,coursesData, setCoursesData, langStatus, setLangStatus, jobData, setJob, scientificData, setScientificData,pcSkillData,setPcSkillData, furtherinformation, setFurtherinformation }),
|
|
[page, personData,educationalData, coursesData, langStatus, jobData, scientificData, pcSkillData, furtherinformation]
|
|
);
|
|
|
|
const handleLastSubmit = () => {
|
|
setLoading(true)
|
|
axios.post('https://mehriranianco.ir/api/public/jobrequest' , {
|
|
job_id: SelectedJob.SelectedJob.data.id,
|
|
OccupationalJob_id: SelectedJob.SelectedJob.OccupationalJob.id,
|
|
lastData : JSON.stringify({
|
|
"personData" : personData,
|
|
"educationalData" : educationalData,
|
|
"coursesData" : {...coursesData, langStatus},
|
|
"jobData": jobData,
|
|
"scientificData": scientificData,
|
|
"pcSkillData": pcSkillData,
|
|
"furtherinformation": furtherinformation
|
|
})
|
|
}).then((res) => {
|
|
setLoading(false)
|
|
seShowSuccess(true)
|
|
setCheckCode(res.data.code)
|
|
|
|
}).catch((err) => {
|
|
console.log('err', err)
|
|
})
|
|
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<AppContainer title={'فرصت های شغلی بیمارستان مهر ایرانیان پرند'}>
|
|
<div className={'w-100 p-5 bg-teal-grad'}>
|
|
<div style={{ flexDirection: 'column' }} className={'flex lg:flex-row md:flex-col sm:flex-col justify-content-between items-center'}>
|
|
<div className={'bg-white p-2 rounded-circle shadow-6-soft'}>
|
|
<MDBCardImage width={50} src={Employer} />
|
|
</div>
|
|
<div className={'mt-4 w-full'}>
|
|
<Text dir={'rtl'} className={'bk-med text-center text-white font-weight-bold '}> درخواست شغلی برای {SelectedJob.SelectedJob.data.title } - {SelectedJob.SelectedJob.OccupationalJob.title}</Text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<MDBContainer className={'mt-5 mb-5'}>
|
|
<SimpleGrid className={'mb-4'} columns={[1, 1, 2]} spacing={3}>
|
|
<Box>
|
|
<MDBCard border='primary' className={'border-black'}>
|
|
<MDBCardBody dir={'rtl'}>
|
|
<MDBCardTitle className={'bk-med'}>
|
|
<FcApproval className={'ml-2'} />
|
|
توضیحات موقعیت شغلی</MDBCardTitle>
|
|
<div className={'mt-4'}>
|
|
<UnorderedList className={'bk-light'}>
|
|
{SelectedJob.SelectedJob.data.details.map((items, index) => {
|
|
return [items].map((item, index) => (
|
|
<ListItem key={index}>{item}</ListItem>
|
|
))
|
|
})}
|
|
</UnorderedList>
|
|
</div>
|
|
</MDBCardBody>
|
|
</MDBCard>
|
|
</Box>
|
|
<Box>
|
|
<MDBCard border='primary' className={'border-black'}>
|
|
<MDBCardBody dir={'rtl'}>
|
|
<MDBCardTitle className={'bk-med'}>
|
|
<FcApproval className={'ml-2'}/>
|
|
نیازمندی های موقعیت شغلی
|
|
</MDBCardTitle>
|
|
<div className={'mt-4'}>
|
|
<UnorderedList className={'bk-light'}>
|
|
{SelectedJob.SelectedJob.data.requirement.map((items, index) => {
|
|
return [items].map((item, index) => (
|
|
<ListItem key={index}>{item}</ListItem>
|
|
))
|
|
})}
|
|
</UnorderedList>
|
|
</div>
|
|
</MDBCardBody>
|
|
</MDBCard>
|
|
</Box>
|
|
</SimpleGrid>
|
|
<Divider />
|
|
<br />
|
|
<HandleFormReq.Provider value={value}>
|
|
<div id={'formConatiner'} className={'flex flex-row-reverse align-items-center'}>
|
|
<div>
|
|
{(() => {
|
|
switch(page) {
|
|
case 1:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<div className={'flex'}>
|
|
<div className={'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft '}>
|
|
<h3 className={'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'}>
|
|
اطلاعات فردی
|
|
</h3>
|
|
</div>
|
|
<div className={'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '}>
|
|
<FiUser className={'m-1 text-white'} size={20} />
|
|
</div>
|
|
</div>
|
|
</SlideFade>
|
|
)
|
|
case 2:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<div className={'flex'}>
|
|
<div className={'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft '}>
|
|
<h3 className={'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'}>
|
|
اطلاعات تحصیلی
|
|
</h3>
|
|
</div>
|
|
<div className={'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '}>
|
|
<FiUser className={'m-1 text-white'} size={20} />
|
|
</div>
|
|
</div>
|
|
</SlideFade>
|
|
)
|
|
case 3:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<div className={'flex'}>
|
|
<div className={'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft '}>
|
|
<h3 className={'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'}>
|
|
سوابق آموزشی
|
|
</h3>
|
|
</div>
|
|
<div className={'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '}>
|
|
<FiUser className={'m-1 text-white'} size={20} />
|
|
</div>
|
|
</div>
|
|
</SlideFade>
|
|
)
|
|
case 4:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<div className={'flex'}>
|
|
<div className={'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft '}>
|
|
<h3 className={'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'}>
|
|
سوابق شغلی
|
|
</h3>
|
|
</div>
|
|
<div className={'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '}>
|
|
<FiUser className={'m-1 text-white'} size={20} />
|
|
</div>
|
|
</div>
|
|
</SlideFade>
|
|
)
|
|
case 5:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<div className={'flex'}>
|
|
<div className={'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft '}>
|
|
<h3 className={'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'}>
|
|
سوابق علمی
|
|
</h3>
|
|
</div>
|
|
<div className={'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '}>
|
|
<FiUser className={'m-1 text-white'} size={20} />
|
|
</div>
|
|
</div>
|
|
</SlideFade>
|
|
)
|
|
case 6:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<div className={'flex'}>
|
|
<div className={'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft '}>
|
|
<h3 className={'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'}>
|
|
مهارت کار با کامپیوتر
|
|
</h3>
|
|
</div>
|
|
<div className={'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '}>
|
|
<FiUser className={'m-1 text-white'} size={20} />
|
|
</div>
|
|
</div>
|
|
</SlideFade>
|
|
)
|
|
case 7:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<div className={'flex'}>
|
|
<div className={'light-primary-teal flex align-items-center justify-content-center rounded-6 shadow-5-soft '}>
|
|
<h3 className={'bk-med text-primary-teal flex justify-content-center align-items-center font-weight-bold m-3'}>
|
|
اطلاعات تکمیلی
|
|
</h3>
|
|
</div>
|
|
<div className={'bg-primary-teal flex align-items-center justify-content-center shadow-5-soft '}>
|
|
<FiUser className={'m-1 text-white'} size={20} />
|
|
</div>
|
|
</div>
|
|
</SlideFade>
|
|
)
|
|
}
|
|
})()}
|
|
</div>
|
|
|
|
</div>
|
|
<div className={'mt-5'}>
|
|
<Progress dir={'rtl'} value={page * 14} size='xs' colorScheme='teal' />
|
|
</div>
|
|
{(() => {
|
|
switch(page) {
|
|
case 1:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<PersonData />
|
|
</SlideFade>
|
|
)
|
|
case 2:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<EducationalData />
|
|
</SlideFade>
|
|
)
|
|
case 3:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<CoursesData />
|
|
</SlideFade>
|
|
)
|
|
case 4:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<JobData />
|
|
</SlideFade>
|
|
)
|
|
case 5:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<ScientificData />
|
|
</SlideFade>
|
|
)
|
|
case 6:
|
|
return (
|
|
<SlideFade in={true}>
|
|
<PcSkill />
|
|
</SlideFade>
|
|
)
|
|
case 7:
|
|
return (
|
|
<SlideFade in={true}>
|
|
{ShowSuccess === false ? (
|
|
<div>
|
|
<Furtherinformation />
|
|
<Checkbox onChange={() => setAgree(!iAgree)}>
|
|
اینجانب مسئولیت صحت کلیه اطلاعات ارائه شده در این فرم را پذیرفته و در صورت اثبات عدم صحت موارد فوق الذکر شرکت مجاز به اتخاذ هر گونه تصمیم و برخورد قانونی می باشد .
|
|
</Checkbox>
|
|
</div>
|
|
): (
|
|
<Alert
|
|
status='success'
|
|
variant='subtle'
|
|
flexDirection='column'
|
|
alignItems='center'
|
|
justifyContent='center'
|
|
textAlign='center'
|
|
height='200px'
|
|
>
|
|
<AlertIcon boxSize='40px' mr={0} />
|
|
<AlertTitle className={'bk-med'} mt={4} mb={1} fontSize='lg'>
|
|
درخواست شما ثبت شد
|
|
</AlertTitle>
|
|
<AlertDescription dir={'rtl'} maxWidth='sm'>
|
|
کد درخواست شما جهت پیگیری : {CheckCode}
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
</SlideFade>
|
|
)
|
|
}
|
|
})()}
|
|
</HandleFormReq.Provider>
|
|
<div className={'mt-5'}>
|
|
|
|
<div dir={'rtl'} className={'m-2 mt-2 mb-2 flex justify-content-between'}>
|
|
{page > 1 && ShowSuccess === false ? (
|
|
<MDBBtn color='danger' size={'sm'} className={'mt-2'} onClick={() => setPage(page - 1)} >مرحله قبل</MDBBtn>
|
|
)
|
|
: ''}
|
|
|
|
{/*{page === 1 && page !== 5 ? (*/}
|
|
{/* (*/}
|
|
{/* <MDBBtn size={'sm'} className={'mt-2 bg-primary-teal'} onClick={() => setPage(page + 1)} >مرحله بعد</MDBBtn>*/}
|
|
{/* )*/}
|
|
{/*): ''}*/}
|
|
</div>
|
|
<div className={'flex justify-content-center m-2'}>
|
|
{page === 7 ? (
|
|
<div>
|
|
{ShowSuccess === false && (
|
|
<MDBBtn disabled={iAgree} onClick={handleLastSubmit} size={'lg'} className={'mt-2 bk-med text-center bg-primary-teal'}>
|
|
{loading === false ? (
|
|
' ثبت در خواست استخدام'
|
|
): (
|
|
<div>
|
|
<div className={'flex align-items-center'}>
|
|
در حال ثبت درخواست
|
|
<MDBSpinner grow>
|
|
<span className='visually-hidden'>Loading...</span>
|
|
</MDBSpinner>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
</MDBBtn>
|
|
)}
|
|
</div>
|
|
): ''}
|
|
</div>
|
|
</div>
|
|
</MDBContainer>
|
|
</AppContainer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export async function getServerSideProps(ctx) {
|
|
// Fetch data from external API
|
|
const {query} = ctx
|
|
const res = await axios.get(`https://mehriranianco.ir/api/public/selectJob/${query.pos_id}`).then((res) => {
|
|
return res.data
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
});
|
|
const SelectedJob = await res
|
|
|
|
// Pass data to the page via props
|
|
return { props: { SelectedJob } }
|
|
}
|
|
|
|
export default requestForm;
|