feat(katalog): dublettenpruefung beim anlegen eines sets

Vor dem Speichern eines neuen Sets sucht die App nach Eintraegen, die
dasselbe sein koennten: gleiche Setnummer beim gleichen Hersteller,
sehr aehnlicher Name, oder dieselbe Nummer bei einem anderen Hersteller
- letzteres meist ein Zeichen dafuer, dass der falsche Hersteller
ausgewaehlt wurde. Die Kandidaten stehen als Liste mit Link im Dialog;
"Trotzdem anlegen" bleibt einen Klick entfernt.

Die Aehnlichkeit ist bewusst konservativ eingestellt: Tippfehler und
abweichende Schreibweisen schlagen an, zwei echte Sets desselben Themas
nicht. Die Schwelle und die Sonderfaelle (ein Name steckt im anderen,
sehr kurze Namen) sind mit Beispielen aus dem echten Katalog getestet.

Beim Bearbeiten laeuft die Pruefung nicht - dort waere der Eintrag, vor
dem gewarnt wuerde, der eigene.

Refs Phase 3

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
unknown
2026-09-07 09:13:17 +02:00
co-authored by Claude Opus 5
parent c23b754515
commit 87131b8e70
5 changed files with 387 additions and 21 deletions
+100
View File
@@ -0,0 +1,100 @@
'use server';
import { and, eq, ne } from 'drizzle-orm';
import { db } from '@/db';
import { manufacturer, set } from '@/db/schema';
import { actionData, type ActionResult } from '@/lib/action-result';
import { requireUser } from '@/lib/session';
import { isSimilarName } from '@/lib/similarity';
export type DuplicateCandidate = {
id: string;
setNumber: string;
name: string;
manufacturerName: string;
/** Why we are showing it. */
reason: 'same-number' | 'similar-name' | 'number-elsewhere';
};
/**
* Looks for sets that the one being created might be a duplicate of.
*
* Three cases, in descending order of certainty:
* - the same number at the same manufacturer (that is a real duplicate and is
* rejected on save anyway),
* - a suspiciously similar name at the same manufacturer,
* - the same number at a different manufacturer, which usually means the
* wrong manufacturer was selected.
*/
export async function findDuplicateCandidates(input: {
manufacturerId: string;
setNumber: string;
name: string;
excludeSetId?: string;
}): Promise<ActionResult<{ candidates: DuplicateCandidate[] }>> {
await requireUser();
const setNumber = input.setNumber?.trim() ?? '';
const name = input.name?.trim() ?? '';
if (!input.manufacturerId || (setNumber === '' && name === '')) {
return actionData({ candidates: [] });
}
const rows = db
.select({
id: set.id,
setNumber: set.setNumber,
name: set.name,
manufacturerId: set.manufacturerId,
manufacturerName: manufacturer.name,
})
.from(set)
.innerJoin(manufacturer, eq(manufacturer.id, set.manufacturerId))
.where(input.excludeSetId ? ne(set.id, input.excludeSetId) : undefined)
.all();
const candidates: DuplicateCandidate[] = [];
for (const row of rows) {
const sameManufacturer = row.manufacturerId === input.manufacturerId;
const sameNumber = setNumber !== '' && row.setNumber.toLowerCase() === setNumber.toLowerCase();
if (sameManufacturer && sameNumber) {
candidates.push({ ...row, reason: 'same-number' });
continue;
}
if (sameManufacturer && name !== '' && isSimilarName(row.name, name)) {
candidates.push({ ...row, reason: 'similar-name' });
continue;
}
if (!sameManufacturer && sameNumber) {
candidates.push({ ...row, reason: 'number-elsewhere' });
}
}
// Certain matches first, and never more than a handful.
const order: Record<DuplicateCandidate['reason'], number> = {
'same-number': 0,
'similar-name': 1,
'number-elsewhere': 2,
};
candidates.sort((a, b) => order[a.reason] - order[b.reason]);
return actionData({ candidates: candidates.slice(0, 5) });
}
/** Used by the import to point at an existing entry instead of failing blindly. */
export async function findSetByNumber(
manufacturerId: string,
setNumber: string,
): Promise<ActionResult<{ id: string } | null>> {
await requireUser();
const row = db
.select({ id: set.id })
.from(set)
.where(and(eq(set.manufacturerId, manufacturerId), eq(set.setNumber, setNumber)))
.get();
return actionData(row ?? null);
}
+127 -21
View File
@@ -1,13 +1,28 @@
'use client';
import { useRouter } from 'next/navigation';
import { useState, useTransition } from 'react';
import { useRef, useState, useTransition } from 'react';
import Link from 'next/link';
import { Loader2, Save } from 'lucide-react';
import { toast } from 'sonner';
import { createSet, updateSet } from '@/app/(app)/katalog/actions';
import {
findDuplicateCandidates,
type DuplicateCandidate,
} from '@/app/(app)/katalog/duplicate-actions';
import { centsToInput } from '@/lib/money';
import { setImageSrc } from '@/lib/images';
import { Button } from '@/components/ui/button';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Checkbox } from '@/components/ui/checkbox';
import { Field } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
@@ -46,6 +61,8 @@ export function SetForm({ manufacturers, themes, set, defaultEan }: Props) {
const [manufacturerId, setManufacturerId] = useState(
set?.manufacturerId ?? manufacturers[0]?.id ?? '',
);
const [duplicates, setDuplicates] = useState<DuplicateCandidate[] | null>(null);
const pendingForm = useRef<FormData | null>(null);
const existingImage = set ? setImageSrc(set) : null;
const availableThemes = themes.filter((theme) => theme.manufacturerId === manufacturerId);
@@ -54,32 +71,70 @@ export function SetForm({ manufacturers, themes, set, defaultEan }: Props) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
startTransition(async () => {
if (set) {
const result = await updateSet(set.id, formData);
if (!result.ok) {
toast.error(result.error);
// Ask before creating something that already exists. Editing skips this:
// there the entry is the one we would be warning about.
if (!set) {
startTransition(async () => {
const check = await findDuplicateCandidates({
manufacturerId: String(formData.get('manufacturerId') ?? ''),
setNumber: String(formData.get('setNumber') ?? ''),
name: String(formData.get('name') ?? ''),
});
if (check.ok && check.data.candidates.length > 0) {
pendingForm.current = formData;
setDuplicates(check.data.candidates);
return;
}
toast.success('Set gespeichert.');
router.push(`/katalog/${set.id}`);
router.refresh();
return;
}
const result = await createSet(formData);
if (!result.ok) {
toast.error(result.error);
return;
}
toast.success('Set angelegt.');
router.push(`/katalog/${result.data.id}`);
router.refresh();
await save(formData);
});
return;
}
startTransition(() => save(formData));
}
async function save(formData: FormData) {
return new Promise<void>((resolve) => {
startTransition(async () => {
if (set) {
const result = await updateSet(set.id, formData);
if (!result.ok) {
toast.error(result.error);
resolve();
return;
}
toast.success('Set gespeichert.');
router.push(`/katalog/${set.id}`);
router.refresh();
resolve();
return;
}
const result = await createSet(formData);
if (!result.ok) {
toast.error(result.error);
resolve();
return;
}
toast.success('Set angelegt.');
router.push(`/katalog/${result.data.id}`);
router.refresh();
resolve();
});
});
}
const REASON_LABELS: Record<DuplicateCandidate['reason'], string> = {
'same-number': 'Gleiche Setnummer beim gleichen Hersteller',
'similar-name': 'Sehr ähnlicher Name',
'number-elsewhere': 'Gleiche Setnummer bei einem anderen Hersteller',
};
return (
<form onSubmit={onSubmit} className="space-y-6">
<>
<form onSubmit={onSubmit} className="space-y-6">
<div className="grid gap-4 sm:grid-cols-2">
<Field label="Hersteller" htmlFor="manufacturerId" required>
<NativeSelect
@@ -243,6 +298,57 @@ export function SetForm({ manufacturers, themes, set, defaultEan }: Props) {
Abbrechen
</Button>
</div>
</form>
</form>
<AlertDialog
open={duplicates !== null}
onOpenChange={(open) => {
if (!open) {
setDuplicates(null);
pendingForm.current = null;
}
}}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Gibt es das vielleicht schon?</AlertDialogTitle>
<AlertDialogDescription>
Diese Einträge sehen ähnlich aus. Schau kurz nach, bevor der Katalog zwei Mal
dasselbe Set enthält.
</AlertDialogDescription>
</AlertDialogHeader>
<ul className="divide-y divide-border rounded-lg border border-border">
{(duplicates ?? []).map((candidate) => (
<li key={candidate.id} className="p-3">
<Link
href={`/katalog/${candidate.id}`}
className="text-sm font-medium hover:underline"
>
{candidate.setNumber} · {candidate.name}
</Link>
<p className="text-xs text-muted-foreground">
{candidate.manufacturerName} — {REASON_LABELS[candidate.reason]}
</p>
</li>
))}
</ul>
<AlertDialogFooter>
<AlertDialogCancel>Zurück zum Formular</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
const formData = pendingForm.current;
setDuplicates(null);
pendingForm.current = null;
if (formData) void save(formData);
}}
>
Trotzdem anlegen
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
);
}
+77
View File
@@ -0,0 +1,77 @@
/**
* Name comparison for the duplicate check when a set is created.
*
* Pure and free of server imports so it can be unit tested - and it needs to
* be, because "similar enough" is a judgement call that is easy to get wrong
* in both directions.
*/
/**
* Lowercases, strips punctuation and collapses whitespace, so that
* "Feuerwehr-Auto" and "feuerwehr auto" are the same string.
*/
export function normalizeName(value: string): string {
return value
.toLowerCase()
.replace(/ä/g, 'ae')
.replace(/ö/g, 'oe')
.replace(/ü/g, 'ue')
.replace(/ß/g, 'ss')
.replace(/[^a-z0-9]+/g, ' ')
.trim();
}
/** Classic Levenshtein distance, iterative with a single row. */
export function levenshtein(a: string, b: string): number {
if (a === b) return 0;
if (a.length === 0) return b.length;
if (b.length === 0) return a.length;
let previous = Array.from({ length: b.length + 1 }, (_, index) => index);
for (let i = 1; i <= a.length; i += 1) {
const current = [i];
for (let j = 1; j <= b.length; j += 1) {
const cost = a[i - 1] === b[j - 1] ? 0 : 1;
current[j] = Math.min(
current[j - 1]! + 1, // insertion
previous[j]! + 1, // deletion
previous[j - 1]! + cost, // substitution
);
}
previous = current;
}
return previous[b.length]!;
}
/** 1 means identical, 0 means nothing in common. */
export function similarity(a: string, b: string): number {
const left = normalizeName(a);
const right = normalizeName(b);
if (left === right) return 1;
if (left.length === 0 || right.length === 0) return 0;
const longest = Math.max(left.length, right.length);
return 1 - levenshtein(left, right) / longest;
}
/**
* Above this, two names are close enough to be worth asking about. Chosen so
* that a typo or a different spelling triggers, while two genuinely different
* sets of the same theme do not.
*/
export const SIMILAR_NAME_THRESHOLD = 0.82;
export function isSimilarName(a: string, b: string): boolean {
const left = normalizeName(a);
const right = normalizeName(b);
// One name fully contained in the other ("Feuerwehrauto" vs "Feuerwehrauto
// mit Leiter") is a strong hint even when the length differs a lot.
if (left.length >= 6 && right.length >= 6 && (left.includes(right) || right.includes(left))) {
return true;
}
return similarity(a, b) >= SIMILAR_NAME_THRESHOLD;
}