228 hover bookings (#262)

Co-authored-by: Sigrid Elnan <[email protected]>
varianter · Nov 8, 2023 · 8883cc5 · 8883cc5
1 parent e1540f3
commit 8883cc5
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 18 deletions.
diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { BookingType, Consultant } from "@/types";
+import { BookingType, Consultant, DetailedBooking } from "@/types";
 import { ReactElement, useState } from "react";
 import {
   AlertTriangle,
@@ -12,17 +12,14 @@ import {
 } from "react-feather";
 import InfoPill from "./InfoPill";
 
-interface ConsultantListElementProps {
-  consultant: Consultant;
-}
-
 export default function ConsultantRows({
   consultant,
 }: {
   consultant: Consultant;
 }) {
   const [isListElementVisible, setIsListElementVisible] = useState(false);
-  const [isButtonHovered, setIsButtonHovered] = useState(false);
+  const [isRowHovered, setIsRowHovered] = useState(false);
+  const [hoveredRowWeek, setHoveredRowWeek] = useState(-1);
 
   function toggleListElementVisibility() {
     setIsListElementVisible(!isListElementVisible);
@@ -32,14 +29,14 @@ export default function ConsultantRows({
     <>
       <tr
         className="h-[52px]"
-        onMouseEnter={() => setIsButtonHovered(true)}
-        onMouseLeave={() => setIsButtonHovered(false)}
+        onMouseEnter={() => setIsRowHovered(true)}
+        onMouseLeave={() => setIsRowHovered(false)}
       >
         <td
           className={`border-l-2 ${
             isListElementVisible
               ? "border-l-secondary_default"
-              : isButtonHovered
+              : isRowHovered
               ? "border-l-primary_default"
               : "border-l-primary_l4"
           } `}
@@ -70,14 +67,74 @@ export default function ConsultantRows({
         {consultant.bookings?.map((b) => (
           <td key={b.weekNumber} className="h-[52px] p-0.5">
             <div
-              className={`flex flex-col gap-1 p-2 justify-end rounded w-full h-full  ${
+              className={`flex flex-col gap-1 p-2 justify-end rounded w-full h-full relative ${
                 b.bookingModel.totalOverbooking > 0
                   ? `bg-black text-white`
                   : b.bookingModel.totalSellableTime > 0
                   ? `bg-semantic_4_l1`
                   : `bg-primary_l5`
               }`}
+              onMouseEnter={() => setHoveredRowWeek(b.weekNumber)}
+              onMouseLeave={() => setHoveredRowWeek(-1)}
             >
+              <div
+                className={`absolute bottom-full left-1/2 -translate-x-1/2 flex flex-col items-center ${
+                  (hoveredRowWeek != b.weekNumber ||
+                    consultant.detailedBooking
+                      .map((d) =>
+                        d.hours
+                          .filter((h) => h.week % 100 == b.weekNumber)
+                          .reduce((sum, h) => sum + h.hours, 0),
+                      )
+                      .reduce((a, b) => a + b, 0) == 0) &&
+                  "hidden"
+                }`}
+              >
+                <div className="rounded-lg bg-white flex flex-col gap-2 min-w-[222px] p-3 shadow-xl">
+                  {consultant.detailedBooking.map((db, index) => (
+                    <>
+                      {db.hours.find((hour) => hour.week % 100 == b.weekNumber)
+                        ?.hours != 0 && (
+                        <div
+                          key={index}
+                          className={`flex flex-row gap-2 justify-between items-center
+                      ${
+                        index <
+                          consultant.detailedBooking.filter(
+                            (db) =>
+                              db.hours.find(
+                                (hour) => hour.week % 100 == b.weekNumber,
+                              )?.hours != 0,
+                          ).length -
+                            1 && "border-b pb-2 border-hover_background"
+                      }`}
+                        >
+                          <div className="flex flex-row gap-2 items-center">
+                            <div
+                              className={`h-8 w-8 flex justify-center align-middle items-center rounded ${getColorByStaffingType(
+                                db.bookingDetails.type,
+                              )}`}
+                            >
+                              {getIconByBookingType(db.bookingDetails.type)}
+                            </div>
+                            <p className="text-black whitespace-nowrap">
+                              {db.bookingDetails.name}
+                            </p>
+                          </div>
+                          <p className="text-black text-opacity-60">
+                            {
+                              db.hours.find(
+                                (hour) => hour.week % 100 == b.weekNumber,
+                              )?.hours
+                            }
+                          </p>
+                        </div>
+                      )}
+                    </>
+                  ))}
+                </div>
+                <div className="w-0 h-0 border-l-[12px] border-l-transparent border-t-[16px] border-t-white border-r-[12px] border-r-transparent"></div>
+              </div>
               <div className="flex flex-row justify-end gap-1">
                 {b.bookingModel.totalOffered > 0 && (
                   <InfoPill
@@ -108,7 +165,6 @@ export default function ConsultantRows({
                   />
                 )}
               </div>
-
               <p
                 className={`text-right ${
                   isListElementVisible ? "body-bold" : "body"
@@ -132,9 +188,9 @@ export default function ConsultantRows({
                 isListElementVisible && "border-l-secondary_default border-l-2"
               }`}
             ></td>
-            <td className="flex flex-row gap-2 justify-start h-[32px]">
+            <td className="flex flex-row gap-2 justify-start h-8">
               <div
-                className={`h-[32px] w-[32px] flex justify-center align-middle items-center rounded ${getColorByStaffingType(
+                className={`h-8 w-8 flex justify-center align-middle items-center rounded ${getColorByStaffingType(
                   db.bookingDetails.type,
                 )}`}
               >
@@ -208,13 +264,13 @@ function getColorByStaffingType(type: BookingType): string {
 function getIconByBookingType(type: BookingType): ReactElement {
   switch (type) {
     case BookingType.Offer:
-      return <FileText size={16} />;
+      return <FileText size={16} className="text-offer_dark" />;
     case BookingType.Booking:
-      return <Briefcase size={16} />;
+      return <Briefcase size={16} className="text-black" />;
     case BookingType.Vacation:
-      return <Sun size={16} />;
+      return <Sun size={16} className="text-vacation_dark" />;
     case BookingType.PlannedAbsence:
-      return <Moon size={16} />;
+      return <Moon size={16} className="text-absence_dark" />;
     default:
       return <></>;
   }

diff --git a/frontend/src/components/InfoPillDescriptions.tsx b/frontend/src/components/InfoPillDescriptions.tsx
@@ -1,9 +1,22 @@
 import InfoPill from "@/components/InfoPill";
-import { AlertTriangle, Calendar, Coffee, FileText, Sun } from "react-feather";
+import {
+  AlertTriangle,
+  Briefcase,
+  Calendar,
+  Coffee,
+  FileText,
+  Moon,
+  Sun,
+} from "react-feather";
 
 export default function InfoPillDescriptions() {
   return (
     <div className="flex flex-row gap-2">
+      <InfoPill
+        text={"Booking"}
+        colors="bg-primary_l5 text-black"
+        icon={<Briefcase size="12" />}
+      />
       <InfoPill
         text={"Ledig tid"}
         colors="bg-free_light text-free_dark"
@@ -29,6 +42,11 @@ export default function InfoPillDescriptions() {
         colors="bg-overbooking_dark text-overbooking_light"
         icon={<AlertTriangle size="12" />}
       />
+      <InfoPill
+        text={"Fravær"}
+        colors="bg-absence_light text-absence_dark"
+        icon={<Moon size="12" />}
+      />
     </div>
   );
 }
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -28,12 +28,14 @@ export default {
       overbooking_dark: "#B91456",
       absence_light: "#9FDFD9",
       absence_dark: "#004C46",
+      hover_background: "#F0EFEF",
       transparent: "transparent",
     },
     extend: {},
     screens,
     boxShadow: {
       md: "0 4px 4px 0 rgba(66, 61, 137, 0.10)",
+      xl: "0px 4px 20px 0px rgba(0, 0, 0, 0.30)",
     },
   },
   plugins: [],