Make cells equal again (#277)

varianter · Nov 13, 2023 · c3d1e46 · c3d1e46
1 parent 82fe117
commit c3d1e46
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 16 deletions.
diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
@@ -158,6 +158,24 @@ function WeekCell(props: {
     columnCount,
   } = props;
 
+  let pillNumber = 0;
+
+  if (bookedHoursPerWeek.bookingModel.totalOffered > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalOverbooking > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalPlannedAbstences > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalVacationHours > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalSellableTime > 0) {
+    pillNumber++;
+  }
+
   return (
     <td key={bookedHoursPerWeek.weekNumber} className="h-[52px] px-0.5">
       <div
@@ -180,7 +198,7 @@ function WeekCell(props: {
           {bookedHoursPerWeek.bookingModel.totalOffered > 0 && (
             <InfoPill
               text={bookedHoursPerWeek.bookingModel.totalOffered.toFixed(1)}
-              colors="bg-offer_light text-offer_dark"
+              colors="bg-offer_light text-offer_dark border-offer_dark"
               icon={<FileText size="12" />}
               variant={getInfopillVariantByColumnCount(columnCount)}
             />
@@ -191,7 +209,7 @@ function WeekCell(props: {
                 text={bookedHoursPerWeek.bookingModel.totalSellableTime.toFixed(
                   1,
                 )}
-                colors="bg-free_light text-free_dark"
+                colors="bg-free_light text-free_dark border-free_dark"
                 icon={<Coffee size="12" />}
                 variant={getInfopillVariantByColumnCount(columnCount)}
               />
@@ -201,15 +219,15 @@ function WeekCell(props: {
               text={bookedHoursPerWeek.bookingModel.totalVacationHours.toFixed(
                 1,
               )}
-              colors="bg-vacation_light text-vacation_dark"
+              colors="bg-vacation_light text-vacation_dark border-vacation_dark"
               icon={<Sun size="12" />}
               variant={getInfopillVariantByColumnCount(columnCount)}
             />
           )}
           {bookedHoursPerWeek.bookingModel.totalOverbooking > 0 && (
             <InfoPill
               text={bookedHoursPerWeek.bookingModel.totalOverbooking.toFixed(1)}
-              colors="bg-overbooking_dark text-overbooking_light"
+              colors="bg-overbooking_dark text-overbooking_light border-overbooking_light"
               icon={<AlertTriangle size="12" />}
               variant={getInfopillVariantByColumnCount(columnCount)}
             />
@@ -235,7 +253,7 @@ function HoveredWeek(props: {
   const { hoveredRowWeek, bookedHoursPerWeek, consultant } = props;
   return (
     <div
-      className={`absolute bottom-full left-1/2 -translate-x-1/2 flex flex-col items-center ${
+      className={`absolute bottom-full left-1/2 -translate-x-1/2 flex flex-col items-center z-20 ${
         (hoveredRowWeek != bookedHoursPerWeek.weekNumber ||
           consultant.detailedBooking
             .map((d) =>

diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
@@ -4,17 +4,28 @@ import ActiveFilters from "./ActiveFilters";
 import WeekSelection from "@/components/WeekSelection";
 import { isCurrentWeek } from "@/hooks/staffing/dateTools";
 import { useConsultantsFilter } from "@/hooks/staffing/useConsultantsFilter";
+import { useUrlRouteFilter } from "@/hooks/staffing/useUrlRouteFilter";
 
 export default function FilteredConsultantList() {
   const { filteredConsultants } = useConsultantsFilter();
 
+  const { weekSpan } = useUrlRouteFilter();
+
   return (
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-6">
         <ActiveFilters />
         <WeekSelection />
       </div>
-      <table className="min-w-full table-fixed">
+      <table
+        className={`w-full ${
+          weekSpan > 23
+            ? "min-w-[1400px]"
+            : weekSpan > 11
+            ? "min-w-[850px]"
+            : "min-w-[700px]"
+        } table-fixed`}
+      >
         <colgroup>
           <col span={1} className="w-14" />
           <col span={1} className="w-[190px]" />
@@ -23,8 +34,8 @@ export default function FilteredConsultantList() {
             ?.bookings?.map((booking, index) => <col key={index} span={1} />)}
         </colgroup>
         <thead>
-          <tr>
-            <th colSpan={2}>
+          <tr className="sticky -top-6 bg-white z-10">
+            <th colSpan={2} className="pt-3 pl-2 -left-2 relative bg-white">
               <div className="flex flex-row gap-3 pb-4 items-center">
                 <p className="body-large-bold ">Konsulenter</p>
                 <p className="text-primary_default body-small-bold rounded-full bg-primary_l3 px-2 py-1">
@@ -35,7 +46,7 @@ export default function FilteredConsultantList() {
             {filteredConsultants.at(0)?.bookings?.map((booking) => (
               <th
                 key={booking.weekNumber}
-                className="m-2 px-2 py-1 gap-1 justify-items-end"
+                className="m-2 px-2 py-1 pt-3 gap-1 justify-items-end"
               >
                 {isCurrentWeek(booking.weekNumber, booking.year) ? (
                   <div className="flex flex-row gap-2 items-center justify-end">

diff --git a/frontend/src/components/InfoPill.tsx b/frontend/src/components/InfoPill.tsx
@@ -7,7 +7,7 @@ export type InfoPillProps = {
   variant: InfoPillVariant;
 };
 
-export type InfoPillVariant = "wide" | "medium" | "narrow" | "none";
+export type InfoPillVariant = "wide" | "medium" | "narrow" | "circle" | "none";
 
 export default function InfoPill({
   text,
@@ -18,11 +18,22 @@ export default function InfoPill({
   return variant == "none" ? (
     <></>
   ) : (
-    <div
-      className={`flex flex-row gap-0.5 detail-pill-text p-0.5 items-center w-fit h-4 rounded-sm ${colors}`}
-    >
-      {(variant == "wide" || variant == "narrow") && icon}
-      {(variant == "wide" || variant == "medium") && <p>{text}</p>}
-    </div>
+    <>
+      <div
+        className={`h-2 w-2 rounded-full border mb-1 ${colors} ${
+          variant != "circle" && "hidden"
+        }`}
+      />
+      <div
+        className={`flex flex-row gap-0.5 detail-pill-text p-0.5 items-center h-4 rounded-sm ${colors} ${
+          variant == "circle" && "hidden"
+        }`}
+      >
+        {(variant == "wide" || variant == "narrow") && icon}
+        {(variant == "wide" || variant == "medium") && (
+          <p className="hidden lg:flex">{text}</p>
+        )}
+      </div>
+    </>
   );
 }