Can set member country

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -1,11 +1,11 @@
 import ClearIcon from "@mui/icons-material/Clear";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import SaveIcon from "@mui/icons-material/Save";
 import { Button, Grid, Stack } from "@mui/material";
 import * as EmailValidator from "email-validator";
 import React from "react";
-import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import { useNavigate, useParams } from "react-router-dom";
 import { Member, MemberApi } from "../../api/MemberApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -16,15 +16,16 @@ import { AsyncWidget } from "../../widgets/AsyncWidget";
 import { useFamily } from "../../widgets/BaseFamilyRoute";
 import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
 import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
+import { MemberPhoto } from "../../widgets/MemberPhoto";
 import { PropertiesBox } from "../../widgets/PropertiesBox";
+import { RouterLink } from "../../widgets/RouterLink";
 import { DateInput } from "../../widgets/forms/DateInput";
+import { MemberInput } from "../../widgets/forms/MemberInput";
 import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
 import { PropEdit } from "../../widgets/forms/PropEdit";
+import { PropSelect } from "../../widgets/forms/SelectInput";
 import { SexSelection } from "../../widgets/forms/SexSelection";
 import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton";
-import { MemberPhoto } from "../../widgets/MemberPhoto";
-import { RouterLink } from "../../widgets/RouterLink";
-import { MemberInput } from "../../widgets/forms/MemberInput";
 
 /**
  * Create a new member route
@@ -494,34 +495,50 @@ export function MemberPage(p: {
         </Grid>
 
         {/* Contact */}
-        <Grid item sm={12} md={6}>
-          <PropertiesBox title="Contact">
-            {/* Email */}
-            <PropEdit
-              label="Adresse mail"
-              editable={p.editing}
-              value={member.email}
-              onValueChange={(v) => {
-                member.email = v;
-                updatedMember();
-              }}
-              size={ServerApi.Config.constraints.member_email}
-              checkValue={(e) => EmailValidator.validate(e)}
-            />
+        {(p.editing || member.hasContactInfo) && (
+          <Grid item sm={12} md={6}>
+            <PropertiesBox title="Contact">
+              {/* Email */}
+              <PropEdit
+                label="Adresse mail"
+                editable={p.editing}
+                value={member.email}
+                onValueChange={(v) => {
+                  member.email = v;
+                  updatedMember();
+                }}
+                size={ServerApi.Config.constraints.member_email}
+                checkValue={(e) => EmailValidator.validate(e)}
+              />
 
-            {/* Phone number */}
-            <PropEdit
-              label="Téléphone"
-              editable={p.editing}
-              value={member.phone}
-              onValueChange={(v) => {
-                member.phone = v;
-                updatedMember();
-              }}
-              size={ServerApi.Config.constraints.member_phone}
-            />
-          </PropertiesBox>
-        </Grid>
+              {/* Phone number */}
+              <PropEdit
+                label="Téléphone"
+                editable={p.editing}
+                value={member.phone}
+                onValueChange={(v) => {
+                  member.phone = v;
+                  updatedMember();
+                }}
+                size={ServerApi.Config.constraints.member_phone}
+              />
+
+              {/* Country */}
+              <PropSelect
+                label="Pays"
+                editing={p.editing}
+                onValueChange={(o) => {
+                  member.country = o;
+                  updatedMember();
+                }}
+                value={member.country}
+                options={ServerApi.Config.countries.map((c) => {
+                  return { label: c.fr, value: c.code };
+                })}
+              />
+            </PropertiesBox>
+          </Grid>
+        )}
 
         {/* Bio */}
         <Grid item sm={12} md={6}>