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

feat(name field): edit components to debounce input events and improve logging

Browse source
This commit is contained in:
ryan 2025-02-10 21:10:46 +03:00
parent e57a4bbf65
commit 42f7cce2de
2 changed files with 28 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/editable_cell.rs
View file

@ -5,7 +5,7 @@ use leptos::logging::log;
#[component] #[component]
pub fn EditableCell( pub fn EditableCell(
value: String, value: String,
on_input: impl Fn(String) + 'static, on_input: impl Fn(String) + 'static + Clone,
key: Arc<String>, key: Arc<String>,
focused_cell: ReadSignal<Option<String>>, focused_cell: ReadSignal<Option<String>>,
set_focused_cell: WriteSignal<Option<String>>, set_focused_cell: WriteSignal<Option<String>>,
@ -16,7 +16,10 @@ pub fn EditableCell(
let input_ref = create_node_ref::<html::Input>(); let input_ref = create_node_ref::<html::Input>();
let textarea_ref = create_node_ref::<html::Textarea>(); let textarea_ref = create_node_ref::<html::Textarea>();
let (local_value, set_local_value) = create_signal(value.clone()); let (local_value, set_local_value) = create_signal(value.clone());
let (delayed_value, set_delayed_value) = create_signal(value.clone());
let input_type_clone = input_type.clone(); let input_type_clone = input_type.clone();
let on_input_ref = on_input;
// Handle input event // Handle input event
let handle_input = move |e: web_sys::Event| { let handle_input = move |e: web_sys::Event| {
let new_value = match input_type_clone { let new_value = match input_type_clone {
@ -24,14 +27,9 @@ pub fn EditableCell(
InputType::TextArea => event_target_value(&e), InputType::TextArea => event_target_value(&e),
}; };
log!("Input event: {}", new_value); log!("Input event: {}", new_value);
set_local_value.set(new_value); let new_value_clone = new_value.clone();
}; set_local_value.set(new_value_clone);
set_delayed_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);
}; };
// Focus handling // Focus handling
@ -49,7 +47,6 @@ pub fn EditableCell(
let handle_blur = move |_| { let handle_blur = move |_| {
log!("Focus lost"); log!("Focus lost");
set_focused_cell.set(None); set_focused_cell.set(None);
commit_input();
if let Some(on_blur) = &on_blur { if let Some(on_blur) = &on_blur {
on_blur.call(()); on_blur.call(());
} }
@ -65,6 +62,15 @@ pub fn EditableCell(
} }
}); });
create_effect(move |_| {
let delayed_value = delayed_value.get();
let on_input_ref_clone = on_input_ref.clone();
spawn_local(async move {
gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await;
on_input_ref_clone(delayed_value);
});
});
view! { view! {
<div class="editable-cell"> <div class="editable-cell">
{match input_type { {match input_type {

17
src/components/items_list.rs
View file

@ -601,15 +601,21 @@ pub fn ItemsList(
on_input=move |value| { on_input=move |value| {
// Update the item's name field // Update the item's name field
update_item(index, "name", value.clone()); update_item(index, "name", value.clone());
log!("Input value changed: {}", value);
// Log the current suggestions // Log the current suggestions
log!("Current suggestions: {:?}", wikidata_suggestions.get().get(&format!("name-{}", index))); log!("Current suggestions: {:?}", wikidata_suggestions.get().get(&format!("name-{}", index)));
// Debounce the API request by 500ms // Debounce the API request by 500ms
spawn_local(async move { spawn_local(async move {
log!("Starting debounce timer for 500ms");
gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await; gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await;
log!("Debounce timer completed, fetching suggestions");
spawn_local(async move { spawn_local(async move {
log!("Calling fetch_wikidata_suggestions for cell {} with value: {}", index, value);
fetch_wikidata_suggestions(format!("name-{}", index), value.clone()); fetch_wikidata_suggestions(format!("name-{}", index), value.clone());
log!("Updating show_suggestions to true for cell {}", index);
set_show_suggestions.update(|suggestions| { set_show_suggestions.update(|suggestions| {
suggestions.insert(format!("name-{}", index), true); suggestions.insert(format!("name-{}", index), true);
}); });
@ -623,16 +629,16 @@ pub fn ItemsList(
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 |_| { on_focus=Some(Callback::new(move |_| {
log!("Input focused, showing suggestions"); log!("Input focused, showing suggestions for cell {}", index);
set_show_suggestions.update(|suggestions| { set_show_suggestions.update(|suggestions| {
suggestions.insert(format!("name-{}", index), true); suggestions.insert(format!("name-{}", index), true);
}); });
})) }))
on_blur=Some(Callback::new(move |_| { on_blur=Some(Callback::new(move |_| {
log!("Input blurred, delaying hiding suggestions"); log!("Input blurred, delaying hiding suggestions for cell {}", index);
spawn_local(async move { spawn_local(async move {
gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await; gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await;
log!("Hiding suggestions after delay"); log!("Hiding suggestions after delay for cell {}", index);
set_show_suggestions.update(|suggestions| { set_show_suggestions.update(|suggestions| {
suggestions.insert(format!("name-{}", index), false); suggestions.insert(format!("name-{}", index), false);
}); });
@ -649,8 +655,9 @@ pub fn ItemsList(
<i class="fas fa-search"></i> Search Wiki <i class="fas fa-search"></i> Search Wiki
</button> </button>
{move || { {move || {
log!("Rendering suggestions list for cell {}", index);
if *show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false) { if *show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false) {
log!("Rendering suggestions list"); log!("Suggestions list is visible for cell {}", index);
view! { view! {
<ul class="editable-cell-suggestions"> <ul class="editable-cell-suggestions">
{move || { {move || {
@ -708,7 +715,7 @@ pub fn ItemsList(
</ul> </ul>
} }
} else { } else {
log!("Suggestions list hidden"); log!("Suggestions list is hidden for cell {}", index);
view! { view! {
<ul></ul> <ul></ul>
} }