apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reports create, refactoring

Browse Source
This commit is contained in:
kurpfish
2021-11-30 16:00:58 +02:00
parent 76c46067ef
commit 4629bc74a9
61 changed files with 26047 additions and 3865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/components/Form/Form.js
View File

@ -1,90 +1,112 @@
import React, { useState } from 'react';
import style from './Form.module.css';
import { fetchForm } from '../../server/server';
import { auth } from '../../redux/outstaffingSlice';
import { useHistory, useParams, Redirect } from 'react-router-dom';
import { Loader } from '../Loader/Loader';
import React, { useState } from 'react'
import { fetchPost } from '../../server/server'
import { auth } from '../../redux/outstaffingSlice'
import { useHistory, useParams, Redirect } from 'react-router-dom'
import { Loader } from '../Loader/Loader'
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
import './form.css';
import './form.scss'
import { withSwalInstance } from 'sweetalert2-react';
import swal from 'sweetalert2';
import { useSelector, useDispatch } from 'react-redux';
import { getRole } from '../../redux/roleSlice';
const SweetAlert = withSwalInstance(swal);
import { withSwalInstance } from 'sweetalert2-react'
import swal from 'sweetalert2'
import { useSelector, useDispatch } from 'react-redux'
import { getRole } from '../../redux/roleSlice'
const SweetAlert = withSwalInstance(swal)
const Form = () => {
const dispatch = useDispatch();
const history = useHistory();
const role = useSelector(getRole);
const urlParams = useParams();
const [status, setStatus] = useState(null);
const dispatch = useDispatch()
const history = useHistory()
const role = useSelector(getRole)
const urlParams = useParams()
const [status, setStatus] = useState(null)
const [data, setData] = useState({
email: '',
phone: '',
comment: '',
});
const [isFetching, setIsFetching] = useState(false);
comment: ''
})
const [isFetching, setIsFetching] = useState(false)
const handleChange = (e) => {
const { id, value } = e.target;
const { id, value } = e.target
setData((prev) => ({
...prev,
[id]: value,
}));
};
[id]: value
}))
}
const handleSubmit = (e) => {
e.preventDefault();
e.preventDefault()
setIsFetching(true)
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);
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({ link: `${process.env.REACT_APP_API_URL}/api/profile/add-to-interview`, index: {
profile_id: urlParams.id,
...data,
}, history, role, logout: dispatch(auth(false)) }).then( (res)=> res.json()
.then( resJSON => {
setStatus(resJSON);
setIsFetching(false);
fetchPost({
link: `${process.env.REACT_APP_API_URL}/api/profile/add-to-interview`,
params: {
profile_id: urlParams.id,
...data
},
history,
role,
logout: () => dispatch(auth(false))
}).then((res) =>
res.json().then((resJSON) => {
setStatus(resJSON)
setIsFetching(false)
})
)
};
}
return (
<>
{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">
<form className={style.form} id="test">
<label htmlFor="email">Емейл:</label>
{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'>
<form className='form' id='test'>
<label htmlFor='email'>Емейл:</label>
<input
onChange={handleChange}
id="email"
name="Email"
type="email"
placeholder="Емейл"
id='email'
name='Email'
type='email'
placeholder='Емейл'
value={data.email}
/>
<label htmlFor="phone">Номер телефона:</label>
<label htmlFor='phone'>Номер телефона:</label>
<PhoneInput
id="phone"
name="Phone"
id='phone'
name='Phone'
country={'ru'}
value={data.phone}
onChange={e=>handleChange({target: {value:e, id: 'phone' }})}
onChange={(e) =>
handleChange({ target: { value: e, id: 'phone' } })
}
/>
{/* <input
onChange={handleChange}
@ -97,22 +119,22 @@ const Form = () => {
<textarea
onChange={handleChange}
id="comment"
rows="5"
cols="40"
name="Comment"
placeholder="Оставьте комментарий"
id='comment'
rows='5'
cols='40'
name='Comment'
placeholder='Оставьте комментарий'
value={data.comment}
></textarea>
<button onClick={handleSubmit} className={style.form__btn} type="submit">
{ isFetching ? <Loader /> : 'Отправить' }
<button onClick={handleSubmit} className='form__btn' type='submit'>
{isFetching ? <Loader /> : 'Отправить'}
</button>
</form>
</div>
</div>
</>
);
};
)
}
export default Form;
export default Form

104
src/components/Form/Form.module.css
View File

@ -1,104 +0,0 @@
.form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 120px;
}
.form > label {
color: #48802d;
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-bottom: 20px;
}
.form > input {
max-width: 366px;
height: 62px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 45px;
outline: none;
}
.form > textarea {
max-width: 366px;
height: 62px;
margin-bottom: 40px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 25px;
padding-top: 25px;
outline: none;
}
textarea {
resize: none;
}
.form__btn {
width: 332px;
height: 75px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 38px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-size: 2.2em;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
}
@media (max-width: 575.98px) {
.form__arrow {
margin-bottom: 40px;
}
}
@media (max-width: 575.98px) {
.form__arrow__sp > span {
margin-right: 0px;
}
}

15
src/components/Form/form.css
View File

@ -1,15 +0,0 @@
.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;
}

114
src/components/Form/form.scss Normal file
View File

@ -0,0 +1,114 @@
.form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 120px;
& > label {
color: #48802d;
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-bottom: 20px;
}
& > input {
max-width: 366px;
height: 62px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 45px;
outline: none;
}
& > textarea {
max-width: 366px;
height: 62px;
margin-bottom: 40px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 25px;
padding-top: 25px;
outline: none;
resize: none;
}
&__btn {
width: 332px;
height: 75px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 38px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-size: 2.2em;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
}
.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;
}
}
@media (max-width: 575.98px) {
.form {
.arrow {
margin-bottom: 40px;
&-sp {
span {
margin-right: 0px;
}
}
}
}
}