From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <pdm-devel-bounces@lists.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9])
by lore.proxmox.com (Postfix) with ESMTPS id CDEA71FF164
for <inbox@lore.proxmox.com>; Fri, 11 Apr 2025 16:05:28 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id F0DB71C045;
Fri, 11 Apr 2025 16:05:23 +0200 (CEST)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pdm-devel@lists.proxmox.com
Date: Fri, 11 Apr 2025 16:05:18 +0200
Message-Id: <20250411140520.1475644-3-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.39.5
In-Reply-To: <20250411140520.1475644-1-d.csapak@proxmox.com>
References: <20250411140520.1475644-1-d.csapak@proxmox.com>
MIME-Version: 1.0
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.022 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
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 1/3] ui: improve keyboard
navigation for search box
X-BeenThere: pdm-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Datacenter Manager development discussion
<pdm-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pdm-devel>,
<mailto:pdm-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pdm-devel/>
List-Post: <mailto:pdm-devel@lists.proxmox.com>
List-Help: <mailto:pdm-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel>,
<mailto:pdm-devel-request@lists.proxmox.com?subject=subscribe>
Reply-To: Proxmox Datacenter Manager development discussion
<pdm-devel@lists.proxmox.com>
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Errors-To: pdm-devel-bounces@lists.proxmox.com
Sender: "pdm-devel" <pdm-devel-bounces@lists.proxmox.com>
instead of triggering a navigation on selection change, trigger it only
on click and on pressing enter. With this, navigation in the tree is
possible without changing the current route.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
ui/src/widget/resource_tree.rs | 76 ++++++++++++++++++++++------------
1 file changed, 50 insertions(+), 26 deletions(-)
diff --git a/ui/src/widget/resource_tree.rs b/ui/src/widget/resource_tree.rs
index 1b764f7..feff308 100644
--- a/ui/src/widget/resource_tree.rs
+++ b/ui/src/widget/resource_tree.rs
@@ -12,7 +12,10 @@ use pwt::{
props::ExtractPrimaryKey,
state::{Selection, TreeStore},
widget::{
- data_table::{DataTable, DataTableColumn, DataTableHeader},
+ data_table::{
+ DataTable, DataTableColumn, DataTableHeader, DataTableKeyboardEvent,
+ DataTableMouseEvent,
+ },
ActionIcon, Column, Container, Fa, Panel, Progress, Row, Tooltip,
},
};
@@ -118,28 +121,8 @@ impl Component for PdmResourceTree {
}
let store = TreeStore::new().view_root(false);
- let selection = Selection::new().on_select({
- let store = store.clone();
- let link = ctx.link().clone();
- move |selection: Selection| {
- let store = store.read();
- let root = store.root().unwrap();
-
- if let Some(key) = selection.selected_key() {
- if let Some(node) = root.find_node_by_key(&key) {
- match node.record() {
- PdmTreeEntry::Resource(remote, resource) => {
- crate::navigate_to(&link, remote, Some(resource));
- }
- PdmTreeEntry::Remote(remote, _) => {
- crate::navigate_to(&link, remote, None);
- }
- _ => {}
- }
- }
- }
- }
- });
+ let selection = Selection::new();
+
Self {
loading: false,
last_error: None,
@@ -231,8 +214,36 @@ impl Component for PdmResourceTree {
fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
let props = ctx.props();
- let table = DataTable::new(columns(&ctx.link(), self.store.clone()), self.store.clone())
+ 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());
+ }
+ }
+ })
+ .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());
+ }
+ }
+ })
.class(FlexFit)
.hover(true)
.borderless(true);
@@ -275,6 +286,18 @@ impl Component for PdmResourceTree {
}
}
+fn navigate_to_entry(link: &html::Scope<PdmResourceTree>, 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<PdmResourceTree>,
store: TreeStore<PdmTreeEntry>,
@@ -316,14 +339,15 @@ fn columns(
.into()
})
.into(),
- DataTableColumn::new(tr!("Node"))
+ DataTableColumn::new(tr!("Node/Error"))
.flex(2)
.render(|item: &PdmTreeEntry| {
match item {
PdmTreeEntry::Root => "",
PdmTreeEntry::Resource(_, resource) => {
- get_resource_node(&resource).unwrap_or("")
+ get_resource_node(resource).unwrap_or("")
}
+ PdmTreeEntry::Remote(_, Some(err)) => err,
PdmTreeEntry::Remote(_, _) => "",
}
.into()
--
2.39.5
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel