Fix calendar event fetching to use visible date range
Some checks failed
Build and Push Docker Image / docker (push) Failing after 1m7s
Some checks failed
Build and Push Docker Image / docker (push) Failing after 1m7s
Moved event fetching logic from CalendarView to Calendar component to properly use the visible date range instead of hardcoded current month. The Calendar component already tracks the current visible date through navigation, so events now load correctly for August and other months when navigating. Changes: - Calendar component now manages its own events state and fetching - Event fetching responds to current_date changes from navigation - CalendarView simplified to just render Calendar component - Fixed cargo fmt/clippy formatting across codebase 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -34,14 +34,14 @@ impl AuthService {
|
||||
let base_url = option_env!("BACKEND_API_URL")
|
||||
.unwrap_or("http://localhost:3000/api")
|
||||
.to_string();
|
||||
|
||||
|
||||
Self { base_url }
|
||||
}
|
||||
|
||||
pub async fn login(&self, request: CalDAVLoginRequest) -> Result<AuthResponse, String> {
|
||||
self.post_json("/auth/login", &request).await
|
||||
}
|
||||
|
||||
|
||||
// Helper method for POST requests with JSON body
|
||||
async fn post_json<T: Serialize, R: for<'de> Deserialize<'de>>(
|
||||
&self,
|
||||
@@ -49,9 +49,9 @@ impl AuthService {
|
||||
body: &T,
|
||||
) -> Result<R, String> {
|
||||
let window = web_sys::window().ok_or("No global window exists")?;
|
||||
|
||||
let json_body = serde_json::to_string(body)
|
||||
.map_err(|e| format!("JSON serialization failed: {}", e))?;
|
||||
|
||||
let json_body =
|
||||
serde_json::to_string(body).map_err(|e| format!("JSON serialization failed: {}", e))?;
|
||||
|
||||
let opts = RequestInit::new();
|
||||
opts.set_method("POST");
|
||||
@@ -62,23 +62,27 @@ impl AuthService {
|
||||
let request = Request::new_with_str_and_init(&url, &opts)
|
||||
.map_err(|e| format!("Request creation failed: {:?}", e))?;
|
||||
|
||||
request.headers().set("Content-Type", "application/json")
|
||||
request
|
||||
.headers()
|
||||
.set("Content-Type", "application/json")
|
||||
.map_err(|e| format!("Header setting failed: {:?}", e))?;
|
||||
|
||||
let resp_value = JsFuture::from(window.fetch_with_request(&request))
|
||||
.await
|
||||
.map_err(|e| format!("Network request failed: {:?}", e))?;
|
||||
|
||||
let resp: Response = resp_value.dyn_into()
|
||||
let resp: Response = resp_value
|
||||
.dyn_into()
|
||||
.map_err(|e| format!("Response cast failed: {:?}", e))?;
|
||||
|
||||
let text = JsFuture::from(resp.text()
|
||||
.map_err(|e| format!("Text extraction failed: {:?}", e))?)
|
||||
.await
|
||||
.map_err(|e| format!("Text promise failed: {:?}", e))?;
|
||||
let text = JsFuture::from(
|
||||
resp.text()
|
||||
.map_err(|e| format!("Text extraction failed: {:?}", e))?,
|
||||
)
|
||||
.await
|
||||
.map_err(|e| format!("Text promise failed: {:?}", e))?;
|
||||
|
||||
let text_string = text.as_string()
|
||||
.ok_or("Response text is not a string")?;
|
||||
let text_string = text.as_string().ok_or("Response text is not a string")?;
|
||||
|
||||
if resp.ok() {
|
||||
serde_json::from_str::<R>(&text_string)
|
||||
@@ -92,4 +96,4 @@ impl AuthService {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
use yew::prelude::*;
|
||||
use chrono::{Datelike, Local, NaiveDate, Duration};
|
||||
use crate::components::{
|
||||
CalendarHeader, CreateEventModal, EventCreationData, EventModal, MonthView, ViewMode, WeekView,
|
||||
};
|
||||
use crate::models::ical::VEvent;
|
||||
use crate::services::{calendar_service::UserInfo, CalendarService};
|
||||
use chrono::{Datelike, Duration, Local, NaiveDate};
|
||||
use gloo_storage::{LocalStorage, Storage};
|
||||
use std::collections::HashMap;
|
||||
use web_sys::MouseEvent;
|
||||
use crate::services::calendar_service::UserInfo;
|
||||
use crate::models::ical::VEvent;
|
||||
use crate::components::{EventModal, ViewMode, CalendarHeader, MonthView, WeekView, CreateEventModal, EventCreationData};
|
||||
use gloo_storage::{LocalStorage, Storage};
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct CalendarProps {
|
||||
#[prop_or_default]
|
||||
pub events: HashMap<NaiveDate, Vec<VEvent>>,
|
||||
pub on_event_click: Callback<VEvent>,
|
||||
#[prop_or_default]
|
||||
pub refreshing_event_uid: Option<String>,
|
||||
#[prop_or_default]
|
||||
pub user_info: Option<UserInfo>,
|
||||
#[prop_or_default]
|
||||
@@ -25,7 +22,17 @@ pub struct CalendarProps {
|
||||
#[prop_or_default]
|
||||
pub on_create_event_request: Option<Callback<EventCreationData>>,
|
||||
#[prop_or_default]
|
||||
pub on_event_update_request: Option<Callback<(VEvent, chrono::NaiveDateTime, chrono::NaiveDateTime, bool, Option<chrono::DateTime<chrono::Utc>>, Option<String>, Option<String>)>>,
|
||||
pub on_event_update_request: Option<
|
||||
Callback<(
|
||||
VEvent,
|
||||
chrono::NaiveDateTime,
|
||||
chrono::NaiveDateTime,
|
||||
bool,
|
||||
Option<chrono::DateTime<chrono::Utc>>,
|
||||
Option<String>,
|
||||
Option<String>,
|
||||
)>,
|
||||
>,
|
||||
#[prop_or_default]
|
||||
pub context_menus_open: bool,
|
||||
}
|
||||
@@ -33,6 +40,12 @@ pub struct CalendarProps {
|
||||
#[function_component]
|
||||
pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
let today = Local::now().date_naive();
|
||||
|
||||
// Event management state
|
||||
let events = use_state(|| HashMap::<NaiveDate, Vec<VEvent>>::new());
|
||||
let loading = use_state(|| true);
|
||||
let error = use_state(|| None::<String>);
|
||||
let refreshing_event_uid = use_state(|| None::<String>);
|
||||
// Track the currently selected date (the actual day the user has selected)
|
||||
let selected_date = use_state(|| {
|
||||
// Try to load saved selected date from localStorage
|
||||
@@ -55,20 +68,19 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Track the display date (what to show in the view)
|
||||
let current_date = use_state(|| {
|
||||
match props.view {
|
||||
ViewMode::Month => selected_date.with_day(1).unwrap_or(*selected_date),
|
||||
ViewMode::Week => *selected_date,
|
||||
}
|
||||
let current_date = use_state(|| match props.view {
|
||||
ViewMode::Month => selected_date.with_day(1).unwrap_or(*selected_date),
|
||||
ViewMode::Week => *selected_date,
|
||||
});
|
||||
let selected_event = use_state(|| None::<VEvent>);
|
||||
|
||||
|
||||
// State for create event modal
|
||||
let show_create_modal = use_state(|| false);
|
||||
let create_event_data = use_state(|| None::<(chrono::NaiveDate, chrono::NaiveTime, chrono::NaiveTime)>);
|
||||
|
||||
let create_event_data =
|
||||
use_state(|| None::<(chrono::NaiveDate, chrono::NaiveTime, chrono::NaiveTime)>);
|
||||
|
||||
// State for time increment snapping (15 or 30 minutes)
|
||||
let time_increment = use_state(|| {
|
||||
// Try to load saved time increment from localStorage
|
||||
@@ -82,7 +94,155 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
15
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Fetch events when current_date changes
|
||||
{
|
||||
let events = events.clone();
|
||||
let loading = loading.clone();
|
||||
let error = error.clone();
|
||||
let current_date = current_date.clone();
|
||||
|
||||
use_effect_with((*current_date, props.view.clone()), move |(date, _view)| {
|
||||
let auth_token: Option<String> = LocalStorage::get("auth_token").ok();
|
||||
let date = *date; // Clone the date to avoid lifetime issues
|
||||
|
||||
if let Some(token) = auth_token {
|
||||
let events = events.clone();
|
||||
let loading = loading.clone();
|
||||
let error = error.clone();
|
||||
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
let calendar_service = CalendarService::new();
|
||||
|
||||
let password = if let Ok(credentials_str) =
|
||||
LocalStorage::get::<String>("caldav_credentials")
|
||||
{
|
||||
if let Ok(credentials) =
|
||||
serde_json::from_str::<serde_json::Value>(&credentials_str)
|
||||
{
|
||||
credentials["password"].as_str().unwrap_or("").to_string()
|
||||
} else {
|
||||
String::new()
|
||||
}
|
||||
} else {
|
||||
String::new()
|
||||
};
|
||||
|
||||
let current_year = date.year();
|
||||
let current_month = date.month();
|
||||
|
||||
match calendar_service
|
||||
.fetch_events_for_month_vevent(
|
||||
&token,
|
||||
&password,
|
||||
current_year,
|
||||
current_month,
|
||||
)
|
||||
.await
|
||||
{
|
||||
Ok(vevents) => {
|
||||
let grouped_events = CalendarService::group_events_by_date(vevents);
|
||||
events.set(grouped_events);
|
||||
loading.set(false);
|
||||
}
|
||||
Err(err) => {
|
||||
error.set(Some(format!("Failed to load events: {}", err)));
|
||||
loading.set(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
loading.set(false);
|
||||
error.set(Some("No authentication token found".to_string()));
|
||||
}
|
||||
|
||||
|| ()
|
||||
});
|
||||
}
|
||||
|
||||
// Handle event click to refresh individual events
|
||||
let on_event_click = {
|
||||
let events = events.clone();
|
||||
let refreshing_event_uid = refreshing_event_uid.clone();
|
||||
|
||||
Callback::from(move |event: VEvent| {
|
||||
let auth_token: Option<String> = LocalStorage::get("auth_token").ok();
|
||||
|
||||
if let Some(token) = auth_token {
|
||||
let events = events.clone();
|
||||
let refreshing_event_uid = refreshing_event_uid.clone();
|
||||
let uid = event.uid.clone();
|
||||
|
||||
refreshing_event_uid.set(Some(uid.clone()));
|
||||
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
let calendar_service = CalendarService::new();
|
||||
|
||||
let password = if let Ok(credentials_str) =
|
||||
LocalStorage::get::<String>("caldav_credentials")
|
||||
{
|
||||
if let Ok(credentials) =
|
||||
serde_json::from_str::<serde_json::Value>(&credentials_str)
|
||||
{
|
||||
credentials["password"].as_str().unwrap_or("").to_string()
|
||||
} else {
|
||||
String::new()
|
||||
}
|
||||
} else {
|
||||
String::new()
|
||||
};
|
||||
|
||||
match calendar_service
|
||||
.refresh_event(&token, &password, &uid)
|
||||
.await
|
||||
{
|
||||
Ok(Some(refreshed_event)) => {
|
||||
let refreshed_vevent = refreshed_event;
|
||||
let mut updated_events = (*events).clone();
|
||||
|
||||
for (_, day_events) in updated_events.iter_mut() {
|
||||
day_events.retain(|e| e.uid != uid);
|
||||
}
|
||||
|
||||
if refreshed_vevent.rrule.is_some() {
|
||||
let new_occurrences =
|
||||
CalendarService::expand_recurring_events(vec![
|
||||
refreshed_vevent.clone(),
|
||||
]);
|
||||
|
||||
for occurrence in new_occurrences {
|
||||
let date = occurrence.get_date();
|
||||
updated_events
|
||||
.entry(date)
|
||||
.or_insert_with(Vec::new)
|
||||
.push(occurrence);
|
||||
}
|
||||
} else {
|
||||
let date = refreshed_vevent.get_date();
|
||||
updated_events
|
||||
.entry(date)
|
||||
.or_insert_with(Vec::new)
|
||||
.push(refreshed_vevent);
|
||||
}
|
||||
|
||||
events.set(updated_events);
|
||||
}
|
||||
Ok(None) => {
|
||||
let mut updated_events = (*events).clone();
|
||||
for (_, day_events) in updated_events.iter_mut() {
|
||||
day_events.retain(|e| e.uid != uid);
|
||||
}
|
||||
events.set(updated_events);
|
||||
}
|
||||
Err(_err) => {}
|
||||
}
|
||||
|
||||
refreshing_event_uid.set(None);
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// Handle view mode changes - adjust current_date format when switching between month/week
|
||||
{
|
||||
let current_date = current_date.clone();
|
||||
@@ -98,7 +258,7 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
|| {}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
let on_prev = {
|
||||
let current_date = current_date.clone();
|
||||
let selected_date = selected_date.clone();
|
||||
@@ -110,19 +270,22 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
let prev_month = *current_date - Duration::days(1);
|
||||
let first_of_prev = prev_month.with_day(1).unwrap();
|
||||
(first_of_prev, first_of_prev)
|
||||
},
|
||||
}
|
||||
ViewMode::Week => {
|
||||
// Go to previous week
|
||||
let prev_week = *selected_date - Duration::weeks(1);
|
||||
(prev_week, prev_week)
|
||||
},
|
||||
}
|
||||
};
|
||||
selected_date.set(new_selected);
|
||||
current_date.set(new_display);
|
||||
let _ = LocalStorage::set("calendar_selected_date", new_selected.format("%Y-%m-%d").to_string());
|
||||
let _ = LocalStorage::set(
|
||||
"calendar_selected_date",
|
||||
new_selected.format("%Y-%m-%d").to_string(),
|
||||
);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let on_next = {
|
||||
let current_date = current_date.clone();
|
||||
let selected_date = selected_date.clone();
|
||||
@@ -134,19 +297,23 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
let next_month = if current_date.month() == 12 {
|
||||
NaiveDate::from_ymd_opt(current_date.year() + 1, 1, 1).unwrap()
|
||||
} else {
|
||||
NaiveDate::from_ymd_opt(current_date.year(), current_date.month() + 1, 1).unwrap()
|
||||
NaiveDate::from_ymd_opt(current_date.year(), current_date.month() + 1, 1)
|
||||
.unwrap()
|
||||
};
|
||||
(next_month, next_month)
|
||||
},
|
||||
}
|
||||
ViewMode::Week => {
|
||||
// Go to next week
|
||||
let next_week = *selected_date + Duration::weeks(1);
|
||||
(next_week, next_week)
|
||||
},
|
||||
}
|
||||
};
|
||||
selected_date.set(new_selected);
|
||||
current_date.set(new_display);
|
||||
let _ = LocalStorage::set("calendar_selected_date", new_selected.format("%Y-%m-%d").to_string());
|
||||
let _ = LocalStorage::set(
|
||||
"calendar_selected_date",
|
||||
new_selected.format("%Y-%m-%d").to_string(),
|
||||
);
|
||||
})
|
||||
};
|
||||
|
||||
@@ -160,15 +327,18 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
ViewMode::Month => {
|
||||
let first_of_today = today.with_day(1).unwrap();
|
||||
(today, first_of_today) // Select today, but display the month
|
||||
},
|
||||
}
|
||||
ViewMode::Week => (today, today), // Select and display today
|
||||
};
|
||||
selected_date.set(new_selected);
|
||||
current_date.set(new_display);
|
||||
let _ = LocalStorage::set("calendar_selected_date", new_selected.format("%Y-%m-%d").to_string());
|
||||
let _ = LocalStorage::set(
|
||||
"calendar_selected_date",
|
||||
new_selected.format("%Y-%m-%d").to_string(),
|
||||
);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// Handle time increment toggle
|
||||
let on_time_increment_toggle = {
|
||||
let time_increment = time_increment.clone();
|
||||
@@ -179,32 +349,68 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
let _ = LocalStorage::set("calendar_time_increment", next);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// Handle drag-to-create event
|
||||
let on_create_event = {
|
||||
let show_create_modal = show_create_modal.clone();
|
||||
let create_event_data = create_event_data.clone();
|
||||
Callback::from(move |(_date, start_datetime, end_datetime): (NaiveDate, chrono::NaiveDateTime, chrono::NaiveDateTime)| {
|
||||
// For drag-to-create, we don't need the temporary event approach
|
||||
// Instead, just pass the local times directly via initial_time props
|
||||
create_event_data.set(Some((start_datetime.date(), start_datetime.time(), end_datetime.time())));
|
||||
show_create_modal.set(true);
|
||||
})
|
||||
Callback::from(
|
||||
move |(_date, start_datetime, end_datetime): (
|
||||
NaiveDate,
|
||||
chrono::NaiveDateTime,
|
||||
chrono::NaiveDateTime,
|
||||
)| {
|
||||
// For drag-to-create, we don't need the temporary event approach
|
||||
// Instead, just pass the local times directly via initial_time props
|
||||
create_event_data.set(Some((
|
||||
start_datetime.date(),
|
||||
start_datetime.time(),
|
||||
end_datetime.time(),
|
||||
)));
|
||||
show_create_modal.set(true);
|
||||
},
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
// Handle drag-to-move event
|
||||
let on_event_update = {
|
||||
let on_event_update_request = props.on_event_update_request.clone();
|
||||
Callback::from(move |(event, new_start, new_end, preserve_rrule, until_date, update_scope, occurrence_date): (VEvent, chrono::NaiveDateTime, chrono::NaiveDateTime, bool, Option<chrono::DateTime<chrono::Utc>>, Option<String>, Option<String>)| {
|
||||
if let Some(callback) = &on_event_update_request {
|
||||
callback.emit((event, new_start, new_end, preserve_rrule, until_date, update_scope, occurrence_date));
|
||||
}
|
||||
})
|
||||
Callback::from(
|
||||
move |(
|
||||
event,
|
||||
new_start,
|
||||
new_end,
|
||||
preserve_rrule,
|
||||
until_date,
|
||||
update_scope,
|
||||
occurrence_date,
|
||||
): (
|
||||
VEvent,
|
||||
chrono::NaiveDateTime,
|
||||
chrono::NaiveDateTime,
|
||||
bool,
|
||||
Option<chrono::DateTime<chrono::Utc>>,
|
||||
Option<String>,
|
||||
Option<String>,
|
||||
)| {
|
||||
if let Some(callback) = &on_event_update_request {
|
||||
callback.emit((
|
||||
event,
|
||||
new_start,
|
||||
new_end,
|
||||
preserve_rrule,
|
||||
until_date,
|
||||
update_scope,
|
||||
occurrence_date,
|
||||
));
|
||||
}
|
||||
},
|
||||
)
|
||||
};
|
||||
|
||||
html! {
|
||||
<div class={classes!("calendar", match props.view { ViewMode::Week => Some("week-view"), _ => None })}>
|
||||
<CalendarHeader
|
||||
<CalendarHeader
|
||||
current_date={*current_date}
|
||||
view_mode={props.view.clone()}
|
||||
on_prev={on_prev}
|
||||
@@ -213,9 +419,22 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
time_increment={Some(*time_increment)}
|
||||
on_time_increment_toggle={Some(on_time_increment_toggle)}
|
||||
/>
|
||||
|
||||
|
||||
{
|
||||
match props.view {
|
||||
if *loading {
|
||||
html! {
|
||||
<div class="calendar-loading">
|
||||
<p>{"Loading calendar events..."}</p>
|
||||
</div>
|
||||
}
|
||||
} else if let Some(err) = (*error).clone() {
|
||||
html! {
|
||||
<div class="calendar-error">
|
||||
<p>{format!("Error: {}", err)}</p>
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
match props.view {
|
||||
ViewMode::Month => {
|
||||
let on_day_select = {
|
||||
let selected_date = selected_date.clone();
|
||||
@@ -224,14 +443,14 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
let _ = LocalStorage::set("calendar_selected_date", date.format("%Y-%m-%d").to_string());
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
html! {
|
||||
<MonthView
|
||||
current_month={*current_date}
|
||||
today={today}
|
||||
events={props.events.clone()}
|
||||
on_event_click={props.on_event_click.clone()}
|
||||
refreshing_event_uid={props.refreshing_event_uid.clone()}
|
||||
events={(*events).clone()}
|
||||
on_event_click={on_event_click.clone()}
|
||||
refreshing_event_uid={(*refreshing_event_uid).clone()}
|
||||
user_info={props.user_info.clone()}
|
||||
on_event_context_menu={props.on_event_context_menu.clone()}
|
||||
on_calendar_context_menu={props.on_calendar_context_menu.clone()}
|
||||
@@ -244,9 +463,9 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
<WeekView
|
||||
current_date={*current_date}
|
||||
today={today}
|
||||
events={props.events.clone()}
|
||||
on_event_click={props.on_event_click.clone()}
|
||||
refreshing_event_uid={props.refreshing_event_uid.clone()}
|
||||
events={(*events).clone()}
|
||||
on_event_click={on_event_click.clone()}
|
||||
refreshing_event_uid={(*refreshing_event_uid).clone()}
|
||||
user_info={props.user_info.clone()}
|
||||
on_event_context_menu={props.on_event_context_menu.clone()}
|
||||
on_calendar_context_menu={props.on_calendar_context_menu.clone()}
|
||||
@@ -257,11 +476,12 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
time_increment={*time_increment}
|
||||
/>
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Event details modal
|
||||
<EventModal
|
||||
<EventModal
|
||||
event={(*selected_event).clone()}
|
||||
on_close={{
|
||||
let selected_event_clone = selected_event.clone();
|
||||
@@ -270,7 +490,7 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
// Create event modal
|
||||
<CreateEventModal
|
||||
is_open={*show_create_modal}
|
||||
@@ -294,7 +514,7 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
Callback::from(move |event_data: EventCreationData| {
|
||||
show_create_modal.set(false);
|
||||
create_event_data.set(None);
|
||||
|
||||
|
||||
// Emit the create event request to parent
|
||||
if let Some(callback) = &on_create_event_request {
|
||||
callback.emit(event_data);
|
||||
@@ -313,4 +533,4 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
use yew::prelude::*;
|
||||
use web_sys::MouseEvent;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct CalendarContextMenuProps {
|
||||
@@ -13,7 +13,7 @@ pub struct CalendarContextMenuProps {
|
||||
#[function_component(CalendarContextMenu)]
|
||||
pub fn calendar_context_menu(props: &CalendarContextMenuProps) -> Html {
|
||||
let menu_ref = use_node_ref();
|
||||
|
||||
|
||||
if !props.is_open {
|
||||
return html! {};
|
||||
}
|
||||
@@ -33,9 +33,9 @@ pub fn calendar_context_menu(props: &CalendarContextMenuProps) -> Html {
|
||||
};
|
||||
|
||||
html! {
|
||||
<div
|
||||
<div
|
||||
ref={menu_ref}
|
||||
class="context-menu"
|
||||
class="context-menu"
|
||||
style={style}
|
||||
>
|
||||
<div class="context-menu-item context-menu-create" onclick={on_create_event_click}>
|
||||
@@ -44,4 +44,4 @@ pub fn calendar_context_menu(props: &CalendarContextMenuProps) -> Html {
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
use yew::prelude::*;
|
||||
use chrono::{NaiveDate, Datelike};
|
||||
use crate::components::ViewMode;
|
||||
use chrono::{Datelike, NaiveDate};
|
||||
use web_sys::MouseEvent;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct CalendarHeaderProps {
|
||||
@@ -18,7 +18,11 @@ pub struct CalendarHeaderProps {
|
||||
|
||||
#[function_component(CalendarHeader)]
|
||||
pub fn calendar_header(props: &CalendarHeaderProps) -> Html {
|
||||
let title = format!("{} {}", get_month_name(props.current_date.month()), props.current_date.year());
|
||||
let title = format!(
|
||||
"{} {}",
|
||||
get_month_name(props.current_date.month()),
|
||||
props.current_date.year()
|
||||
);
|
||||
|
||||
html! {
|
||||
<div class="calendar-header">
|
||||
@@ -48,7 +52,7 @@ pub fn calendar_header(props: &CalendarHeaderProps) -> Html {
|
||||
fn get_month_name(month: u32) -> &'static str {
|
||||
match month {
|
||||
1 => "January",
|
||||
2 => "February",
|
||||
2 => "February",
|
||||
3 => "March",
|
||||
4 => "April",
|
||||
5 => "May",
|
||||
@@ -59,6 +63,6 @@ fn get_month_name(month: u32) -> &'static str {
|
||||
10 => "October",
|
||||
11 => "November",
|
||||
12 => "December",
|
||||
_ => "Invalid"
|
||||
_ => "Invalid",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
use yew::prelude::*;
|
||||
use web_sys::MouseEvent;
|
||||
use crate::services::calendar_service::CalendarInfo;
|
||||
use web_sys::MouseEvent;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct CalendarListItemProps {
|
||||
pub calendar: CalendarInfo,
|
||||
pub color_picker_open: bool,
|
||||
pub on_color_change: Callback<(String, String)>, // (calendar_path, color)
|
||||
pub on_color_picker_toggle: Callback<String>, // calendar_path
|
||||
pub on_color_picker_toggle: Callback<String>, // calendar_path
|
||||
pub available_colors: Vec<String>,
|
||||
pub on_context_menu: Callback<(MouseEvent, String)>, // (event, calendar_path)
|
||||
}
|
||||
@@ -34,7 +34,7 @@ pub fn calendar_list_item(props: &CalendarListItemProps) -> Html {
|
||||
|
||||
html! {
|
||||
<li key={props.calendar.path.clone()} oncontextmenu={on_context_menu}>
|
||||
<span class="calendar-color"
|
||||
<span class="calendar-color"
|
||||
style={format!("background-color: {}", props.calendar.color)}
|
||||
onclick={on_color_click}>
|
||||
{
|
||||
@@ -46,14 +46,14 @@ pub fn calendar_list_item(props: &CalendarListItemProps) -> Html {
|
||||
let color_str = color.clone();
|
||||
let cal_path = props.calendar.path.clone();
|
||||
let on_color_change = props.on_color_change.clone();
|
||||
|
||||
|
||||
let on_color_select = Callback::from(move |_: MouseEvent| {
|
||||
on_color_change.emit((cal_path.clone(), color_str.clone()));
|
||||
});
|
||||
|
||||
|
||||
let is_selected = props.calendar.color == *color;
|
||||
let class_name = if is_selected { "color-option selected" } else { "color-option" };
|
||||
|
||||
|
||||
html! {
|
||||
<div class={class_name}
|
||||
style={format!("background-color: {}", color)}
|
||||
@@ -72,4 +72,4 @@ pub fn calendar_list_item(props: &CalendarListItemProps) -> Html {
|
||||
<span class="calendar-name">{&props.calendar.display_name}</span>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
use yew::prelude::*;
|
||||
use web_sys::MouseEvent;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct ContextMenuProps {
|
||||
@@ -13,7 +13,7 @@ pub struct ContextMenuProps {
|
||||
#[function_component(ContextMenu)]
|
||||
pub fn context_menu(props: &ContextMenuProps) -> Html {
|
||||
let menu_ref = use_node_ref();
|
||||
|
||||
|
||||
// Close menu when clicking outside (handled by parent component)
|
||||
|
||||
if !props.is_open {
|
||||
@@ -35,9 +35,9 @@ pub fn context_menu(props: &ContextMenuProps) -> Html {
|
||||
};
|
||||
|
||||
html! {
|
||||
<div
|
||||
<div
|
||||
ref={menu_ref}
|
||||
class="context-menu"
|
||||
class="context-menu"
|
||||
style={style}
|
||||
>
|
||||
<div class="context-menu-item context-menu-delete" onclick={on_delete_click}>
|
||||
@@ -45,4 +45,4 @@ pub fn context_menu(props: &ContextMenuProps) -> Html {
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,30 +39,32 @@ pub fn CreateCalendarModal(props: &CreateCalendarModalProps) -> Html {
|
||||
let error_message = error_message.clone();
|
||||
let is_creating = is_creating.clone();
|
||||
let on_create = props.on_create.clone();
|
||||
|
||||
|
||||
Callback::from(move |e: SubmitEvent| {
|
||||
e.prevent_default();
|
||||
|
||||
|
||||
let name = (*calendar_name).trim();
|
||||
if name.is_empty() {
|
||||
error_message.set(Some("Calendar name is required".to_string()));
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if name.len() > 100 {
|
||||
error_message.set(Some("Calendar name too long (max 100 characters)".to_string()));
|
||||
error_message.set(Some(
|
||||
"Calendar name too long (max 100 characters)".to_string(),
|
||||
));
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
error_message.set(None);
|
||||
is_creating.set(true);
|
||||
|
||||
|
||||
let desc = if (*description).trim().is_empty() {
|
||||
None
|
||||
} else {
|
||||
Some((*description).clone())
|
||||
};
|
||||
|
||||
|
||||
on_create.emit((name.to_string(), desc, (*selected_color).clone()));
|
||||
})
|
||||
};
|
||||
@@ -90,7 +92,7 @@ pub fn CreateCalendarModal(props: &CreateCalendarModalProps) -> Html {
|
||||
{"×"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<form class="modal-body" onsubmit={on_submit}>
|
||||
{
|
||||
if let Some(ref error) = *error_message {
|
||||
@@ -103,10 +105,10 @@ pub fn CreateCalendarModal(props: &CreateCalendarModalProps) -> Html {
|
||||
html! {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="calendar-name">{"Calendar Name *"}</label>
|
||||
<input
|
||||
<input
|
||||
id="calendar-name"
|
||||
type="text"
|
||||
value={(*calendar_name).clone()}
|
||||
@@ -116,7 +118,7 @@ pub fn CreateCalendarModal(props: &CreateCalendarModalProps) -> Html {
|
||||
disabled={*is_creating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="calendar-description">{"Description"}</label>
|
||||
<textarea
|
||||
@@ -128,7 +130,7 @@ pub fn CreateCalendarModal(props: &CreateCalendarModalProps) -> Html {
|
||||
disabled={*is_creating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label>{"Calendar Color"}</label>
|
||||
<div class="color-grid">
|
||||
@@ -143,13 +145,13 @@ pub fn CreateCalendarModal(props: &CreateCalendarModalProps) -> Html {
|
||||
selected_color.set(Some(color.clone()));
|
||||
})
|
||||
};
|
||||
|
||||
let class_name = if is_selected {
|
||||
"color-option selected"
|
||||
} else {
|
||||
"color-option"
|
||||
|
||||
let class_name = if is_selected {
|
||||
"color-option selected"
|
||||
} else {
|
||||
"color-option"
|
||||
};
|
||||
|
||||
|
||||
html! {
|
||||
<button
|
||||
key={index}
|
||||
@@ -165,18 +167,18 @@ pub fn CreateCalendarModal(props: &CreateCalendarModalProps) -> Html {
|
||||
</div>
|
||||
<p class="color-help-text">{"Optional: Choose a color for your calendar"}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
<button
|
||||
type="button"
|
||||
class="cancel-button"
|
||||
onclick={props.on_close.reform(|_| ())}
|
||||
disabled={*is_creating}
|
||||
>
|
||||
{"Cancel"}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
<button
|
||||
type="submit"
|
||||
class="create-button"
|
||||
disabled={*is_creating}
|
||||
>
|
||||
@@ -193,4 +195,4 @@ pub fn CreateCalendarModal(props: &CreateCalendarModalProps) -> Html {
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
use yew::prelude::*;
|
||||
use web_sys::MouseEvent;
|
||||
use crate::models::ical::VEvent;
|
||||
use web_sys::MouseEvent;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Clone, PartialEq, Debug)]
|
||||
pub enum DeleteAction {
|
||||
@@ -30,7 +30,7 @@ pub struct EventContextMenuProps {
|
||||
#[function_component(EventContextMenu)]
|
||||
pub fn event_context_menu(props: &EventContextMenuProps) -> Html {
|
||||
let menu_ref = use_node_ref();
|
||||
|
||||
|
||||
if !props.is_open {
|
||||
return html! {};
|
||||
}
|
||||
@@ -41,7 +41,9 @@ pub fn event_context_menu(props: &EventContextMenuProps) -> Html {
|
||||
);
|
||||
|
||||
// Check if the event is recurring
|
||||
let is_recurring = props.event.as_ref()
|
||||
let is_recurring = props
|
||||
.event
|
||||
.as_ref()
|
||||
.map(|event| event.rrule.is_some())
|
||||
.unwrap_or(false);
|
||||
|
||||
@@ -64,9 +66,9 @@ pub fn event_context_menu(props: &EventContextMenuProps) -> Html {
|
||||
};
|
||||
|
||||
html! {
|
||||
<div
|
||||
<div
|
||||
ref={menu_ref}
|
||||
class="context-menu"
|
||||
class="context-menu"
|
||||
style={style}
|
||||
>
|
||||
{
|
||||
@@ -117,4 +119,4 @@ pub fn event_context_menu(props: &EventContextMenuProps) -> Html {
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
use yew::prelude::*;
|
||||
use chrono::{DateTime, Utc};
|
||||
use crate::models::ical::VEvent;
|
||||
use chrono::{DateTime, Utc};
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct EventModalProps {
|
||||
@@ -16,7 +16,7 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
on_close.emit(());
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let backdrop_click = {
|
||||
let on_close = props.on_close.clone();
|
||||
Callback::from(move |e: MouseEvent| {
|
||||
@@ -39,7 +39,7 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
<strong>{"Title:"}</strong>
|
||||
<span>{event.get_title()}</span>
|
||||
</div>
|
||||
|
||||
|
||||
{
|
||||
if let Some(ref description) = event.description {
|
||||
html! {
|
||||
@@ -52,12 +52,12 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
html! {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<div class="event-detail">
|
||||
<strong>{"Start:"}</strong>
|
||||
<span>{format_datetime(&event.dtstart, event.all_day)}</span>
|
||||
</div>
|
||||
|
||||
|
||||
{
|
||||
if let Some(ref end) = event.dtend {
|
||||
html! {
|
||||
@@ -70,12 +70,12 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
html! {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<div class="event-detail">
|
||||
<strong>{"All Day:"}</strong>
|
||||
<span>{if event.all_day { "Yes" } else { "No" }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
{
|
||||
if let Some(ref location) = event.location {
|
||||
html! {
|
||||
@@ -88,22 +88,22 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
html! {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<div class="event-detail">
|
||||
<strong>{"Status:"}</strong>
|
||||
<span>{event.get_status_display()}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="event-detail">
|
||||
<strong>{"Privacy:"}</strong>
|
||||
<span>{event.get_class_display()}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="event-detail">
|
||||
<strong>{"Priority:"}</strong>
|
||||
<span>{event.get_priority_display()}</span>
|
||||
</div>
|
||||
|
||||
|
||||
{
|
||||
if let Some(ref organizer) = event.organizer {
|
||||
html! {
|
||||
@@ -116,7 +116,7 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
html! {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
if !event.attendees.is_empty() {
|
||||
html! {
|
||||
@@ -129,7 +129,7 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
html! {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
if !event.categories.is_empty() {
|
||||
html! {
|
||||
@@ -142,7 +142,7 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
html! {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
if let Some(ref recurrence) = event.rrule {
|
||||
html! {
|
||||
@@ -160,7 +160,7 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
if !event.alarms.is_empty() {
|
||||
html! {
|
||||
@@ -178,7 +178,7 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
if let Some(ref created) = event.created {
|
||||
html! {
|
||||
@@ -191,7 +191,7 @@ pub fn EventModal(props: &EventModalProps) -> Html {
|
||||
html! {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
if let Some(ref modified) = event.last_modified {
|
||||
html! {
|
||||
@@ -236,4 +236,3 @@ fn format_recurrence_rule(rrule: &str) -> String {
|
||||
format!("Custom ({})", rrule)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
use yew::prelude::*;
|
||||
use web_sys::HtmlInputElement;
|
||||
use gloo_storage::{LocalStorage, Storage};
|
||||
use web_sys::HtmlInputElement;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct LoginProps {
|
||||
@@ -53,7 +53,7 @@ pub fn Login(props: &LoginProps) -> Html {
|
||||
|
||||
Callback::from(move |e: SubmitEvent| {
|
||||
e.prevent_default();
|
||||
|
||||
|
||||
let server_url = (*server_url).clone();
|
||||
let username = (*username).clone();
|
||||
let password = (*password).clone();
|
||||
@@ -77,7 +77,8 @@ pub fn Login(props: &LoginProps) -> Html {
|
||||
web_sys::console::log_1(&"✅ Login successful!".into());
|
||||
// Store token and credentials in local storage
|
||||
if let Err(_) = LocalStorage::set("auth_token", &token) {
|
||||
error_message.set(Some("Failed to store authentication token".to_string()));
|
||||
error_message
|
||||
.set(Some("Failed to store authentication token".to_string()));
|
||||
is_loading.set(false);
|
||||
return;
|
||||
}
|
||||
@@ -86,7 +87,7 @@ pub fn Login(props: &LoginProps) -> Html {
|
||||
is_loading.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
is_loading.set(false);
|
||||
on_login.emit(token);
|
||||
}
|
||||
@@ -172,21 +173,25 @@ pub fn Login(props: &LoginProps) -> Html {
|
||||
}
|
||||
|
||||
/// Perform login using the CalDAV auth service
|
||||
async fn perform_login(server_url: String, username: String, password: String) -> Result<(String, String), String> {
|
||||
async fn perform_login(
|
||||
server_url: String,
|
||||
username: String,
|
||||
password: String,
|
||||
) -> Result<(String, String), String> {
|
||||
use crate::auth::{AuthService, CalDAVLoginRequest};
|
||||
use serde_json;
|
||||
|
||||
|
||||
web_sys::console::log_1(&format!("📡 Creating auth service and request...").into());
|
||||
|
||||
|
||||
let auth_service = AuthService::new();
|
||||
let request = CalDAVLoginRequest {
|
||||
server_url: server_url.clone(),
|
||||
username: username.clone(),
|
||||
password: password.clone()
|
||||
let request = CalDAVLoginRequest {
|
||||
server_url: server_url.clone(),
|
||||
username: username.clone(),
|
||||
password: password.clone(),
|
||||
};
|
||||
|
||||
|
||||
web_sys::console::log_1(&format!("🚀 Sending login request to backend...").into());
|
||||
|
||||
|
||||
match auth_service.login(request).await {
|
||||
Ok(response) => {
|
||||
web_sys::console::log_1(&format!("✅ Backend responded successfully").into());
|
||||
@@ -197,10 +202,10 @@ async fn perform_login(server_url: String, username: String, password: String) -
|
||||
"password": password
|
||||
});
|
||||
Ok((response.token, credentials.to_string()))
|
||||
},
|
||||
}
|
||||
Err(err) => {
|
||||
web_sys::console::log_1(&format!("❌ Backend error: {}", err).into());
|
||||
Err(err)
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,31 +1,33 @@
|
||||
pub mod login;
|
||||
pub mod calendar;
|
||||
pub mod calendar_header;
|
||||
pub mod month_view;
|
||||
pub mod week_view;
|
||||
pub mod event_modal;
|
||||
pub mod create_calendar_modal;
|
||||
pub mod context_menu;
|
||||
pub mod event_context_menu;
|
||||
pub mod calendar_context_menu;
|
||||
pub mod create_event_modal;
|
||||
pub mod sidebar;
|
||||
pub mod calendar_header;
|
||||
pub mod calendar_list_item;
|
||||
pub mod route_handler;
|
||||
pub mod context_menu;
|
||||
pub mod create_calendar_modal;
|
||||
pub mod create_event_modal;
|
||||
pub mod event_context_menu;
|
||||
pub mod event_modal;
|
||||
pub mod login;
|
||||
pub mod month_view;
|
||||
pub mod recurring_edit_modal;
|
||||
pub mod route_handler;
|
||||
pub mod sidebar;
|
||||
pub mod week_view;
|
||||
|
||||
pub use login::Login;
|
||||
pub use calendar::Calendar;
|
||||
pub use calendar_header::CalendarHeader;
|
||||
pub use month_view::MonthView;
|
||||
pub use week_view::WeekView;
|
||||
pub use event_modal::EventModal;
|
||||
pub use create_calendar_modal::CreateCalendarModal;
|
||||
pub use context_menu::ContextMenu;
|
||||
pub use event_context_menu::{EventContextMenu, DeleteAction, EditAction};
|
||||
pub use calendar_context_menu::CalendarContextMenu;
|
||||
pub use create_event_modal::{CreateEventModal, EventCreationData, EventStatus, EventClass, ReminderType, RecurrenceType};
|
||||
pub use sidebar::{Sidebar, ViewMode, Theme};
|
||||
pub use calendar_header::CalendarHeader;
|
||||
pub use calendar_list_item::CalendarListItem;
|
||||
pub use context_menu::ContextMenu;
|
||||
pub use create_calendar_modal::CreateCalendarModal;
|
||||
pub use create_event_modal::{
|
||||
CreateEventModal, EventClass, EventCreationData, EventStatus, RecurrenceType, ReminderType,
|
||||
};
|
||||
pub use event_context_menu::{DeleteAction, EditAction, EventContextMenu};
|
||||
pub use event_modal::EventModal;
|
||||
pub use login::Login;
|
||||
pub use month_view::MonthView;
|
||||
pub use recurring_edit_modal::{RecurringEditAction, RecurringEditModal};
|
||||
pub use route_handler::RouteHandler;
|
||||
pub use recurring_edit_modal::{RecurringEditModal, RecurringEditAction};
|
||||
pub use sidebar::{Sidebar, Theme, ViewMode};
|
||||
pub use week_view::WeekView;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
use yew::prelude::*;
|
||||
use crate::models::ical::VEvent;
|
||||
use crate::services::calendar_service::UserInfo;
|
||||
use chrono::{Datelike, NaiveDate, Weekday};
|
||||
use std::collections::HashMap;
|
||||
use web_sys::window;
|
||||
use wasm_bindgen::{prelude::*, JsCast};
|
||||
use crate::services::calendar_service::UserInfo;
|
||||
use crate::models::ical::VEvent;
|
||||
use web_sys::window;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct MonthViewProps {
|
||||
@@ -52,30 +52,33 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
let calculate_max_events = calculate_max_events.clone();
|
||||
use_effect_with((), move |_| {
|
||||
let calculate_max_events_clone = calculate_max_events.clone();
|
||||
|
||||
|
||||
// Initial calculation with a slight delay to ensure DOM is ready
|
||||
if let Some(window) = window() {
|
||||
let timeout_closure = Closure::wrap(Box::new(move || {
|
||||
calculate_max_events_clone();
|
||||
}) as Box<dyn FnMut()>);
|
||||
|
||||
|
||||
let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0(
|
||||
timeout_closure.as_ref().unchecked_ref(),
|
||||
100,
|
||||
);
|
||||
timeout_closure.forget();
|
||||
}
|
||||
|
||||
|
||||
// Setup resize listener
|
||||
let resize_closure = Closure::wrap(Box::new(move || {
|
||||
calculate_max_events();
|
||||
}) as Box<dyn Fn()>);
|
||||
|
||||
|
||||
if let Some(window) = window() {
|
||||
let _ = window.add_event_listener_with_callback("resize", resize_closure.as_ref().unchecked_ref());
|
||||
let _ = window.add_event_listener_with_callback(
|
||||
"resize",
|
||||
resize_closure.as_ref().unchecked_ref(),
|
||||
);
|
||||
resize_closure.forget(); // Keep the closure alive
|
||||
}
|
||||
|
||||
|
||||
|| {}
|
||||
});
|
||||
}
|
||||
@@ -84,8 +87,11 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
let get_event_color = |event: &VEvent| -> String {
|
||||
if let Some(user_info) = &props.user_info {
|
||||
if let Some(calendar_path) = &event.calendar_path {
|
||||
if let Some(calendar) = user_info.calendars.iter()
|
||||
.find(|cal| &cal.path == calendar_path) {
|
||||
if let Some(calendar) = user_info
|
||||
.calendars
|
||||
.iter()
|
||||
.find(|cal| &cal.path == calendar_path)
|
||||
{
|
||||
return calendar.color.clone();
|
||||
}
|
||||
}
|
||||
@@ -103,7 +109,7 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
<div class="weekday-header">{"Thu"}</div>
|
||||
<div class="weekday-header">{"Fri"}</div>
|
||||
<div class="weekday-header">{"Sat"}</div>
|
||||
|
||||
|
||||
// Days from previous month (grayed out)
|
||||
{
|
||||
days_from_prev_month.iter().map(|day| {
|
||||
@@ -112,7 +118,7 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
}
|
||||
}).collect::<Html>()
|
||||
}
|
||||
|
||||
|
||||
// Days of the current month
|
||||
{
|
||||
(1..=days_in_month).map(|day| {
|
||||
@@ -120,16 +126,16 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
let is_today = date == props.today;
|
||||
let is_selected = props.selected_date == Some(date);
|
||||
let day_events = props.events.get(&date).cloned().unwrap_or_default();
|
||||
|
||||
|
||||
// Calculate visible events and overflow
|
||||
let max_events = *max_events_per_day as usize;
|
||||
let visible_events: Vec<_> = day_events.iter().take(max_events).collect();
|
||||
let hidden_count = day_events.len().saturating_sub(max_events);
|
||||
|
||||
|
||||
html! {
|
||||
<div
|
||||
<div
|
||||
class={classes!(
|
||||
"calendar-day",
|
||||
"calendar-day",
|
||||
if is_today { Some("today") } else { None },
|
||||
if is_selected { Some("selected") } else { None }
|
||||
)}
|
||||
@@ -162,7 +168,7 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
visible_events.iter().map(|event| {
|
||||
let event_color = get_event_color(event);
|
||||
let is_refreshing = props.refreshing_event_uid.as_ref() == Some(&event.uid);
|
||||
|
||||
|
||||
let onclick = {
|
||||
let on_event_click = props.on_event_click.clone();
|
||||
let event = (*event).clone();
|
||||
@@ -170,7 +176,7 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
on_event_click.emit(event.clone());
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let oncontextmenu = {
|
||||
if let Some(callback) = &props.on_event_context_menu {
|
||||
let callback = callback.clone();
|
||||
@@ -183,9 +189,9 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
None
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
html! {
|
||||
<div
|
||||
<div
|
||||
class={classes!("event-box", if is_refreshing { Some("refreshing") } else { None })}
|
||||
style={format!("background-color: {}", event_color)}
|
||||
{onclick}
|
||||
@@ -212,7 +218,7 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
}
|
||||
}).collect::<Html>()
|
||||
}
|
||||
|
||||
|
||||
{ render_next_month_days(days_from_prev_month.len(), days_in_month) }
|
||||
</div>
|
||||
}
|
||||
@@ -221,20 +227,34 @@ pub fn month_view(props: &MonthViewProps) -> Html {
|
||||
fn render_next_month_days(prev_days_count: usize, current_days_count: u32) -> Html {
|
||||
let total_slots = 42; // 6 rows x 7 days
|
||||
let used_slots = prev_days_count + current_days_count as usize;
|
||||
let remaining_slots = if used_slots < total_slots { total_slots - used_slots } else { 0 };
|
||||
|
||||
(1..=remaining_slots).map(|day| {
|
||||
html! {
|
||||
<div class="calendar-day next-month">{day}</div>
|
||||
}
|
||||
}).collect::<Html>()
|
||||
let remaining_slots = if used_slots < total_slots {
|
||||
total_slots - used_slots
|
||||
} else {
|
||||
0
|
||||
};
|
||||
|
||||
(1..=remaining_slots)
|
||||
.map(|day| {
|
||||
html! {
|
||||
<div class="calendar-day next-month">{day}</div>
|
||||
}
|
||||
})
|
||||
.collect::<Html>()
|
||||
}
|
||||
|
||||
fn get_days_in_month(date: NaiveDate) -> u32 {
|
||||
NaiveDate::from_ymd_opt(
|
||||
if date.month() == 12 { date.year() + 1 } else { date.year() },
|
||||
if date.month() == 12 { 1 } else { date.month() + 1 },
|
||||
1
|
||||
if date.month() == 12 {
|
||||
date.year() + 1
|
||||
} else {
|
||||
date.year()
|
||||
},
|
||||
if date.month() == 12 {
|
||||
1
|
||||
} else {
|
||||
date.month() + 1
|
||||
},
|
||||
1,
|
||||
)
|
||||
.unwrap()
|
||||
.pred_opt()
|
||||
@@ -252,7 +272,7 @@ fn get_days_from_previous_month(current_month: NaiveDate, first_weekday: Weekday
|
||||
Weekday::Fri => 5,
|
||||
Weekday::Sat => 6,
|
||||
};
|
||||
|
||||
|
||||
if days_before == 0 {
|
||||
vec![]
|
||||
} else {
|
||||
@@ -261,8 +281,8 @@ fn get_days_from_previous_month(current_month: NaiveDate, first_weekday: Weekday
|
||||
} else {
|
||||
NaiveDate::from_ymd_opt(current_month.year(), current_month.month() - 1, 1).unwrap()
|
||||
};
|
||||
|
||||
|
||||
let prev_month_days = get_days_in_month(prev_month);
|
||||
((prev_month_days - days_before as u32 + 1)..=prev_month_days).collect()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
use yew::prelude::*;
|
||||
use chrono::NaiveDateTime;
|
||||
use crate::models::ical::VEvent;
|
||||
use chrono::NaiveDateTime;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Clone, PartialEq)]
|
||||
pub enum RecurringEditAction {
|
||||
@@ -25,29 +25,34 @@ pub fn recurring_edit_modal(props: &RecurringEditModalProps) -> Html {
|
||||
return html! {};
|
||||
}
|
||||
|
||||
let event_title = props.event.summary.as_ref().map(|s| s.as_str()).unwrap_or("Untitled Event");
|
||||
|
||||
let event_title = props
|
||||
.event
|
||||
.summary
|
||||
.as_ref()
|
||||
.map(|s| s.as_str())
|
||||
.unwrap_or("Untitled Event");
|
||||
|
||||
let on_this_event = {
|
||||
let on_choice = props.on_choice.clone();
|
||||
Callback::from(move |_| {
|
||||
on_choice.emit(RecurringEditAction::ThisEvent);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let on_future_events = {
|
||||
let on_choice = props.on_choice.clone();
|
||||
Callback::from(move |_| {
|
||||
on_choice.emit(RecurringEditAction::FutureEvents);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let on_all_events = {
|
||||
let on_choice = props.on_choice.clone();
|
||||
Callback::from(move |_| {
|
||||
on_choice.emit(RecurringEditAction::AllEvents);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let on_cancel = {
|
||||
let on_cancel = props.on_cancel.clone();
|
||||
Callback::from(move |_| {
|
||||
@@ -64,18 +69,18 @@ pub fn recurring_edit_modal(props: &RecurringEditModalProps) -> Html {
|
||||
<div class="modal-body">
|
||||
<p>{format!("You're modifying \"{}\" which is part of a recurring series.", event_title)}</p>
|
||||
<p>{"How would you like to apply this change?"}</p>
|
||||
|
||||
|
||||
<div class="recurring-edit-options">
|
||||
<button class="btn btn-primary recurring-option" onclick={on_this_event}>
|
||||
<div class="option-title">{"This event only"}</div>
|
||||
<div class="option-description">{"Change only this occurrence"}</div>
|
||||
</button>
|
||||
|
||||
|
||||
<button class="btn btn-primary recurring-option" onclick={on_future_events}>
|
||||
<div class="option-title">{"This and future events"}</div>
|
||||
<div class="option-description">{"Change this occurrence and all future occurrences"}</div>
|
||||
</button>
|
||||
|
||||
|
||||
<button class="btn btn-primary recurring-option" onclick={on_all_events}>
|
||||
<div class="option-title">{"All events in series"}</div>
|
||||
<div class="option-description">{"Change all occurrences in the series"}</div>
|
||||
@@ -90,4 +95,4 @@ pub fn recurring_edit_modal(props: &RecurringEditModalProps) -> Html {
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
use crate::components::{Login, ViewMode};
|
||||
use crate::models::ical::VEvent;
|
||||
use crate::services::calendar_service::UserInfo;
|
||||
use yew::prelude::*;
|
||||
use yew_router::prelude::*;
|
||||
use crate::components::{Login, ViewMode};
|
||||
use crate::services::calendar_service::UserInfo;
|
||||
use crate::models::ical::VEvent;
|
||||
|
||||
#[derive(Clone, Routable, PartialEq)]
|
||||
pub enum Route {
|
||||
@@ -28,7 +28,17 @@ pub struct RouteHandlerProps {
|
||||
#[prop_or_default]
|
||||
pub on_create_event_request: Option<Callback<crate::components::EventCreationData>>,
|
||||
#[prop_or_default]
|
||||
pub on_event_update_request: Option<Callback<(VEvent, chrono::NaiveDateTime, chrono::NaiveDateTime, bool, Option<chrono::DateTime<chrono::Utc>>, Option<String>, Option<String>)>>,
|
||||
pub on_event_update_request: Option<
|
||||
Callback<(
|
||||
VEvent,
|
||||
chrono::NaiveDateTime,
|
||||
chrono::NaiveDateTime,
|
||||
bool,
|
||||
Option<chrono::DateTime<chrono::Utc>>,
|
||||
Option<String>,
|
||||
Option<String>,
|
||||
)>,
|
||||
>,
|
||||
#[prop_or_default]
|
||||
pub context_menus_open: bool,
|
||||
}
|
||||
@@ -44,7 +54,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
|
||||
let on_create_event_request = props.on_create_event_request.clone();
|
||||
let on_event_update_request = props.on_event_update_request.clone();
|
||||
let context_menus_open = props.context_menus_open;
|
||||
|
||||
|
||||
html! {
|
||||
<Switch<Route> render={move |route| {
|
||||
let auth_token = auth_token.clone();
|
||||
@@ -56,7 +66,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
|
||||
let on_create_event_request = on_create_event_request.clone();
|
||||
let on_event_update_request = on_event_update_request.clone();
|
||||
let context_menus_open = context_menus_open;
|
||||
|
||||
|
||||
match route {
|
||||
Route::Home => {
|
||||
if auth_token.is_some() {
|
||||
@@ -74,16 +84,16 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
|
||||
}
|
||||
Route::Calendar => {
|
||||
if auth_token.is_some() {
|
||||
html! {
|
||||
<CalendarView
|
||||
user_info={user_info}
|
||||
html! {
|
||||
<CalendarView
|
||||
user_info={user_info}
|
||||
on_event_context_menu={on_event_context_menu}
|
||||
on_calendar_context_menu={on_calendar_context_menu}
|
||||
view={view}
|
||||
on_create_event_request={on_create_event_request}
|
||||
on_event_update_request={on_event_update_request}
|
||||
context_menus_open={context_menus_open}
|
||||
/>
|
||||
/>
|
||||
}
|
||||
} else {
|
||||
html! { <Redirect<Route> to={Route::Login}/> }
|
||||
@@ -106,192 +116,36 @@ pub struct CalendarViewProps {
|
||||
#[prop_or_default]
|
||||
pub on_create_event_request: Option<Callback<crate::components::EventCreationData>>,
|
||||
#[prop_or_default]
|
||||
pub on_event_update_request: Option<Callback<(VEvent, chrono::NaiveDateTime, chrono::NaiveDateTime, bool, Option<chrono::DateTime<chrono::Utc>>, Option<String>, Option<String>)>>,
|
||||
pub on_event_update_request: Option<
|
||||
Callback<(
|
||||
VEvent,
|
||||
chrono::NaiveDateTime,
|
||||
chrono::NaiveDateTime,
|
||||
bool,
|
||||
Option<chrono::DateTime<chrono::Utc>>,
|
||||
Option<String>,
|
||||
Option<String>,
|
||||
)>,
|
||||
>,
|
||||
#[prop_or_default]
|
||||
pub context_menus_open: bool,
|
||||
}
|
||||
|
||||
use gloo_storage::{LocalStorage, Storage};
|
||||
use crate::services::CalendarService;
|
||||
use crate::components::Calendar;
|
||||
use std::collections::HashMap;
|
||||
use chrono::{Local, NaiveDate, Datelike};
|
||||
|
||||
#[function_component(CalendarView)]
|
||||
pub fn calendar_view(props: &CalendarViewProps) -> Html {
|
||||
let events = use_state(|| HashMap::<NaiveDate, Vec<VEvent>>::new());
|
||||
let loading = use_state(|| true);
|
||||
let error = use_state(|| None::<String>);
|
||||
let refreshing_event = use_state(|| None::<String>);
|
||||
|
||||
let auth_token: Option<String> = LocalStorage::get("auth_token").ok();
|
||||
|
||||
|
||||
let today = Local::now().date_naive();
|
||||
let current_year = today.year();
|
||||
let current_month = today.month();
|
||||
|
||||
let on_event_click = {
|
||||
let events = events.clone();
|
||||
let refreshing_event = refreshing_event.clone();
|
||||
let auth_token = auth_token.clone();
|
||||
|
||||
Callback::from(move |event: VEvent| {
|
||||
if let Some(token) = auth_token.clone() {
|
||||
let events = events.clone();
|
||||
let refreshing_event = refreshing_event.clone();
|
||||
let uid = event.uid.clone();
|
||||
|
||||
refreshing_event.set(Some(uid.clone()));
|
||||
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
let calendar_service = CalendarService::new();
|
||||
|
||||
let password = if let Ok(credentials_str) = LocalStorage::get::<String>("caldav_credentials") {
|
||||
if let Ok(credentials) = serde_json::from_str::<serde_json::Value>(&credentials_str) {
|
||||
credentials["password"].as_str().unwrap_or("").to_string()
|
||||
} else {
|
||||
String::new()
|
||||
}
|
||||
} else {
|
||||
String::new()
|
||||
};
|
||||
|
||||
match calendar_service.refresh_event(&token, &password, &uid).await {
|
||||
Ok(Some(refreshed_event)) => {
|
||||
let refreshed_vevent = refreshed_event; // CalendarEvent is now VEvent
|
||||
let mut updated_events = (*events).clone();
|
||||
|
||||
for (_, day_events) in updated_events.iter_mut() {
|
||||
day_events.retain(|e| e.uid != uid);
|
||||
}
|
||||
|
||||
if refreshed_vevent.rrule.is_some() {
|
||||
let new_occurrences = CalendarService::expand_recurring_events(vec![refreshed_vevent.clone()]);
|
||||
|
||||
for occurrence in new_occurrences {
|
||||
let date = occurrence.get_date();
|
||||
updated_events.entry(date)
|
||||
.or_insert_with(Vec::new)
|
||||
.push(occurrence);
|
||||
}
|
||||
} else {
|
||||
let date = refreshed_vevent.get_date();
|
||||
updated_events.entry(date)
|
||||
.or_insert_with(Vec::new)
|
||||
.push(refreshed_vevent);
|
||||
}
|
||||
|
||||
events.set(updated_events);
|
||||
}
|
||||
Ok(None) => {
|
||||
let mut updated_events = (*events).clone();
|
||||
for (_, day_events) in updated_events.iter_mut() {
|
||||
day_events.retain(|e| e.uid != uid);
|
||||
}
|
||||
events.set(updated_events);
|
||||
}
|
||||
Err(_err) => {
|
||||
}
|
||||
}
|
||||
|
||||
refreshing_event.set(None);
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
{
|
||||
let events = events.clone();
|
||||
let loading = loading.clone();
|
||||
let error = error.clone();
|
||||
let auth_token = auth_token.clone();
|
||||
|
||||
use_effect_with((), move |_| {
|
||||
if let Some(token) = auth_token {
|
||||
let events = events.clone();
|
||||
let loading = loading.clone();
|
||||
let error = error.clone();
|
||||
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
let calendar_service = CalendarService::new();
|
||||
|
||||
let password = if let Ok(credentials_str) = LocalStorage::get::<String>("caldav_credentials") {
|
||||
if let Ok(credentials) = serde_json::from_str::<serde_json::Value>(&credentials_str) {
|
||||
credentials["password"].as_str().unwrap_or("").to_string()
|
||||
} else {
|
||||
String::new()
|
||||
}
|
||||
} else {
|
||||
String::new()
|
||||
};
|
||||
|
||||
match calendar_service.fetch_events_for_month_vevent(&token, &password, current_year, current_month).await {
|
||||
Ok(vevents) => {
|
||||
let grouped_events = CalendarService::group_events_by_date(vevents);
|
||||
events.set(grouped_events);
|
||||
loading.set(false);
|
||||
}
|
||||
Err(err) => {
|
||||
error.set(Some(format!("Failed to load events: {}", err)));
|
||||
loading.set(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
loading.set(false);
|
||||
error.set(Some("No authentication token found".to_string()));
|
||||
}
|
||||
|
||||
|| ()
|
||||
});
|
||||
}
|
||||
|
||||
html! {
|
||||
<div class="calendar-view">
|
||||
{
|
||||
if *loading {
|
||||
html! {
|
||||
<div class="calendar-loading">
|
||||
<p>{"Loading calendar events..."}</p>
|
||||
</div>
|
||||
}
|
||||
} else if let Some(err) = (*error).clone() {
|
||||
let dummy_callback = Callback::from(|_: VEvent| {});
|
||||
html! {
|
||||
<div class="calendar-error">
|
||||
<p>{format!("Error: {}", err)}</p>
|
||||
<Calendar
|
||||
events={HashMap::new()}
|
||||
on_event_click={dummy_callback}
|
||||
refreshing_event_uid={(*refreshing_event).clone()}
|
||||
user_info={props.user_info.clone()}
|
||||
on_event_context_menu={props.on_event_context_menu.clone()}
|
||||
on_calendar_context_menu={props.on_calendar_context_menu.clone()}
|
||||
view={props.view.clone()}
|
||||
on_create_event_request={props.on_create_event_request.clone()}
|
||||
on_event_update_request={props.on_event_update_request.clone()}
|
||||
context_menus_open={props.context_menus_open}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
html! {
|
||||
<Calendar
|
||||
events={(*events).clone()}
|
||||
on_event_click={on_event_click}
|
||||
refreshing_event_uid={(*refreshing_event).clone()}
|
||||
user_info={props.user_info.clone()}
|
||||
on_event_context_menu={props.on_event_context_menu.clone()}
|
||||
on_calendar_context_menu={props.on_calendar_context_menu.clone()}
|
||||
view={props.view.clone()}
|
||||
on_create_event_request={props.on_create_event_request.clone()}
|
||||
on_event_update_request={props.on_event_update_request.clone()}
|
||||
context_menus_open={props.context_menus_open}
|
||||
/>
|
||||
}
|
||||
}
|
||||
}
|
||||
<Calendar
|
||||
user_info={props.user_info.clone()}
|
||||
on_event_context_menu={props.on_event_context_menu.clone()}
|
||||
on_calendar_context_menu={props.on_calendar_context_menu.clone()}
|
||||
view={props.view.clone()}
|
||||
on_create_event_request={props.on_create_event_request.clone()}
|
||||
on_event_update_request={props.on_event_update_request.clone()}
|
||||
context_menus_open={props.context_menus_open}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
use crate::components::CalendarListItem;
|
||||
use crate::services::calendar_service::UserInfo;
|
||||
use web_sys::HtmlSelectElement;
|
||||
use yew::prelude::*;
|
||||
use yew_router::prelude::*;
|
||||
use web_sys::HtmlSelectElement;
|
||||
use crate::services::calendar_service::UserInfo;
|
||||
use crate::components::CalendarListItem;
|
||||
|
||||
#[derive(Clone, Routable, PartialEq)]
|
||||
pub enum Route {
|
||||
@@ -33,12 +33,11 @@ pub enum Theme {
|
||||
}
|
||||
|
||||
impl Theme {
|
||||
|
||||
pub fn value(&self) -> &'static str {
|
||||
match self {
|
||||
Theme::Default => "default",
|
||||
Theme::Ocean => "ocean",
|
||||
Theme::Forest => "forest",
|
||||
Theme::Forest => "forest",
|
||||
Theme::Sunset => "sunset",
|
||||
Theme::Purple => "purple",
|
||||
Theme::Dark => "dark",
|
||||
@@ -46,7 +45,7 @@ impl Theme {
|
||||
Theme::Mint => "mint",
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
pub fn from_value(value: &str) -> Self {
|
||||
match value {
|
||||
"ocean" => Theme::Ocean,
|
||||
@@ -167,14 +166,14 @@ pub fn sidebar(props: &SidebarProps) -> Html {
|
||||
<button onclick={props.on_create_calendar.reform(|_| ())} class="create-calendar-button">
|
||||
{"+ Create Calendar"}
|
||||
</button>
|
||||
|
||||
|
||||
<div class="view-selector">
|
||||
<select class="view-selector-dropdown" onchange={on_view_change}>
|
||||
<option value="month" selected={matches!(props.current_view, ViewMode::Month)}>{"Month"}</option>
|
||||
<option value="week" selected={matches!(props.current_view, ViewMode::Week)}>{"Week"}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="theme-selector">
|
||||
<select class="theme-selector-dropdown" onchange={on_theme_change}>
|
||||
<option value="default" selected={matches!(props.current_theme, Theme::Default)}>{"Default"}</option>
|
||||
@@ -187,9 +186,9 @@ pub fn sidebar(props: &SidebarProps) -> Html {
|
||||
<option value="mint" selected={matches!(props.current_theme, Theme::Mint)}>{"Mint"}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<button onclick={props.on_logout.reform(|_| ())} class="logout-button">{"Logout"}</button>
|
||||
</div>
|
||||
</aside>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
use yew::prelude::*;
|
||||
use chrono::{Datelike, NaiveDate, Duration, Weekday, Local, Timelike, NaiveDateTime, NaiveTime};
|
||||
use crate::components::{EventCreationData, RecurringEditAction, RecurringEditModal};
|
||||
use crate::models::ical::VEvent;
|
||||
use crate::services::calendar_service::UserInfo;
|
||||
use chrono::{Datelike, Duration, Local, NaiveDate, NaiveDateTime, NaiveTime, Timelike, Weekday};
|
||||
use std::collections::HashMap;
|
||||
use web_sys::MouseEvent;
|
||||
use crate::services::calendar_service::UserInfo;
|
||||
use crate::models::ical::VEvent;
|
||||
use crate::components::{RecurringEditModal, RecurringEditAction, EventCreationData};
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct WeekViewProps {
|
||||
@@ -25,7 +25,17 @@ pub struct WeekViewProps {
|
||||
#[prop_or_default]
|
||||
pub on_create_event_request: Option<Callback<EventCreationData>>,
|
||||
#[prop_or_default]
|
||||
pub on_event_update: Option<Callback<(VEvent, NaiveDateTime, NaiveDateTime, bool, Option<chrono::DateTime<chrono::Utc>>, Option<String>, Option<String>)>>,
|
||||
pub on_event_update: Option<
|
||||
Callback<(
|
||||
VEvent,
|
||||
NaiveDateTime,
|
||||
NaiveDateTime,
|
||||
bool,
|
||||
Option<chrono::DateTime<chrono::Utc>>,
|
||||
Option<String>,
|
||||
Option<String>,
|
||||
)>,
|
||||
>,
|
||||
#[prop_or_default]
|
||||
pub context_menus_open: bool,
|
||||
#[prop_or_default]
|
||||
@@ -47,20 +57,18 @@ struct DragState {
|
||||
start_date: NaiveDate,
|
||||
start_y: f64,
|
||||
current_y: f64,
|
||||
offset_y: f64, // For event moves, this is the offset from the event's top
|
||||
offset_y: f64, // For event moves, this is the offset from the event's top
|
||||
has_moved: bool, // Track if we've moved enough to constitute a real drag
|
||||
}
|
||||
|
||||
#[function_component(WeekView)]
|
||||
pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
let start_of_week = get_start_of_week(props.current_date);
|
||||
let week_days: Vec<NaiveDate> = (0..7)
|
||||
.map(|i| start_of_week + Duration::days(i))
|
||||
.collect();
|
||||
let week_days: Vec<NaiveDate> = (0..7).map(|i| start_of_week + Duration::days(i)).collect();
|
||||
|
||||
// Drag state for event creation
|
||||
let drag_state = use_state(|| None::<DragState>);
|
||||
|
||||
|
||||
// State for recurring event edit modal
|
||||
#[derive(Clone, PartialEq)]
|
||||
struct PendingRecurringEdit {
|
||||
@@ -68,15 +76,18 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
new_start: NaiveDateTime,
|
||||
new_end: NaiveDateTime,
|
||||
}
|
||||
|
||||
|
||||
let pending_recurring_edit = use_state(|| None::<PendingRecurringEdit>);
|
||||
|
||||
// Helper function to get calendar color for an event
|
||||
let get_event_color = |event: &VEvent| -> String {
|
||||
if let Some(user_info) = &props.user_info {
|
||||
if let Some(calendar_path) = &event.calendar_path {
|
||||
if let Some(calendar) = user_info.calendars.iter()
|
||||
.find(|cal| &cal.path == calendar_path) {
|
||||
if let Some(calendar) = user_info
|
||||
.calendars
|
||||
.iter()
|
||||
.find(|cal| &cal.path == calendar_path)
|
||||
{
|
||||
return calendar.color.clone();
|
||||
}
|
||||
}
|
||||
@@ -85,21 +96,22 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
};
|
||||
|
||||
// Generate time labels - 24 hours plus the final midnight boundary
|
||||
let mut time_labels: Vec<String> = (0..24).map(|hour| {
|
||||
if hour == 0 {
|
||||
"12 AM".to_string()
|
||||
} else if hour < 12 {
|
||||
format!("{} AM", hour)
|
||||
} else if hour == 12 {
|
||||
"12 PM".to_string()
|
||||
} else {
|
||||
format!("{} PM", hour - 12)
|
||||
}
|
||||
}).collect();
|
||||
|
||||
let mut time_labels: Vec<String> = (0..24)
|
||||
.map(|hour| {
|
||||
if hour == 0 {
|
||||
"12 AM".to_string()
|
||||
} else if hour < 12 {
|
||||
format!("{} AM", hour)
|
||||
} else if hour == 12 {
|
||||
"12 PM".to_string()
|
||||
} else {
|
||||
format!("{} PM", hour - 12)
|
||||
}
|
||||
})
|
||||
.collect();
|
||||
|
||||
// Add the final midnight boundary to show where the day ends
|
||||
time_labels.push("12 AM".to_string());
|
||||
|
||||
|
||||
// Handlers for recurring event modification modal
|
||||
let on_recurring_choice = {
|
||||
@@ -135,35 +147,35 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
if let Some(update_callback) = &on_event_update {
|
||||
// Extract occurrence date for backend processing
|
||||
let occurrence_date = edit.event.dtstart.format("%Y-%m-%d").to_string();
|
||||
|
||||
|
||||
// Send single request to backend with "this_only" scope
|
||||
// Backend will atomically:
|
||||
// 1. Add EXDATE to original series (excludes this occurrence)
|
||||
// 2. Create exception event with RECURRENCE-ID and user's modifications
|
||||
update_callback.emit((
|
||||
edit.event.clone(), // Original event (series to modify)
|
||||
edit.new_start, // Dragged start time for exception
|
||||
edit.new_end, // Dragged end time for exception
|
||||
true, // preserve_rrule = true
|
||||
None, // No until_date for this_only
|
||||
edit.event.clone(), // Original event (series to modify)
|
||||
edit.new_start, // Dragged start time for exception
|
||||
edit.new_end, // Dragged end time for exception
|
||||
true, // preserve_rrule = true
|
||||
None, // No until_date for this_only
|
||||
Some("this_only".to_string()), // Update scope
|
||||
Some(occurrence_date) // Date of occurrence being modified
|
||||
Some(occurrence_date), // Date of occurrence being modified
|
||||
));
|
||||
}
|
||||
},
|
||||
}
|
||||
RecurringEditAction::FutureEvents => {
|
||||
// RFC 5545 Compliant Series Splitting: "This and Future Events"
|
||||
//
|
||||
//
|
||||
// When a user chooses to modify "this and future events" for a recurring series,
|
||||
// we implement a series split operation that:
|
||||
//
|
||||
// 1. **Terminates Original Series**: The existing series is updated with an UNTIL
|
||||
//
|
||||
// 1. **Terminates Original Series**: The existing series is updated with an UNTIL
|
||||
// clause to stop before the occurrence being modified
|
||||
// 2. **Creates New Series**: A new recurring series is created starting from the
|
||||
// 2. **Creates New Series**: A new recurring series is created starting from the
|
||||
// occurrence date with the user's modifications (new time, title, etc.)
|
||||
//
|
||||
// Example: User drags Aug 22 occurrence of "Daily 9AM meeting" to 2PM:
|
||||
// - Original: "Daily 9AM meeting" → ends Aug 21 (UNTIL=Aug22T000000Z)
|
||||
// - Original: "Daily 9AM meeting" → ends Aug 21 (UNTIL=Aug22T000000Z)
|
||||
// - New: "Daily 2PM meeting" → starts Aug 22, continues indefinitely
|
||||
//
|
||||
// This approach ensures:
|
||||
@@ -177,7 +189,8 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
if let Some(update_callback) = &on_event_update {
|
||||
// Find the original series event (not the occurrence)
|
||||
// UIDs like "uuid-timestamp" need to split on the last hyphen, not the first
|
||||
let base_uid = if let Some(last_hyphen_pos) = edit.event.uid.rfind('-') {
|
||||
let base_uid = if let Some(last_hyphen_pos) = edit.event.uid.rfind('-')
|
||||
{
|
||||
let suffix = &edit.event.uid[last_hyphen_pos + 1..];
|
||||
// Check if suffix is numeric (timestamp), if so remove it
|
||||
if suffix.chars().all(|c| c.is_numeric()) {
|
||||
@@ -188,9 +201,15 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
} else {
|
||||
edit.event.uid.clone()
|
||||
};
|
||||
|
||||
web_sys::console::log_1(&format!("🔍 Looking for original series: '{}' from occurrence: '{}'", base_uid, edit.event.uid).into());
|
||||
|
||||
|
||||
web_sys::console::log_1(
|
||||
&format!(
|
||||
"🔍 Looking for original series: '{}' from occurrence: '{}'",
|
||||
base_uid, edit.event.uid
|
||||
)
|
||||
.into(),
|
||||
);
|
||||
|
||||
// Find the original series event by searching for the base UID
|
||||
let mut original_series = None;
|
||||
for events_list in events.values() {
|
||||
@@ -204,12 +223,15 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let original_series = match original_series {
|
||||
Some(series) => {
|
||||
web_sys::console::log_1(&format!("✅ Found original series: '{}'", series.uid).into());
|
||||
web_sys::console::log_1(
|
||||
&format!("✅ Found original series: '{}'", series.uid)
|
||||
.into(),
|
||||
);
|
||||
series
|
||||
},
|
||||
}
|
||||
None => {
|
||||
web_sys::console::log_1(&format!("⚠️ Could not find original series '{}', using occurrence but fixing UID", base_uid).into());
|
||||
let mut fallback_event = edit.event.clone();
|
||||
@@ -218,55 +240,69 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
fallback_event
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Calculate the day before this occurrence for UNTIL clause
|
||||
let until_date = edit.event.dtstart.date_naive() - chrono::Duration::days(1);
|
||||
let until_datetime = until_date.and_time(chrono::NaiveTime::from_hms_opt(23, 59, 59).unwrap());
|
||||
let until_utc = chrono::DateTime::<chrono::Utc>::from_naive_utc_and_offset(until_datetime, chrono::Utc);
|
||||
|
||||
let until_date =
|
||||
edit.event.dtstart.date_naive() - chrono::Duration::days(1);
|
||||
let until_datetime = until_date
|
||||
.and_time(chrono::NaiveTime::from_hms_opt(23, 59, 59).unwrap());
|
||||
let until_utc =
|
||||
chrono::DateTime::<chrono::Utc>::from_naive_utc_and_offset(
|
||||
until_datetime,
|
||||
chrono::Utc,
|
||||
);
|
||||
|
||||
web_sys::console::log_1(&format!("🔄 Will set UNTIL {} for original series to end before occurrence {}",
|
||||
until_utc.format("%Y-%m-%d %H:%M:%S UTC"),
|
||||
edit.event.dtstart.format("%Y-%m-%d %H:%M:%S UTC")).into());
|
||||
|
||||
|
||||
// Critical: Use the dragged times (new_start/new_end) not the original series times
|
||||
// This ensures the new series reflects the user's drag operation
|
||||
let new_start = edit.new_start; // The dragged start time
|
||||
let new_start = edit.new_start; // The dragged start time
|
||||
let new_end = edit.new_end; // The dragged end time
|
||||
|
||||
|
||||
// Extract occurrence date from the dragged event for backend processing
|
||||
// Format: YYYY-MM-DD (e.g., "2025-08-22")
|
||||
// This tells the backend which specific occurrence is being modified
|
||||
let occurrence_date = edit.event.dtstart.format("%Y-%m-%d").to_string();
|
||||
|
||||
|
||||
// Send single request to backend with "this_and_future" scope
|
||||
// Backend will atomically:
|
||||
// 1. Add UNTIL clause to original series (stops before occurrence_date)
|
||||
// 2. Create new series starting from occurrence_date with dragged times
|
||||
update_callback.emit((
|
||||
original_series, // Original event to terminate
|
||||
new_start, // Dragged start time for new series
|
||||
new_end, // Dragged end time for new series
|
||||
true, // preserve_rrule = true
|
||||
Some(until_utc), // UNTIL date for original series
|
||||
original_series, // Original event to terminate
|
||||
new_start, // Dragged start time for new series
|
||||
new_end, // Dragged end time for new series
|
||||
true, // preserve_rrule = true
|
||||
Some(until_utc), // UNTIL date for original series
|
||||
Some("this_and_future".to_string()), // Update scope
|
||||
Some(occurrence_date) // Date of occurrence being modified
|
||||
Some(occurrence_date), // Date of occurrence being modified
|
||||
));
|
||||
}
|
||||
},
|
||||
}
|
||||
RecurringEditAction::AllEvents => {
|
||||
// Modify the entire series
|
||||
let series_event = edit.event.clone();
|
||||
|
||||
|
||||
if let Some(callback) = &on_event_update {
|
||||
callback.emit((series_event, edit.new_start, edit.new_end, true, None, Some("all_in_series".to_string()), None)); // Regular drag operation - preserve RRULE, update_scope = all_in_series
|
||||
callback.emit((
|
||||
series_event,
|
||||
edit.new_start,
|
||||
edit.new_end,
|
||||
true,
|
||||
None,
|
||||
Some("all_in_series".to_string()),
|
||||
None,
|
||||
)); // Regular drag operation - preserve RRULE, update_scope = all_in_series
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
pending_recurring_edit.set(None);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let on_recurring_cancel = {
|
||||
let pending_recurring_edit = pending_recurring_edit.clone();
|
||||
Callback::from(move |_| {
|
||||
@@ -283,7 +319,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
week_days.iter().map(|date| {
|
||||
let is_today = *date == props.today;
|
||||
let weekday_name = get_weekday_name(date.weekday());
|
||||
|
||||
|
||||
html! {
|
||||
<div class={classes!("week-day-header", if is_today { Some("today") } else { None })}>
|
||||
<div class="weekday-name">{weekday_name}</div>
|
||||
@@ -293,7 +329,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
// Scrollable content area with time grid
|
||||
<div class="week-content">
|
||||
<div class="time-grid">
|
||||
@@ -310,18 +346,18 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
// Day columns
|
||||
<div class="week-days-grid">
|
||||
{
|
||||
week_days.iter().enumerate().map(|(_column_index, date)| {
|
||||
let is_today = *date == props.today;
|
||||
let day_events = props.events.get(date).cloned().unwrap_or_default();
|
||||
|
||||
|
||||
// Drag event handlers
|
||||
let drag_state_clone = drag_state.clone();
|
||||
let date_for_drag = *date;
|
||||
|
||||
|
||||
let onmousedown = {
|
||||
let drag_state = drag_state_clone.clone();
|
||||
let context_menus_open = props.context_menus_open;
|
||||
@@ -331,20 +367,20 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
if context_menus_open {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Only handle left-click (button 0)
|
||||
if e.button() != 0 {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Calculate Y position relative to day column container
|
||||
// Use layer_y which gives coordinates relative to positioned ancestor
|
||||
let relative_y = e.layer_y() as f64;
|
||||
let relative_y = if relative_y > 0.0 { relative_y } else { e.offset_y() as f64 };
|
||||
|
||||
|
||||
// Snap to increment
|
||||
let snapped_y = snap_to_increment(relative_y, time_increment);
|
||||
|
||||
|
||||
drag_state.set(Some(DragState {
|
||||
is_dragging: true,
|
||||
drag_type: DragType::CreateEvent,
|
||||
@@ -357,7 +393,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
e.prevent_default();
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let onmousemove = {
|
||||
let drag_state = drag_state_clone.clone();
|
||||
let time_increment = props.time_increment;
|
||||
@@ -367,27 +403,27 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
// Use layer_y for consistent coordinate calculation
|
||||
let mouse_y = e.layer_y() as f64;
|
||||
let mouse_y = if mouse_y > 0.0 { mouse_y } else { e.offset_y() as f64 };
|
||||
|
||||
|
||||
// For move operations, we now follow the mouse directly since we start at click position
|
||||
// For resize operations, we still use the mouse position directly
|
||||
let adjusted_y = mouse_y;
|
||||
|
||||
|
||||
// Snap to increment
|
||||
let snapped_y = snap_to_increment(adjusted_y, time_increment);
|
||||
|
||||
|
||||
// Check if we've moved enough to constitute a real drag (5 pixels minimum)
|
||||
let movement_distance = (snapped_y - current_drag.start_y).abs();
|
||||
if movement_distance > 5.0 {
|
||||
current_drag.has_moved = true;
|
||||
}
|
||||
|
||||
|
||||
current_drag.current_y = snapped_y;
|
||||
drag_state.set(Some(current_drag));
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let onmouseup = {
|
||||
let drag_state = drag_state_clone.clone();
|
||||
let on_create_event = props.on_create_event.clone();
|
||||
@@ -402,24 +438,24 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
// Calculate start and end times
|
||||
let start_time = pixels_to_time(current_drag.start_y);
|
||||
let end_time = pixels_to_time(current_drag.current_y);
|
||||
|
||||
|
||||
// Ensure start is before end
|
||||
let (actual_start, actual_end) = if start_time <= end_time {
|
||||
(start_time, end_time)
|
||||
} else {
|
||||
(end_time, start_time)
|
||||
};
|
||||
|
||||
|
||||
// Ensure minimum duration (15 minutes)
|
||||
let actual_end = if actual_end.signed_duration_since(actual_start).num_minutes() < 15 {
|
||||
actual_start + chrono::Duration::minutes(15)
|
||||
} else {
|
||||
actual_end
|
||||
};
|
||||
|
||||
|
||||
let start_datetime = NaiveDateTime::new(current_drag.start_date, actual_start);
|
||||
let end_datetime = NaiveDateTime::new(current_drag.start_date, actual_end);
|
||||
|
||||
|
||||
if let Some(callback) = &on_create_event {
|
||||
callback.emit((current_drag.start_date, start_datetime, end_datetime));
|
||||
}
|
||||
@@ -430,17 +466,17 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
// Snap the final position to maintain time increment alignment
|
||||
let event_top_position = snap_to_increment(unsnapped_position, time_increment);
|
||||
let new_start_time = pixels_to_time(event_top_position);
|
||||
|
||||
|
||||
// Calculate duration from original event
|
||||
let original_duration = if let Some(end) = event.dtend {
|
||||
end.signed_duration_since(event.dtstart)
|
||||
} else {
|
||||
chrono::Duration::hours(1) // Default 1 hour
|
||||
};
|
||||
|
||||
|
||||
let new_start_datetime = NaiveDateTime::new(current_drag.start_date, new_start_time);
|
||||
let new_end_datetime = new_start_datetime + original_duration;
|
||||
|
||||
|
||||
// Check if this is a recurring event
|
||||
if event.rrule.is_some() {
|
||||
// Show modal for recurring event modification
|
||||
@@ -459,7 +495,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
DragType::ResizeEventStart(event) => {
|
||||
// Calculate new start time based on drag position
|
||||
let new_start_time = pixels_to_time(current_drag.current_y);
|
||||
|
||||
|
||||
// Keep the original end time
|
||||
let original_end = if let Some(end) = event.dtend {
|
||||
end.with_timezone(&chrono::Local).naive_local()
|
||||
@@ -467,16 +503,16 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
// If no end time, use start time + 1 hour as default
|
||||
event.dtstart.with_timezone(&chrono::Local).naive_local() + chrono::Duration::hours(1)
|
||||
};
|
||||
|
||||
|
||||
let new_start_datetime = NaiveDateTime::new(current_drag.start_date, new_start_time);
|
||||
|
||||
|
||||
// Ensure start is before end (minimum 15 minutes)
|
||||
let new_end_datetime = if new_start_datetime >= original_end {
|
||||
new_start_datetime + chrono::Duration::minutes(15)
|
||||
} else {
|
||||
original_end
|
||||
};
|
||||
|
||||
|
||||
// Check if this is a recurring event
|
||||
if event.rrule.is_some() {
|
||||
// Show modal for recurring event modification
|
||||
@@ -495,19 +531,19 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
DragType::ResizeEventEnd(event) => {
|
||||
// Calculate new end time based on drag position
|
||||
let new_end_time = pixels_to_time(current_drag.current_y);
|
||||
|
||||
|
||||
// Keep the original start time
|
||||
let original_start = event.dtstart.with_timezone(&chrono::Local).naive_local();
|
||||
|
||||
|
||||
let new_end_datetime = NaiveDateTime::new(current_drag.start_date, new_end_time);
|
||||
|
||||
|
||||
// Ensure end is after start (minimum 15 minutes)
|
||||
let new_start_datetime = if new_end_datetime <= original_start {
|
||||
new_end_datetime - chrono::Duration::minutes(15)
|
||||
} else {
|
||||
original_start
|
||||
};
|
||||
|
||||
|
||||
// Check if this is a recurring event
|
||||
if event.rrule.is_some() {
|
||||
// Show modal for recurring event modification
|
||||
@@ -524,15 +560,15 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
drag_state.set(None);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
html! {
|
||||
<div
|
||||
<div
|
||||
class={classes!("week-day-column", if is_today { Some("today") } else { None })}
|
||||
{onmousedown}
|
||||
{onmousemove}
|
||||
@@ -554,21 +590,21 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
<div class="time-slot-half"></div>
|
||||
<div class="time-slot-half"></div>
|
||||
</div>
|
||||
|
||||
|
||||
// Events positioned absolutely based on their actual times
|
||||
<div class="events-container">
|
||||
{
|
||||
day_events.iter().filter_map(|event| {
|
||||
let (start_pixels, duration_pixels, is_all_day) = calculate_event_position(event, *date);
|
||||
|
||||
|
||||
// Skip events that don't belong on this date or have invalid positioning
|
||||
if start_pixels == 0.0 && duration_pixels == 0.0 && !is_all_day {
|
||||
return None;
|
||||
}
|
||||
|
||||
|
||||
let event_color = get_event_color(event);
|
||||
let is_refreshing = props.refreshing_event_uid.as_ref() == Some(&event.uid);
|
||||
|
||||
|
||||
let onclick = {
|
||||
let on_event_click = props.on_event_click.clone();
|
||||
let event = event.clone();
|
||||
@@ -577,7 +613,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
on_event_click.emit(event.clone());
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let onmousedown_event = {
|
||||
let drag_state = drag_state.clone();
|
||||
let event_for_drag = event.clone();
|
||||
@@ -585,27 +621,27 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
let _time_increment = props.time_increment;
|
||||
Callback::from(move |e: MouseEvent| {
|
||||
e.stop_propagation(); // Prevent drag-to-create from starting on event clicks
|
||||
|
||||
|
||||
// Only handle left-click (button 0) for moving
|
||||
if e.button() != 0 {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Calculate click position relative to event element
|
||||
let click_y_relative = e.layer_y() as f64;
|
||||
let click_y_relative = if click_y_relative > 0.0 { click_y_relative } else { e.offset_y() as f64 };
|
||||
|
||||
|
||||
// Get event's current position in day column coordinates
|
||||
let (event_start_pixels, _, _) = calculate_event_position(&event_for_drag, date_for_drag);
|
||||
let event_start_pixels = event_start_pixels as f64;
|
||||
|
||||
|
||||
// Convert click position to day column coordinates
|
||||
let click_y = event_start_pixels + click_y_relative;
|
||||
|
||||
|
||||
// Store the offset from the event's top where the user clicked
|
||||
// This will be used to maintain the relative click position
|
||||
let offset_y = click_y_relative;
|
||||
|
||||
|
||||
// Start drag tracking from where we clicked (in day column coordinates)
|
||||
drag_state.set(Some(DragState {
|
||||
is_dragging: true,
|
||||
@@ -619,7 +655,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
e.prevent_default();
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let oncontextmenu = {
|
||||
if let Some(callback) = &props.on_event_context_menu {
|
||||
let callback = callback.clone();
|
||||
@@ -633,7 +669,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
e.prevent_default();
|
||||
e.stop_propagation(); // Prevent calendar context menu from also triggering
|
||||
callback.emit((e, event.clone()));
|
||||
@@ -642,7 +678,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
None
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Format time display for the event
|
||||
let time_display = if event.all_day {
|
||||
"All Day".to_string()
|
||||
@@ -650,20 +686,20 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
let local_start = event.dtstart.with_timezone(&Local);
|
||||
if let Some(end) = event.dtend {
|
||||
let local_end = end.with_timezone(&Local);
|
||||
|
||||
|
||||
// Check if both times are in same AM/PM period to avoid redundancy
|
||||
let start_is_am = local_start.hour() < 12;
|
||||
let end_is_am = local_end.hour() < 12;
|
||||
|
||||
|
||||
if start_is_am == end_is_am {
|
||||
// Same AM/PM period - show "9:00 - 10:30 AM"
|
||||
format!("{} - {}",
|
||||
format!("{} - {}",
|
||||
local_start.format("%I:%M").to_string().trim_start_matches('0'),
|
||||
local_end.format("%I:%M %p")
|
||||
)
|
||||
} else {
|
||||
// Different AM/PM periods - show "9:00 AM - 2:30 PM"
|
||||
format!("{} - {}",
|
||||
format!("{} - {}",
|
||||
local_start.format("%I:%M %p"),
|
||||
local_end.format("%I:%M %p")
|
||||
)
|
||||
@@ -673,22 +709,22 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
format!("{}", local_start.format("%I:%M %p"))
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Check if this event is currently being dragged or resized
|
||||
let is_being_dragged = if let Some(drag) = (*drag_state).clone() {
|
||||
match &drag.drag_type {
|
||||
DragType::MoveEvent(dragged_event) =>
|
||||
DragType::MoveEvent(dragged_event) =>
|
||||
dragged_event.uid == event.uid && drag.is_dragging,
|
||||
DragType::ResizeEventStart(dragged_event) =>
|
||||
DragType::ResizeEventStart(dragged_event) =>
|
||||
dragged_event.uid == event.uid && drag.is_dragging,
|
||||
DragType::ResizeEventEnd(dragged_event) =>
|
||||
DragType::ResizeEventEnd(dragged_event) =>
|
||||
dragged_event.uid == event.uid && drag.is_dragging,
|
||||
_ => false,
|
||||
}
|
||||
} else {
|
||||
false
|
||||
};
|
||||
|
||||
|
||||
if is_being_dragged {
|
||||
// Hide the original event while being dragged
|
||||
Some(html! {})
|
||||
@@ -701,11 +737,11 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
let time_increment = props.time_increment;
|
||||
Callback::from(move |e: web_sys::MouseEvent| {
|
||||
e.stop_propagation();
|
||||
|
||||
|
||||
let relative_y = e.layer_y() as f64;
|
||||
let relative_y = if relative_y > 0.0 { relative_y } else { e.offset_y() as f64 };
|
||||
let snapped_y = snap_to_increment(relative_y, time_increment);
|
||||
|
||||
|
||||
drag_state.set(Some(DragState {
|
||||
is_dragging: true,
|
||||
drag_type: DragType::ResizeEventStart(event_for_resize.clone()),
|
||||
@@ -718,7 +754,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
e.prevent_default();
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let resize_end_handler = {
|
||||
let drag_state = drag_state.clone();
|
||||
let event_for_resize = event.clone();
|
||||
@@ -726,11 +762,11 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
let time_increment = props.time_increment;
|
||||
Callback::from(move |e: web_sys::MouseEvent| {
|
||||
e.stop_propagation();
|
||||
|
||||
|
||||
let relative_y = e.layer_y() as f64;
|
||||
let relative_y = if relative_y > 0.0 { relative_y } else { e.offset_y() as f64 };
|
||||
let snapped_y = snap_to_increment(relative_y, time_increment);
|
||||
|
||||
|
||||
drag_state.set(Some(DragState {
|
||||
is_dragging: true,
|
||||
drag_type: DragType::ResizeEventEnd(event_for_resize.clone()),
|
||||
@@ -743,18 +779,18 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
e.prevent_default();
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
Some(html! {
|
||||
<div
|
||||
<div
|
||||
class={classes!(
|
||||
"week-event",
|
||||
"week-event",
|
||||
if is_refreshing { Some("refreshing") } else { None },
|
||||
if is_all_day { Some("all-day") } else { None }
|
||||
)}
|
||||
style={format!(
|
||||
"background-color: {}; top: {}px; height: {}px;",
|
||||
event_color,
|
||||
start_pixels,
|
||||
"background-color: {}; top: {}px; height: {}px;",
|
||||
event_color,
|
||||
start_pixels,
|
||||
duration_pixels
|
||||
)}
|
||||
{onclick}
|
||||
@@ -764,7 +800,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
// Top resize handle
|
||||
{if !is_all_day {
|
||||
html! {
|
||||
<div
|
||||
<div
|
||||
class="resize-handle resize-handle-top"
|
||||
onmousedown={resize_start_handler}
|
||||
/>
|
||||
@@ -772,7 +808,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
} else {
|
||||
html! {}
|
||||
}}
|
||||
|
||||
|
||||
// Event content
|
||||
<div class="event-content">
|
||||
<div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div>
|
||||
@@ -782,11 +818,11 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
html! {}
|
||||
}}
|
||||
</div>
|
||||
|
||||
|
||||
// Bottom resize handle
|
||||
{if !is_all_day {
|
||||
html! {
|
||||
<div
|
||||
<div
|
||||
class="resize-handle resize-handle-bottom"
|
||||
onmousedown={resize_end_handler}
|
||||
/>
|
||||
@@ -800,7 +836,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
// Temporary event box during drag
|
||||
{
|
||||
if let Some(drag) = (*drag_state).clone() {
|
||||
@@ -810,11 +846,11 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
let start_y = drag.start_y.min(drag.current_y);
|
||||
let end_y = drag.start_y.max(drag.current_y);
|
||||
let height = (drag.current_y - drag.start_y).abs().max(20.0);
|
||||
|
||||
|
||||
// Convert pixels to times for display
|
||||
let start_time = pixels_to_time(start_y);
|
||||
let end_time = pixels_to_time(end_y);
|
||||
|
||||
|
||||
html! {
|
||||
<div
|
||||
class="temp-event-box"
|
||||
@@ -837,9 +873,9 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
};
|
||||
let duration_pixels = (original_duration.num_minutes() as f64).max(20.0);
|
||||
let new_end_time = new_start_time + original_duration;
|
||||
|
||||
|
||||
let event_color = get_event_color(event);
|
||||
|
||||
|
||||
html! {
|
||||
<div
|
||||
class="temp-event-box moving-event"
|
||||
@@ -858,17 +894,17 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
} else {
|
||||
event.dtstart.with_timezone(&chrono::Local).naive_local() + chrono::Duration::hours(1)
|
||||
};
|
||||
|
||||
|
||||
// Calculate positions for the preview
|
||||
let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date);
|
||||
let original_duration = original_end.signed_duration_since(event.dtstart.with_timezone(&chrono::Local).naive_local());
|
||||
let original_end_pixels = original_start_pixels + (original_duration.num_minutes() as f32);
|
||||
|
||||
|
||||
let new_start_pixels = drag.current_y;
|
||||
let new_height = (original_end_pixels as f64 - new_start_pixels).max(20.0);
|
||||
|
||||
|
||||
let event_color = get_event_color(event);
|
||||
|
||||
|
||||
html! {
|
||||
<div
|
||||
class="temp-event-box resizing-event"
|
||||
@@ -883,15 +919,15 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
// Show the event being resized from the end
|
||||
let new_end_time = pixels_to_time(drag.current_y);
|
||||
let original_start = event.dtstart.with_timezone(&chrono::Local).naive_local();
|
||||
|
||||
|
||||
// Calculate positions for the preview
|
||||
let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date);
|
||||
|
||||
|
||||
let new_end_pixels = drag.current_y;
|
||||
let new_height = (new_end_pixels - original_start_pixels as f64).max(20.0);
|
||||
|
||||
|
||||
let event_color = get_event_color(event);
|
||||
|
||||
|
||||
html! {
|
||||
<div
|
||||
class="temp-event-box resizing-event"
|
||||
@@ -917,10 +953,10 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
// Recurring event modification modal
|
||||
if let Some(edit) = (*pending_recurring_edit).clone() {
|
||||
<RecurringEditModal
|
||||
<RecurringEditModal
|
||||
show={true}
|
||||
event={edit.event}
|
||||
new_start={edit.new_start}
|
||||
@@ -975,46 +1011,44 @@ fn pixels_to_time(pixels: f64) -> NaiveTime {
|
||||
let total_minutes = pixels; // 1px = 1 minute
|
||||
let hours = (total_minutes / 60.0) as u32;
|
||||
let minutes = (total_minutes % 60.0) as u32;
|
||||
|
||||
|
||||
// Handle midnight boundary - if we're at exactly 1440 pixels (24:00), return midnight
|
||||
if total_minutes >= 1440.0 {
|
||||
return NaiveTime::from_hms_opt(0, 0, 0).unwrap();
|
||||
}
|
||||
|
||||
|
||||
// Clamp to valid time range for within-day times
|
||||
let hours = hours.min(23);
|
||||
let minutes = minutes.min(59);
|
||||
|
||||
|
||||
NaiveTime::from_hms_opt(hours, minutes, 0).unwrap_or(NaiveTime::from_hms_opt(0, 0, 0).unwrap())
|
||||
}
|
||||
|
||||
|
||||
fn calculate_event_position(event: &VEvent, date: NaiveDate) -> (f32, f32, bool) {
|
||||
// Convert UTC times to local time for display
|
||||
let local_start = event.dtstart.with_timezone(&Local);
|
||||
let event_date = local_start.date_naive();
|
||||
|
||||
|
||||
// Only position events that are on this specific date
|
||||
if event_date != date {
|
||||
return (0.0, 0.0, false); // Event not on this date
|
||||
}
|
||||
|
||||
|
||||
// Handle all-day events - they appear at the top
|
||||
if event.all_day {
|
||||
return (0.0, 30.0, true); // Position at top, 30px height, is_all_day = true
|
||||
}
|
||||
|
||||
|
||||
// Calculate start position in pixels from midnight
|
||||
let start_hour = local_start.hour() as f32;
|
||||
let start_minute = local_start.minute() as f32;
|
||||
let start_pixels = (start_hour + start_minute / 60.0) * 60.0; // 60px per hour
|
||||
|
||||
|
||||
|
||||
// Calculate duration and height
|
||||
let duration_pixels = if let Some(end) = event.dtend {
|
||||
let local_end = end.with_timezone(&Local);
|
||||
let end_date = local_end.date_naive();
|
||||
|
||||
|
||||
// Handle events that span multiple days by capping at midnight
|
||||
if end_date > date {
|
||||
// Event continues past midnight, cap at 24:00 (1440px)
|
||||
@@ -1028,6 +1062,6 @@ fn calculate_event_position(event: &VEvent, date: NaiveDate) -> (f32, f32, bool)
|
||||
} else {
|
||||
60.0 // Default 1 hour if no end time
|
||||
};
|
||||
|
||||
|
||||
(start_pixels, duration_pixels, false) // is_all_day = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
mod app;
|
||||
mod auth;
|
||||
mod components;
|
||||
@@ -9,4 +8,4 @@ use app::App;
|
||||
|
||||
fn main() {
|
||||
yew::Renderer::<App>::new().render();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// Re-export from shared calendar-models library for backward compatibility
|
||||
pub use calendar_models::*;
|
||||
pub use calendar_models::*;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// RFC 5545 Compliant iCalendar Models
|
||||
pub mod ical;
|
||||
|
||||
// Re-export commonly used types
|
||||
// pub use ical::VEvent;
|
||||
// Re-export commonly used types
|
||||
// pub use ical::VEvent;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,3 +1,3 @@
|
||||
pub mod calendar_service;
|
||||
|
||||
pub use calendar_service::CalendarService;
|
||||
pub use calendar_service::CalendarService;
|
||||
|
||||
Reference in New Issue
Block a user