profile form
This commit is contained in:
kurpfish
parent
fd695627e7
commit
e8f6c315f4
23
package-lock.json
generated
23
package-lock.json
generated
@ -9951,6 +9951,16 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
|
||||
"integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM="
|
||||
},
|
||||
"lodash.reduce": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
|
||||
"integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
|
||||
},
|
||||
"lodash.startswith": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
|
||||
"integrity": "sha1-xZjErc4YiiflMUVzHNxsDnF3YAw="
|
||||
},
|
||||
"lodash.template": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
|
||||
@ -12768,6 +12778,19 @@
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"react-phone-input-2": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.14.0.tgz",
|
||||
"integrity": "sha512-gOY3jUpwO7ulryXPEdqzH7L6DPqI9RQxKfBxZbgqAwXyALGsmwLWFyi2RQwXlBLWN/EPPT4Nv6I9TESVY2YBcg==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.6",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.memoize": "^4.1.2",
|
||||
"lodash.reduce": "^4.6.0",
|
||||
"lodash.startswith": "^4.2.1",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"react-redux": {
|
||||
"version": "7.2.4",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"react-bootstrap": "^1.6.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-loader-spinner": "^4.0.0",
|
||||
"react-phone-input-2": "^2.14.0",
|
||||
"react-redux": "^7.2.4",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.3",
|
||||
|
||||
@ -24,9 +24,9 @@ const App = () => {
|
||||
<AuthPageForPartners />
|
||||
</Route>
|
||||
<ProtectedRoute path='/' exact component={HomePage} />
|
||||
<ProtectedRoute path='/candidate/:id' component={CandidatePage} />
|
||||
<ProtectedRoute exact path='/candidate/:id' component={CandidatePage} />
|
||||
<ProtectedRoute path='/calendar' component={CalendarPage} />
|
||||
<ProtectedRoute path='/form' component={FormPage} />
|
||||
<ProtectedRoute exact path='/candidate/:id/form' component={FormPage} />
|
||||
<ProtectedRoute path='/report' component={ReportPage} />
|
||||
<ProtectedRoute component={()=><div>Page not found</div>} />
|
||||
</Switch>
|
||||
|
||||
@ -115,7 +115,7 @@ const Candidate = () => {
|
||||
{currentCandidateObj.vc_text ? currentCandidateObj.vc_text : 'Описание отсутствует...' }
|
||||
</p>
|
||||
)}
|
||||
<Link to={'/form'}>
|
||||
<Link to={`/candidate/${currentCandidateObj.id}/form`}>
|
||||
<button type="submit" className={style.candidate__btn}>
|
||||
Выбрать к собеседованию
|
||||
</button>
|
||||
|
||||
@ -2,9 +2,19 @@ import React, { useState } from 'react';
|
||||
import style from './Form.module.css';
|
||||
import { fetchForm } from '../../server/server';
|
||||
import arrow from '../../images/right-arrow.png';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { useHistory, useParams, Redirect } from 'react-router-dom';
|
||||
import PhoneInput from 'react-phone-input-2'
|
||||
import 'react-phone-input-2/lib/style.css'
|
||||
import './form.css';
|
||||
|
||||
import { withSwalInstance } from 'sweetalert2-react';
|
||||
import swal from 'sweetalert2';
|
||||
|
||||
const SweetAlert = withSwalInstance(swal);
|
||||
|
||||
const Form = () => {
|
||||
const urlParams = useParams();
|
||||
const [status, setStatus] = useState(null);
|
||||
const [data, setData] = useState({
|
||||
email: '',
|
||||
phone: '',
|
||||
@ -26,19 +36,32 @@ const Form = () => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('profile_id', urlParams.id);
|
||||
formData.append('email', data.email);
|
||||
formData.append('phone', data.phone);
|
||||
formData.append('comment', data.comment);
|
||||
|
||||
fetchForm(`${process.env.REACT_APP_API_URL}/api/profile/add-to-interview`, formData);
|
||||
fetchForm(`${process.env.REACT_APP_API_URL}/api/profile/add-to-interview`, {
|
||||
profile_id: urlParams.id,
|
||||
...data,
|
||||
}).then( (res)=> res.json()
|
||||
.then( resJSON => setStatus(resJSON))
|
||||
)
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
history.goBack();
|
||||
};
|
||||
|
||||
console.log('s',status)
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
{status && <SweetAlert
|
||||
show={!!status}
|
||||
text={status.errors ? status.errors[Object.keys(status.errors)[0]] : 'Форма отправлена'}
|
||||
onConfirm={status.errors ? () => {setStatus(null);} : () => {setStatus(null); history.push(`/candidate/${urlParams.id}`)}}
|
||||
/>}
|
||||
<div className="row">
|
||||
<div className="col-sm-12">
|
||||
<div className={style.form__arrow} onClick={() => goBack()}>
|
||||
@ -61,14 +84,21 @@ const Form = () => {
|
||||
/>
|
||||
|
||||
<label htmlFor="phone">Номер телефона:</label>
|
||||
<input
|
||||
<PhoneInput
|
||||
id="phone"
|
||||
name="Phone"
|
||||
country={'ru'}
|
||||
value={data.phone}
|
||||
onChange={e=>handleChange({target: {value:e, id: 'phone' }})}
|
||||
/>
|
||||
{/* <input
|
||||
onChange={handleChange}
|
||||
id="phone"
|
||||
type="text"
|
||||
name="Phone"
|
||||
placeholder="Телефон"
|
||||
value={data.phone}
|
||||
/>
|
||||
/> */}
|
||||
|
||||
<textarea
|
||||
onChange={handleChange}
|
||||
|
||||
@ -120,3 +120,4 @@ textarea {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
15
src/components/Form/form.css
Normal file
15
src/components/Form/form.css
Normal file
@ -0,0 +1,15 @@
|
||||
.react-tel-input {
|
||||
width: min-content !important;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.react-tel-input .form-control {
|
||||
padding: 30px 30px 30px 48px;
|
||||
border-radius: 37px;
|
||||
width: 332px;
|
||||
}
|
||||
|
||||
.react-tel-input .flag-dropdown {
|
||||
border-top-left-radius: 37px;
|
||||
border-bottom-left-radius: 37px;
|
||||
}
|
||||
@ -24,7 +24,7 @@ const Sidebar = ({ candidate }) => {
|
||||
<p className={style.candidateSidebar__info__e}>Опыт работы</p>
|
||||
<p className={style.candidateSidebar__info__y}>{getYearsString(candidate.years_of_exp)}</p>
|
||||
</> }
|
||||
<Link to={`/form`}>
|
||||
<Link to={`/candidate/${candidate.id}/form`}>
|
||||
<button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -55,9 +55,9 @@ export const fetchForm = async (link, info) => {
|
||||
// 'Access-Control-Request-Headers': 'authorization',
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
|
||||
// 'Origin': `${process.env.REACT_APP_BASE_URL}`,
|
||||
'Content-Type': 'multipart/form-data'
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: info
|
||||
body: JSON.stringify(info)
|
||||
})
|
||||
|
||||
return response
|
||||
|
||||
Loading…
Reference in New Issue
Block a user