From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id E48E41FF15C for ; Fri, 5 Sep 2025 09:30:04 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 6F413D0E8; Fri, 5 Sep 2025 09:30:03 +0200 (CEST) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Date: Fri, 5 Sep 2025 09:29:20 +0200 Message-ID: <20250905072928.782706-1-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.2 MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.021 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pdm-devel] [PATCH datacenter-manager] ui: search box: close if user navigated to an entry X-BeenThere: pdm-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox Datacenter Manager development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pdm-devel-bounces@lists.proxmox.com Sender: "pdm-devel" either by clicking or using the keyboard. For this we need to add a new 'on_navigate' callback in the ResourceTree that triggers when the user navigated away. While at it, refactor the navigation callbacks into the update method. Signed-off-by: Dominik Csapak --- ui/src/widget/resource_tree.rs | 66 ++++++++++++++++++---------------- ui/src/widget/search_box.rs | 6 ++++ 2 files changed, 42 insertions(+), 30 deletions(-) diff --git a/ui/src/widget/resource_tree.rs b/ui/src/widget/resource_tree.rs index aefcaf6..708df65 100644 --- a/ui/src/widget/resource_tree.rs +++ b/ui/src/widget/resource_tree.rs @@ -4,7 +4,7 @@ use anyhow::Error; use gloo_timers::callback::Timeout; use serde_json::json; use web_sys::window; -use yew::{virtual_dom::Key, Component}; +use yew::{html::IntoEventCallback, virtual_dom::Key, Component}; use pwt::{ css::{FlexFit, FontColor}, @@ -48,6 +48,11 @@ pub struct ResourceTree { #[builder] /// If this is true, we wait with the load until we have a search term pub search_only: bool, + + #[prop_or_default] + #[builder_cb(IntoEventCallback, into_event_callback, ())] + /// Triggered after the user navigated to an entry by clicking or using the keyboard + pub on_navigate: Option>, } impl ResourceTree { @@ -91,6 +96,7 @@ pub enum Msg { Load, LoadResult(Result, Error>), RemoteListChanged(RemoteList), + NavigateToEntry(Key), } pub struct PdmResourceTree { @@ -193,6 +199,32 @@ impl Component for PdmResourceTree { } true } + Msg::NavigateToEntry(key) => { + let store = self.store.read(); + let root = store.root().unwrap(); + + let mut navigated = false; + if let Some(node) = root.find_node_by_key(&key) { + match node.record() { + PdmTreeEntry::Root => {} + PdmTreeEntry::Resource(remote, resource) => { + crate::navigate_to(ctx.link(), remote, Some(resource)); + navigated = true; + } + PdmTreeEntry::Remote(remote, _) => { + crate::navigate_to(ctx.link(), remote, None); + navigated = true; + } + } + } + + if navigated { + if let Some(cb) = &ctx.props().on_navigate { + cb.emit(()); + } + } + false + } } } @@ -217,30 +249,16 @@ impl Component for PdmResourceTree { let table = DataTable::new(columns(ctx.link(), self.store.clone()), self.store.clone()) .selection(self.selection.clone()) .on_row_click({ - let store = self.store.clone(); let link = ctx.link().clone(); move |event: &mut DataTableMouseEvent| { - let store = store.read(); - let root = store.root().unwrap(); - - if let Some(node) = root.find_node_by_key(&event.record_key) { - navigate_to_entry(&link, node.record()); - } + link.send_message(Msg::NavigateToEntry(event.record_key.clone())); } }) .on_row_keydown({ - let store = self.store.clone(); let link = ctx.link().clone(); move |event: &mut DataTableKeyboardEvent| { - let store = store.read(); - let root = store.root().unwrap(); - - if event.key().as_str() != "Enter" { - return; - } - - if let Some(node) = root.find_node_by_key(&event.record_key) { - navigate_to_entry(&link, node.record()); + if let "Enter" | " " = event.key().as_str() { + link.send_message(Msg::NavigateToEntry(event.record_key.clone())) } } }) @@ -286,18 +304,6 @@ impl Component for PdmResourceTree { } } -fn navigate_to_entry(link: &html::Scope, record: &PdmTreeEntry) { - match record { - PdmTreeEntry::Root => {} - PdmTreeEntry::Resource(remote, resource) => { - crate::navigate_to(link, remote, Some(resource)); - } - PdmTreeEntry::Remote(remote, _) => { - crate::navigate_to(link, remote, None); - } - } -} - fn columns( link: &html::Scope, store: TreeStore, diff --git a/ui/src/widget/search_box.rs b/ui/src/widget/search_box.rs index 52bb156..3a52411 100644 --- a/ui/src/widget/search_box.rs +++ b/ui/src/widget/search_box.rs @@ -40,6 +40,7 @@ pub enum Msg { ChangeTerm(String, bool), // force value FocusChange(bool), ToggleFocus, + NavigatedToEntry, } pub struct PdmSearchBox { @@ -105,6 +106,10 @@ impl Component for PdmSearchBox { self.toggle_focus = true; true } + Msg::NavigatedToEntry => { + self.focus = false; + true + } } } @@ -126,6 +131,7 @@ impl Component for PdmSearchBox { .border(true) .width(CssLength::Fraction(0.5)) .height(400) + .on_navigate(ctx.link().callback(|_| Msg::NavigatedToEntry)) .class("pwt-shadow2"); let clear_trigger_icon = if self.search_term.is_empty() { -- 2.47.2 _______________________________________________ pdm-devel mailing list pdm-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel