Add an accommodations reservations module (#188)

Add a new module to enable accommodations reservation ![](https://gitea.communiquons.org/attachments/de1f5b12-0a93-40f8-b29d-97665daa6fd5) Reviewed-on: #188
2024-06-22 21:30:26 +00:00
parent 8ecacbe622
commit 1a890844ef
54 changed files with 4230 additions and 33 deletions
--- a/geneit_app/src/routes/family/accommodations/AccommodationsSettingsRoute.tsx
+++ b/geneit_app/src/routes/family/accommodations/AccommodationsSettingsRoute.tsx
@@ -0,0 +1,410 @@
+import AddIcon from "@mui/icons-material/Add";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import HouseIcon from "@mui/icons-material/House";
+import {
+  Alert,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import {
+  Accommodation,
+  AccommodationListApi,
+} from "../../../api/accommodations/AccommodationListApi";
+import {
+  AccommodationCalendarURL,
+  AccommodationsCalendarURLApi,
+} from "../../../api/accommodations/AccommodationsCalendarURLApi";
+import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
+import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
+import { useCreateAccommodationCalendarURL } from "../../../hooks/context_providers/accommodations/CreateAccommodationCalendarURLDialogProvider";
+import { useInstallCalendarDialog } from "../../../hooks/context_providers/accommodations/InstallCalendarDialogProvider";
+import { useUpdateAccommodation } from "../../../hooks/context_providers/accommodations/UpdateAccommodationDialogProvider";
+import { AsyncWidget } from "../../../widgets/AsyncWidget";
+import { useFamily } from "../../../widgets/BaseFamilyRoute";
+import { FamilyCard } from "../../../widgets/FamilyCard";
+import { TimeWidget } from "../../../widgets/TimeWidget";
+import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
+
+const CARDS_WIDTH = "500px";
+
+export function AccommodationsSettingsRoute(): React.ReactElement {
+  return (
+    <>
+      <AccommodationsListCard />
+      <AccommodationsCalURLsCard />
+    </>
+  );
+}
+
+function AccommodationsListCard(): React.ReactElement {
+  const loading = useLoadingMessage();
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+
+  const family = useFamily();
+  const accommodations = useAccommodations();
+
+  const [error, setError] = React.useState<string>();
+  const [success, setSuccess] = React.useState<string>();
+
+  const updateAccommodation = useUpdateAccommodation();
+
+  const createAccommodation = async () => {
+    setError(undefined);
+    setSuccess(undefined);
+    try {
+      const accommodation = await updateAccommodation(
+        {
+          name: "",
+          open_to_reservations: true,
+          need_validation: false,
+          color: "2196f3",
+        },
+        true
+      );
+
+      if (!accommodation) return;
+
+      loading.show("Création du logement en cours...");
+
+      await AccommodationListApi.Create(family.family, accommodation);
+
+      snackbar("Le logement a été créé avec succès !");
+      await accommodations.reloadAccommodationsList();
+    } catch (e) {
+      console.error("Failed to create accommodation!", e);
+      setError(`Échec de la création du logement! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  const requestUpdateAccommodation = async (a: Accommodation) => {
+    setError(undefined);
+    setSuccess(undefined);
+    try {
+      const update = await updateAccommodation(a, false);
+      if (!update) return;
+
+      loading.show("Mise à jour du logement en cours...");
+
+      await AccommodationListApi.Update(a, update);
+
+      snackbar("Le logement a été créé avec succès !");
+      await accommodations.reloadAccommodationsList();
+    } catch (e) {
+      console.error("Failed to update accommodation!", e);
+      setError(`Échec de la mise à jour du logement! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  const deleteAccommodation = async (a: Accommodation) => {
+    setError(undefined);
+    setSuccess(undefined);
+    try {
+      if (
+        !(await confirm(
+          `Voulez-vous vraiment supprimer le logement '${a.name}' ? Cette opération est définitive !`
+        ))
+      )
+        return;
+      loading.show("Suppression du logement en cours...");
+
+      await AccommodationListApi.Delete(a);
+
+      snackbar("Le logement a été supprimé avec succès !");
+      await accommodations.reloadAccommodationsList();
+    } catch (e) {
+      console.error("Failed to delete accommodation!", e);
+      setError(`Échec de la suppression du logement! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  return (
+    <FamilyCard error={error} success={success} style={{ width: CARDS_WIDTH }}>
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Logements
+        </Typography>
+
+        {/* Display the list of accommodations */}
+        {accommodations.accommodations.isEmpty && (
+          <div style={{ textAlign: "center", margin: "25px" }}>
+            Aucun logement enregistré pour le moment !
+          </div>
+        )}
+        {accommodations.accommodations.fullList.map((a) => (
+          <AccommodationCard
+            accommodation={a}
+            onRequestUpdate={requestUpdateAccommodation}
+            onRequestDelete={deleteAccommodation}
+          />
+        ))}
+
+        {family.family.is_admin && (
+          <Button
+            startIcon={<AddIcon />}
+            variant="outlined"
+            color="info"
+            fullWidth
+            onClick={createAccommodation}
+            size={"large"}
+          >
+            Ajouter un logement
+          </Button>
+        )}
+      </CardContent>
+    </FamilyCard>
+  );
+}
+
+function AccommodationCard(p: {
+  accommodation: Accommodation;
+  onRequestUpdate: (a: Accommodation) => void;
+  onRequestDelete: (a: Accommodation) => void;
+}): React.ReactElement {
+  const family = useFamily();
+  return (
+    <Card sx={{ minWidth: 275, margin: "10px 0px" }} variant="outlined">
+      <CardContent>
+        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+          Mis à jour il y a <TimeWidget time={p.accommodation.time_update} />
+        </Typography>
+        <Typography variant="h5" component="div">
+          <HouseIcon sx={{ color: "#" + p.accommodation.color }} />{" "}
+          {p.accommodation.name}
+        </Typography>
+        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+          {p.accommodation.description}
+        </Typography>
+        <Typography variant="body2">
+          <BoolIcon checked={p.accommodation.open_to_reservations} /> Ouvert aux
+          réservations
+          <br />
+          <BoolIcon checked={!p.accommodation.need_validation} /> Réservation
+          sans validation d'un administrateur
+        </Typography>
+      </CardContent>
+      {family.family.is_admin && (
+        <CardActions>
+          <span style={{ flex: 1 }}></span>
+          <Button
+            size="small"
+            onClick={() => p.onRequestUpdate(p.accommodation)}
+          >
+            Modifier
+          </Button>
+          <Button
+            size="small"
+            color="error"
+            onClick={() => p.onRequestDelete(p.accommodation)}
+          >
+            Supprimer
+          </Button>
+        </CardActions>
+      )}
+    </Card>
+  );
+}
+
+function BoolIcon(p: { checked?: boolean }): React.ReactElement {
+  return p.checked ? (
+    <CheckIcon color="success" />
+  ) : (
+    <CloseIcon color="error" />
+  );
+}
+
+function AccommodationsCalURLsCard(): React.ReactElement {
+  const key = React.useRef(0);
+
+  const confirm = useConfirm();
+  const loading = useLoadingMessage();
+
+  const [error, setError] = React.useState<string>();
+  const [success, setSuccess] = React.useState<string>();
+
+  const [list, setList] = React.useState<
+    AccommodationCalendarURL[] | undefined
+  >();
+
+  const family = useFamily();
+
+  const createCalendarURLDialog = useCreateAccommodationCalendarURL();
+  const calendarURLDialog = useInstallCalendarDialog();
+
+  const load = async () => {
+    setList(await AccommodationsCalendarURLApi.GetList(family.family));
+  };
+
+  const reload = () => {
+    key.current += 1;
+    setList(undefined);
+  };
+
+  const onRequestDelete = async (c: AccommodationCalendarURL) => {
+    setError(undefined);
+    setSuccess(undefined);
+    try {
+      if (
+        !(await confirm(
+          `Voulez-vous vraiment supprimer le calendrier '${c.name}' ? Cette opération est définitive !`
+        ))
+      )
+        return;
+
+      loading.show("Suppression du calendrier en cours...");
+
+      await AccommodationsCalendarURLApi.Delete(c);
+
+      setSuccess("Le calendrier a été supprimé avec succès !");
+      reload();
+    } catch (e) {
+      console.error("Failed to delete accommodation!", e);
+      setError(`Échec de la suppression du logement! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  const createCalendarURL = async () => {
+    try {
+      const newCal = await createCalendarURLDialog();
+
+      if (!newCal) return;
+
+      loading.show("Création du calendrier en cours...");
+
+      const cal = await AccommodationsCalendarURLApi.Create(
+        family.family,
+        newCal
+      );
+
+      setSuccess("Le calendrier a été créé avec succès !");
+
+      reload();
+
+      calendarURLDialog(cal);
+    } catch (e) {
+      console.error("Failed to create new accommodation calendar URL!", e);
+      setError(`Échec de la création du calendrier! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  return (
+    <FamilyCard error={error} success={success} style={{ width: CARDS_WIDTH }}>
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          URL de calendriers
+        </Typography>
+        <Typography>
+          Vous pouvez, si vous le souhaitez, importer dans votre application de
+          calendrier le planning de réservation des logements. Pour ce faire, il
+          vous suffit de créer une URL de calendrier.
+        </Typography>
+
+        <Alert severity="info">
+          Les calendriers créés ici ne sont visible que par vous. Vous ne pouvez
+          pas manipuler les calendriers créés par les autres membres de la
+          famille.
+        </Alert>
+
+        <Button
+          startIcon={<AddIcon />}
+          variant="outlined"
+          color="info"
+          fullWidth
+          onClick={createCalendarURL}
+          size={"large"}
+        >
+          Créer un calendrier
+        </Button>
+
+        <br />
+        <br />
+
+        <AsyncWidget
+          ready={list !== undefined}
+          loadKey={key.current}
+          load={load}
+          errMsg="Echec du chargement de la liste des calendriers !"
+          build={() =>
+            list?.length === 0 ? (
+              <>
+                <p style={{ textAlign: "center" }}>
+                  Vous n'avez créé aucun calendrier pour le moment !
+                </p>
+              </>
+            ) : (
+              <>
+                {list?.map((c) => (
+                  <CalendarItem c={c} onRequestDelete={onRequestDelete} />
+                ))}
+              </>
+            )
+          }
+        />
+      </CardContent>
+    </FamilyCard>
+  );
+}
+
+function CalendarItem(p: {
+  c: AccommodationCalendarURL;
+  onRequestDelete: (c: AccommodationCalendarURL) => void;
+}): React.ReactElement {
+  const accommodations = useAccommodations();
+
+  const installCal = useInstallCalendarDialog();
+
+  return (
+    <Card sx={{ minWidth: 275, margin: "10px 0px" }} variant="outlined">
+      <CardContent>
+        <Typography
+          sx={{ fontSize: 14 }}
+          color="text.secondary"
+          gutterBottom
+        ></Typography>
+        <Typography variant="h5" component="div">
+          {p.c.name}
+        </Typography>
+        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+          {p.c.accommodation_id
+            ? accommodations.accommodations.get(p.c.accommodation_id)?.name
+            : "Tous les logements"}
+        </Typography>
+        <Typography variant="body2">
+          Créé il y a <TimeWidget time={p.c.time_create} />
+          <br />
+          Utilisé il y a <TimeWidget time={p.c.time_used} />
+        </Typography>
+      </CardContent>
+
+      <CardActions>
+        <span style={{ flex: 1 }}></span>
+        <Button size="small" onClick={() => installCal(p.c)}>
+          Installer
+        </Button>
+        <Button
+          size="small"
+          color="error"
+          onClick={() => p.onRequestDelete(p.c)}
+        >
+          Supprimer
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}