diff --git a/assets/style.css b/assets/style.css index e6da611..e061165 100644 --- a/assets/style.css +++ b/assets/style.css @@ -110,16 +110,24 @@ th { /* Style for the suggestions list */ .editable-cell-suggestions { - position: absolute; /* Position suggestions absolutely within the cell */ - top: 100%; /* Place suggestions below the input field */ - left: 0; /* Align suggestions with the left edge of the cell */ - width: 100%; /* Full width of the cell */ - max-height: 200px; /* Limit height of suggestions list */ - overflow-y: auto; /* Add scrollbar if suggestions exceed max height */ - background-color: white; /* White background for suggestions */ - border: 1px solid #ddd; /* Light border for suggestions */ - z-index: 10; /* Ensure suggestions appear above other content */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */ + position: absolute; + background-color: white; + border: 1px solid #ccc; + max-height: 150px; + overflow-y: auto; + z-index: 1000; + list-style: none; + padding: 0; + margin: 0; +} + +.editable-cell-suggestion { + padding: 5px; + cursor: pointer; +} + +.editable-cell-suggestion:hover { + background-color: #f0f0f0; } /* Style for individual suggestion items */ diff --git a/src/components/editable_cell.rs b/src/components/editable_cell.rs index 8d269a7..c4c96c2 100644 --- a/src/components/editable_cell.rs +++ b/src/components/editable_cell.rs @@ -5,33 +5,34 @@ use leptos::logging::log; #[component] pub fn EditableCell( value: String, - on_input: impl Fn(String) + 'static, + on_input: impl Fn(String) + 'static + Clone, key: Arc, focused_cell: ReadSignal>, set_focused_cell: WriteSignal>, on_focus: Option>, on_blur: Option>, input_type: InputType, + suggestions: Vec, + show_suggestions: bool, + on_select_suggestion: Option>, ) -> impl IntoView { let input_ref = create_node_ref::(); let textarea_ref = create_node_ref::(); let (local_value, set_local_value) = create_signal(value.clone()); let input_type_clone = input_type.clone(); - // Handle input event - let handle_input = move |e: web_sys::Event| { - let new_value = match input_type_clone { - InputType::Text => event_target_value(&e), - InputType::TextArea => event_target_value(&e), - }; - log!("Input event: {}", new_value); - set_local_value.set(new_value); - }; - // Commit the input value on blur or enter - let commit_input = move || { - let value = local_value.get(); - log!("Committing input: {}", value); - on_input(value); + // Handle input event with debouncing + let handle_input = { + let on_input_clone = on_input.clone(); // Clone the callback + move |e: web_sys::Event| { + let new_value = match input_type_clone { + InputType::Text => event_target_value(&e), + InputType::TextArea => event_target_value(&e), + }; + log!("Input event: {}", new_value); + set_local_value.set(new_value.clone()); + on_input_clone(new_value); // Use the cloned callback + } }; // Focus handling @@ -46,12 +47,15 @@ pub fn EditableCell( } }; - let handle_blur = move |_| { - log!("Focus lost"); - set_focused_cell.set(None); - commit_input(); - if let Some(on_blur) = &on_blur { - on_blur.call(()); + // Blur handling + let handle_blur = { + let key = Arc::clone(&key); + move |_| { + log!("Focus lost for key: {}", key); + set_focused_cell.set(None); + if let Some(on_blur) = &on_blur { + on_blur.call(()); + } } }; @@ -90,6 +94,33 @@ pub fn EditableCell( /> }.into_view() }} + + // Render suggestions list + {move || { + if show_suggestions && !suggestions.is_empty() { + view! { +
    + {suggestions.iter().map(|suggestion| { + let suggestion_clone = suggestion.clone(); + view! { +
  • + {suggestion} +
    • + } + }).collect::>()} +
+ } + } else { + view! {
    } + } + }} } } diff --git a/src/components/items_list.rs b/src/components/items_list.rs index fb2a0ed..513e713 100644 --- a/src/components/items_list.rs +++ b/src/components/items_list.rs @@ -596,125 +596,80 @@ pub fn ItemsList( {match property { "Name" => view! {
    - >() + }); + + view! { + - - {move || { - if *show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false) { - log!("Rendering suggestions list"); - view! { -
      - {move || { - let suggestions = wikidata_suggestions.get() - .get(&format!("name-{}", index)) - .cloned() - .unwrap_or_default(); - log!("Suggestions for cell {}: {:?}", index, suggestions); - suggestions.into_iter().map(|suggestion| { - let label_for_click = suggestion.label.clone(); - let label_for_display = suggestion.label.clone(); - let description_for_click = suggestion.description.clone().unwrap_or_default(); - let description_for_display = suggestion.description.clone().unwrap_or_default(); - let id = suggestion.id.clone(); - view! { -
    • - { format!("{} - {}", label_for_display, description_for_display) } -
      • - } - }).collect::>() - }} -
    - } - } else { - log!("Suggestions list hidden"); - view! { -
      - } - } + })) + /> }}
      }.into_view(), + "Description" => view! { - + }.into_view(), + _ => view! { { "" } }.into_view(), @@ -756,25 +711,30 @@ pub fn ItemsList( {move || { let property_clone_for_cells = normalized_property.clone(); items.get().iter().enumerate().map(move |(index, item)| { - let property_clone_for_closure = property_clone_for_cells.clone(); - view! { - - - - } - }).collect::>()} - } + let property_clone_for_closure = property_clone_for_cells.clone(); + view! { + + + + } + }).collect::>() + }} } }).collect::>()