public inbox for pdm-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Shannon Sterz <s.sterz@proxmox.com>
To: pdm-devel@lists.proxmox.com
Subject: [pdm-devel] [PATCH yew-widget-toolkit] widget: confirm_dialog: refactor to use message box
Date: Thu, 19 Dec 2024 12:00:59 +0100	[thread overview]
Message-ID: <20241219110059.166895-3-s.sterz@proxmox.com> (raw)
In-Reply-To: <20241219110059.166895-1-s.sterz@proxmox.com>

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


  parent reply	other threads:[~2024-12-19 11:01 UTC|newest]

Thread overview: 7+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2024-12-19 11:00 [pdm-devel] [PATCH datacenter-manager] ui: remotes: use ConfirmButton component instead of ConfirmDialog Shannon Sterz
2024-12-19 11:00 ` [pdm-devel] [PATCH proxmox-yew-comp 2/2] confirm_button: use confirm dialog and always spawn a dialog Shannon Sterz
2025-01-08 10:25   ` [pdm-devel] applied: " Dietmar Maurer
2024-12-19 11:00 ` Shannon Sterz [this message]
2025-01-08  9:25   ` [pdm-devel] applied: [PATCH yew-widget-toolkit] widget: confirm_dialog: refactor to use message box Dietmar Maurer
2024-12-19 12:32 ` [pdm-devel] [PATCH datacenter-manager] ui: remotes: use ConfirmButton component instead of ConfirmDialog Dominik Csapak
2025-01-08 10:24 ` [pdm-devel] applied: " Dietmar Maurer

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20241219110059.166895-3-s.sterz@proxmox.com \
    --to=s.sterz@proxmox.com \
    --cc=pdm-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal