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:
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user