Very simple confirmation of saved vacation (#521)

varianter · Aug 29, 2024 · 34b9613 · 34b9613
1 parent 6963a67
commit 34b9613
Showing 1 changed file with 90 additions and 63 deletions.
diff --git 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,
@@ -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) {
@@ -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 (
@@ -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);
@@ -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`);
     }
   }
 
@@ -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">
@@ -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>
   );