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

Merge pull request #48 from apuc/add-calendar-fixes

Browse Source 
dataPicker on reportPage
This commit is contained in:
NikoM1k 2023-02-07 14:11:56 +02:00 committed by GitHub
commit 59a85c1c7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 197 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
package-lock.json generated
View File

@ -5,7 +5,6 @@
"requires": true,
"packages": {
"": {
"name": "outstaffing-react",
"version": "0.1.0",
"dependencies": {
"@reduxjs/toolkit": "^1.6.0",
@ -36,6 +35,7 @@
"react": "^18.2.0",
"react-app-polyfill": "^2.0.0",
"react-bootstrap": "^1.6.0",
"react-datepicker": "^4.10.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.2.0",
"react-inlinesvg": "3.0.1",
@ -61,7 +61,7 @@
"babel-loader": "^9.1.2",
"copy-webpack-plugin": "^10.2.0",
"cross-env": "^7.0.3",
"css-loader": "^6.7.3",
"css-loader": "6.7.3",
"dotenv-webpack": "^7.0.3",
"html-webpack-plugin": "5.5.0",
"mini-css-extract-plugin": "^2.7.2",
@ -8738,6 +8738,18 @@
"node": ">=10"
}
},
"node_modules/date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -20193,6 +20205,23 @@
"react-dom": ">=16.8.0"
}
},
"node_modules/react-datepicker": {
"version": "4.10.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.10.0.tgz",
"integrity": "sha512-6IfBCZyWj54ZZGLmEZJ9c4Yph0s9MVfEGDC2evOvf9AmVz+RRcfP2Czqad88Ff9wREbcbqa4dk7IFYeXF1d3Ag==",
"dependencies": {
"@popperjs/core": "^2.9.2",
"classnames": "^2.2.6",
"date-fns": "^2.24.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.12.2",
"react-popper": "^2.3.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18",
"react-dom": "^16.9.0 || ^17 || ^18"
}
},
"node_modules/react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@ -20339,6 +20368,11 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-fast-compare": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"node_modules/react-from-dom": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.2.tgz",
@ -20381,6 +20415,19 @@
"react-dom": "*"
}
},
"node_modules/react-onclickoutside": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
"integrity": "sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==",
"funding": {
"type": "individual",
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
},
"peerDependencies": {
"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
}
},
"node_modules/react-outside-click-handler": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz",
@ -20460,6 +20507,20 @@
"react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
}
},
"node_modules/react-popper": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
"dependencies": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"peerDependencies": {
"@popperjs/core": "^2.0.0",
"react": "^16.8.0 || ^17 || ^18",
"react-dom": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-redux": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
@ -32044,6 +32105,11 @@
"whatwg-url": "^8.0.0"
}
},
"date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -40452,6 +40518,19 @@
"warning": "^4.0.3"
}
},
"react-datepicker": {
"version": "4.10.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.10.0.tgz",
"integrity": "sha512-6IfBCZyWj54ZZGLmEZJ9c4Yph0s9MVfEGDC2evOvf9AmVz+RRcfP2Czqad88Ff9wREbcbqa4dk7IFYeXF1d3Ag==",
"requires": {
"@popperjs/core": "^2.9.2",
"classnames": "^2.2.6",
"date-fns": "^2.24.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.12.2",
"react-popper": "^2.3.0"
}
},
"react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@ -40561,6 +40640,11 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"react-fast-compare": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"react-from-dom": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.2.tgz",
@ -40594,6 +40678,12 @@
"prop-types": "^15.7.2"
}
},
"react-onclickoutside": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
"integrity": "sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==",
"requires": {}
},
"react-outside-click-handler": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz",
@ -40657,6 +40747,15 @@
"prop-types": "^15.7.2"
}
},
"react-popper": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
"requires": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
}
},
"react-redux": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",

1
package.json
View File

@ -31,6 +31,7 @@
"react": "^18.2.0",
"react-app-polyfill": "^2.0.0",
"react-bootstrap": "^1.6.0",
"react-datepicker": "^4.10.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.2.0",
"react-inlinesvg": "3.0.1",

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

@ -1,6 +1,9 @@
import React, {useState} from 'react'
import React, {useState, useEffect} from 'react'
import {useSelector} from 'react-redux'
import {Link, useNavigate} from 'react-router-dom'
import DatePicker, { registerLocale } from "react-datepicker"
import ru from "date-fns/locale/ru"
registerLocale("ru", ru);
import {Loader} from '../Loader/Loader'
import {currentMonthAndDay} from '../Calendar/calendarHelper'
@ -18,7 +21,11 @@ import addIcon from '../../images/addIcon.png'
import arrow from "../../images/right-arrow.png";
import './reportForm.scss'
import "react-datepicker/dist/react-datepicker.css";
const ReportForm = () => {
const navigate= useNavigate();
const reportDate = useSelector(getReportDate);
const getCreatedDate = (day) => {
if (day) {
@ -32,12 +39,14 @@ const getCreatedDate = (day) => {
}
};
const ReportForm = () => {
const navigate= useNavigate();
const reportDate = useSelector(getReportDate);
useEffect(() => {
initListeners()
}, [])
const [isFetching, setIsFetching] = useState(false);
const [reportSuccess, setReportSuccess] = useState('');
const [startDate, setStartDate] = useState(reportDate ? new Date (reportDate._d) : new Date());
const [datePickerOpen, setDatePickerOpen] = useState(false);
const [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]);
const [troublesInputValue, setTroublesInputValue] = useState('');
@ -47,6 +56,18 @@ const ReportForm = () => {
setInputs((prev) => [...prev, {task: '', hours_spent: '', minutes_spent: 0}])
};
const initListeners = () => {
document.addEventListener('click', closeByClickingOut)
}
const closeByClickingOut = (event) => {
const path = event.path || (event.composedPath && event.composedPath())
if (event && !path.find((div) => div.classList && (div.classList.contains('report-form__block-img') || div.classList.contains('react-datepicker-popper')))) {
setDatePickerOpen(false)
}
}
const totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0);
const deleteInput = (indexRemove) => {
@ -67,7 +88,7 @@ const ReportForm = () => {
tasks: inputs,
difficulties: troublesInputValue,
tomorrow: scheduledInputValue,
created_at: getCreatedDate(reportDate),
created_at: getCreatedDate(startDate),
status: 1,
},
}).then((res) => {
@ -103,15 +124,24 @@ const ReportForm = () => {
<h2>Добавление отчета за день</h2>
<h3>Дата заполнения отчета:</h3>
</div>
<div className='report-form__block-img'>
<div className='report-form__block-img' onClick={() => setDatePickerOpen(true)}>
<img
className='report-form__calendar-icon'
src={calendarIcon}
alt=''
/>
{/*{currentMonthAndDayReportPage()}*/}
{reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
{getCreatedDate(startDate)}
</div>
<DatePicker
className='datePicker'
open={datePickerOpen}
locale="ru"
selected={startDate}
onChange={(date) => {
setDatePickerOpen(false)
setStartDate(date)
}}
/>
<div className='report-form__task-list'>
<img src={ellipse} alt=''/>
<span>Какие задачи были выполнены?</span>

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

@ -346,6 +346,53 @@
height: 23px;
}
}
.datePicker {
visibility: hidden;
height: 0;
padding: 0;
width: 0;
position: absolute;
}
.react-datepicker {
border: 1px solid #398208;
}
.react-datepicker-popper {
top: -15px !important;
}
.react-datepicker__current-month {
font-size: 14px;
font-family: "LabGrotesque", sans-serif;
text-transform: capitalize;
}
.react-datepicker__header {
padding: 5px 0 10px;
border-bottom: 1px solid #398208;
}
.react-datepicker__day {
font-size: 14px;
width: 35px;
font-family: "LabGrotesque", sans-serif;
}
.react-datepicker__day-name {
font-size: 14px;
width: 35px;
font-family: "LabGrotesque", sans-serif;
}
.react-datepicker__triangle {
left: -15px !important;
&:before {
border-bottom-color: #398208 !important;
}
}
}
@media (max-width: 575.98px) {