[pdm-devel] [PATCH datacenter-manager] fix: add details button to show subscriptions dialog

[Shan Shaji <s.shaji@proxmox.com>]

When clicking on the (www.proxmox.com) url on the subscriptions panel
the url will open and also the dialog window at the same time. Inorder
to fix the issue add a "Details" button on the subscriptions panel. Now
the dialog will only be shown when the "Details" button is clicked.

Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
 ui/src/dashboard/subscription_info.rs | 79 +++++++++++----------------
 ui/src/dashboard/view.rs              | 39 +++++++++++--
 2 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/ui/src/dashboard/subscription_info.rs b/ui/src/dashboard/subscription_info.rs
index a420601..fed2b2c 100644
--- a/ui/src/dashboard/subscription_info.rs
+++ b/ui/src/dashboard/subscription_info.rs
@@ -2,14 +2,13 @@ use std::rc::Rc;
 
 use anyhow::Error;
 use yew::{
-    html,
     virtual_dom::{VComp, VNode},
     Component, Html, Properties,
 };
 
 use proxmox_yew_comp::Status;
 use pwt::prelude::*;
-use pwt::widget::{Column, Container, Dialog, Fa, Panel, Row};
+use pwt::widget::{Button, Column, Container, Dialog, Fa, Panel, Row};
 use pwt::{
     css::{AlignItems, FlexFit, JustifyContent, TextAlign},
     state::SharedState,
@@ -30,13 +29,7 @@ impl SubscriptionInfo {
     }
 }
 
-enum Msg {
-    ShowDialog(Option<Dialog>),
-}
-
-struct PdmSubscriptionInfo {
-    dialog: Option<Dialog>,
-}
+struct PdmSubscriptionInfo;
 
 fn render_subscription_status(subs: &[RemoteSubscriptions]) -> Row {
     let mut none = 0;
@@ -103,49 +96,19 @@ fn render_subscription_status(subs: &[RemoteSubscriptions]) -> Row {
 }
 
 impl Component for PdmSubscriptionInfo {
-    type Message = Msg;
+    type Message = ();
     type Properties = SubscriptionInfo;
 
     fn create(_ctx: &yew::Context<Self>) -> Self {
-        Self { dialog: None }
-    }
-
-    fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            Msg::ShowDialog(dialog) => {
-                self.dialog = dialog;
-                true
-            }
-        }
+        Self {}
     }
 
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
         let props = ctx.props();
-
-        let mut column = Column::new()
+        Column::new()
             .class(FlexFit)
             .class(JustifyContent::Center)
-            .class(AlignItems::Center);
-
-        if let Some(subs) = props.subs.as_ref() {
-            let dialog = Dialog::new(tr!("Your Subscriptions"))
-                .resizable(true)
-                .width(500)
-                .height(400)
-                .min_width(200)
-                .min_height(50)
-                .with_child(SubscriptionsList::new(subs.clone()))
-                .on_close(ctx.link().callback(|_| Msg::ShowDialog(None)));
-
-            column = column
-                .onclick(
-                    ctx.link()
-                        .callback(move |_| Msg::ShowDialog(Some(dialog.clone()))),
-                )
-                .style("cursor", "pointer");
-        }
-
-        column
+            .class(AlignItems::Center)
             .with_optional_child(
                 props.subs.is_none().then_some(
                     Container::new()
@@ -159,7 +122,6 @@ impl Component for PdmSubscriptionInfo {
                     .as_ref()
                     .map(|subs| render_subscription_status(subs)),
             )
-            .with_optional_child(self.dialog.clone())
             .into()
     }
 }
@@ -171,8 +133,27 @@ impl From<SubscriptionInfo> for VNode {
     }
 }
 
+pub fn create_subscriptions_dialog(
+    subs: SharedState<LoadResult<Vec<RemoteSubscriptions>, Error>>,
+    on_dialog_close: Callback<()>,
+) -> Option<Dialog> {
+    if let Some(subs) = subs.read().data.clone() {
+        let dialog = Dialog::new(tr!("Your Subscriptions"))
+            .resizable(true)
+            .width(500)
+            .height(400)
+            .min_width(200)
+            .min_height(50)
+            .with_child(SubscriptionsList::new(subs.clone()))
+            .on_close(on_dialog_close);
+        return Some(dialog);
+    }
+    None
+}
+
 pub fn create_subscription_panel(
     subs: SharedState<LoadResult<Vec<RemoteSubscriptions>, Error>>,
+    on_details_clicked: Callback<MouseEvent>,
 ) -> Panel {
     let title: Html = Row::new()
         .class(AlignItems::Center)
@@ -181,8 +162,14 @@ pub fn create_subscription_panel(
         .with_child(tr!("Subscription Status"))
         .into();
 
-    Panel::new()
+    let mut panel = Panel::new()
         .title(title)
         .border(true)
-        .with_child(SubscriptionInfo::new(subs.read().data.clone()))
+        .with_child(SubscriptionInfo::new(subs.read().data.clone()));
+
+    if subs.read().data.is_some() {
+        panel.add_tool(Button::new(tr!("Details")).onclick(on_details_clicked));
+    }
+
+    panel
 }
diff --git a/ui/src/dashboard/view.rs b/ui/src/dashboard/view.rs
index 28fb015..5ddf5ff 100644
--- a/ui/src/dashboard/view.rs
+++ b/ui/src/dashboard/view.rs
@@ -3,6 +3,7 @@ use std::rc::Rc;
 use anyhow::Error;
 use futures::join;
 use js_sys::Date;
+use pwt::widget::Dialog;
 use serde_json::json;
 use yew::virtual_dom::{VComp, VNode};
 
@@ -18,6 +19,7 @@ use crate::dashboard::refresh_config_edit::{
     refresh_config_id, RefreshConfig, DEFAULT_MAX_AGE_S, DEFAULT_REFRESH_INTERVAL_S,
     FORCE_RELOAD_MAX_AGE_S, INITIAL_MAX_AGE_S,
 };
+use crate::dashboard::subscription_info::create_subscriptions_dialog;
 use crate::dashboard::tasks::get_task_options;
 use crate::dashboard::types::RowWidget;
 use crate::dashboard::types::{TaskSummaryGrouping, ViewLayout, ViewTemplate, WidgetType};
@@ -72,6 +74,7 @@ pub enum Msg {
     Reload(bool),       // force
     ConfigWindow(bool), // show
     UpdateConfig(RefreshConfig),
+    ShowSubscriptionsDialog(Option<Dialog>),
 }
 
 struct ViewComp {
@@ -90,6 +93,7 @@ struct ViewComp {
     load_finished_time: Option<f64>,
     show_config_window: bool,
     show_create_wizard: Option<RemoteType>,
+    subscriptions_dialog: Option<Dialog>,
 }
 
 fn render_widget(
@@ -110,7 +114,16 @@ fn render_widget(
             show_wizard.then_some(link.callback(|_| Msg::CreateWizard(Some(RemoteType::Pbs)))),
         ),
         WidgetType::PbsDatastores => create_pbs_datastores_panel(status),
-        WidgetType::Subscription => create_subscription_panel(subscriptions),
+        WidgetType::Subscription => create_subscription_panel(
+            subscriptions.clone(),
+            link.clone().callback(move |_| {
+                let dialog = create_subscriptions_dialog(
+                    subscriptions.clone(),
+                    link.callback(|_| Msg::ShowSubscriptionsDialog(None)),
+                );
+                Msg::ShowSubscriptionsDialog(dialog)
+            }),
+        ),
         WidgetType::Sdn => create_sdn_panel(status),
         WidgetType::Leaderboard { leaderboard_type } => {
             create_top_entities_panel(top_entities, *leaderboard_type)
@@ -269,6 +282,7 @@ impl Component for ViewComp {
             loading: true,
             show_config_window: false,
             show_create_wizard: None,
+            subscriptions_dialog: None,
         }
     }
 
@@ -324,6 +338,9 @@ impl Component for ViewComp {
 
                 self.show_config_window = false;
             }
+            Msg::ShowSubscriptionsDialog(dialog) => {
+                self.subscriptions_dialog = dialog;
+            }
         }
         true
     }
@@ -356,11 +373,18 @@ impl Component for ViewComp {
                 )),
         );
         if !has_sub_panel(self.template.data.as_ref()) {
-            view.add_child(
-                Row::new()
-                    .class("pwt-content-spacer")
-                    .with_child(create_subscription_panel(self.subscriptions.clone())),
-            );
+            let subs = self.subscriptions.clone();
+            let link = ctx.link().clone();
+            view.add_child(Row::new().class("pwt-content-spacer").with_child(
+                create_subscription_panel(
+                    subs.clone(),
+                    link.clone().callback(move |_| {
+                        let on_dialog_close = link.callback(|_| Msg::ShowSubscriptionsDialog(None));
+                        let dialog = create_subscriptions_dialog(subs.clone(), on_dialog_close);
+                        Msg::ShowSubscriptionsDialog(dialog)
+                    }),
+                ),
+            ));
         }
         match self.template.data.as_ref().map(|template| &template.layout) {
             Some(ViewLayout::Rows { rows }) => {
@@ -421,6 +445,9 @@ impl Component for ViewComp {
                 .on_close(ctx.link().callback(|_| Msg::CreateWizard(None)))
                 .on_submit(move |ctx| crate::remotes::create_remote(ctx, remote_type))
         }));
+
+        view.add_optional_child(self.subscriptions_dialog.clone());
+
         view.into()
     }
 }
-- 
2.47.3



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