diff --git a/pgml-dashboard/src/components/tables/large/table/mod.rs b/pgml-dashboard/src/components/tables/large/table/mod.rs index 42da7d9fd..3054b0750 100644 --- a/pgml-dashboard/src/components/tables/large/table/mod.rs +++ b/pgml-dashboard/src/components/tables/large/table/mod.rs @@ -7,6 +7,7 @@ use sailfish::TemplateOnce; pub struct Table { rows: Vec, headers: Vec, + classes: String, } impl Table { @@ -14,8 +15,14 @@ impl Table { Table { headers: headers.iter().map(|h| h.to_string()).collect(), rows: rows.to_vec(), + classes: "table table-lg".to_string(), } } + + pub fn selectable(mut self) -> Self { + self.classes.push_str(" selectable"); + self + } } component!(Table); diff --git a/pgml-dashboard/src/components/tables/large/table/table_controller.js b/pgml-dashboard/src/components/tables/large/table/table_controller.js new file mode 100644 index 000000000..7ad631e22 --- /dev/null +++ b/pgml-dashboard/src/components/tables/large/table/table_controller.js @@ -0,0 +1,10 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + static targets = ['row'] + + selectRow(event) { + this.rowTargets.forEach(row => row.classList.remove('active')) + event.currentTarget.classList.add('active') + } +} diff --git a/pgml-dashboard/src/components/tables/large/table/template.html b/pgml-dashboard/src/components/tables/large/table/template.html index 1aa2a831b..e3fe15baf 100644 --- a/pgml-dashboard/src/components/tables/large/table/template.html +++ b/pgml-dashboard/src/components/tables/large/table/template.html @@ -1,4 +1,4 @@ - +

<% for header in headers { %> @@ -11,4 +11,4 @@ <%+ row %> <% } %> - +

diff --git a/pgml-dashboard/static/js/playground.js b/pgml-dashboard/static/js/playground.js new file mode 100644 index 000000000..e2d149293 --- /dev/null +++ b/pgml-dashboard/static/js/playground.js @@ -0,0 +1,7 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + selectRow(event) { + alert('Selected a row') + } +} diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html index d7864d13c..c6fbf35d0 100644 --- a/pgml-dashboard/templates/content/playground.html +++ b/pgml-dashboard/templates/content/playground.html @@ -1,6 +1,9 @@ -<% use crate::components::*; %> +<% use crate::components::*; +use crate::components::tables::large::*; +use crate::components::navigation::tabs::*; +%> -

Playground

@@ -37,26 +40,49 @@

Playground

- <%+ navigation::tabs::Tabs::new(&vec![ - navigation::tabs::Tab::new( - "Test tab", - "Test content".into() - ), - navigation::tabs::Tab::new( - "Second tab", - "Second tab content".into() - ), - navigation::tabs::Tab::new( - "Third active tab", - "Hello third tab".into(), - ), - ]).active_tab("Third active tab") %> + <%+ Tabs::new( + &[ + Tab::new( + "Test tab", + Table::new( + &["Date", "Time", "Status"], + &[ + Row::new(&[ + "01/01/2022".into(), + "20:00:43.956373 +00:00:00 UTC".into(), + "Ready".into() + ]) + .action("click->playground#selectRow"), + + Row::new(&[ + "01/01/2022".into(), + "20:00:43.956373 +00:00:00 UTC".into(), "Ready".into() + ]) + .action("click->playground#selectRow"), + + Row::new(&[ + "01/01/2022".into(), + "20:00:43.956373 +00:00:00 UTC".into(), "Ready".into() + ]) + .action("click->playground#selectRow"), + + ]) + .selectable() + .into() + ), + Tab::new( + "Second tab", + "Second tab content".into() + ), + Tab::new( + "Third active tab", + "Hello third tab".into(), + ), + ] + ) + .active_tab("Test tab") %>

- <%+ tables::large::Table::new(&["Date", "Time", "Status"], &vec![ - tables::large::Row::new(&["01/01/2022".into(), "20:00:43.956373 +00:00:00 UTC".into(), "Ready".into()]), - tables::large::Row::new(&["01/01/2022".into(), "20:00:43.956373 +00:00:00 UTC".into(), "Ready".into()]), - tables::large::Row::new(&["01/01/2022".into(), "20:00:43.956373 +00:00:00 UTC".into(), "Ready".into()]), - ]) %> +

From c1773ba16a0ed22b23eae6e96a3e58aa8ea35633 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Wed, 6 Sep 2023 08:51:42 -0700 Subject: [PATCH 2/2] pass data through rows --- pgml-dashboard/src/components/tables/large/row/mod.rs | 7 +++++++ .../src/components/tables/large/row/template.html | 3 +++ pgml-dashboard/static/js/playground.js | 2 +- pgml-dashboard/templates/content/playground.html | 9 ++++++--- 4 files changed, 17 insertions(+), 4 deletions(-) diff --git a/pgml-dashboard/src/components/tables/large/row/mod.rs b/pgml-dashboard/src/components/tables/large/row/mod.rs index 6129a2d9c..5c3c2b3e3 100644 --- a/pgml-dashboard/src/components/tables/large/row/mod.rs +++ b/pgml-dashboard/src/components/tables/large/row/mod.rs @@ -7,6 +7,7 @@ use sailfish::TemplateOnce; pub struct Row { columns: Vec, action: String, + data: Vec<(String, String)>, } impl Row { @@ -14,6 +15,7 @@ impl Row { Row { columns: columns.to_vec(), action: "click->tables-large-table#selectRow".to_string(), + data: vec![], } } @@ -21,6 +23,11 @@ impl Row { self.action.push_str(&format!(" {}", action)); self } + + pub fn data(mut self, name: &str, value: &str) -> Self { + self.data.push((name.to_owned(), value.to_owned())); + self + } } component!(Row); diff --git a/pgml-dashboard/src/components/tables/large/row/template.html b/pgml-dashboard/src/components/tables/large/row/template.html index f0e89fd75..442ec936e 100644 --- a/pgml-dashboard/src/components/tables/large/row/template.html +++ b/pgml-dashboard/src/components/tables/large/row/template.html @@ -1,6 +1,9 @@ + data-<%= name %>="<%= value %>" + <% } %> > <% for column in columns { %> diff --git a/pgml-dashboard/static/js/playground.js b/pgml-dashboard/static/js/playground.js index e2d149293..11fb66122 100644 --- a/pgml-dashboard/static/js/playground.js +++ b/pgml-dashboard/static/js/playground.js @@ -2,6 +2,6 @@ import { Controller } from '@hotwired/stimulus' export default class extends Controller { selectRow(event) { - alert('Selected a row') + console.log('dataset: ', event.currentTarget.dataset) } } diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html index c6fbf35d0..13d597872 100644 --- a/pgml-dashboard/templates/content/playground.html +++ b/pgml-dashboard/templates/content/playground.html @@ -52,19 +52,22 @@

Playground

"20:00:43.956373 +00:00:00 UTC".into(), "Ready".into() ]) - .action("click->playground#selectRow"), + .action("click->playground#selectRow") + .data("row-id", "1"), Row::new(&[ "01/01/2022".into(), "20:00:43.956373 +00:00:00 UTC".into(), "Ready".into() ]) - .action("click->playground#selectRow"), + .action("click->playground#selectRow") + .data("row-id", "2"), Row::new(&[ "01/01/2022".into(), "20:00:43.956373 +00:00:00 UTC".into(), "Ready".into() ]) - .action("click->playground#selectRow"), + .action("click->playground#selectRow") + .data("row-id", "3"), ]) .selectable() pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: