From f414924ba4be0472461d249ff9fd59ce82ce0547 Mon Sep 17 00:00:00 2001 From: Sigrid Elnan Date: Tue, 27 Aug 2024 11:15:02 +0200 Subject: [PATCH 1/4] Very simple confirmation of saved vacation --- frontend/src/components/VacationCalendar.tsx | 143 +++++++++++-------- 1 file changed, 82 insertions(+), 61 deletions(-) diff --git a/frontend/src/components/VacationCalendar.tsx b/frontend/src/components/VacationCalendar.tsx index 65d061d2..64d7c665 100644 --- a/frontend/src/components/VacationCalendar.tsx +++ b/frontend/src/components/VacationCalendar.tsx @@ -20,6 +20,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) { @@ -40,7 +42,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 ( @@ -49,7 +54,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); @@ -70,6 +78,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`); } } @@ -88,6 +97,9 @@ 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`, + ); } } @@ -122,67 +134,76 @@ export default function VacationCalendar({ -
-

{consultant.name}

-

{consultant.department.name}

-

- { - //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"); +
+
+

{consultant.name}

+

{consultant.department.name}

+

+ { + //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() - }`, + 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 }, - }; - }} - /> + 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 }, + }; + }} + /> +
+

+ {savedMessage} +

); From cba52651e248fc15f2ec510466db569eb700abca Mon Sep 17 00:00:00 2001 From: Sigrid Elnan Date: Thu, 29 Aug 2024 14:05:16 +0200 Subject: [PATCH 2/4] Try and make calendar code more readable --- frontend/src/components/VacationCalendar.tsx | 69 +++++++++++--------- 1 file changed, 39 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/VacationCalendar.tsx b/frontend/src/components/VacationCalendar.tsx index 64d7c665..b6500308 100644 --- a/frontend/src/components/VacationCalendar.tsx +++ b/frontend/src/components/VacationCalendar.tsx @@ -103,6 +103,39 @@ export default function VacationCalendar({ } } + function checkIfDateIsPublicHoliday(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 checkIfDateIsVacationDayInThePast( + 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 checkIfDateIsWeekend(date: DateObject) { + return [0, 6].includes(date.weekDay.index); + } + + function checkIfDateIsPast(date: DateObject) { + return date.toDate() < new Date(); + } + return (
@@ -138,7 +171,6 @@ export default function VacationCalendar({

{consultant.name}

{consultant.department.name}

-

9 - ? date.month.number.toString() - : "0" + date.month.number.toString() - }-${ - date.day > 9 - ? date.day.toString() - : "0" + date.day.toString() - }`, - ) && - dateCopy.toDate() < new Date() - ) + if (checkIfDateIsVacationDayInThePast(date, dateCopy)) return { disabled: true, style: { @@ -176,24 +194,15 @@ export default function VacationCalendar({ 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() - }`, - ) - ) + else if (checkIfDateIsPublicHoliday(date)) return { disabled: true, style: { color: "#B91456", opacity: 0.5 }, }; - else if (isWeekend || dateCopy.toDate() < new Date()) + else if ( + checkIfDateIsWeekend(date) || + checkIfDateIsPast(dateCopy) + ) return { disabled: true, style: { color: "#00445B", opacity: 0.5 }, From ea69a5f7cc5c0e9054e87af13941ec0b2f4e69b6 Mon Sep 17 00:00:00 2001 From: Sigrid Elnan Date: Thu, 29 Aug 2024 15:05:52 +0200 Subject: [PATCH 3/4] map to its own function --- frontend/src/components/VacationCalendar.tsx | 56 ++++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/frontend/src/components/VacationCalendar.tsx b/frontend/src/components/VacationCalendar.tsx index b6500308..b4587b4e 100644 --- a/frontend/src/components/VacationCalendar.tsx +++ b/frontend/src/components/VacationCalendar.tsx @@ -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, @@ -136,6 +137,32 @@ export default function VacationCalendar({ 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 (checkIfDateIsVacationDayInThePast(date, dateCopy)) + return { + disabled: true, + style: { + color: "#00445B", + opacity: 0.5, + backgroundColor: "#C8EEFB", + }, + }; + else if (checkIfDateIsPublicHoliday(date)) + return { + disabled: true, + style: { color: "#B91456", opacity: 0.5 }, + }; + else if (checkIfDateIsWeekend(date) || checkIfDateIsPast(dateCopy)) + return { + disabled: true, + style: { color: "#00445B", opacity: 0.5 }, + }; + } + return (
@@ -180,34 +207,7 @@ export default function VacationCalendar({ 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"); - - if (checkIfDateIsVacationDayInThePast(date, dateCopy)) - return { - disabled: true, - style: { - color: "#00445B", - opacity: 0.5, - backgroundColor: "#C8EEFB", - }, - }; - else if (checkIfDateIsPublicHoliday(date)) - return { - disabled: true, - style: { color: "#B91456", opacity: 0.5 }, - }; - else if ( - checkIfDateIsWeekend(date) || - checkIfDateIsPast(dateCopy) - ) - return { - disabled: true, - style: { color: "#00445B", opacity: 0.5 }, - }; - }} + mapDays={({ date }) => mapDayToStyling(date)} />

From 9b1be686a020ff453f956de077bd233f78f6e1b8 Mon Sep 17 00:00:00 2001 From: Sigrid Elnan Date: Thu, 29 Aug 2024 15:08:28 +0200 Subject: [PATCH 4/4] remove "checkIf" --- frontend/src/components/VacationCalendar.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/VacationCalendar.tsx b/frontend/src/components/VacationCalendar.tsx index b4587b4e..fec8f964 100644 --- a/frontend/src/components/VacationCalendar.tsx +++ b/frontend/src/components/VacationCalendar.tsx @@ -104,7 +104,7 @@ export default function VacationCalendar({ } } - function checkIfDateIsPublicHoliday(date: DateObject) { + function dateIsPublicHoliday(date: DateObject) { return publicHolidays.includes( `${date.year.toString()}-${ date.month.number > 9 @@ -114,10 +114,7 @@ export default function VacationCalendar({ ); } - function checkIfDateIsVacationDayInThePast( - date: DateObject, - dateCopy: DateObject, - ) { + function dateIsVacationDayInThePast(date: DateObject, dateCopy: DateObject) { return ( vacationDays.vacationDays?.includes( `${date.year.toString()}-${ @@ -129,11 +126,11 @@ export default function VacationCalendar({ ); } - function checkIfDateIsWeekend(date: DateObject) { + function dateIsWeekend(date: DateObject) { return [0, 6].includes(date.weekDay.index); } - function checkIfDateIsPast(date: DateObject) { + function dateIsPast(date: DateObject) { return date.toDate() < new Date(); } @@ -142,7 +139,7 @@ export default function VacationCalendar({ const dateCopy = new DateObject(date); dateCopy.add(1, "h"); - if (checkIfDateIsVacationDayInThePast(date, dateCopy)) + if (dateIsVacationDayInThePast(date, dateCopy)) return { disabled: true, style: { @@ -151,12 +148,12 @@ export default function VacationCalendar({ backgroundColor: "#C8EEFB", }, }; - else if (checkIfDateIsPublicHoliday(date)) + else if (dateIsPublicHoliday(date)) return { disabled: true, style: { color: "#B91456", opacity: 0.5 }, }; - else if (checkIfDateIsWeekend(date) || checkIfDateIsPast(dateCopy)) + else if (dateIsWeekend(date) || dateIsPast(dateCopy)) return { disabled: true, style: { color: "#00445B", opacity: 0.5 },