Can create accommodation calendars URL from UI

geneit_app/src/dialogs/accommodations/CreateAccommodationCalendarURLDialog.tsx

@@ -0,0 +1,92 @@
+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/from_utils";
+import { PropEdit } from "../../widgets/forms/PropEdit";
+import { PropSelect } from "../../widgets/forms/PropSelect";
+import { useAccommodations } from "../../widgets/accommodations/BaseAccommodationsRoute";
+
+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>
+  );
+}