Revize 1865a0be
Přidáno uživatelem Pavel Fidransky před více než 4 roky(ů)
| client/src/Calendar.js | ||
|---|---|---|
| 1 | 1 |
import React, { useState, useEffect } from 'react';
|
| 2 | 2 |
import './App.css'; |
| 3 |
import FullCalendar from '@fullcalendar/react' |
|
| 4 |
import dayGridPlugin from '@fullcalendar/daygrid' |
|
| 5 |
import '@fullcalendar/core/main.css' |
|
| 6 |
import '@fullcalendar/daygrid/main.css' |
|
| 3 |
import FullCalendar from '@fullcalendar/react';
|
|
| 4 |
import dayGridPlugin from '@fullcalendar/daygrid';
|
|
| 5 |
import '@fullcalendar/core/main.css';
|
|
| 6 |
import '@fullcalendar/daygrid/main.css';
|
|
| 7 | 7 |
import interactionPlugin from '@fullcalendar/interaction'; |
| 8 |
import Popup from "reactjs-popup";
|
|
| 8 |
import Popup from 'reactjs-popup';
|
|
| 9 | 9 |
import moment from 'moment'; |
| 10 |
import * as api_fetch from './api' |
|
| 11 |
|
|
| 12 |
|
|
| 13 |
function Calendar(props) {
|
|
| 14 |
|
|
| 15 |
useEffect( () => {
|
|
| 16 |
if (props.currentUser !== undefined) {
|
|
| 17 |
props.currentUser.role === 'EMPLOYER' |
|
| 18 |
? |
|
| 19 |
api_fetch.getAdminCalendar().then(adminCalendar => {
|
|
| 20 |
props.setAcceptedRequest(adminCalendar); |
|
| 21 |
}).catch(reason => {
|
|
| 22 |
alert(reason) |
|
| 23 |
}) |
|
| 24 |
: |
|
| 25 |
api_fetch.getUserCalendar(props.currentUser, convertedDate).then(userCalendar => {
|
|
| 26 |
props.setAcceptedRequest(userCalendar); |
|
| 27 |
}).catch(reason => {
|
|
| 28 |
alert(reason) |
|
| 29 |
}); |
|
| 30 |
} |
|
| 31 |
}, [props.currentUser]); |
|
| 32 |
|
|
| 33 |
//states |
|
| 34 |
const [isOpen, setOpen] = useState(false) |
|
| 35 |
|
|
| 36 |
const [whatDate, setDate] = useState('')
|
|
| 10 |
import * as api from './api'; |
|
| 37 | 11 |
|
| 38 |
const [whatTime, setWhatTime] = useState(7.5) |
|
| 12 |
const DEFAULT_MANDAY_HOURS = 7.5; |
|
| 13 |
const SICK_DAY_COUNT_INCREMENT = 1; |
|
| 39 | 14 |
|
| 40 |
const [typeRadio, setType] = useState('sickday')
|
|
| 15 |
export default function Calendar(props) {
|
|
| 41 | 16 |
|
| 42 |
var today = new Date(); |
|
| 43 |
|
|
| 44 |
// setting date to right format |
|
| 45 |
today = today.toISOString().split('T')[0]
|
|
| 46 |
const convertedDate = today.split("-").join("/")
|
|
| 17 |
useEffect(() => {
|
|
| 18 |
if (props.currentUser === undefined) {
|
|
| 19 |
return; |
|
| 20 |
} |
|
| 47 | 21 |
|
| 48 |
// ********************* ADD EVENT - EMPLOYEE ************************** |
|
| 22 |
if (props.currentUser.role === 'EMPLOYER') {
|
|
| 23 |
api.getAdminCalendar().then(adminCalendar => {
|
|
| 24 |
props.setAcceptedRequest(adminCalendar); |
|
| 25 |
}).catch(reason => {
|
|
| 26 |
alert(reason); |
|
| 27 |
}); |
|
| 28 |
} else {
|
|
| 29 |
api.getUserCalendar(props.currentUser, convertedDate).then(userCalendar => {
|
|
| 30 |
props.setAcceptedRequest(userCalendar); |
|
| 31 |
}).catch(reason => {
|
|
| 32 |
alert(reason); |
|
| 33 |
}); |
|
| 34 |
} |
|
| 35 |
}, [props.currentUser]); |
|
| 49 | 36 |
|
| 50 |
const addEvent = async (e) => {
|
|
| 51 |
e.preventDefault(); |
|
| 52 |
|
|
| 53 |
try {
|
|
| 54 |
// setting an object |
|
| 55 |
const newDate = whatDate.split("-").join("/");
|
|
| 37 |
//states |
|
| 38 |
const [isOpen, setOpen] = useState(false); |
|
| 39 |
const [whatDate, setDate] = useState('');
|
|
| 40 |
const [whatTime, setWhatTime] = useState(DEFAULT_MANDAY_HOURS); |
|
| 41 |
const [typeRadio, setType] = useState('sickday');
|
|
| 56 | 42 |
|
| 57 |
const dataAddEventEmployee = {
|
|
| 58 |
type: typeRadio === 'sickday' ? 'SICK_DAY' : 'VACATION', |
|
| 59 |
date: newDate, |
|
| 60 |
from: typeRadio === 'sickday' ? null : "00:00", |
|
| 61 |
to: typeRadio === 'sickday' ? null : moment().startOf('day').add(whatTime, "hours").format("hh:mm"),
|
|
| 62 |
} |
|
| 43 |
var today = new Date(); |
|
| 63 | 44 |
|
| 64 |
await api_fetch.addEventApi(dataAddEventEmployee); |
|
| 65 |
if (typeRadio === 'holiday') {
|
|
| 66 |
props.setCurrentUser({
|
|
| 67 |
...props.currentUser, |
|
| 68 |
holiday: props.currentUser.holiday - whatTime |
|
| 69 |
}) |
|
| 70 |
} else if (typeRadio === 'sickday') {
|
|
| 71 |
props.setCurrentUser({
|
|
| 72 |
...props.currentUser, |
|
| 73 |
takenSickday: props.currentUser.takenSickday + 1 |
|
| 74 |
}) |
|
| 45 |
// setting date to right format |
|
| 46 |
today = today.toISOString().split('T')[0];
|
|
| 47 |
const convertedDate = today.split('-').join('/');
|
|
| 48 |
|
|
| 49 |
// ********************* ADD EVENT - EMPLOYEE ************************** |
|
| 50 |
|
|
| 51 |
async function addEvent(e) {
|
|
| 52 |
e.preventDefault(); |
|
| 53 |
|
|
| 54 |
try {
|
|
| 55 |
// setting an object |
|
| 56 |
const newDate = whatDate.split('-').join('/');
|
|
| 57 |
|
|
| 58 |
const dataAddEventEmployee = {
|
|
| 59 |
type: typeRadio === 'sickday' ? 'SICK_DAY' : 'VACATION', |
|
| 60 |
date: newDate, |
|
| 61 |
from: typeRadio === 'sickday' ? null : '00:00', |
|
| 62 |
to: typeRadio === 'sickday' ? null : moment().startOf('day').add(whatTime, 'hours').format('hh:mm'),
|
|
| 63 |
}; |
|
| 64 |
|
|
| 65 |
await api.addEventApi(dataAddEventEmployee); |
|
| 66 |
|
|
| 67 |
if (typeRadio === 'holiday') {
|
|
| 68 |
props.setCurrentUser({
|
|
| 69 |
...props.currentUser, |
|
| 70 |
holiday: props.currentUser.holiday - whatTime, |
|
| 71 |
}); |
|
| 72 |
} else if (typeRadio === 'sickday') {
|
|
| 73 |
props.setCurrentUser({
|
|
| 74 |
...props.currentUser, |
|
| 75 |
takenSickday: props.currentUser.takenSickday + SICK_DAY_COUNT_INCREMENT, |
|
| 76 |
}); |
|
| 77 |
} |
|
| 78 |
|
|
| 79 |
setOpen(false); |
|
| 80 |
} catch (e) {
|
|
| 81 |
alert(e); |
|
| 75 | 82 |
} |
| 76 |
|
|
| 77 |
setOpen(false) |
|
| 78 |
} catch (e) {
|
|
| 79 |
alert(e) |
|
| 80 | 83 |
} |
| 81 |
} |
|
| 82 |
// ********************* ADD EVENT ADMIN - EMPLOYER ************************** |
|
| 83 | 84 |
|
| 84 |
const addEventAdmin = async (e) => {
|
|
| 85 |
e.preventDefault(); |
|
| 85 |
// ********************* ADD EVENT ADMIN - EMPLOYER ************************** |
|
| 86 | 86 |
|
| 87 |
// setting an object
|
|
| 88 |
const newDate = whatDate.split("-").join("/");
|
|
| 87 |
async function addEventAdmin(e) {
|
|
| 88 |
e.preventDefault();
|
|
| 89 | 89 |
|
| 90 |
const dataAddEventAdmin = {
|
|
| 91 |
type: typeRadio === 'sickday' ? 'SICK_DAY' : 'VACATION', |
|
| 92 |
date: newDate, |
|
| 93 |
from: typeRadio === 'sickday' ? null : "00:00", |
|
| 94 |
to: typeRadio === 'sickday' ? null : moment().startOf('day').add(whatTime, "hours").format("hh:mm"),
|
|
| 95 |
}; |
|
| 90 |
// setting an object |
|
| 91 |
const newDate = whatDate.split('-').join('/');
|
|
| 96 | 92 |
|
| 97 |
api_fetch.addEventApiAdmin(dataAddEventAdmin).then(() => {
|
|
| 98 |
const userProps = {
|
|
| 99 |
title: props.currentUser.name, |
|
| 100 |
start: whatDate |
|
| 101 |
} |
|
| 102 |
//concat new request to current ones |
|
| 103 |
props.setAcceptedRequest((acceptedRequest) => acceptedRequest.concat(userProps)) |
|
| 104 |
}).catch(reason => {
|
|
| 105 |
alert(reason) |
|
| 106 |
}); |
|
| 93 |
const dataAddEventAdmin = {
|
|
| 94 |
type: typeRadio === 'sickday' ? 'SICK_DAY' : 'VACATION', |
|
| 95 |
date: newDate, |
|
| 96 |
from: typeRadio === 'sickday' ? null : '00:00', |
|
| 97 |
to: typeRadio === 'sickday' ? null : moment().startOf('day').add(whatTime, 'hours').format('hh:mm'),
|
|
| 98 |
}; |
|
| 107 | 99 |
|
| 108 |
setOpen(false) |
|
| 100 |
api.addEventApiAdmin(dataAddEventAdmin).then(() => {
|
|
| 101 |
const userProps = {
|
|
| 102 |
title: props.currentUser.name, |
|
| 103 |
start: whatDate, |
|
| 104 |
}; |
|
| 105 |
//concat new request to current ones |
|
| 106 |
props.setAcceptedRequest((acceptedRequest) => acceptedRequest.concat(userProps)); |
|
| 107 |
}).catch(reason => {
|
|
| 108 |
alert(reason); |
|
| 109 |
}); |
|
| 110 |
|
|
| 111 |
setOpen(false); |
|
| 109 | 112 |
|
| 110 |
api_fetch.getUsersOverview().then(usersOverview => {
|
|
| 111 |
props.setEmployees(usersOverview); |
|
| 113 |
api.getUsersOverview().then(usersOverview => {
|
|
| 114 |
props.setEmployees(usersOverview);
|
|
| 112 | 115 |
}).catch(reason => {
|
| 113 |
alert(reason)
|
|
| 114 |
}); |
|
| 115 |
} |
|
| 116 |
alert(reason);
|
|
| 117 |
});
|
|
| 118 |
}
|
|
| 116 | 119 |
|
| 117 |
const DEFAULT_MANDAY_HOURS = 7.5; |
|
| 118 |
|
|
| 119 |
|
|
| 120 | 120 |
return ( |
| 121 | 121 |
<div className="calendar"> |
| 122 |
|
|
| 123 |
<FullCalendar defaultView="dayGridMonth" plugins={[ dayGridPlugin, interactionPlugin ]}
|
|
| 124 |
|
|
| 125 |
dateClick={function(info) {
|
|
| 126 |
setOpen(info.dateStr > today) |
|
| 127 |
setDate(info.dateStr) |
|
| 128 |
setWhatTime(DEFAULT_MANDAY_HOURS) |
|
| 129 |
}} |
|
| 130 |
events={[
|
|
| 131 |
...props.acceptedRequest |
|
| 132 |
]} |
|
| 133 |
/> |
|
| 134 |
|
|
| 135 |
<Popup |
|
| 136 |
open={isOpen}
|
|
| 137 |
position="right center" |
|
| 138 |
modal |
|
| 139 |
closeOnDocumentClick |
|
| 140 |
onClose={() => setOpen(false)}
|
|
| 141 |
> |
|
| 142 |
<div className="calendar-form"> |
|
| 143 |
<form onSubmit={props.currentUser !== undefined && props.currentUser.role === 'EMPLOYER'
|
|
| 144 |
? (e) => addEventAdmin(e) |
|
| 145 |
: (e) => addEvent(e) |
|
| 146 |
}> |
|
| 147 |
<h2>Choose vacation type</h2> |
|
| 148 |
<div className="calendar-radio"> |
|
| 149 |
<input checked={
|
|
| 150 |
typeRadio === 'sickday' ? 'checked' : null} |
|
| 151 |
onChange={() => setType(typeRadio === 'holiday' ? 'sickday' : 'holiday')}
|
|
| 152 |
type="radio" id="sickday" name="radiobutton" value="sickday" |
|
| 153 |
/> |
|
| 154 |
<label for="sickday">Sickday</label> |
|
| 155 |
</div> |
|
| 156 |
<div className="calendar-radio"> |
|
| 157 |
<input checked={
|
|
| 158 |
typeRadio === 'holiday' ? 'checked' : null} |
|
| 159 |
onChange={() => setType(typeRadio === 'holiday' ? 'sickday' : 'holiday')}
|
|
| 160 |
type="radio" id="holiday" name="radiobutton" value="holiday" |
|
| 161 |
/> |
|
| 162 |
<label for="holiday">Extra Holiday</label> |
|
| 122 |
<FullCalendar |
|
| 123 |
defaultView="dayGridMonth" |
|
| 124 |
plugins={[dayGridPlugin, interactionPlugin]}
|
|
| 125 |
dateClick={function(info) {
|
|
| 126 |
setOpen(info.dateStr > today); |
|
| 127 |
setDate(info.dateStr); |
|
| 128 |
setWhatTime(DEFAULT_MANDAY_HOURS); |
|
| 129 |
}} |
|
| 130 |
events={[
|
|
| 131 |
...props.acceptedRequest, |
|
| 132 |
]}/> |
|
| 133 |
|
|
| 134 |
<Popup |
|
| 135 |
open={isOpen}
|
|
| 136 |
position="right center" |
|
| 137 |
modal |
|
| 138 |
closeOnDocumentClick |
|
| 139 |
onClose={() => setOpen(false)}
|
|
| 140 |
> |
|
| 141 |
<div className="calendar-form"> |
|
| 142 |
<form onSubmit={props.currentUser !== undefined && props.currentUser.role === 'EMPLOYER' ? (e) => addEventAdmin(e) : (e) => addEvent(e)}>
|
|
| 143 |
<h2>Choose vacation type</h2> |
|
| 144 |
<div className="calendar-radio"> |
|
| 145 |
<input checked={typeRadio === 'sickday' ? 'checked' : null}
|
|
| 146 |
onChange={() => setType(typeRadio === 'holiday' ? 'sickday' : 'holiday')}
|
|
| 147 |
type="radio" id="sickday" name="radiobutton" value="sickday" |
|
| 148 |
/> |
|
| 149 |
<label htmlFor="sickday">Sickday</label> |
|
| 150 |
</div> |
|
| 151 |
<div className="calendar-radio"> |
|
| 152 |
<input checked={typeRadio === 'holiday' ? 'checked' : null}
|
|
| 153 |
onChange={() => setType(typeRadio === 'holiday' ? 'sickday' : 'holiday')}
|
|
| 154 |
type="radio" id="holiday" name="radiobutton" value="holiday" |
|
| 155 |
/> |
|
| 156 |
<label htmlFor="holiday">Extra Holiday</label> |
|
| 157 |
</div> |
|
| 158 |
<div> |
|
| 159 |
{typeRadio === 'holiday' ? <h4>Date & Hours</h4> : <h4>Date</h4>}
|
|
| 160 |
<div className="row calendarInputs"> |
|
| 161 |
<input |
|
| 162 |
className="date-input" |
|
| 163 |
type='date' onChange={(e) => setDate(e.target.value)}
|
|
| 164 |
value={whatDate} min={today}
|
|
| 165 |
/> |
|
| 166 |
{typeRadio === 'holiday' ? (
|
|
| 167 |
<input |
|
| 168 |
className="input-time" |
|
| 169 |
step={0.5}
|
|
| 170 |
min={0.5}
|
|
| 171 |
max={7.5}
|
|
| 172 |
type="number" |
|
| 173 |
onChange={(e) => setWhatTime(e.target.value)}
|
|
| 174 |
required |
|
| 175 |
value={whatTime}/>
|
|
| 176 |
) : null} |
|
| 177 |
</div> |
|
| 178 |
</div> |
|
| 179 |
<button className="btn btn-submit" type="submit">Request vacation</button> |
|
| 180 |
</form> |
|
| 163 | 181 |
</div> |
| 164 |
<div> |
|
| 165 |
{typeRadio === 'holiday' ? <h4>Date & Hours</h4> : <h4>Date</h4>}
|
|
| 166 |
<div className="row calendarInputs"> |
|
| 167 |
<input |
|
| 168 |
className="date-input" |
|
| 169 |
type='date' onChange={(e) => setDate(e.target.value)}
|
|
| 170 |
value={whatDate} min={today}
|
|
| 171 |
/> |
|
| 172 |
{typeRadio === 'holiday' ?
|
|
| 173 |
<input |
|
| 174 |
className="input-time" |
|
| 175 |
step={0.5}
|
|
| 176 |
min={0.5}
|
|
| 177 |
max={7.5}
|
|
| 178 |
type="number" |
|
| 179 |
onChange={(e) => setWhatTime(e.target.value)}
|
|
| 180 |
required |
|
| 181 |
value={whatTime}
|
|
| 182 |
/> : null} |
|
| 183 |
</div> |
|
| 184 |
</div> |
|
| 185 |
<button className="btn btn-submit" type="submit">Request vacation</button> |
|
| 186 |
</form> |
|
| 187 |
</div> |
|
| 188 |
</Popup> |
|
| 189 |
|
|
| 182 |
</Popup> |
|
| 190 | 183 |
</div> |
| 191 | 184 |
); |
| 192 |
} |
|
| 193 |
|
|
| 194 |
|
|
| 195 |
export default Calendar; |
|
| 185 |
} |
|
Také k dispozici: Unified diff
re #58 massive code formatting