feat(diagnose): Master-detail layout en verbeterde ICD-10 combobox
Diagnose pagina: - Master-detail layout (lijst links, formulier rechts) - URL state voor selectie (?selected=uuid of ?selected=new) - Inline CRUD zonder modals of navigatie - Vereenvoudigde header (alleen actieve diagnoses teller) ICD-10 Combobox: - Vervangen cmdk/Command met simpele Popover + buttons (fix selectie bug) - Direct typen in input veld (geen extra klik nodig) - Auto-open dropdown bij focus/typen Database: - Fix FK constraint: conditions.encounter_id -> intakes (was encounters) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
colinislit
@@ -1,17 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { Check, ChevronsUpDown } from 'lucide-react';
|
||||
import { useState, useEffect, useMemo, useRef } from 'react';
|
||||
import { Check, ChevronsUpDown, Search } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from '@/components/ui/command';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
@@ -59,6 +52,7 @@ export function ICD10Combobox({
|
||||
}: ICD10ComboboxProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Flatten ICD-10 codes once
|
||||
const flatCodes = useMemo(() => {
|
||||
@@ -71,10 +65,8 @@ export function ICD10Combobox({
|
||||
// Get search results or frequent codes
|
||||
const displayCodes = useMemo(() => {
|
||||
if (debouncedQuery.trim()) {
|
||||
// Search mode: max 8 results
|
||||
return searchICD10Codes(flatCodes, debouncedQuery, 8);
|
||||
} else {
|
||||
// Empty field: show top 5 frequent codes
|
||||
return getFrequentCodes(flatCodes, icd10CodesData.frequentCodes).slice(0, 5);
|
||||
}
|
||||
}, [debouncedQuery, flatCodes]);
|
||||
@@ -95,98 +87,90 @@ export function ICD10Combobox({
|
||||
setSearchQuery('');
|
||||
};
|
||||
|
||||
// Focus input when popover opens
|
||||
useEffect(() => {
|
||||
if (open && inputRef.current) {
|
||||
setTimeout(() => inputRef.current?.focus(), 0);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="w-full justify-between"
|
||||
disabled={disabled}
|
||||
>
|
||||
{selectedCode ? (
|
||||
<span className="truncate">
|
||||
{selectedCode.code} — {selectedCode.display}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">{placeholder}</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
placeholder={placeholder}
|
||||
value={open ? searchQuery : (selectedCode ? `${selectedCode.code} — ${selectedCode.display}` : '')}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
if (!open) setOpen(true);
|
||||
}}
|
||||
onFocus={() => setOpen(true)}
|
||||
disabled={disabled}
|
||||
className="pl-9 pr-8"
|
||||
/>
|
||||
<ChevronsUpDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput
|
||||
placeholder="Zoek op code of beschrijving..."
|
||||
value={searchQuery}
|
||||
onValueChange={setSearchQuery}
|
||||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty>
|
||||
|
||||
{/* Results */}
|
||||
<div className="max-h-[300px] overflow-y-auto">
|
||||
{displayCodes.length === 0 ? (
|
||||
<div className="py-6 text-center text-sm text-muted-foreground">
|
||||
{debouncedQuery.trim()
|
||||
? 'Geen codes gevonden.'
|
||||
: 'Begin met typen om te zoeken...'}
|
||||
</CommandEmpty>
|
||||
{!debouncedQuery.trim() && (
|
||||
<CommandGroup heading="Veelgebruikte codes">
|
||||
{displayCodes.map((code) => (
|
||||
<CommandItem
|
||||
key={code.code}
|
||||
value={code.code}
|
||||
onSelect={() => handleSelect(code)}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
selectedCode?.code === code.code
|
||||
? 'opacity-100'
|
||||
: 'opacity-0'
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{code.code}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{code.display}
|
||||
</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
)}
|
||||
{debouncedQuery.trim() && (
|
||||
<CommandGroup heading="Zoekresultaten">
|
||||
{displayCodes.map((code) => (
|
||||
<CommandItem
|
||||
key={code.code}
|
||||
value={code.code}
|
||||
onSelect={() => handleSelect(code)}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
selectedCode?.code === code.code
|
||||
? 'opacity-100'
|
||||
: 'opacity-0'
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{code.code}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{code.display}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-1">
|
||||
{!debouncedQuery.trim() && (
|
||||
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||||
Veelgebruikte codes
|
||||
</div>
|
||||
)}
|
||||
{debouncedQuery.trim() && (
|
||||
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||||
Zoekresultaten
|
||||
</div>
|
||||
)}
|
||||
{displayCodes.map((code) => (
|
||||
<button
|
||||
key={code.code}
|
||||
type="button"
|
||||
onClick={() => handleSelect(code)}
|
||||
className={cn(
|
||||
'relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm outline-none',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
'focus:bg-accent focus:text-accent-foreground',
|
||||
selectedCode?.code === code.code && 'bg-accent'
|
||||
)}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4 shrink-0',
|
||||
selectedCode?.code === code.code ? 'opacity-100' : 'opacity-0'
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="font-medium">{code.code}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{code.display}
|
||||
</span>
|
||||
{debouncedQuery.trim() && (
|
||||
<span className="text-xs text-muted-foreground italic">
|
||||
{code.category}
|
||||
</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
)}
|
||||
</CommandList>
|
||||
</Command>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user