Подключил шрифты

2023-01-09 20:53:23 +03:00
parent 4c636c424a
commit c4d44e3855
28 changed files with 305 additions and 292 deletions
--- a/src/components/Calendar/Calendar.js
+++ b/src/components/Calendar/Calendar.js
@ -1,92 +1,64 @@
-import React, { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { selectCurrentCandidate, auth } from '../../redux/outstaffingSlice'
-import { Link, useHistory, useParams } from 'react-router-dom'
-import calendarMale from '../../images/medium_male.png'
-import rectangle from '../../images/rectangle_secondPage.png'
-import CalendarComponent from './CalendarComponent'
-import { currentMonth } from './calendarHelper'
-import { Footer } from '../Footer/Footer'
+import React, {useEffect, useState} from 'react'
+import {useSelector} from 'react-redux'
+import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
+import {Link} from 'react-router-dom'

-import { fetchReportList } from '../../server/server'
-import { getRole } from '../../redux/roleSlice'
+import CalendarComponent from './CalendarComponent'
+import {currentMonth} from './calendarHelper'
+import {Footer} from '../Footer/Footer'
+
+import rectangle from '../../images/rectangle_secondPage.png'

 import './calendar.scss'

-const getDateParamString = ({ paramName, value }) => {
-  return value ? `${paramName}=${value}` : ''
-}
+const Calendar = ({onSelect}) => {

-const Calendar = ({ onSelect }) => {
-  const dispatch = useDispatch()
-  const candidateForCalendar = useSelector(selectCurrentCandidate)
-  const role = useSelector(getRole)
-  const { userId } = useParams()
-  const [month, setMonth] = useState('')
-  const [fromDate, setFromDate] = useState(null)
-  const [toDate, setToDate] = useState(null)
+  const candidateForCalendar = useSelector(selectCurrentCandidate);

-  const history = useHistory()
-
-  // useEffect(() => {
-  //   fetchReportList({
-  //     link: `${
-  //       process.env.REACT_APP_API_URL
-  //     }/api/reports/index?user_id=${userId}${getDateParamString({
-  //       paramName: 'fromDate',
-  //       value: fromDate
-  //     })}${getDateParamString({
-  //       paramName: 'toDate',
-  //       value: toDate
-  //     })}`,
-  //     history,
-  //     role,
-  //     logout: () => {}
-  //   })
-  // }, [])
+  const [month, setMonth] = useState('');

  useEffect(() => {
    setMonth(currentMonth)
-  }, [month])
+  }, [month]);

-  const { name, skillsName, photo } = candidateForCalendar
+  const {name, skillsName, photo} = candidateForCalendar;

-  const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '))
+  const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));

  return (
-    <section className='calendar'>
-      <div className='row'>
-        <h2 className='calendar__profile'>
-          Добрый день, <span>Александр !</span>
-        </h2>
-        <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={photo} alt='img' />
-            <h3 className='calendar__info-name'>{abbreviatedName}</h3>
-          </div>
-          <div className='calendar__title'>
-            <h3 className='calendar__title-text'>{skillsName} разработчик</h3>
-            <img className='calendar__title-img' src={rectangle} alt='img' />
-          </div>
-          <div>
-            <Link to='/report'>
-              <button className='calendar__btn'>Заполнить отчет за день</button>
-            </Link>
+      <section className='calendar'>
+        <div className='row'>
+          <h2 className='calendar__profile'>
+            Добрый день, <span>Александр !</span>
+          </h2>
+          <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={photo} alt='img'/>
+              <h3 className='calendar__info-name'>{abbreviatedName}</h3>
+            </div>
+            <div className='calendar__title'>
+              <h3 className='calendar__title-text'>{skillsName} разработчик</h3>
+              <img className='calendar__title-img' src={rectangle} alt='img'/>
+            </div>
+            <div>
+              <Link to='/report'>
+                <button className='calendar__btn'>Заполнить отчет за день</button>
+              </Link>
+            </div>
          </div>
        </div>
-      </div>

-      <div className='row'>
-        <div className='col-12 col-xl-12'>
-          <CalendarComponent onSelect={onSelect} />
-          <p className='calendar__hours'>
-            {month} : <span> 60 часов </span>
-          </p>
+        <div className='row'>
+          <div className='col-12 col-xl-12'>
+            <CalendarComponent onSelect={onSelect}/>
+            <p className='calendar__hours'>
+              {month} : <span> 60 часов </span>
+            </p>
+          </div>
        </div>
-      </div>
-      <Footer />
-    </section>
+        <Footer/>
+      </section>
  )
-}
+};

 export default Calendar
--- a/src/components/Calendar/calendar.scss
+++ b/src/components/Calendar/calendar.scss
@ -1,9 +1,9 @@
 .calendar {
  margin-bottom: 40px;
+  font-family: 'LabGrotesque', sans-serif;

  &__profile {
    color: #282828;
-    font-family: 'GT Eesti Pro Display';
    font-size: 3.4em;
    font-weight: 700;
    font-style: normal;
@ -29,7 +29,6 @@
    height: 112px;

    &-name {
-      font-family: 'GT Eesti Pro Display';
      font-size: 2em;
      font-weight: 400;
      font-style: normal;
@ -53,7 +52,6 @@

  &__title {
    &-text {
-      font-family: 'GT Eesti Pro Display';
      font-size: 2.7em;
      font-weight: 700;
      font-style: normal;
@ -86,7 +84,6 @@
  }

  &__hours {
-    font-family: 'GT Eesti Pro Display';
    font-size: 2.2em;
    font-weight: 600;
    font-style: normal;
@ -96,7 +93,6 @@
    margin-left: 68px;

    span {
-      font-family: 'GT Eesti Pro Display';
      font-weight: 100;
      font-style: normal;
      letter-spacing: normal;
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@ -7,12 +7,13 @@
  padding-right: 54px;
  padding-top: 48px;
  padding-bottom: 94px;
+  font-family: 'LabGrotesque', sans-serif;

  &__header {
    display: flex;

    h3 {
-      font-family: 'GT Eesti Pro Display';
+
      font-size: 2.5em;
      font-weight: 400;
      font-style: normal;
@ -33,7 +34,6 @@

      span {
        color: #18586e;
-        font-family: 'GT Eesti Pro Display';
        font-size: 1.6em;
        font-weight: 500;
        font-style: normal;
@ -62,7 +62,6 @@

      p {
        color: #398208;
-        font-family: 'GT Eesti Pro Display';
        font-size: 25px;
        font-weight: 400;
        font-style: normal;
@ -87,7 +86,6 @@
      border: 1px solid #c4c4c4;
      background-color: #ffffff;
      margin-top: 20px;
-      font-family: 'GT Eesti Pro Display';
      font-size: 1.2em;
      font-weight: 100;
      font-style: normal;
--- a/src/components/OutstaffingBlock/outstaffingBlock.scss
+++ b/src/components/OutstaffingBlock/outstaffingBlock.scss
@ -3,6 +3,7 @@
  color: #f9f9f9;
 }
 .outstaffing-block {
+
  margin-top: 60px;
  display: flex;
  flex-direction: column;
@ -28,6 +29,7 @@
  }

  &__img {
+    cursor: pointer;
    min-width: 260px;
    min-height: 120px;
    background-color: #f9f9f9;
--- a/src/components/Profile/profile.scss
+++ b/src/components/Profile/profile.scss
@ -2,6 +2,7 @@
  background: #F1F1F1;
  height: 100%;
  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;

  &__title {
    font-weight: 700;
--- a/src/components/Profile/profileHeader.scss
+++ b/src/components/Profile/profileHeader.scss
@ -2,6 +2,7 @@
  width: 100%;
  display: flex;
  flex-direction: column;
+  font-family: 'LabGrotesque', sans-serif;

  &__head {
    background: #E1FCCF;
--- a/src/components/Profile/summary.scss
+++ b/src/components/Profile/summary.scss
@ -2,6 +2,7 @@
  background: #F1F1F1;
  height: 100%;
  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
  //
  //&__container {
  //  max-width: 1160px;
--- a/src/components/ProfileCalendar/profileCalendar.scss
+++ b/src/components/ProfileCalendar/profileCalendar.scss
@ -1,5 +1,5 @@
 .calendar {
-
+  font-family: 'LabGrotesque', sans-serif;
  .profile__calendar {
    margin-top: 20px;
  }
--- a/src/components/ReportForm/ReportForm.js
+++ b/src/components/ReportForm/ReportForm.js
@ -1,16 +1,16 @@
-import React, { useState } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
-import { fetchPost } from '../../server/server'
+import React, {useState} from 'react'
+import {useSelector, useDispatch} from 'react-redux'
+import {fetchPost} from '../../server/server'
 import {useHistory, useParams, Redirect, Link} from 'react-router-dom'
-import { Loader } from '../Loader/Loader'
+import {Loader} from '../Loader/Loader'
 import {auth} from '../../redux/outstaffingSlice'
-import { getReportDate } from '../../redux/reportSlice'
-import { getRole } from '../../redux/roleSlice'
+import {getReportDate} from '../../redux/reportSlice'
+import {getRole} from '../../redux/roleSlice'
 import calendarIcon from '../../images/calendar_icon.png'
 import ellipse from '../../images/ellipse.png'
 import remove from '../../images/remove.png'
 import addIcon from '../../images/addIcon.png'
-import { currentMonthAndDay, getReports } from '../Calendar/calendarHelper'
+import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
 import './reportForm.scss'
 import arrow from "../../images/right-arrow.png";

@ -19,176 +19,177 @@ const getCreatedDate = (day) => {
    return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
  } else {
    const date = new Date();
-    const dd = String(date.getDate()).padStart(2, '0')
-    const mm = String(date.getMonth() + 1).padStart(2, '0')
-    const yyyy = date.getFullYear()
+    const dd = String(date.getDate()).padStart(2, '0');
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const yyyy = date.getFullYear();
    return `${yyyy}-${mm}-${dd}`
  }
-}
+};

 const ReportForm = () => {
-  const dispatch = useDispatch()
-  const history = useHistory()
-  const reportDate = useSelector(getReportDate)
-  const role = useSelector(getRole)
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const reportDate = useSelector(getReportDate);
+  const role = useSelector(getRole);

-  const [isFetching, setIsFetching] = useState(false)
-  const [reportSuccess, setReportSuccess] = useState(false)
+  const [isFetching, setIsFetching] = useState(false);
+  const [reportSuccess, setReportSuccess] = useState(false);

-  const [inputs, setInputs] = useState([ { task: '', hours_spent: '', minutes_spent: 0 } ]);
+  const [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]);
  const [troublesInputValue, setTroublesInputValue] = useState('');
  const [scheduledInputValue, setScheduledInputValue] = useState('');

  const addInput = () => {
-    setInputs((prev) => [...prev, { task: '', hours_spent: '', minutes_spent: 0 }])
-  }
+    setInputs((prev) => [...prev, {task: '', hours_spent: '', minutes_spent: 0}])
+  };

-  const totalHours = inputs.reduce((a,b) => a + b.hours_spent, 0)
+  const totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0);

  const deleteInput = (indexRemove) => {
    if (indexRemove !== 0) {
      setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
    }
-  }
+  };

  return (
-    <section className='report-form'>
-      <div className='row'>
-        <div className='col-xl-12 report__head'>
-          <Link className='calendar__back' to={`/ProfileCalendar`}>
-            <div><img src={arrow} alt=''/>Вернуться назад</div>
-          </Link>
-          <div className='report-form__block'>
-            <div className='report-form__block-title'>
-              <h2>Добавить отчет</h2>
-              <h3>Дата заполнения отчета:</h3>
-            </div>
-            <div className='report-form__block-img'>
-              <img
-                className='report-form__calendar-icon'
-                src={calendarIcon}
-                alt=''
-              />
-              {/*{currentMonthAndDayReportPage()}*/}
-              {reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
-            </div>
-            <div className='report-form__task-list'>
-              <img src={ellipse} alt='' />
-              <span>Какие задачи были выполнены?</span>
+      <section className='report-form'>
+        <div className='row'>
+          <div className='col-xl-12 report__head'>
+            <Link className='calendar__back' to={`/ProfileCalendar`}>
+              <div><img src={arrow} alt=''/>Вернуться назад</div>
+            </Link>
+            <div className='report-form__block'>
+              <div className='report-form__block-title'>
+                <h2>Добавить отчет</h2>
+                <h3>Дата заполнения отчета:</h3>
+              </div>
+              <div className='report-form__block-img'>
+                <img
+                    className='report-form__calendar-icon'
+                    src={calendarIcon}
+                    alt=''
+                />
+                {/*{currentMonthAndDayReportPage()}*/}
+                {reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
+              </div>
+              <div className='report-form__task-list'>
+                <img src={ellipse} alt=''/>
+                <span>Какие задачи были выполнены?</span>
+              </div>
            </div>
          </div>
        </div>
-      </div>

-      <div className='row'>
-        <div className='col-8'>
-          <div className='report-form__task-header'>
-            <p className='report-form__task-title--description'>
-              Краткое описание задачи
-            </p>
-            <p className='report-form__task-title--hours'>Количество часов</p>
-          </div>
-
-          {inputs.map((input, index) => {
-            return (
-              <form id={'input'} key={`input__${index}`} className='report-form__task-form'>
-                <div className='report-form__task-number'>
-                  {index+1}.
-                </div>
-                <div className='report-form__task-input report-form__task-input--description'>
-                  <input name='text' type='text' onChange={ e => setInputs(inputs.map( (input, inputIndex) => {
-                    return index === inputIndex
-                      ? {
-                        ...input,
-                        task: e.target.value
-                      }
-                      : input
-                  }))} />
-                </div>
-                <div className='report-form__task-input report-form__task-input--hours'>
-                  <input name='number' type='number' min='1' onChange={ e => setInputs(inputs.map( (input, inputIndex) => {
-                    return index === inputIndex
-                      ? {
-                        ...input,
-                        hours_spent: Number(e.target.value)
-                      }
-                      : input
-                  }))} />
-                </div>
-                <div className='report-form__task-remove'>
-                  <img onClick={() => deleteInput(index)} src={remove} alt='' />
-                </div>
-              </form>
-            )
-          })}
-
-          <div className='report-form__form-add'>
-            <img onClick={addInput} src={addIcon} alt='' />
-            <span>Добавить еще </span>
-          </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 className='row'>
+          <div className='col-8'>
+            <div className='report-form__task-header'>
+              <p className='report-form__task-title--description'>
+                Краткое описание задачи
+              </p>
+              <p className='report-form__task-title--hours'>Количество часов</p>
            </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 } ]);
-                })
+
+            {inputs.map((input, index) => {
+              return (
+                  <form id={'input'} key={`input__${index}`} className='report-form__task-form'>
+                    <div className='report-form__task-number'>
+                      {index + 1}.
+                    </div>
+                    <div className='report-form__task-input report-form__task-input--description'>
+                      <input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
+                        return index === inputIndex
+                            ? {
+                              ...input,
+                              task: e.target.value
+                            }
+                            : input
+                      }))}/>
+                    </div>
+                    <div className='report-form__task-input report-form__task-input--hours'>
+                      <input name='number' type='number' min='1'
+                             onChange={e => setInputs(inputs.map((input, inputIndex) => {
+                               return index === inputIndex
+                                   ? {
+                                     ...input,
+                                     hours_spent: Number(e.target.value)
+                                   }
+                                   : input
+                             }))}/>
+                    </div>
+                    <div className='report-form__task-remove'>
+                      <img onClick={() => deleteInput(index)} src={remove} alt=''/>
+                    </div>
+                  </form>
              )
-            }}>
-              {isFetching ? <Loader /> : 'Отправить'}
-            </button>
-            <p className='report-form__footer-text'>
-              Всего за день : <span>{totalHours} часов</span>
-            </p>
-            {reportSuccess &&
-              <p className='report-form__footer-done'>Отчет отправлен</p>
-            }
+            })}
+
+            <div className='report-form__form-add'>
+              <img onClick={addInput} src={addIcon} alt=''/>
+              <span>Добавить еще </span>
+            </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>
+              <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>
-    </section>
+        <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>
+      </section>
  )
-}
+};

 export default ReportForm