admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

improvement: fdi tooth chart selection modes polished. bugs related to teeth selecyion fixed.

Browse Source
This commit is contained in:
Admin
2026-07-18 00:02:40 +03:30
parent 4b2349228a
commit 0740493384
23 changed files with 384 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/ui/lab/CasesPage.tsx
View File

@@ -38,7 +38,7 @@ import type {
PaginatedLabCases,
} from '@/types/cases';
const PAGE_SIZE = 20;
const PAGE_SIZE = 10;
export function CasesPage() {
const t = useTranslations('cases');
@@ -308,9 +308,9 @@ export function CasesPage() {
<p className="text-sm text-text-muted mt-1">{t('subtitle')}</p>
</div>
<div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr]">
<div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr] lg:items-stretch">
<section
className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 ${
className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 h-full lg:min-h-[420px] ${
mobileDetailOpen && selectedCaseId ? 'hidden lg:flex' : 'flex'
}`}
>
@@ -394,13 +394,13 @@ export function CasesPage() {
</Button>
) : null}
<div className="flex-1 min-h-0">
<div className="flex-1 min-h-0 overflow-y-auto">
{loadingList ? (
<p className="text-sm text-text-muted">{tCommon('loading')}</p>
) : cases.length === 0 ? (
<p className="text-sm text-text-muted">{t('emptyList')}</p>
) : (
<ul className="space-y-2 max-h-[55vh] overflow-y-auto pr-1">
<ul className="space-y-2 pr-1">
{cases.map((item) => {
const isActive = item.id === selectedCaseId;
@@ -466,7 +466,7 @@ export function CasesPage() {
</div>
{pagination.totalPages > 1 ? (
<div className="flex items-center justify-between gap-2 pt-2 border-t border-border">
<div className="flex shrink-0 items-center justify-between gap-2 pt-2 border-t border-border">
<Button
variant="outline"
size="sm"

6
frontend/src/components/ui/lab/LabCaseCommentsPanel.tsx
View File

@@ -208,9 +208,9 @@ export function LabCaseCommentsPanel({
aria-pressed={visibleToClinic}
>
{visibleToClinic ? (
<Eye className="h-4 w-4 text-white stroke-current" />
<Eye className="lucide-on-primary h-4 w-4" color="#fff" />
) : (
<EyeOff className="h-4 w-4 text-white stroke-current" />
<EyeOff className="lucide-on-primary h-4 w-4" color="#fff" />
)}
</button>
) : null}
@@ -222,7 +222,7 @@ export function LabCaseCommentsPanel({
title={t('send')}
aria-label={t('send')}
>
<Send className="h-4 w-4 text-white stroke-current fill-none rtl:-scale-x-100" />
<Send className="lucide-on-primary h-4 w-4 rtl:-scale-x-100" color="#fff" />
</button>
</div>
</div>

13
frontend/src/components/ui/treatment/FdiToothChart.tsx
View File

@@ -23,7 +23,7 @@ interface FdiToothChartProps {
selected: ReadonlySet<FdiToothId>;
/** Teeth that belong to a connected selection span (dots above/below). */
connectedTeeth?: ReadonlySet<FdiToothId>;
onToggle?: (fdi: FdiToothId, event: { shiftKey: boolean; ctrlKey: boolean }) => void;
onToggle?: (fdi: FdiToothId, event: { shiftKey: boolean }) => void;
disabled?: boolean;
/** Non-interactive display (Cases / connection history). */
readOnly?: boolean;
@@ -144,7 +144,7 @@ export function FdiToothChart({
return accent ? { color: accent } : undefined;
};
/** Dots + thin links — only for Shift-connected spans (not plain / Ctrl singles). */
/** Dots + thin links — only for Shift-connected spans (not plain singles). */
const ConnectedRail = ({ teeth, upper }: { teeth: FdiToothId[]; upper?: boolean }) => {
const hasConnected = teeth.some((fdi) => connectedTeeth?.has(fdi));
if (!hasConnected) return null;
@@ -221,15 +221,12 @@ export function FdiToothChart({
type="button"
disabled={isDisabled}
onMouseDown={(e) => {
// Modifier+click otherwise triggers browser text-selection / sticky focus boxes.
if (e.shiftKey || e.ctrlKey || e.metaKey) e.preventDefault();
// Shift+click otherwise triggers browser text-selection / sticky focus boxes.
if (e.shiftKey) e.preventDefault();
}}
onClick={(e) => {
e.preventDefault();
onToggle?.(fdi, {
shiftKey: e.shiftKey,
ctrlKey: e.ctrlKey || e.metaKey,
});
onToggle?.(fdi, { shiftKey: e.shiftKey });
}}
style={{ transform: `translateY(${offsetY}px) rotate(${rotate}deg)` }}
className={`

116
frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
View File

@@ -41,7 +41,6 @@ import {
isLabDependentDetailMissingTeeth,
} from '@/components/treatment/treatmentDetailRules';
import {
applyCtrlRange,
applyShiftRange,
connectedTeethSet,
deriveTeethFromGroups,
@@ -267,6 +266,26 @@ function isDetailsDirty(
return serializeDetails(details) !== savedSnapshot;
}
/** Apply server ids/attachments onto local rows without replacing newer local edits. */
function mergeServerIdsIntoDetails(
local: TreatmentDetailDraft[],
fromServer: TreatmentDetailDraft[],
): TreatmentDetailDraft[] {
const byClientId = new Map(fromServer.map((d) => [d.clientId, d]));
return local.map((d) => {
const s = byClientId.get(d.clientId);
if (!s) return d;
return {
...d,
id: s.id ?? d.id,
labCaseId: s.labCaseId ?? d.labCaseId,
taskProgress: s.taskProgress ?? d.taskProgress,
attachmentMetas:
d.attachmentMetas.length > 0 ? d.attachmentMetas : s.attachmentMetas,
};
});
}
function detailsToPreviewTreatment(
details: TreatmentDetailDraft[],
meta: { title: string; patientId: string; treatmentAt: string; id?: string },
@@ -387,6 +406,8 @@ export function TreatmentWorkspace({
const pendingAppointmentIdRef = useRef<string | null>(initialAppointmentId);
const labPanelRef = useRef<HTMLDivElement>(null);
const historyRequestRef = useRef(0);
/** When set, activeDetailId effect opens this wizard step instead of resetting to teeth. */
const pendingEntryStepRef = useRef<EntryStep | null>(null);
useEffect(() => {
pendingAppointmentIdRef.current = initialAppointmentId;
@@ -613,10 +634,13 @@ export function TreatmentWorkspace({
const chartToothColors = showWholeTreatmentPlan ? wholePlanToothColors : undefined;
// Reset whole-plan overview when switching details.
// Prefer pendingEntryStepRef (e.g. Lab shipments → Lab step) over defaulting to teeth.
useEffect(() => {
setShowWholeTreatmentPlan(false);
rangeAnchorRef.current = null;
setEntryStep('teeth');
const pending = pendingEntryStepRef.current;
pendingEntryStepRef.current = null;
setEntryStep(pending ?? 'teeth');
}, [activeDetailId]);
// Leave Lab step if the active detail is no longer prosthesis / lab-dependent.
@@ -927,24 +951,40 @@ export function TreatmentWorkspace({
),
});
const mapped = response.data.details.map(mapDetailFromApi);
setDetails(mapped);
setActiveDetailId((prev) => {
const stillExists = mapped.some((d) => d.clientId === prev);
return stillExists ? prev : mapped[0]?.clientId ?? prev;
});
setSavedSnapshot(serializeDetails(mapped));
const sentSnapshot = serializeDetails(currentDetails);
const localNow = detailsRef.current;
// If the user changed details while this save was in flight (e.g. removed a
// detail), do not clobber local state with the stale response.
if (serializeDetails(localNow) === sentSnapshot) {
setDetails(mapped);
setActiveDetailId((prev) => {
const stillExists = mapped.some((d) => d.clientId === prev);
return stillExists ? prev : mapped[0]?.clientId ?? prev;
});
setSavedSnapshot(serializeDetails(mapped));
} else {
const merged = mergeServerIdsIntoDetails(localNow, mapped);
detailsRef.current = merged;
setDetails(merged);
setActiveDetailId((prev) => {
const stillExists = merged.some((d) => d.clientId === prev);
return stillExists ? prev : merged[0]?.clientId ?? prev;
});
// Keep dirty so the queued autosave persists the newer local state.
}
return response.data;
},
[selectedAppointment, t],
);
const refreshHistory = useCallback(async (patientId: string) => {
const refreshHistory = useCallback(async (patientId: string, options?: { silentLabCases?: boolean }) => {
const requestId = ++historyRequestRef.current;
try {
const response = await treatmentsApi.listPatientHistory(patientId, 50);
if (requestId !== historyRequestRef.current) return;
setHistory(response.data);
void refreshPatientLabCases(patientId);
void refreshPatientLabCases(patientId, { silent: options?.silentLabCases ?? false });
} catch (error: unknown) {
if (requestId !== historyRequestRef.current) return;
showError(getUserFacingError(error, tErrors, t('errorLoadHistory')));
@@ -1119,10 +1159,16 @@ export function TreatmentWorkspace({
skipNextGetDraftRef.current = true;
draftHydratingRef.current = true;
if (focusDetailClientId && options?.scrollToLabPanel !== false) {
pendingEntryStepRef.current = 'lab';
}
hydrateFromTreatment(treatmentToLoad);
draftHydratingRef.current = false;
if (focusDetailClientId) {
if (options?.scrollToLabPanel !== false) {
pendingEntryStepRef.current = 'lab';
}
setActiveDetailId(focusDetailClientId);
const mappedLabCases = withoutEmptyLabCaseDrafts(
(treatmentToLoad.labCases ?? []).map(mapLabCaseDraftFromApi),
@@ -1187,6 +1233,7 @@ export function TreatmentWorkspace({
(item: LabDispatchAttentionItem) => {
if (item.isCurrentDraft) {
exitBrowse();
pendingEntryStepRef.current = 'lab';
setActiveDetailId(item.detailClientId);
const linked = labCaseDrafts.find(
(lc) => !lc.sentAt && lc.detailClientId === item.detailClientId,
@@ -1268,12 +1315,21 @@ export function TreatmentWorkspace({
workspaceMode === 'live' &&
!isBrowsing
) {
pendingEntryStepRef.current = 'lab';
setActiveDetailId(item.detailClientId);
const matchingDraft = labCaseDrafts.find((lc) => lc.id === item.labCaseId);
if (matchingDraft) {
setActiveLabCaseId(matchingDraft.clientId);
}
setEntryStep('lab');
requestAnimationFrame(() => {
scrollWithinMainScrollContainer(labPanelRef.current);
});
return;
}
await loadTreatmentIntoWorkspace(treatment, item.detailClientId, {
scrollToLabPanel: false,
scrollToLabPanel: true,
});
})();
},
@@ -1284,6 +1340,7 @@ export function TreatmentWorkspace({
history,
historyPanelItems,
isBrowsing,
labCaseDrafts,
loadTreatmentIntoWorkspace,
selectedAppointment?.id,
selectedAppointmentId,
@@ -1456,6 +1513,9 @@ export function TreatmentWorkspace({
? (nextDetails[Math.min(idx, nextDetails.length - 1)]?.clientId ??
nextDetails[0]?.clientId)
: activeDetailId;
// Sync ref before any persist triggered by lab-case cleanup (same tick).
detailsRef.current = nextDetails;
setDetails(nextDetails);
if (nextActive) setActiveDetailId(nextActive);
@@ -1554,6 +1614,9 @@ export function TreatmentWorkspace({
const activeDetail = details.find((d) => d.clientId === activeDetailId);
if (!activeDetail || !isDetailReadyForLabDispatch(activeDetail, labDependentCodes)) return;
if (isLabDependentDetailMissingTeeth(activeDetail, labDependentCodes)) return;
// Already shipped (or locked) — do not create another draft (avoids post-send flicker).
if (isDetailLocked(activeDetail)) return;
if (labCaseDrafts.some((lc) => lc.detailClientId === activeDetailId && lc.sentAt)) return;
const hasDraft = labCaseDrafts.some((lc) => lc.detailClientId === activeDetailId);
if (hasDraft) return;
void handleAddLabCase();
@@ -1563,6 +1626,7 @@ export function TreatmentWorkspace({
details,
entryStep,
handleAddLabCase,
isDetailLocked,
labCaseDrafts,
labDependentCodes,
selectedAppointment,
@@ -1608,12 +1672,17 @@ export function TreatmentWorkspace({
const draftResponse = await treatmentsApi.getDraft(selectedAppointment.id);
if (draftResponse.data?.details?.length) {
const mapped = draftResponse.data.details.map(mapDetailFromApi);
detailsRef.current = mapped;
setDetails(mapped);
setActiveDetailId((prev) => {
const stillExists = mapped.some((d) => d.clientId === prev);
return stillExists ? prev : mapped[0]?.clientId ?? prev;
});
setSavedSnapshot(serializeDetails(mapped));
} else {
const sentDetailClientId = labCase.detailClientId;
setDetails((prev) =>
prev.map((detail) => {
setDetails((prev) => {
const next = prev.map((detail) => {
if (detail.clientId !== sentDetailClientId) return detail;
return {
...detail,
@@ -1624,8 +1693,10 @@ export function TreatmentWorkspace({
? [response.data.destinationOrganizationId]
: detail.sendToOrganizationIds,
};
}),
);
});
detailsRef.current = next;
return next;
});
}
setLabCaseDrafts((prev) =>
@@ -1637,6 +1708,7 @@ export function TreatmentWorkspace({
sentAt: response.data.sentAt,
destinationOrganizationId: response.data.destinationOrganizationId,
sends: response.data.sends,
taskProgress: response.data.taskProgress ?? lc.taskProgress,
}
: lc,
),
@@ -1649,8 +1721,8 @@ export function TreatmentWorkspace({
showSuccess(t('successCaseSent'));
notifyTabBadgesChanged();
if (selectedAppointment.patientId) {
void refreshPatientLabCases(selectedAppointment.patientId);
void refreshHistory(selectedAppointment.patientId);
// Silent: avoid rail/history loading flicker while staying on Lab step.
void refreshHistory(selectedAppointment.patientId, { silentLabCases: true });
}
} catch (error: unknown) {
showError(getUserFacingError(error, tErrors, t('errorSendCase')));
@@ -1663,7 +1735,6 @@ export function TreatmentWorkspace({
selectedAppointment,
persistDraft,
persistLabCases,
refreshPatientLabCases,
refreshHistory,
showSuccess,
showError,
@@ -1959,17 +2030,14 @@ export function TreatmentWorkspace({
let nextGroups: ReturnType<typeof toggleToothInGroups> | null = null;
// Shift wins if both modifiers are held (connected span).
if (event.shiftKey || event.ctrlKey) {
if (event.shiftKey) {
const anchor = rangeAnchorRef.current;
// Need a prior click as range start; modifier alone on one tooth does nothing.
// Need a prior click as range start; shift alone on one tooth does nothing.
if (!anchor || anchor === fdi) {
rangeAnchorRef.current = fdi;
return;
}
nextGroups = event.shiftKey
? applyShiftRange(currentGroups, anchor, fdi)
: applyCtrlRange(currentGroups, anchor, fdi);
nextGroups = applyShiftRange(currentGroups, anchor, fdi);
rangeAnchorRef.current = fdi;
if (!nextGroups) return;
} else {