feat(items-list): enhance the ItemsList component to integrate focus and blur signal handling for suggestions from Wikidata

-Added on_focus and on_blur props to the EditableCell component to handle focus and blur events.

Cargo.lock

@@ -723,6 +723,7 @@ dependencies = [
  "console_error_panic_hook",
  "futures",
  "gloo-net 0.5.0",
+ "gloo-timers",
  "http 1.2.0",
  "leptos",
  "leptos_actix",

Cargo.toml

@@ -22,6 +22,7 @@ web-sys = { version = "0.3", features = ["Event"] }
 nostr-sdk = "0.37"
 tokio = "1"
 gloo-net = "0.5"
+gloo-timers = { version = "0.2", features = ["futures"] }
 futures = "0.3"
 wasm-bindgen-futures = "0.4"
 serde_json="1.0.133"

assets/style.css

@@ -81,10 +81,12 @@ th {
 
 /* Style for individual cells */
 .editable-cell {
-    display: block;  /* Allow it to fill the parent container */
+    display: flex;          /* Use flexbox for better layout control */
+    flex-direction: column; /* Stack children vertically */
     width: 100%;     /* Full width of the allocated space */
     height: 100%;    /* Full height of the allocated space */
-    position: relative;
+    position: relative;  /* Relative positioning for absolute children */
+    box-sizing: border-box; /* Ensure padding and border are included in width/height */
 }
 
 /* Style for the input field inside the editable cell */
@@ -100,8 +102,33 @@ th {
     background-color: transparent;  /* Make background transparent */
 }
 
-/* Optional: Style for the focused input field */
+/* Style for the focused input field */
 .editable-cell-input:focus {
     background-color: #e0f7fa;  /* Light blue background when focused */
     border: 1px solid #00796b;  /* Green border when focused */
+}
+
+/* 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 */
+}
+
+/* Style for individual suggestion items */
+.editable-cell-suggestions li {
+    padding: 8px;           /* Add padding for spacing */
+    cursor: pointer;        /* Change cursor to pointer on hover */
+    border-bottom: 1px solid #eee; /* Add separator between items */
+}
+
+.editable-cell-suggestions li:hover {
+    background-color: #f5f5f5; /* Light gray background on hover */
 }

src/components/editable_cell.rs

@@ -9,6 +9,8 @@ pub fn EditableCell(
     key: Arc<String>,
     focused_cell: ReadSignal<Option<String>>,
     set_focused_cell: WriteSignal<Option<String>>,
+    on_focus: Option<Callback<()>>,
+    on_blur: Option<Callback<()>>,
 ) -> impl IntoView {
     let input_ref = create_node_ref::<html::Input>();
     let (local_value, set_local_value) = create_signal(value.clone());
@@ -33,6 +35,9 @@ pub fn EditableCell(
         move |_| {
             log!("Focus gained for key: {}", key);
             set_focused_cell.set(Some(key.to_string()));
+            if let Some(on_focus) = &on_focus {
+                on_focus.call(());
+            }
         }
     };
 
@@ -40,6 +45,9 @@ pub fn EditableCell(
         log!("Focus lost");
         set_focused_cell.set(None);
         commit_input();
+        if let Some(on_blur) = &on_blur {
+            on_blur.call(());
+        }
     };
 
     // Update input field value when focused cell changes

src/components/items_list.rs

@@ -27,6 +27,9 @@ pub fn ItemsList(
     // State to manage dynamic property names
     let (custom_properties, set_custom_properties) = create_signal(Vec::<String>::new());
     
+    // state to manage suggestions visibility
+    let (show_suggestions, set_show_suggestions) = create_signal(false);
+
     // Ensure there's an initial empty row
     set_items.set(vec![Item {
         id: Uuid::new_v4().to_string(),
@@ -42,6 +45,7 @@ pub fn ItemsList(
 
     // Fetch Wikidata suggestions
     let fetch_wikidata_suggestions = move |key:String, query: String| {
+        log!("Fetching suggestions for key: {}, query: {}", key, query);
         spawn_local(async move {
             if query.is_empty() {
                 set_wikidata_suggestions.update(|suggestions| {
@@ -58,7 +62,9 @@ pub fn ItemsList(
             match gloo_net::http::Request::get(&url).send().await {
                 Ok(response) => {
                     if let Ok(data) = response.json::<WikidataResponse>().await {
+                        log!("Fetching suggestions for key: {}, query: {}", key, query);
                         set_wikidata_suggestions.update(|suggestions| {
+                            log!("Updated suggestions: {:?}", suggestions);
                             suggestions.insert(key, data.search);
                         });
                     }
@@ -163,52 +169,80 @@ pub fn ItemsList(
                                             <td>
                                             {match property {
                                                 "Name" => view! {
-                                                <EditableCell
+                                                    <div class="editable-cell">
-                                                    value=item.name.clone()
+                                                        <EditableCell
-                                                    on_input=move |value| {
+                                                            value=item.name.clone()
-                                                        update_item(index, "name", value.clone());
+                                                            on_input=move |value| {
-                                                        fetch_wikidata_suggestions(format!("name-{}", index), value);
+                                                                update_item(index, "name", value.clone());
-                                                    }
+                                                                fetch_wikidata_suggestions(format!("name-{}", index), value);
-                                                    key=Arc::new(format!("name-{}", index))
+                                                            }
-                                                    focused_cell=focused_cell
+                                                            key=Arc::new(format!("name-{}", index))
-                                                    set_focused_cell=set_focused_cell.clone()
+                                                            focused_cell=focused_cell
-                                                />
+                                                            set_focused_cell=set_focused_cell.clone()
-                                                <ul>
+                                                            on_focus=Some(Callback::new(move |_| {
-                                                        {move || {
+                                                                log!("Input focused, showing suggestions");
-                                                            let suggestions = wikidata_suggestions.get()
+                                                                set_show_suggestions.set(true);
-                                                                .get(&format!("name-{}", index))
+                                                            }))
-                                                                .cloned()
+                                                            on_blur=Some(Callback::new(move |_| {
-                                                                .unwrap_or_default();
+                                                                log!("Input blurred, delaying hiding suggestions");
-                                                            suggestions.into_iter().map(|suggestion| {
+                                                                spawn_local(async move {
-                                                                let label_for_click = suggestion.label.clone();
+                                                                    gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await;
-                                                                let label_for_display = suggestion.label.clone();
+                                                                    log!("Hiding suggestions after delay");
-                                                                let description_for_click = suggestion.description.clone().unwrap_or_default();
+                                                                    set_show_suggestions.set(false);
-                                                                let description_for_display = suggestion.description.clone().unwrap_or_default();
-                                                                let id = suggestion.id.clone();
-
-                                                                // Tags for the item
-                                                                let tags = vec![
-                                                                    ("source".to_string(), "wikidata".to_string()),
-                                                                    ("wikidata_id".to_string(), id.clone()),
-                                                                ];
-
-                                                        view! {
-                                                            <li on:click=move |_| {
-                                                                set_items.update(|items| {
-                                                                    if let Some(item) = items.get_mut(index) {
-                                                                                item.description = description_for_click.clone();
-                                                                                item.tags.extend(tags.clone());
-                                                                                item.wikidata_id = Some(id.clone());
-                                                                                item.name = label_for_click.clone();
-                                                                    }
                                                                 });
-                                                            }>
+                                                            }))
-                                                                        { format!("{} - {}", label_for_display, description_for_display) }
+                                                        />
-                                                            </li>
+                                                        {move || {
-                                                        }
+                                                            if show_suggestions.get() {
-                                                            }).collect::<Vec<_>>()
+                                                                log!("Rendering suggestions list");
+                                                                view! {
+                                                                        <ul class="editable-cell-suggestions">
+                                                                                {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();
+                                                                                    
+                                                                                        // Tags for the item
+                                                                                        let tags = vec![
+                                                                                            ("source".to_string(), "wikidata".to_string()),
+                                                                                            ("wikidata_id".to_string(), id.clone()),
+                                                                                        ];
+                                                                                    
+                                                                                view! {
+                                                                                    <li class="editable-cell-suggestions-li" on:click=move |_| {
+                                                                                        set_items.update(|items| {
+                                                                                            if let Some(item) = items.get_mut(index) {
+                                                                                                        item.description = description_for_click.clone();
+                                                                                                        item.tags.extend(tags.clone());
+                                                                                                        item.wikidata_id = Some(id.clone());
+                                                                                                        item.name = label_for_click.clone();
+                                                                                            }
+                                                                                        });
+                                                                                        set_show_suggestions.set(false);
+                                                                                    }>
+                                                                                                { format!("{} - {}", label_for_display, description_for_display) }
+                                                                                    </li>
+                                                                                }
+                                                                                    }).collect::<Vec<_>>()
+                                                                                }}
+                                                                        </ul>
+                                                                }
+                                                            } else {
+                                                                log!("Suggestions list hidden");
+                                                                view! {
+                                                                    <ul></ul>
+                                                                }
+                                                            }
                                                         }}
-                                                </ul>
+                                                    </div>
                                                 }.into_view(),
                                                 "Description" => view! {
                                                 <EditableCell
@@ -217,6 +251,12 @@ pub fn ItemsList(
                                                     key=Arc::new(format!("description-{}", index))
                                                     focused_cell=focused_cell
                                                     set_focused_cell=set_focused_cell.clone()
+                                                    on_focus=Some(Callback::new(move |_| {
+                                                        log!("Description input focused");
+                                                    }))
+                                                    on_blur=Some(Callback::new(move |_| {
+                                                        log!("Description input blurred");
+                                                    }))
                                                 />
                                                 }.into_view(),
                                                 "Tags" => view! {
@@ -259,6 +299,12 @@ pub fn ItemsList(
                                                         key=Arc::new(format!("custom-{}-{}", property_clone, index))
                                                         focused_cell=focused_cell
                                                         set_focused_cell=set_focused_cell.clone()
+                                                        on_focus=Some(Callback::new(move |_| {
+                                                            log!("Custom property input focused");
+                                                        }))
+                                                        on_blur=Some(Callback::new(move |_| {
+                                                            log!("Custom property input blurred");
+                                                        }))
                                                     />
                                                 </td>
                                             }