Can set member country
This commit is contained in:
parent
39190de454
commit
7d97909d06
@ -148,6 +148,17 @@ export class Member implements MemberDataApi {
|
|||||||
day: this.death_day,
|
day: this.death_day,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get hasContactInfo(): boolean {
|
||||||
|
return this.email ||
|
||||||
|
this.phone ||
|
||||||
|
this.address ||
|
||||||
|
this.city ||
|
||||||
|
this.postal_code ||
|
||||||
|
this.country
|
||||||
|
? true
|
||||||
|
: false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function fmtDate(d?: DateValue): string {
|
export function fmtDate(d?: DateValue): string {
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import ClearIcon from "@mui/icons-material/Clear";
|
import ClearIcon from "@mui/icons-material/Clear";
|
||||||
import DeleteIcon from "@mui/icons-material/Delete";
|
import DeleteIcon from "@mui/icons-material/Delete";
|
||||||
import EditIcon from "@mui/icons-material/Edit";
|
import EditIcon from "@mui/icons-material/Edit";
|
||||||
|
import FileDownloadIcon from "@mui/icons-material/FileDownload";
|
||||||
import SaveIcon from "@mui/icons-material/Save";
|
import SaveIcon from "@mui/icons-material/Save";
|
||||||
import { Button, Grid, Stack } from "@mui/material";
|
import { Button, Grid, Stack } from "@mui/material";
|
||||||
import * as EmailValidator from "email-validator";
|
import * as EmailValidator from "email-validator";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import FileDownloadIcon from "@mui/icons-material/FileDownload";
|
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
import { Member, MemberApi } from "../../api/MemberApi";
|
import { Member, MemberApi } from "../../api/MemberApi";
|
||||||
import { ServerApi } from "../../api/ServerApi";
|
import { ServerApi } from "../../api/ServerApi";
|
||||||
@ -16,15 +16,16 @@ import { AsyncWidget } from "../../widgets/AsyncWidget";
|
|||||||
import { useFamily } from "../../widgets/BaseFamilyRoute";
|
import { useFamily } from "../../widgets/BaseFamilyRoute";
|
||||||
import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
|
import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
|
||||||
import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
|
import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
|
||||||
|
import { MemberPhoto } from "../../widgets/MemberPhoto";
|
||||||
import { PropertiesBox } from "../../widgets/PropertiesBox";
|
import { PropertiesBox } from "../../widgets/PropertiesBox";
|
||||||
|
import { RouterLink } from "../../widgets/RouterLink";
|
||||||
import { DateInput } from "../../widgets/forms/DateInput";
|
import { DateInput } from "../../widgets/forms/DateInput";
|
||||||
|
import { MemberInput } from "../../widgets/forms/MemberInput";
|
||||||
import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
|
import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
|
||||||
import { PropEdit } from "../../widgets/forms/PropEdit";
|
import { PropEdit } from "../../widgets/forms/PropEdit";
|
||||||
|
import { PropSelect } from "../../widgets/forms/SelectInput";
|
||||||
import { SexSelection } from "../../widgets/forms/SexSelection";
|
import { SexSelection } from "../../widgets/forms/SexSelection";
|
||||||
import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton";
|
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
|
* Create a new member route
|
||||||
@ -494,6 +495,7 @@ export function MemberPage(p: {
|
|||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
{/* Contact */}
|
{/* Contact */}
|
||||||
|
{(p.editing || member.hasContactInfo) && (
|
||||||
<Grid item sm={12} md={6}>
|
<Grid item sm={12} md={6}>
|
||||||
<PropertiesBox title="Contact">
|
<PropertiesBox title="Contact">
|
||||||
{/* Email */}
|
{/* Email */}
|
||||||
@ -520,8 +522,23 @@ export function MemberPage(p: {
|
|||||||
}}
|
}}
|
||||||
size={ServerApi.Config.constraints.member_phone}
|
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>
|
</PropertiesBox>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Bio */}
|
{/* Bio */}
|
||||||
<Grid item sm={12} md={6}>
|
<Grid item sm={12} md={6}>
|
||||||
|
@ -8,8 +8,8 @@ export function PropEdit(p: {
|
|||||||
label: string;
|
label: string;
|
||||||
editable: boolean;
|
editable: boolean;
|
||||||
value?: string;
|
value?: string;
|
||||||
onValueChange: (newVal: string | undefined) => void;
|
onValueChange?: (newVal: string | undefined) => void;
|
||||||
size: LenConstraint;
|
size?: LenConstraint;
|
||||||
checkValue?: (s: string) => boolean;
|
checkValue?: (s: string) => boolean;
|
||||||
}): React.ReactElement {
|
}): React.ReactElement {
|
||||||
if (((!p.editable && p.value) ?? "") === "") return <></>;
|
if (((!p.editable && p.value) ?? "") === "") return <></>;
|
||||||
@ -19,12 +19,12 @@ export function PropEdit(p: {
|
|||||||
label={p.label}
|
label={p.label}
|
||||||
value={p.value}
|
value={p.value}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
p.onValueChange(
|
p.onValueChange?.(
|
||||||
e.target.value.length === 0 ? undefined : e.target.value
|
e.target.value.length === 0 ? undefined : e.target.value
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
inputProps={{
|
inputProps={{
|
||||||
maxLength: p.size.max,
|
maxLength: p.size?.max,
|
||||||
}}
|
}}
|
||||||
InputProps={{
|
InputProps={{
|
||||||
readOnly: !p.editable,
|
readOnly: !p.editable,
|
||||||
|
38
geneit_app/src/widgets/forms/SelectInput.tsx
Normal file
38
geneit_app/src/widgets/forms/SelectInput.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user