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]
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>>,
@ -16,7 +16,10 @@ pub fn EditableCell(
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 (delayed_value, set_delayed_value) = create_signal(value.clone());
let input_type_clone = input_type.clone();
let on_input_ref = on_input;
// Handle input event
let handle_input = move |e: web_sys::Event| {
let new_value = match input_type_clone {
@ -24,14 +27,9 @@ pub fn EditableCell(
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);
let new_value_clone = new_value.clone();
set_local_value.set(new_value_clone);
set_delayed_value.set(new_value);
};
// Focus handling
@ -49,7 +47,6 @@ 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(());
}
@ -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! {
<div class="editable-cell">
{match input_type {

17
src/components/items_list.rs
View file

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