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

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

Browse source
This commit is contained in:
ryan 2025-01-08 03:02:05 +03:00
parent 5306efc447
commit 139ea0805c
1 changed files with 90 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/items_list.rs
View file

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