Can update / delete accommodations
This commit is contained in:
parent
856f4a3f76
commit
91d0b1e0be
@ -87,4 +87,32 @@ export class AccommodationListApi {
|
|||||||
})
|
})
|
||||||
).data;
|
).data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update an accommodation
|
||||||
|
*/
|
||||||
|
static async Update(
|
||||||
|
accommodation: Accommodation,
|
||||||
|
update: UpdateAccommodation
|
||||||
|
): Promise<Accommodation> {
|
||||||
|
return (
|
||||||
|
await APIClient.exec({
|
||||||
|
method: "PUT",
|
||||||
|
uri: `/family/${accommodation.family_id}/accommodations/list/${accommodation.id}`,
|
||||||
|
jsonData: update,
|
||||||
|
})
|
||||||
|
).data;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete an accommodation
|
||||||
|
*/
|
||||||
|
static async Delete(accommodation: Accommodation): Promise<Accommodation> {
|
||||||
|
return (
|
||||||
|
await APIClient.exec({
|
||||||
|
method: "DELETE",
|
||||||
|
uri: `/family/${accommodation.family_id}/accommodations/list/${accommodation.id}`,
|
||||||
|
})
|
||||||
|
).data;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,11 @@
|
|||||||
import { CardContent, Typography, Alert, Button } from "@mui/material";
|
import {
|
||||||
|
CardContent,
|
||||||
|
Typography,
|
||||||
|
Alert,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardActions,
|
||||||
|
} from "@mui/material";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
|
import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
|
||||||
import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
|
import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
|
||||||
@ -7,9 +14,15 @@ import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
|||||||
import { FamilyCard } from "../../../widgets/FamilyCard";
|
import { FamilyCard } from "../../../widgets/FamilyCard";
|
||||||
import AddIcon from "@mui/icons-material/Add";
|
import AddIcon from "@mui/icons-material/Add";
|
||||||
import { useUpdateAccommodation } from "../../../hooks/context_providers/accommodations/UpdateAccommodationDialogProvider";
|
import { useUpdateAccommodation } from "../../../hooks/context_providers/accommodations/UpdateAccommodationDialogProvider";
|
||||||
import { AccommodationListApi } from "../../../api/accommodations/AccommodationListApi";
|
import {
|
||||||
|
Accommodation,
|
||||||
|
AccommodationListApi,
|
||||||
|
} from "../../../api/accommodations/AccommodationListApi";
|
||||||
import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
|
import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
|
||||||
import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
|
import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
|
||||||
|
import { TimeWidget } from "../../../widgets/TimeWidget";
|
||||||
|
import CheckIcon from "@mui/icons-material/Check";
|
||||||
|
import CloseIcon from "@mui/icons-material/Close";
|
||||||
|
|
||||||
export function AccommodationsSettingsRoute(): React.ReactElement {
|
export function AccommodationsSettingsRoute(): React.ReactElement {
|
||||||
return (
|
return (
|
||||||
@ -34,6 +47,8 @@ function AccommodationsListCard(): React.ReactElement {
|
|||||||
const updateAccommodation = useUpdateAccommodation();
|
const updateAccommodation = useUpdateAccommodation();
|
||||||
|
|
||||||
const createAccommodation = async () => {
|
const createAccommodation = async () => {
|
||||||
|
setError(undefined);
|
||||||
|
setSuccess(undefined);
|
||||||
try {
|
try {
|
||||||
const accommodation = await updateAccommodation(
|
const accommodation = await updateAccommodation(
|
||||||
{
|
{
|
||||||
@ -51,11 +66,55 @@ function AccommodationsListCard(): React.ReactElement {
|
|||||||
await AccommodationListApi.Create(family.family, accommodation);
|
await AccommodationListApi.Create(family.family, accommodation);
|
||||||
|
|
||||||
snackbar("Le logement a été créé avec succès !");
|
snackbar("Le logement a été créé avec succès !");
|
||||||
|
|
||||||
await accommodations.reloadAccommodationsList();
|
await accommodations.reloadAccommodationsList();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("Failed to create accommodation!", e);
|
console.error("Failed to create accommodation!", e);
|
||||||
alert(`Échec de la création du logement! ${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 {
|
} finally {
|
||||||
loading.hide();
|
loading.hide();
|
||||||
}
|
}
|
||||||
@ -67,18 +126,90 @@ function AccommodationsListCard(): React.ReactElement {
|
|||||||
<Typography gutterBottom variant="h5" component="div">
|
<Typography gutterBottom variant="h5" component="div">
|
||||||
Logements
|
Logements
|
||||||
</Typography>
|
</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
|
<Button
|
||||||
startIcon={<AddIcon />}
|
startIcon={<AddIcon />}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
color="info"
|
color="info"
|
||||||
fullWidth
|
fullWidth
|
||||||
onClick={createAccommodation}
|
onClick={createAccommodation}
|
||||||
disabled={!family.family.is_admin}
|
|
||||||
size={"large"}
|
size={"large"}
|
||||||
>
|
>
|
||||||
Ajouter un nouveau logement
|
Ajouter un nouveau logement
|
||||||
</Button>
|
</Button>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</FamilyCard>
|
</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">
|
||||||
|
{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" />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user