public inbox for pdm-devel@lists.proxmox.com
 help / color / mirror / Atom feed
* [pdm-devel] [PATCH yew-comp] tasks: make column sizes a bit more dynamic
@ 2025-01-23 14:41 Dominik Csapak
  2025-01-23 14:41 ` [pdm-devel] [PATCH datacenter-manager 1/2] ui: remote selector: update remotes when context changes Dominik Csapak
                   ` (2 more replies)
  0 siblings, 3 replies; 4+ messages in thread
From: Dominik Csapak @ 2025-01-23 14:41 UTC (permalink / raw)
  To: pdm-devel

make the user and status relative in size to the desription
(while keeping the current size as minimum)

This makes it more usable by default when those fields contain longer
text.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/tasks.rs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/tasks.rs b/src/tasks.rs
index 1b65c8e..9518313 100644
--- a/src/tasks.rs
+++ b/src/tasks.rs
@@ -126,17 +126,17 @@ impl ProxmoxTasks {
                     })
                     .into(),
                 DataTableColumn::new(tr!("User name"))
-                    .width("150px")
+                    .width("minmax(150px, 1fr)")
                     .render(|item: &TaskListItem| {
                         html! {&item.user}
                     })
                     .into(),
                 DataTableColumn::new(tr!("Description"))
-                    .flex(1)
+                    .flex(4)
                     .render(move |item: &TaskListItem| html! {format_upid(&item.upid)})
                     .into(),
                 DataTableColumn::new(tr!("Status"))
-                    .width("200px")
+                    .width("minmax(200px, 1fr)")
                     .render(|item: &TaskListItem| {
                         let text = item.status.as_deref().unwrap_or("");
                         html! {text}
-- 
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] 4+ messages in thread

* [pdm-devel] [PATCH datacenter-manager 1/2] ui: remote selector: update remotes when context changes
  2025-01-23 14:41 [pdm-devel] [PATCH yew-comp] tasks: make column sizes a bit more dynamic Dominik Csapak
@ 2025-01-23 14:41 ` Dominik Csapak
  2025-01-23 14:41 ` [pdm-devel] [PATCH datacenter-manager 2/2] ui: remote tasks: make column sizes a bit more dynamic Dominik Csapak
  2025-01-28 15:18 ` [pdm-devel] applied: [PATCH yew-comp] " Thomas Lamprecht
  2 siblings, 0 replies; 4+ messages in thread
From: Dominik Csapak @ 2025-01-23 14:41 UTC (permalink / raw)
  To: pdm-devel

we have to save the ContextHandle + react in the callback to changes

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/widget/remote_selector.rs | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/ui/src/widget/remote_selector.rs b/ui/src/widget/remote_selector.rs
index 80e434c..8fae902 100644
--- a/ui/src/widget/remote_selector.rs
+++ b/ui/src/widget/remote_selector.rs
@@ -3,7 +3,7 @@ use std::rc::Rc;
 use wasm_bindgen::UnwrapThrowExt;
 use yew::{
     html::{IntoEventCallback, IntoPropValue},
-    AttrValue, Callback, Component, Properties,
+    AttrValue, Callback, Component, ContextHandle, Properties,
 };
 
 use pdm_api_types::remotes::RemoteType;
@@ -43,17 +43,22 @@ impl RemoteSelector {
 
 pub struct PdmRemoteSelector {
     remotes: Rc<Vec<AttrValue>>,
+    _remotes_update_ctx: Option<ContextHandle<RemoteList>>,
 }
 
 impl PdmRemoteSelector {
     fn update_remote_list(&mut self, ctx: &yew::Context<Self>) {
-        let (remotes, _): (RemoteList, _) = ctx
+        let (remotes, _remotes_update_ctx): (RemoteList, _) = ctx
             .link()
-            .context(ctx.link().callback(|_| ()))
+            .context(ctx.link().callback(|list| list))
             .unwrap_throw();
 
-        let ty = ctx.props().remote_type;
+        self.set_remote_list(ctx, remotes);
+        self._remotes_update_ctx = Some(_remotes_update_ctx);
+    }
 
+    fn set_remote_list(&mut self, ctx: &yew::Context<Self>, remotes: RemoteList) {
+        let ty = ctx.props().remote_type;
         let remotes = remotes
             .iter()
             .filter_map(move |remote| match (ty, remote.ty) {
@@ -68,18 +73,24 @@ impl PdmRemoteSelector {
 }
 
 impl Component for PdmRemoteSelector {
-    type Message = ();
+    type Message = RemoteList;
     type Properties = RemoteSelector;
 
     fn create(ctx: &yew::Context<Self>) -> Self {
         let mut this = Self {
             remotes: Rc::new(Vec::new()),
+            _remotes_update_ctx: None,
         };
 
         this.update_remote_list(ctx);
         this
     }
 
+    fn update(&mut self, ctx: &yew::Context<Self>, msg: Self::Message) -> bool {
+        self.set_remote_list(ctx, msg);
+        true
+    }
+
     fn changed(&mut self, ctx: &yew::Context<Self>, _old_props: &Self::Properties) -> bool {
         if ctx.props().remote_type != _old_props.remote_type {
             self.update_remote_list(ctx);
-- 
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] 4+ messages in thread

* [pdm-devel] [PATCH datacenter-manager 2/2] ui: remote tasks: make column sizes a bit more dynamic
  2025-01-23 14:41 [pdm-devel] [PATCH yew-comp] tasks: make column sizes a bit more dynamic Dominik Csapak
  2025-01-23 14:41 ` [pdm-devel] [PATCH datacenter-manager 1/2] ui: remote selector: update remotes when context changes Dominik Csapak
@ 2025-01-23 14:41 ` Dominik Csapak
  2025-01-28 15:18 ` [pdm-devel] applied: [PATCH yew-comp] " Thomas Lamprecht
  2 siblings, 0 replies; 4+ messages in thread
From: Dominik Csapak @ 2025-01-23 14:41 UTC (permalink / raw)
  To: pdm-devel

make the user/remote/node/status relative in size to the description
(while keeping the current size as minimum).

This makes it more usable by default when those fields contain longer
text.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/remotes/tasks.rs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/src/remotes/tasks.rs b/ui/src/remotes/tasks.rs
index 6474035..99bb243 100644
--- a/ui/src/remotes/tasks.rs
+++ b/ui/src/remotes/tasks.rs
@@ -51,13 +51,13 @@ fn columns() -> Rc<Vec<DataTableHeader<TaskListItem>>> {
             })
             .into(),
         DataTableColumn::new(tr!("User name"))
-            .width("150px")
+            .width("minmax(150px, 1fr)")
             .render(|item: &TaskListItem| {
                 html! {&item.user}
             })
             .into(),
         DataTableColumn::new(tr!("Remote"))
-            .width("150px")
+            .width("minmax(150px, 1fr)")
             .render(
                 |item: &TaskListItem| match item.upid.parse::<RemoteUpid>() {
                     Ok(remote) => html! {remote.remote()},
@@ -66,13 +66,13 @@ fn columns() -> Rc<Vec<DataTableHeader<TaskListItem>>> {
             )
             .into(),
         DataTableColumn::new(tr!("Node"))
-            .width("150px")
+            .width("minmax(150px, 1fr)")
             .render(|item: &TaskListItem| {
                 html! {&item.node}
             })
             .into(),
         DataTableColumn::new(tr!("Description"))
-            .flex(1)
+            .flex(4)
             .render(move |item: &TaskListItem| {
                 if let Ok(remote_upid) = item.upid.parse::<RemoteUpid>() {
                     match remote_upid.upid.parse::<PveUpid>() {
@@ -88,7 +88,7 @@ fn columns() -> Rc<Vec<DataTableHeader<TaskListItem>>> {
             })
             .into(),
         DataTableColumn::new(tr!("Status"))
-            .width("200px")
+            .width("minmax(200px, 1fr)")
             .render(|item: &TaskListItem| {
                 let text = item.status.as_deref().unwrap_or("");
                 html! {text}
-- 
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] 4+ messages in thread

* [pdm-devel] applied: [PATCH yew-comp] tasks: make column sizes a bit more dynamic
  2025-01-23 14:41 [pdm-devel] [PATCH yew-comp] tasks: make column sizes a bit more dynamic Dominik Csapak
  2025-01-23 14:41 ` [pdm-devel] [PATCH datacenter-manager 1/2] ui: remote selector: update remotes when context changes Dominik Csapak
  2025-01-23 14:41 ` [pdm-devel] [PATCH datacenter-manager 2/2] ui: remote tasks: make column sizes a bit more dynamic Dominik Csapak
@ 2025-01-28 15:18 ` Thomas Lamprecht
  2 siblings, 0 replies; 4+ messages in thread
From: Thomas Lamprecht @ 2025-01-28 15:18 UTC (permalink / raw)
  To: Proxmox Datacenter Manager development discussion, Dominik Csapak

Am 23.01.25 um 15:41 schrieb Dominik Csapak:
> make the user and status relative in size to the desription
> (while keeping the current size as minimum)
> 
> This makes it more usable by default when those fields contain longer
> text.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  src/tasks.rs | 6 +++---
>  1 file changed, 3 insertions(+), 3 deletions(-)
> 
>

applied both patches, thanks!


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


^ permalink raw reply	[flat|nested] 4+ messages in thread

end of thread, other threads:[~2025-01-28 15:18 UTC | newest]

Thread overview: 4+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2025-01-23 14:41 [pdm-devel] [PATCH yew-comp] tasks: make column sizes a bit more dynamic Dominik Csapak
2025-01-23 14:41 ` [pdm-devel] [PATCH datacenter-manager 1/2] ui: remote selector: update remotes when context changes Dominik Csapak
2025-01-23 14:41 ` [pdm-devel] [PATCH datacenter-manager 2/2] ui: remote tasks: make column sizes a bit more dynamic Dominik Csapak
2025-01-28 15:18 ` [pdm-devel] applied: [PATCH yew-comp] " Thomas Lamprecht

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