update cal details (#113)

* [#65] added button to access cal details

* [#65] added proppatch call

* [#65] added tests

* fixup! [#65] added proppatch call

* [#65] added trimming to name and desc

* fixup! [#65] added proppatch call

* fixup! [#65] added proppatch call

* fixup! [#65] added proppatch call

---------

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Calendar/CalendarSelection.tsx

@@ -1,8 +1,12 @@
-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";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import IconButton from "@mui/material/IconButton";
+import Checkbox from "@mui/material/Checkbox";
+import Button from "@mui/material/Button";
 
 export default function CalendarSelection({
   selectedCalendars,
@@ -27,9 +31,9 @@ export default function CalendarSelection({
       prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]
     );
   };
+  const [selectedCalId, setSelectedCalId] = useState("");
 
   const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
-
   return (
     <>
       <div>
@@ -39,39 +43,35 @@ export default function CalendarSelection({
             <AddIcon />
           </Button>
         </div>
-        {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>
-          );
-        })}
+        {personnalCalendars.map((id) =>
+          CalendarSelector(
+            calendars,
+            id,
+            selectedCalendars,
+            handleCalendarToggle,
+            () => {
+              setAnchorElCal(document.body);
+              setSelectedCalId(id);
+            }
+          )
+        )}
         {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>
-            ))}
+            {delegatedCalendars.map((id) =>
+              CalendarSelector(
+                calendars,
+                id,
+                selectedCalendars,
+                handleCalendarToggle,
+                () => {
+                  setAnchorElCal(document.body);
+                  setSelectedCalId(id);
+                }
+              )
+            )}
           </>
         )}
         {sharedCalendars.length > 0 && (
@@ -79,27 +79,57 @@ export default function CalendarSelection({
             <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>
-            ))}
+            {sharedCalendars.map((id) =>
+              CalendarSelector(
+                calendars,
+                id,
+                selectedCalendars,
+                handleCalendarToggle,
+                () => {
+                  setAnchorElCal(document.body);
+                  setSelectedCalId(id);
+                }
+              )
+            )}
           </>
         )}
       </div>
       <CalendarPopover
         anchorEl={anchorElCal}
         open={Boolean(anchorElCal)}
-        onClose={() => setAnchorElCal(null)}
+        onClose={() => {
+          setAnchorElCal(null);
+        }}
+        calendar={calendars[selectedCalId] ?? undefined}
       />
     </>
   );
 }
+
+function CalendarSelector(
+  calendars: Record<string, Calendars>,
+  id: string,
+  selectedCalendars: string[],
+  handleCalendarToggle: (name: string) => void,
+  setOpen: Function
+) {
+  return (
+    <div key={id}>
+      <label>
+        <Checkbox
+          sx={{
+            color: calendars[id].color,
+            "&.Mui-checked": { color: calendars[id].color },
+          }}
+          size="small"
+          checked={selectedCalendars.includes(id)}
+          onChange={() => handleCalendarToggle(id)}
+        />
+        {calendars[id].name}
+      </label>
+      <IconButton onClick={() => setOpen()}>
+        <MoreVertIcon />
+      </IconButton>
+    </div>
+  );
+}