Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make cells equal again #277

Merged
merged 5 commits into from
Nov 13, 2023
Merged

Make cells equal again #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cf5855b
make them equal
sigridge Nov 9, 2023
2c261b8
Merge remote-tracking branch 'origin/main' into make-cells-equal-again
sigridge Nov 9, 2023
e36faf8
Make thead sticky
sigridge Nov 10, 2023
2d36c3b
Merge branch 'main' into make-cells-equal-again
sigridge Nov 10, 2023
ebce71d
Change min-width on table based on number of cells
sigridge Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 23 additions & 5 deletions frontend/src/components/ConsultantRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] p-0.5">
<div
Expand All @@ -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)}
/>
Expand All @@ -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)}
/>
Expand All @@ -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)}
/>
Expand All @@ -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) =>
Expand Down
19 changes: 15 additions & 4 deletions frontend/src/components/FilteredConsultantsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-4">
<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]" />
Expand All @@ -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">
Expand All @@ -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">
Expand Down
25 changes: 18 additions & 7 deletions frontend/src/components/InfoPill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
</>
);
}
Loading