+ data-<%= name %>="<%= value %>"
+ <% } %>
+>
<% for column in columns { %>
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()]),
- ]) %>
+
--- a PPN by Garber Painting Akron. With Image Size Reduction included!Fetched URL: http://github.com/postgresml/postgresml/pull/987.diff Alternative Proxies: Alternative Proxy pFad Proxy pFad v3 Proxy pFad v4 Proxy |