Can set the father and the mother of a member

geneit_app/src/widgets/forms/MemberInput.tsx

@@ -1,4 +1,25 @@
-import { Member } from "../../api/MemberApi";
+import {
+  Autocomplete,
+  Avatar,
+  Box,
+  IconButton,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemSecondaryAction,
+  ListItemText,
+  TextField,
+  Typography,
+  autocompleteClasses,
+} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import { Member, fmtDate } from "../../api/MemberApi";
+import { useFamily } from "../BaseFamilyRoute";
+import React from "react";
+import { MemberPhoto } from "../MemberPhoto";
+import Icon from "@mdi/react";
+import { mdiCross } from "@mdi/js";
+import { useNavigate } from "react-router-dom";
 
 export function MemberInput(p: {
   editable: boolean;
@@ -7,5 +28,99 @@ export function MemberInput(p: {
   label: string;
   filter: (m: Member) => boolean;
 }): React.ReactElement {
-  return <>CHOOSE</>;
+  const n = useNavigate();
+  const family = useFamily();
+
+  const choices = family.members.filter(p.filter);
+
+  const [inputValue, setInputValue] = React.useState("");
+
+  if (p.current) {
+    const member = family.members.get(p.current)!;
+    return (
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Typography variant="body2">{p.label}</Typography>
+        <MemberItem
+          member={member}
+          onClick={
+            !p.editable
+              ? () => {
+                  n(family.family.URL(`member/${member.id}`));
+                }
+              : undefined
+          }
+          secondary={
+            p.editable ? (
+              <>
+                <IconButton
+                  edge="end"
+                  onClick={() => p.onValueChange(undefined)}
+                >
+                  <ClearIcon />
+                </IconButton>
+              </>
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
+  if (!p.editable) return <></>;
+
+  return (
+    <Autocomplete
+      value={p.current ? family.members.get(p.current) : undefined}
+      onChange={(_event: any, newValue: Member | null | undefined) => {
+        p.onValueChange(newValue?.id);
+      }}
+      inputValue={inputValue}
+      onInputChange={(_event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+      options={choices}
+      sx={{ width: "100%" }}
+      filterOptions={(options, state) =>
+        options.filter((m) =>
+          m?.fullName.toLowerCase().includes(state.inputValue)
+        )
+      }
+      getOptionLabel={(o) => o?.fullName ?? ""}
+      renderInput={(params) => <TextField {...params} label={p.label} />}
+      renderOption={(_props, option, _state) => (
+        <MemberItem
+          member={option}
+          onClick={() => p.onValueChange(option?.id)}
+        />
+      )}
+    />
+  );
+}
+
+function MemberItem(p: {
+  member?: Member;
+  onClick?: () => void;
+  secondary?: React.ReactElement;
+}): React.ReactElement {
+  return (
+    <ListItemButton onClick={p.onClick}>
+      <ListItemAvatar>
+        <MemberPhoto member={p.member!} />
+      </ListItemAvatar>
+      <ListItemText
+        primary={
+          <>
+            {p.member?.fullName}{" "}
+            {p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
+          </>
+        }
+        secondary={`${fmtDate(p.member?.dateOfBirth)} - ${fmtDate(
+          p.member?.dateOfDeath
+        )}`}
+      />
+      {p.secondary && (
+        <ListItemSecondaryAction>{p.secondary}</ListItemSecondaryAction>
+      )}
+    </ListItemButton>
+  );
 }