Show detailed booking on hover

varianter · Nov 8, 2023 · a07b214 · a07b214
1 parent 4040de8
commit a07b214
Showing 1 changed file with 54 additions and 16 deletions.
diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
@@ -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,56 @@ 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.length == 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) => (
+                    <div
+                      key={index}
+                      className={`flex flex-row gap-2 justify-between items-center ${
+                        index < consultant.detailedBooking.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) =>
+                            String(hour.week).includes(String(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 +147,6 @@ export default function ConsultantRows({
                   />
                 )}
               </div>
-
               <p
                 className={`text-right ${
                   isListElementVisible ? "body-bold" : "body"
@@ -132,9 +170,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 +246,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 <></>;
   }