bugfix: overlapped appointments now made possible. selection popup added for overlapped banners.
This commit is contained in:
@@ -1,8 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
|
||||
import { formatHourLabel } from '@/lib/appointmentTime';
|
||||
import {
|
||||
computeAppointmentLaneLayouts,
|
||||
findOverlapCluster,
|
||||
lanePositionStyles,
|
||||
} from '@/lib/appointmentOverlapLayout';
|
||||
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
|
||||
import { AppointmentOverlapPopover } from '@/components/ui/appointments/AppointmentOverlapPopover';
|
||||
|
||||
const HOUR_PX = 40;
|
||||
const HOURS = Array.from({ length: 24 }, (_, i) => i);
|
||||
@@ -29,6 +36,26 @@ function appointmentDurationMinutes(apt: AppointmentRecord): number {
|
||||
return Math.max(0, Math.round((end - start) / 60_000));
|
||||
}
|
||||
|
||||
function appointmentBannerHeightPx(durationMin: number): number {
|
||||
return (durationMin / (24 * 60)) * HOURS.length * HOUR_PX;
|
||||
}
|
||||
|
||||
function shortBannerNameClass(durationMin: number): string {
|
||||
const heightPx = appointmentBannerHeightPx(durationMin);
|
||||
if (heightPx < 18) {
|
||||
return 'text-[8px] leading-none';
|
||||
}
|
||||
if (durationMin < 60) {
|
||||
return 'text-[9px] leading-none';
|
||||
}
|
||||
return 'text-[11px] leading-tight';
|
||||
}
|
||||
|
||||
type OverlapPopoverState = {
|
||||
appointments: AppointmentRecord[];
|
||||
anchorRect: DOMRect;
|
||||
};
|
||||
|
||||
interface AppointmentScheduleGridProps {
|
||||
day: Date;
|
||||
providers: AppointmentColumnProvider[];
|
||||
@@ -47,6 +74,32 @@ export function AppointmentScheduleGrid({
|
||||
onAppointmentClick,
|
||||
}: AppointmentScheduleGridProps) {
|
||||
const gridHeight = HOURS.length * HOUR_PX;
|
||||
const [overlapPopover, setOverlapPopover] = useState<OverlapPopoverState | null>(null);
|
||||
|
||||
const laneLayoutsByProvider = useMemo(() => {
|
||||
const map = new Map<string, ReturnType<typeof computeAppointmentLaneLayouts>>();
|
||||
for (const provider of providers) {
|
||||
const providerApts = appointments.filter((a) => a.providerUserId === provider.userId);
|
||||
map.set(provider.userId, computeAppointmentLaneLayouts(providerApts));
|
||||
}
|
||||
return map;
|
||||
}, [appointments, providers]);
|
||||
|
||||
function handleAppointmentBannerClick(
|
||||
apt: AppointmentRecord,
|
||||
providerAppointments: AppointmentRecord[],
|
||||
anchor: HTMLElement,
|
||||
) {
|
||||
const cluster = findOverlapCluster(apt.id, providerAppointments);
|
||||
if (cluster.length > 1) {
|
||||
setOverlapPopover({
|
||||
appointments: cluster,
|
||||
anchorRect: anchor.getBoundingClientRect(),
|
||||
});
|
||||
return;
|
||||
}
|
||||
onAppointmentClick?.(apt);
|
||||
}
|
||||
|
||||
if (providers.length === 0) {
|
||||
return (
|
||||
@@ -57,93 +110,145 @@ export function AppointmentScheduleGrid({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="surface-card overflow-x-auto">
|
||||
<div className="min-w-[640px]">
|
||||
<div className="flex border-b border-border">
|
||||
<div className="w-14 flex-shrink-0" />
|
||||
{providers.map((p) => (
|
||||
<div
|
||||
key={p.userId}
|
||||
className="flex-1 min-w-[130px] text-center text-sm font-medium text-text-primary py-2.5 px-1 border-l border-border"
|
||||
>
|
||||
{p.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<div className="w-14 flex-shrink-0 border-r border-border bg-background-secondary/40">
|
||||
{HOURS.map((h) => (
|
||||
<div
|
||||
key={h}
|
||||
className="text-[11px] text-text-muted flex items-start justify-end pr-1.5 pt-0.5 border-b border-border/50"
|
||||
style={{ height: HOUR_PX }}
|
||||
>
|
||||
{formatHourLabel(h)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex min-w-0">
|
||||
<>
|
||||
<div className="surface-card overflow-x-auto">
|
||||
<div className="min-w-[640px]">
|
||||
<div className="flex border-b border-border">
|
||||
<div className="w-14 flex-shrink-0" />
|
||||
{providers.map((p) => (
|
||||
<div
|
||||
key={p.userId}
|
||||
className="flex-1 min-w-[130px] border-l border-border relative"
|
||||
style={{ height: gridHeight }}
|
||||
className="flex-1 min-w-[130px] text-center text-sm font-medium text-text-primary py-2.5 px-1 border-l border-border"
|
||||
>
|
||||
{HOURS.map((h) => {
|
||||
const slotDisabled = !canBook;
|
||||
return (
|
||||
<button
|
||||
key={h}
|
||||
type="button"
|
||||
disabled={slotDisabled}
|
||||
title={
|
||||
slotDisabled ? 'You cannot create appointments' : `Book ${formatHourLabel(h)}`
|
||||
}
|
||||
className={`absolute left-0 right-0 border-b border-border/50 transition-colors ${
|
||||
slotDisabled
|
||||
? 'cursor-not-allowed opacity-50'
|
||||
: 'hover:bg-primary/8 cursor-pointer'
|
||||
}`}
|
||||
style={{ top: h * HOUR_PX, height: HOUR_PX }}
|
||||
onClick={() => onSlotClick(h, p.userId, p.name)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{appointments
|
||||
.filter((a) => a.providerUserId === p.userId)
|
||||
.map((apt) => {
|
||||
const pos = layoutBlock(apt, day);
|
||||
if (!pos) {
|
||||
return null;
|
||||
}
|
||||
const durationMin = appointmentDurationMinutes(apt);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={apt.id}
|
||||
onClick={() => onAppointmentClick?.(apt)}
|
||||
className={`absolute left-0.5 right-0.5 min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex flex-col justify-start px-1.5 py-0.5 text-left ${purposeStyle(apt.purpose)} focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35`}
|
||||
style={{ top: pos.top, height: pos.height }}
|
||||
>
|
||||
<p className="text-[11px] font-medium leading-tight truncate pointer-events-none">
|
||||
{apt.patient.firstName} {apt.patient.lastName}
|
||||
</p>
|
||||
{durationMin >= 30 && apt.patient.phone && (
|
||||
<p className="text-[10px] opacity-90 truncate pointer-events-none">
|
||||
{apt.patient.phone}
|
||||
</p>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{p.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<div className="w-14 flex-shrink-0 border-r border-border bg-background-secondary/40">
|
||||
{HOURS.map((h) => (
|
||||
<div
|
||||
key={h}
|
||||
className="text-[11px] text-text-muted flex items-start justify-end pr-1.5 pt-0.5 border-b border-border/50"
|
||||
style={{ height: HOUR_PX }}
|
||||
>
|
||||
{formatHourLabel(h)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex min-w-0">
|
||||
{providers.map((p) => {
|
||||
const providerAppointments = appointments.filter(
|
||||
(a) => a.providerUserId === p.userId,
|
||||
);
|
||||
const laneLayouts = laneLayoutsByProvider.get(p.userId) ?? new Map();
|
||||
|
||||
return (
|
||||
<div
|
||||
key={p.userId}
|
||||
className="flex-1 min-w-[130px] border-l border-border relative"
|
||||
style={{ height: gridHeight }}
|
||||
>
|
||||
{HOURS.map((h) => {
|
||||
const slotDisabled = !canBook;
|
||||
return (
|
||||
<button
|
||||
key={h}
|
||||
type="button"
|
||||
disabled={slotDisabled}
|
||||
title={
|
||||
slotDisabled
|
||||
? 'You cannot create appointments'
|
||||
: `Book ${formatHourLabel(h)}`
|
||||
}
|
||||
className={`absolute left-0 right-0 border-b border-border/50 transition-colors ${
|
||||
slotDisabled
|
||||
? 'cursor-not-allowed opacity-50'
|
||||
: 'hover:bg-primary/8 cursor-pointer'
|
||||
}`}
|
||||
style={{ top: h * HOUR_PX, height: HOUR_PX }}
|
||||
onClick={() => onSlotClick(h, p.userId, p.name)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{providerAppointments.map((apt) => {
|
||||
const pos = layoutBlock(apt, day);
|
||||
if (!pos) {
|
||||
return null;
|
||||
}
|
||||
const lane = laneLayouts.get(apt.id) ?? { lane: 0, laneCount: 1 };
|
||||
const lanePos = lanePositionStyles(lane.lane, lane.laneCount);
|
||||
const durationMin = appointmentDurationMinutes(apt);
|
||||
const clusterSize = findOverlapCluster(apt.id, providerAppointments).length;
|
||||
const isUnderOneHour = durationMin < 60;
|
||||
const patientName = `${apt.patient.firstName} ${apt.patient.lastName}`;
|
||||
const bannerTitle = [
|
||||
patientName,
|
||||
clusterSize > 1 ? `${clusterSize} overlapping — click to choose` : null,
|
||||
!isUnderOneHour && apt.patient.phone ? apt.patient.phone : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' · ');
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={apt.id}
|
||||
onClick={(e) =>
|
||||
handleAppointmentBannerClick(apt, providerAppointments, e.currentTarget)
|
||||
}
|
||||
className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-left ${purposeStyle(apt.purpose)} focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
|
||||
isUnderOneHour
|
||||
? 'items-center justify-center px-0.5 py-0'
|
||||
: 'flex-col justify-start gap-0.5 px-1 py-0.5'
|
||||
}`}
|
||||
style={{
|
||||
top: pos.top,
|
||||
height: pos.height,
|
||||
left: lanePos.left,
|
||||
width: lanePos.width,
|
||||
}}
|
||||
title={bannerTitle}
|
||||
>
|
||||
<span
|
||||
className={`block w-full truncate pointer-events-none font-medium ${shortBannerNameClass(durationMin)}`}
|
||||
>
|
||||
{patientName}
|
||||
</span>
|
||||
{!isUnderOneHour &&
|
||||
apt.patient.phone &&
|
||||
lane.laneCount === 1 && (
|
||||
<span className="block w-full truncate pointer-events-none text-[10px] leading-tight opacity-90">
|
||||
{apt.patient.phone}
|
||||
</span>
|
||||
)}
|
||||
{!isUnderOneHour && clusterSize > 1 && (
|
||||
<span className="block w-full truncate pointer-events-none text-[9px] leading-tight opacity-75">
|
||||
{clusterSize} overlapping
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{overlapPopover && (
|
||||
<AppointmentOverlapPopover
|
||||
appointments={overlapPopover.appointments}
|
||||
anchorRect={overlapPopover.anchorRect}
|
||||
onSelect={(apt) => onAppointmentClick?.(apt)}
|
||||
onClose={() => setOverlapPopover(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user