diff --git a/ui/src/App.tsx b/ui/src/App.tsx index ed645c1..90ac86b 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -23,6 +23,7 @@ import ChatProvider from "./providers/ChatProvider"; import { UserStoreProvider } from "./providers/UserStoreProvider"; import { ProtectedRoute } from "./components/ProtectedRoute"; import { JoinPage } from "@ui/pages/join"; +import { CreateEventModal } from "./components/CreateEventModal"; // Register all Community features ModuleRegistry.registerModules([AllCommunityModule]); @@ -38,109 +39,45 @@ export const App = () => { > }> - - - - } - /> - - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - + }> + } /> + } /> + } /> + } /> + }> + + + } /> + + } /> + {(client) => } - - } - /> - - - {(client) => } - - - } - /> - - - - } - /> - - - - } - /> + } + > + + + + } /> + } /> + + <> + + + } > - - - - } - /> + } /> } /> } /> diff --git a/ui/src/components/CreateEventModal.tsx b/ui/src/components/CreateEventModal.tsx index 3a6f33e..c2d8415 100644 --- a/ui/src/components/CreateEventModal.tsx +++ b/ui/src/components/CreateEventModal.tsx @@ -14,17 +14,22 @@ import { useTimePicker } from "@ui/ui-library/time-picker"; import { DatePicker, DatePickerButton } from "@ui/ui-library/date-picker"; import { Group } from "react-aria-components"; import { getLocalTimeZone, parseDate, today } from "@internationalized/date"; +import { useNavigate, useSearchParams } from "react-router-dom"; -interface EventModalProps { - date: Date; - onClose: () => void; -} - -export const CreateEventModal = ({ date, onClose }: EventModalProps) => { +export const CreateEventModal = () => { const user = useUser(); + const [searchParams] = useSearchParams(); + const tablo_id = searchParams.get("tablo_id"); + const date = new Date(searchParams.get("date") || ""); + const { data: tablos, isLoading: tablosLoading } = useTablosList(); const createEvent = useCreateEvent(); const timeOptions = useTimePicker({ intervalInMinute: 15 }); + const navigate = useNavigate(); + + const onClose = () => { + navigate(-1); + }; // Get the local date string without timezone conversion const getLocalDateString = (date: Date) => { @@ -61,7 +66,7 @@ export const CreateEventModal = ({ date, onClose }: EventModalProps) => { start_date: date ? getLocalDateString(date) : "", start_time: date ? getNearestTimeOption(date, "start") : "", end_time: date ? getNearestTimeOption(date, "end") : "", - tablo_id: "", + tablo_id: tablo_id || "", title: "", created_by: user.id, }); diff --git a/ui/src/components/Layout.test.tsx b/ui/src/components/Layout.test.tsx index 9059ea0..bc69a60 100644 --- a/ui/src/components/Layout.test.tsx +++ b/ui/src/components/Layout.test.tsx @@ -6,14 +6,7 @@ import { BrowserRouter } from "react-router-dom"; describe("Layout", () => { it("renders the layout with children", () => { - renderWithProviders( - -
Test Content
- - ); - - // Check if the content is rendered - expect(screen.getByText("Test Content")).toBeInTheDocument(); + renderWithProviders(); // Check if the mobile menu button is present expect(screen.getByRole("button", { name: /menu/i })).toBeInTheDocument(); @@ -27,9 +20,7 @@ describe("Layout", () => { render( - -
Test Content
- + ); @@ -52,11 +43,7 @@ describe("Layout", () => { }); it("renders the side navigation", () => { - renderWithProviders( - -
Test Content
- - ); + renderWithProviders(); // Check if the side navigation is present expect( diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx index f3f1451..054d129 100644 --- a/ui/src/components/Layout.tsx +++ b/ui/src/components/Layout.tsx @@ -1,15 +1,12 @@ -import { ReactNode, useState } from "react"; +import { useState } from "react"; import { SideNavigation } from "./NavigationBar"; import { Button } from "../ui-library/button"; import { Icon } from "../ui-library/icon"; import { MenuIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; +import { Outlet } from "react-router-dom"; -interface LayoutProps { - children: ReactNode; -} - -export function Layout({ children }: LayoutProps) { +export function Layout() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); return ( @@ -39,7 +36,9 @@ export function Layout({ children }: LayoutProps) { -
{children}
+
+ +
); } diff --git a/ui/src/pages/planning.tsx b/ui/src/pages/planning.tsx index 362515d..f9e0b2d 100644 --- a/ui/src/pages/planning.tsx +++ b/ui/src/pages/planning.tsx @@ -1,7 +1,6 @@ import { useState } from "react"; import { useTablosList } from "@ui/hooks/tablos"; import { useEventsByTablo, useDeleteEvent } from "@ui/hooks/events"; -import { CreateEventModal } from "@ui/components/CreateEventModal"; import { Select, SelectButton, @@ -9,14 +8,15 @@ import { SelectListBox, SelectListItem, } from "@ui/ui-library/select"; -import { useParams } from "react-router-dom"; +import { Outlet, useNavigate, useParams } from "react-router-dom"; type ViewType = "month" | "week" | "day"; export const PlanningPage = () => { const { tablo_id } = useParams(); + const navigate = useNavigate(); const [currentDate, setCurrentDate] = useState(new Date()); - const [selectedDate, setSelectedDate] = useState(new Date()); + // const [selectedDate, setSelectedDate] = useState(new Date()); const [currentView, setCurrentView] = useState("month"); const [selectedTabloId, setSelectedTabloId] = useState( tablo_id || "all" @@ -31,8 +31,19 @@ export const PlanningPage = () => { const deleteEvent = useDeleteEvent(); - // Modal state - const [isEventModalOpen, setIsEventModalOpen] = useState(false); + const navigateToCreateEvent = (date: Date, tablo_id: string) => { + if (tablo_id === "all") { + navigate({ + pathname: "/planning/create", + search: `date=${date.toISOString()}`, + }); + } else { + navigate({ + pathname: "/planning/create", + search: `date=${date.toISOString()}&tablo_id=${tablo_id}`, + }); + } + }; const monthNames = [ "Janvier", @@ -147,7 +158,6 @@ export const PlanningPage = () => { const goToToday = () => { const today = new Date(); setCurrentDate(today); - setSelectedDate(today); }; const getViewTitle = () => { @@ -261,8 +271,13 @@ export const PlanningPage = () => { }`} onClick={() => { if (day) { - setSelectedDate(day); - setIsEventModalOpen(true); + navigate({ + pathname: "/planning/create", + search: + selectedTabloId === "all" + ? `?date=${day.toISOString()}` + : `?date=${day.toISOString()}&tablo_id=${selectedTabloId}`, + }); } }} > @@ -291,7 +306,13 @@ export const PlanningPage = () => { }`} onClick={(e) => { e.stopPropagation(); - setIsEventModalOpen(true); + navigate({ + pathname: "/planning/create", + search: + selectedTabloId === "all" + ? `?date=${day.toISOString()}` + : `?date=${day.toISOString()}&tablo_id=${selectedTabloId}`, + }); }} >
@@ -376,8 +397,7 @@ export const PlanningPage = () => { const [hour] = time.split(":").map(Number); const dateWithTime = new Date(day); dateWithTime.setHours(hour, 0, 0, 0); - setSelectedDate(dateWithTime); - setIsEventModalOpen(true); + navigateToCreateEvent(dateWithTime, selectedTabloId); }} > {/* Current time indicator for today */} @@ -475,8 +495,7 @@ export const PlanningPage = () => { const [hour] = time.split(":").map(Number); const dateWithTime = new Date(currentDate); dateWithTime.setHours(hour, 0, 0, 0); - setSelectedDate(dateWithTime); - setIsEventModalOpen(true); + navigateToCreateEvent(dateWithTime, selectedTabloId); }} >
@@ -595,7 +614,20 @@ export const PlanningPage = () => {
- {/* Event Modal */} - {isEventModalOpen && ( + {/* {isEventModalOpen && ( setIsEventModalOpen(false)} + close={() => setIsEventModalOpen(false)} /> - )} + )} */} + + ); };