[pdm-devel] [PATCH datacenter-manager v2 08/16] ui: dashboard: refactor subscription panel creation to its own module

[Dominik Csapak]

so we can more easily reuse it outside the dashboard struct.

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 ui/src/dashboard/mod.rs               |  9 ++++-
 ui/src/dashboard/subscription_info.rs | 54 +++++++++++++--------------
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
index c0b20b36..19a09a8c 100644
--- a/ui/src/dashboard/mod.rs
+++ b/ui/src/dashboard/mod.rs
@@ -34,7 +34,7 @@ mod top_entities;
 pub use top_entities::TopEntities;
 
 mod subscription_info;
-pub use subscription_info::SubscriptionInfo;
+pub use subscription_info::create_subscription_panel;
 
 mod node_panel;
 pub use node_panel::create_node_panel;
@@ -464,7 +464,12 @@ impl Component for PdmDashboard {
                     //                )
                     //        }),
                     //)
-                    .with_child(SubscriptionInfo::new()),
+                    .with_child(
+                        create_subscription_panel()
+                            .flex(1.0)
+                            .width(500)
+                            .min_height(150),
+                    ),
             )
             .with_child(
                 Container::new()
diff --git a/ui/src/dashboard/subscription_info.rs b/ui/src/dashboard/subscription_info.rs
index 08658d10..2a4d94b7 100644
--- a/ui/src/dashboard/subscription_info.rs
+++ b/ui/src/dashboard/subscription_info.rs
@@ -11,9 +11,7 @@ use proxmox_yew_comp::{http_get, Status};
 use pwt::{
     css::{AlignItems, FlexFit, JustifyContent, TextAlign},
     prelude::tr,
-    props::{
-        ContainerBuilder, CssBorderBuilder, CssPaddingBuilder, WidgetBuilder, WidgetStyleBuilder,
-    },
+    props::{ContainerBuilder, CssBorderBuilder, CssPaddingBuilder, WidgetBuilder},
     widget::{Column, Container, Fa, Panel, Row},
     AsyncPool,
 };
@@ -133,31 +131,19 @@ impl Component for PdmSubscriptionInfo {
     }
 
     fn view(&self, _ctx: &yew::Context<Self>) -> yew::Html {
-        let title: Html = Row::new()
+        Column::new()
+            .class(FlexFit)
+            .class(JustifyContent::Center)
             .class(AlignItems::Center)
-            .gap(2)
-            .with_child(Fa::new("ticket"))
-            .with_child(tr!("Subscription Status"))
-            .into();
-
-        Panel::new()
-            .flex(1.0)
-            .width(500)
-            .min_height(150)
-            .title(title)
-            .border(true)
-            .with_child(
-                Column::new()
-                    .class(FlexFit)
-                    .class(JustifyContent::Center)
-                    .class(AlignItems::Center)
-                    .with_optional_child(
-                        self.loading
-                            .then_some(html! {<i class={"pwt-loading-icon"} />}),
-                    )
-                    .with_optional_child(
-                        (!self.loading).then_some(render_subscription_status(&self.status)),
-                    ),
+            .with_optional_child(
+                self.loading.then_some(
+                    Container::new()
+                        .padding(4)
+                        .with_child(Container::from_tag("i").class("pwt-loading-icon")),
+                ),
+            )
+            .with_optional_child(
+                (!self.loading).then_some(render_subscription_status(&self.status)),
             )
             .into()
     }
@@ -169,3 +155,17 @@ impl From<SubscriptionInfo> for VNode {
         VNode::from(comp)
     }
 }
+
+pub fn create_subscription_panel() -> Panel {
+    let title: Html = Row::new()
+        .class(AlignItems::Center)
+        .gap(2)
+        .with_child(Fa::new("ticket"))
+        .with_child(tr!("Subscription Status"))
+        .into();
+
+    Panel::new()
+        .title(title)
+        .border(true)
+        .with_child(SubscriptionInfo::new())
+}
-- 
2.47.3