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..11fb66122 --- /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) { + console.log('dataset: ', event.currentTarget.dataset) + } +} diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html index d7864d13c..13d597872 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,52 @@

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") + .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") + .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") + .data("row-id", "3"), + + ]) + .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()]), - ]) %> +

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: