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

#598 resource field in event (#634)

Browse Source 
Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
This commit is contained in:
lethemanh
2026-03-17 20:11:12 +07:00
committed by GitHub
parent e4fb209147
commit 387e64d58c
21 changed files with 503 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calendar/CalendarResources.tsx
+4 -1
View File
@@ -291,7 +291,10 @@ export default function CalendarResources({
const successfulCals = results
.filter((result) => result.status === "fulfilled")
.map((result) => (result as PromiseFulfilledResult<unknown>).value)
.map(
(result) =>
(result as PromiseFulfilledResult<CalendarWithOwner[]>).value
)
.flat()
.filter(Boolean);
src/components/Event/EventFormFields.tsx
+29
View File
@@ -50,6 +50,7 @@ import RepeatEvent from "./EventRepeat";
import { useAllDayToggle } from "./hooks/useAllDayToggle";
import { combineDateTime, splitDateTime } from "./utils/dateTimeHelpers";
import { validateEventForm } from "./utils/formValidation";
import { Resource, ResourceSearch } from "../Attendees/ResourceSearch";
interface EventFormFieldsProps {
// Form state
@@ -84,6 +85,8 @@ interface EventFormFieldsProps {
setHasVideoConference: (hasVideoConference: boolean) => void;
meetingLink: string | null;
setMeetingLink: (meetingLink: string | null) => void;
selectedResources: Resource[];
setSelectedResources: (resources: Resource[]) => void;
// UI state
showMore: boolean;
@@ -166,6 +169,8 @@ export default function EventFormFields({
onValidationChange,
showValidationErrors = false,
onHasEndDateChangedChange,
selectedResources,
setSelectedResources,
}: EventFormFieldsProps) {
const { t } = useI18n();
@@ -478,6 +483,10 @@ export default function EventFormFields({
onCalendarChange?.(newCalendarId);
};
const handleResourceChange = (resources: Resource[]) => {
setSelectedResources(resources);
};
return (
<>
<FieldWithLabel
@@ -858,6 +867,26 @@ export default function EventFormFields({
{showMore && (
<>
<FieldWithLabel
label={t("event.form.resource")}
isExpanded={showMore}
>
<FormControl fullWidth margin="dense" size="small">
<ResourceSearch
objectTypes={["resource"]}
selectedResources={selectedResources}
inputSlot={(params) => <TextField {...params} size="small" />}
onChange={async (
_event: React.SyntheticEvent,
value: Resource[]
) => {
handleResourceChange(value);
}}
hideLabel={true}
/>
</FormControl>
</FieldWithLabel>
<FieldWithLabel
label={t("event.form.notification")}
isExpanded={showMore}
src/components/Event/InfoRow.tsx
+1
View File
@@ -72,6 +72,7 @@ export function InfoRow({
alignItems,
gap: 1,
marginBottom: 1,
flexWrap: "wrap",
}}
>
{icon}
src/features/Calendars/api/addCalendarResourceAsync.ts
+18 -8
View File
@@ -1,5 +1,5 @@
import { OpenPaasUserData } from "@/features/User/type/OpenPaasUserData";
import { getResourceDetails } from "@/features/User/userAPI";
import { getResourceDetails, getUserDetails } from "@/features/User/userAPI";
import { toRejectedError } from "@/utils/errorUtils";
import { createAsyncThunk } from "@reduxjs/toolkit";
import { addSharedCalendar } from "../CalendarApi";
@@ -27,14 +27,24 @@ export const addCalendarResourceAsync = createAsyncThunk<
>(
"calendars/addCalendarResource",
async ({ userId, calId, cal }, { rejectWithValue }) => {
const resourceId = cal.cal._links.self?.href
?.replace("/calendars/", "")
?.replace(".json", "")
?.split("/")[0];
let owner: OpenPaasUserData = {
firstname: "",
lastname: cal.cal["dav:name"] ?? "",
emails: [],
resource: true,
};
try {
await addSharedCalendar(userId, calId, cal);
const ownerData = await getResourceDetails(
cal.cal._links.self.href
.replace("/calendars/", "")
.replace(".json", "")
.split("/")[0]
);
const resource = await getResourceDetails(resourceId!);
owner = {
...(await getUserDetails(resource.creator)),
resource: true,
};
return {
calId: cal.cal._links.self?.href
@@ -44,7 +54,7 @@ export const addCalendarResourceAsync = createAsyncThunk<
link: `/calendars/${userId}/${calId}.json`,
desc: cal.cal["caldav:description"] ?? "",
name: cal.cal["dav:name"] ?? "",
owner: ownerData,
owner,
};
} catch (err) {
return rejectWithValue(toRejectedError(err));
src/features/Events/EventModal.tsx
+52 -5
View File
@@ -43,6 +43,7 @@ import { userAttendee } from "../User/models/attendee";
import { CalendarEvent, RepetitionObject } from "./EventsTypes";
import { useEventOrganizer } from "./useEventOrganizer";
import { buildDelegatedEventURL } from "./utils/buildDelegatedEventURL";
import { Resource } from "@/components/Attendees/ResourceSearch";
function EventPopover({
open,
@@ -86,6 +87,16 @@ function EventPopover({
return resolveTimezone(tz);
}, [calendarTimezone]);
const resources: Resource[] = useMemo(() => {
const resourcesInEvent =
event?.attendee?.filter((attendee) => attendee.cutype === "RESOURCE") ??
[];
return resourcesInEvent.map((resource) => ({
email: resource.cal_address,
displayName: resource.cn,
}));
}, [event?.attendee]);
const [showMore, setShowMore] = useState(false);
const [showDescription, setShowDescription] = useState(
event?.description ? true : false
@@ -127,6 +138,7 @@ function EventPopover({
const [repetition, setRepetition] = useState<RepetitionObject>(
event?.repetition ?? ({} as RepetitionObject)
);
const [selectedResources, setSelectedResources] = useState(resources ?? []);
// Derive the effective organizer based on the selected calendar.
// When a delegated calendar is selected, the organizer must be the
@@ -139,11 +151,16 @@ function EventPopover({
const [attendees, setAttendees] = useState<userAttendee[]>(
event?.attendee
? event.attendee.filter((a) => a.cal_address !== organizer?.cal_address)
? event.attendee.filter(
(a) =>
a.cal_address !== organizer?.cal_address && a.cutype !== "RESOURCE"
)
: []
);
const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? "");
const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
const [eventClass, setEventClass] = useState<string>(
event?.class ?? "PUBLIC"
);
const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
const [timezone, setTimezone] = useState(
event?.timezone ? resolveTimezone(event.timezone) : resolvedCalendarTimezone
@@ -200,6 +217,7 @@ function EventPopover({
setHasVideoConference(false);
setMeetingLink(null);
setHasEndDateChanged(false);
setSelectedResources([]);
}, [resolvedCalendarTimezone, defaultCalendarId]);
// Track if we should sync from selectedRange (only on initial selection, not on toggle)
@@ -466,7 +484,9 @@ function EventPopover({
setAttendees(
event.attendee
? event.attendee.filter(
(a) => a.cal_address !== organizer?.cal_address
(a) =>
a.cal_address !== organizer?.cal_address &&
a.cutype !== "RESOURCE"
)
: []
);
@@ -491,17 +511,23 @@ function EventPopover({
setDescription(event.description);
}
}
setSelectedResources(resources ?? []);
} else if (event && event.attendee && event.attendee.length > 0) {
// Handle tempEvent case (no uid but has attendees from temp calendar search)
setAttendees(
event.attendee.filter((a) => a.cal_address !== organizer?.cal_address)
event.attendee.filter(
(a) =>
a.cal_address !== organizer?.cal_address && a.cutype !== "RESOURCE"
)
);
setSelectedResources(resources ?? []);
}
}, [
event,
organizer?.cal_address,
resolvedCalendarTimezone,
defaultCalendarId,
resources,
]);
// Reset state when creating new event (event is empty object or undefined)
@@ -535,6 +561,7 @@ function EventPopover({
setHasVideoConference(false);
setMeetingLink(null);
setHasEndDateChanged(false);
setSelectedResources([]);
}
if (!isCreatingNew) {
@@ -640,6 +667,7 @@ function EventPopover({
resetAllStateToDefault();
setStart("");
setEnd("");
setSelectedResources([]);
shouldSyncFromRangeRef.current = true; // Reset for next time
isCalendarIdUserSelectedRef.current = false; // Reset so next open gets fresh default
};
@@ -666,6 +694,7 @@ function EventPopover({
showDescription,
showRepeat,
hasEndDateChanged,
resources: selectedResources,
};
return buildEventFormTempData(formState);
}, [
@@ -688,6 +717,7 @@ function EventPopover({
showDescription,
showRepeat,
hasEndDateChanged,
selectedResources,
]);
// Check for temp data when modal opens
@@ -722,6 +752,7 @@ function EventPopover({
setShowDescription,
setShowRepeat,
setHasEndDateChanged,
setSelectedResources,
});
// Clear the error flag but keep data until successful save
const updatedTempData = { ...tempData, fromError: false };
@@ -766,7 +797,7 @@ function EventPopover({
uid: newEventUID,
description,
location,
class: eventClass,
class: eventClass as "PUBLIC" | "PRIVATE" | "CONFIDENTIAL",
repetition,
organizer,
timezone,
@@ -787,6 +818,20 @@ function EventPopover({
x_openpass_videoconference: meetingLink || undefined,
};
// Map data of resources to attendee before creating event
if (selectedResources?.length) {
selectedResources.forEach((resource: Resource) => {
newEvent.attendee.push({
cn: resource?.displayName ?? "",
cal_address: resource?.email ?? "",
partstat: "NEEDS-ACTION",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "RESOURCE",
});
});
}
if (allday) {
const startDateOnly = (start || "").split("T")[0];
const endDateOnlyUI = (end || start || "").split("T")[0];
@@ -957,6 +1002,8 @@ function EventPopover({
onValidationChange={setIsFormValid}
showValidationErrors={showValidationErrors}
onHasEndDateChangedChange={setHasEndDateChanged}
setSelectedResources={setSelectedResources}
selectedResources={selectedResources}
/>
</ResponsiveDialog>
);
src/features/Events/EventPreview/EventPreviewActionMenu.tsx
+3 -1
View File
@@ -28,7 +28,9 @@ export function EventPreviewActionMenu({
const mailSpaUrl = window.MAIL_SPA_URL ?? null;
const attendees = event.attendee ?? [];
const otherAttendees = attendees.filter((a) => a.cal_address !== userEmail);
const otherAttendees = attendees.filter(
(a) => a.cal_address !== userEmail && a.cutype !== "RESOURCE"
);
return (
<Menu open={Boolean(anchorEl)} onClose={onClose} anchorEl={anchorEl}>
src/features/Events/EventPreview/EventPreviewDetails.tsx
+67 -3
View File
@@ -1,5 +1,6 @@
import { InfoRow } from "@/components/Event/InfoRow";
import { Box, Button, Typography } from "@linagora/twake-mui";
import LayersOutlinedIcon from "@mui/icons-material/LayersOutlined";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
@@ -11,6 +12,7 @@ import { useI18n } from "twake-i18n";
import { CalendarEvent } from "../EventsTypes";
import { EventPreviewAttendees } from "./EventPreviewAttendees";
import { makeRecurrenceString } from "./utils/makeRecurrenceString";
import { useMemo } from "react";
interface EventPreviewDetailsProps {
event: CalendarEvent;
@@ -28,13 +30,25 @@ export function EventPreviewDetails({
const infoIconColor = alpha(theme.palette.grey[900], 0.9);
const infoIconSx = { minWidth: "25px", marginRight: 2, color: infoIconColor };
const resources = useMemo(
() => event?.attendee?.filter((attendee) => attendee.cutype === "RESOURCE"),
[event?.attendee]
);
const eventAttendees = useMemo(
() =>
event?.attendee?.filter((attendee) => attendee.cutype !== "RESOURCE") ??
[],
[event?.attendee]
);
const attendees =
event.attendee?.filter(
eventAttendees?.filter(
(a) => a.cal_address !== event.organizer?.cal_address
) || [];
const organizer = event.attendee?.find(
const organizer = eventAttendees?.find(
(a) => a.cal_address === event.organizer?.cal_address
);
const showDetails = isNotPrivate || isOwn;
if (!showDetails) {
@@ -91,7 +105,7 @@ export function EventPreviewDetails({
<EventPreviewAttendees
attendees={attendees}
organizer={organizer}
allAttendees={event.attendee ?? []}
allAttendees={eventAttendees ?? []}
start={event.start}
end={event.end}
timezone={event.timezone}
@@ -112,6 +126,56 @@ export function EventPreviewDetails({
/>
)}
{/* Resource */}
{resources && (
<InfoRow
alignItems="flex-start"
icon={
<Box sx={infoIconSx}>
<LayersOutlinedIcon />
</Box>
}
content={resources.map((resource, index) => (
<Box
sx={{
marginRight: "5px",
}}
>
<Typography
variant="body2"
color="textPrimary"
sx={{
wordBreak: "break-word",
whiteSpace: "pre-line",
maxHeight: "33vh",
overflowY: "auto",
width: "100%",
}}
>
{resource.cn}
{index < resources.length - 1 ? "," : ""}
</Typography>
<Typography
sx={{
wordBreak: "break-word",
whiteSpace: "pre-line",
overflowY: "auto",
width: "100%",
fontSize: "13px",
color: "#717D96",
}}
>
{t(`eventPreview.${resource.partstat}`)}
</Typography>
</Box>
))}
style={{
fontSize: "16px",
fontFamily: "'Inter', sans-serif",
}}
/>
)}
{/* Description */}
{event.description && (
<InfoRow
src/features/Events/EventUpdateModal.tsx
+47 -1
View File
@@ -44,6 +44,7 @@ import { deleteEvent, getEvent, putEvent } from "./EventApi";
import { CalendarEvent, RepetitionObject } from "./EventsTypes";
import { moveEventBetweenCalendars } from "./updateEventHelpers/moveEventBetweenCalendars";
import { detectRecurringEventChanges } from "./utils/detectRecurringEventChanges";
import { Resource } from "@/components/Attendees/ResourceSearch";
function EventUpdateModal({
eventId,
@@ -91,6 +92,16 @@ function EventUpdateModal({
return { zones, browserTz, getTimezoneOffset };
}, []);
const resources: Resource[] = useMemo(() => {
const resourcesInEvent =
event?.attendee?.filter((attendee) => attendee.cutype === "RESOURCE") ??
[];
return resourcesInEvent.map((resource) => ({
email: resource.cal_address,
displayName: resource.cn,
}));
}, [event?.attendee]);
const [showMore, setShowMore] = useState(false);
const [showDescription, setShowDescription] = useState(
event?.description ? true : false
@@ -129,6 +140,7 @@ function EventUpdateModal({
const [isFormValid, setIsFormValid] = useState(false);
const [showValidationErrors, setShowValidationErrors] = useState(false);
const [hasEndDateChanged, setHasEndDateChanged] = useState(false);
const [selectedResources, setSelectedResources] = useState(resources ?? []);
const resetAllStateToDefault = useCallback(() => {
setShowMore(false);
@@ -151,6 +163,7 @@ function EventUpdateModal({
setTimezone(resolveTimezone(browserDefaultTimeZone));
setHasVideoConference(false);
setMeetingLink(null);
setSelectedResources([]);
}, [defaultCalendarId]);
// Prevent repeated initialization loops
@@ -297,7 +310,8 @@ function EventUpdateModal({
eventToDisplay.attendee
? eventToDisplay.attendee.filter(
(a: userAttendee) =>
a.cal_address !== eventToDisplay.organizer?.cal_address
a.cal_address !== eventToDisplay.organizer?.cal_address &&
a.cutype !== "RESOURCE"
)
: []
);
@@ -335,6 +349,15 @@ function EventUpdateModal({
setDescription(eventToDisplay.description);
}
}
setSelectedResources(
(eventToDisplay.attendee ?? [])
.filter((a: userAttendee) => a.cutype === "RESOURCE")
.map((a) => ({
email: a.cal_address,
displayName: a.cn,
}))
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
@@ -345,6 +368,7 @@ function EventUpdateModal({
calList,
masterEvent,
isLoadingMasterEvent,
resources,
]);
// Helper to close modal(s) - use onCloseAll if available to close preview modal too
@@ -387,6 +411,7 @@ function EventUpdateModal({
showDescription,
showRepeat,
hasEndDateChanged,
resources: selectedResources,
};
const context: EventFormContext = {
eventId,
@@ -417,6 +442,7 @@ function EventUpdateModal({
eventId,
calId,
typeOfAction,
selectedResources,
]);
// Check for temp data when modal opens
@@ -454,6 +480,7 @@ function EventUpdateModal({
setShowDescription,
setShowRepeat,
setHasEndDateChanged,
setSelectedResources,
});
// Clear the error flag but keep data until successful save
const updatedTempData = { ...tempData, fromError: false };
@@ -612,6 +639,23 @@ function EventUpdateModal({
x_openpass_videoconference: meetingLink || undefined,
};
// Map data of resources to attendee before creating event
if (selectedResources?.length) {
if (!newEvent.attendee) {
newEvent.attendee = [];
}
selectedResources.forEach((resource: Resource) => {
newEvent.attendee.push({
cn: resource?.displayName ?? "",
cal_address: resource?.email ?? "",
partstat: "NEEDS-ACTION",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "RESOURCE",
});
});
}
// Special case: When converting recurring event to non-recurring
if (
recurrenceId &&
@@ -1088,6 +1132,8 @@ function EventUpdateModal({
onValidationChange={setIsFormValid}
showValidationErrors={showValidationErrors}
onHasEndDateChangedChange={setHasEndDateChanged}
selectedResources={selectedResources}
setSelectedResources={setSelectedResources}
/>
</ResponsiveDialog>
);
src/features/Events/EventsTypes.ts
+2
View File
@@ -1,3 +1,4 @@
import { Resource } from "@/components/Attendees/ResourceSearch";
import { Calendar } from "../Calendars/CalendarTypes";
import { VObjectProperty } from "../Calendars/types/CalendarData";
import { userAttendee } from "../User/models/attendee";
@@ -29,6 +30,7 @@ export interface CalendarEvent {
alarm?: AlarmObject;
exdates?: string[];
passthroughProps?: VObjectProperty[];
selectedResources?: Resource[];
}
export interface RepetitionObject {
src/features/User/models/attendee.ts
+1 -1
View File
@@ -1,5 +1,5 @@
export type AttendeeRole = "CHAIR" | "REQ-PARTICIPANT" | "OPT-PARTICIPANT";
export type CuType = "INDIVIDUAL" | "GROUP";
export type CuType = "INDIVIDUAL" | "GROUP" | "RESOURCE";
export type PartStat = "ACCEPTED" | "DECLINED" | "TENTATIVE" | "NEEDS-ACTION";
export interface userAttendee {
src/features/User/userAPI.ts
+1 -1
View File
@@ -45,7 +45,7 @@ export async function getUserDetails(id: string): Promise<OpenPaasUserData> {
export async function getResourceDetails(id: string): Promise<ResourceData> {
const resource = await api
.get(`linagora.esn.resource/api/resources/${id}`)
.get(`linagora.esn.resource/api/resources/${encodeURIComponent(id)}`)
.json();
return resource as ResourceData;
}
src/locales/en.json
+4 -1
View File
@@ -187,7 +187,9 @@
"busy": "Busy",
"visibleTo": "Visible to",
"visibleAll": "All",
"visibleParticipants": "Participants"
"visibleParticipants": "Participants",
"resource": "Resource",
"select_resource_placeholder": "Add resource"
},
"validation": {
"titleRequired": "Title is required",
@@ -281,6 +283,7 @@
"ACCEPTED": "Accept",
"TENTATIVE": "Maybe",
"DECLINED": "Decline",
"NEEDS-ACTION": "Pending",
"showMore": "Show more",
"showLess": "Show less",
"joinVideo": "Join the video conference",
src/locales/fr.json
+4 -1
View File
@@ -188,7 +188,9 @@
"busy": "Occupé",
"visibleTo": "Visible par",
"visibleAll": "Tous",
"visibleParticipants": "Participants"
"visibleParticipants": "Participants",
"resource": "Ressource",
"select_resource_placeholder": "Ajouter une ressource"
},
"validation": {
"titleRequired": "Le titre est obligatoire",
@@ -282,6 +284,7 @@
"ACCEPTED": "Accepter",
"TENTATIVE": "Peut-être",
"DECLINED": "Décliner",
"NEEDS-ACTION": "En attente",
"showMore": "Afficher plus",
"showLess": "Afficher moins",
"joinVideo": "Rejoindre la visioconférence",
src/locales/ru.json
+4 -1
View File
@@ -188,7 +188,9 @@
"busy": "Занят",
"visibleTo": "Видно для",
"visibleAll": "Всех",
"visibleParticipants": "Участников"
"visibleParticipants": "Участников",
"resource": "Ресурс",
"select_resource_placeholder": "Добавить ресурс"
},
"validation": {
"titleRequired": "Укажите название",
@@ -282,6 +284,7 @@
"ACCEPTED": "Да",
"TENTATIVE": "Возможно",
"DECLINED": "Нет",
"NEEDS-ACTION": "В ожидании",
"showMore": "Показать больше",
"showLess": "Показать меньше",
"joinVideo": "Присоединиться к видеоконференции",
src/locales/vi.json
+4 -1
View File
@@ -186,7 +186,9 @@
"busy": "Bận",
"visibleTo": "Hiển thị với",
"visibleAll": "Tất cả",
"visibleParticipants": "Người tham gia"
"visibleParticipants": "Người tham gia",
"resource": "Tài nguyên",
"select_resource_placeholder": "Thêm tài nguyên"
},
"validation": {
"titleRequired": "Tiêu đề là bắt buộc",
@@ -280,6 +282,7 @@
"ACCEPTED": "Chấp nhận",
"TENTATIVE": "Có thể",
"DECLINED": "Từ chối",
"NEEDS-ACTION": "Đang chờ",
"showMore": "Xem thêm",
"showLess": "Thu gọn",
"joinVideo": "Tham gia cuộc họp video",
src/utils/eventFormTempStorage.ts
+5
View File
@@ -1,3 +1,4 @@
import { Resource } from "@/components/Attendees/ResourceSearch";
import { RepetitionObject } from "@/features/Events/EventsTypes";
import { userAttendee } from "@/features/User/models/attendee";
@@ -29,6 +30,7 @@ export interface EventFormTempData {
typeOfAction?: "solo" | "all";
// Flag to indicate this is from an error
fromError?: boolean;
resources?: Resource[];
}
const STORAGE_KEY_PREFIX = "eventFormTempData_";
@@ -94,6 +96,7 @@ export interface EventFormState {
showDescription?: boolean;
showRepeat?: boolean;
hasEndDateChanged?: boolean;
resources?: Resource[];
}
export interface EventFormContext {
@@ -133,6 +136,7 @@ export interface EventFormSetters {
setShowDescription?: (value: boolean) => void;
setShowRepeat?: (value: boolean) => void;
setHasEndDateChanged?: (value: boolean) => void;
setSelectedResources?: (value: Resource[]) => void;
}
export function restoreFormDataFromTemp(
@@ -169,4 +173,5 @@ export function restoreFormDataFromTemp(
) {
setters.setHasEndDateChanged(tempData.hasEndDateChanged);
}
setters.setSelectedResources?.(tempData.resources ?? []);
}