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

new design calendar and report

Browse Source
This commit is contained in:
Николай Полтщук 2023-01-13 15:53:07 +03:00
parent 1234427b12
commit 6315a4e7bb
13 changed files with 214 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -46,9 +46,9 @@ const App = () => {
path='/candidate/:id/form' path='/candidate/:id/form'
component={FormPage} component={FormPage}
/> />
<ProtectedRoute exact path='/report' component={ReportPage} /> <ProtectedRoute exact path='/profile/report' component={ReportPage} />
<ProtectedRoute path='/report/:id' component={SingleReportPage} /> <ProtectedRoute path='/report/:id' component={SingleReportPage} />
<ProtectedRoute path='/ProfileCalendar' component={ProfileCalendarPage} /> <ProtectedRoute path='/profile/profilecalendar' component={ProfileCalendarPage} />
<ProtectedRoute path='/quiz' component={QuizPage} /> <ProtectedRoute path='/quiz' component={QuizPage} />
<ProtectedRoute <ProtectedRoute
path='/quiz-interjacent' path='/quiz-interjacent'

2
src/components/Calendar/calendarComponent.scss
View File

@ -1,6 +1,6 @@
.calendar-component { .calendar-component {
position: relative; position: relative;
margin-top: 80px; margin-top: 30px;
margin-bottom: 60px; margin-bottom: 60px;
background-color: #f9f9f9; background-color: #f9f9f9;
padding-left: 68px; padding-left: 68px;

6
src/components/Profile/profile.scss
View File

@ -49,6 +49,12 @@
border-radius: 12px; border-radius: 12px;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease;
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
}
@media (max-width: 1175px) { @media (max-width: 1175px) {
width: 48%; width: 48%;

5
src/components/Profile/profileHeader.scss
View File

@ -57,6 +57,11 @@
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
color: #807777 !important; color: #807777 !important;
transition: all 0.3s ease;
&:hover {
color: #261a1a !important;
}
} }
@media (max-width: 800px) { @media (max-width: 800px) {

12
src/components/Profile/summary.scss
View File

@ -121,6 +121,12 @@
line-height: 32px; line-height: 32px;
color: white; color: white;
border: none; border: none;
transition: all 0.3s ease;
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
}
@media (max-width: 690px) { @media (max-width: 690px) {
width: 120px; width: 120px;
@ -257,6 +263,12 @@
background: #FFFFFF; background: #FFFFFF;
border-radius: 12px; border-radius: 12px;
padding: 35px 30px 30px 45px; padding: 35px 30px 30px 45px;
transition: all 0.3s ease;
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
}
@media (max-width: 825px) { @media (max-width: 825px) {
width: 100%; width: 100%;

52
src/components/ProfileCalendar/ProfileCalendar.js
View File

@ -9,6 +9,7 @@ import moment from "moment";
import rectangle from '../../images/rectangle_secondPage.png' import rectangle from '../../images/rectangle_secondPage.png'
import {currentMonth, getReports} from '../Calendar/calendarHelper' import {currentMonth, getReports} from '../Calendar/calendarHelper'
import {ProfileCalendarComponent} from "./ProfileCalendarComponent"; import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
import { ProfileHeader } from "../Profile/ProfileHeader";
import { Footer } from '../Footer/Footer' import { Footer } from '../Footer/Footer'
import './profileCalendar.scss' import './profileCalendar.scss'
@ -48,42 +49,29 @@ export const ProfileCalendar = () => {
}, [month]) }, [month])
return ( return (
<section className='calendar'> <div className='calendar'>
<div className='profile__calendar'> <ProfileHeader/>
<Link className='calendar__back' to={`/profile`}> <div className='container'>
<div><img src={arrow} alt=''/>Вернуться назад</div> <h2 className='summary__title'>Ваши отчеты</h2>
</Link> <div className='summary__info'>
<h2 className='calendar__profile'> <div className='summary__person'>
Добрый день, <span>{profileInfo.fio}</span> <img src={profileInfo.photo} className='summary__avatar' alt='avatar'/>
</h2> <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
<div className='calendar__info'>
<img className='calendar__info-img' src={profileInfo.photo} alt='img' />
<h3 className='calendar__info-name'>{}</h3>
</div>
<div className='calendar__title'>
<h3 className='calendar__title-text'>{profileInfo.position_name}</h3>
<img className='calendar__title-img' src={rectangle} alt='img' />
</div>
<div>
<Link to='/report'>
<button className='calendar__btn' onClick={() => {
dispatch(setReportDate(value))
}}>Заполнить отчет за день</button>
</Link>
</div> </div>
<Link to='/profile/report'>
<button className="calendar__btn">Заполнить отчет за день</button>
</Link>
</div> </div>
</div> <div className='row'>
<div className='col-12 col-xl-12'>
<div className='row'> <ProfileCalendarComponent reportsDates={reports} />
<div className='col-12 col-xl-12'> <p className='calendar__hours'>
<ProfileCalendarComponent reportsDates={reports} /> {month} : <span> {totalHours} часов </span>
<p className='calendar__hours'> </p>
{month} : <span> {totalHours} часов </span> </div>
</p>
</div> </div>
</div> </div>
<Footer /> <Footer />
</section> </div>
) )
}; };

2
src/components/ProfileCalendar/ProfileCalendarComponent.js
View File

@ -85,7 +85,7 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
<div className='calendar-component__form'> <div className='calendar-component__form'>
{calendar.map((week) => {calendar.map((week) =>
week.map((day) => ( week.map((day) => (
<Link to='/report'> <Link to='/profile/report' key={day}>
<button <button
onClick={() => { onClick={() => {
dispatch(setReportDate(day)) dispatch(setReportDate(day))

25
src/components/ProfileCalendar/profileCalendar.scss
View File

@ -1,5 +1,21 @@
.calendar { .calendar {
font-family: 'LabGrotesque', sans-serif; background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
.container {
max-width: 1160px;
margin-top: 23px;
@media (max-width: 570px) {
margin-top: 0;
}
}
.summary__info {
padding-right: 25px;
}
.profile__calendar { .profile__calendar {
margin-top: 20px; margin-top: 20px;
} }
@ -17,4 +33,11 @@
&__profile { &__profile {
margin-top: 42px; margin-top: 42px;
} }
&__btn {
transition: all 0.3s ease;
&:hover {
transform: scale(1.02);
}
}
} }

228
src/components/ReportForm/ReportForm.js
View File

@ -11,6 +11,8 @@ import ellipse from '../../images/ellipse.png'
import remove from '../../images/remove.png' import remove from '../../images/remove.png'
import addIcon from '../../images/addIcon.png' import addIcon from '../../images/addIcon.png'
import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper' import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
import {ProfileHeader} from "../Profile/ProfileHeader";
import {Footer} from "../Footer/Footer";
import './reportForm.scss' import './reportForm.scss'
import arrow from "../../images/right-arrow.png"; import arrow from "../../images/right-arrow.png";
@ -53,14 +55,21 @@ const ReportForm = () => {
return ( return (
<section className='report-form'> <section className='report-form'>
<div className='row'> <ProfileHeader/>
<div className='col-xl-12 report__head'> <div className='container'>
<Link className='calendar__back' to={`/ProfileCalendar`}> <h2 className='summary__title'>Ваши отчеты - <span>добавить отчет</span></h2>
<div><img src={arrow} alt=''/>Вернуться назад</div> <div>
</Link> <div className='report__head'>
<Link className='calendar__back' to={`/profile/profilecalendar`}>
<div><img src={arrow} alt=''/>Вернуться</div>
</Link>
</div>
</div>
<div className='report-form__content'>
<div className='report-form__block'> <div className='report-form__block'>
<div className='report-form__block-title'> <div className='report-form__block-title'>
<h2>Добавить отчет</h2> <h2>Добавление отчета за день</h2>
<h3>Дата заполнения отчета:</h3> <h3>Дата заполнения отчета:</h3>
</div> </div>
<div className='report-form__block-img'> <div className='report-form__block-img'>
@ -77,117 +86,118 @@ const ReportForm = () => {
<span>Какие задачи были выполнены?</span> <span>Какие задачи были выполнены?</span>
</div> </div>
</div> </div>
</div>
</div>
<div className='row'> <div className='row'>
<div className='col-8'> <div className='col-8'>
<div className='report-form__task-header'> <div className='report-form__task-header'>
<p className='report-form__task-title--description'> <p className='report-form__task-title--description'>
Краткое описание задачи Краткое описание задачи
</p> </p>
<p className='report-form__task-title--hours'>Количество часов</p> <p className='report-form__task-title--hours'>Количество часов</p>
</div> </div>
{inputs.map((input, index) => { {inputs.map((input, index) => {
return ( return (
<form id={'input'} key={`input__${index}`} className='report-form__task-form'> <form id={'input'} key={`input__${index}`} className='report-form__task-form'>
<div className='report-form__task-number'> <div className='report-form__task-number'>
{index + 1}. {index + 1}.
</div> </div>
<div className='report-form__task-input report-form__task-input--description'> <div className='report-form__task-input report-form__task-input--description'>
<input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => { <input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
return index === inputIndex return index === inputIndex
? { ? {
...input, ...input,
task: e.target.value task: e.target.value
} }
: input : input
}))}/> }))}/>
</div> </div>
<div className='report-form__task-input report-form__task-input--hours'> <div className='report-form__task-input report-form__task-input--hours'>
<input name='number' type='number' min='1' <input name='number' type='number' min='1'
onChange={e => setInputs(inputs.map((input, inputIndex) => { onChange={e => setInputs(inputs.map((input, inputIndex) => {
return index === inputIndex return index === inputIndex
? { ? {
...input, ...input,
hours_spent: Number(e.target.value) hours_spent: Number(e.target.value)
} }
: input : input
}))}/> }))}/>
</div> </div>
<div className='report-form__task-remove'> <div className='report-form__task-remove'>
<img onClick={() => deleteInput(index)} src={remove} alt=''/> <img onClick={() => deleteInput(index)} src={remove} alt=''/>
</div> </div>
</form> </form>
) )
})} })}
<div className='report-form__form-add'> <div className='report-form__form-add'>
<img onClick={addInput} src={addIcon} alt=''/> <img onClick={addInput} src={addIcon} alt=''/>
<span>Добавить еще </span> <span>Добавить еще </span>
</div> </div>
</div>
<div className='col-4'></div>
</div>
<div className='row'>
<div className='col-12'>
<div className='report-form__input-box'>
<div className='report-form__troubles'>
<img src={ellipse} alt=''/>
<span>Какие сложности возникли?</span>
</div> </div>
<input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)}/> <div className='col-4'></div>
<div className='report-form__scheduled'> </div>
<img src={ellipse} alt=''/>
<span>Что планируется сделать завтра?</span> <div className='row'>
<div className='col-12'>
<div className='report-form__input-box'>
<div className='report-form__troubles'>
<img src={ellipse} alt=''/>
<span>Какие сложности возникли?</span>
</div>
<input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)}/>
<div className='report-form__scheduled'>
<img src={ellipse} alt=''/>
<span>Что планируется сделать завтра?</span>
</div>
<input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)}/>
</div>
</div>
</div>
<div className='row'>
<div className='col-12'>
<div className='report-form__footer'>
<button className='report-form__footer-btn' onClick={() => {
fetchPost({
link: `${process.env.REACT_APP_API_URL}/api/reports/create`,
history,
role,
body: {
tasks: inputs,
difficulties: troublesInputValue,
tomorrow: scheduledInputValue,
created_at: getCreatedDate(reportDate),
status: 1,
},
logout: () => dispatch(auth(false))
}).then((res) =>
res.json().then((resJSON) => {
if (res.status === 200) {
setReportSuccess(true);
setTimeout(() => setReportSuccess(false), 2000)
}
setInputs(() => []);
setTroublesInputValue('');
setScheduledInputValue('');
setIsFetching(false);
setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
})
)
}}>
{isFetching ? <Loader/> : 'Отправить'}
</button>
<p className='report-form__footer-text'>
Всего за день : <span>{totalHours} часов</span>
</p>
{reportSuccess &&
<p className='report-form__footer-done'>Отчет отправлен</p>
}
</div>
</div> </div>
<input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)}/>
</div>
</div>
</div>
<div className='row'>
<div className='col-12'>
<div className='report-form__footer'>
<button className='report-form__footer-btn' onClick={() => {
fetchPost({
link: `${process.env.REACT_APP_API_URL}/api/reports/create`,
history,
role,
body: {
tasks: inputs,
difficulties: troublesInputValue,
tomorrow: scheduledInputValue,
created_at: getCreatedDate(reportDate),
status: 1,
},
logout: () => dispatch(auth(false))
}).then((res) =>
res.json().then((resJSON) => {
if (res.status === 200) {
setReportSuccess(true);
setTimeout(() => setReportSuccess(false), 2000)
}
setInputs(() => []);
setTroublesInputValue('');
setScheduledInputValue('');
setIsFetching(false);
setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
})
)
}}>
{isFetching ? <Loader/> : 'Отправить'}
</button>
<p className='report-form__footer-text'>
Всего за день : <span>{totalHours} часов</span>
</p>
{reportSuccess &&
<p className='report-form__footer-done'>Отчет отправлен</p>
}
</div> </div>
</div> </div>
</div> </div>
<Footer/>
</section> </section>
) )
}; };

23
src/components/ReportForm/reportForm.scss
View File

@ -1,14 +1,33 @@
.report-form { .report-form {
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
.container {
max-width: 1160px;
margin-top: 23px;
@media (max-width: 570px) {
margin-top: 0;
}
}
&__content {
background: #FFFFFF;
border-radius: 12px;
margin: 25px 0 80px;
padding: 50px 40px;
}
.report__head { .report__head {
margin-top: 20px; margin-top: 20px;
} }
&__block-title { &__block-title {
margin-top: 15px;
h2 { h2 {
color: #282828; color: #52B709;
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 3.3em; font-size: 3.3em;
font-weight: 700; font-weight: 700;

2
src/pages/Profile.js
View File

@ -28,7 +28,7 @@ export const Profile = () => {
</div> </div>
</div> </div>
<div className='profile__items'> <div className='profile__items'>
<Link to={'/ProfileCalendar'} className='item'> <Link to={'/profile/profilecalendar'} className='item'>
<div className='item__about'> <div className='item__about'>
<img src={reportsIcon} alt='report'/> <img src={reportsIcon} alt='report'/>
<h3>Ваша отчетность</h3> <h3>Ваша отчетность</h3>

2
src/pages/ProfileCalendarPage.js
View File

@ -3,7 +3,7 @@ import { WithLogout } from '../hoc/withLogout';
import { ProfileCalendar } from '../../src/components/ProfileCalendar/ProfileCalendar'; import { ProfileCalendar } from '../../src/components/ProfileCalendar/ProfileCalendar';
const ProfileCalendarPage = () => { const ProfileCalendarPage = () => {
return <WithLogout><ProfileCalendar/></WithLogout>; return <ProfileCalendar/>;
}; };
export default ProfileCalendarPage; export default ProfileCalendarPage;

2
src/pages/ReportFormPage.js
View File

@ -2,6 +2,6 @@ import React from 'react';
import { WithLogout } from '../hoc/withLogout'; import { WithLogout } from '../hoc/withLogout';
import ReportForm from '../components/ReportForm/ReportForm'; import ReportForm from '../components/ReportForm/ReportForm';
const ReportFormPage = () => <WithLogout><ReportForm /></WithLogout>; const ReportFormPage = () => <ReportForm />;
export default ReportFormPage; export default ReportFormPage;