Can set member country

geneit_app/src/widgets/forms/PropEdit.tsx

@@ -8,8 +8,8 @@ export function PropEdit(p: {
   label: string;
   editable: boolean;
   value?: string;
-  onValueChange: (newVal: string | undefined) => void;
-  size: LenConstraint;
+  onValueChange?: (newVal: string | undefined) => void;
+  size?: LenConstraint;
   checkValue?: (s: string) => boolean;
 }): React.ReactElement {
   if (((!p.editable && p.value) ?? "") === "") return <></>;
@@ -19,12 +19,12 @@ export function PropEdit(p: {
       label={p.label}
       value={p.value}
       onChange={(e) =>
-        p.onValueChange(
+        p.onValueChange?.(
           e.target.value.length === 0 ? undefined : e.target.value
         )
       }
       inputProps={{
-        maxLength: p.size.max,
+        maxLength: p.size?.max,
       }}
       InputProps={{
         readOnly: !p.editable,

geneit_app/src/widgets/forms/SelectInput.tsx

@@ -0,0 +1,38 @@
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import { PropEdit } from "./PropEdit";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export function PropSelect(p: {
+  value?: string;
+  editing: boolean;
+  label: string;
+  options: SelectOption[];
+  onValueChange: (o?: string) => void;
+}): React.ReactElement {
+  if (!p.editing && !p.value) return <></>;
+
+  if (!p.editing) {
+    const value = p.options.find((o) => o.value === p.value)?.label;
+    return <PropEdit label={p.label} editable={p.editing} value={value} />;
+  }
+  return (
+    <FormControl fullWidth variant="filled">
+      <InputLabel>{p.label}</InputLabel>
+      <Select
+        value={p.value}
+        label={p.label}
+        onChange={(e) => p.onValueChange(e.target.value)}
+      >
+        {p.options.map((e) => (
+          <MenuItem key={e.value} value={e.value}>
+            {e.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}