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

Use @linagora/twake-mui 1.1.6 from registry

Browse Source
This commit is contained in:
lenhanphung
2026-01-28 18:49:39 +07:00
parent da0dba423e
commit 201f9c722b
19 changed files with 476 additions and 2748 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/components/EventModifications.test.tsx
+4
View File
@@ -400,6 +400,10 @@ describe("CalendarApp integration", () => {
preloadedState
);
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const startDateInput = await screen.findByTestId("start-time-input");
await act(async () => {
__test__/features/Events/EventDisplay.test.tsx
+11 -6
View File
@@ -164,12 +164,12 @@ describe("Event Preview Display", () => {
expect(screen.getByText(/January/i)).toBeInTheDocument();
expect(screen.getByText(/15/)).toBeInTheDocument();
// Check time is displayed with exact values
// Format: "Wednesday, January 15, 2025 at 10:00 AM" and " – 10:00 AM" are in separate elements
// Check time is displayed in 24h format (no AM/PM)
// Format: "Wednesday, January 15, 2025 at 10:00" and " – 10:00" are in separate elements
expect(
screen.getByText(/Wednesday, January 15, 2025 at 10:00 AM/)
screen.getByText(/Wednesday, January 15, 2025 at 10:00/)
).toBeInTheDocument();
expect(screen.getByText(/– 10:00 AM/)).toBeInTheDocument();
expect(screen.getByText(/– 10:00/)).toBeInTheDocument();
expect(screen.getByText("Calendar")).toBeInTheDocument();
});
@@ -1719,6 +1719,9 @@ describe("Event Full Display", () => {
expect(screen.getByDisplayValue("Test Event")).toBeInTheDocument();
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const startDateInput = screen.getByTestId("start-date-input");
const startTimeInput = screen.getByTestId("start-time-input");
const endTimeInput = screen.getByTestId("end-time-input");
@@ -1804,6 +1807,7 @@ describe("Event Full Display", () => {
preloadedState
);
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
fireEvent.click(allDayCheckbox);
expect(allDayCheckbox).toBeChecked();
@@ -1878,6 +1882,7 @@ describe("Event Full Display", () => {
)
);
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const calendarSelect = screen.getByLabelText("event.form.calendar");
await act(async () => fireEvent.mouseDown(calendarSelect));
@@ -1947,9 +1952,9 @@ describe("Event Full Display", () => {
stateWithTimezone
);
// Expand to show timezone selector (normal mode hides it)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// The timezone select should have Asia/Bangkok selected
// Since the component uses formatLocalDateTime, the displayed time will be in local format
// but the timezone selector should show Asia/Bangkok
const timeZone = screen.getByDisplayValue(/Asia\/Bangkok/i);
expect(timeZone).toBeInTheDocument();
});
__test__/features/Events/EventModal.test.tsx
+34 -7
View File
@@ -124,8 +124,10 @@ describe("EventPopover", () => {
});
expect(addDescriptionButton).toBeInTheDocument();
const calendarSelect = screen.getByRole("combobox", { name: /calendar/i });
expect(calendarSelect).toBeInTheDocument();
// In normal mode calendar is a SectionPreviewRow (button), not combobox
expect(
screen.getByRole("button", { name: "Calendar 1" })
).toBeInTheDocument();
// Check button
expect(
@@ -154,7 +156,8 @@ describe("EventPopover", () => {
allDay: false,
} as unknown as DateSelectArg);
// MUI DatePicker/TimePicker values are stored differently - just check elements exist
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
});
@@ -179,6 +182,10 @@ describe("EventPopover", () => {
"Event Description"
);
// Expand location section (normal mode shows SectionPreviewRow)
fireEvent.click(
screen.getByRole("button", { name: "event.form.locationPlaceholder" })
);
fireEvent.change(screen.getByLabelText("event.form.location"), {
target: { value: "Conference Room" },
});
@@ -190,13 +197,14 @@ describe("EventPopover", () => {
it("changes selected calendar", async () => {
renderPopover();
// Expand to show calendar combobox (normal mode shows SectionPreviewRow)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const select = screen.getByLabelText("event.form.calendar");
fireEvent.mouseDown(select); // Open menu
const option = await screen.findByText("Calendar 2");
fireEvent.click(option);
// Find the calendar combobox specifically by its aria-labelledby
const calendarSelect = screen.getByRole("combobox", { name: /Calendar/i });
expect(calendarSelect).toHaveTextContent("Calendar 2");
});
@@ -290,6 +298,9 @@ describe("EventPopover", () => {
fireEvent.change(screen.getByLabelText("event.form.description"), {
target: { value: newEvent.description },
});
fireEvent.click(
screen.getByRole("button", { name: "event.form.locationPlaceholder" })
);
fireEvent.change(screen.getByLabelText("event.form.location"), {
target: { value: newEvent.location },
});
@@ -338,10 +349,11 @@ describe("EventPopover", () => {
it("BUGFIX: Prefill Calendar field", async () => {
renderPopover();
// In normal mode calendar is a SectionPreviewRow (button) with calendar name
await waitFor(() =>
expect(screen.getByLabelText("event.form.calendar")).toHaveTextContent(
"Calendar 1"
)
expect(
screen.getByRole("button", { name: "Calendar 1" })
).toHaveTextContent("Calendar 1")
);
});
@@ -357,6 +369,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
@@ -375,6 +390,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
@@ -403,6 +421,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
@@ -427,6 +448,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
@@ -451,6 +475,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
__test__/features/Events/EventRepetition.test.tsx
+2 -1
View File
@@ -1176,7 +1176,8 @@ describe("Event URL handling for recurring events", () => {
)
);
// Change calendar
// Expand to show calendar combobox (normal mode shows SectionPreviewRow)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.mouseDown(screen.getByLabelText("event.form.calendar"));
const option = await screen.findByText("Calendar 2");
fireEvent.click(option);
__test__/features/Events/EventUpdateModal.test.tsx
+6
View File
@@ -93,6 +93,9 @@ describe("EventUpdateModal Timezone Handling", () => {
const titleInput = screen.getByDisplayValue("Timezone Event");
expect(titleInput).toBeInTheDocument();
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// Verify the start date and time inputs exist
await waitFor(() => {
const startDateInput = screen.getByTestId("start-date-input");
@@ -282,6 +285,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
expect(mockGetMasterEvent).toHaveBeenCalled();
});
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// Wait for the repeat checkbox to be checked (indicating form is initialized)
const repeatCheckbox = await waitFor(() => {
const checkbox = screen.getByLabelText("event.form.repeat");
@@ -414,6 +418,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
expect(screen.getByDisplayValue("Recurring Meeting")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// Wait for repeat checkbox to be checked
const repeatCheckbox = await waitFor(() => {
const checkbox = screen.getByLabelText("event.form.repeat");
@@ -546,6 +551,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
expect(screen.getByDisplayValue("Recurring Meeting")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// Uncheck repeat and save
const repeatCheckbox = screen.getByLabelText("event.form.repeat");
package-lock.json
Generated
+21 -2537
View File
File diff suppressed because it is too large Load Diff
package.json
+1 -1
View File
@@ -12,7 +12,7 @@
"@fullcalendar/moment-timezone": "^6.1.19",
"@fullcalendar/react": "^6.1.17",
"@fullcalendar/timegrid": "^6.1.17",
"@linagora/twake-mui": "^1.1.7",
"@linagora/twake-mui": "1.1.7",
"@lottiefiles/dotlottie-react": "^0.17.13",
"@mui/icons-material": "^7.1.2",
"@mui/material": "^7.1.2",
src/components/Calendar/SettingsTab.tsx
-2
View File
@@ -75,8 +75,6 @@ export function SettingsTab({
showMore={false}
description={description}
setDescription={setDescription}
buttonVariant="contained"
buttonColor="secondary"
/>
</Box>
src/components/Event/AddDescButton.tsx
+56 -75
View File
@@ -1,8 +1,9 @@
import { Box, Button, TextField, useTheme } from "@linagora/twake-mui";
import { alpha } from "@mui/material/styles";
import { TextField } from "@linagora/twake-mui";
import { Notes as NotesIcon } from "@mui/icons-material";
import React from "react";
import { useI18n } from "twake-i18n";
import { FieldWithLabel } from "./components/FieldWithLabel";
import { SectionPreviewRow } from "./components/SectionPreviewRow";
export function AddDescButton({
showDescription,
@@ -10,92 +11,72 @@ export function AddDescButton({
showMore,
description,
setDescription,
buttonVariant,
buttonColor,
}: {
showDescription: boolean;
setShowDescription: (b: boolean) => void;
showMore: boolean;
description: string;
setDescription: (d: string) => void;
buttonVariant?: "text" | "outlined" | "contained";
buttonColor?:
| "inherit"
| "primary"
| "secondary"
| "success"
| "error"
| "info"
| "warning";
}) {
const { t } = useI18n();
const theme = useTheme();
const descriptionInputRef = React.useRef<HTMLTextAreaElement>(null);
React.useEffect(() => {
if (showDescription) {
descriptionInputRef.current?.focus();
}
}, [showDescription]);
const descriptionField = (
<FieldWithLabel
label={t("event.form.description")}
isExpanded={showMore}
sx={{ padding: 0, margin: 0 }}
>
<TextField
fullWidth
label=""
inputRef={descriptionInputRef}
inputProps={{ "aria-label": t("event.form.description") }}
placeholder={t("event.form.descriptionPlaceholder")}
value={description}
onChange={(e) => setDescription(e.target.value)}
size="small"
margin="dense"
multiline
minRows={2}
maxRows={10}
sx={{
"& .MuiInputBase-root": {
maxHeight: "33%",
overflowY: "auto",
padding: 0,
},
"& textarea": {
resize: "vertical",
},
}}
/>
</FieldWithLabel>
);
if (showMore) {
return descriptionField;
}
return (
<>
{!showDescription && (
<FieldWithLabel
label={showMore || showDescription ? t("event.form.description") : ""}
isExpanded={showMore}
>
{!showMore ? (
<Button
startIcon={<NotesIcon />}
onClick={() => setShowDescription(true)}
fullWidth
sx={{
justifyContent: "flex-start",
borderRadius: "4px",
color: alpha(theme.palette.grey[900], 0.9),
}}
>
{t("event.form.addDescription")}
</Button>
) : (
<Box display="flex" gap={1}>
<Button
startIcon={<NotesIcon />}
onClick={() => setShowDescription(true)}
size="medium"
variant={buttonVariant}
color={buttonColor}
>
{t("event.form.addDescription")}
</Button>
</Box>
)}
</FieldWithLabel>
)}
{showDescription && (
<FieldWithLabel
label={t("event.form.description")}
isExpanded={showMore}
sx={{ padding: 0, margin: 0 }}
>
<TextField
fullWidth
label=""
inputProps={{ "aria-label": t("event.form.description") }}
placeholder={t("event.form.descriptionPlaceholder")}
value={description}
onChange={(e) => setDescription(e.target.value)}
size="small"
margin="dense"
multiline
minRows={2}
maxRows={10}
sx={{
"& .MuiInputBase-root": {
maxHeight: "33%",
overflowY: "auto",
padding: 0,
},
"& textarea": {
resize: "vertical",
},
}}
/>
<FieldWithLabel label="" isExpanded={showMore}>
<SectionPreviewRow
icon={<NotesIcon />}
onClick={() => setShowDescription(true)}
>
{t("event.form.addDescription")}
</SectionPreviewRow>
</FieldWithLabel>
)}
{showDescription && descriptionField}
</>
);
}
src/components/Event/EventFormFields.tsx
+92 -69
View File
@@ -41,6 +41,7 @@ import { AddDescButton } from "./AddDescButton";
import { DateTimeFields } from "./components/DateTimeFields";
import { DateTimeSummary } from "./components/DateTimeSummary";
import { FieldWithLabel } from "./components/FieldWithLabel";
import { SectionPreviewRow } from "./components/SectionPreviewRow";
import RepeatEvent from "./EventRepeat";
import { useAllDayToggle } from "./hooks/useAllDayToggle";
import { combineDateTime, splitDateTime } from "./utils/dateTimeHelpers";
@@ -171,19 +172,23 @@ export default function EventFormFields({
// Track if user has manually changed end date in extended mode
const [hasEndDateChanged, setHasEndDateChanged] = React.useState(false);
// Track if user has clicked on datetime clickable section in normal mode
// Once clicked, normal mode will always show full fields until modal closes
const [hasClickedDateTimeSection, setHasClickedDateTimeSection] = React.useState(false);
const [hasClickedDateTimeSection, setHasClickedDateTimeSection] =
React.useState(false);
// Track if user has clicked on location section in normal mode
const [hasClickedLocationSection, setHasClickedLocationSection] = React.useState(false);
const [hasClickedLocationSection, setHasClickedLocationSection] =
React.useState(false);
// Track if user has clicked on calendar section in normal mode
const [hasClickedCalendarSection, setHasClickedCalendarSection] = React.useState(false);
const [hasClickedCalendarSection, setHasClickedCalendarSection] =
React.useState(false);
// Track if user has clicked on video meeting section in normal mode
const [hasClickedVideoMeetingSection, setHasClickedVideoMeetingSection] = React.useState(false);
const [hasClickedVideoMeetingSection, setHasClickedVideoMeetingSection] =
React.useState(false);
// Reset hasEndDateChanged and hasClickedDateTimeSection when modal closes
React.useEffect(() => {
@@ -233,10 +238,18 @@ export default function EventFormFields({
// Ref for title input field to enable auto-focus
const titleInputRef = React.useRef<HTMLInputElement>(null);
const locationInputRef = React.useRef<HTMLInputElement>(null);
// Track previous showMore state to detect changes
const prevShowMoreRef = React.useRef<boolean | undefined>(undefined);
// Focus location field when user clicks the location preview row
React.useEffect(() => {
if (hasClickedLocationSection && process.env.NODE_ENV !== "test") {
locationInputRef.current?.focus();
}
}, [hasClickedLocationSection]);
// Auto-focus title field when modal opens (skip in test environment)
React.useEffect(() => {
if (isOpen) {
@@ -278,7 +291,6 @@ export default function EventFormFields({
prevShowMoreRef.current = showMore;
}, [showMore, isOpen]);
// Sync start prop to startDate/startTime
React.useEffect(() => {
if (start) {
@@ -413,9 +425,9 @@ export default function EventFormFields({
setDescription(updatedDescription);
setHasVideoConference(true);
setMeetingLink(newMeetingLink);
// Open description field when adding video conference
setShowDescription(true);
// Track click on video meeting section in normal mode
if (showMore) {
setShowDescription(true);
}
if (!showMore) {
setHasClickedVideoMeetingSection(true);
}
@@ -472,7 +484,9 @@ export default function EventFormFields({
<FieldWithLabel
label={
!showMore && !hasClickedDateTimeSection ? "" : t("event.form.dateTime")
!showMore && !hasClickedDateTimeSection
? ""
: t("event.form.dateTime")
}
isExpanded={showMore}
>
@@ -532,7 +546,8 @@ export default function EventFormFields({
control={
<Checkbox
checked={
showRepeat || (typeOfAction === "solo" && !!repetition?.freq)
showRepeat ||
(typeOfAction === "solo" && !!repetition?.freq)
}
disabled={typeOfAction === "solo"}
onChange={() => {
@@ -570,7 +585,7 @@ export default function EventFormFields({
timezoneList.getTimezoneOffset(tzName, new Date(start))
}
showIcon={false}
width={240}
width={220}
size="small"
placeholder={t("event.form.timezonePlaceholder")}
/>
@@ -590,11 +605,14 @@ export default function EventFormFields({
</FieldWithLabel>
)}
<FieldWithLabel label="" isExpanded={showMore}>
<FieldWithLabel
label={showMore ? t("event.form.participants") : ""}
isExpanded={showMore}
>
<AttendeeSelector
attendees={attendees}
setAttendees={setAttendees}
placeholder="Add guests"
placeholder={t("event.form.addGuestsPlaceholder")}
inputSlot={(params) => <TextField {...params} size="small" />}
/>
</FieldWithLabel>
@@ -602,33 +620,53 @@ export default function EventFormFields({
<FieldWithLabel
label={showMore ? t("event.form.videoMeeting") : ""}
isExpanded={showMore}
sx={
hasClickedVideoMeetingSection && !showMore
? {
marginTop: "0 !important",
"& > .MuiBox-root": {
marginTop: "0 !important",
},
}
: undefined
}
>
{!showMore ? (
<Button
startIcon={
<img src={iconCamera} alt="camera" width={24} height={24} />
}
onClick={handleAddVideoConference}
fullWidth
sx={{
justifyContent: "flex-start",
display: hasVideoConference ? "none" : "flex",
borderRadius: "4px",
color: alpha(theme.palette.grey[900], 0.9),
}}
>
{t("event.form.addVisioConference")}
</Button>
hasVideoConference && meetingLink ? (
<Box display="flex" gap={1} alignItems="center">
<Button
startIcon={
<img src={iconCamera} alt="camera" width={24} height={24} />
}
onClick={() =>
window.open(meetingLink, "_blank", "noopener,noreferrer")
}
size="medium"
variant="contained"
color="primary"
sx={{ borderRadius: "4px", mr: 1 }}
>
{t("event.form.joinVisioConference")}
</Button>
<IconButton
onClick={handleCopyMeetingLink}
size="small"
sx={{ color: "primary.main" }}
aria-label={t("event.form.copyMeetingLink")}
title={t("event.form.copyMeetingLink")}
>
<CopyIcon />
</IconButton>
<IconButton
onClick={handleDeleteVideoConference}
size="small"
sx={{ color: "error.main" }}
aria-label={t("event.form.removeVideoConference")}
title={t("event.form.removeVideoConference")}
>
<DeleteIcon />
</IconButton>
</Box>
) : (
<SectionPreviewRow
icon={
<img src={iconCamera} alt="camera" width={24} height={24} />
}
onClick={handleAddVideoConference}
>
{t("event.form.addVisioConference")}
</SectionPreviewRow>
)
) : (
<Box display="flex" gap={1} alignItems="center">
<Button
@@ -653,7 +691,9 @@ export default function EventFormFields({
startIcon={
<img src={iconCamera} alt="camera" width={24} height={24} />
}
onClick={() => window.open(meetingLink, "_blank")}
onClick={() =>
window.open(meetingLink, "_blank", "noopener,noreferrer")
}
size="medium"
variant="contained"
color="primary"
@@ -694,35 +734,26 @@ export default function EventFormFields({
showMore={showMore}
description={description}
setDescription={setDescription}
buttonVariant="contained"
buttonColor="secondary"
/>
<FieldWithLabel
label={
showMore || hasClickedLocationSection
? t("event.form.location")
: ""
showMore || hasClickedLocationSection ? t("event.form.location") : ""
}
isExpanded={showMore}
>
{!showMore && !hasClickedLocationSection ? (
<Button
startIcon={<LocationIcon />}
<SectionPreviewRow
icon={<LocationIcon />}
onClick={() => setHasClickedLocationSection(true)}
fullWidth
sx={{
justifyContent: "flex-start",
borderRadius: "4px",
color: alpha(theme.palette.grey[900], 0.9),
}}
>
{location || t("event.form.locationPlaceholder")}
</Button>
</SectionPreviewRow>
) : (
<TextField
fullWidth
label=""
inputRef={locationInputRef}
inputProps={{ "aria-label": t("event.form.location") }}
placeholder={t("event.form.locationPlaceholder")}
value={location}
@@ -735,15 +766,13 @@ export default function EventFormFields({
<FieldWithLabel
label={
showMore || hasClickedCalendarSection
? t("event.form.calendar")
: ""
showMore || hasClickedCalendarSection ? t("event.form.calendar") : ""
}
isExpanded={showMore}
>
{!showMore && !hasClickedCalendarSection ? (
<Button
startIcon={
<SectionPreviewRow
icon={
<SquareRoundedIcon
sx={{
color:
@@ -755,16 +784,10 @@ export default function EventFormFields({
/>
}
onClick={() => setHasClickedCalendarSection(true)}
fullWidth
sx={{
justifyContent: "flex-start",
borderRadius: "4px",
color: alpha(theme.palette.grey[900], 0.9),
}}
>
{userPersonalCalendars.find((cal) => cal.id === calendarid)?.name ||
t("event.form.calendar")}
</Button>
</SectionPreviewRow>
) : (
<FormControl fullWidth margin="dense" size="small">
<Select
src/components/Event/components/ClickableField.tsx
+72
View File
@@ -0,0 +1,72 @@
import { Box, Typography, useTheme } from "@linagora/twake-mui";
import { alpha } from "@mui/material/styles";
import React from "react";
interface ClickableFieldProps {
icon: React.ReactNode;
text?: string;
onClick: () => void;
iconColor?: string;
children?: React.ReactNode;
}
export const ClickableField: React.FC<ClickableFieldProps> = ({
icon,
text,
onClick,
iconColor,
children,
}) => {
const theme = useTheme();
return (
<Box
onClick={onClick}
sx={{
display: "flex",
alignItems: children ? "flex-start" : "center",
cursor: "pointer",
padding: "8px 12px",
borderRadius: "4px",
"&:hover": {
backgroundColor: "action.hover",
},
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
maxWidth: "24px",
maxHeight: "24px",
marginRight: "12px",
color: iconColor || alpha(theme.palette.grey[900], 0.9),
"& svg": {
width: "24px",
height: "24px",
},
"& img": {
width: "24px",
height: "24px",
},
}}
>
{icon}
</Box>
{children ? (
<Box flex={1}>{children}</Box>
) : (
<Typography
sx={{
fontSize: "14px",
color: alpha(theme.palette.grey[900], 0.9),
fontWeight: 500,
}}
>
{text}
</Typography>
)}
</Box>
);
};
src/components/Event/components/DateTimeFields.tsx
+14
View File
@@ -37,6 +37,15 @@ const timePickerPopperSx = {
},
};
// twake-mui datePickerOverrides also uses this selector. Repeating ensures our override wins.
const dateCalendarLayoutSx = {
"& .MuiDateCalendar-root.MuiDateCalendar-root": {
width: "260px",
maxWidth: "260px",
padding: "0 15px",
},
};
/**
* Props for DateTimeFields component
*/
@@ -369,6 +378,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
false,
t("dateTimeFields.startDate")
),
layout: { sx: dateCalendarLayoutSx },
}}
/>
</Box>
@@ -415,6 +425,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
!!validation.errors.dateTime,
t("dateTimeFields.endDate")
),
layout: { sx: dateCalendarLayoutSx },
}}
/>
</Box>
@@ -463,6 +474,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
false,
t("dateTimeFields.startDate")
),
layout: { sx: dateCalendarLayoutSx },
}}
/>
</Box>
@@ -483,6 +495,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
!!validation.errors.dateTime,
t("dateTimeFields.endDate")
),
layout: { sx: dateCalendarLayoutSx },
}}
/>
</Box>
@@ -502,6 +515,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
false,
startDateLabel
),
layout: { sx: dateCalendarLayoutSx },
}}
/>
</Box>
src/components/Event/components/DateTimeSummary.tsx
+58 -49
View File
@@ -2,12 +2,16 @@ import { Box, Typography, useTheme } from "@linagora/twake-mui";
import { alpha } from "@mui/material/styles";
import AccessTimeIcon from "@mui/icons-material/AccessTime";
import dayjs from "dayjs";
import "dayjs/locale/en";
import "dayjs/locale/fr";
import "dayjs/locale/ru";
import "dayjs/locale/vi";
import React from "react";
import { useI18n } from "twake-i18n";
import { getTimezoneOffset } from "../../Calendar/TimezoneSelector";
import { getTimezoneOffset } from "@/utils/timezone";
import { RepetitionObject } from "@/features/Events/EventsTypes";
import { LONG_DATE_FORMAT } from "../utils/dateTimeFormatters";
import { toDateTime } from "../utils/dateTimeHelpers";
import { SectionPreviewRow } from "./SectionPreviewRow";
interface DateTimeSummaryProps {
startDate: string;
@@ -35,28 +39,45 @@ export const DateTimeSummary: React.FC<DateTimeSummaryProps> = ({
const { t, lang } = useI18n();
const theme = useTheme();
// Format date: "Wednesday, January 28, 2026"
// Format date with current locale. VI: "Thứ 4, 4 Tháng 2, 2026"; FR: "mercredi, 5 février 2026"; RU: first letter capitalized
const formatDate = (dateStr: string): string => {
if (!dateStr) return "";
const date = dayjs(dateStr);
return date.format(LONG_DATE_FORMAT);
const locale =
lang && ["en", "vi", "fr", "ru"].includes(lang) ? lang : "en";
if (locale === "vi") {
const dow = date.day(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
const weekdayLabel = dow === 0 ? "Chủ nhật" : `Thứ ${dow + 1}`; // Mon=Thứ 2, Wed=Thứ 4, ...
const day = date.date();
const month = date.month() + 1;
const year = date.year();
return `${weekdayLabel}, ${day} Tháng ${month}, ${year}`;
}
// French: "5 février" (day before month), not "février 5"
if (locale === "fr") {
const formatted = date.locale("fr").format("dddd, D MMMM YYYY");
return formatted.charAt(0).toUpperCase() + formatted.slice(1);
}
const formatted = date.locale(locale).format(LONG_DATE_FORMAT);
if (locale === "ru") {
return formatted.charAt(0).toUpperCase() + formatted.slice(1);
}
return formatted;
};
// Format time: "1:00pm - 2:00pm"
// Format time in 24h: "03:30 - 16:30"
const formatTime = (startTimeStr: string, endTimeStr: string): string => {
if (allday || !startTimeStr || !endTimeStr) return "";
const format12Hour = (timeStr: string): string => {
const [hours, minutes] = timeStr.split(":").map(Number);
const hour12 = hours % 12 || 12;
const ampm = hours >= 12 ? "pm" : "am";
const mins = minutes === 0 ? "" : `:${minutes.toString().padStart(2, "0")}`;
return `${hour12}${mins}${ampm}`;
const toHHmm = (timeStr: string): string => {
const [h, m] = timeStr.split(":").map((s) => parseInt(s, 10) || 0);
return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
};
const start = format12Hour(startTimeStr);
const end = format12Hour(endTimeStr);
return `${start} - ${end}`;
return `${toHHmm(startTimeStr)} - ${toHHmm(endTimeStr)}`;
};
// Format timezone: "(UTC+2) Paris"
@@ -74,7 +95,7 @@ export const DateTimeSummary: React.FC<DateTimeSummaryProps> = ({
// Format repeat: "Doesn't repeat" or repeat info
const formatRepeat = (rep: RepetitionObject): string => {
if (!rep || !rep.freq) {
return "Doesn't repeat";
return t("event.repeat.doesNotRepeat");
}
const interval = rep.interval || 1;
@@ -86,12 +107,12 @@ export const DateTimeSummary: React.FC<DateTimeSummaryProps> = ({
};
const freqText = freqMap[rep.freq] || rep.freq;
if (interval === 1) {
return `Every ${freqText}`;
return `${t("event.repeat.every")} ${freqText}`;
}
return `Every ${interval} ${freqText}`;
return `${t("event.repeat.every")} ${interval} ${freqText}`;
};
// Format date text: show both start and end date if showEndDate is true
@@ -114,40 +135,28 @@ export const DateTimeSummary: React.FC<DateTimeSummaryProps> = ({
return null;
}
const primaryStyle = {
fontSize: "14px",
fontWeight: 500,
color: alpha(theme.palette.grey[900], 0.9),
};
return (
<Box
<SectionPreviewRow
icon={<AccessTimeIcon sx={{ color: "text.secondary" }} />}
onClick={onClick}
sx={{
display: "flex",
alignItems: "flex-start",
gap: 1.5,
cursor: "pointer",
padding: 1,
borderRadius: 1,
"&:hover": {
backgroundColor: "action.hover",
},
}}
>
<AccessTimeIcon sx={{ color: "text.secondary", mt: 0.5 }} />
<Box flex={1}>
<Box display="flex" gap={2} alignItems="center" mb={0.5}>
<Typography
variant="body2"
sx={{ color: alpha(theme.palette.grey[900], 0.9), fontWeight: 500 }}
>
{dateText}
</Typography>
<Box>
<Typography component="p" sx={primaryStyle}>
{dateText}
{showEndDate && <br />}
{timeText && (
<Typography
variant="body2"
sx={{ color: alpha(theme.palette.grey[900], 0.9), fontWeight: 500 }}
>
<Box component="span" sx={{ ml: showEndDate ? 0 : 2 }}>
{timeText}
</Typography>
</Box>
)}
</Box>
<Box display="flex" gap={2} alignItems="center">
</Typography>
<Box display="flex" gap={2} alignItems="center" mt={0.5}>
<Typography variant="caption" sx={{ color: "#444746" }}>
{timezoneText}
</Typography>
@@ -156,6 +165,6 @@ export const DateTimeSummary: React.FC<DateTimeSummaryProps> = ({
</Typography>
</Box>
</Box>
</Box>
</SectionPreviewRow>
);
};
src/components/Event/components/SectionPreviewRow.tsx
+89
View File
@@ -0,0 +1,89 @@
import { Box, Typography, useTheme } from "@linagora/twake-mui";
import { alpha } from "@mui/material/styles";
import React from "react";
export interface SectionPreviewRowProps {
icon: React.ReactNode;
/** Primary text or custom content. If string, rendered with fontSize 14px, fontWeight 500. */
children: React.ReactNode;
onClick: () => void;
iconColor?: string;
}
/**
* Reusable preview row for event modal sections (normal mode).
* Layout: icon left (max 32x32), content right. No button.
*/
export const SectionPreviewRow: React.FC<SectionPreviewRowProps> = ({
icon,
children,
onClick,
iconColor,
}) => {
const theme = useTheme();
const color = iconColor ?? alpha(theme.palette.grey[900], 0.9);
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onClick();
}
};
return (
<Box
role="button"
tabIndex={0}
onClick={onClick}
onKeyDown={handleKeyDown}
sx={{
display: "flex",
alignItems: "center",
cursor: "pointer",
padding: "8px 12px",
borderRadius: "4px",
"&:hover": {
backgroundColor: "action.hover",
},
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
maxWidth: "24px",
maxHeight: "24px",
marginRight: "12px",
flexShrink: 0,
color,
"& svg": {
maxWidth: "24px",
maxHeight: "24px",
},
"& img": {
maxWidth: "24px",
maxHeight: "24px",
},
}}
>
{icon}
</Box>
<Box flex={1} minWidth={0}>
{typeof children === "string" ? (
<Typography
sx={{
fontSize: "14px",
fontWeight: 500,
color,
}}
>
{children}
</Typography>
) : (
children
)}
</Box>
</Box>
);
};
src/features/Events/EventDisplayPreview.tsx
+3
View File
@@ -860,6 +860,7 @@ function formatDate(
day: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone,
});
}
@@ -896,6 +897,7 @@ function formatEnd(
return endDate.toLocaleTimeString(t("locale"), {
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone,
});
}
@@ -905,6 +907,7 @@ function formatEnd(
day: "numeric",
hour: "2-digit",
minute: "2-digit",
hour12: false,
timeZone,
});
}
src/locales/en.json
+3
View File
@@ -98,6 +98,8 @@
"years": "Year(s)"
},
"repeatOn": "Repeat on:",
"doesNotRepeat": "Doesn't repeat",
"every": "Every",
"days": {
"monday": "MO",
"tuesday": "TU",
@@ -127,6 +129,7 @@
"allDay": "All day",
"repeat": "Repeat",
"timezonePlaceholder": "Select timezone",
"addGuestsPlaceholder": "Add guests",
"participants": "Participants",
"videoMeeting": "Video meeting",
"meetCopied": "Meeting link copied!",
src/locales/fr.json
+4 -1
View File
@@ -100,6 +100,8 @@
"years": "année(s)"
},
"repeatOn": "Répéter le :",
"doesNotRepeat": "Ne se répète pas",
"every": "Tous les",
"days": {
"monday": "LU",
"tuesday": "MA",
@@ -129,6 +131,7 @@
"allDay": "Toute la journée",
"repeat": "Répéter",
"timezonePlaceholder": "Sélectionner un fuseau horaire",
"addGuestsPlaceholder": "Ajouter des invités",
"participants": "Participants",
"videoMeeting": "Visioconférence",
"meetCopied": "Lien de la visio copié!",
@@ -288,7 +291,7 @@
},
"dateTimeFields": {
"date": "Date",
"startDate": "Daye du début",
"startDate": "Date du début",
"startTime": "Heure du début",
"endDate": "Date de la fin",
"endTime": "Heure de la fin"
src/locales/ru.json
+3
View File
@@ -100,6 +100,8 @@
"years": "год(лет)"
},
"repeatOn": "Повторять по:",
"doesNotRepeat": "Не повторяется",
"every": "Каждый",
"days": {
"monday": "ПН",
"tuesday": "ВТ",
@@ -129,6 +131,7 @@
"allDay": "Весь день",
"repeat": "Повторять",
"timezonePlaceholder": "Выберите часовой пояс",
"addGuestsPlaceholder": "Добавить гостей",
"participants": "Участники",
"videoMeeting": "Видеовстреча",
"meetCopied": "Ссылка на встречу скопирована",
src/locales/vi.json
+3
View File
@@ -98,6 +98,8 @@
"years": "Năm"
},
"repeatOn": "Lặp vào:",
"doesNotRepeat": "Không lặp lại",
"every": "Mỗi",
"days": {
"monday": "Th 2",
"tuesday": "Th 3",
@@ -127,6 +129,7 @@
"allDay": "Cả ngày",
"repeat": "Lặp lại",
"timezonePlaceholder": "Chọn múi giờ",
"addGuestsPlaceholder": "Thêm khách",
"participants": "Người tham gia",
"videoMeeting": "Cuộc họp video",
"meetCopied": "Đã sao chép liên kết họp!",