129 lines
4.0 KiB
TypeScript
129 lines
4.0 KiB
TypeScript
/**
|
|
* RelationshipTool Component
|
|
*
|
|
* Tool for creating relationships between persons
|
|
*/
|
|
|
|
import { useState, useCallback } from 'react';
|
|
import { usePedigreeStore } from '@/store/pedigreeStore';
|
|
import { createRelationship, RelationshipType } from '@/core/model/types';
|
|
import styles from '../Toolbar.module.css';
|
|
|
|
interface RelationshipToolProps {
|
|
onClose?: () => void;
|
|
}
|
|
|
|
export function RelationshipTool({ onClose }: RelationshipToolProps) {
|
|
const {
|
|
pedigree,
|
|
selectedPersonId,
|
|
addRelationship,
|
|
updatePerson,
|
|
} = usePedigreeStore();
|
|
|
|
const [relationshipType, setRelationshipType] = useState<'spouse' | 'parent' | 'child'>('spouse');
|
|
const [targetPersonId, setTargetPersonId] = useState<string>('');
|
|
|
|
const persons = pedigree ? Array.from(pedigree.persons.values()) : [];
|
|
const selectedPerson = selectedPersonId ? pedigree?.persons.get(selectedPersonId) : null;
|
|
|
|
const availableTargets = persons.filter(p => p.id !== selectedPersonId);
|
|
|
|
const handleCreateRelationship = useCallback(() => {
|
|
if (!selectedPersonId || !targetPersonId || !pedigree) return;
|
|
|
|
const selectedPerson = pedigree.persons.get(selectedPersonId);
|
|
const targetPerson = pedigree.persons.get(targetPersonId);
|
|
|
|
if (!selectedPerson || !targetPerson) return;
|
|
|
|
switch (relationshipType) {
|
|
case 'spouse': {
|
|
const relationship = createRelationship(
|
|
selectedPersonId,
|
|
targetPersonId,
|
|
RelationshipType.Spouse
|
|
);
|
|
addRelationship(relationship);
|
|
break;
|
|
}
|
|
case 'parent': {
|
|
// Make target person a parent of selected person
|
|
if (targetPerson.sex === 'male') {
|
|
updatePerson(selectedPersonId, { fatherId: targetPersonId });
|
|
} else if (targetPerson.sex === 'female') {
|
|
updatePerson(selectedPersonId, { motherId: targetPersonId });
|
|
}
|
|
// Add selected person as child of target
|
|
updatePerson(targetPersonId, {
|
|
childrenIds: [...targetPerson.childrenIds, selectedPersonId],
|
|
});
|
|
break;
|
|
}
|
|
case 'child': {
|
|
// Make target person a child of selected person
|
|
if (selectedPerson.sex === 'male') {
|
|
updatePerson(targetPersonId, { fatherId: selectedPersonId });
|
|
} else if (selectedPerson.sex === 'female') {
|
|
updatePerson(targetPersonId, { motherId: selectedPersonId });
|
|
}
|
|
// Add target person as child of selected
|
|
updatePerson(selectedPersonId, {
|
|
childrenIds: [...selectedPerson.childrenIds, targetPersonId],
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
|
|
setTargetPersonId('');
|
|
onClose?.();
|
|
}, [selectedPersonId, targetPersonId, relationshipType, pedigree, addRelationship, updatePerson, onClose]);
|
|
|
|
if (!selectedPerson) {
|
|
return (
|
|
<div className={styles.relationshipTool}>
|
|
<p>Select a person first to create relationships</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={styles.relationshipTool}>
|
|
<div className={styles.relationshipRow}>
|
|
<label>Type:</label>
|
|
<select
|
|
value={relationshipType}
|
|
onChange={(e) => setRelationshipType(e.target.value as 'spouse' | 'parent' | 'child')}
|
|
>
|
|
<option value="spouse">Spouse</option>
|
|
<option value="parent">Parent of {selectedPerson.id}</option>
|
|
<option value="child">Child of {selectedPerson.id}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className={styles.relationshipRow}>
|
|
<label>Target:</label>
|
|
<select
|
|
value={targetPersonId}
|
|
onChange={(e) => setTargetPersonId(e.target.value)}
|
|
>
|
|
<option value="">-- Select --</option>
|
|
{availableTargets.map(person => (
|
|
<option key={person.id} value={person.id}>
|
|
{person.metadata.label || person.id} ({person.sex})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
className={styles.button}
|
|
onClick={handleCreateRelationship}
|
|
disabled={!targetPersonId}
|
|
>
|
|
Create Relationship
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|