[pdm-devel] [PATCH datacenter-manager] ui: remotes: use ConfirmButton component instead of ConfirmDialog

[pdm-devel] [PATCH datacenter-manager] ui: remotes: use ConfirmButton component instead of ConfirmDialog

[Shannon Sterz]

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 ui/src/remotes/mod.rs | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/ui/src/remotes/mod.rs b/ui/src/remotes/mod.rs
index c9a4e43..9b9de06 100644
--- a/ui/src/remotes/mod.rs
+++ b/ui/src/remotes/mod.rs
@@ -27,8 +27,6 @@ use anyhow::Error;
 use edit_remote::EditRemote;
 //use pwt::widget::form::{Field, FormContext, InputType};
 
-use pwt::widget::ConfirmDialog;
-
 use pdm_api_types::remotes::Remote;
 //use proxmox_schema::{property_string::PropertyString, ApiType};
 use proxmox_yew_comp::percent_encoding::percent_encode_component;
@@ -54,7 +52,9 @@ use pwt::widget::{
 //use pwt::widget::InputPanel;
 
 //use proxmox_yew_comp::EditWindow;
-use proxmox_yew_comp::{LoadableComponent, LoadableComponentContext, LoadableComponentMaster};
+use proxmox_yew_comp::{
+    ConfirmButton, LoadableComponent, LoadableComponentContext, LoadableComponentMaster,
+};
 
 use pdm_api_types::remotes::{NodeUrl, RemoteType};
 
@@ -120,7 +120,6 @@ impl RemoteConfigPanel {
 pub enum ViewState {
     Add(RemoteType),
     Edit,
-    ConfirmRemove,
 }
 
 pub enum Msg {
@@ -220,10 +219,12 @@ impl LoadableComponent for PbsRemoteConfigPanel {
                     .disabled(disabled)
                     .onclick(link.change_view_callback(|_| Some(ViewState::Edit))),
             )
-            .with_child(Button::new(tr!("Remove")).disabled(disabled).onclick({
-                let link = link.clone();
-                move |_| link.change_view(Some(ViewState::ConfirmRemove))
-            }))
+            .with_child(
+                ConfirmButton::new(tr!("Remove"))
+                    .confirm_message(tr!("Are you sure you want to remove this remote?"))
+                    .disabled(disabled)
+                    .on_activate(link.callback(|_| Msg::RemoveItem)),
+            )
             .with_flex_spacer()
             .with_child({
                 let loading = ctx.loading();
@@ -257,15 +258,6 @@ impl LoadableComponent for PbsRemoteConfigPanel {
                 .selection
                 .selected_key()
                 .map(|key| self.create_edit_dialog(ctx, key)),
-            ViewState::ConfirmRemove => self.selection.selected_key().map(|key| {
-                ConfirmDialog::new()
-                    .title(tr!("Confirm: Remove Remote"))
-                    .confirm_text(tr!("Remove"))
-                    .confirm_message(tr!("Are you sure you want to remove the remote '{0}' ?", key))
-                    .on_confirm(ctx.link().callback(|_| Msg::RemoveItem))
-                    .on_done(ctx.link().change_view_callback(|_| None))
-                    .into()
-            }),
         }
     }
 }
-- 
2.39.5



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

[pdm-devel] [PATCH proxmox-yew-comp 2/2] confirm_button: use confirm dialog and always spawn a dialog

[Shannon Sterz]

this uses the new `ConfirmDialog` component from pwt and now always
spawns a dialog, even if no explicit confirm message was set.

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 src/confirm_button.rs | 30 ++++++++++--------------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/confirm_button.rs b/src/confirm_button.rs
index 95b2b6d..9406d4b 100644
--- a/src/confirm_button.rs
+++ b/src/confirm_button.rs
@@ -1,8 +1,8 @@
 use yew::html::{IntoEventCallback, IntoPropValue};
 
+use pwt::prelude::*;
 use pwt::props::IntoOptionalInlineHtml;
-use pwt::widget::{Button, Column, MessageBoxButtons};
-use pwt::{prelude::*, widget::MessageBox};
+use pwt::widget::{Button, Column, ConfirmDialog};
 
 use pwt_macros::{builder, widget};
 
@@ -122,25 +122,15 @@ impl Component for ProxmoxConfirmButton {
         let props = ctx.props();
         match msg {
             Msg::Request => {
-                if let Some(message) = &props.confirm_message {
-                    if self.dialog.is_some() {
-                        return false;
-                    }
-
-                    let dialog = MessageBox::new(tr!("Confirm"), message.clone())
-                        .buttons(MessageBoxButtons::YesNo)
-                        .on_close(ctx.link().callback(|confirm| {
-                            if confirm {
-                                Msg::Activate
-                            } else {
-                                Msg::CloseDialog
-                            }
-                        }));
-
-                    self.dialog = Some(dialog.into());
-                } else {
-                    ctx.link().send_message(Msg::Activate);
+                let mut dialog = ConfirmDialog::default()
+                    .on_confirm(ctx.link().callback(|_| Msg::Activate))
+                    .on_close(ctx.link().callback(|_| Msg::CloseDialog));
+
+                if let Some(confirm_message) = &props.confirm_message {
+                    dialog.set_confirm_message(confirm_message.clone())
                 }
+
+                self.dialog = Some(dialog.into());
                 true
             }
             Msg::Activate => {
-- 
2.39.5



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

[pdm-devel] [PATCH yew-widget-toolkit] widget: confirm_dialog: refactor to use message box

[Shannon Sterz]

this allows using an icon next to the message and generally simplifies
the code.

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 src/widget/confirm_dialog.rs | 100 ++++++++++++++++-------------------
 1 file changed, 47 insertions(+), 53 deletions(-)

diff --git a/src/widget/confirm_dialog.rs b/src/widget/confirm_dialog.rs
index 64ce5105..1c84952b 100644
--- a/src/widget/confirm_dialog.rs
+++ b/src/widget/confirm_dialog.rs
@@ -1,50 +1,64 @@
 use std::rc::Rc;
 
-use crate::props::{ContainerBuilder, CssPaddingBuilder, EventSubscriber, WidgetBuilder};
-use crate::widget::{Button, Container, Dialog, Toolbar};
 use html::{IntoEventCallback, IntoPropValue};
 use pwt_macros::builder;
-use wasm_bindgen::JsCast;
 use yew::prelude::*;
 use yew::virtual_dom::{VComp, VNode};
 
+use crate::tr;
+
+use super::MessageBox;
+
 #[derive(Clone, PartialEq, Properties)]
 #[builder]
+/// A dialog that can be used to let users confirm an action before it is taken.
 pub struct ConfirmDialog {
+    /// The title of the dialog.
     #[prop_or_default]
     #[builder(IntoPropValue, into_prop_value)]
     pub title: AttrValue,
 
-    #[prop_or_default]
+    /// A message that conveys what will be confirmed.
+    #[prop_or(html!(tr!("Confirm this action?")))]
     #[builder(IntoPropValue, into_prop_value)]
-    pub confirm_text: AttrValue,
+    pub confirm_message: Html,
 
-    #[prop_or_default]
-    #[builder(IntoPropValue, into_prop_value)]
-    pub confirm_message: AttrValue,
+    /// An icon that will be shown in the dialogs message.
+    #[prop_or("fa fa-exclamation-triangle".into())]
+    #[builder(Into, into)]
+    pub icon_class: Classes,
 
-    #[builder_cb(IntoEventCallback, into_event_callback, ())]
+    /// A callback for an action that needs to be confirmed by the user.
     #[prop_or_default]
+    #[builder_cb(IntoEventCallback, into_event_callback, ())]
     pub on_confirm: Option<Callback<()>>,
 
-    #[builder_cb(IntoEventCallback, into_event_callback, ())]
+    /// A callback that will trigger if the user dismisses the action.
     #[prop_or_default]
-    pub on_close: Option<Callback<()>>,
-
     #[builder_cb(IntoEventCallback, into_event_callback, ())]
+    pub on_dismiss: Option<Callback<()>>,
+
+    /// A callback that will trigger if the dialog is closed, regardless of whether the action was
+    /// confirmed or not.
     #[prop_or_default]
-    pub on_done: Option<Callback<()>>,
+    #[builder_cb(IntoEventCallback, into_event_callback, ())]
+    pub on_close: Option<Callback<()>>,
 }
 
 impl ConfirmDialog {
-    pub fn new() -> Self {
-        yew::props!(Self {})
+    pub fn new(title: impl Into<AttrValue>, confirm_message: impl Into<AttrValue>) -> Self {
+        yew::props!(Self {
+            title: title.into(),
+            confirm_message: Some(html! {confirm_message.into()})
+        })
     }
 }
 
 impl Default for ConfirmDialog {
     fn default() -> Self {
-        Self::new()
+        yew::props!(Self {
+            title: tr!("Confirm"),
+        })
     }
 }
 
@@ -71,46 +85,26 @@ impl Component for PwtConfirmDialog {
     fn view(&self, ctx: &Context<Self>) -> Html {
         let props = ctx.props();
 
-        Dialog::new(props.title.clone())
-            .with_child(
-                Container::new()
-                    .padding(4)
-                    .class("pwt-d-felx pwt-flex-direction-column")
-                    .with_child(props.confirm_message.clone()),
-            )
-            .with_child(Toolbar::new().with_flex_spacer().with_child(
-                Button::new(props.confirm_text.clone()).onclick({
-                    let on_confirm = props.on_confirm.clone();
-                    let on_done = props.on_done.clone();
-
-                    move |e: MouseEvent| {
-                        let event = e.unchecked_into::<Event>();
-                        event.prevent_default();
-
-                        if let Some(on_confirm) = &on_confirm {
-                            on_confirm.emit(());
-                        }
-
-                        if let Some(on_done) = &on_done {
-                            on_done.emit(());
-                        }
-                    }
-                }),
-            ))
-            .on_close({
-                let on_close = props.on_close.clone();
-                let on_done = props.on_done.clone();
-
-                move |()| {
-                    if let Some(on_close) = &on_close {
-                        on_close.emit(());
+        let on_confirm = props.on_confirm.clone();
+        let on_dismiss = props.on_dismiss.clone();
+        let on_close = props.on_close.clone();
+
+        MessageBox::new(props.title.clone(), props.confirm_message.clone())
+            .buttons(super::MessageBoxButtons::YesNo)
+            .icon_class(props.icon_class.clone())
+            .on_close(ctx.link().callback(move |confirm| {
+                if confirm {
+                    if let Some(on_confirm) = &on_confirm {
+                        on_confirm.emit(());
                     }
+                } else if let Some(on_dismiss) = &on_dismiss {
+                    on_dismiss.emit(());
+                }
 
-                    if let Some(on_done) = &on_done {
-                        on_done.emit(());
-                    }
+                if let Some(on_close) = &on_close {
+                    on_close.emit(());
                 }
-            })
+            }))
             .into()
     }
 }
-- 
2.39.5



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

Re: [pdm-devel] [PATCH datacenter-manager] ui: remotes: use ConfirmButton component instead of ConfirmDialog

[Dominik Csapak]

content and functionality wise all 3 patches look good to me
(and work fine in my testing)

On 12/19/24 12:00, Shannon Sterz wrote:
> Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
> ---
>   ui/src/remotes/mod.rs | 26 +++++++++-----------------
>   1 file changed, 9 insertions(+), 17 deletions(-)
> 
> diff --git a/ui/src/remotes/mod.rs b/ui/src/remotes/mod.rs
> index c9a4e43..9b9de06 100644
> --- a/ui/src/remotes/mod.rs
> +++ b/ui/src/remotes/mod.rs
> @@ -27,8 +27,6 @@ use anyhow::Error;
>   use edit_remote::EditRemote;
>   //use pwt::widget::form::{Field, FormContext, InputType};
>   
> -use pwt::widget::ConfirmDialog;
> -
>   use pdm_api_types::remotes::Remote;
>   //use proxmox_schema::{property_string::PropertyString, ApiType};
>   use proxmox_yew_comp::percent_encoding::percent_encode_component;
> @@ -54,7 +52,9 @@ use pwt::widget::{
>   //use pwt::widget::InputPanel;
>   
>   //use proxmox_yew_comp::EditWindow;
> -use proxmox_yew_comp::{LoadableComponent, LoadableComponentContext, LoadableComponentMaster};
> +use proxmox_yew_comp::{
> +    ConfirmButton, LoadableComponent, LoadableComponentContext, LoadableComponentMaster,
> +};
>   
>   use pdm_api_types::remotes::{NodeUrl, RemoteType};
>   
> @@ -120,7 +120,6 @@ impl RemoteConfigPanel {
>   pub enum ViewState {
>       Add(RemoteType),
>       Edit,
> -    ConfirmRemove,
>   }
>   
>   pub enum Msg {
> @@ -220,10 +219,12 @@ impl LoadableComponent for PbsRemoteConfigPanel {
>                       .disabled(disabled)
>                       .onclick(link.change_view_callback(|_| Some(ViewState::Edit))),
>               )
> -            .with_child(Button::new(tr!("Remove")).disabled(disabled).onclick({
> -                let link = link.clone();
> -                move |_| link.change_view(Some(ViewState::ConfirmRemove))
> -            }))
> +            .with_child(
> +                ConfirmButton::new(tr!("Remove"))
> +                    .confirm_message(tr!("Are you sure you want to remove this remote?"))
> +                    .disabled(disabled)
> +                    .on_activate(link.callback(|_| Msg::RemoveItem)),
> +            )
>               .with_flex_spacer()
>               .with_child({
>                   let loading = ctx.loading();
> @@ -257,15 +258,6 @@ impl LoadableComponent for PbsRemoteConfigPanel {
>                   .selection
>                   .selected_key()
>                   .map(|key| self.create_edit_dialog(ctx, key)),
> -            ViewState::ConfirmRemove => self.selection.selected_key().map(|key| {
> -                ConfirmDialog::new()
> -                    .title(tr!("Confirm: Remove Remote"))
> -                    .confirm_text(tr!("Remove"))
> -                    .confirm_message(tr!("Are you sure you want to remove the remote '{0}' ?", key))
> -                    .on_confirm(ctx.link().callback(|_| Msg::RemoveItem))
> -                    .on_done(ctx.link().change_view_callback(|_| None))
> -                    .into()
> -            }),

this hunk has a merge conflict with:

https://lists.proxmox.com/pipermail/pdm-devel/2024-December/000012.html

due to an accidental rustfmt hunk there

>           }
>       }
>   }



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

[pdm-devel] applied: [PATCH yew-widget-toolkit] widget: confirm_dialog: refactor to use message box

[Dietmar Maurer]

applied


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

[pdm-devel] applied: [PATCH datacenter-manager] ui: remotes: use ConfirmButton component instead of ConfirmDialog

[Dietmar Maurer]

applied


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

[pdm-devel] applied: [PATCH proxmox-yew-comp 2/2] confirm_button: use confirm dialog and always spawn a dialog

[Dietmar Maurer]

applied


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