ryanmwangi/Compware
1
0
Fork 0
Code Issues Pull requests Releases Activity

feat(autosearch): improve blur and focus handling to help search wikidata suggestions while typing

Browse source
This commit is contained in:
ryan 2025-02-05 14:25:14 +03:00
parent 4bfd47d8c4
commit 0a8494596f
3 changed files with 160 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/style.css
View file

@ -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 */

59
src/components/editable_cell.rs
View file

@ -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| {
// 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);
};
// Commit the input value on blur or enter
let commit_input = move || {
let value = local_value.get();
log!("Committing input: {}", value);
on_input(value);
set_local_value.set(new_value.clone());
on_input_clone(new_value); // Use the cloned callback
}
};
// Focus handling
@ -46,13 +47,16 @@ pub fn EditableCell(
}
};
let handle_blur = move |_| {
log!("Focus lost");
// Blur handling
let handle_blur = {
let key = Arc::clone(&key);
move |_| {
log!("Focus lost for key: {}", key);
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
@ -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>
}
}

98
src/components/items_list.rs
View file

@ -596,6 +596,17 @@ pub fn ItemsList(
{match property {
"Name" => view! {
<div class="editable-cell">
{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| {
@ -622,83 +633,23 @@ pub fn ItemsList(
});
}))
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
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.description = description_for_click.clone();
item.wikidata_id = Some(id.clone());
item.name = label_for_click.clone();
item.name = suggestion.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()
@ -713,8 +664,12 @@ pub fn ItemsList(
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(),
@ -766,15 +721,20 @@ pub fn ItemsList(
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<_>>()}
}
}).collect::<Vec<_>>()
}}
</tr>
}
}).collect::<Vec<_>>()