* [pdm-devel] [PATCH proxmox-yew-comp 2/2] confirm_button: use confirm dialog and always spawn a dialog
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 ` Shannon Sterz
2025-01-08 10:25 ` [pdm-devel] applied: " Dietmar Maurer
2024-12-19 11:00 ` [pdm-devel] [PATCH yew-widget-toolkit] widget: confirm_dialog: refactor to use message box Shannon Sterz
` (2 subsequent siblings)
3 siblings, 1 reply; 7+ messages in thread
From: Shannon Sterz @ 2024-12-19 11:00 UTC (permalink / raw)
To: pdm-devel
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
^ permalink raw reply [flat|nested] 7+ messages in thread* [pdm-devel] [PATCH yew-widget-toolkit] widget: confirm_dialog: refactor to use message box
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
@ 2024-12-19 11:00 ` Shannon Sterz
2025-01-08 9:25 ` [pdm-devel] applied: " 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
3 siblings, 1 reply; 7+ messages in thread
From: Shannon Sterz @ 2024-12-19 11:00 UTC (permalink / raw)
To: pdm-devel
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
^ permalink raw reply [flat|nested] 7+ messages in thread* Re: [pdm-devel] [PATCH datacenter-manager] ui: remotes: use ConfirmButton component instead of ConfirmDialog
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
2024-12-19 11:00 ` [pdm-devel] [PATCH yew-widget-toolkit] widget: confirm_dialog: refactor to use message box Shannon Sterz
@ 2024-12-19 12:32 ` Dominik Csapak
2025-01-08 10:24 ` [pdm-devel] applied: " Dietmar Maurer
3 siblings, 0 replies; 7+ messages in thread
From: Dominik Csapak @ 2024-12-19 12:32 UTC (permalink / raw)
To: Proxmox Datacenter Manager development discussion, Shannon Sterz
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
^ permalink raw reply [flat|nested] 7+ messages in thread* [pdm-devel] applied: [PATCH datacenter-manager] ui: remotes: use ConfirmButton component instead of ConfirmDialog
2024-12-19 11:00 [pdm-devel] [PATCH datacenter-manager] ui: remotes: use ConfirmButton component instead of ConfirmDialog Shannon Sterz
` (2 preceding siblings ...)
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 ` Dietmar Maurer
3 siblings, 0 replies; 7+ messages in thread
From: Dietmar Maurer @ 2025-01-08 10:24 UTC (permalink / raw)
To: Proxmox Datacenter Manager development discussion, Shannon Sterz
applied
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 7+ messages in thread