ability to register a shared calendar (#118)

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

src/components/Attendees/AttendeeSearch.tsx

@@ -1,21 +1,7 @@
-import {
-  Autocomplete,
-  Avatar,
-  CircularProgress,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  TextField,
-} from "@mui/material";
 import { useEffect, useState } from "react";
 import { searchUsers } from "../../features/User/userAPI";
 import { userAttendee } from "../../features/User/userDataTypes";
-
-interface User {
-  email: string;
-  displayName: string;
-  avatarUrl: string;
-}
+import { PeopleSearch, User } from "./PeopleSearch";
 
 export default function UserSearch({
   attendees,
@@ -26,77 +12,43 @@ export default function UserSearch({
   setAttendees: Function;
   disabled?: boolean;
 }) {
-  const [query, setQuery] = useState("");
-  const [options, setOptions] = useState<User[]>([]);
-  const [loading, setLoading] = useState(false);
-
+  const [selectedUsers, setSelectedUsers] = useState(
+    attendees.map((a) => ({
+      email: a.cal_address,
+      displayName: a.cn ?? "",
+      avatarUrl: "",
+      openpaasId: "",
+    }))
+  );
   useEffect(() => {
-    const delayDebounceFn = setTimeout(async () => {
-      if (query) {
-        setLoading(true);
-        const res = await searchUsers(query);
-        setOptions(res);
-        setLoading(false);
-      }
-    }, 300);
-
-    return () => clearTimeout(delayDebounceFn);
-  }, [query]);
-
+    setSelectedUsers(
+      attendees.map((a) => ({
+        email: a.cal_address,
+        displayName: a.cn ?? "",
+        avatarUrl: "",
+        openpaasId: "",
+      }))
+    );
+  }, [attendees]);
   return (
-    <Autocomplete
-      multiple
-      options={options}
-      disabled={disabled}
-      loading={loading}
-      filterOptions={(x) => x}
-      fullWidth
-      getOptionLabel={(option) => option.displayName || option.email}
-      filterSelectedOptions
-      onInputChange={(event, value) => setQuery(value)}
-      onChange={(event, value) =>
-        setAttendees(
-          value.map((a) => ({
-            cn: a.displayName,
-            cal_address: a.email,
-            partstat: "NEED_ACTION",
-            rsvp: "FALSE",
-            role: "CHAIR",
-            cutype: "INDIVIDUAL",
-          }))
-        )
-      }
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label="Search user"
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {loading ? (
-                  <CircularProgress color="inherit" size={20} />
-                ) : null}
-                {params.InputProps.endAdornment}
-              </>
-            ),
-          }}
-        />
-      )}
-      renderOption={(props, option) => {
-        if (attendees.find((a) => a.cal_address === option.email)) return;
-        return (
-          <ListItem {...props} key={option.email} disableGutters>
-            <ListItemAvatar>
-              <Avatar src={option.avatarUrl} alt={option.displayName} />
-            </ListItemAvatar>
-            <ListItemText
-              primary={option.displayName}
-              secondary={option.email}
-            />
-          </ListItem>
-        );
-      }}
-    />
+    <>
+      <PeopleSearch
+        selectedUsers={selectedUsers}
+        disabled={disabled}
+        onChange={(event: any, value: User[]) => {
+          setAttendees(
+            value.map((a: User) => ({
+              cn: a.displayName,
+              cal_address: a.email,
+              partstat: "NEED_ACTION",
+              rsvp: "FALSE",
+              role: "CHAIR",
+              cutype: "INDIVIDUAL",
+            }))
+          );
+          setSelectedUsers(value);
+        }}
+      />
+    </>
   );
 }

src/components/Attendees/PeopleSearch.tsx

@@ -0,0 +1,106 @@
+import CloseIcon from "@mui/icons-material/Close";
+import Autocomplete from "@mui/material/Autocomplete";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import CardHeader from "@mui/material/CardHeader";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import ListItem from "@mui/material/ListItem";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemText from "@mui/material/ListItemText";
+import Modal from "@mui/material/Modal";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useState, useEffect } from "react";
+import { searchUsers } from "../../features/User/userAPI";
+
+export interface User {
+  email: string;
+  displayName: string;
+  avatarUrl: string;
+  openpaasId: string;
+}
+
+export function PeopleSearch({
+  selectedUsers,
+  onChange,
+  disabled,
+}: {
+  selectedUsers: User[];
+  onChange: Function;
+  disabled?: boolean;
+}) {
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState<User[]>([]);
+
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(async () => {
+      if (query) {
+        setLoading(true);
+        const res = await searchUsers(query, ["user"]);
+        setOptions(res);
+        setLoading(false);
+      }
+    }, 300);
+
+    return () => clearTimeout(delayDebounceFn);
+  }, [query]);
+
+  return (
+    <Autocomplete
+      multiple
+      options={options}
+      disabled={disabled}
+      loading={loading}
+      filterOptions={(x) => x}
+      fullWidth
+      getOptionLabel={(option) => option.displayName || option.email}
+      filterSelectedOptions
+      value={selectedUsers}
+      onInputChange={(event, value) => setQuery(value)}
+      onChange={(event, value) => onChange(event, value)}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Search user"
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading ? (
+                    <CircularProgress color="inherit" size={20} />
+                  ) : null}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+            },
+          }}
+        />
+      )}
+      renderOption={(props, option) => {
+        if (selectedUsers.find((u) => u.email === option.email)) return;
+        return (
+          <ListItem
+            {...props}
+            key={option.email + option.displayName}
+            disableGutters
+          >
+            <ListItemAvatar>
+              <Avatar src={option.avatarUrl} alt={option.displayName} />
+            </ListItemAvatar>
+            <ListItemText
+              primary={option.displayName}
+              secondary={option.email}
+            />
+          </ListItem>
+        );
+      }}
+    />
+  );
+}

src/components/Calendar/CalendarColorPicker.tsx

@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+
+const defaultColors = ["#34d399", "#fbbf24", "#f87171", "#60a5fa", "#f472b6"];
+
+export function ColorPicker({
+  selectedColor,
+  colors = defaultColors,
+  onChange,
+}: {
+  selectedColor?: string;
+  colors?: string[];
+  onChange: (color: string) => void;
+}) {
+  return (
+    <Box display="flex" alignItems="center" gap={1}>
+      {colors.map((c) => (
+        <Box
+          key={c}
+          role="button"
+          aria-label={`select color ${c}`}
+          onClick={() => onChange(c)}
+          sx={{
+            width: 20,
+            height: 20,
+            borderRadius: "50%",
+            bgcolor: c,
+            cursor: "pointer",
+            border:
+              selectedColor === c ? "2px solid black" : "2px solid transparent",
+            transition: "all 0.2s",
+          }}
+        />
+      ))}
+    </Box>
+  );
+}

src/components/Calendar/CalendarSearch.tsx

@@ -0,0 +1,336 @@
+import CloseIcon from "@mui/icons-material/Close";
+import Autocomplete from "@mui/material/Autocomplete";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import CardHeader from "@mui/material/CardHeader";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import ListItem from "@mui/material/ListItem";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemText from "@mui/material/ListItemText";
+import Modal from "@mui/material/Modal";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { searchUsers } from "../../features/User/userAPI";
+import { getCalendars } from "../../features/Calendars/CalendarApi";
+import { addSharedCalendarAsync } from "../../features/Calendars/CalendarSlice";
+import { ColorPicker } from "./CalendarColorPicker";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
+import { User, PeopleSearch } from "../Attendees/PeopleSearch";
+
+interface CalendarWithOwner {
+  cal: Record<string, any>;
+  owner: User;
+}
+
+function CalendarItem({
+  cal,
+  onRemove,
+  onColorChange,
+}: {
+  cal: CalendarWithOwner;
+  onRemove: () => void;
+  onColorChange: (color: string) => void;
+}) {
+  return (
+    <Box
+      key={cal.owner.email + cal.cal["dav:name"]}
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      sx={{
+        borderRadius: 2,
+        border: "1px solid #e5e7eb",
+        p: 1,
+        mb: 1,
+      }}
+    >
+      <Box display="flex" alignItems="center" gap={2}>
+        <Avatar
+          src={cal.owner.avatarUrl}
+          alt={cal.owner.email}
+          sx={{
+            border: `2px solid ${cal.cal["apple:color"] ?? "transparent"}`,
+            boxShadow: cal.cal["apple:color"]
+              ? `0 0 0 2px ${cal.cal["apple:color"]}`
+              : "none",
+          }}
+        />
+        <Box>
+          <Typography variant="body1">{cal.cal["dav:name"]}</Typography>
+          <Typography variant="body2" color="textSecondary">
+            {cal.owner.email}
+          </Typography>
+        </Box>
+      </Box>
+
+      <Box display="flex" alignItems="center" gap={1}>
+        <ColorPicker
+          selectedColor={cal.cal["apple:color"]}
+          onChange={onColorChange}
+        />
+        <IconButton size="small" onClick={onRemove}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+}
+
+function SelectedCalendarsList({
+  calendars,
+  selectedCal,
+  onRemove,
+  onColorChange,
+}: {
+  calendars: Record<string, Calendars>;
+  selectedCal: CalendarWithOwner[];
+  onRemove: (cal: CalendarWithOwner) => void;
+  onColorChange: (cal: CalendarWithOwner, color: string) => void;
+}) {
+  if (selectedCal.length === 0) return null;
+
+  const groupedByOwner = selectedCal.reduce<
+    Record<
+      string,
+      {
+        owner: User;
+        visibleCals: CalendarWithOwner[];
+        alreadyExisting: boolean;
+      }
+    >
+  >((acc, cal) => {
+    const exists = Object.values(calendars).some(
+      (existing: any) =>
+        existing.id ===
+        cal.cal?._links?.self?.href
+          .replace("/calendars/", "")
+          .replace(".json", "")
+    );
+
+    if (!acc[cal.owner.email]) {
+      acc[cal.owner.email] = {
+        owner: cal.owner,
+        visibleCals: [],
+        alreadyExisting: false,
+      };
+    }
+
+    if (exists) {
+      acc[cal.owner.email].alreadyExisting = true;
+    } else {
+      acc[cal.owner.email].visibleCals.push(cal);
+    }
+
+    return acc;
+  }, {});
+
+  return (
+    <Box mt={2}>
+      <Typography variant="subtitle1" gutterBottom>
+        Name
+      </Typography>
+
+      {Object.values(groupedByOwner).map(
+        ({ owner, visibleCals, alreadyExisting }) => (
+          <Box key={owner.email} mb={2}>
+            {visibleCals.length > 0 ? (
+              visibleCals.map((cal) =>
+                cal.cal ? (
+                  <CalendarItem
+                    key={cal.owner.email + cal.cal["dav:name"]}
+                    cal={cal}
+                    onRemove={() => onRemove(cal)}
+                    onColorChange={(color) => onColorChange(cal, color)}
+                  />
+                ) : (
+                  <Typography color="textSecondary">
+                    No publicly available calendars for {owner.displayName}
+                  </Typography>
+                )
+              )
+            ) : alreadyExisting ? (
+              <Typography color="textSecondary">
+                No more Calendar for {owner.displayName}
+              </Typography>
+            ) : null}
+          </Box>
+        )
+      )}
+    </Box>
+  );
+}
+
+export default function CalendarSearch({
+  anchorEl,
+  open,
+  onClose,
+}: {
+  anchorEl: HTMLElement | null;
+  open: boolean;
+  onClose: Function;
+}) {
+  const dispatch = useAppDispatch();
+  const openpaasId =
+    useAppSelector((state) => state.user.userData.openpaasId) ?? "";
+  const calendars = useAppSelector((state) => state.calendars.list);
+
+  const [selectedCal, setSelectedCalendars] = useState<CalendarWithOwner[]>([]);
+  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+
+  const handleSave = async () => {
+    if (selectedCal.length > 0) {
+      const idList = await Promise.all(
+        selectedCal.map(async (cal) => {
+          const calId = crypto.randomUUID();
+          const exists = Object.values(calendars).some(
+            (existing: any) =>
+              existing.id ===
+              cal.cal?._links?.self?.href
+                .replace("/calendars/", "")
+                .replace(".json", "")
+          );
+          if (!exists && cal.cal) {
+            await dispatch(
+              addSharedCalendarAsync({
+                userId: openpaasId,
+                calId,
+                cal: { ...cal, color: cal.cal["apple:color"] },
+              })
+            );
+            return cal.cal._links.self.href
+              .replace("/calendars/", "")
+              .replace(".json", "");
+          }
+          return null;
+        })
+      );
+
+      onClose(idList.filter(Boolean));
+      setSelectedCalendars([]);
+      setSelectedUsers([]);
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => {
+        onClose({}, "backdropClick");
+        setSelectedCalendars([]);
+        setSelectedUsers([]);
+      }}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          left: "50%",
+          top: "20%",
+          transform: "translate( -50%)",
+          width: "50vw",
+          maxHeight: "80vh",
+        }}
+      >
+        <Card
+          sx={{
+            p: 2,
+            borderRadius: 3,
+            boxShadow: 6,
+            display: "flex",
+            flexDirection: "column",
+            maxHeight: "80vh",
+          }}
+        >
+          <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+            <IconButton
+              size="small"
+              onClick={() => onClose({}, "backdropClick")}
+            >
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </Box>
+
+          <CardHeader title="Browse other calendars" sx={{ pb: 0 }} />
+          <CardContent sx={{ flex: 1, overflow: "auto" }}>
+            <PeopleSearch
+              selectedUsers={selectedUsers}
+              onChange={async (event: any, value: User[]) => {
+                setSelectedUsers(value);
+
+                const cals = await Promise.all(
+                  value.map(async (user: User) => {
+                    const cals = (await getCalendars(
+                      user.openpaasId,
+                      "sharedPublic=true&withRights=true"
+                    )) as Record<string, any>;
+                    return cals._embedded?.["dav:calendar"]
+                      ? cals._embedded["dav:calendar"].map(
+                          (cal: Record<string, any>) => ({ cal, owner: user })
+                        )
+                      : { cal: undefined, owner: user };
+                  })
+                );
+
+                setSelectedCalendars(cals.flat());
+              }}
+            />
+
+            <SelectedCalendarsList
+              calendars={calendars}
+              selectedCal={selectedCal}
+              onRemove={(cal) => {
+                setSelectedCalendars((prev) =>
+                  prev.filter(
+                    (c) => c.cal._links.self.href !== cal.cal._links.self.href
+                  )
+                );
+                if (
+                  !selectedCal.find(
+                    (c) =>
+                      cal.owner.email === c.owner.email &&
+                      c.cal._links.self.href !== cal.cal._links.self.href
+                  )
+                ) {
+                  setSelectedUsers((prev) =>
+                    prev.filter((u) => u.email !== cal.owner.email)
+                  );
+                }
+              }}
+              onColorChange={(cal, color) =>
+                setSelectedCalendars((prev) =>
+                  prev.map((prevcal) =>
+                    prevcal.owner.email === cal.owner.email &&
+                    prevcal.cal._links.self.href === cal.cal._links.self.href
+                      ? {
+                          ...prevcal,
+                          cal: { ...prevcal.cal, "apple:color": color },
+                        }
+                      : prevcal
+                  )
+                )
+              }
+            />
+          </CardContent>
+
+          <CardActions sx={{ justifyContent: "flex-end", gap: 1 }}>
+            <Button
+              variant="outlined"
+              onClick={() => onClose({}, "backdropClick")}
+            >
+              Cancel
+            </Button>
+            <Button variant="contained" onClick={handleSave}>
+              Add
+            </Button>
+          </CardActions>
+        </Card>
+      </Box>
+    </Modal>
+  );
+}

src/components/Calendar/CalendarSelection.tsx

@@ -72,6 +72,8 @@ function CalendarAccordion({
     </Accordion>
   );
 }
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import CalendarSearch from "./CalendarSearch";
 
 export default function CalendarSelection({
   selectedCalendars,
@@ -102,6 +104,9 @@ export default function CalendarSelection({
   const [selectedCalId, setSelectedCalId] = useState("");
 
   const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
+  const [anchorElCalOthers, setAnchorElCalOthers] =
+    useState<HTMLElement | null>(null);
+
   return (
     <>
       <div>
@@ -137,7 +142,7 @@ export default function CalendarSelection({
           selectedCalendars={selectedCalendars}
           showAddButton
           onAddClick={() => {
-            setAnchorElCal(document.body);
+            setAnchorElCalOthers(document.body);
           }}
           handleToggle={handleCalendarToggle}
           setOpen={(id: string) => {
@@ -146,15 +151,24 @@ export default function CalendarSelection({
           }}
         />
       </div>
-
       <CalendarPopover
         anchorEl={anchorElCal}
         open={Boolean(anchorElCal)}
+        calendar={calendars[selectedCalId] ?? undefined}
         onClose={() => {
           setSelectedCalId("");
           setAnchorElCal(null);
         }}
-        calendar={calendars[selectedCalId] ?? undefined}
+      />
+      <CalendarSearch
+        anchorEl={anchorElCalOthers}
+        open={Boolean(anchorElCalOthers)}
+        onClose={(newCalIds?: string[]) => {
+          setAnchorElCalOthers(null);
+          if (newCalIds?.length) {
+            newCalIds.forEach((id) => handleCalendarToggle(id));
+          }
+        }}
       />
     </>
   );