#637 modify resource (#642)

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>

src/components/Calendar/AccessTab.tsx

@@ -14,7 +14,7 @@ import {
 } from "@linagora/twake-mui";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useI18n } from "twake-i18n";
 import { ErrorSnackbar } from "../Error/ErrorSnackbar";
 import { FieldWithLabel } from "../Event/components/FieldWithLabel";
@@ -38,6 +38,11 @@ export function AccessTab({
 
   const calDAVLink = `${window.DAV_BASE_URL}${calendar.link.replace(".json", "")}`;
 
+  const isResource = useMemo(
+    () => calendar?.owner?.resource,
+    [calendar?.owner?.resource]
+  );
+
   const [secretLink, setSecretLink] = useState("");
   const [open, setOpen] = useState(false);
 
@@ -99,7 +104,7 @@ export function AccessTab({
         onInvitesLoaded={onInvitesLoaded}
       />
 
-      {!!window.DAV_BASE_URL && (
+      {!!window.DAV_BASE_URL && !isResource && (
         <FieldWithLabel label={t("calendar.caldav_access")} isExpanded={false}>
           <Box mt={2}>
             <TextField

src/components/Calendar/CalendarSelection.tsx

@@ -219,8 +219,9 @@ export default function CalendarSelection({
           }}
           showAddButton
           handleToggle={handleCalendarToggle}
-          setOpen={(_) => {
+          setOpen={(id: string) => {
-            // TO DO: Implement open resource selection
+            setAnchorElCal(document.body);
+            setSelectedCalId(id);
           }}
           defaultExpanded
           hideOwner={true}

src/components/Calendar/SettingsTab.tsx

@@ -7,13 +7,17 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography,
+  useTheme,
 } from "@linagora/twake-mui";
 import LockOutlineIcon from "@mui/icons-material/LockOutline";
+import LayersOutlinedIcon from "@mui/icons-material/LayersOutlined";
+import { alpha } from "@mui/material/styles";
 import PublicIcon from "@mui/icons-material/Public";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useI18n } from "twake-i18n";
 import { AddDescButton } from "../Event/AddDescButton";
 import { ColorPicker } from "./CalendarColorPicker";
+import { InfoRow } from "../Event/InfoRow";
 
 export function SettingsTab({
   name,
@@ -41,6 +45,14 @@ export function SettingsTab({
   const userId =
     useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
   const isOwn = calendar ? extractEventBaseUuid(calendar.id) === userId : true;
+  const theme = useTheme();
+  const infoIconColor = alpha(theme.palette.grey[900], 0.9);
+  const infoIconSx = { minWidth: "25px", marginRight: 2, color: infoIconColor };
+
+  const isResource = useMemo(
+    () => calendar?.owner?.resource,
+    [calendar?.owner?.resource]
+  );
 
   useEffect(() => {
     if (description) setToggleDesc(true);
@@ -50,38 +62,63 @@ export function SettingsTab({
     <>
       {/* Form group 1: Name field - first group, margin top 0 */}
       <Box mt={0}>
-        <Typography variant="h6" sx={{ margin: 0 }}>
+        <Typography
-          {t("calendarPopover.settings.calendarName")}
+          variant="h6"
+          sx={{ margin: 0, marginBottom: isResource ? "16px" : 0 }}
+        >
+          {t(
+            isResource
+              ? "calendarPopover.settings.resourceName"
+              : "calendarPopover.settings.calendarName"
+          )}
         </Typography>
         <Box sx={{ marginTop: "6px" }}>
-          <TextField
+          {isResource ? (
-            fullWidth
+            <InfoRow
-            label=""
+              alignItems="flex-start"
-            inputProps={{ "aria-label": t("common.name") }}
+              icon={
-            placeholder={t("common.name")}
+                <Box sx={infoIconSx}>
-            value={name}
+                  <LayersOutlinedIcon />
-            onChange={(e) => setName(e.target.value)}
+                </Box>
-            size="small"
+              }
-            sx={{
+              text={name}
-              "&.MuiFormControl-root": {
+              style={{
-                marginTop: 0,
+                fontSize: "16px",
-                marginBottom: 0,
+                fontFamily: "'Inter', sans-serif",
-              },
+              }}
-            }}
+            />
-          />
+          ) : (
+            <TextField
+              fullWidth
+              label=""
+              inputProps={{ "aria-label": t("common.name") }}
+              placeholder={t("common.name")}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              size="small"
+              sx={{
+                "&.MuiFormControl-root": {
+                  marginTop: 0,
+                  marginBottom: 0,
+                },
+              }}
+            />
+          )}
         </Box>
       </Box>
 
       {/* Form group 2: Description */}
-      <Box mt={2}>
+      {!isResource && (
-        <AddDescButton
+        <Box mt={2}>
-          showDescription={toggleDesc}
+          <AddDescButton
-          setShowDescription={setToggleDesc}
+            showDescription={toggleDesc}
-          showMore={false}
+            setShowDescription={setToggleDesc}
-          description={description}
+            showMore={false}
-          setDescription={setDescription}
+            description={description}
-        />
+            setDescription={setDescription}
-      </Box>
+          />
+        </Box>
+      )}
 
       {/* Form group 3: Color */}
       <Box mt={2}>

src/features/Calendars/api/addCalendarResourceAsync.ts

@@ -43,7 +43,7 @@ export const addCalendarResourceAsync = createAsyncThunk<
 
       if (resourceId) {
         try {
-          const resource = await getResourceDetails(resourceId!);
+          const resource = await getResourceDetails(resourceId);
           owner = {
             ...(await getUserDetails(resource.creator)),
             resource: true,

src/features/Events/EventModal.tsx

@@ -666,6 +666,7 @@ function EventPopover({
     resetAllStateToDefault();
     setStart("");
     setEnd("");
+    setSelectedResources([]);
     shouldSyncFromRangeRef.current = true; // Reset for next time
     isCalendarIdUserSelectedRef.current = false; // Reset so next open gets fresh default
   };

src/locales/en.json

@@ -83,7 +83,8 @@
       "import": "Import"
     },
     "settings": {
-      "calendarName": "Calendar name"
+      "calendarName": "Calendar name",
+      "resourceName": "Resource name"
     },
     "access": {
       "grantAccessRights": "Grant Access rights",

src/locales/fr.json

@@ -85,7 +85,8 @@
       "import": "Importer"
     },
     "settings": {
-      "calendarName": "Nom du calendrier"
+      "calendarName": "Nom du calendrier",
+      "resourceName": "Nom de la ressource"
     },
     "access": {
       "grantAccessRights": "Accorder des droits d'accès",

src/locales/ru.json

@@ -85,7 +85,8 @@
       "import": "Импорт"
     },
     "settings": {
-      "calendarName": "Название календаря"
+      "calendarName": "Название календаря",
+      "resourceName": "Название ресурса"
     },
     "access": {
       "grantAccessRights": "Предоставить права доступа",

src/locales/vi.json

@@ -83,7 +83,8 @@
       "import": "Nhập"
     },
     "settings": {
-      "calendarName": "Tên lịch"
+      "calendarName": "Tên lịch",
+      "resourceName": "Tên tài nguyên"
     },
     "access": {
       "grantAccessRights": "Cấp quyền truy cập",