[pdm-devel] [PATCH datacenter-manager] ui: remotes: add navigation router to tab panels

[Dominik Csapak <d.csapak@proxmox.com>]

that way the state is preserved across reloads and the changes are
recorded in the browser history.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pbs/datastore.rs | 3 +++
 ui/src/pbs/mod.rs       | 2 ++
 ui/src/pbs/node/mod.rs  | 1 +
 ui/src/pve/lxc/mod.rs   | 1 +
 ui/src/pve/mod.rs       | 1 +
 ui/src/pve/node/mod.rs  | 1 +
 ui/src/pve/qemu/mod.rs  | 1 +
 7 files changed, 10 insertions(+)

diff --git a/ui/src/pbs/datastore.rs b/ui/src/pbs/datastore.rs
index 3d4e6b6e..274c6ef9 100644
--- a/ui/src/pbs/datastore.rs
+++ b/ui/src/pbs/datastore.rs
@@ -46,10 +46,12 @@ impl Component for DatastorePanelComp {
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
         let props = ctx.props();
         pwt::widget::TabPanel::new()
+            .router(true)
             .class(FlexFit)
             .title(tr!("Datastore {0}", props.config.name))
             .with_item_builder(
                 TabBarItem::new()
+                    .key("overview")
                     .label(tr!("Overview"))
                     .icon_class("fa fa-tachometer"),
                 {
@@ -60,6 +62,7 @@ impl Component for DatastorePanelComp {
             )
             .with_item_builder(
                 TabBarItem::new()
+                    .key("content")
                     .label(tr!("Content"))
                     .icon_class("fa fa-th"),
                 {
diff --git a/ui/src/pbs/mod.rs b/ui/src/pbs/mod.rs
index 75ed9926..d14809c2 100644
--- a/ui/src/pbs/mod.rs
+++ b/ui/src/pbs/mod.rs
@@ -114,6 +114,8 @@ impl LoadableComponent for PbsRemoteComp {
             }
         };
 
+        let content = NavigationContainer::new().with_child(content);
+
         let title: Html = Row::new()
             .gap(2)
             .class(AlignItems::Center)
diff --git a/ui/src/pbs/node/mod.rs b/ui/src/pbs/node/mod.rs
index bab5727c..2033bb14 100644
--- a/ui/src/pbs/node/mod.rs
+++ b/ui/src/pbs/node/mod.rs
@@ -64,6 +64,7 @@ impl yew::Component for PbsNodePanelComp {
             .into();
 
         TabPanel::new()
+            .router(true)
             .class(pwt::css::FlexFit)
             .title(title)
             .class(ColorScheme::Neutral)
diff --git a/ui/src/pve/lxc/mod.rs b/ui/src/pve/lxc/mod.rs
index 3d983a08..97c4d083 100644
--- a/ui/src/pve/lxc/mod.rs
+++ b/ui/src/pve/lxc/mod.rs
@@ -60,6 +60,7 @@ impl yew::Component for LxcPanelComp {
             .into();
 
         TabPanel::new()
+            .router(true)
             .class(pwt::css::FlexFit)
             .title(title)
             .with_item_builder(
diff --git a/ui/src/pve/mod.rs b/ui/src/pve/mod.rs
index 4629077e..afbed5a8 100644
--- a/ui/src/pve/mod.rs
+++ b/ui/src/pve/mod.rs
@@ -200,6 +200,7 @@ impl LoadableComponent for PveRemoteComp {
                     .into()
             }
         };
+        let content = NavigationContainer::new().with_child(content);
 
         let link = ctx.link();
 
diff --git a/ui/src/pve/node/mod.rs b/ui/src/pve/node/mod.rs
index de79185a..66ce8dda 100644
--- a/ui/src/pve/node/mod.rs
+++ b/ui/src/pve/node/mod.rs
@@ -68,6 +68,7 @@ impl yew::Component for PveNodePanelComp {
             .into();
 
         TabPanel::new()
+            .router(true)
             .class(pwt::css::FlexFit)
             .title(title)
             .class(ColorScheme::Neutral)
diff --git a/ui/src/pve/qemu/mod.rs b/ui/src/pve/qemu/mod.rs
index 3b5f01b2..b3388f41 100644
--- a/ui/src/pve/qemu/mod.rs
+++ b/ui/src/pve/qemu/mod.rs
@@ -59,6 +59,7 @@ impl yew::Component for QemuPanelComp {
             .into();
 
         TabPanel::new()
+            .router(true)
             .class(pwt::css::FlexFit)
             .title(title)
             .with_item_builder(
-- 
2.47.3



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