eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#64] added creation modal to list and api call

Browse Source
This commit is contained in:
Camille Moussu
2025-09-11 16:59:03 +02:00
committed by Benoit TELLIER
parent d1140a47b2
commit 9d43c15ee0
6 changed files with 152 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calendar/CalendarSelection.tsx
+66 -49
View File
@@ -1,4 +1,8 @@
import { Button } from "@mui/material";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import AddIcon from "@mui/icons-material/Add";
import { useEffect, useState } from "react";
import CalendarPopover from "../../features/Calendars/CalendarModal";
export default function CalendarSelection({
selectedCalendars,
@@ -24,32 +28,20 @@ export default function CalendarSelection({
);
};
useEffect(() => {}, [calendars]);
const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
return (
<div>
<span className="calendarListHeader">
<h3>Personnal Calendars</h3>
</span>
{personnalCalendars.map((id) => {
return (
<div key={id}>
<label>
<input
type="checkbox"
style={{ backgroundColor: calendars[id].color }}
checked={selectedCalendars.includes(id)}
onChange={() => handleCalendarToggle(id)}
/>
{calendars[id].name}
</label>
</div>
);
})}
{delegatedCalendars.length > 0 && (
<>
<span className="calendarListHeader">
<h3>Delegated Calendars</h3>
</span>
{delegatedCalendars.map((id) => (
<>
<div>
<div className="calendarListHeader">
<h3>Personnal Calendars</h3>
<Button onClick={() => setAnchorElCal(document.body)}>
<AddIcon />
</Button>
</div>
{personnalCalendars.map((id) => {
return (
<div key={id}>
<label>
<input
@@ -61,29 +53,54 @@ export default function CalendarSelection({
{calendars[id].name}
</label>
</div>
))}
</>
)}
{sharedCalendars.length > 0 && (
<>
<span className="calendarListHeader">
<h3>Shared Calendars</h3>
</span>
{sharedCalendars.map((id) => (
<div key={id}>
<label>
<input
type="checkbox"
style={{ backgroundColor: calendars[id].color }}
checked={selectedCalendars.includes(id)}
onChange={() => handleCalendarToggle(id)}
/>
{calendars[id].name}
</label>
</div>
))}
</>
)}
</div>
);
})}
{delegatedCalendars.length > 0 && (
<>
<span className="calendarListHeader">
<h3>Delegated Calendars</h3>
</span>
{delegatedCalendars.map((id) => (
<div key={id}>
<label>
<input
type="checkbox"
style={{ backgroundColor: calendars[id].color }}
checked={selectedCalendars.includes(id)}
onChange={() => handleCalendarToggle(id)}
/>
{calendars[id].name}
</label>
</div>
))}
</>
)}
{sharedCalendars.length > 0 && (
<>
<span className="calendarListHeader">
<h3>Shared Calendars</h3>
</span>
{sharedCalendars.map((id) => (
<div key={id}>
<label>
<input
type="checkbox"
style={{ backgroundColor: calendars[id].color }}
checked={selectedCalendars.includes(id)}
onChange={() => handleCalendarToggle(id)}
/>
{calendars[id].name}
</label>
</div>
))}
</>
)}
</div>
<CalendarPopover
anchorEl={anchorElCal}
open={Boolean(anchorElCal)}
onClose={() => setAnchorElCal(null)}
/>
</>
);
}