Implement complete calendar creation functionality
Add full end-to-end calendar creation feature including: - Create Calendar button in sidebar footer - Modal form with name, description, and color picker (16 predefined colors in 4x4 grid) - Form validation and error handling with loading states - Backend API endpoint for calendar creation with authentication - CalDAV MKCALENDAR protocol implementation with proper XML generation - Real-time calendar list refresh after successful creation - Responsive design for mobile and desktop 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
84
src/app.rs
84
src/app.rs
@@ -1,7 +1,7 @@
|
||||
use yew::prelude::*;
|
||||
use yew_router::prelude::*;
|
||||
use gloo_storage::{LocalStorage, Storage};
|
||||
use crate::components::{Login, Calendar};
|
||||
use crate::components::{Login, Calendar, CreateCalendarModal};
|
||||
use crate::services::{CalendarService, CalendarEvent, UserInfo};
|
||||
use std::collections::HashMap;
|
||||
use chrono::{Local, NaiveDate, Datelike};
|
||||
@@ -24,6 +24,7 @@ pub fn App() -> Html {
|
||||
|
||||
let user_info = use_state(|| -> Option<UserInfo> { None });
|
||||
let color_picker_open = use_state(|| -> Option<String> { None }); // Store calendar path of open picker
|
||||
let create_modal_open = use_state(|| false);
|
||||
|
||||
// Available colors for calendar customization
|
||||
let available_colors = [
|
||||
@@ -113,6 +114,11 @@ pub fn App() -> Html {
|
||||
})
|
||||
};
|
||||
|
||||
// Clone variables needed for the modal outside of the conditional blocks
|
||||
let auth_token_for_modal = auth_token.clone();
|
||||
let user_info_for_modal = user_info.clone();
|
||||
let create_modal_open_for_modal = create_modal_open.clone();
|
||||
|
||||
html! {
|
||||
<BrowserRouter>
|
||||
<div class="app" onclick={on_outside_click}>
|
||||
@@ -148,7 +154,7 @@ pub fn App() -> Html {
|
||||
<ul>
|
||||
{
|
||||
info.calendars.iter().map(|cal| {
|
||||
let cal_clone = cal.clone();
|
||||
let _cal_clone = cal.clone();
|
||||
let color_picker_open_clone = color_picker_open.clone();
|
||||
|
||||
let on_color_click = {
|
||||
@@ -229,6 +235,12 @@ pub fn App() -> Html {
|
||||
}
|
||||
}
|
||||
<div class="sidebar-footer">
|
||||
<button onclick={Callback::from({
|
||||
let create_modal_open = create_modal_open.clone();
|
||||
move |_| create_modal_open.set(true)
|
||||
})} class="create-calendar-button">
|
||||
{"+ Create Calendar"}
|
||||
</button>
|
||||
<button onclick={on_logout} class="logout-button">{"Logout"}</button>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -299,6 +311,74 @@ pub fn App() -> Html {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<CreateCalendarModal
|
||||
is_open={*create_modal_open}
|
||||
on_close={Callback::from({
|
||||
let create_modal_open = create_modal_open_for_modal.clone();
|
||||
move |_| create_modal_open.set(false)
|
||||
})}
|
||||
on_create={Callback::from({
|
||||
let auth_token = auth_token_for_modal.clone();
|
||||
let user_info = user_info_for_modal.clone();
|
||||
let create_modal_open = create_modal_open_for_modal.clone();
|
||||
move |(name, description, color): (String, Option<String>, Option<String>)| {
|
||||
if let Some(token) = (*auth_token).clone() {
|
||||
let user_info = user_info.clone();
|
||||
let create_modal_open = create_modal_open.clone();
|
||||
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
let calendar_service = CalendarService::new();
|
||||
|
||||
// Get password from stored credentials
|
||||
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.create_calendar(&token, &password, name, description, color).await {
|
||||
Ok(_) => {
|
||||
web_sys::console::log_1(&"Calendar created successfully!".into());
|
||||
// Refresh user info to show the new calendar
|
||||
match calendar_service.fetch_user_info(&token, &password).await {
|
||||
Ok(mut info) => {
|
||||
// Load saved colors from local storage
|
||||
if let Ok(saved_colors_json) = LocalStorage::get::<String>("calendar_colors") {
|
||||
if let Ok(saved_info) = serde_json::from_str::<UserInfo>(&saved_colors_json) {
|
||||
for saved_cal in &saved_info.calendars {
|
||||
for cal in &mut info.calendars {
|
||||
if cal.path == saved_cal.path {
|
||||
cal.color = saved_cal.color.clone();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
user_info.set(Some(info));
|
||||
}
|
||||
Err(err) => {
|
||||
web_sys::console::log_1(&format!("Failed to refresh calendars: {}", err).into());
|
||||
}
|
||||
}
|
||||
create_modal_open.set(false);
|
||||
}
|
||||
Err(err) => {
|
||||
web_sys::console::log_1(&format!("Failed to create calendar: {}", err).into());
|
||||
// TODO: Show error to user
|
||||
create_modal_open.set(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})}
|
||||
available_colors={available_colors.iter().map(|c| c.to_string()).collect::<Vec<_>>()}
|
||||
/>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
}
|
||||
|
||||
196
src/components/create_calendar_modal.rs
Normal file
196
src/components/create_calendar_modal.rs
Normal file
@@ -0,0 +1,196 @@
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct CreateCalendarModalProps {
|
||||
pub is_open: bool,
|
||||
pub on_close: Callback<()>,
|
||||
pub on_create: Callback<(String, Option<String>, Option<String>)>, // name, description, color
|
||||
pub available_colors: Vec<String>,
|
||||
}
|
||||
|
||||
#[function_component]
|
||||
pub fn CreateCalendarModal(props: &CreateCalendarModalProps) -> Html {
|
||||
let calendar_name = use_state(|| String::new());
|
||||
let description = use_state(|| String::new());
|
||||
let selected_color = use_state(|| None::<String>);
|
||||
let error_message = use_state(|| None::<String>);
|
||||
let is_creating = use_state(|| false);
|
||||
|
||||
let on_name_change = {
|
||||
let calendar_name = calendar_name.clone();
|
||||
Callback::from(move |e: InputEvent| {
|
||||
let input: web_sys::HtmlInputElement = e.target_unchecked_into();
|
||||
calendar_name.set(input.value());
|
||||
})
|
||||
};
|
||||
|
||||
let on_description_change = {
|
||||
let description = description.clone();
|
||||
Callback::from(move |e: InputEvent| {
|
||||
let input: web_sys::HtmlTextAreaElement = e.target_unchecked_into();
|
||||
description.set(input.value());
|
||||
})
|
||||
};
|
||||
|
||||
let on_submit = {
|
||||
let calendar_name = calendar_name.clone();
|
||||
let description = description.clone();
|
||||
let selected_color = selected_color.clone();
|
||||
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()));
|
||||
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()));
|
||||
})
|
||||
};
|
||||
|
||||
let on_backdrop_click = {
|
||||
let on_close = props.on_close.clone();
|
||||
Callback::from(move |e: MouseEvent| {
|
||||
// Only close if clicking the backdrop, not the modal content
|
||||
if e.target() == e.current_target() {
|
||||
on_close.emit(());
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
if !props.is_open {
|
||||
return html! {};
|
||||
}
|
||||
|
||||
html! {
|
||||
<div class="modal-backdrop" onclick={on_backdrop_click}>
|
||||
<div class="create-calendar-modal">
|
||||
<div class="modal-header">
|
||||
<h2>{"Create New Calendar"}</h2>
|
||||
<button class="close-button" onclick={props.on_close.reform(|_| ())}>
|
||||
{"×"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="modal-body" onsubmit={on_submit}>
|
||||
{
|
||||
if let Some(ref error) = *error_message {
|
||||
html! {
|
||||
<div class="error-message">
|
||||
{error}
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
html! {}
|
||||
}
|
||||
}
|
||||
|
||||
<div class="form-group">
|
||||
<label for="calendar-name">{"Calendar Name *"}</label>
|
||||
<input
|
||||
id="calendar-name"
|
||||
type="text"
|
||||
value={(*calendar_name).clone()}
|
||||
oninput={on_name_change}
|
||||
placeholder="Enter calendar name"
|
||||
maxlength="100"
|
||||
disabled={*is_creating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="calendar-description">{"Description"}</label>
|
||||
<textarea
|
||||
id="calendar-description"
|
||||
value={(*description).clone()}
|
||||
oninput={on_description_change}
|
||||
placeholder="Optional calendar description"
|
||||
rows="3"
|
||||
disabled={*is_creating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>{"Calendar Color"}</label>
|
||||
<div class="color-grid">
|
||||
{
|
||||
props.available_colors.iter().enumerate().map(|(index, color)| {
|
||||
let color = color.clone();
|
||||
let selected_color = selected_color.clone();
|
||||
let is_selected = selected_color.as_ref() == Some(&color);
|
||||
let on_color_select = {
|
||||
let color = color.clone();
|
||||
Callback::from(move |_: MouseEvent| {
|
||||
selected_color.set(Some(color.clone()));
|
||||
})
|
||||
};
|
||||
|
||||
let class_name = if is_selected {
|
||||
"color-option selected"
|
||||
} else {
|
||||
"color-option"
|
||||
};
|
||||
|
||||
html! {
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
class={class_name}
|
||||
style={format!("background-color: {}", color)}
|
||||
onclick={on_color_select}
|
||||
disabled={*is_creating}
|
||||
/>
|
||||
}
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
<p class="color-help-text">{"Optional: Choose a color for your calendar"}</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="cancel-button"
|
||||
onclick={props.on_close.reform(|_| ())}
|
||||
disabled={*is_creating}
|
||||
>
|
||||
{"Cancel"}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="create-button"
|
||||
disabled={*is_creating}
|
||||
>
|
||||
{
|
||||
if *is_creating {
|
||||
"Creating..."
|
||||
} else {
|
||||
"Create Calendar"
|
||||
}
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
pub mod login;
|
||||
pub mod calendar;
|
||||
pub mod event_modal;
|
||||
pub mod create_calendar_modal;
|
||||
|
||||
pub use login::Login;
|
||||
pub use calendar::Calendar;
|
||||
pub use event_modal::EventModal;
|
||||
pub use event_modal::EventModal;
|
||||
pub use create_calendar_modal::CreateCalendarModal;
|
||||
@@ -467,6 +467,67 @@ impl CalendarService {
|
||||
(year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)
|
||||
}
|
||||
|
||||
/// Create a new calendar on the CalDAV server
|
||||
pub async fn create_calendar(
|
||||
&self,
|
||||
token: &str,
|
||||
password: &str,
|
||||
name: String,
|
||||
description: Option<String>,
|
||||
color: Option<String>
|
||||
) -> Result<(), String> {
|
||||
let window = web_sys::window().ok_or("No global window exists")?;
|
||||
|
||||
let opts = RequestInit::new();
|
||||
opts.set_method("POST");
|
||||
opts.set_mode(RequestMode::Cors);
|
||||
|
||||
let body = serde_json::json!({
|
||||
"name": name,
|
||||
"description": description,
|
||||
"color": color
|
||||
});
|
||||
|
||||
let body_string = serde_json::to_string(&body)
|
||||
.map_err(|e| format!("JSON serialization failed: {}", e))?;
|
||||
|
||||
opts.set_body(&body_string.into());
|
||||
|
||||
let url = format!("{}/calendar/create", self.base_url);
|
||||
let request = Request::new_with_str_and_init(&url, &opts)
|
||||
.map_err(|e| format!("Request creation failed: {:?}", e))?;
|
||||
|
||||
request.headers().set("Authorization", &format!("Bearer {}", token))
|
||||
.map_err(|e| format!("Authorization header setting failed: {:?}", e))?;
|
||||
|
||||
request.headers().set("X-CalDAV-Password", password)
|
||||
.map_err(|e| format!("Password header setting failed: {:?}", e))?;
|
||||
|
||||
request.headers().set("Content-Type", "application/json")
|
||||
.map_err(|e| format!("Content-Type 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()
|
||||
.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_string = text.as_string()
|
||||
.ok_or("Response text is not a string")?;
|
||||
|
||||
if resp.ok() {
|
||||
Ok(())
|
||||
} else {
|
||||
Err(format!("Request failed with status {}: {}", resp.status(), text_string))
|
||||
}
|
||||
}
|
||||
|
||||
/// Refresh a single event by UID from the CalDAV server
|
||||
pub async fn refresh_event(&self, token: &str, password: &str, uid: &str) -> Result<Option<CalendarEvent>, String> {
|
||||
let window = web_sys::window().ok_or("No global window exists")?;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
pub mod calendar_service;
|
||||
|
||||
pub use calendar_service::{CalendarService, CalendarEvent, EventReminder, ReminderAction, UserInfo, CalendarInfo};
|
||||
pub use calendar_service::{CalendarService, CalendarEvent, EventReminder, ReminderAction, UserInfo};
|
||||
Reference in New Issue
Block a user