<% 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..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()]),
- ]) %>
+
+ 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()
--- a PPN by Garber Painting Akron. With Image Size Reduction included!Fetched URL: http://github.com/postgresml/postgresml/pull/987.patch Alternative Proxies: Alternative Proxy pFad Proxy pFad v3 Proxy pFad v4 Proxy | |