Complete CreateEventModalV2 integration and fix styling
All checks were successful
Build and Push Docker Image / docker (push) Successful in 1m11s
All checks were successful
Build and Push Docker Image / docker (push) Successful in 1m11s
- Replace CreateEventModal with new modular CreateEventModalV2 throughout app - Fix compilation errors by aligning event_form types with create_event_modal types - Add missing props (initial_start_time, initial_end_time) to modal interface - Fix styling issues: use tab-navigation class and add modal-body wrapper - Remove duplicate on_create prop causing compilation failure - All recurrence options now properly positioned below repeat/reminder pickers 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
@@ -1,4 +1,6 @@
|
||||
use super::types::*;
|
||||
use crate::components::create_event_modal::{EventStatus, EventClass, RecurrenceType, ReminderType};
|
||||
use chrono::{Datelike, NaiveDate};
|
||||
use wasm_bindgen::JsCast;
|
||||
use web_sys::{HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement};
|
||||
use yew::prelude::*;
|
||||
@@ -118,7 +120,179 @@ pub fn basic_details_tab(props: &TabProps) -> Html {
|
||||
})
|
||||
};
|
||||
|
||||
// Date/time handlers would go here...
|
||||
let on_recurrence_interval_change = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
if let Ok(interval) = input.value().parse::<u32>() {
|
||||
let mut event_data = (*data).clone();
|
||||
event_data.recurrence_interval = interval.max(1);
|
||||
data.set(event_data);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let on_recurrence_until_change = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
let mut event_data = (*data).clone();
|
||||
if input.value().is_empty() {
|
||||
event_data.recurrence_until = None;
|
||||
} else if let Ok(date) = NaiveDate::parse_from_str(&input.value(), "%Y-%m-%d") {
|
||||
event_data.recurrence_until = Some(date);
|
||||
}
|
||||
data.set(event_data);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let on_recurrence_count_change = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
let mut event_data = (*data).clone();
|
||||
if input.value().is_empty() {
|
||||
event_data.recurrence_count = None;
|
||||
} else if let Ok(count) = input.value().parse::<u32>() {
|
||||
event_data.recurrence_count = Some(count.max(1));
|
||||
}
|
||||
data.set(event_data);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let on_monthly_by_monthday_change = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
let mut event_data = (*data).clone();
|
||||
if input.value().is_empty() {
|
||||
event_data.monthly_by_monthday = None;
|
||||
} else if let Ok(day) = input.value().parse::<u8>() {
|
||||
if day >= 1 && day <= 31 {
|
||||
event_data.monthly_by_monthday = Some(day);
|
||||
event_data.monthly_by_day = None; // Clear the other option
|
||||
}
|
||||
}
|
||||
data.set(event_data);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let on_monthly_by_day_change = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(select) = e.target_dyn_into::<HtmlSelectElement>() {
|
||||
let mut event_data = (*data).clone();
|
||||
if select.value().is_empty() || select.value() == "none" {
|
||||
event_data.monthly_by_day = None;
|
||||
} else {
|
||||
event_data.monthly_by_day = Some(select.value());
|
||||
event_data.monthly_by_monthday = None; // Clear the other option
|
||||
}
|
||||
data.set(event_data);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let on_weekday_change = {
|
||||
let data = data.clone();
|
||||
move |day_index: usize| {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
let mut event_data = (*data).clone();
|
||||
if day_index < event_data.recurrence_days.len() {
|
||||
event_data.recurrence_days[day_index] = input.checked();
|
||||
data.set(event_data);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
let on_yearly_month_change = {
|
||||
let data = data.clone();
|
||||
move |month_index: usize| {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
let mut event_data = (*data).clone();
|
||||
if month_index < event_data.yearly_by_month.len() {
|
||||
event_data.yearly_by_month[month_index] = input.checked();
|
||||
data.set(event_data);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
let on_start_date_change = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
if let Ok(date) = NaiveDate::parse_from_str(&input.value(), "%Y-%m-%d") {
|
||||
let mut event_data = (*data).clone();
|
||||
event_data.start_date = date;
|
||||
data.set(event_data);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let on_start_time_change = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
if let Ok(time) = chrono::NaiveTime::parse_from_str(&input.value(), "%H:%M") {
|
||||
let mut event_data = (*data).clone();
|
||||
event_data.start_time = time;
|
||||
data.set(event_data);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let on_end_date_change = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
if let Ok(date) = NaiveDate::parse_from_str(&input.value(), "%Y-%m-%d") {
|
||||
let mut event_data = (*data).clone();
|
||||
event_data.end_date = date;
|
||||
data.set(event_data);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let on_end_time_change = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: Event| {
|
||||
if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
|
||||
if let Ok(time) = chrono::NaiveTime::parse_from_str(&input.value(), "%H:%M") {
|
||||
let mut event_data = (*data).clone();
|
||||
event_data.end_time = time;
|
||||
data.set(event_data);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let on_location_input = {
|
||||
let data = data.clone();
|
||||
Callback::from(move |e: InputEvent| {
|
||||
if let Some(target) = e.target() {
|
||||
if let Ok(input) = target.dyn_into::<HtmlInputElement>() {
|
||||
let mut event_data = (*data).clone();
|
||||
event_data.location = input.value();
|
||||
data.set(event_data);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
html! {
|
||||
<div class="tab-panel">
|
||||
@@ -219,8 +393,26 @@ pub fn basic_details_tab(props: &TabProps) -> Html {
|
||||
<div class="form-group">
|
||||
<label>{"Repeat on"}</label>
|
||||
<div class="weekday-selection">
|
||||
// Weekday checkboxes would go here
|
||||
<p>{"Weekday selection will go here"}</p>
|
||||
{
|
||||
["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(i, day)| {
|
||||
let day_checked = data.recurrence_days.get(i).cloned().unwrap_or(false);
|
||||
let on_change = on_weekday_change(i);
|
||||
html! {
|
||||
<label key={i} class="weekday-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={day_checked}
|
||||
onchange={on_change}
|
||||
/>
|
||||
<span class="weekday-label">{day}</span>
|
||||
</label>
|
||||
}
|
||||
})
|
||||
.collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -229,14 +421,16 @@ pub fn basic_details_tab(props: &TabProps) -> Html {
|
||||
<div class="recurrence-options">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>{"Every"}</label>
|
||||
<label for="recurrence-interval">{"Every"}</label>
|
||||
<div class="interval-input">
|
||||
<input
|
||||
id="recurrence-interval"
|
||||
type="number"
|
||||
class="form-input"
|
||||
value={data.recurrence_interval.to_string()}
|
||||
min="1"
|
||||
max="999"
|
||||
onchange={on_recurrence_interval_change}
|
||||
/>
|
||||
<span class="interval-unit">
|
||||
{match data.recurrence {
|
||||
@@ -253,8 +447,84 @@ pub fn basic_details_tab(props: &TabProps) -> Html {
|
||||
<div class="form-group">
|
||||
<label>{"Ends"}</label>
|
||||
<div class="end-options">
|
||||
// Radio buttons for Never/Until/After would go here
|
||||
<p>{"End options will go here"}</p>
|
||||
<div class="end-option">
|
||||
<label class="radio-label">
|
||||
<input
|
||||
type="radio"
|
||||
name="recurrence-end"
|
||||
value="never"
|
||||
checked={data.recurrence_until.is_none() && data.recurrence_count.is_none()}
|
||||
onchange={{
|
||||
let data = data.clone();
|
||||
Callback::from(move |_| {
|
||||
let mut new_data = (*data).clone();
|
||||
new_data.recurrence_until = None;
|
||||
new_data.recurrence_count = None;
|
||||
data.set(new_data);
|
||||
})
|
||||
}}
|
||||
/>
|
||||
{"Never"}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="end-option">
|
||||
<label class="radio-label">
|
||||
<input
|
||||
type="radio"
|
||||
name="recurrence-end"
|
||||
value="until"
|
||||
checked={data.recurrence_until.is_some()}
|
||||
onchange={{
|
||||
let data = data.clone();
|
||||
Callback::from(move |_| {
|
||||
let mut new_data = (*data).clone();
|
||||
new_data.recurrence_count = None;
|
||||
new_data.recurrence_until = Some(new_data.start_date);
|
||||
data.set(new_data);
|
||||
})
|
||||
}}
|
||||
/>
|
||||
{"Until"}
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
class="form-input"
|
||||
value={data.recurrence_until.map(|d| d.format("%Y-%m-%d").to_string()).unwrap_or_default()}
|
||||
onchange={on_recurrence_until_change}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="end-option">
|
||||
<label class="radio-label">
|
||||
<input
|
||||
type="radio"
|
||||
name="recurrence-end"
|
||||
value="count"
|
||||
checked={data.recurrence_count.is_some()}
|
||||
onchange={{
|
||||
let data = data.clone();
|
||||
Callback::from(move |_| {
|
||||
let mut new_data = (*data).clone();
|
||||
new_data.recurrence_until = None;
|
||||
new_data.recurrence_count = Some(10); // Default count
|
||||
data.set(new_data);
|
||||
})
|
||||
}}
|
||||
/>
|
||||
{"After"}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-input count-input"
|
||||
value={data.recurrence_count.map(|c| c.to_string()).unwrap_or_default()}
|
||||
min="1"
|
||||
max="999"
|
||||
placeholder="1"
|
||||
onchange={on_recurrence_count_change}
|
||||
/>
|
||||
<span class="count-unit">{"occurrences"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -263,7 +533,97 @@ pub fn basic_details_tab(props: &TabProps) -> Html {
|
||||
if matches!(data.recurrence, RecurrenceType::Monthly) {
|
||||
<div class="form-group">
|
||||
<label>{"Repeat by"}</label>
|
||||
<p>{"Monthly options will go here"}</p>
|
||||
<div class="monthly-options">
|
||||
<div class="monthly-option">
|
||||
<label class="radio-label">
|
||||
<input
|
||||
type="radio"
|
||||
name="monthly-type"
|
||||
checked={data.monthly_by_monthday.is_some()}
|
||||
onchange={{
|
||||
let data = data.clone();
|
||||
Callback::from(move |_| {
|
||||
let mut new_data = (*data).clone();
|
||||
new_data.monthly_by_day = None;
|
||||
new_data.monthly_by_monthday = Some(new_data.start_date.day() as u8);
|
||||
data.set(new_data);
|
||||
})
|
||||
}}
|
||||
/>
|
||||
{"Day of month:"}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-input day-input"
|
||||
value={data.monthly_by_monthday.map(|d| d.to_string()).unwrap_or_else(|| data.start_date.day().to_string())}
|
||||
min="1"
|
||||
max="31"
|
||||
onchange={on_monthly_by_monthday_change}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="monthly-option">
|
||||
<label class="radio-label">
|
||||
<input
|
||||
type="radio"
|
||||
name="monthly-type"
|
||||
checked={data.monthly_by_day.is_some()}
|
||||
onchange={{
|
||||
let data = data.clone();
|
||||
Callback::from(move |_| {
|
||||
let mut new_data = (*data).clone();
|
||||
new_data.monthly_by_monthday = None;
|
||||
new_data.monthly_by_day = Some("1MO".to_string()); // Default to first Monday
|
||||
data.set(new_data);
|
||||
})
|
||||
}}
|
||||
/>
|
||||
{"Day of week:"}
|
||||
</label>
|
||||
<select
|
||||
class="form-input"
|
||||
value={data.monthly_by_day.clone().unwrap_or_default()}
|
||||
onchange={on_monthly_by_day_change}
|
||||
>
|
||||
<option value="none">{"Select..."}</option>
|
||||
<option value="1MO">{"First Monday"}</option>
|
||||
<option value="1TU">{"First Tuesday"}</option>
|
||||
<option value="1WE">{"First Wednesday"}</option>
|
||||
<option value="1TH">{"First Thursday"}</option>
|
||||
<option value="1FR">{"First Friday"}</option>
|
||||
<option value="1SA">{"First Saturday"}</option>
|
||||
<option value="1SU">{"First Sunday"}</option>
|
||||
<option value="2MO">{"Second Monday"}</option>
|
||||
<option value="2TU">{"Second Tuesday"}</option>
|
||||
<option value="2WE">{"Second Wednesday"}</option>
|
||||
<option value="2TH">{"Second Thursday"}</option>
|
||||
<option value="2FR">{"Second Friday"}</option>
|
||||
<option value="2SA">{"Second Saturday"}</option>
|
||||
<option value="2SU">{"Second Sunday"}</option>
|
||||
<option value="3MO">{"Third Monday"}</option>
|
||||
<option value="3TU">{"Third Tuesday"}</option>
|
||||
<option value="3WE">{"Third Wednesday"}</option>
|
||||
<option value="3TH">{"Third Thursday"}</option>
|
||||
<option value="3FR">{"Third Friday"}</option>
|
||||
<option value="3SA">{"Third Saturday"}</option>
|
||||
<option value="3SU">{"Third Sunday"}</option>
|
||||
<option value="4MO">{"Fourth Monday"}</option>
|
||||
<option value="4TU">{"Fourth Tuesday"}</option>
|
||||
<option value="4WE">{"Fourth Wednesday"}</option>
|
||||
<option value="4TH">{"Fourth Thursday"}</option>
|
||||
<option value="4FR">{"Fourth Friday"}</option>
|
||||
<option value="4SA">{"Fourth Saturday"}</option>
|
||||
<option value="4SU">{"Fourth Sunday"}</option>
|
||||
<option value="-1MO">{"Last Monday"}</option>
|
||||
<option value="-1TU">{"Last Tuesday"}</option>
|
||||
<option value="-1WE">{"Last Wednesday"}</option>
|
||||
<option value="-1TH">{"Last Thursday"}</option>
|
||||
<option value="-1FR">{"Last Friday"}</option>
|
||||
<option value="-1SA">{"Last Saturday"}</option>
|
||||
<option value="-1SU">{"Last Sunday"}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -271,7 +631,29 @@ pub fn basic_details_tab(props: &TabProps) -> Html {
|
||||
if matches!(data.recurrence, RecurrenceType::Yearly) {
|
||||
<div class="form-group">
|
||||
<label>{"Repeat in months"}</label>
|
||||
<p>{"Yearly options will go here"}</p>
|
||||
<div class="yearly-months">
|
||||
{
|
||||
["Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
||||
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(i, month)| {
|
||||
let month_checked = data.yearly_by_month.get(i).cloned().unwrap_or(false);
|
||||
let on_change = on_yearly_month_change(i);
|
||||
html! {
|
||||
<label key={i} class="month-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={month_checked}
|
||||
onchange={on_change}
|
||||
/>
|
||||
<span class="month-label">{month}</span>
|
||||
</label>
|
||||
}
|
||||
})
|
||||
.collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -280,22 +662,26 @@ pub fn basic_details_tab(props: &TabProps) -> Html {
|
||||
// Date and time fields go here AFTER recurrence options
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>{"Start Date *"}</label>
|
||||
<label for="start-date">{"Start Date *"}</label>
|
||||
<input
|
||||
type="date"
|
||||
id="start-date"
|
||||
class="form-input"
|
||||
value={data.start_date.format("%Y-%m-%d").to_string()}
|
||||
onchange={on_start_date_change}
|
||||
required=true
|
||||
/>
|
||||
</div>
|
||||
|
||||
if !data.all_day {
|
||||
<div class="form-group">
|
||||
<label>{"Start Time"}</label>
|
||||
<label for="start-time">{"Start Time"}</label>
|
||||
<input
|
||||
type="time"
|
||||
id="start-time"
|
||||
class="form-input"
|
||||
value={data.start_time.format("%H:%M").to_string()}
|
||||
onchange={on_start_time_change}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
@@ -303,33 +689,39 @@ pub fn basic_details_tab(props: &TabProps) -> Html {
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>{"End Date *"}</label>
|
||||
<label for="end-date">{"End Date *"}</label>
|
||||
<input
|
||||
type="date"
|
||||
id="end-date"
|
||||
class="form-input"
|
||||
value={data.end_date.format("%Y-%m-%d").to_string()}
|
||||
onchange={on_end_date_change}
|
||||
required=true
|
||||
/>
|
||||
</div>
|
||||
|
||||
if !data.all_day {
|
||||
<div class="form-group">
|
||||
<label>{"End Time"}</label>
|
||||
<label for="end-time">{"End Time"}</label>
|
||||
<input
|
||||
type="time"
|
||||
id="end-time"
|
||||
class="form-input"
|
||||
value={data.end_time.format("%H:%M").to_string()}
|
||||
onchange={on_end_time_change}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>{"Location"}</label>
|
||||
<label for="event-location">{"Location"}</label>
|
||||
<input
|
||||
type="text"
|
||||
id="event-location"
|
||||
class="form-input"
|
||||
value={data.location.clone()}
|
||||
oninput={on_location_input}
|
||||
placeholder="Enter event location"
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user