connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement calendar context menu with event creation modal

Browse Source 
- Add CalendarContextMenu component for right-click on calendar days
- Add CreateEventModal component with comprehensive event creation form
- Integrate context menu detection to avoid conflicts between event/calendar menus
- Add form validation and date/time selection with all-day toggle
- Connect modal through component hierarchy from app to calendar

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-08-28 22:20:22 -04:00
parent 7e62e3b7e3
commit 5c966b2571
6 changed files with 480 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/app.rs
View File

@@ -2,8 +2,9 @@ use yew::prelude::*;
use yew_router::prelude::*;
use gloo_storage::{LocalStorage, Storage};
use web_sys::MouseEvent;
use crate::components::{Sidebar, CreateCalendarModal, ContextMenu, EventContextMenu, RouteHandler};
use crate::components::{Sidebar, CreateCalendarModal, ContextMenu, EventContextMenu, CalendarContextMenu, CreateEventModal, EventCreationData, RouteHandler};
use crate::services::{CalendarService, calendar_service::{UserInfo, CalendarEvent}};
use chrono::NaiveDate;
#[function_component]
@@ -21,6 +22,11 @@ pub fn App() -> Html {
let event_context_menu_open = use_state(|| false);
let event_context_menu_pos = use_state(|| (0i32, 0i32));
let event_context_menu_event = use_state(|| -> Option<CalendarEvent> { None });
let calendar_context_menu_open = use_state(|| false);
let calendar_context_menu_pos = use_state(|| (0i32, 0i32));
let calendar_context_menu_date = use_state(|| -> Option<NaiveDate> { None });
let create_event_modal_open = use_state(|| false);
let selected_date_for_event = use_state(|| -> Option<NaiveDate> { None });
let available_colors = [
"#3B82F6", "#10B981", "#F59E0B", "#EF4444",
@@ -103,10 +109,12 @@ pub fn App() -> Html {
let color_picker_open = color_picker_open.clone();
let context_menu_open = context_menu_open.clone();
let event_context_menu_open = event_context_menu_open.clone();
let calendar_context_menu_open = calendar_context_menu_open.clone();
Callback::from(move |_: MouseEvent| {
color_picker_open.set(None);
context_menu_open.set(false);
event_context_menu_open.set(false);
calendar_context_menu_open.set(false);
})
};
@@ -164,6 +172,41 @@ pub fn App() -> Html {
})
};
let on_calendar_date_context_menu = {
let calendar_context_menu_open = calendar_context_menu_open.clone();
let calendar_context_menu_pos = calendar_context_menu_pos.clone();
let calendar_context_menu_date = calendar_context_menu_date.clone();
Callback::from(move |(event, date): (MouseEvent, NaiveDate)| {
calendar_context_menu_open.set(true);
calendar_context_menu_pos.set((event.client_x(), event.client_y()));
calendar_context_menu_date.set(Some(date));
})
};
let on_create_event_click = {
let create_event_modal_open = create_event_modal_open.clone();
let selected_date_for_event = selected_date_for_event.clone();
let calendar_context_menu_date = calendar_context_menu_date.clone();
Callback::from(move |_: MouseEvent| {
create_event_modal_open.set(true);
selected_date_for_event.set((*calendar_context_menu_date).clone());
})
};
let on_event_create = {
let create_event_modal_open = create_event_modal_open.clone();
let auth_token = auth_token.clone();
Callback::from(move |event_data: EventCreationData| {
web_sys::console::log_1(&format!("Creating event: {:?}", event_data).into());
create_event_modal_open.set(false);
// TODO: Implement actual event creation API call
// For now, just close the modal and refresh
if (*auth_token).is_some() {
web_sys::window().unwrap().location().reload().unwrap();
}
})
};
let refresh_calendars = {
let auth_token = auth_token.clone();
let user_info = user_info.clone();
@@ -234,6 +277,7 @@ pub fn App() -> Html {
user_info={(*user_info).clone()}
on_login={on_login.clone()}
on_event_context_menu={Some(on_event_context_menu.clone())}
on_calendar_context_menu={Some(on_calendar_date_context_menu.clone())}
/>
</main>
</>
@@ -246,6 +290,7 @@ pub fn App() -> Html {
user_info={(*user_info).clone()}
on_login={on_login.clone()}
on_event_context_menu={Some(on_event_context_menu.clone())}
on_calendar_context_menu={Some(on_calendar_date_context_menu.clone())}
/>
</div>
}
@@ -357,7 +402,7 @@ pub fn App() -> Html {
let refresh_calendars = refresh_calendars.clone();
move |_: MouseEvent| {
if let (Some(token), Some(event)) = ((*auth_token).clone(), (*event_context_menu_event).clone()) {
let refresh_calendars = refresh_calendars.clone();
let _refresh_calendars = refresh_calendars.clone();
let event_context_menu_open = event_context_menu_open.clone();
wasm_bindgen_futures::spawn_local(async move {
@@ -394,6 +439,27 @@ pub fn App() -> Html {
}
})}
/>
<CalendarContextMenu
is_open={*calendar_context_menu_open}
x={calendar_context_menu_pos.0}
y={calendar_context_menu_pos.1}
on_close={Callback::from({
let calendar_context_menu_open = calendar_context_menu_open.clone();
move |_| calendar_context_menu_open.set(false)
})}
on_create_event={on_create_event_click}
/>
<CreateEventModal
is_open={*create_event_modal_open}
selected_date={(*selected_date_for_event).clone()}
on_close={Callback::from({
let create_event_modal_open = create_event_modal_open.clone();
move |_| create_event_modal_open.set(false)
})}
on_create={on_event_create}
/>
</div>
</BrowserRouter>
}