From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <pdm-devel-bounces@lists.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
by lore.proxmox.com (Postfix) with ESMTPS id 4F7A31FF163
for <inbox@lore.proxmox.com>; Thu, 19 Dec 2024 12:01:48 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 914332161;
Thu, 19 Dec 2024 12:01:48 +0100 (CET)
From: Shannon Sterz <s.sterz@proxmox.com>
To: pdm-devel@lists.proxmox.com
Date: Thu, 19 Dec 2024 12:00:59 +0100
Message-Id: <20241219110059.166895-3-s.sterz@proxmox.com>
X-Mailer: git-send-email 2.39.5
In-Reply-To: <20241219110059.166895-1-s.sterz@proxmox.com>
References: <20241219110059.166895-1-s.sterz@proxmox.com>
MIME-Version: 1.0
X-SPAM-LEVEL: Spam detection results: 0
AWL -0.037 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
DMARC_MISSING 0.1 Missing DMARC policy
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to
Validity was blocked. See
https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more
information.
RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to
Validity was blocked. See
https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more
information.
RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to
Validity was blocked. See
https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more
information.
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
Subject: [pdm-devel] [PATCH yew-widget-toolkit] widget: confirm_dialog:
refactor to use message box
X-BeenThere: pdm-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Datacenter Manager development discussion
<pdm-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pdm-devel>,
<mailto:pdm-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pdm-devel/>
List-Post: <mailto:pdm-devel@lists.proxmox.com>
List-Help: <mailto:pdm-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel>,
<mailto:pdm-devel-request@lists.proxmox.com?subject=subscribe>
Reply-To: Proxmox Datacenter Manager development discussion
<pdm-devel@lists.proxmox.com>
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Errors-To: pdm-devel-bounces@lists.proxmox.com
Sender: "pdm-devel" <pdm-devel-bounces@lists.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