justin/provenance
1
0
Fork 0
Code Issues 173 Pull Requests Actions Packages Projects Releases Wiki Activity

Make creating a person obvious; inline "create new" when linking relatives

Browse Source 
- Family view gets a prominent "+ Add person" button that creates a person and
  opens their page to fill in details (previously you could only add a person
  via the empty-state form or by linking from another person).
- The person page's relationship picker (PersonCombobox) now offers
  "+ Create '<typed name>'" when the person doesn't exist yet: it creates them,
  links them in the chosen role (parent/child/partner/sibling), and jumps to
  their new page to edit — no more create-then-go-back-and-link.

Frontend only — no migration.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Justin Paul
2026-06-07 11:30:14 -04:00
parent e9b2436ce0
commit 37ac49767e
3 changed files with 65 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/trees/[id]/persons/[personId]/page.tsx
+29 -9
View File
@@ -342,28 +342,47 @@ export default function PersonDetailPage() {
}
}
async function addRel(e: React.FormEvent) {
e.preventDefault();
if (!relOther) return;
async function linkRelative(otherId: string): Promise<boolean> {
let body: RelCreate;
if (relKind === "parent") {
body = { type: "parent_child", person_from_id: relOther, person_to_id: personId, qualifier: relQual };
body = { type: "parent_child", person_from_id: otherId, person_to_id: personId, qualifier: relQual };
} else if (relKind === "child") {
body = { type: "parent_child", person_from_id: personId, person_to_id: relOther, qualifier: relQual };
body = { type: "parent_child", person_from_id: personId, person_to_id: otherId, qualifier: relQual };
} else if (relKind === "partner") {
body = { type: "partnership", person_from_id: personId, person_to_id: relOther };
body = { type: "partnership", person_from_id: personId, person_to_id: otherId };
} else {
body = { type: "sibling", person_from_id: personId, person_to_id: relOther };
body = { type: "sibling", person_from_id: personId, person_to_id: otherId };
}
const { error } = await api.POST("/api/v1/trees/{tree_id}/relationships", {
params: { path: { tree_id: treeId } },
body,
});
if (!error) {
return !error;
}
async function addRel(e: React.FormEvent) {
e.preventDefault();
if (!relOther) return;
if (await linkRelative(relOther)) {
setRelOther("");
load();
}
}
// Create a brand-new person, link them in the chosen role, then jump to their
// page so the user can fill in details immediately.
async function createRelativeAndGo(name: string) {
const toks = name.trim().split(/\s+/).filter(Boolean);
const given = toks.length > 1 ? toks.slice(0, -1).join(" ") : toks[0] ?? name.trim();
const surname = toks.length > 1 ? toks[toks.length - 1] : null;
const { data } = await api.POST("/api/v1/trees/{tree_id}/persons", {
params: { path: { tree_id: treeId } },
body: { given, surname },
});
if (!data) return;
await linkRelative(data.id);
router.push(`/trees/${treeId}/persons/${data.id}`);
}
async function removeRel(id: string) {
await api.DELETE("/api/v1/trees/{tree_id}/relationships/{relationship_id}", {
params: { path: { tree_id: treeId, relationship_id: id } },
@@ -1096,7 +1115,8 @@ export default function PersonDetailPage() {
people={others}
value={relOther}
onChange={setRelOther}
placeholder="Search for a person…"
onCreate={createRelativeAndGo}
placeholder="Search, or type a new name…"
/>
{(relKind === "parent" || relKind === "child") && (
<select className={fieldCls} value={relQual} onChange={(e) => setRelQual(e.target.value as Qualifier)}>