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

[#82] added cozy-ui for internationnalisation (#267)

Browse Source 
Co-authored-by: Camille Moussu <cmoussu@linagora.com>
This commit is contained in:
Camille Moussu
2025-11-06 15:46:58 +01:00
committed by GitHub
parent c1f37e3ebd
commit 36bc027d6d
49 changed files with 12003 additions and 5002 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/components/Calendar.test.tsx
+33 -31
View File
@@ -1,10 +1,10 @@
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { act, fireEvent, screen, waitFor } from "@testing-library/react";
import CalendarApp from "../../src/components/Calendar/Calendar";
import * as eventThunks from "../../src/features/Calendars/CalendarSlice";
import { renderWithProviders } from "../utils/Renderwithproviders";
import { searchUsers } from "../../src/features/User/userAPI";
import * as calendarThunks from "../../src/features/Calendars/CalendarSlice";
import { act, useRef } from "react";
import { useRef } from "react";
import userEvent from "@testing-library/user-event";
import CalendarLayout from "../../src/components/Calendar/CalendarLayout";
@@ -41,7 +41,7 @@ describe("CalendarSelection", () => {
calendars: {
list: {
"user1/cal1": {
name: "Calendar personnal",
name: "Calendar personal",
id: "user1/cal1",
color: { light: "#FF0000", dark: "#000" },
ownerEmails: ["alice@example.com"],
@@ -146,11 +146,11 @@ describe("CalendarSelection", () => {
preloadedState
);
});
expect(screen.getByText("Personnal Calendars")).toBeInTheDocument();
expect(screen.getByText("Delegated Calendars")).toBeInTheDocument();
expect(screen.getByText("Other Calendars")).toBeInTheDocument();
expect(screen.getByText("calendar.personal")).toBeInTheDocument();
expect(screen.getByText("calendar.delegated")).toBeInTheDocument();
expect(screen.getByText("calendar.other")).toBeInTheDocument();
expect(screen.getByLabelText("Calendar personnal")).toBeInTheDocument();
expect(screen.getByLabelText("Calendar personal")).toBeInTheDocument();
expect(screen.getByLabelText("Calendar delegated")).toBeInTheDocument();
expect(screen.getByLabelText("Calendar shared")).toBeInTheDocument();
});
@@ -162,16 +162,16 @@ describe("CalendarSelection", () => {
preloadedState
);
});
expect(screen.getByText("Personnal Calendars")).toBeInTheDocument();
expect(screen.getByText("Delegated Calendars")).toBeInTheDocument();
expect(screen.getByText("Other Calendars")).toBeInTheDocument();
expect(screen.getByText("calendar.personal")).toBeInTheDocument();
expect(screen.getByText("calendar.delegated")).toBeInTheDocument();
expect(screen.getByText("calendar.other")).toBeInTheDocument();
expect(screen.getByLabelText("Calendar personnal")).toBeInTheDocument();
expect(screen.getByLabelText("Calendar personal")).toBeInTheDocument();
expect(screen.getByLabelText("Calendar delegated")).toBeInTheDocument();
expect(screen.getByLabelText("Calendar shared")).toBeInTheDocument();
const sharedAccordionSummary = screen
.getByText("Other Calendars")
.getByText("calendar.other")
.closest(".MuiAccordionSummary-root");
const addButton = screen.getAllByTestId("AddIcon")[2];
@@ -185,12 +185,12 @@ describe("CalendarSelection", () => {
});
expect(sharedAccordionSummary).toHaveAttribute("aria-expanded", "true");
});
it("BUGFIX: remove dots in mini calendar when unselecting personnal calendar", async () => {
it("BUGFIX: remove dots in mini calendar when unselecting personal calendar", async () => {
await act(async () =>
renderWithProviders(<CalendarLayout />, preloadedState)
);
const checkbox = screen.getByLabelText("Calendar personnal");
const checkbox = screen.getByLabelText("Calendar personal");
// checkbox checked : events shown
expect(
screen.getByTestId(
@@ -223,9 +223,9 @@ describe("CalendarSelection", () => {
renderWithProviders(<CalendarLayout />, preloadedState)
);
// hide personnal event first
// hide personal event first
await act(async () => {
fireEvent.click(screen.getByLabelText("Calendar personnal"));
fireEvent.click(screen.getByLabelText("Calendar personal"));
});
const checkbox = screen.getByLabelText("Calendar delegated");
@@ -250,9 +250,9 @@ describe("CalendarSelection", () => {
renderWithProviders(<CalendarLayout />, preloadedState)
);
// hide personnal event first
// hide personal event first
await act(async () => {
fireEvent.click(screen.getByLabelText("Calendar personnal"));
fireEvent.click(screen.getByLabelText("Calendar personal"));
});
const checkbox = screen.getByLabelText("Calendar shared");
@@ -286,7 +286,7 @@ describe("CalendarSelection", () => {
);
});
expect(screen.getByLabelText("Calendar personnal")).toBeChecked();
expect(screen.getByLabelText("Calendar personal")).toBeChecked();
expect(screen.getByLabelText("Calendar delegated")).toBeChecked();
expect(screen.getByLabelText("Calendar shared")).toBeChecked();
});
@@ -299,12 +299,12 @@ describe("CalendarSelection", () => {
);
});
expect(screen.getByLabelText("Calendar personnal")).toBeChecked();
expect(screen.getByLabelText("Calendar personal")).toBeChecked();
expect(screen.getByLabelText("Calendar delegated")).not.toBeChecked();
expect(screen.getByLabelText("Calendar shared")).not.toBeChecked();
await act(async () => {
fireEvent.click(screen.getByLabelText("Calendar personnal"));
fireEvent.click(screen.getByLabelText("Calendar personal"));
fireEvent.click(screen.getByLabelText("Calendar shared"));
});
@@ -333,7 +333,7 @@ describe("calendar Availability search", () => {
calendars: {
list: {
"user1/cal1": {
name: "Calendar personnal",
name: "Calendar personal",
id: "user1/cal1",
color: { light: "#FF0000", dark: "#000" },
ownerEmails: ["alice@example.com"],
@@ -364,7 +364,7 @@ describe("calendar Availability search", () => {
renderWithProviders(<CalendarTestWrapper />, preloadedState)
);
const input = screen.getByPlaceholderText(/start typing a name or email/i);
const input = screen.getByPlaceholderText("peopleSearch.placeholder");
act(() => {
userEvent.type(input, "New");
});
@@ -394,7 +394,7 @@ describe("calendar Availability search", () => {
renderWithProviders(<CalendarTestWrapper />, preloadedState)
);
const input = screen.getByPlaceholderText(/start typing a name or email/i);
const input = screen.getByPlaceholderText("peopleSearch.placeholder");
await act(async () => userEvent.type(input, "Alice"));
const option = await screen.findByText("Alice");
@@ -423,7 +423,7 @@ describe("calendar Availability search", () => {
renderWithProviders(<CalendarTestWrapper />, preloadedState)
);
const input = screen.getByPlaceholderText(/start typing a name or email/i);
const input = screen.getByPlaceholderText("peopleSearch.placeholder");
await act(async () => userEvent.type(input, "New"));
const option = await screen.findByText("New User");
@@ -433,10 +433,12 @@ describe("calendar Availability search", () => {
});
expect(spy).toHaveBeenCalled();
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: /create event/i }));
fireEvent.click(
screen.getByRole("button", { name: "event.createEvent" })
);
});
await waitFor(() => {
expect(screen.getAllByText(/Create Event/i)).toHaveLength(2);
expect(screen.getAllByText("event.createEvent")).toHaveLength(2);
expect(screen.getAllByText(/New User/i)).toHaveLength(2);
});
});
@@ -460,7 +462,7 @@ describe("calendar Availability search", () => {
renderWithProviders(<CalendarTestWrapper />, preloadedState)
);
const input = screen.getByPlaceholderText(/start typing a name or email/i);
const input = screen.getByPlaceholderText("peopleSearch.placeholder");
await act(async () => userEvent.type(input, "New"));
const option = await screen.findByText("New User");
@@ -473,12 +475,12 @@ describe("calendar Availability search", () => {
});
await waitFor(() => {
expect(screen.getAllByText(/Create Event/i)).toHaveLength(2);
expect(screen.getAllByText("event.createEvent")).toHaveLength(2);
expect(screen.getAllByText(/New User/i)).toHaveLength(2);
});
});
it("BUGFIX: can untoggle all personnal calendars", async () => {
it("BUGFIX: can untoggle all calendar.personal", async () => {
await act(async () =>
renderWithProviders(<CalendarTestWrapper />, {
user: preloadedState.user,
@@ -489,7 +491,7 @@ describe("calendar Availability search", () => {
})
);
const checkbox = screen.getByLabelText("Calendar personnal");
const checkbox = screen.getByLabelText("Calendar personal");
expect(checkbox).toBeChecked();
fireEvent.click(checkbox); // toggle off
__test__/components/CalendarColors.test.tsx
+3 -4
View File
@@ -1,6 +1,5 @@
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor, act } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { act } from "react";
import CalendarSearch from "../../src/components/Calendar/CalendarSearch";
import * as CalendarApi from "../../src/features/Calendars/CalendarApi";
import * as CalendarSlice from "../../src/features/Calendars/CalendarSlice";
@@ -188,7 +187,7 @@ describe("CalendarSearch", () => {
await waitFor(() => {
expect(
screen.getByText("No more Calendar for Test User")
screen.getByText("calendar.noMoreCalendarsFor(name=Test User)")
).toBeInTheDocument();
});
@@ -223,7 +222,7 @@ describe("CalendarSearch", () => {
await waitFor(() => {
expect(
screen.getByText("No publicly available calendars for Test User")
screen.getByText("calendar.noPublicCalendarsFor(name=Test User)")
).toBeInTheDocument();
});
});
__test__/components/CalendarSelection.test.tsx
+22 -14
View File
@@ -44,7 +44,7 @@ describe("CalendarSelection", () => {
jest.clearAllMocks();
cleanup();
});
it("renders personal, delegated and other calendars", () => {
it("renders personal, delegated and calendar.other", () => {
renderWithProviders(
<CalendarSelection
selectedCalendars={["user1/cal1"]}
@@ -56,9 +56,9 @@ describe("CalendarSelection", () => {
}
);
expect(screen.getByText("Personnal Calendars")).toBeInTheDocument();
expect(screen.getByText("Delegated Calendars")).toBeInTheDocument();
expect(screen.getByText("Other Calendars")).toBeInTheDocument();
expect(screen.getByText("calendar.personal")).toBeInTheDocument();
expect(screen.getByText("calendar.delegated")).toBeInTheDocument();
expect(screen.getByText("calendar.other")).toBeInTheDocument();
expect(screen.getByLabelText("Calendar personal")).toBeChecked();
expect(screen.getByLabelText("Calendar delegated")).not.toBeChecked();
@@ -125,11 +125,13 @@ describe("CalendarSelection", () => {
fireEvent.click(addButtons[1]);
await waitFor(() =>
expect(screen.getByText(/Add new calendar/i)).toBeInTheDocument()
expect(
screen.getByText("calendarPopover.tabs.addNew")
).toBeInTheDocument()
);
});
it("Navigates to deletion dialog and deletes personnal cal", async () => {
it("Navigates to deletion dialog and deletes personal cal", async () => {
const spy = jest
.spyOn(calendarThunks, "removeCalendarAsync")
.mockImplementation((payload) => {
@@ -152,7 +154,9 @@ describe("CalendarSelection", () => {
userEvent.click(screen.getByText(/delete/i));
await waitFor(() =>
expect(screen.getByText("Remove Calendar personal?")).toBeInTheDocument()
expect(
screen.getByText("calendar.delete.title(name=Calendar personal)")
).toBeInTheDocument()
);
fireEvent.click(screen.getByRole("button", { name: /delete/i }));
@@ -182,7 +186,9 @@ describe("CalendarSelection", () => {
userEvent.click(screen.getByText(/remove/i));
await waitFor(() =>
expect(screen.getByText("Remove Calendar delegated?")).toBeInTheDocument()
expect(
screen.getByText("calendar.delete.title(name=Calendar delegated)")
).toBeInTheDocument()
);
fireEvent.click(screen.getByRole("button", { name: /remove/i }));
@@ -204,10 +210,12 @@ describe("CalendarSelection", () => {
const addButtons = screen.getAllByTestId("AddIcon");
fireEvent.click(addButtons[1]); // seccond Add button (other)
expect(screen.getByText("Browse other calendars")).toBeInTheDocument();
expect(
screen.getByText("calendar.browseOtherCalendars")
).toBeInTheDocument();
});
it("when only personnal calendars are in the state, only personnal calendars and the title for other to be added are shown", () => {
it("when only calendar.personal are in the state, only calendar.personal and the title for other to be added are shown", () => {
renderWithProviders(
<CalendarSelection
selectedCalendars={[]}
@@ -224,9 +232,9 @@ describe("CalendarSelection", () => {
}
);
expect(screen.getByText("Personnal Calendars")).toBeInTheDocument();
expect(screen.queryByText("Delegated Calendars")).not.toBeInTheDocument();
expect(screen.queryByText("Other Calendars")).toBeInTheDocument();
expect(screen.getByText("calendar.personal")).toBeInTheDocument();
expect(screen.queryByText("calendar.delegated")).not.toBeInTheDocument();
expect(screen.queryByText("calendar.other")).toBeInTheDocument();
});
it("renders nothing when no calendars are present", () => {
@@ -256,7 +264,7 @@ describe("CalendarSelection", () => {
}
);
const delegatedAccordionSummary = screen
.getByText("Delegated Calendars")
.getByText("calendar.delegated")
.closest(".MuiAccordionSummary-root");
fireEvent.click(delegatedAccordionSummary!);
__test__/components/DuplicateEvent.test.tsx
+12 -7
View File
@@ -1,6 +1,5 @@
import { fireEvent, screen, waitFor } from "@testing-library/react";
import EventDuplication from "../../src/components/Event/EventDuplicate";
import EventDisplayModal from "../../src/features/Events/EventDisplay";
import EventPopover from "../../src/features/Events/EventModal";
import { renderWithProviders } from "../utils/Renderwithproviders";
import EventPreviewModal from "../../src/features/Events/EventDisplayPreview";
@@ -31,8 +30,8 @@ const preloadedState = {
URL: "calendars/667037022b752d0026472254/cal1/event1.ics",
title: "Test Event",
calId: "667037022b752d0026472254/cal1",
start: day,
end: day,
start: day.toISOString(),
end: day.toISOString(),
timezone: "UTC",
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [
@@ -77,7 +76,9 @@ describe("EventDuplication", () => {
preloadedState
);
fireEvent.click(screen.getByRole("menuitem", { name: /Duplicate event/i }));
fireEvent.click(
screen.getByRole("menuitem", { name: "eventDuplication.duplicateEvent" })
);
expect(onOpenDuplicate).toHaveBeenCalled();
});
@@ -126,7 +127,7 @@ describe("EventPopover", () => {
fireEvent.change(screen.getByLabelText(/Title/i), {
target: { value: "Duplicated Event" },
});
fireEvent.click(screen.getByRole("button", { name: /Save/i }));
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
waitFor(() => expect(onClose).toHaveBeenCalled());
});
@@ -145,8 +146,12 @@ describe("EventDisplayModal", () => {
);
fireEvent.click(screen.getByTestId("MoreVertIcon"));
fireEvent.click(screen.getByRole("menuitem", { name: /Duplicate event/i }));
expect(screen.getAllByText(/Duplicate Event/i)[1]).toBeInTheDocument();
fireEvent.click(
screen.getByRole("menuitem", { name: "eventDuplication.duplicateEvent" })
);
expect(
screen.getAllByText("eventDuplication.duplicateEvent")[1]
).toBeInTheDocument();
expect(
screen.getByDisplayValue(
preloadedState.calendars.list["667037022b752d0026472254/cal1"].events
__test__/components/Menubar.test.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ describe("Calendar App Component Display Tests", () => {
/>,
preloadedState
);
const logoElement = screen.getByAltText("Calendar");
const logoElement = screen.getByAltText("menubar.logoAlt");
expect(logoElement).toBeInTheDocument();
});
it("renders the main title", () => {
@@ -52,7 +52,7 @@ describe("Calendar App Component Display Tests", () => {
/>,
preloadedState
);
expect(screen.getByAltText("Calendar")).toBeInTheDocument();
expect(screen.getByAltText("menubar.logoAlt")).toBeInTheDocument();
});
it("shows avatar with user initials", () => {
__test__/components/RepeatEvent.test.tsx
+39 -21
View File
@@ -99,20 +99,22 @@ async function setupEventPopover(
);
// Fill in title
const titleInput = screen.getByLabelText("Title");
const titleInput = screen.getByLabelText("event.form.title");
fireEvent.change(titleInput, { target: { value: "Meeting" } });
// Click More options to expand the dialog
const showMoreButton = screen.getByRole("button", { name: /More options/i });
const showMoreButton = screen.getByRole("button", {
name: "common.moreOptions",
});
fireEvent.click(showMoreButton);
// Check Repeat checkbox to show repeat options
const repeatCheckbox = screen.getByLabelText("Repeat");
const repeatCheckbox = screen.getByLabelText("event.form.repeat");
fireEvent.click(repeatCheckbox);
// Wait for RepeatEvent component to be rendered
await waitFor(() => {
expect(screen.getByText("Day(s)")).toBeInTheDocument();
expect(screen.getByText("event.repeat.frequency.days")).toBeInTheDocument();
});
}
@@ -154,7 +156,7 @@ describe("RepeatEvent Component", () => {
fireEvent.mouseDown(frequencySelect);
// Select Week(s)
const weeklyOption = screen.getByText("Week(s)");
const weeklyOption = screen.getByText("event.repeat.frequency.weeks");
fireEvent.click(weeklyOption);
expect(setRepetition).toHaveBeenCalledWith(
@@ -183,7 +185,7 @@ describe("RepeatEvent Component", () => {
it("toggles day selection for weekly frequency", () => {
const { setRepetition } = setupRepeatEvent({ freq: "weekly" });
const mondayCheckbox = screen.getByLabelText("MO");
const mondayCheckbox = screen.getByLabelText("event.repeat.days.monday");
fireEvent.click(mondayCheckbox);
expect(setRepetition).toHaveBeenCalledWith(
@@ -203,9 +205,11 @@ describe("Repeat Event Integration Tests", () => {
// When Repeat checkbox is checked, repetition is set to empty object
// We need to set the frequency manually
const frequencySelect = screen.getByText("Day(s)");
const frequencySelect = screen.getByText("event.repeat.frequency.days");
fireEvent.mouseDown(frequencySelect);
const dailyOption = screen.getByRole("option", { name: "Day(s)" });
const dailyOption = screen.getByRole("option", {
name: "event.repeat.frequency.days",
});
fireEvent.click(dailyOption);
await expectRRule({ freq: "daily", interval: 1 });
@@ -259,13 +263,17 @@ describe("Repeat Event Integration Tests", () => {
await setupEventPopover();
// Select Week(s) frequency
const frequencySelect = screen.getByText("Day(s)");
const frequencySelect = screen.getByText("event.repeat.frequency.days");
fireEvent.mouseDown(frequencySelect);
const weeklyOption = screen.getByRole("option", { name: "Week(s)" });
const weeklyOption = screen.getByRole("option", {
name: "event.repeat.frequency.weeks",
});
fireEvent.click(weeklyOption);
// Select Thursday
const thursdayCheckbox = screen.getByLabelText("TH");
const thursdayCheckbox = screen.getByLabelText(
"event.repeat.days.thursday"
);
fireEvent.click(thursdayCheckbox);
await expectRRule({
@@ -280,9 +288,11 @@ describe("Repeat Event Integration Tests", () => {
await setupEventPopover();
// Select Week(s) frequency
const frequencySelect = screen.getByText("Day(s)");
const frequencySelect = screen.getByText("event.repeat.frequency.days");
fireEvent.mouseDown(frequencySelect);
const weeklyOption = screen.getByRole("option", { name: "Week(s)" });
const weeklyOption = screen.getByRole("option", {
name: "event.repeat.frequency.weeks",
});
fireEvent.click(weeklyOption);
// Set interval to 3
@@ -297,9 +307,11 @@ describe("Repeat Event Integration Tests", () => {
await setupEventPopover();
// Select Month(s) frequency
const frequencySelect = screen.getByText("Day(s)");
const frequencySelect = screen.getByText("event.repeat.frequency.days");
fireEvent.mouseDown(frequencySelect);
const monthlyOption = screen.getByRole("option", { name: "Month(s)" });
const monthlyOption = screen.getByRole("option", {
name: "event.repeat.frequency.months",
});
fireEvent.click(monthlyOption);
await expectRRule({ freq: "monthly", interval: 1 });
@@ -310,9 +322,11 @@ describe("Repeat Event Integration Tests", () => {
await setupEventPopover();
// Select Month(s) frequency
const frequencySelect = screen.getByText("Day(s)");
const frequencySelect = screen.getByText("event.repeat.frequency.days");
fireEvent.mouseDown(frequencySelect);
const monthlyOption = screen.getByRole("option", { name: "Month(s)" });
const monthlyOption = screen.getByRole("option", {
name: "event.repeat.frequency.months",
});
fireEvent.click(monthlyOption);
// Select "After" end option
@@ -331,9 +345,11 @@ describe("Repeat Event Integration Tests", () => {
await setupEventPopover();
// Select Year(s) frequency
const frequencySelect = screen.getByText("Day(s)");
const frequencySelect = screen.getByText("event.repeat.frequency.days");
fireEvent.mouseDown(frequencySelect);
const yearlyOption = screen.getByRole("option", { name: "Year(s)" });
const yearlyOption = screen.getByRole("option", {
name: "event.repeat.frequency.years",
});
fireEvent.click(yearlyOption);
await expectRRule({ freq: "yearly", interval: 1 });
@@ -344,9 +360,11 @@ describe("Repeat Event Integration Tests", () => {
await setupEventPopover();
// Select Year(s) frequency
const frequencySelect = screen.getByText("Day(s)");
const frequencySelect = screen.getByText("event.repeat.frequency.days");
fireEvent.mouseDown(frequencySelect);
const yearlyOption = screen.getByRole("option", { name: "Year(s)" });
const yearlyOption = screen.getByRole("option", {
name: "event.repeat.frequency.years",
});
fireEvent.click(yearlyOption);
// First choose "After" with 5 occurrences
__test__/features/Calendars/CalendarModal.test.tsx
+14 -12
View File
@@ -33,7 +33,7 @@ describe("CalendarPopover", () => {
renderPopover();
expect(screen.getByLabelText(/Name/i)).toBeInTheDocument();
expect(screen.getByText(/add description/i)).toBeInTheDocument();
expect(screen.getByText("calendar.addDescription")).toBeInTheDocument();
});
it("updates name and description fields", () => {
@@ -43,7 +43,7 @@ describe("CalendarPopover", () => {
fireEvent.change(nameInput, { target: { value: "My Calendar" } });
expect(nameInput).toHaveValue("My Calendar");
fireEvent.click(screen.getByText(/add description/i));
fireEvent.click(screen.getByText("calendar.addDescription"));
const descInput = screen.getByLabelText(/Description/i);
fireEvent.change(descInput, { target: { value: "Test description" } });
expect(descInput).toHaveValue("Test description");
@@ -60,7 +60,7 @@ describe("CalendarPopover", () => {
fireEvent.change(screen.getByLabelText(/Name/i), {
target: { value: "Test Calendar" },
});
fireEvent.click(screen.getByText(/add description/i));
fireEvent.click(screen.getByText("calendar.addDescription"));
fireEvent.change(screen.getByLabelText(/Description/i), {
target: { value: "Test Description" },
});
@@ -168,7 +168,7 @@ describe("CalendarPopover (editing mode)", () => {
});
// Save
fireEvent.click(screen.getByRole("button", { name: /Save/i }));
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
await waitFor(() =>
expect(spy).toHaveBeenCalledWith(
@@ -291,7 +291,7 @@ describe("CalendarPopover - Tabs Scenarios", () => {
expect(publicButton).toHaveAttribute("aria-pressed", "false");
// Save
fireEvent.click(screen.getByRole("button", { name: /Save/i }));
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
await waitFor(() =>
expect(patchSpy).toHaveBeenCalledWith(
@@ -322,7 +322,7 @@ describe("CalendarPopover - Tabs Scenarios", () => {
fireEvent.click(screen.getByRole("tab", { name: /Access/i }));
// Expect text field with caldav link
const input = screen.getByLabelText(/CalDAV access/i);
const input = screen.getByLabelText("calendar.caldav_access");
expect(input).toHaveValue("https://cal.example.org/calendars/user1/cal1");
// Click copy button (find button containing ContentCopyIcon)
@@ -338,7 +338,7 @@ describe("CalendarPopover - Tabs Scenarios", () => {
// Snackbar should appear
await waitFor(() =>
expect(screen.getByText(/Link copied!/i)).toBeInTheDocument()
expect(screen.getByText("common.link_copied")).toBeInTheDocument()
);
});
@@ -371,11 +371,11 @@ describe("CalendarPopover - Tabs Scenarios", () => {
fireEvent.change(screen.getByLabelText(/Name/i), {
target: { value: "Imported Calendar" },
});
const fileInput = screen.getByLabelText(/select file/i);
const fileInput = screen.getByLabelText("common.select_file");
fireEvent.change(fileInput, { target: { files: [file] } });
// Click Import
fireEvent.click(screen.getByRole("button", { name: "Import" }));
fireEvent.click(screen.getByRole("button", { name: "actions.import" }));
await waitFor(() => expect(createSpy).toHaveBeenCalled());
await waitFor(() => expect(importSpy).toHaveBeenCalled());
@@ -402,10 +402,10 @@ describe("CalendarPopover - Tabs Scenarios", () => {
);
fireEvent.click(screen.getByRole("tab", { name: /Import/i }));
const fileInput = screen.getByLabelText(/select file/i);
const fileInput = screen.getByLabelText("common.select_file");
fireEvent.change(fileInput, { target: { files: [file] } });
fireEvent.click(screen.getByRole("button", { name: "Import" }));
fireEvent.click(screen.getByRole("button", { name: "actions.import" }));
await waitFor(() =>
expect(importSpy).toHaveBeenCalledWith(
@@ -427,7 +427,9 @@ describe("CalendarPopover - Tabs Scenarios", () => {
fireEvent.click(screen.getByRole("tab", { name: /Import/i }));
const importButton = screen.getByRole("button", { name: /Import/i });
const importButton = screen.getByRole("button", {
name: "actions.import",
});
expect(importButton).toBeDisabled();
});
});
__test__/features/Events/EventDisplay.test.tsx
+98 -661
View File
File diff suppressed because it is too large Load Diff
__test__/features/Events/EventModal.test.tsx
+34 -44
View File
@@ -110,7 +110,7 @@ describe("EventPopover", () => {
renderPopover();
// Check dialog title
expect(screen.getByText("Create Event")).toBeInTheDocument();
expect(screen.getByText("event.createEvent")).toBeInTheDocument();
// Check inputs exist by their roles
const titleInput = screen.getByRole("textbox", { name: /title/i });
@@ -118,7 +118,7 @@ describe("EventPopover", () => {
// Description input is only visible after clicking "Add description" button
const addDescriptionButton = screen.getByRole("button", {
name: /Add description/i,
name: "event.form.addDescription",
});
expect(addDescriptionButton).toBeInTheDocument();
@@ -127,20 +127,20 @@ describe("EventPopover", () => {
// Check button
expect(
screen.getByRole("button", { name: /More options/i })
screen.getByRole("button", { name: "common.moreOptions" })
).toBeInTheDocument();
// Extended mode
fireEvent.click(screen.getByRole("button", { name: /More options/i }));
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// Back button appears
expect(screen.getByLabelText("show less")).toBeInTheDocument();
// Extended labels appear
expect(screen.getAllByText("Repeat")).toHaveLength(1);
expect(screen.getAllByText("Notification")).toHaveLength(1);
expect(screen.getAllByText("Visible to")).toHaveLength(1);
expect(screen.getAllByText("Show me as")).toHaveLength(1);
expect(screen.getAllByText("event.form.repeat")).toHaveLength(1);
expect(screen.getAllByText("event.form.notification")).toHaveLength(1);
expect(screen.getAllByText("event.form.visibleTo")).toHaveLength(1);
expect(screen.getAllByText("event.form.showMeAs")).toHaveLength(1);
});
it("fills start from selectedRange", () => {
@@ -160,31 +160,35 @@ describe("EventPopover", () => {
it("updates inputs on change", () => {
renderPopover();
fireEvent.change(screen.getByLabelText("Title"), {
fireEvent.change(screen.getByLabelText("event.form.title"), {
target: { value: "My Event" },
});
expect(screen.getByLabelText("Title")).toHaveValue("My Event");
expect(screen.getByLabelText("event.form.title")).toHaveValue("My Event");
// Click "Add description" button first
fireEvent.click(screen.getByRole("button", { name: /Add description/i }));
fireEvent.click(
screen.getByRole("button", { name: "event.form.addDescription" })
);
fireEvent.change(screen.getByLabelText("Description"), {
fireEvent.change(screen.getByLabelText("event.form.description"), {
target: { value: "Event Description" },
});
expect(screen.getByLabelText("Description")).toHaveValue(
expect(screen.getByLabelText("event.form.description")).toHaveValue(
"Event Description"
);
fireEvent.change(screen.getByLabelText("Location"), {
fireEvent.change(screen.getByLabelText("event.form.location"), {
target: { value: "Conference Room" },
});
expect(screen.getByLabelText("Location")).toHaveValue("Conference Room");
expect(screen.getByLabelText("event.form.location")).toHaveValue(
"Conference Room"
);
});
it("changes selected calendar", async () => {
renderPopover();
const select = screen.getByLabelText("Calendar");
const select = screen.getByLabelText("event.form.calendar");
fireEvent.mouseDown(select); // Open menu
const option = await screen.findByText("Calendar 2");
@@ -197,10 +201,10 @@ describe("EventPopover", () => {
it("adds a attendee", async () => {
jest.useFakeTimers();
renderPopover();
fireEvent.change(screen.getByLabelText("Title"), {
fireEvent.change(screen.getByLabelText("event.form.title"), {
target: { value: "newEvent" },
});
const select = screen.getByLabelText("Start typing a name or email");
const select = screen.getByLabelText("peopleSearch.label");
act(() => {
select.focus();
@@ -225,7 +229,7 @@ describe("EventPopover", () => {
return () => Promise.resolve(payload) as any;
});
fireEvent.click(screen.getByRole("button", { name: /Save/i }));
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
await waitFor(() => {
expect(spy).toHaveBeenCalled();
@@ -262,8 +266,6 @@ describe("EventPopover", () => {
renderPopover();
const newEvent = {
title: "Meeting",
start: "2025-07-18T00:00:00.000Z",
end: "2025-07-18T00:00:00.000Z",
allday: false,
uid: "6045c603-11ab-43c5-bc30-0641420bb3a8",
description: "Discuss project",
@@ -274,17 +276,17 @@ describe("EventPopover", () => {
};
// Fill inputs
fireEvent.change(screen.getByLabelText("Title"), {
fireEvent.change(screen.getByLabelText("event.form.title"), {
target: { value: newEvent.title },
});
fireEvent.click(screen.getByLabelText("All day"));
// Click "Add description" button first
fireEvent.click(screen.getByRole("button", { name: /Add description/i }));
fireEvent.change(screen.getByLabelText("Description"), {
fireEvent.click(
screen.getByRole("button", { name: "event.form.addDescription" })
);
fireEvent.change(screen.getByLabelText("event.form.description"), {
target: { value: newEvent.description },
});
fireEvent.change(screen.getByLabelText("Location"), {
fireEvent.change(screen.getByLabelText("event.form.location"), {
target: { value: newEvent.location },
});
const spy = jest
@@ -293,7 +295,7 @@ describe("EventPopover", () => {
return () => Promise.resolve(payload) as any;
});
fireEvent.click(screen.getByRole("button", { name: /Save/i }));
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
await waitFor(() => {
expect(spy).toHaveBeenCalled();
@@ -307,20 +309,6 @@ describe("EventPopover", () => {
expect(receivedPayload.newEvent.title).toBe(newEvent.title);
expect(receivedPayload.newEvent.description).toBe(newEvent.description);
expect(
formatDateToYYYYMMDDTHHMMSS(
new Date(receivedPayload.newEvent.start)
).split("T")[0]
).toBe(formatDateToYYYYMMDDTHHMMSS(new Date(newEvent.start)).split("T")[0]);
const expectedAllDayEnd = new Date(newEvent.end);
expectedAllDayEnd.setUTCDate(expectedAllDayEnd.getUTCDate() + 1);
expect(
formatDateToYYYYMMDDTHHMMSS(
new Date(receivedPayload.newEvent.end || new Date())
).split("T")[0]
).toBe(formatDateToYYYYMMDDTHHMMSS(expectedAllDayEnd).split("T")[0]);
expect(receivedPayload.newEvent.location).toBe(newEvent.location);
expect(receivedPayload.newEvent.organizer).toEqual(newEvent.organizer);
expect(receivedPayload.newEvent.color).toEqual(
@@ -335,7 +323,7 @@ describe("EventPopover", () => {
renderPopover();
// Cancel button only appears in expanded mode
fireEvent.click(screen.getByRole("button", { name: /More options/i }));
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole("button", { name: /Cancel/i }));
@@ -345,7 +333,9 @@ describe("EventPopover", () => {
it("BUGFIX: Prefill Calendar field", async () => {
renderPopover();
await waitFor(() =>
expect(screen.getByLabelText("Calendar")).toHaveTextContent("Calendar 1")
expect(screen.getByLabelText("event.form.calendar")).toHaveTextContent(
"Calendar 1"
)
);
});
});
__test__/features/Events/EventRepetition.test.tsx
+985 -805
View File
File diff suppressed because it is too large Load Diff
__test__/features/Events/EventUpdateModal.test.tsx
+6 -6
View File
@@ -279,7 +279,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
});
// Uncheck repeat checkbox
const repeatCheckbox = screen.getByLabelText("Repeat");
const repeatCheckbox = screen.getByLabelText("event.form.repeat");
expect(repeatCheckbox).toBeChecked();
await act(async () => {
@@ -289,7 +289,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
expect(repeatCheckbox).not.toBeChecked();
// Click Save button
const saveButton = screen.getByRole("button", { name: /Save/i });
const saveButton = screen.getByRole("button", { name: "actions.save" });
await act(async () => {
fireEvent.click(saveButton);
@@ -397,13 +397,13 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
});
// Uncheck repeat checkbox and save
const repeatCheckbox = screen.getByLabelText("Repeat");
const repeatCheckbox = screen.getByLabelText("event.form.repeat");
await act(async () => {
fireEvent.click(repeatCheckbox);
});
const saveButton = screen.getByRole("button", { name: /Save/i });
const saveButton = screen.getByRole("button", { name: "actions.save" });
await act(async () => {
fireEvent.click(saveButton);
@@ -512,13 +512,13 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
});
// Uncheck repeat and save
const repeatCheckbox = screen.getByLabelText("Repeat");
const repeatCheckbox = screen.getByLabelText("event.form.repeat");
await act(async () => {
fireEvent.click(repeatCheckbox);
});
const saveButton = screen.getByRole("button", { name: /Save/i });
const saveButton = screen.getByRole("button", { name: "actions.save" });
await act(async () => {
fireEvent.click(saveButton);
__test__/features/Events/TempUpdate.test.tsx
+13 -15
View File
@@ -138,10 +138,10 @@ describe("Update tempcalendars called with correct params", () => {
await waitFor(() => {
fireEvent.click(screen.getByTestId("MoreVertIcon"));
expect(screen.getByText("Delete event")).toBeInTheDocument();
expect(screen.getByText("eventPreview.deleteEvent")).toBeInTheDocument();
});
const deleteMenuItem = screen.getByText("Delete event");
const deleteMenuItem = screen.getByText("eventPreview.deleteEvent");
fireEvent.click(deleteMenuItem);
await waitFor(() =>
@@ -191,10 +191,10 @@ describe("Update tempcalendars called with correct params", () => {
await waitFor(() => {
fireEvent.click(screen.getByTestId("MoreVertIcon"));
expect(screen.getByText("Delete event")).toBeInTheDocument();
expect(screen.getByText("eventPreview.deleteEvent")).toBeInTheDocument();
});
const deleteMenuItem = screen.getByText("Delete event");
const deleteMenuItem = screen.getByText("eventPreview.deleteEvent");
fireEvent.click(deleteMenuItem);
await waitFor(() => {
@@ -233,9 +233,7 @@ describe("Update tempcalendars called with correct params", () => {
const titleInput = screen.getByLabelText(/title/i);
fireEvent.change(titleInput, { target: { value: "New Event" } });
const attendeeInput = screen.getByLabelText(
/Start typing a name or email/i
);
const attendeeInput = screen.getByLabelText(/peopleSearch.label/i);
fireEvent.change(attendeeInput, { target: { value: "attendee@test.com" } });
fireEvent.keyDown(attendeeInput, { key: "Enter", code: "Enter" });
@@ -559,10 +557,10 @@ describe("Update tempcalendars called with correct params", () => {
await waitFor(() => {
fireEvent.click(screen.getByTestId("MoreVertIcon"));
expect(screen.getByText("Delete event")).toBeInTheDocument();
expect(screen.getByText("eventPreview.deleteEvent")).toBeInTheDocument();
});
const deleteMenuItem = screen.getByText("Delete event");
const deleteMenuItem = screen.getByText("eventPreview.deleteEvent");
fireEvent.click(deleteMenuItem);
await waitFor(() => {
@@ -597,10 +595,10 @@ describe("Update tempcalendars called with correct params", () => {
await waitFor(() => {
fireEvent.click(screen.getByTestId("MoreVertIcon"));
expect(screen.getByText("Delete event")).toBeInTheDocument();
expect(screen.getByText("eventPreview.deleteEvent")).toBeInTheDocument();
});
const deleteMenuItem = screen.getByText("Delete event");
const deleteMenuItem = screen.getByText("eventPreview.deleteEvent");
fireEvent.click(deleteMenuItem);
await waitFor(() => {
@@ -673,10 +671,10 @@ describe("Update tempcalendars called with correct params", () => {
await waitFor(() => {
fireEvent.click(screen.getByTestId("MoreVertIcon"));
expect(screen.getByText("Delete event")).toBeInTheDocument();
expect(screen.getByText("eventPreview.deleteEvent")).toBeInTheDocument();
});
const deleteMenuItem = screen.getByText("Delete event");
const deleteMenuItem = screen.getByText("eventPreview.deleteEvent");
fireEvent.click(deleteMenuItem);
await waitFor(() => {
@@ -767,10 +765,10 @@ describe("Update tempcalendars called with correct params", () => {
await waitFor(() => {
fireEvent.click(screen.getByTestId("MoreVertIcon"));
expect(screen.getByText("Delete event")).toBeInTheDocument();
expect(screen.getByText("eventPreview.deleteEvent")).toBeInTheDocument();
});
const deleteMenuItem = screen.getByText("Delete event");
const deleteMenuItem = screen.getByText("eventPreview.deleteEvent");
fireEvent.click(deleteMenuItem);
await waitFor(() => {
__test__/utils/Renderwithproviders.tsx
+19 -6
View File
@@ -1,13 +1,11 @@
import type { RenderOptions } from "@testing-library/react";
import { render } from "@testing-library/react";
import { I18nContext } from "cozy-ui/transpiled/react/providers/I18n";
import React, { PropsWithChildren } from "react";
import { Provider } from "react-redux";
import { MemoryRouter } from "react-router-dom";
import type { AppStore, RootState } from "../../src/app/store";
import { setupStore } from "../../src/app/store";
import { userData, userOrganiser } from "../../src/features/User/userDataTypes";
interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
preloadedState?: Partial<RootState>;
store?: AppStore;
@@ -23,9 +21,24 @@ export function renderWithProviders(
const Wrapper = ({ children }: PropsWithChildren) => {
return (
<MemoryRouter initialEntries={["/"]}>
<Provider store={store}>{children}</Provider>
</MemoryRouter>
<I18nContext.Provider
value={{
t: (key: string, vars?: Record<string, string>) => {
if (vars) {
const params = Object.entries(vars)
.map(([k, v]) => `${k}=${v}`)
.join(",");
return `${key}(${params})`;
}
return key;
},
f: (date: Date, formatStr: string) => date.toString(),
}}
>
<MemoryRouter initialEntries={["/"]}>
<Provider store={store}>{children}</Provider>
</MemoryRouter>
</I18nContext.Provider>
);
};
jest.config.ts
+1 -1
View File
@@ -33,7 +33,7 @@ const config: Config = {
"<rootDir>/fileTransformer.ts",
},
transformIgnorePatterns: [
"/node_modules/(?!(preact|@fullcalendar|react-calendar|get-user-locale|memoize|mimic-function|@wojtekmaj|ky)/)",
"/node_modules/(?!(preact|@fullcalendar|react-calendar|get-user-locale|memoize|mimic-function|@wojtekmaj|ky|cozy-ui)/)",
],
moduleNameMapper: { "^preact(/(.*)|$)": "preact$1" },
package-lock.json
Generated
+9607 -2405
View File
File diff suppressed because it is too large Load Diff
package.json
+18 -7
View File
@@ -16,23 +16,20 @@
"@mui/material": "^7.1.2",
"@mui/x-date-pickers": "^8.14.0",
"@reduxjs/toolkit": "^2.8.2",
"@types/node": "^16.18.126",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"cozy-ui": "^133.0.0-beta.1",
"dayjs": "^1.11.19",
"i18next": "^23.7.9",
"ical.js": "^2.2.0",
"ky": "^1.8.1",
"moment": "^2.30.1",
"moment-timezone": "^0.5.48",
"openid-client": "^6.5.3",
"react": "^19.1.0",
"react": "^18.2.0",
"react-colorful": "^5.6.1",
"react-dom": "^19.1.0",
"react-i18next": "^13.5.0",
"react-dom": "^18.2.0",
"react-redux": "^9.2.0",
"react-router-dom": "^6.23.1",
"redux-first-history": "^5.2.0",
"ts-node": "^10.9.2",
"web-vitals": "^2.1.4"
},
"scripts": {
@@ -71,6 +68,9 @@
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^30.0.0",
"@types/node": "^20.19.24",
"@types/react": "^18.3.26",
"@types/react-dom": "^18.3.7",
"@typescript-eslint/eslint-plugin": "^8.44.1",
"@typescript-eslint/parser": "^8.44.1",
"babel-jest": "^30.0.4",
@@ -90,5 +90,16 @@
"prettier": "^3.6.2",
"ts-jest": "^29.4.0",
"typescript": "^4.9.5"
},
"overrides": {
"@material-ui/core": "npm:@mui/material@latest",
"@material-ui/lab": "npm:@mui/lab@latest",
"@material-ui/styles": "npm:@mui/styles@latest",
"@material-ui/system": "npm:@mui/system@latest",
"@material-ui/pickers": "npm:@mui/x-date-pickers@latest",
"react-select": "^5.8.0",
"react-swipeable-views": "^0.14.0",
"react-markdown": "^9.0.0",
"@babel/runtime": "^7.26.10"
}
}
public/.env.example.js
+1
View File
@@ -9,3 +9,4 @@ var CALENDAR_BASE_URL = "https://calendar.example.com";
var MAIL_SPA_URL = "https://mail.example.com";
var VIDEO_CONFERENCE_BASE_URL = "https://meet.linagora.com";
var DEBUG = false;
var LANG = "en";
rsbuild.config.ts
+1
View File
@@ -21,5 +21,6 @@ export default defineConfig({
distPath: {
root: "dist",
},
minify: false,
},
});
src/App.tsx
+25 -12
View File
@@ -12,29 +12,42 @@ import { CustomThemeProvider } from "./theme/ThemeProvider";
import { useAppDispatch, useAppSelector } from "./app/hooks";
import { push } from "redux-first-history";
import { ErrorSnackbar } from "./components/Error/ErrorSnackbar";
import I18n from "cozy-ui/transpiled/react/providers/I18n";
import en from "./locales/en.json";
import fr from "./locales/fr.json";
const locale = { en, fr };
function App() {
const error = useAppSelector((state) => state.user.error);
const lang = useAppSelector((state) => state.settings.language);
const dispatch = useAppDispatch();
useEffect(() => {
if (error) {
dispatch(push("/error"));
}
});
return (
<CustomThemeProvider>
<Suspense fallback={<Loading />}>
<Router history={history}>
<Routes>
<Route path="/" element={<HandleLogin />} />
<Route path="/calendar" element={<CalendarLayout />} />
<Route path="/callback" element={<CallbackResume />} />
<Route path="/error" element={<Error />} />
</Routes>
</Router>
<ErrorSnackbar error={error} type="user" />
<ErrorSnackbar error={error} type="user" />
</Suspense>
<I18n
dictRequire={(lang: keyof typeof locale) => locale[lang]}
lang={lang}
>
<Suspense fallback={<Loading />}>
<Router history={history}>
<Routes>
<Route path="/" element={<HandleLogin />} />
<Route path="/calendar" element={<CalendarLayout />} />
<Route path="/callback" element={<CallbackResume />} />
<Route path="/error" element={<Error />} />
</Routes>
</Router>
<ErrorSnackbar error={error} type="user" />
<ErrorSnackbar error={error} type="user" />
</Suspense>
</I18n>
</CustomThemeProvider>
);
}
src/app/store.ts
+2
View File
@@ -1,5 +1,6 @@
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/User/userSlice";
import settingsReducer from "../features/Settings/SettingsSlice";
import eventsCalendar from "../features/Calendars/CalendarSlice";
import { createReduxHistoryContext } from "redux-first-history";
import { createBrowserHistory } from "history";
@@ -11,6 +12,7 @@ const rootReducer = combineReducers({
router: routerReducer,
user: userReducer,
calendars: eventsCalendar,
settings: settingsReducer,
});
export const setupStore = (preloadedState?: Partial<RootState>) => {
src/components/Attendees/PeopleSearch.tsx
+6 -4
View File
@@ -11,6 +11,7 @@ import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined
import Chip from "@mui/material/Chip";
import { useTheme } from "@mui/material/styles";
import { getAccessiblePair } from "../Calendar/utils/calendarColorsUtils";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export interface User {
email: string;
@@ -35,6 +36,7 @@ export function PeopleSearch({
freeSolo?: boolean;
onToggleEventPreview?: Function;
}) {
const { t } = useI18n();
const [query, setQuery] = useState("");
const [loading, setLoading] = useState(false);
const [options, setOptions] = useState<User[]>([]);
@@ -79,7 +81,7 @@ export function PeopleSearch({
onChange={(event, value) => {
const last = value[value.length - 1];
if (typeof last === "string" && !isValidEmail(last)) {
setError(`"${last}" is not a valid email address`);
setError(t("peopleSearch.invalidEmail", { email: last }));
return;
}
setError(null);
@@ -93,8 +95,8 @@ export function PeopleSearch({
{...params}
error={!!error}
helperText={error}
placeholder="Start typing a name or email"
label="Start typing a name or email"
placeholder={t("peopleSearch.placeholder")}
label={t("peopleSearch.label")}
autoComplete="off"
onKeyDown={(e) => {
if (e.key === "Enter" && onToggleEventPreview) {
@@ -134,7 +136,7 @@ export function PeopleSearch({
if (selectedUsers.find((u) => u.email === option.email)) return null;
const { key, ...otherProps } = props as any;
return (
<ListItem key={key} {...otherProps} disableGutters>
<ListItem key={key + option?.email} {...otherProps} disableGutters>
<ListItemAvatar>
<Avatar src={option.avatarUrl} alt={option.displayName} />
</ListItemAvatar>
src/components/Calendar/AccessTab.tsx
+9 -2
View File
@@ -3,10 +3,13 @@ import { Box, IconButton, TextField } from "@mui/material";
import { useState } from "react";
import { Calendars } from "../../features/Calendars/CalendarTypes";
import { SnackbarAlert } from "../Loading/SnackBarAlert";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function AccessTab({ calendar }: { calendar: Calendars }) {
const { t } = useI18n();
const calDAVLink = `${(window as any).CALENDAR_BASE_URL}${calendar.link.replace(".json", "")}`;
const [open, setOpen] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(calDAVLink);
setOpen(true);
@@ -18,7 +21,7 @@ export function AccessTab({ calendar }: { calendar: Calendars }) {
<TextField
disabled
fullWidth
label="CalDAV access"
label={t("calendar.caldav_access")}
value={calDAVLink}
slotProps={{
input: {
@@ -31,7 +34,11 @@ export function AccessTab({ calendar }: { calendar: Calendars }) {
}}
/>
</Box>
<SnackbarAlert setOpen={setOpen} open={open} message="Link copied!" />
<SnackbarAlert
setOpen={setOpen}
open={open}
message={t("common.link_copied")}
/>
</>
);
}
src/components/Calendar/Calendar.tsx
+10 -4
View File
@@ -42,6 +42,7 @@ import { MiniCalendar } from "./MiniCalendar";
import { User } from "../Attendees/PeopleSearch";
import { useTheme } from "@mui/material/styles";
import { updateDarkColor } from "./utils/calendarColorsUtils";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
interface CalendarAppProps {
calendarRef: React.RefObject<CalendarApi | null>;
@@ -286,6 +287,8 @@ export default function CalendarApp({
(window as any).__calendarRef = calendarRef;
}
const { t, lang } = useI18n();
return (
<main className="main-layout">
<Box
@@ -312,7 +315,7 @@ export default function CalendarApp({
eventHandlers.handleDateSelect(null as unknown as DateSelectArg)
}
>
<AddIcon /> <p>Create Event</p>
<AddIcon /> <p>{t("event.createEvent")}</p>
</Button>
</Box>
@@ -356,6 +359,7 @@ export default function CalendarApp({
initialView="timeGridWeek"
firstDay={1}
editable={true}
locale={lang}
selectable={true}
timeZone={timezone}
height={"100%"}
@@ -382,7 +386,9 @@ export default function CalendarApp({
weekNumberContent={(arg) => {
return (
<div className="weekSelector">
<div>{arg.text}</div>
<div>
{t("menubar.views.week")} {arg.num}
</div>
<TimezoneSelector
value={timezone}
onChange={(newTimezone: string) =>
@@ -393,7 +399,7 @@ export default function CalendarApp({
);
}}
dayCellContent={(arg) => {
const month = arg.date.toLocaleDateString("en-US", {
const month = arg.date.toLocaleDateString(t("locale"), {
month: "short",
});
if (arg.view.type === "dayGridMonth") {
@@ -453,7 +459,7 @@ export default function CalendarApp({
dayHeaderContent={(arg) => {
const date = arg.date.getDate();
const weekDay = arg.date
.toLocaleDateString("en-US", { weekday: "short" })
.toLocaleDateString(t("locale"), { weekday: "short" })
.toUpperCase();
return (
<div className="fc-daygrid-day-top">
src/components/Calendar/CalendarColorPicker.tsx
+10 -7
View File
@@ -10,6 +10,7 @@ import {
} from "@mui/material";
import { useState } from "react";
import { HexColorPicker } from "react-colorful";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { defaultColors, getAccessiblePair } from "./utils/calendarColorsUtils";
export function ColorPicker({
@@ -54,6 +55,7 @@ export function ColorPicker({
</Box>
);
}
function ColorBox({
color,
onChange,
@@ -107,11 +109,11 @@ function ColorPickerBox({
onChange: (color: Record<string, string>) => void;
selectedColor: Record<string, string>;
}) {
const { t } = useI18n();
const [oldColor] = useState(
selectedColor ?? { light: "#ffffff", dark: "#808080" }
);
const [color, setColor] = useState(oldColor);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const open = Boolean(anchorEl);
const theme = useTheme();
@@ -139,12 +141,13 @@ function ColorPickerBox({
setColor(newColor);
onChange(newColor);
};
return (
<>
<Box
key={"colorPicker"}
role="button"
aria-label={`select custom color`}
aria-label={t("colorPicker.selectCustom")}
onClick={handleClick}
style={{
width: "46px",
@@ -198,10 +201,10 @@ function ColorPickerBox({
}}
>
<Typography variant="subtitle1" fontWeight="600">
Choose custom colour
{t("colorPicker.title")}
</Typography>
<Typography variant="body2" sx={{ mb: 2, color: "text.secondary" }}>
Choose a background colour for this calendar
{t("colorPicker.subtitle")}
</Typography>
<Box sx={{ mb: 2 }}>
@@ -214,7 +217,7 @@ function ColorPickerBox({
<Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
<Typography variant="body2" sx={{ mr: 1 }}>
Hex
{t("colorPicker.hex")}
</Typography>
<TextField
value={color.light?.toUpperCase()}
@@ -226,13 +229,13 @@ function ColorPickerBox({
</Box>
<Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1 }}>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose}>{t("common.cancel")}</Button>
<Button
variant="contained"
onClick={handleSave}
sx={{ textTransform: "none" }}
>
Save
{t("actions.save")}
</Button>
</Box>
</Popover>
src/components/Calendar/CalendarItemList.tsx
+2 -2
View File
@@ -4,9 +4,9 @@ import { Calendars } from "../../features/Calendars/CalendarTypes";
import { CalendarName } from "./CalendarName";
export function CalendarItemList(
userPersonnalCalendars: Calendars[]
userPersonalCalendars: Calendars[]
): React.ReactNode {
return Object.values(userPersonnalCalendars).map((calendar) => (
return Object.values(userPersonalCalendars).map((calendar) => (
<MenuItem key={calendar.id} value={calendar.id}>
<CalendarName calendar={calendar} />
</MenuItem>
src/components/Calendar/CalendarModal.tsx
+19 -5
View File
@@ -13,6 +13,7 @@ import { AccessTab } from "./AccessTab";
import { ImportTab } from "./ImportTab";
import { SettingsTab } from "./SettingsTab";
import { defaultColors } from "./utils/calendarColorsUtils";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
function CalendarPopover({
open,
@@ -26,6 +27,7 @@ function CalendarPopover({
) => void;
calendar?: Calendars;
}) {
const { t } = useI18n();
const dispatch = useAppDispatch();
const userId =
useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
@@ -181,10 +183,18 @@ function CalendarPopover({
<Tabs value={tab} onChange={(e, v) => setTab(v)}>
<Tab
value="settings"
label={calendar ? "Settings" : "Add new calendar"}
label={
calendar
? t("calendarPopover.tabs.settings")
: t("calendarPopover.tabs.addNew")
}
/>
{calendar && <Tab value="access" label="Access" />}
{isOwn && <Tab value="import" label="Import" />}
{calendar && (
<Tab value="access" label={t("calendarPopover.tabs.access")} />
)}
{isOwn && (
<Tab value="import" label={t("calendarPopover.tabs.import")} />
)}
</Tabs>
}
actions={
@@ -193,14 +203,18 @@ function CalendarPopover({
variant="outlined"
onClick={(e) => handleClose({}, "backdropClick")}
>
Cancel
{t("common.cancel")}
</Button>
<Button
disabled={tab === "import" ? !importedContent : !name.trim()}
variant="contained"
onClick={tab === "import" ? handleImport : handleSave}
>
{tab === "import" ? "Import" : calendar ? "Save" : "Create"}
{tab === "import"
? t("actions.import")
: calendar
? t("actions.save")
: t("actions.create")}
</Button>
</DialogActions>
}
src/components/Calendar/CalendarSearch.tsx
+27 -17
View File
@@ -2,23 +2,19 @@ import CloseIcon from "@mui/icons-material/Close";
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 IconButton from "@mui/material/IconButton";
import Modal from "@mui/material/Modal";
import { useTheme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { useState } from "react";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
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";
import { defaultColors, getAccessiblePair } from "./utils/calendarColorsUtils";
import { useTheme } from "@mui/material/styles";
import { PeopleSearch, User } from "../Attendees/PeopleSearch";
import { ResponsiveDialog } from "../Dialog";
import { ColorPicker } from "./CalendarColorPicker";
import { defaultColors, getAccessiblePair } from "./utils/calendarColorsUtils";
interface CalendarWithOwner {
cal: Record<string, any>;
@@ -104,6 +100,7 @@ function SelectedCalendarsList({
color: Record<string, string>
) => void;
}) {
const { t } = useI18n();
if (selectedCal.length === 0) return null;
const groupedByOwner = selectedCal.reduce<
@@ -144,7 +141,7 @@ function SelectedCalendarsList({
return (
<Box mt={2}>
<Typography variant="subtitle1" gutterBottom>
Name
{t("common.name")}
</Typography>
{Object.values(groupedByOwner).map(
@@ -160,14 +157,26 @@ function SelectedCalendarsList({
onColorChange={(color) => onColorChange(cal, color)}
/>
) : (
<Typography color="textSecondary">
No publicly available calendars for {owner.displayName}
<Typography
key={t("calendar.noPublicCalendarsFor", {
name: owner.displayName,
})}
color="textSecondary"
>
{t("calendar.noPublicCalendarsFor", {
name: owner.displayName,
})}
</Typography>
)
)
) : alreadyExisting ? (
<Typography color="textSecondary">
No more Calendar for {owner.displayName}
<Typography
key={t("calendar.noMoreCalendarsFor", {
name: owner.displayName,
})}
color="textSecondary"
>
{t("calendar.noMoreCalendarsFor", { name: owner.displayName })}
</Typography>
) : null}
</Box>
@@ -230,6 +239,7 @@ export default function CalendarSearch({
setSelectedUsers([]);
}
};
const { t } = useI18n();
return (
<ResponsiveDialog
@@ -240,17 +250,17 @@ export default function CalendarSearch({
setSelectedCalendars([]);
setSelectedUsers([]);
}}
title="Browse other calendars"
title={t("calendar.browseOtherCalendars")}
actions={
<>
<Button
variant="outlined"
onClick={() => onClose({}, "backdropClick")}
>
Cancel
{t("common.cancel")}
</Button>
<Button variant="contained" onClick={handleSave}>
Add
{t("actions.add")}
</Button>
</>
}
src/components/Calendar/CalendarSelection.tsx
+17 -18
View File
@@ -16,6 +16,7 @@ import { Divider, ListItem, Menu, MenuItem } from "@mui/material";
import { removeCalendarAsync } from "../../features/Calendars/CalendarSlice";
import { DeleteCalendarDialog } from "./DeleteCalendarDialog";
import { trimLongTextWithoutSpace } from "../../utils/textUtils";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
function CalendarAccordion({
title,
@@ -80,7 +81,7 @@ function CalendarAccordion({
key={id}
calendars={allCalendars}
id={id}
isPersonnal={defaultExpanded}
isPersonal={defaultExpanded}
selectedCalendars={selectedCalendars}
handleCalendarToggle={handleToggle}
setOpen={() => setOpen(id)}
@@ -98,11 +99,12 @@ export default function CalendarSelection({
selectedCalendars: string[];
setSelectedCalendars: Function;
}) {
const { t } = useI18n();
const userId =
useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
const calendars = useAppSelector((state) => state.calendars.list);
const personnalCalendars = Object.keys(calendars).filter(
const personalCalendars = Object.keys(calendars).filter(
(id) => id.split("/")[0] === userId
);
const delegatedCalendars = Object.keys(calendars).filter(
@@ -127,8 +129,8 @@ export default function CalendarSelection({
<>
<div>
<CalendarAccordion
title="Personnal Calendars"
calendars={personnalCalendars}
title={t("calendar.personal")}
calendars={personalCalendars}
selectedCalendars={selectedCalendars}
handleToggle={handleCalendarToggle}
showAddButton
@@ -141,7 +143,7 @@ export default function CalendarSelection({
/>
<CalendarAccordion
title="Delegated Calendars"
title={t("calendar.delegated")}
calendars={delegatedCalendars}
selectedCalendars={selectedCalendars}
handleToggle={handleCalendarToggle}
@@ -155,7 +157,7 @@ export default function CalendarSelection({
/>
<CalendarAccordion
title="Other Calendars"
title={t("calendar.other")}
calendars={sharedCalendars}
selectedCalendars={selectedCalendars}
showAddButton
@@ -197,18 +199,19 @@ export default function CalendarSelection({
function CalendarSelector({
calendars,
id,
isPersonnal,
isPersonal,
selectedCalendars,
handleCalendarToggle,
setOpen,
}: {
calendars: Record<string, Calendars>;
id: string;
isPersonnal: boolean;
isPersonal: boolean;
selectedCalendars: string[];
handleCalendarToggle: (name: string) => void;
setOpen: Function;
}) {
const { t } = useI18n();
const dispatch = useAppDispatch();
const calLink =
useAppSelector((state) => state.calendars.list[id].link) ?? "";
@@ -222,7 +225,7 @@ function CalendarSelector({
setAnchorEl(null);
};
const [userId, calId] = id.split("/");
const isDefault = isPersonnal && userId === calId;
const isDefault = isPersonal && userId === calId;
const [deletePopupOpen, setDeletePopupOpen] = useState(false);
const handleDeleteConfirm = () => {
@@ -244,14 +247,10 @@ function CalendarSelector({
justifyContent: "space-between",
transition: "background-color 0.2s ease",
padding: "8px 24px 8px 16px",
"& .MoreBtn": {
opacity: 0,
},
"& .MoreBtn": { opacity: 0 },
"&:hover": {
backgroundColor: "#F3F3F6",
"& .MoreBtn": {
opacity: 1,
},
"& .MoreBtn": { opacity: 1 },
},
}}
>
@@ -293,12 +292,12 @@ function CalendarSelector({
handleClose();
}}
>
Modify
{t("actions.modify")}
</MenuItem>
{!isDefault && <Divider />}
{!isDefault && (
<MenuItem onClick={() => setDeletePopupOpen(!deletePopupOpen)}>
{isPersonnal ? "Delete" : "Remove"}
{isPersonal ? t("actions.delete") : t("actions.remove")}
</MenuItem>
)}
</Menu>
@@ -308,7 +307,7 @@ function CalendarSelector({
setDeletePopupOpen={setDeletePopupOpen}
calendars={calendars}
id={id}
isPersonnal={isPersonnal}
isPersonal={isPersonal}
handleDeleteConfirm={handleDeleteConfirm}
/>
</>
src/components/Calendar/DeleteCalendarDialog.tsx
+17 -9
View File
@@ -5,37 +5,45 @@ import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function DeleteCalendarDialog({
deletePopupOpen,
setDeletePopupOpen,
calendars,
id,
isPersonnal,
isPersonal,
handleDeleteConfirm,
}: {
deletePopupOpen: boolean;
setDeletePopupOpen: (e: boolean) => void;
calendars: Record<string, Calendars>;
id: string;
isPersonnal: boolean;
isPersonal: boolean;
handleDeleteConfirm: () => void;
}) {
const { t } = useI18n();
return (
<Dialog open={deletePopupOpen} onClose={() => setDeletePopupOpen(false)}>
<DialogTitle>Remove {calendars[id].name}?</DialogTitle>
<DialogTitle>
{t("calendar.delete.title", { name: calendars[id].name })}
</DialogTitle>
<DialogContent>
<DialogContentText>
Are you sure you want to remove this calendar?{" "}
{isPersonnal
? "You will loose all events in this calendar."
: "You will loose access to its events. You will still be able to add it back later."}
{isPersonal
? t("calendar.delete.personalWarning")
: t("calendar.delete.sharedWarning")}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => setDeletePopupOpen(false)}>Cancel</Button>
<Button onClick={() => setDeletePopupOpen(false)}>
{t("common.cancel")}
</Button>
<Button onClick={handleDeleteConfirm} variant="contained">
{isPersonnal ? "Delete" : "Remove"}
{isPersonal ? t("actions.delete") : t("actions.remove")}
</Button>
</DialogActions>
</Dialog>
src/components/Calendar/ImportTab.tsx
+12 -10
View File
@@ -14,6 +14,7 @@ import { useEffect, useState } from "react";
import { useAppSelector } from "../../app/hooks";
import { CalendarItemList } from "./CalendarItemList";
import { SettingsTab } from "./SettingsTab";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function ImportTab({
userId,
@@ -37,11 +38,12 @@ export function ImportTab({
setVisibility: Function;
};
}) {
const { t } = useI18n();
const [importMode, setImportMode] = useState<"file" | "url">("file");
const [importFile, setImportFile] = useState<File | null>(null);
const [importUrl, setImportUrl] = useState("");
const calendars = useAppSelector((state) => state.calendars.list);
const personnalCalendars = Object.values(calendars).filter(
const personalCalendars = Object.values(calendars).filter(
(cal) => cal.id.split("/")[0] === userId
);
@@ -59,14 +61,14 @@ export function ImportTab({
size="small"
sx={{ mb: 2 }}
>
<ToggleButton value="file">File</ToggleButton>
{/* <ToggleButton value="url">URL</ToggleButton> */}
<ToggleButton value="file">{t("common.import_file")}</ToggleButton>
{/* <ToggleButton value="url">{t("common.import_url")}</ToggleButton> */}
</ToggleButtonGroup>
{importMode === "file" && (
<>
<Button variant="outlined" component="label" sx={{ mb: 1 }}>
Select file
{t("common.select_file")}
<input
type="file"
hidden
@@ -85,7 +87,7 @@ export function ImportTab({
display="block"
mb={2}
>
Import events from an ICS file to one of your calendars.
{t("calendar.import_file_description")}
</Typography>
</>
)}
@@ -93,7 +95,7 @@ export function ImportTab({
{importMode === "url" && (
<TextField
fullWidth
label="ICS feed URL"
label={t("calendar.ics_feed_url")}
value={importUrl}
onChange={(e) => setImportUrl(e.target.value)}
size="small"
@@ -102,15 +104,15 @@ export function ImportTab({
)}
<FormControl fullWidth size="small" sx={{ mt: 2 }}>
<InputLabel id="import-to-label">Import to</InputLabel>
<InputLabel id="import-to-label">{t("calendar.import_to")}</InputLabel>
<Select
labelId="import-to-label"
label="Import to"
label={t("calendar.import_to")}
value={importTarget}
onChange={(e) => setImportTarget(e.target.value)}
>
<MenuItem value="new">New calendar</MenuItem>
{CalendarItemList(personnalCalendars)}
<MenuItem value="new">{t("calendar.new_calendar")}</MenuItem>
{CalendarItemList(personalCalendars)}
</Select>
</FormControl>
src/components/Calendar/MiniCalendar.tsx
+6 -1
View File
@@ -12,6 +12,7 @@ import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { refreshCalendars } from "../Event/utils/eventUtils";
import { getCalendarDetailAsync } from "../../features/Calendars/CalendarSlice";
import { useEffect, useState } from "react";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function MiniCalendar({
calendarRef,
@@ -29,10 +30,14 @@ export function MiniCalendar({
const dispatch = useAppDispatch();
const calendars = useAppSelector((state) => state.calendars);
const [visibleDate, setVisibleDate] = useState(selectedDate);
const { t } = useI18n();
useEffect(() => setVisibleDate(selectedDate), [selectedDate]);
return (
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="en-gb">
<LocalizationProvider
dateAdapter={AdapterMoment}
adapterLocale={t("locale") ?? "en-gb"}
>
<DateCalendar
value={moment(visibleDate)}
onChange={(dateMoment) => {
src/components/Calendar/SettingsTab.tsx
+14 -8
View File
@@ -9,7 +9,8 @@ import {
ToggleButtonGroup,
Typography,
} from "@mui/material";
import { useState } from "react";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { useState, useEffect } from "react";
import { useAppSelector } from "../../app/hooks";
import { Calendars } from "../../features/Calendars/CalendarTypes";
import { ColorPicker } from "./CalendarColorPicker";
@@ -35,16 +36,21 @@ export function SettingsTab({
setVisibility: Function;
calendar?: Calendars;
}) {
const { t } = useI18n();
const [toggleDesc, setToggleDesc] = useState(Boolean(description));
const userId =
useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
const isOwn = calendar ? calendar.id.split("/")[0] === userId : true;
useEffect(() => {
if (description) setToggleDesc(true);
}, [description]);
return (
<Box mt={2}>
<TextField
fullWidth
label="Name"
label={t("common.name")}
value={name}
onChange={(e) => setName(e.target.value)}
size="small"
@@ -58,14 +64,14 @@ export function SettingsTab({
onClick={() => setToggleDesc(!toggleDesc)}
startIcon={<FormatListBulletedIcon />}
>
Add description
{t("calendar.addDescription")}
</Button>
)}
{toggleDesc && (
<TextField
fullWidth
label="Description"
label={t("common.description")}
value={description}
onChange={(e) => setDescription(e.target.value)}
size="small"
@@ -77,7 +83,7 @@ export function SettingsTab({
<Box mt={2}>
<Typography variant="body2" gutterBottom>
Color
{t("calendar.color")}
</Typography>
<ColorPicker
onChange={(color) => setColor(color)}
@@ -88,7 +94,7 @@ export function SettingsTab({
{isOwn && (
<Box mt={2}>
<Typography variant="body2" gutterBottom>
New events created will be visible to:
{t("calendar.newEventsVisibility")}
</Typography>
<ToggleButtonGroup
value={visibility}
@@ -98,12 +104,12 @@ export function SettingsTab({
>
<ToggleButton value="public">
<PublicIcon fontSize="small" />
All
{t("common.all")}
</ToggleButton>
<ToggleButton value="private">
<LockIcon fontSize="small" />
You
{t("common.you")}
</ToggleButton>
</ToggleButtonGroup>
</Box>
src/components/Calendar/TimezoneSelector.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import { Button, Popover } from "@mui/material";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { MouseEvent, useMemo, useState } from "react";
import { TIMEZONES } from "../../utils/timezone-data";
import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
@@ -34,7 +35,7 @@ export function TimezoneSelector({ value, onChange }: TimezoneSelectProps) {
};
const open = Boolean(anchorEl);
const { t } = useI18n();
return (
<>
<Button
@@ -49,7 +50,7 @@ export function TimezoneSelector({ value, onChange }: TimezoneSelectProps) {
lineHeight: 1.2,
}}
>
{selectedOffset || "Select Timezone"}
{selectedOffset || t("common.select_timezone")}
</Button>
<Popover
src/components/Error/Error.tsx
+6 -6
View File
@@ -4,8 +4,10 @@ import { Box, Button, Fade, Paper, Stack, Typography } from "@mui/material";
import { useEffect } from "react";
import { push } from "redux-first-history";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function Error() {
const { t } = useI18n();
const dispatch = useAppDispatch();
const userError = useAppSelector((state) => state.user.error);
const calendarError = useAppSelector((state) => state.calendars.error);
@@ -16,7 +18,7 @@ export function Error() {
}
}, [calendarError, dispatch]);
const errorMessage = userError || calendarError || "Unknown error";
const errorMessage = userError || calendarError || t("error.unknown");
return (
<Fade in timeout={500}>
@@ -56,7 +58,7 @@ export function Error() {
</Box>
<Typography variant="h5" fontWeight={600}>
Something went wrong
{t("error.title")}
</Typography>
<Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
@@ -67,9 +69,7 @@ export function Error() {
variant="contained"
color="error"
startIcon={<ReplayIcon />}
onClick={() => {
window.location.reload();
}}
onClick={() => window.location.reload()}
sx={{
textTransform: "none",
fontWeight: 600,
@@ -79,7 +79,7 @@ export function Error() {
boxShadow: "none",
}}
>
Try Again
{t("error.retry")}
</Button>
</Stack>
</Paper>
src/components/Error/ErrorSnackbar.tsx
+9 -4
View File
@@ -4,6 +4,7 @@ import Button from "@mui/material/Button";
import { useAppDispatch } from "../../app/hooks";
import { clearError as calendarClearError } from "../../features/Calendars/CalendarSlice";
import { clearError as userClearError } from "../../features/User/userSlice";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function ErrorSnackbar({
error,
@@ -12,7 +13,9 @@ export function ErrorSnackbar({
error: string | null;
type: "user" | "calendar";
}) {
const { t } = useI18n();
const dispatch = useAppDispatch();
const handleCloseSnackbar = () => {
dispatch(type === "calendar" ? calendarClearError() : userClearError());
};
@@ -29,11 +32,11 @@ export function ErrorSnackbar({
sx={{ width: "100%" }}
action={
<Button color="inherit" size="small" onClick={handleCloseSnackbar}>
OK
{t("common.ok")}
</Button>
}
>
{error}
{error || t("error.unknown")}
</Alert>
</Snackbar>
);
@@ -46,11 +49,13 @@ export function EventErrorSnackbar({
messages: string[];
onClose: () => void;
}) {
const { t } = useI18n();
const open = messages.length > 0;
const summary =
messages.length === 1
? messages[0]
: `${messages.length} events with errors`;
: t("error.multipleEvents", { count: messages.length });
return (
<Snackbar
@@ -65,7 +70,7 @@ export function EventErrorSnackbar({
sx={{ width: "100%" }}
action={
<Button color="inherit" size="small" onClick={onClose}>
OK
{t("common.ok")}
</Button>
}
>
src/components/Event/EditModeDialog.tsx
+8 -6
View File
@@ -11,6 +11,7 @@ import {
} from "@mui/material";
import { CalendarEvent } from "../../features/Events/EventsTypes";
import { useState } from "react";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function EditModeDialog({
type,
@@ -23,6 +24,7 @@ export function EditModeDialog({
event: CalendarEvent;
eventAction: (type: "solo" | "all" | undefined) => void;
}) {
const { t } = useI18n();
const [typeOfAction, setTypeOfAction] = useState<"solo" | "all" | undefined>(
"solo"
);
@@ -37,8 +39,8 @@ export function EditModeDialog({
return (
<Dialog open={Boolean(type)} onClose={handleClose}>
<DialogTitle>
{type === "edit" && "Update the reccurent event"}
{type === "attendance" && "Update the participation status"}
{type === "edit" && t("editModeDialog.updateRecurrentEvent")}
{type === "attendance" && t("editModeDialog.updateParticipationStatus")}
</DialogTitle>
<DialogContent>
<RadioGroup
@@ -50,19 +52,19 @@ export function EditModeDialog({
<FormControlLabel
value="solo"
control={<Radio />}
label="This event"
label={t("editModeDialog.thisEvent")}
/>
<FormControlLabel
value="all"
control={<Radio />}
label="All the events"
label={t("editModeDialog.allEvents")}
/>
</RadioGroup>
</DialogContent>
<DialogActions>
<ButtonGroup>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleEvent}>Ok</Button>
<Button onClick={handleClose}>{t("common.cancel")}</Button>
<Button onClick={handleEvent}>{t("common.ok")}</Button>
</ButtonGroup>
</DialogActions>
</Dialog>
src/components/Event/EventDuplicate.tsx
+3 -1
View File
@@ -1,5 +1,6 @@
import { MenuItem } from "@mui/material";
import { CalendarEvent } from "../../features/Events/EventsTypes";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export default function EventDuplication({
onClose,
@@ -10,13 +11,14 @@ export default function EventDuplication({
event: CalendarEvent;
onOpenDuplicate?: () => void;
}) {
const { t } = useI18n();
return (
<MenuItem
onClick={() => {
onOpenDuplicate?.();
}}
>
Duplicate event
{t("eventDuplication.duplicateEvent")}
</MenuItem>
);
}
src/components/Event/EventFormFields.tsx
+97 -48
View File
@@ -33,6 +33,7 @@ import {
} from "../../utils/videoConferenceUtils";
import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
import { CalendarItemList } from "../Calendar/CalendarItemList";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { FieldWithLabel } from "./components/FieldWithLabel";
import { DateTimeFields } from "./components/DateTimeFields";
import { useAllDayToggle } from "./hooks/useAllDayToggle";
@@ -84,7 +85,7 @@ interface EventFormFieldsProps {
isOpen?: boolean;
// Data
userPersonnalCalendars: Calendars[];
userPersonalCalendars: Calendars[];
timezoneList: {
zones: string[];
browserTz: string;
@@ -145,7 +146,7 @@ export default function EventFormFields({
showRepeat,
setShowRepeat,
isOpen = false,
userPersonnalCalendars,
userPersonalCalendars,
timezoneList,
onStartChange,
onEndChange,
@@ -155,6 +156,8 @@ export default function EventFormFields({
showValidationErrors = false,
onHasEndDateChangedChange,
}: EventFormFieldsProps) {
const { t } = useI18n();
// Internal state for 4 separate fields
const [startDate, setStartDate] = React.useState("");
const [startTime, setStartTime] = React.useState("");
@@ -406,15 +409,15 @@ export default function EventFormFields({
<FieldWithLabel
label={
<>
Title <span style={{ color: "red" }}>*</span>
{t("event.form.title")} <span style={{ color: "red" }}>*</span>
</>
}
isExpanded={showMore}
>
<TextField
fullWidth
label={!showMore ? "Title" : ""}
placeholder="Add title"
label={!showMore ? t("event.form.title") : ""}
placeholder={t("event.form.titlePlaceholder")}
value={title}
onChange={(e) => {
setTitle(e.target.value);
@@ -439,18 +442,21 @@ export default function EventFormFields({
color: "text.secondary",
}}
>
Add description
{t("event.form.addDescription")}
</Button>
</Box>
</FieldWithLabel>
)}
{showDescription && (
<FieldWithLabel label="Description" isExpanded={showMore}>
<FieldWithLabel
label={t("event.form.description")}
isExpanded={showMore}
>
<TextField
fullWidth
label={!showMore ? "Description" : ""}
placeholder="Add description"
label={!showMore ? t("event.form.description") : ""}
placeholder={t("event.form.descriptionPlaceholder")}
value={description}
onChange={(e) => setDescription(e.target.value)}
size="small"
@@ -471,7 +477,7 @@ export default function EventFormFields({
</FieldWithLabel>
)}
<FieldWithLabel label="Date & Time" isExpanded={showMore}>
<FieldWithLabel label={t("event.form.dateTime")} isExpanded={showMore}>
<DateTimeFields
startDate={startDate}
startTime={startTime}
@@ -496,7 +502,7 @@ export default function EventFormFields({
control={
<Checkbox checked={allday} onChange={handleAllDayToggle} />
}
label="All day"
label={t("event.form.allDay")}
/>
<FormControlLabel
control={
@@ -528,7 +534,7 @@ export default function EventFormFields({
}}
/>
}
label="Repeat"
label={t("event.form.repeat")}
/>
<TimezoneAutocomplete
value={timezone}
@@ -538,7 +544,7 @@ export default function EventFormFields({
showIcon={true}
width={240}
size="small"
placeholder="Select timezone"
placeholder={t("event.form.timezonePlaceholder")}
/>
</Box>
</FieldWithLabel>
@@ -554,11 +560,17 @@ export default function EventFormFields({
</FieldWithLabel>
)}
<FieldWithLabel label="Participants" isExpanded={showMore}>
<FieldWithLabel
label={t("event.form.participants")}
isExpanded={showMore}
>
<AttendeeSelector attendees={attendees} setAttendees={setAttendees} />
</FieldWithLabel>
<FieldWithLabel label="Video meeting" isExpanded={showMore}>
<FieldWithLabel
label={t("event.form.videoMeeting")}
isExpanded={showMore}
>
<Box display="flex" gap={1} alignItems="center">
<Button
startIcon={<VideocamIcon />}
@@ -570,7 +582,7 @@ export default function EventFormFields({
display: hasVideoConference ? "none" : "flex",
}}
>
Add Visio conference
{t("event.form.addVisioConference")}
</Button>
{hasVideoConference && meetingLink && (
@@ -585,14 +597,14 @@ export default function EventFormFields({
mr: 1,
}}
>
Join Visio conference
{t("event.form.joinVisioConference")}
</Button>
<IconButton
onClick={handleCopyMeetingLink}
size="small"
sx={{ color: "primary.main" }}
aria-label="Copy meeting link"
title="Copy meeting link"
aria-label={t("event.form.copyMeetingLink")}
title={t("event.form.copyMeetingLink")}
>
<CopyIcon />
</IconButton>
@@ -600,8 +612,8 @@ export default function EventFormFields({
onClick={handleDeleteVideoConference}
size="small"
sx={{ color: "error.main" }}
aria-label="Remove video conference"
title="Remove video conference"
aria-label={t("event.form.removeVideoConference")}
title={t("event.form.removeVideoConference")}
>
<DeleteIcon />
</IconButton>
@@ -610,11 +622,11 @@ export default function EventFormFields({
</Box>
</FieldWithLabel>
<FieldWithLabel label="Location" isExpanded={showMore}>
<FieldWithLabel label={t("event.form.location")} isExpanded={showMore}>
<TextField
fullWidth
label={!showMore ? "Location" : ""}
placeholder="Add location"
label={!showMore ? t("event.form.location") : ""}
placeholder={t("event.form.locationPlaceholder")}
value={location}
onChange={(e) => setLocation(e.target.value)}
size="small"
@@ -622,65 +634,102 @@ export default function EventFormFields({
/>
</FieldWithLabel>
<FieldWithLabel label="Calendar" isExpanded={showMore}>
<FieldWithLabel label={t("event.form.calendar")} isExpanded={showMore}>
<FormControl fullWidth margin="dense" size="small">
{!showMore && (
<InputLabel id="calendar-select-label">Calendar</InputLabel>
<InputLabel id="calendar-select-label">
{t("event.form.calendar")}
</InputLabel>
)}
<Select
labelId="calendar-select-label"
value={calendarid ?? ""}
label={!showMore ? "Calendar" : ""}
label={!showMore ? t("event.form.calendar") : ""}
displayEmpty
onChange={(e: SelectChangeEvent) =>
handleCalendarChange(e.target.value)
}
>
{CalendarItemList(userPersonnalCalendars)}
{CalendarItemList(userPersonalCalendars)}
</Select>
</FormControl>
</FieldWithLabel>
{showMore && (
<>
<FieldWithLabel label="Notification" isExpanded={showMore}>
<FieldWithLabel
label={t("event.form.notification")}
isExpanded={showMore}
>
<FormControl fullWidth margin="dense" size="small">
<Select
labelId="notification"
value={alarm}
onChange={(e: SelectChangeEvent) => setAlarm(e.target.value)}
>
<MenuItem value={""}>No Notification</MenuItem>
<MenuItem value={"-PT1M"}>1 minute</MenuItem>
<MenuItem value={"-PT5M"}>2 minutes</MenuItem>
<MenuItem value={"-PT10M"}>10 minutes</MenuItem>
<MenuItem value={"-PT15M"}>15 minutes</MenuItem>
<MenuItem value={"-PT30M"}>30 minutes</MenuItem>
<MenuItem value={"-PT1H"}>1 hours</MenuItem>
<MenuItem value={"-PT2H"}>2 hours</MenuItem>
<MenuItem value={"-PT5H"}>5 hours</MenuItem>
<MenuItem value={"-PT12H"}>12 hours</MenuItem>
<MenuItem value={"-PT1D"}>1 day</MenuItem>
<MenuItem value={"-PT2D"}>2 days</MenuItem>
<MenuItem value={"-PT1W"}>1 week</MenuItem>
<MenuItem value="">{t("event.form.notifications.")}</MenuItem>
<MenuItem value="-PT1M">
{t("event.form.notifications.-PT1M")}
</MenuItem>
<MenuItem value="-PT5M">
{t("event.form.notifications.-PT5M")}
</MenuItem>
<MenuItem value="-PT10M">
{t("event.form.notifications.-PT10M")}
</MenuItem>
<MenuItem value="-PT15M">
{t("event.form.notifications.-PT15M")}
</MenuItem>
<MenuItem value="-PT30M">
{t("event.form.notifications.-PT30M")}
</MenuItem>
<MenuItem value="-PT1H">
{t("event.form.notifications.-PT1H")}
</MenuItem>
<MenuItem value="-PT2H">
{t("event.form.notifications.-PT2H")}
</MenuItem>
<MenuItem value="-PT5H">
{t("event.form.notifications.-PT5H")}
</MenuItem>
<MenuItem value="-PT12H">
{t("event.form.notifications.-PT12H")}
</MenuItem>
<MenuItem value="-PT1D">
{t("event.form.notifications.-PT1D")}
</MenuItem>
<MenuItem value="-PT2D">
{t("event.form.notifications.-PT2D")}
</MenuItem>
<MenuItem value="-PT1W">
{t("event.form.notifications.-PT1W")}
</MenuItem>
</Select>
</FormControl>
</FieldWithLabel>
<FieldWithLabel label="Show me as" isExpanded={showMore}>
<FieldWithLabel
label={t("event.form.showMeAs")}
isExpanded={showMore}
>
<FormControl fullWidth margin="dense" size="small">
<Select
labelId="busy"
value={busy}
onChange={(e: SelectChangeEvent) => setBusy(e.target.value)}
>
<MenuItem value={"TRANSPARENT"}>Free</MenuItem>
<MenuItem value={"OPAQUE"}>Busy </MenuItem>
<MenuItem value={"TRANSPARENT"}>
{t("event.form.free")}
</MenuItem>
<MenuItem value={"OPAQUE"}>{t("event.form.busy")}</MenuItem>
</Select>
</FormControl>
</FieldWithLabel>
<FieldWithLabel label="Visible to" isExpanded={showMore}>
<FieldWithLabel
label={t("event.form.visibleTo")}
isExpanded={showMore}
>
<ToggleButtonGroup
value={eventClass}
exclusive
@@ -693,11 +742,11 @@ export default function EventFormFields({
>
<ToggleButton value="PUBLIC" sx={{ width: "140px" }}>
<PublicIcon sx={{ mr: 1, fontSize: "16px" }} />
All
{t("event.form.visibleAll")}
</ToggleButton>
<ToggleButton value="PRIVATE" sx={{ width: "140px" }}>
<LockIcon sx={{ mr: 1, fontSize: "16px" }} />
Participants
{t("event.form.visibleParticipants")}
</ToggleButton>
</ToggleButtonGroup>
</FieldWithLabel>
src/components/Event/EventRepeat.tsx
+35 -12
View File
@@ -15,6 +15,7 @@ import {
} from "@mui/material";
import { useEffect, useState } from "react";
import { RepetitionObject } from "../../features/Events/EventsTypes";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export default function RepeatEvent({
repetition,
@@ -27,6 +28,7 @@ export default function RepeatEvent({
setRepetition: Function;
isOwn?: boolean;
}) {
const { t } = useI18n();
const days = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
const day = new Date(eventStart);
// derive endOption based on repetition
@@ -60,12 +62,25 @@ export default function RepeatEvent({
});
};
const getDayLabel = (day: string) => {
const dayMap: { [key: string]: string } = {
MO: t("event.repeat.days.monday"),
TU: t("event.repeat.days.tuesday"),
WE: t("event.repeat.days.wednesday"),
TH: t("event.repeat.days.thursday"),
FR: t("event.repeat.days.friday"),
SA: t("event.repeat.days.saturday"),
SU: t("event.repeat.days.sunday"),
};
return dayMap[day] || day;
};
return (
<Box>
<Stack>
{/* Interval */}
<Box display="flex" alignItems="center" gap={2} mb={2}>
<Typography>Repeat every</Typography>
<Typography>{t("event.repeat.repeatEvery")}</Typography>
<TextField
type="number"
value={repetition.interval ?? 1}
@@ -104,10 +119,18 @@ export default function RepeatEvent({
}
}}
>
<MenuItem value={"daily"}>Day(s)</MenuItem>
<MenuItem value={"weekly"}>Week(s)</MenuItem>
<MenuItem value={"monthly"}>Month(s)</MenuItem>
<MenuItem value={"yearly"}>Year(s)</MenuItem>
<MenuItem value={"daily"}>
{t("event.repeat.frequency.days")}
</MenuItem>
<MenuItem value={"weekly"}>
{t("event.repeat.frequency.weeks")}
</MenuItem>
<MenuItem value={"monthly"}>
{t("event.repeat.frequency.months")}
</MenuItem>
<MenuItem value={"yearly"}>
{t("event.repeat.frequency.years")}
</MenuItem>
</Select>
</FormControl>
</Box>
@@ -116,7 +139,7 @@ export default function RepeatEvent({
{repetition.freq === "weekly" && (
<Box>
<Typography variant="body2" gutterBottom>
Repeat on:
{t("event.repeat.repeatOn")}
</Typography>
<FormGroup row>
{days.map((day) => (
@@ -129,7 +152,7 @@ export default function RepeatEvent({
onChange={() => handleDayChange(day)}
/>
}
label={day}
label={getDayLabel(day)}
/>
))}
</FormGroup>
@@ -139,7 +162,7 @@ export default function RepeatEvent({
{/* End options */}
<Box>
<Typography variant="body2" gutterBottom>
End:
{t("event.repeat.end.label")}
</Typography>
<RadioGroup
value={endOption}
@@ -170,7 +193,7 @@ export default function RepeatEvent({
disabled={!isOwn}
value="never"
control={<Radio />}
label="Never"
label={t("event.repeat.end.never")}
/>
<FormControlLabel
@@ -179,7 +202,7 @@ export default function RepeatEvent({
control={<Radio />}
label={
<Box display="flex" alignItems="center" gap={1}>
After
{t("event.repeat.end.after")}
<TextField
type="number"
size="small"
@@ -195,7 +218,7 @@ export default function RepeatEvent({
inputProps={{ min: 1, "data-testid": "occurrences-input" }}
disabled={!isOwn || endOption !== "after"}
/>
occurrences
{t("event.repeat.end.occurrences")}
</Box>
}
/>
@@ -206,7 +229,7 @@ export default function RepeatEvent({
control={<Radio />}
label={
<Box display="flex" alignItems="center" gap={1}>
On
{t("event.repeat.end.on")}
<TextField
type="date"
inputProps={{ "data-testid": "end-date" }}
src/components/Event/components/DateTimeFields.tsx
+19 -11
View File
@@ -6,8 +6,10 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { LONG_DATE_FORMAT } from "../utils/dateTimeFormatters";
import "dayjs/locale/fr";
import "dayjs/locale/en";
dayjs.extend(customParseFormat);
/**
@@ -54,15 +56,21 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
onEndDateChange,
onEndTimeChange,
}) => {
const { t, lang } = useI18n();
const isExpanded = showMore;
const shouldShowEndDateNormal = allday || !!showEndDate;
const shouldShowFullFieldsInNormal = !allday && hasEndDateChanged;
const showSingleDateField =
!isExpanded && !shouldShowEndDateNormal && !shouldShowFullFieldsInNormal;
const startDateLabel = showSingleDateField ? "Date" : "Start Date";
const startDateLabel = showSingleDateField
? t("dateTimeFields.date")
: t("dateTimeFields.startDate");
return (
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en">
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale={lang ?? "en"}
>
<Box
display="flex"
flexDirection="column"
@@ -73,7 +81,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
<Box display="flex" gap={1} flexDirection="row" alignItems="center">
<Box sx={{ maxWidth: "300px", width: "48%" }}>
<DatePicker
label="Start Date"
label={t("dateTimeFields.startDate")}
format={LONG_DATE_FORMAT}
value={startDate ? dayjs(startDate) : null}
onChange={(newValue) => {
@@ -99,7 +107,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
{!allday && (
<Box sx={{ width: "110px" }}>
<TimePicker
label="Start Time"
label={t("dateTimeFields.startTime")}
ampm={false}
value={startTime ? dayjs(startTime, "HH:mm") : null}
onChange={(newValue) => {
@@ -127,7 +135,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
<Box display="flex" gap={1} flexDirection="row" alignItems="center">
<Box sx={{ maxWidth: "300px", width: "48%" }}>
<DatePicker
label="End Date"
label={t("dateTimeFields.endDate")}
format={LONG_DATE_FORMAT}
value={endDate ? dayjs(endDate) : null}
onChange={(newValue) => {
@@ -154,7 +162,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
{!allday && (
<Box sx={{ width: "110px" }}>
<TimePicker
label="End Time"
label={t("dateTimeFields.endTime")}
ampm={false}
value={endTime ? dayjs(endTime, "HH:mm") : null}
onChange={(newValue) => {
@@ -185,7 +193,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
<Box display="flex" gap={1} flexDirection="row" alignItems="center">
<Box sx={{ maxWidth: "300px", width: "48%" }}>
<DatePicker
label="Start Date"
label={t("dateTimeFields.startDate")}
format={LONG_DATE_FORMAT}
value={startDate ? dayjs(startDate) : null}
onChange={(newValue) => {
@@ -210,7 +218,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
</Box>
<Box sx={{ maxWidth: "300px", width: "48%" }}>
<DatePicker
label="End Date"
label={t("dateTimeFields.endDate")}
format={LONG_DATE_FORMAT}
value={endDate ? dayjs(endDate) : null}
onChange={(newValue) => {
@@ -264,7 +272,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
</Box>
<Box sx={{ maxWidth: "110px" }}>
<TimePicker
label="Start Time"
label={t("dateTimeFields.startTime")}
ampm={false}
value={startTime ? dayjs(startTime, "HH:mm") : null}
onChange={(newValue) => {
@@ -290,7 +298,7 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
</Box>
<Box sx={{ maxWidth: "110px" }}>
<TimePicker
label="End Time"
label={t("dateTimeFields.endTime")}
ampm={false}
value={endTime ? dayjs(endTime, "HH:mm") : null}
onChange={(newValue) => {
src/components/Event/utils/eventUtils.tsx
+3 -2
View File
@@ -17,6 +17,7 @@ import { formatDateToYYYYMMDDTHHMMSS } from "../../../utils/dateUtils";
export function renderAttendeeBadge(
a: userAttendee,
key: string,
t: Function,
isFull?: boolean,
isOrganizer?: boolean
) {
@@ -28,7 +29,7 @@ export function renderAttendeeBadge(
) : null;
if (!isFull) {
return <Avatar {...stringAvatar(a.cn || a.cal_address)} />;
return <Avatar key={key} {...stringAvatar(a.cn || a.cal_address)} />;
} else {
return (
<Box
@@ -77,7 +78,7 @@ export function renderAttendeeBadge(
</Typography>
{isOrganizer && (
<Typography variant="caption" color="text.secondary">
Organizer
{t("event.organizer")}
</Typography>
)}
</Box>
src/components/Menubar/Menubar.tsx
+95 -27
View File
@@ -20,6 +20,8 @@ import {
} from "@mui/material";
import { push } from "redux-first-history";
import { CalendarApi } from "@fullcalendar/core";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { setLanguage } from "../../features/Settings/SettingsSlice";
export type AppIconProps = {
name: string;
@@ -44,9 +46,11 @@ export function Menubar({
currentView,
onViewChange,
}: MenubarProps) {
const { t, f, lang } = useI18n();
const user = useAppSelector((state) => state.user.userData);
const applist: AppIconProps[] = (window as any).appList ?? [];
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [langAnchorEl, setLangAnchorEl] = useState<null | HTMLElement>(null);
const dispatch = useAppDispatch();
if (!user) {
@@ -99,6 +103,18 @@ export function Menubar({
};
const open = Boolean(anchorEl);
const langOpen = Boolean(langAnchorEl);
const handleLangClick = (event: React.MouseEvent<HTMLElement>) => {
setLangAnchorEl(event.currentTarget);
};
const handleLangClose = () => setLangAnchorEl(null);
const availableLangs = [
{ code: "en", label: "English" },
{ code: "fr", label: "Français" },
];
return (
<>
<header className="menubar">
@@ -112,7 +128,9 @@ export function Menubar({
<Button onClick={() => handleNavigation("prev")}>
<ChevronLeftIcon />
</Button>
<Button onClick={() => handleNavigation("today")}>Today</Button>
<Button onClick={() => handleNavigation("today")}>
{t("menubar.today")}
</Button>
<Button onClick={() => handleNavigation("next")}>
<ChevronRightIcon />
</Button>
@@ -122,17 +140,18 @@ export function Menubar({
<div className="menu-items">
<div className="current-date-time">
<Typography variant="h6" component="div">
{currentDate.toLocaleDateString("en-US", {
month: "long",
year: "numeric",
})}
{f(currentDate, "MMMM yyyy")}
</Typography>
</div>
</div>
</div>
<div className="right-menu">
<div className="menu-items">
<IconButton onClick={onRefresh}>
<IconButton
onClick={onRefresh}
aria-label={t("menubar.refresh")}
title={t("menubar.refresh")}
>
<RefreshIcon />
</IconButton>
</div>
@@ -145,37 +164,53 @@ export function Menubar({
value={currentView}
onChange={(e) => handleViewChange(e.target.value)}
variant="outlined"
aria-label={t("menubar.viewSelector")}
>
<MenuItem value="dayGridMonth">Month</MenuItem>
<MenuItem value="timeGridWeek">Week</MenuItem>
<MenuItem value="timeGridDay">Day</MenuItem>
<MenuItem value="dayGridMonth">
{t("menubar.views.month")}
</MenuItem>
<MenuItem value="timeGridWeek">
{t("menubar.views.week")}
</MenuItem>
<MenuItem value="timeGridDay">
{t("menubar.views.day")}
</MenuItem>
</Select>
</FormControl>
</div>
<div className="menu-items">
{applist.length > 0 && (
<IconButton onClick={handleOpen} style={{ marginRight: 8 }}>
<IconButton
onClick={handleOpen}
style={{ marginRight: 8 }}
aria-label={t("menubar.apps")}
title={t("menubar.apps")}
>
<AppsIcon />
</IconButton>
)}
</div>
<div className="menu-items">
<Avatar
style={{
backgroundColor: stringToColor(
user && user.family_name
? user.family_name
: user && user.email
? user.email
: ""
),
}}
sizes="large"
>
{user?.name && user?.family_name
? `${user.name[0]}${user.family_name[0]}`
: (user?.email?.[0] ?? "")}
</Avatar>
<IconButton onClick={handleLangClick}>
<Avatar
style={{
backgroundColor: stringToColor(
user && user.family_name
? user.family_name
: user && user.email
? user.email
: ""
),
}}
sizes="large"
aria-label={t("menubar.userProfile")}
>
{user?.name && user?.family_name
? `${user.name[0]}${user.family_name[0]}`
: (user?.email?.[0] ?? "")}
</Avatar>
</IconButton>
</div>
</div>
</header>
@@ -198,13 +233,46 @@ export function Menubar({
))}
</div>
</Popover>
<Popover
open={langOpen}
anchorEl={langAnchorEl}
onClose={handleLangClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<FormControl size="small" style={{ minWidth: 100, marginRight: 8 }}>
<Select
value={lang}
onChange={(e) => {
dispatch(setLanguage(e.target.value));
}}
variant="outlined"
aria-label={t("menubar.languageSelector")}
>
{availableLangs.map(({ code, label }) => (
<MenuItem key={code} value={code}>
{label}
</MenuItem>
))}
</Select>
</FormControl>
</Popover>
</>
);
}
export function MainTitle() {
const { t } = useI18n();
return (
<div className="menubar-item tc-home">
<img className="logo" src={logo} alt="Calendar" />
<img className="logo" src={logo} alt={t("menubar.logoAlt")} />
</div>
);
}
src/features/Events/EventDisplay.tsx
-640
View File
@@ -1,640 +0,0 @@
import CircleIcon from "@mui/icons-material/Circle";
import CloseIcon from "@mui/icons-material/Close";
import DeleteIcon from "@mui/icons-material/Delete";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import VideocamIcon from "@mui/icons-material/Videocam";
import {
Box,
Button,
ButtonGroup,
Card,
CardActions,
CardContent,
CardHeader,
Checkbox,
Divider,
FormControl,
FormControlLabel,
IconButton,
InputLabel,
MenuItem,
Modal,
Select,
SelectChangeEvent,
TextField,
Typography,
} from "@mui/material";
import { useEffect, useState } from "react";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import AttendeeSelector from "../../components/Attendees/AttendeeSearch";
import {
handleDelete,
handleRSVP,
} from "../../components/Event/eventHandlers/eventHandlers";
import RepeatEvent from "../../components/Event/EventRepeat";
import { InfoRow } from "../../components/Event/InfoRow";
import { refreshCalendars } from "../../components/Event/utils/eventUtils";
import { renderAttendeeBadge } from "../../components/Event/utils/eventUtils";
import { getCalendarRange } from "../../utils/dateUtils";
import {
moveEventAsync,
putEventAsync,
removeEvent,
updateEventInstanceAsync,
updateSeriesAsync,
} from "../Calendars/CalendarSlice";
import { Calendars } from "../Calendars/CalendarTypes";
import { userAttendee } from "../User/userDataTypes";
import { getEvent } from "./EventApi";
import { formatLocalDateTime } from "../../components/Event/utils/dateTimeFormatters";
import { CalendarEvent, RepetitionObject } from "./EventsTypes";
export default function EventDisplayModal({
eventId,
calId,
open,
onClose,
typeOfAction,
}: {
eventId: string;
calId: string;
open: boolean;
onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
typeOfAction?: "solo" | "all";
}) {
const dispatch = useAppDispatch();
const calendar = useAppSelector((state) => state.calendars.list[calId]);
const event = useAppSelector(
(state) => state.calendars.list[calId]?.events[eventId]
);
const user = useAppSelector((state) => state.user);
const [showAllAttendees, setShowAllAttendees] = useState(false);
const [showMore, setShowMore] = useState(false);
const calendars = Object.values(
useAppSelector((state) => state.calendars.list)
);
const userPersonnalCalendars: Calendars[] = calendars.filter(
(c) => c.id?.split("/")[0] === user.userData?.openpaasId
);
// Form state
const [title, setTitle] = useState(event?.title ?? "");
const [description, setDescription] = useState(event?.description ?? "");
const [location, setLocation] = useState(event?.location ?? "");
const [start, setStart] = useState(
formatLocalDateTime(new Date(event?.start ?? Date.now()))
);
const [end, setEnd] = useState(
formatLocalDateTime(new Date(event?.end ?? Date.now()))
);
const [allday, setAllDay] = useState(event?.allday ?? false);
const [repetition, setRepetition] = useState<RepetitionObject>(
event?.repetition ?? ({} as RepetitionObject)
);
const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? "");
const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
const [timezone, setTimezone] = useState(event?.timezone ?? "UTC");
const [newCalId, setNewCalId] = useState(event?.calId);
const [calendarid, setCalendarid] = useState(
calId.split("/")[0] === user.userData?.openpaasId
? userPersonnalCalendars.findIndex((cal) => cal.id === calId)
: calendars.findIndex((cal) => cal.id === calId)
);
const [attendees, setAttendees] = useState(
(event?.attendee || []).filter(
(a) => a.cal_address !== event?.organizer?.cal_address
)
);
const currentUserAttendee = event?.attendee?.find(
(person) => person.cal_address === user.userData.email
);
const organizer =
event?.attendee?.find(
(a) => a.cal_address === event?.organizer?.cal_address
) ?? ({} as userAttendee);
const isOwn = organizer?.cal_address === user.userData.email;
const isOwnCal = userPersonnalCalendars.find((cal) => cal.id === calId);
const attendeeDisplayLimit = 3;
useEffect(() => {
if (!event || !calendar) {
onClose({}, "backdropClick");
}
setRepetition(event?.repetition ?? ({} as RepetitionObject));
}, [open, eventId, dispatch, onClose, event, calendar]);
useEffect(() => {
const fetchMasterEvent = async () => {
const masterEvent = await getEvent(event);
setTitle(masterEvent.title ?? "");
setDescription(masterEvent.description ?? "");
setLocation(masterEvent.location ?? "");
setStart(formatLocalDateTime(new Date(masterEvent?.start ?? Date.now())));
setEnd(formatLocalDateTime(new Date(masterEvent?.end ?? Date.now())));
setAllDay(masterEvent.allday ?? false);
setRepetition(masterEvent?.repetition ?? ({} as RepetitionObject));
setAlarm(masterEvent?.alarm?.trigger ?? "");
setBusy(masterEvent?.transp ?? "OPAQUE");
setEventClass(masterEvent?.class ?? "PUBLIC");
setTimezone(masterEvent.timezone ?? "UTC");
};
if (typeOfAction === "all") {
fetchMasterEvent();
}
}, [typeOfAction, event]);
if (!event || !calendar) return null;
const isRecurring = event.uid?.includes("/");
const handleSave = async () => {
const newEventUID = crypto.randomUUID();
const newEvent: CalendarEvent = {
calId,
title,
URL: event.URL ?? `/calendars/${calId}/${newEventUID}.ics`,
start: start,
end: end,
allday,
uid: event.uid ?? newEventUID,
description,
location,
repetition,
class: eventClass,
organizer: event.organizer,
timezone,
attendee: [organizer, ...attendees],
transp: busy,
color: userPersonnalCalendars[calendarid]?.color,
alarm: { trigger: alarm, action: "EMAIL" },
};
const [baseId, recurrenceId] = event.uid.split("/");
const calendarRange = getCalendarRange(new Date(start));
if (typeOfAction === "solo") {
dispatch(
updateEventInstanceAsync({
cal: userPersonnalCalendars[calendarid],
event: { ...newEvent, recurrenceId: recurrenceId },
})
);
} else if (typeOfAction === "all") {
dispatch(
updateSeriesAsync({
cal: userPersonnalCalendars[calendarid],
event: { ...newEvent, recurrenceId: recurrenceId },
})
);
await refreshCalendars(dispatch, calendars, calendarRange);
} else {
dispatch(
putEventAsync({ cal: userPersonnalCalendars[calendarid], newEvent })
);
}
if (newCalId !== calId) {
dispatch(
moveEventAsync({
cal: userPersonnalCalendars[calendarid],
newEvent,
newURL: `/calendars/${newCalId}/${baseId}.ics`,
})
);
dispatch(removeEvent({ calendarUid: calId, eventUid: event.uid }));
}
onClose({}, "backdropClick");
};
const handleToggleShowMore = async () => {
setShowMore(!showMore);
};
const calList =
calId.split("/")[0] === user.userData?.openpaasId
? Object.keys(userPersonnalCalendars).map((calendar, index) => (
<MenuItem key={index} value={index}>
<Typography variant="body2">
<CircleIcon
style={{
color:
userPersonnalCalendars[index].color?.light ?? "#3788D8",
width: 12,
height: 12,
}}
/>
{userPersonnalCalendars[index].name}
</Typography>
</MenuItem>
))
: Object.keys(calendars).map((calendar, index) => (
<MenuItem key={index} value={index}>
<Typography variant="body2">
<CircleIcon
style={{
color: calendars[index].color?.light ?? "#3788D8",
width: 12,
height: 12,
}}
/>
{calendars[index].name} - {calendars[index].owner}
</Typography>
</MenuItem>
));
return (
<Modal open={open} onClose={onClose}>
<Box
style={{
position: "absolute",
top: "5vh",
left: "50%",
transform: "translate(-50%, -50%)",
width: "50vw",
maxHeight: "80vh",
}}
>
<Card style={{ padding: 16, position: "absolute" }}>
{/* Close button */}
<Box style={{ position: "absolute", top: 8, right: 8 }}>
<IconButton
size="small"
onClick={() => onClose({}, "backdropClick")}
>
<CloseIcon fontSize="small" />
</IconButton>
</Box>
<CardHeader title={isOwn ? "Edit Event" : "Event Details"} />
<CardContent style={{ maxHeight: "75vh", overflow: "auto" }}>
{/* Title */}
<TextField
fullWidth
disabled={!isOwn}
label="Title"
value={title ?? ""}
onChange={(e) => setTitle(e.target.value)}
size="small"
margin="dense"
/>
{/* RSVP */}
{currentUserAttendee && isOwnCal && (
<Card style={{ margin: "8px 0" }}>
<ButtonGroup size="small" fullWidth>
<Button
color={
currentUserAttendee.partstat === "ACCEPTED"
? "success"
: "primary"
}
onClick={() =>
handleRSVP(
dispatch,
calendar,
user,
event,
"ACCEPTED",
undefined,
isRecurring ? typeOfAction : undefined
)
}
>
Accept
</Button>
<Button
color={
currentUserAttendee.partstat === "TENTATIVE"
? "warning"
: "primary"
}
onClick={() =>
handleRSVP(
dispatch,
calendar,
user,
event,
"TENTATIVE",
undefined,
isRecurring ? typeOfAction : undefined
)
}
>
Maybe
</Button>
<Button
color={
currentUserAttendee.partstat === "DECLINED"
? "error"
: "primary"
}
onClick={() =>
handleRSVP(
dispatch,
calendar,
user,
event,
"DECLINED",
undefined,
isRecurring ? typeOfAction : undefined
)
}
>
Decline
</Button>
<Button
color="primary"
onClick={() => console.log("proposenewtime")}
>
Propose new time
</Button>
</ButtonGroup>
</Card>
)}
{/* Calendar selector */}
<FormControl fullWidth margin="dense" size="small">
<InputLabel id="calendar-select-label">Calendar</InputLabel>
<Select
disabled={!isOwn}
labelId="calendar-select-label"
value={calendarid.toString() ?? ""}
label="Calendar"
onChange={(e: SelectChangeEvent) => {
const newId = Number(e.target.value);
setCalendarid(newId);
setNewCalId(userPersonnalCalendars[newId].id);
}}
>
{calList}
</Select>
</FormControl>
{/* Dates */}
<TextField
fullWidth
label="Start"
disabled={!isOwn}
type={allday ? "date" : "datetime-local"}
value={allday ? start.split("T")[0] : start.slice(0, 16)}
onChange={(e) =>
setStart(formatLocalDateTime(new Date(e.target.value)))
}
size="small"
margin="dense"
InputLabelProps={{ shrink: true }}
/>
<TextField
fullWidth
disabled={!isOwn}
label="End"
type={allday ? "date" : "datetime-local"}
value={allday ? end.split("T")[0] : end.slice(0, 16)}
onChange={(e) =>
setEnd(formatLocalDateTime(new Date(e.target.value)))
}
size="small"
margin="dense"
InputLabelProps={{ shrink: true }}
/>
<FormControlLabel
control={
<Checkbox
disabled={!isOwn}
checked={allday}
onChange={() => {
const endDate = new Date(end);
const startDate = new Date(start);
setAllDay(!allday);
if (endDate.getDate() === startDate.getDate()) {
endDate.setDate(startDate.getDate() + 1);
setEnd(formatLocalDateTime(endDate));
}
}}
/>
}
label="All day"
/>
{/* Description & Location */}
<TextField
fullWidth
disabled={!isOwn}
label="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
size="small"
margin="dense"
multiline
rows={2}
/>
{isOwn && (
<AttendeeSelector
attendees={attendees}
setAttendees={setAttendees}
/>
)}
<TextField
fullWidth
label="Location"
disabled={!isOwn}
value={location}
onChange={(e) => setLocation(e.target.value)}
size="small"
margin="dense"
/>
{/* Video */}
{event.x_openpass_videoconference && (
<InfoRow
icon={<VideocamIcon style={{ fontSize: 18 }} />}
content={
<Button
variant="contained"
onClick={() =>
window.open(event.x_openpass_videoconference)
}
>
Join the video conference
</Button>
}
/>
)}
{/* Attendees */}
{event.attendee?.length > 0 && (
<Box style={{ marginBottom: 8 }}>
<Typography variant="subtitle2">Attendees:</Typography>
{organizer.cal_address &&
renderAttendeeBadge(organizer, "org", true, true)}
{(showAllAttendees
? attendees
: attendees.slice(0, attendeeDisplayLimit)
).map((a, idx) => (
<Box key={a.cal_address}>
{renderAttendeeBadge(a, idx.toString(), true)}
{isOwn && (
<IconButton
size="small"
onClick={() => {
const newAttendeesList = [...attendees];
newAttendeesList.splice(idx, 1);
setAttendees(newAttendeesList);
}}
>
<CloseIcon fontSize="small" />
</IconButton>
)}
</Box>
))}
{attendees.length > attendeeDisplayLimit && (
<Typography
variant="body2"
color="primary"
style={{ cursor: "pointer", marginTop: 4 }}
onClick={() => setShowAllAttendees(!showAllAttendees)}
>
{showAllAttendees
? "Show less"
: `Show more (${
attendees.length - attendeeDisplayLimit
} more)`}
</Typography>
)}
</Box>
)}
<Divider style={{ margin: "8px 0" }} />
{/* Extended options */}
{showMore && (
<>
{isOwn && (
<RepeatEvent
repetition={repetition}
eventStart={new Date(event.start)}
setRepetition={setRepetition}
isOwn={isOwn && typeOfAction !== "solo"}
/>
)}
<FormControl fullWidth margin="dense" size="small">
<InputLabel id="notification">Notification</InputLabel>
<Select
labelId="notification"
label="Notification"
value={alarm}
disabled={!isOwn}
onChange={(e: SelectChangeEvent) =>
setAlarm(e.target.value)
}
>
<MenuItem value={""}>No Notification</MenuItem>
<MenuItem value={"-PT1M"}>1 minute</MenuItem>
<MenuItem value={"-PT5M"}>2 minutes</MenuItem>
<MenuItem value={"-PT10M"}>10 minutes</MenuItem>
<MenuItem value={"-PT15M"}>15 minutes</MenuItem>
<MenuItem value={"-PT30M"}>30 minutes</MenuItem>
<MenuItem value={"-PT1H"}>1 hours</MenuItem>
<MenuItem value={"-PT2H"}>2 hours</MenuItem>
<MenuItem value={"-PT5H"}>5 hours</MenuItem>
<MenuItem value={"-PT12H"}>12 hours</MenuItem>
<MenuItem value={"-PT1D"}>1 day</MenuItem>
<MenuItem value={"-PT2D"}>2 days</MenuItem>
<MenuItem value={"-PT1W"}>1 week</MenuItem>
</Select>
</FormControl>
<FormControl fullWidth margin="dense" size="small">
<InputLabel id="Visibility">Visibility</InputLabel>
<Select
labelId="Visibility"
label="Visibility"
value={eventClass}
disabled={!isOwn}
onChange={(e: SelectChangeEvent) =>
setEventClass(e.target.value)
}
>
<MenuItem value={"PUBLIC"}>Public</MenuItem>
<MenuItem value={"CONFIDENTIAL"}>Show time only</MenuItem>
<MenuItem value={"PRIVATE"}>Private</MenuItem>
</Select>
</FormControl>
<FormControl fullWidth margin="dense" size="small">
<InputLabel id="busy">is Busy</InputLabel>
<Select
labelId="busy"
value={busy}
disabled={!isOwn}
label="is busy"
onChange={(e: SelectChangeEvent) => setBusy(e.target.value)}
>
<MenuItem value={"TRANSPARENT"}>Free</MenuItem>
<MenuItem value={"OPAQUE"}>Busy </MenuItem>
</Select>
</FormControl>
{/* Error */}
{event.error && (
<InfoRow
icon={
<ErrorOutlineIcon
color="error"
style={{ fontSize: 18 }}
/>
}
text={event.error}
error
/>
)}
</>
)}
</CardContent>
<CardActions>
<ButtonGroup>
{isOwn && (
<IconButton
size="small"
onClick={() =>
handleDelete(
isRecurring,
typeOfAction,
onClose,
dispatch,
calendar,
event,
calId,
eventId
)
}
>
<DeleteIcon fontSize="small" />
</IconButton>
)}
<Button size="small" onClick={handleToggleShowMore}>
{showMore ? "Show Less" : "Show More"}
</Button>
{isOwn && (
<Button size="small" onClick={handleSave}>
Save
</Button>
)}
</ButtonGroup>
</CardActions>
</Card>
</Box>
</Modal>
);
}
src/features/Events/EventDisplayPreview.tsx
+103 -63
View File
@@ -42,9 +42,9 @@ import { renderAttendeeBadge } from "../../components/Event/utils/eventUtils";
import { getCalendarRange } from "../../utils/dateUtils";
import { deleteEventAsync } from "../Calendars/CalendarSlice";
import { dlEvent } from "./EventApi";
import EventDisplayModal from "./EventDisplay";
import { CalendarEvent } from "./EventsTypes";
import EventUpdateModal from "./EventUpdateModal";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export default function EventPreviewModal({
eventId,
calId,
@@ -58,6 +58,7 @@ export default function EventPreviewModal({
open: boolean;
onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
}) {
const { t } = useI18n();
const dispatch = useAppDispatch();
const calendars = useAppSelector((state) => state.calendars);
const timezone =
@@ -75,7 +76,6 @@ export default function EventPreviewModal({
const isRecurring = event?.uid?.includes("/");
const isOwn = calendar.ownerEmails?.includes(user.userData.email);
const [showAllAttendees, setShowAllAttendees] = useState(false);
const [openFullDisplay, setOpenFullDisplay] = useState(false);
const [openUpdateModal, setOpenUpdateModal] = useState(false);
const [openDuplicateModal, setOpenDuplicateModal] = useState(false);
const [hidePreview, setHidePreview] = useState(false);
@@ -210,7 +210,7 @@ export default function EventPreviewModal({
)
}
>
Email attendees
{t("eventPreview.emailAttendees")}
</MenuItem>
)}
<EventDuplication
@@ -254,7 +254,7 @@ export default function EventPreviewModal({
updateTempList();
}}
>
Delete event
{t("eventPreview.deleteEvent")}
</MenuItem>
)}
</Menu>
@@ -270,9 +270,7 @@ export default function EventPreviewModal({
{event.class === "PRIVATE" &&
(isOwn ? (
<Tooltip
title={
"Only you and attendees can see the details of this event."
}
title={t("eventPreview.privateEvent.tooltipOwn")}
placement="top"
>
<LockOutlineIcon />
@@ -294,23 +292,21 @@ export default function EventPreviewModal({
</Typography>
{event.transp === "TRANSPARENT" && (
<Tooltip
title={
"Others see you as available during the time range of this event."
}
title={t("eventPreview.free.tooltip")}
placement="top"
>
<Chip
icon={<CircleIcon color="success" fontSize="small" />}
label="Free"
label={t("eventPreview.free.label")}
/>
</Tooltip>
)}
</Box>
<Typography color="text.secondaryContainer" gutterBottom>
{formatDate(event.start, event.allday)}
{formatDate(event.start, t, event.allday)}
{event.end &&
formatEnd(event.start, event.end, event.allday) &&
` – ${formatEnd(event.start, event.end, event.allday)} ${!event.allday && getTimezoneOffset(timezone)}`}
formatEnd(event.start, event.end, t, event.allday) &&
` – ${formatEnd(event.start, event.end, t, event.allday)} ${!event.allday && getTimezoneOffset(timezone)}`}
</Typography>
</>
)
@@ -319,7 +315,9 @@ export default function EventPreviewModal({
<>
{currentUserAttendee && (
<>
<Typography sx={{ marginRight: 2 }}>Attending?</Typography>
<Typography sx={{ marginRight: 2 }}>
{t("eventPreview.attendingQuestion")}
</Typography>
<Box display="flex" gap="15px" alignItems="center">
<Button
variant={
@@ -344,7 +342,6 @@ export default function EventPreviewModal({
user,
event,
"ACCEPTED",
onClose,
type,
calendarList
@@ -363,7 +360,7 @@ export default function EventPreviewModal({
}
}}
>
Accept
{t("eventPreview.accept")}
</Button>
<Button
variant={
@@ -406,7 +403,7 @@ export default function EventPreviewModal({
}
}}
>
Maybe
{t("eventPreview.maybe")}
</Button>
<Button
variant={
@@ -449,7 +446,7 @@ export default function EventPreviewModal({
}
}}
>
Decline
{t("eventPreview.decline")}
</Button>
</Box>
</>
@@ -474,7 +471,7 @@ export default function EventPreviewModal({
window.open(event.x_openpass_videoconference)
}
>
Join the video conference
{t("eventPreview.joinVideo")}
</Button>
}
/>
@@ -497,20 +494,25 @@ export default function EventPreviewModal({
}}
>
<Box sx={{ marginRight: 2 }}>
<Typography>{attendees.length} guests</Typography>
<Typography>
{t("eventPreview.guests", {
count: attendees.length,
})}
</Typography>
<Typography
sx={{ fontSize: "13px", color: "text.secondary" }}
>
{
attendees.filter((a) => a.partstat === "ACCEPTED")
.length
}{" "}
yes,{" "}
{
attendees.filter((a) => a.partstat === "DECLINED")
.length
}{" "}
no
{t("eventPreview.yesCount", {
count: attendees.filter(
(a) => a.partstat === "ACCEPTED"
).length,
})}
,{" "}
{t("eventPreview.noCount", {
count: attendees.filter(
(a) => a.partstat === "DECLINED"
).length,
})}
</Typography>
</Box>
{!showAllAttendees && (
@@ -519,6 +521,7 @@ export default function EventPreviewModal({
renderAttendeeBadge(
organizer,
"org",
t,
showAllAttendees,
true
)}
@@ -526,6 +529,7 @@ export default function EventPreviewModal({
renderAttendeeBadge(
a,
idx.toString(),
t,
showAllAttendees
)
)}
@@ -541,7 +545,9 @@ export default function EventPreviewModal({
}}
onClick={() => setShowAllAttendees(!showAllAttendees)}
>
{showAllAttendees ? "Show less" : `Show more `}
{showAllAttendees
? t("eventPreview.showLess")
: t("eventPreview.showMore")}
</Typography>
</Box>
}
@@ -550,10 +556,10 @@ export default function EventPreviewModal({
)}
{showAllAttendees &&
organizer &&
renderAttendeeBadge(organizer, "org", showAllAttendees, true)}
renderAttendeeBadge(organizer, "org", t, showAllAttendees, true)}
{showAllAttendees &&
visibleAttendees.map((a, idx) =>
renderAttendeeBadge(a, idx.toString(), showAllAttendees)
renderAttendeeBadge(a, idx.toString(), t, showAllAttendees)
)}
{/* Location */}
{event.location && (
@@ -593,7 +599,10 @@ export default function EventPreviewModal({
<NotificationsNoneIcon />
</Box>
}
text={`${event.alarm.trigger} before by ${event.alarm.action}`}
text={t("eventPreview.alarmText", {
trigger: t(`event.form.notifications.${event.alarm.trigger}`),
action: t(`event.form.notifications.${event.alarm.action}`),
})}
style={{
fontSize: "16px",
fontFamily: "'Inter', sans-serif",
@@ -608,7 +617,7 @@ export default function EventPreviewModal({
<RepeatIcon />
</Box>
}
text={makeRecurrenceString(event)}
text={makeRecurrenceString(event, t)}
style={{
fontSize: "16px",
fontFamily: "'Inter', sans-serif",
@@ -636,7 +645,7 @@ export default function EventPreviewModal({
letterSpacing={"0.5px"}
textAlign={"center"}
>
This is a private event. Details are hidden.
{t("eventPreview.privateEvent.hiddenDetails")}
</Typography>
</Box>
)}
@@ -680,13 +689,6 @@ export default function EventPreviewModal({
afterChoiceFunc && afterChoiceFunc(type);
}}
/>
<EventDisplayModal
open={openFullDisplay}
onClose={() => setOpenFullDisplay(false)}
eventId={eventId}
calId={calId}
typeOfAction={typeOfAction}
/>
<EventUpdateModal
open={openUpdateModal}
onClose={() => {
@@ -725,43 +727,76 @@ export default function EventPreviewModal({
);
}
function makeRecurrenceString(event: CalendarEvent): string | undefined {
if (!event.repetition) {
return;
}
const recur = [`Reccurent Event · ${event.repetition.freq}`];
function makeRecurrenceString(
event: CalendarEvent,
t: Function
): string | undefined {
if (!event.repetition) return;
const recur: string[] = [
`${t("eventPreview.recurrentEvent")} · ${t(
`eventPreview.freq.${event.repetition.freq}`,
event.repetition.freq
)}`,
];
const recurType: Record<string, string> = {
daily: "days",
monthly: "months",
yearly: "years",
daily: t("eventPreview.days"),
monthly: t("eventPreview.months"),
yearly: t("eventPreview.years"),
};
if (event.repetition.byday) {
recur.push(`on ${event.repetition.byday.join(", ")}`);
recur.push(
t("eventPreview.recurrenceOnDays", {
days: event.repetition.byday
.map((s) => t(`eventPreview.onDays.${s}`))
.join(", "),
})
);
}
if (event.repetition.interval && event.repetition.interval > 1) {
recur.push(
`every ${event.repetition.interval} ${recurType[event.repetition.freq]}`
t("eventPreview.everyInterval", {
interval: event.repetition.interval,
unit: recurType[event.repetition.freq],
})
);
}
if (event.repetition.occurrences) {
recur.push(`for ${event.repetition.occurrences} occurences`);
recur.push(
t("eventPreview.forOccurrences", {
count: event.repetition.occurrences,
})
);
}
if (event.repetition.endDate) {
recur.push(`until ${event.repetition.endDate}`);
recur.push(
t("eventPreview.until", {
date: new Date(event.repetition.endDate).toLocaleDateString(
t("locale"),
{
year: "numeric",
month: "long",
day: "numeric",
}
),
})
);
}
return recur.join(", ");
}
function formatDate(date: Date | string, allday?: boolean) {
function formatDate(date: Date | string, t: Function, allday?: boolean) {
if (allday) {
return new Date(date).toLocaleDateString(undefined, {
return new Date(date).toLocaleDateString(t("locale"), {
year: "numeric",
month: "long",
weekday: "long",
day: "numeric",
});
} else {
return new Date(date).toLocaleString(undefined, {
return new Date(date).toLocaleString(t("locale"), {
year: "numeric",
month: "long",
weekday: "long",
@@ -772,7 +807,12 @@ function formatDate(date: Date | string, allday?: boolean) {
}
}
function formatEnd(start: Date | string, end: Date | string, allday?: boolean) {
function formatEnd(
start: Date | string,
end: Date | string,
t: Function,
allday?: boolean
) {
const startDate = new Date(start);
const endDate = new Date(end);
@@ -784,19 +824,19 @@ function formatEnd(start: Date | string, end: Date | string, allday?: boolean) {
if (allday) {
return sameDay
? null
: endDate.toLocaleDateString(undefined, {
: endDate.toLocaleDateString(t("locale"), {
year: "numeric",
month: "short",
day: "numeric",
});
} else {
if (sameDay) {
return endDate.toLocaleTimeString(undefined, {
return endDate.toLocaleTimeString(t("locale"), {
hour: "2-digit",
minute: "2-digit",
});
}
return endDate.toLocaleString(undefined, {
return endDate.toLocaleString(t("locale"), {
year: "numeric",
month: "short",
day: "numeric",
src/features/Events/EventModal.tsx
+36 -30
View File
@@ -30,6 +30,7 @@ import {
formatDateTimeInTimezone,
} from "../../components/Event/utils/dateTimeFormatters";
import { addDays } from "../../components/Event/utils/dateRules";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
function EventPopover({
anchorEl,
@@ -55,7 +56,7 @@ function EventPopover({
useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
const tempList = useAppSelector((state) => state.calendars.templist);
const calList = useAppSelector((state) => state.calendars.list);
const selectPersonnalCalendars = createSelector(
const selectPersonalCalendars = createSelector(
(state: any) => state.calendars,
(calendars: any) =>
Object.keys(calendars.list)
@@ -67,8 +68,8 @@ function EventPopover({
})
.filter((calendar) => calendar.id)
);
const userPersonnalCalendars: Calendars[] = useAppSelector(
selectPersonnalCalendars
const userPersonalCalendars: Calendars[] = useAppSelector(
selectPersonalCalendars
);
const timezoneList = useMemo(() => {
@@ -97,7 +98,7 @@ function EventPopover({
const [start, setStart] = useState(event?.start ? event.start : "");
const [end, setEnd] = useState(event?.end ? event.end : "");
const [calendarid, setCalendarid] = useState(
event?.calId ?? userPersonnalCalendars[0]?.id ?? ""
event?.calId ?? userPersonalCalendars[0]?.id ?? ""
);
const [allday, setAllDay] = useState(event?.allday ?? false);
const [repetition, setRepetition] = useState<RepetitionObject>(
@@ -126,18 +127,18 @@ function EventPopover({
// Use ref to track if we've already initialized to avoid infinite loop
const isInitializedRef = useRef(false);
const userPersonnalCalendarsRef = useRef(userPersonnalCalendars);
const userPersonalCalendarsRef = useRef(userPersonalCalendars);
// Update ref when userPersonnalCalendars changes
// Update ref when userPersonalCalendars changes
useEffect(() => {
userPersonnalCalendarsRef.current = userPersonnalCalendars;
}, [userPersonnalCalendars]);
userPersonalCalendarsRef.current = userPersonalCalendars;
}, [userPersonalCalendars]);
useEffect(() => {
if (!calendarid && userPersonnalCalendars.length > 0) {
setCalendarid(userPersonnalCalendars[0].id);
if (!calendarid && userPersonalCalendars.length > 0) {
setCalendarid(userPersonalCalendars[0].id);
}
}, [calendarid, userPersonnalCalendars]);
}, [calendarid, userPersonalCalendars]);
const resetAllStateToDefault = useCallback(() => {
setShowMore(false);
@@ -150,11 +151,11 @@ function EventPopover({
setStart("");
setEnd("");
if (
userPersonnalCalendars &&
userPersonnalCalendars.length > 0 &&
userPersonnalCalendars[0]?.id
userPersonalCalendars &&
userPersonalCalendars.length > 0 &&
userPersonalCalendars[0]?.id
) {
setCalendarid(userPersonnalCalendars[0].id);
setCalendarid(userPersonalCalendars[0].id);
}
setAllDay(false);
setRepetition({} as RepetitionObject);
@@ -164,7 +165,7 @@ function EventPopover({
setTimezone(calendarTimezone);
setHasVideoConference(false);
setMeetingLink(null);
}, [calendarTimezone, userPersonnalCalendars]);
}, [calendarTimezone, userPersonalCalendars]);
// Track if we should sync from selectedRange (only on initial selection, not on toggle)
const shouldSyncFromRangeRef = useRef(true);
@@ -396,11 +397,11 @@ function EventPopover({
}
if (
userPersonnalCalendars &&
userPersonnalCalendars.length > 0 &&
userPersonnalCalendars[0]?.id
userPersonalCalendars &&
userPersonalCalendars.length > 0 &&
userPersonalCalendars[0]?.id
) {
setCalendarid(userPersonnalCalendars[0].id);
setCalendarid(userPersonalCalendars[0].id);
}
setRepetition(event.repetition ?? ({} as RepetitionObject));
setShowRepeat(event.repetition?.freq ? true : false);
@@ -457,11 +458,11 @@ function EventPopover({
setAttendees([]);
setLocation("");
if (
userPersonnalCalendars &&
userPersonnalCalendars.length > 0 &&
userPersonnalCalendars[0]?.id
userPersonalCalendars &&
userPersonalCalendars.length > 0 &&
userPersonalCalendars[0]?.id
) {
setCalendarid(userPersonnalCalendars[0].id);
setCalendarid(userPersonalCalendars[0].id);
}
setAllDay(false);
setRepetition({} as RepetitionObject);
@@ -584,7 +585,7 @@ function EventPopover({
// Resolve target calendar safely
const targetCalendar: Calendars | undefined =
calList[calendarid] ||
userPersonnalCalendars[0] ||
userPersonalCalendars[0] ||
(Object.values(calList)[0] as Calendars | undefined);
if (!targetCalendar || !targetCalendar.id) {
console.error("No target calendar available to save event");
@@ -672,22 +673,23 @@ function EventPopover({
await updateTempCalendar(tempList, newEvent, dispatch, calendarRange);
}
};
const { t } = useI18n();
const dialogActions = (
<Box display="flex" justifyContent="space-between" width="100%" px={2}>
{!showMore && (
<Button startIcon={<AddIcon />} onClick={() => setShowMore(!showMore)}>
More options
{t("common.moreOptions")}
</Button>
)}
<Box display="flex" gap={1} ml={showMore ? "auto" : 0}>
{showMore && (
<Button variant="outlined" onClick={handleClose}>
Cancel
{t("common.cancel")}
</Button>
)}
<Button variant="contained" onClick={handleSave}>
Save
{t("actions.save")}
</Button>
</Box>
</Box>
@@ -697,7 +699,11 @@ function EventPopover({
<ResponsiveDialog
open={open}
onClose={handleClose}
title={event?.uid ? "Duplicate Event" : "Create Event"}
title={
event?.uid
? t("eventDuplication.duplicateEvent")
: t("event.createEvent")
}
isExpanded={showMore}
onExpandToggle={() => setShowMore(!showMore)}
actions={dialogActions}
@@ -739,7 +745,7 @@ function EventPopover({
showRepeat={showRepeat}
setShowRepeat={setShowRepeat}
isOpen={open}
userPersonnalCalendars={userPersonnalCalendars}
userPersonalCalendars={userPersonalCalendars}
timezoneList={timezoneList}
onStartChange={handleStartChange}
onEndChange={handleEndChange}
src/features/Events/EventUpdateModal.tsx
+12 -10
View File
@@ -28,6 +28,7 @@ import {
detectRecurringEventChanges,
} from "./eventUtils";
import { updateTempCalendar } from "../../components/Calendar/utils/calendarUtils";
import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
const showErrorNotification = (message: string) => {
console.error(`[ERROR] ${message}`);
@@ -50,6 +51,7 @@ function EventUpdateModal({
eventData?: CalendarEvent | null;
typeOfAction?: "solo" | "all";
}) {
const { t } = useI18n();
const dispatch = useAppDispatch();
const tempList = useAppSelector((state) => state.calendars.templist);
const calList = useAppSelector((state) => state.calendars.list);
@@ -84,7 +86,7 @@ function EventUpdateModal({
const calendarsList = useAppSelector((state) => state.calendars.list);
const userPersonnalCalendars: Calendars[] = useMemo(() => {
const userPersonalCalendars: Calendars[] = useMemo(() => {
const allCalendars = Object.values(calendarsList) as Calendars[];
return allCalendars.filter(
(c: Calendars) => c.id?.split("/")[0] === user.userData?.openpaasId
@@ -155,7 +157,7 @@ function EventUpdateModal({
);
const [newCalId, setNewCalId] = useState(calId);
const [calendarid, setCalendarid] = useState(
calId ?? userPersonnalCalendars[0]?.id ?? ""
calId ?? userPersonalCalendars[0]?.id ?? ""
);
const [attendees, setAttendees] = useState<userAttendee[]>([]);
@@ -175,7 +177,7 @@ function EventUpdateModal({
setLocation("");
setStart("");
setEnd("");
setCalendarid(userPersonnalCalendars[0].id);
setCalendarid(userPersonalCalendars[0].id);
setAllDay(false);
setRepetition({} as RepetitionObject);
setAlarm("");
@@ -296,7 +298,7 @@ function EventUpdateModal({
}
}
}
}, [open, event, calId, userPersonnalCalendars, calendarsList]);
}, [open, event, calId, userPersonalCalendars, calendarsList]);
// Helper to close modal(s) - use onCloseAll if available to close preview modal too
const closeModal = () => {
@@ -682,7 +684,7 @@ function EventUpdateModal({
moveEventAsync({
cal: targetCalendar,
newEvent,
newURL: `/calendars/${newCalId}/${event.uid}.ics`,
newURL: `/calendars/${newCalId}/${event.uid.split("/")[0]}.ics`,
})
);
dispatch(removeEvent({ calendarUid: calId, eventUid: event.uid }));
@@ -697,15 +699,15 @@ function EventUpdateModal({
<Box display="flex" justifyContent="space-between" width="100%" px={2}>
{!showMore && (
<Button startIcon={<AddIcon />} onClick={() => setShowMore(!showMore)}>
More options
{t("common.moreOptions")}
</Button>
)}
<Box display="flex" gap={1} ml={showMore ? "auto" : 0}>
<Button variant="outlined" onClick={handleClose}>
Cancel
{t("common.cancel")}
</Button>
<Button variant="contained" onClick={handleSave}>
Save
{t("actions.save")}
</Button>
</Box>
</Box>
@@ -717,7 +719,7 @@ function EventUpdateModal({
<ResponsiveDialog
open={open}
onClose={handleClose}
title="Update Event"
title={t("event.updateEvent")}
isExpanded={showMore}
onExpandToggle={() => setShowMore(!showMore)}
actions={dialogActions}
@@ -760,7 +762,7 @@ function EventUpdateModal({
showRepeat={typeOfAction !== "solo" && showRepeat}
setShowRepeat={setShowRepeat}
isOpen={open}
userPersonnalCalendars={userPersonnalCalendars}
userPersonalCalendars={userPersonalCalendars}
timezoneList={timezoneList}
onCalendarChange={(newCalendarId) => {
const selectedCalendar = calList[newCalendarId];
src/features/Settings/SettingsSlice.ts
+26
View File
@@ -0,0 +1,26 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
export interface SettingsState {
language: string;
}
const savedLang = localStorage.getItem("lang");
const defaultLang = savedLang ?? (window as any).LANG ?? "en";
const initialState: SettingsState = {
language: defaultLang,
};
export const settingsSlice = createSlice({
name: "settings",
initialState,
reducers: {
setLanguage: (state, action: PayloadAction<string>) => {
state.language = action.payload;
localStorage.setItem("lang", action.payload);
},
},
});
export const { setLanguage } = settingsSlice.actions;
export default settingsSlice.reducer;
src/locales/en.json
+232
View File
@@ -0,0 +1,232 @@
{
"locale": "en-gb",
"calendar": {
"personal": "Personal Calendars",
"delegated": "Delegated Calendars",
"other": "Other Calendars",
"caldav_access": "CalDAV access",
"import_file_description": "Import events from an ICS file to one of your calendars.",
"ics_feed_url": "ICS feed URL",
"import_to": "Import to",
"new_calendar": "New calendar",
"addDescription": "Add description",
"color": "Color",
"newEventsVisibility": "New events created will be visible to:",
"browseOtherCalendars": "Browse other calendars",
"noPublicCalendarsFor": "No publicly available calendars for %{name}",
"noMoreCalendarsFor": "No more calendars for %{name}",
"delete": {
"title": "Remove %{name}?",
"personalWarning": "You will lose all events in this calendar.",
"sharedWarning": "You will lose access to its events. You will still be able to add it back later."
}
},
"actions": {
"modify": "Modify",
"delete": "Delete",
"remove": "Remove",
"save": "Save",
"create": "Create",
"import": "Import",
"add": "Add"
},
"common": {
"cancel": "Cancel",
"ok": "Ok",
"link_copied": "Link copied!",
"import_file": "File",
"select_file": "Select file",
"import_url": "URL",
"name": "Name",
"description": "Description",
"all": "All",
"you": "You",
"select_timezone": "Select Timezone",
"moreOptions": "More options"
},
"calendarPopover": {
"tabs": {
"settings": "Settings",
"addNew": "Add new calendar",
"access": "Access",
"import": "Import"
}
},
"colorPicker": {
"selectCustom": "Select custom color",
"title": "Choose custom color",
"subtitle": "Choose a background color for this calendar",
"hex": "Hex"
},
"event": {
"createEvent": "Create Event",
"updateEvent": "Update Event",
"organizer": "Organizer",
"repeat": {
"repeatEvery": "Repeat every",
"frequency": {
"days": "Day(s)",
"weeks": "Week(s)",
"months": "Month(s)",
"years": "Year(s)"
},
"repeatOn": "Repeat on:",
"days": {
"monday": "MO",
"tuesday": "TU",
"wednesday": "WE",
"thursday": "TH",
"friday": "FR",
"saturday": "SA",
"sunday": "SU"
},
"end": {
"label": "End:",
"never": "Never",
"after": "After",
"on": "On",
"occurrences": "occurrences"
}
},
"form": {
"title": "Title",
"titlePlaceholder": "Add title",
"addDescription": "Add description",
"description": "Description",
"descriptionPlaceholder": "Add description",
"dateTime": "Date & Time",
"start": "Start",
"end": "End",
"allDay": "All day",
"repeat": "Repeat",
"timezonePlaceholder": "Select timezone",
"participants": "Participants",
"videoMeeting": "Video meeting",
"addVisioConference": "Add Visio conference",
"joinVisioConference": "Join Visio conference",
"copyMeetingLink": "Copy meeting link",
"removeVideoConference": "Remove video conference",
"location": "Location",
"locationPlaceholder": "Add location",
"calendar": "Calendar",
"notification": "Notification",
"notifications": {
"": "No notification",
"-PT1M": "1 minute before",
"-PT5M": "5 minutes before",
"-PT10M": "10 minutes before",
"-PT15M": "15 minutes before",
"-PT30M": "30 minutes before",
"-PT1H": "1 hour before",
"-PT2H": "2 hours before",
"-PT5H": "5 hours before",
"-PT12H": "12 hours before",
"-PT1D": "1 day before",
"-PT2D": "2 days before",
"-PT1W": "1 week before",
"EMAIL": "email"
},
"showMeAs": "Show me as",
"free": "Free",
"busy": "Busy",
"visibleTo": "Visible to",
"visibleAll": "All",
"visibleParticipants": "Participants"
},
"validation": {
"titleRequired": "Title is required",
"startRequired": "Start date/time is required",
"invalidStart": "Invalid start date/time",
"endRequired": "End date/time is required",
"invalidEnd": "Invalid end date/time",
"endAfterStart": "End time must be after start time"
}
},
"peopleSearch": {
"label": "Start typing a name or email",
"placeholder": "Start typing a name or email",
"invalidEmail": "%{email} is not a valid email address"
},
"error": {
"title": "Something went wrong",
"unknown": "An unknown error occurred",
"retry": "Try Again",
"multipleEvents": "%{count} events with errors"
},
"editModeDialog": {
"updateRecurrentEvent": "Update the recurrent event",
"updateParticipationStatus": "Update the participation status",
"thisEvent": "This event",
"allEvents": "All the events"
},
"eventDuplication": {
"duplicateEvent": "Duplicate event"
},
"menubar": {
"today": "Today",
"refresh": "Refresh",
"viewSelector": "Select view",
"languageSelector": "Select language",
"views": {
"month": "Month",
"week": "Week",
"day": "Day"
},
"apps": "Apps",
"userProfile": "User profile",
"logoAlt": "Calendar"
},
"eventPreview": {
"emailAttendees": "Email attendees",
"deleteEvent": "Delete event",
"privateEvent": {
"tooltipOwn": "Only you and attendees can see the details of this event.",
"hiddenDetails": "This is a private event. Details are hidden."
},
"free": {
"label": "Free",
"tooltip": "Others see you as available during the time range of this event."
},
"attendingQuestion": "Attending?",
"accept": "Accept",
"maybe": "Maybe",
"decline": "Decline",
"showMore": "Show more",
"showLess": "Show less",
"joinVideo": "Join the video conference",
"guests": "%{count} guests",
"yesCount": "%{count} yes",
"noCount": "%{count} no",
"recurrentEvent": "Recurrent Event",
"freq": {
"daily": "daily",
"weekly": "weekly",
"monthly": "monthly",
"yearly": "yearly"
},
"onDays": {
"MO": "monday",
"TU": "tuesday",
"WE": "wednesday",
"TH": "thursday",
"FR": "friday",
"SA": "saturday",
"SU": "sunday"
},
"recurrenceOnDays": "on %{days}",
"everyInterval": "every %{interval} %{unit}",
"forOccurrences": "for %{count} occurrences",
"until": "until %{date}",
"days": "days",
"months": "months",
"years": "years",
"alarmText": "%{trigger} by %{action}"
},
"dateTimeFields": {
"date": "Date",
"startDate": "Start Date",
"startTime": "Start Time",
"endDate": "End Date",
"endTime": "End Time"
}
}
src/locales/fr.json
+232
View File
@@ -0,0 +1,232 @@
{
"locale": "fr-fr",
"calendar": {
"personal": "Calendriers personnels",
"delegated": "Calendriers délégués",
"other": "Autres calendriers",
"caldav_access": "Accès CalDAV",
"import_file_description": "Importer des événements depuis un fichier ICS vers l'un de vos calendriers.",
"ics_feed_url": "URL du flux ICS",
"import_to": "Importer vers",
"new_calendar": "Nouveau calendrier",
"addDescription": "Ajouter une description",
"color": "Couleur",
"newEventsVisibility": "Les nouveaux événements créés seront visibles par :",
"browseOtherCalendars": "Parcourir d'autres calendriers",
"noPublicCalendarsFor": "Aucun calendrier public disponible pour %{name}",
"noMoreCalendarsFor": "Plus de calendriers disponibles pour %{name}",
"delete": {
"title": "Supprimer %{name} ?",
"personalWarning": "Vous allez perdre tous les événements de ce calendrier.",
"sharedWarning": "Vous allez perdre l’accès à ses événements. Vous pourrez toujours le rajouter plus tard."
}
},
"actions": {
"modify": "Modifier",
"delete": "Supprimer",
"remove": "Retirer",
"save": "Enregistrer",
"create": "Créer",
"import": "Importer",
"add": "Ajouter"
},
"common": {
"cancel": "Annuler",
"ok": "OK",
"link_copied": "Lien copié !",
"import_file": "Fichier",
"select_file": "Sélectionner un fichier",
"import_url": "URL",
"name": "Nom",
"description": "Description",
"all": "Tous",
"you": "Vous",
"select_timezone": "Sélectionner le fuseau horaire",
"moreOptions": "Plus d'options"
},
"calendarPopover": {
"tabs": {
"settings": "Paramètres",
"addNew": "Ajouter un nouveau calendrier",
"access": "Accès",
"import": "Importer"
}
},
"colorPicker": {
"selectCustom": "Sélectionner une couleur personnalisée",
"title": "Choisir une couleur personnalisée",
"subtitle": "Choisissez une couleur d'arrière-plan pour ce calendrier",
"hex": "Hex"
},
"event": {
"createEvent": "Créer un événement",
"updateEvent": "Mettre à jour un événement",
"organizer": "Organisateur",
"repeat": {
"repeatEvery": "Répéter tous les",
"frequency": {
"days": "jour(s)",
"weeks": "semaine(s)",
"months": "mois",
"years": "année(s)"
},
"repeatOn": "Répéter le :",
"days": {
"monday": "LU",
"tuesday": "MA",
"wednesday": "ME",
"thursday": "JE",
"friday": "VE",
"saturday": "SA",
"sunday": "DI"
},
"end": {
"label": "Fin :",
"never": "Jamais",
"after": "Après",
"on": "Le",
"occurrences": "occurrences"
}
},
"form": {
"title": "Titre",
"titlePlaceholder": "Ajouter un titre",
"addDescription": "Ajouter une description",
"description": "Description",
"descriptionPlaceholder": "Ajouter une description",
"dateTime": "Date et heure",
"start": "Début",
"end": "Fin",
"allDay": "Toute la journée",
"repeat": "Répéter",
"timezonePlaceholder": "Sélectionner un fuseau horaire",
"participants": "Participants",
"videoMeeting": "Visioconférence",
"addVisioConference": "Ajouter une visioconférence",
"joinVisioConference": "Rejoindre la visioconférence",
"copyMeetingLink": "Copier le lien de la réunion",
"removeVideoConference": "Supprimer la visioconférence",
"location": "Lieu",
"locationPlaceholder": "Ajouter un lieu",
"calendar": "Calendrier",
"notification": "Notification",
"notifications": {
"": "Aucune notification",
"-PT1M": "1 minute avant",
"-PT5M": "5 minutes avant",
"-PT10M": "10 minutes avant",
"-PT15M": "15 minutes avant",
"-PT30M": "30 minutes avant",
"-PT1H": "1 heure avant",
"-PT2H": "2 heures avant",
"-PT5H": "5 heures avant",
"-PT12H": "12 heures avant",
"-PT1D": "1 jour avant",
"-PT2D": "2 jours avant",
"-PT1W": "1 semaine avant",
"EMAIL": "e-mail"
},
"showMeAs": "M'afficher comme",
"free": "Libre",
"busy": "Occupé",
"visibleTo": "Visible par",
"visibleAll": "Tous",
"visibleParticipants": "Participants"
},
"validation": {
"titleRequired": "Le titre est obligatoire",
"startRequired": "La date/heure de début est obligatoire",
"invalidStart": "Date/heure de début invalide",
"endRequired": "La date/heure de fin est obligatoire",
"invalidEnd": "Date/heure de fin invalide",
"endAfterStart": "L'heure de fin doit être après l'heure de début"
}
},
"peopleSearch": {
"label": "Commencez à saisir un nom ou un e-mail",
"placeholder": "Commencez à saisir un nom ou un e-mail",
"invalidEmail": "%{email} n'est pas une adresse e-mail valide"
},
"error": {
"title": "Une erreur s'est produite",
"unknown": "Une erreur inconnue s'est produite",
"retry": "Réessayer",
"multipleEvents": "%{count} événements comportent des erreurs"
},
"editModeDialog": {
"updateRecurrentEvent": "Mettre à jour l'événement récurrent",
"updateParticipationStatus": "Mettre à jour le statut de participation",
"thisEvent": "Cet événement",
"allEvents": "Tous les événements"
},
"eventDuplication": {
"duplicateEvent": "Dupliquer l'événement"
},
"menubar": {
"today": "Aujourd'hui",
"refresh": "Actualiser",
"viewSelector": "Sélectionner la vue",
"languageSelector": "Sélectionner la langue",
"views": {
"month": "Mois",
"week": "Semaine",
"day": "Jour"
},
"apps": "Applications",
"userProfile": "Profil utilisateur",
"logoAlt": "Calendrier"
},
"eventPreview": {
"emailAttendees": "Envoyer un e-mail aux participants",
"deleteEvent": "Supprimer l'événement",
"privateEvent": {
"tooltipOwn": "Seuls vous et les participants pouvez voir les détails de cet événement.",
"hiddenDetails": "Ceci est un événement privé. Les détails sont masqués."
},
"free": {
"label": "Libre",
"tooltip": "Les autres vous voient comme disponible pendant la plage horaire de cet événement."
},
"attendingQuestion": "Vous participez ?",
"accept": "Accepter",
"maybe": "Peut-être",
"decline": "Décliner",
"showMore": "Afficher plus",
"showLess": "Afficher moins",
"joinVideo": "Rejoindre la visioconférence",
"guests": "%{count} invités",
"yesCount": "%{count} oui",
"noCount": "%{count} non",
"recurrentEvent": "Événement récurrent",
"freq": {
"daily": "quotidien",
"weekly": "hebdomadaire",
"monthly": "mensuel",
"yearly": "annuel"
},
"onDays": {
"MO": "lundi",
"TU": "mardi",
"WE": "mercredi",
"TH": "jeudi",
"FR": "vendredi",
"SA": "samedi",
"SU": "dimanche"
},
"recurrenceOnDays": "le %{days}",
"everyInterval": "tous les %{interval} %{unit}",
"forOccurrences": "pour %{count} occurrences",
"until": "jusqu'au %{date}",
"days": "jours",
"months": "mois",
"years": "ans",
"alarmText": "%{trigger} par %{action}"
},
"dateTimeFields": {
"date": "Date",
"startDate": "Daye du début",
"startTime": "Heure du début",
"endDate": "Date de la fin",
"endTime": "Heure de la fin"
}
}