93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
|
import {
|
||
|
Button,
|
||
|
Dialog,
|
||
|
DialogActions,
|
||
|
DialogContent,
|
||
|
DialogTitle,
|
||
|
} from "@mui/material";
|
||
|
import React from "react";
|
||
|
import { ServerApi } from "../../api/ServerApi";
|
||
|
import { NewCalendarURL } from "../../api/accommodations/AccommodationsCalendarURLApi";
|
||
|
import { checkConstraint } from "../../utils/form_utils";
|
||
|
import { useAccommodations } from "../../widgets/accommodations/BaseAccommodationsRoute";
|
||
|
import { PropEdit } from "../../widgets/forms/PropEdit";
|
||
|
import { PropSelect } from "../../widgets/forms/PropSelect";
|
||
|
|
||
|
export function CreateAccommodationCalendarURLDialog(p: {
|
||
|
open: boolean;
|
||
|
onClose: () => void;
|
||
|
onSubmitted: (c: NewCalendarURL) => void;
|
||
|
}): React.ReactElement {
|
||
|
const [calendar, setCalendar] = React.useState<NewCalendarURL>({ name: "" });
|
||
|
|
||
|
const accommodations = useAccommodations();
|
||
|
|
||
|
const nameErr = checkConstraint(
|
||
|
ServerApi.Config.constraints.accommodation_calendar_name_len,
|
||
|
calendar?.name
|
||
|
);
|
||
|
|
||
|
const clearForm = () => {
|
||
|
setCalendar({ name: "" });
|
||
|
};
|
||
|
|
||
|
const cancel = () => {
|
||
|
clearForm();
|
||
|
p.onClose();
|
||
|
};
|
||
|
|
||
|
const submit = async () => {
|
||
|
clearForm();
|
||
|
p.onSubmitted(calendar!);
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<Dialog open={p.open} onClose={cancel}>
|
||
|
<DialogTitle>Création d'un calendrier</DialogTitle>
|
||
|
<DialogContent style={{ display: "flex", flexDirection: "column" }}>
|
||
|
<PropEdit
|
||
|
editable
|
||
|
label="Nom"
|
||
|
value={calendar?.name}
|
||
|
onValueChange={(s) =>
|
||
|
setCalendar((a) => {
|
||
|
return {
|
||
|
...a!,
|
||
|
name: s!,
|
||
|
};
|
||
|
})
|
||
|
}
|
||
|
size={ServerApi.Config.constraints.accommodation_calendar_name_len}
|
||
|
helperText={nameErr}
|
||
|
/>
|
||
|
|
||
|
<PropSelect
|
||
|
editing
|
||
|
label="Logement ciblé"
|
||
|
onValueChange={(v) => {
|
||
|
setCalendar((a) => {
|
||
|
return {
|
||
|
...a!,
|
||
|
accommodation_id: v !== "A" && v ? Number(v) : undefined,
|
||
|
};
|
||
|
});
|
||
|
}}
|
||
|
options={[
|
||
|
{ label: "Tous les logements", value: "A" },
|
||
|
...accommodations.accommodations.fullList.map((a) => {
|
||
|
return { label: a.name, value: a.id.toString() };
|
||
|
}),
|
||
|
]}
|
||
|
value={calendar.accommodation_id?.toString() ?? "A"}
|
||
|
/>
|
||
|
</DialogContent>
|
||
|
<DialogActions>
|
||
|
<Button onClick={cancel}>Annuler</Button>
|
||
|
<Button onClick={submit} disabled={!!nameErr}>
|
||
|
Créer
|
||
|
</Button>
|
||
|
</DialogActions>
|
||
|
</Dialog>
|
||
|
);
|
||
|
}
|