Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Very simple confirmation of saved vacation #521

Merged
merged 4 commits into from
Aug 29, 2024
Merged

Very simple confirmation of saved vacation #521

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f414924
Very simple confirmation of saved vacation
sigridge Aug 27, 2024
cba5265
Try and make calendar code more readable
sigridge Aug 29, 2024
ea69a5f
map to its own function
sigridge Aug 29, 2024
9b1be68
remove "checkIf"
sigridge Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 90 additions & 63 deletions frontend/src/components/VacationCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { useState } from "react";
import type { Value } from "react-multi-date-picker";
import { Calendar, DateObject } from "react-multi-date-picker";
import InfoBox from "./InfoBox";
import { map } from "lodash";

export default function VacationCalendar({
consultant,
Expand All @@ -20,6 +21,8 @@ export default function VacationCalendar({
vacationDays.vacationDays?.map((date) => new DateObject(date)) ?? [],
);
const [vacationInformation, setVacationInformation] = useState(vacationDays);
const [savedMessage, setSavedMessage] = useState("");

const today = new DateObject();

function handleChange(e: Value) {
Expand All @@ -40,7 +43,10 @@ export default function VacationCalendar({
) {
const newDates = dates.filter((item) => valueDates.indexOf(item) < 0);
addVacationDay(newDates[0]).then((res) => {
if (res) setVacationInformation({ ...res });
if (res) {
setSavedMessage(`Ferie ${newDates[0]} ble lagret`);
setVacationInformation({ ...res });
}
});
}
if (
Expand All @@ -49,7 +55,10 @@ export default function VacationCalendar({
) {
const removeDates = valueDates.filter((item) => dates.indexOf(item) < 0);
removeVacationDay(removeDates[0]).then((res) => {
if (res) setVacationInformation({ ...res });
if (res) {
setSavedMessage(`Ferie ${removeDates[0]} ble fjernet`);
setVacationInformation({ ...res });
}
});
}
setValue(e);
Expand All @@ -70,6 +79,7 @@ export default function VacationCalendar({
return (await data.json()) as VacationReadModel;
} catch (e) {
console.error("Error updating staffing", e);
setSavedMessage(`Noe gikk galt og ferien ${vacationDay} ble ikke lagret`);
}
}

Expand All @@ -88,9 +98,68 @@ export default function VacationCalendar({
return (await data.json()) as VacationReadModel;
} catch (e) {
console.error("Error updating staffing", e);
setSavedMessage(
`Noe gikk galt og fjerningen av ${vacationDay} ble ikke lagret`,
);
}
}

function dateIsPublicHoliday(date: DateObject) {
return publicHolidays.includes(
`${date.year.toString()}-${
date.month.number > 9
? date.month.number.toString()
: "0" + date.month.number.toString()
}-${date.day > 9 ? date.day.toString() : "0" + date.day.toString()}`,
);
}

function dateIsVacationDayInThePast(date: DateObject, dateCopy: DateObject) {
return (
vacationDays.vacationDays?.includes(
`${date.year.toString()}-${
date.month.number > 9
? date.month.number.toString()
: "0" + date.month.number.toString()
}-${date.day > 9 ? date.day.toString() : "0" + date.day.toString()}`,
) && dateCopy.toDate() < new Date()
);
}

function dateIsWeekend(date: DateObject) {
return [0, 6].includes(date.weekDay.index);
}

function dateIsPast(date: DateObject) {
return date.toDate() < new Date();
}

function mapDayToStyling(date: DateObject) {
//Since the date object is created before the today object, an extra hour is added to a copied version of the date object to ensure that you can edit today
const dateCopy = new DateObject(date);
dateCopy.add(1, "h");

if (dateIsVacationDayInThePast(date, dateCopy))
return {
disabled: true,
style: {
color: "#00445B",
opacity: 0.5,
backgroundColor: "#C8EEFB",
},
};
else if (dateIsPublicHoliday(date))
return {
disabled: true,
style: { color: "#B91456", opacity: 0.5 },
};
else if (dateIsWeekend(date) || dateIsPast(dateCopy))
return {
disabled: true,
style: { color: "#00445B", opacity: 0.5 },
};
}

return (
<div className="flex flex-row">
<div className="sidebar z-10">
Expand Down Expand Up @@ -122,67 +191,25 @@ export default function VacationCalendar({
</div>
</div>

<div className="flex flex-col justify-center m-4">
<h1 className="text-black">{consultant.name}</h1>
<p className="normal text-black">{consultant.department.name}</p>
<p></p>
<Calendar
multiple
fullYear
weekStartDayIndex={1}
displayWeekNumbers
currentDate={today}
value={value}
onChange={handleChange}
className="custom-calendar"
mapDays={({ date }) => {
//Since the date object is created before the today object, an extra hour is added to a copied version of the date object to ensure that you can edit today
const dateCopy = new DateObject(date);
dateCopy.add(1, "h");

let isWeekend = [0, 6].includes(date.weekDay.index);
if (
vacationDays.vacationDays?.includes(
`${date.year.toString()}-${
date.month.number > 9
? date.month.number.toString()
: "0" + date.month.number.toString()
}-${
date.day > 9 ? date.day.toString() : "0" + date.day.toString()
}`,
) &&
dateCopy.toDate() < new Date()
)
return {
disabled: true,
style: {
color: "#00445B",
opacity: 0.5,
backgroundColor: "#C8EEFB",
},
};
else if (
publicHolidays.includes(
`${date.year.toString()}-${
date.month.number > 9
? date.month.number.toString()
: "0" + date.month.number.toString()
}-${
date.day > 9 ? date.day.toString() : "0" + date.day.toString()
}`,
)
)
return {
disabled: true,
style: { color: "#B91456", opacity: 0.5 },
};
else if (isWeekend || dateCopy.toDate() < new Date())
return {
disabled: true,
style: { color: "#00445B", opacity: 0.5 },
};
}}
/>
<div className="flex flex-row gap-3 w-full">
<div className="flex flex-col justify-center m-4">
<h1 className="text-black">{consultant.name}</h1>
<p className="normal text-black">{consultant.department.name}</p>
<Calendar
multiple
fullYear
weekStartDayIndex={1}
displayWeekNumbers
currentDate={today}
value={value}
onChange={handleChange}
className="custom-calendar"
mapDays={({ date }) => mapDayToStyling(date)}
/>
</div>
<p className="absolute right-1 p-4 hidden lg:flex normal-semibold">
{savedMessage}
</p>
</div>
</div>
);
Expand Down
Loading