use yew::prelude::*; use web_sys::MouseEvent; use crate::services::calendar_service::CalendarInfo; #[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, // calendar_path pub available_colors: Vec, pub on_context_menu: Callback<(MouseEvent, String)>, // (event, calendar_path) } #[function_component(CalendarListItem)] pub fn calendar_list_item(props: &CalendarListItemProps) -> Html { let on_color_click = { let cal_path = props.calendar.path.clone(); let on_color_picker_toggle = props.on_color_picker_toggle.clone(); Callback::from(move |e: MouseEvent| { e.stop_propagation(); on_color_picker_toggle.emit(cal_path.clone()); }) }; let on_context_menu = { let cal_path = props.calendar.path.clone(); let on_context_menu = props.on_context_menu.clone(); Callback::from(move |e: MouseEvent| { e.prevent_default(); on_context_menu.emit((e, cal_path.clone())); }) }; html! {
  • { if props.color_picker_open { html! {
    { props.available_colors.iter().map(|color| { 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! {
    } }).collect::() }
    } } else { html! {} } }     {&props.calendar.display_name}
    • } }