[pdm-devel] [PATCH datacenter-manager] ui: adapt to new node_ref semantic for new pwt

[pdm-devel] [PATCH datacenter-manager] ui: adapt to new node_ref semantic for new pwt

[Dominik Csapak]

node_ref is not a std property anymore, but only defined for things that
are vtags, so we have to use into_html_with_ref for those things, or
wrap other elements in a container. There we use 'display: contents' to
make sure layouting/style etc. work as before.

In case of the search box, we can remove the noderef completely because
we didn't use it at all.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
needs a bumped pwt + yew-comp to work

 ui/src/dashboard/top_entities.rs |  8 ++++----
 ui/src/widget/search_box.rs      | 26 ++++++++++++++------------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/ui/src/dashboard/top_entities.rs b/ui/src/dashboard/top_entities.rs
index 4425fd2..c93ee25 100644
--- a/ui/src/dashboard/top_entities.rs
+++ b/ui/src/dashboard/top_entities.rs
@@ -11,7 +11,7 @@ use pwt::{
     css::{AlignItems, Display, FlexFit, JustifyContent},
     dom::align::{align_to, AlignOptions},
     props::{
-        ContainerBuilder, CssLength, CssPaddingBuilder, EventSubscriber, WidgetBuilder,
+        ContainerBuilder, CssLength, CssPaddingBuilder, EventSubscriber, IntoVTag, WidgetBuilder,
         WidgetStyleBuilder,
     },
     tr,
@@ -142,10 +142,10 @@ impl Component for TopEntitiesComp {
                     tooltip = Some(create_tooltip(remote, resource, info, &props.metrics_title));
                     Some(
                         Container::new()
-                            .node_ref(self.tooltip_anchor.clone())
                             .style("position", "absolute")
                             .style("pointer-events", "none")
-                            .style("left", format!("{}px", info.pos)),
+                            .style("left", format!("{}px", info.pos))
+                            .into_html_with_ref(self.tooltip_anchor.clone()),
                     )
                 } else {
                     None
@@ -202,13 +202,13 @@ impl Component for TopEntitiesComp {
             .with_child(list)
             .with_optional_child(tooltip.map(|tooltip| {
                 Container::new()
-                    .node_ref(self.tooltip_ref.clone())
                     .attribute("role", "tooltip")
                     .attribute("aria-live", "polite")
                     .attribute("data-show", "")
                     .class("pwt-tooltip")
                     .class("pwt-tooltip-rich")
                     .with_child(tooltip)
+                    .into_html_with_ref(self.tooltip_ref.clone())
             }))
             .into()
     }
diff --git a/ui/src/widget/search_box.rs b/ui/src/widget/search_box.rs
index 3a52411..15100a6 100644
--- a/ui/src/widget/search_box.rs
+++ b/ui/src/widget/search_box.rs
@@ -45,7 +45,6 @@ pub enum Msg {
 
 pub struct PdmSearchBox {
     search_field_ref: NodeRef,
-    search_box_ref: NodeRef,
     search_term: String,
     focus_tracker: FocusTracker,
     focus: bool,
@@ -72,7 +71,6 @@ impl Component for PdmSearchBox {
         });
         Self {
             search_field_ref: Default::default(),
-            search_box_ref: Default::default(),
             search_term: String::new(),
             focus_tracker: FocusTracker::new(ctx.link().callback(Msg::FocusChange)),
             focus: false,
@@ -115,7 +113,6 @@ impl Component for PdmSearchBox {
 
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
         let search_result = ResourceTree::new()
-            .node_ref(self.search_box_ref.clone())
             .search_term(self.search_term.clone())
             .search_only(true)
             .style("position", "absolute")
@@ -147,16 +144,21 @@ impl Component for PdmSearchBox {
             .style("flex-basis", "230px") // to avoid changing size with trigger
             .min_width(230) // placeholder text
             .with_child(
-                Field::new()
-                    .placeholder(tr!("Search (Ctrl+Space / Ctrl+Shift+F)"))
-                    .node_ref(self.search_field_ref.clone())
-                    .value(self.force_value.then_some(self.search_term.clone()))
-                    .with_trigger(
-                        Trigger::new(clear_trigger_icon)
-                            .onclick(ctx.link().callback(|_| Msg::ChangeTerm("".into(), true))),
-                        true,
+                Container::new()
+                    .style("display", "contents")
+                    .with_child(
+                        Field::new()
+                            .placeholder(tr!("Search (Ctrl+Space / Ctrl+Shift+F)"))
+                            .value(self.force_value.then_some(self.search_term.clone()))
+                            .with_trigger(
+                                Trigger::new(clear_trigger_icon).onclick(
+                                    ctx.link().callback(|_| Msg::ChangeTerm("".into(), true)),
+                                ),
+                                true,
+                            )
+                            .on_input(ctx.link().callback(|term| Msg::ChangeTerm(term, false))),
                     )
-                    .on_input(ctx.link().callback(|term| Msg::ChangeTerm(term, false))),
+                    .into_html_with_ref(self.search_field_ref.clone()),
             )
             .with_child(search_result)
             .into()
-- 
2.47.3



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel