feat(autosearch): improve blur and focus handling to help search wikidata suggestions while typing
This commit is contained in:
parent
4bfd47d8c4
commit
0a8494596f
3 changed files with 160 additions and 161 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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<String>,
|
||||
focused_cell: ReadSignal<Option<String>>,
|
||||
set_focused_cell: WriteSignal<Option<String>>,
|
||||
on_focus: Option<Callback<()>>,
|
||||
on_blur: Option<Callback<()>>,
|
||||
input_type: InputType,
|
||||
suggestions: Vec<String>,
|
||||
show_suggestions: bool,
|
||||
on_select_suggestion: Option<Callback<String>>,
|
||||
) -> impl IntoView {
|
||||
let input_ref = create_node_ref::<html::Input>();
|
||||
let textarea_ref = create_node_ref::<html::Textarea>();
|
||||
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! {
|
||||
<ul class="editable-cell-suggestions">
|
||||
{suggestions.iter().map(|suggestion| {
|
||||
let suggestion_clone = suggestion.clone();
|
||||
view! {
|
||||
<li
|
||||
class="editable-cell-suggestion"
|
||||
on:click=move |_| {
|
||||
if let Some(on_select_suggestion) = &on_select_suggestion {
|
||||
on_select_suggestion.call(suggestion_clone.clone());
|
||||
}
|
||||
}
|
||||
>
|
||||
{suggestion}
|
||||
</li>
|
||||
}
|
||||
}).collect::<Vec<_>>()}
|
||||
</ul>
|
||||
}
|
||||
} else {
|
||||
view! { <ul></ul> }
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -596,125 +596,80 @@ pub fn ItemsList(
|
|||
{match property {
|
||||
"Name" => view! {
|
||||
<div class="editable-cell">
|
||||
<EditableCell
|
||||
value=item.name.clone()
|
||||
on_input=move |value| {
|
||||
update_item(index, "name", value.clone());
|
||||
fetch_wikidata_suggestions(format!("name-{}", index), value);
|
||||
}
|
||||
key=Arc::new(format!("name-{}", index))
|
||||
focused_cell=focused_cell
|
||||
set_focused_cell=set_focused_cell.clone()
|
||||
on_focus=Some(Callback::new(move |_| {
|
||||
log!("Input focused, showing suggestions");
|
||||
set_show_suggestions.update(|suggestions| {
|
||||
suggestions.insert(format!("name-{}", index), true);
|
||||
});
|
||||
}))
|
||||
on_blur=Some(Callback::new(move |_| {
|
||||
log!("Input blurred, delaying hiding suggestions");
|
||||
spawn_local(async move {
|
||||
gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await;
|
||||
log!("Hiding suggestions after delay");
|
||||
{let suggestions = create_memo(move |_| {
|
||||
wikidata_suggestions.get()
|
||||
.get(&format!("name-{}", index))
|
||||
.cloned()
|
||||
.unwrap_or_default()
|
||||
.into_iter()
|
||||
.map(|s| s.label)
|
||||
.collect::<Vec<_>>()
|
||||
});
|
||||
|
||||
view! {
|
||||
<EditableCell
|
||||
value=item.name.clone()
|
||||
on_input=move |value| {
|
||||
update_item(index, "name", value.clone());
|
||||
fetch_wikidata_suggestions(format!("name-{}", index), value);
|
||||
}
|
||||
key=Arc::new(format!("name-{}", index))
|
||||
focused_cell=focused_cell
|
||||
set_focused_cell=set_focused_cell.clone()
|
||||
on_focus=Some(Callback::new(move |_| {
|
||||
log!("Input focused, showing suggestions");
|
||||
set_show_suggestions.update(|suggestions| {
|
||||
suggestions.insert(format!("name-{}", index), true);
|
||||
});
|
||||
}))
|
||||
on_blur=Some(Callback::new(move |_| {
|
||||
log!("Input blurred, delaying hiding suggestions");
|
||||
spawn_local(async move {
|
||||
gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await;
|
||||
log!("Hiding suggestions after delay");
|
||||
set_show_suggestions.update(|suggestions| {
|
||||
suggestions.insert(format!("name-{}", index), false);
|
||||
});
|
||||
});
|
||||
}))
|
||||
input_type=InputType::Text
|
||||
suggestions=suggestions.get()
|
||||
show_suggestions=*show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false)
|
||||
on_select_suggestion=Some(Callback::new(move |suggestion:String| {
|
||||
set_items.update(|items| {
|
||||
if let Some(item) = items.get_mut(index) {
|
||||
item.name = suggestion.clone();
|
||||
}
|
||||
});
|
||||
set_show_suggestions.update(|suggestions| {
|
||||
suggestions.insert(format!("name-{}", index), false);
|
||||
});
|
||||
});
|
||||
}))
|
||||
input_type=InputType::Text
|
||||
/>
|
||||
<button class="search-icon" on:click=move |_| {
|
||||
log!("Search icon clicked, showing suggestions");
|
||||
set_show_suggestions.update(|suggestions| {
|
||||
suggestions.insert(format!("name-{}", index), true);
|
||||
});
|
||||
}>
|
||||
<i class="fas fa-search"></i> Search Wiki
|
||||
</button>
|
||||
{move || {
|
||||
if *show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false) {
|
||||
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();
|
||||
view! {
|
||||
<li class="editable-cell-suggestions-li" on:click=move |_| {
|
||||
// Update item with basic suggestion details
|
||||
set_items.update(|items| {
|
||||
if let Some(item) = items.get_mut(index) {
|
||||
item.description = description_for_click.clone();
|
||||
item.wikidata_id = Some(id.clone());
|
||||
item.name = label_for_click.clone();
|
||||
}
|
||||
});
|
||||
|
||||
// Fetch additional properties from Wikidata
|
||||
let wikidata_id = id.clone();
|
||||
let set_fetched_properties = set_fetched_properties.clone();
|
||||
let set_property_labels = set_property_labels.clone();
|
||||
spawn_local(async move {
|
||||
let properties = fetch_item_properties(&wikidata_id).await;
|
||||
// log!("Fetched properties for Wikidata ID {}: {:?}", wikidata_id, properties);
|
||||
|
||||
// Populate the custom properties for the new item
|
||||
set_items.update(|items| {
|
||||
if let Some(item) = items.iter_mut().find(|item| item.wikidata_id.as_ref() == Some(&wikidata_id)) {
|
||||
for (property, value) in properties {
|
||||
item.custom_properties.insert(property, value);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Hide the suggestion list
|
||||
set_show_suggestions.update(|suggestions| {
|
||||
suggestions.insert(format!("name-{}", index), false);
|
||||
log!("Updated show_suggestions: {:?}", suggestions);
|
||||
});
|
||||
}>
|
||||
{ format!("{} - {}", label_for_display, description_for_display) }
|
||||
</li>
|
||||
}
|
||||
}).collect::<Vec<_>>()
|
||||
}}
|
||||
</ul>
|
||||
}
|
||||
} else {
|
||||
log!("Suggestions list hidden");
|
||||
view! {
|
||||
<ul></ul>
|
||||
}
|
||||
}
|
||||
}))
|
||||
/>
|
||||
}}
|
||||
</div>
|
||||
}.into_view(),
|
||||
|
||||
"Description" => view! {
|
||||
<EditableCell
|
||||
value=item.description.clone()
|
||||
on_input=move |value| update_item(index, "description", value)
|
||||
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");
|
||||
}))
|
||||
input_type=InputType::TextArea
|
||||
/>
|
||||
<EditableCell
|
||||
value=item.description.clone()
|
||||
on_input=move |value| update_item(index, "description", value)
|
||||
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");
|
||||
}))
|
||||
input_type=InputType::TextArea
|
||||
suggestions=Vec::new() // No suggestions for description
|
||||
show_suggestions=false // No suggestions for description
|
||||
on_select_suggestion=None // No suggestions for description
|
||||
/>
|
||||
}.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! {
|
||||
<td>
|
||||
<EditableCell
|
||||
value=item.custom_properties.get(&property_clone_for_closure).cloned().unwrap_or_default()
|
||||
on_input=move |value| update_item(index, &property_clone_for_closure, value)
|
||||
key=Arc::new(format!("custom-{}-{}", property_clone_for_cells, index))
|
||||
focused_cell=focused_cell
|
||||
set_focused_cell=set_focused_cell.clone()
|
||||
on_focus=Some(Callback::new(move |_| {
|
||||
}))
|
||||
on_blur=Some(Callback::new(move |_| {
|
||||
}))
|
||||
input_type=InputType::TextArea
|
||||
/>
|
||||
</td>
|
||||
}
|
||||
}).collect::<Vec<_>>()}
|
||||
}
|
||||
let property_clone_for_closure = property_clone_for_cells.clone();
|
||||
view! {
|
||||
<td>
|
||||
<EditableCell
|
||||
value=item.custom_properties.get(&property_clone_for_closure).cloned().unwrap_or_default()
|
||||
on_input=move |value| update_item(index, &property_clone_for_closure, value)
|
||||
key=Arc::new(format!("custom-{}-{}", property_clone_for_cells, index))
|
||||
focused_cell=focused_cell
|
||||
set_focused_cell=set_focused_cell.clone()
|
||||
on_focus=Some(Callback::new(move |_| {
|
||||
// Handle focus event if needed
|
||||
}))
|
||||
on_blur=Some(Callback::new(move |_| {
|
||||
// Handle blur event if needed
|
||||
}))
|
||||
input_type=InputType::TextArea
|
||||
suggestions=Vec::new() // No suggestions for custom properties
|
||||
show_suggestions=false // No suggestions for custom properties
|
||||
on_select_suggestion=None // No suggestions for custom properties
|
||||
/>
|
||||
</td>
|
||||
}
|
||||
}).collect::<Vec<_>>()
|
||||
}}
|
||||
</tr>
|
||||
}
|
||||
}).collect::<Vec<_>>()
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue