Add an accommodations reservations module #188
9
geneit_app/package-lock.json
generated
9
geneit_app/package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"@fontsource/roboto": "^5.0.13",
|
||||
"@fullcalendar/core": "^6.1.14",
|
||||
"@fullcalendar/daygrid": "^6.1.14",
|
||||
"@fullcalendar/interaction": "^6.1.14",
|
||||
"@fullcalendar/list": "^6.1.14",
|
||||
"@fullcalendar/react": "^6.1.14",
|
||||
"@mdi/js": "^7.2.96",
|
||||
@ -1077,6 +1078,14 @@
|
||||
"@fullcalendar/core": "~6.1.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/interaction": {
|
||||
"version": "6.1.14",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.14.tgz",
|
||||
"integrity": "sha512-rXum5XCjq+WEPNctFeYL/JKZGeU2rlxrElygocdMegcrIBJQW5hnWWVE+i4/1dOmUKF80CbGVlXUyYXoqK2eFg==",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/list": {
|
||||
"version": "6.1.14",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.14.tgz",
|
||||
|
@ -10,6 +10,7 @@
|
||||
"@fontsource/roboto": "^5.0.13",
|
||||
"@fullcalendar/core": "^6.1.14",
|
||||
"@fullcalendar/daygrid": "^6.1.14",
|
||||
"@fullcalendar/interaction": "^6.1.14",
|
||||
"@fullcalendar/list": "^6.1.14",
|
||||
"@fullcalendar/react": "^6.1.14",
|
||||
"@mdi/js": "^7.2.96",
|
||||
|
@ -1,3 +1,16 @@
|
||||
import { DateSelectArg } from "@fullcalendar/core";
|
||||
import frLocale from "@fullcalendar/core/locales/fr";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
import FullCalendar from "@fullcalendar/react";
|
||||
import {
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
|
||||
import {
|
||||
@ -7,19 +20,7 @@ import {
|
||||
import { AsyncWidget } from "../../../widgets/AsyncWidget";
|
||||
import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
||||
import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
|
||||
import {
|
||||
FormControl,
|
||||
FormLabel,
|
||||
FormGroup,
|
||||
FormControlLabel,
|
||||
Checkbox,
|
||||
FormHelperText,
|
||||
} from "@mui/material";
|
||||
import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
|
||||
import FullCalendar from "@fullcalendar/react";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import frLocale from "@fullcalendar/core/locales/fr";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
|
||||
export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
const loadKey = React.useRef(1);
|
||||
@ -55,6 +56,10 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
setUsers(null);
|
||||
};
|
||||
|
||||
const onSelect = (d: DateSelectArg) => {
|
||||
console.info(d);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FamilyPageTitle title="Réservation" />
|
||||
@ -64,7 +69,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
errMsg="Echec du chargement de la liste des réservations !"
|
||||
build={() => (
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<div style={{ flex: 2, maxWidth: "350px" }}>
|
||||
<div style={{ flex: 1, maxWidth: "250px" }}>
|
||||
{/* Invitation status */}
|
||||
<FormControl
|
||||
sx={{ m: 3 }}
|
||||
@ -163,7 +168,9 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
{/* The calendar */}
|
||||
<div style={{ flex: 5 }}>
|
||||
<FullCalendar
|
||||
plugins={[dayGridPlugin, listPlugin]}
|
||||
editable={true}
|
||||
selectable={true}
|
||||
plugins={[dayGridPlugin, listPlugin, interactionPlugin]}
|
||||
initialView="dayGridMonth"
|
||||
height="700px"
|
||||
locale={frLocale}
|
||||
@ -172,6 +179,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
center: "title",
|
||||
right: "dayGridMonth,dayGridWeek,listWeek",
|
||||
}}
|
||||
select={onSelect}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user