Clickable tables (#987)

levkk · web-flow · commit 3dafbdbd72bc · 2023-09-06T08:53:57.000-07:00
diff --git a/pgml-dashboard/src/components/tables/large/row/mod.rs b/pgml-dashboard/src/components/tables/large/row/mod.rs
@@ -6,14 +6,28 @@ use sailfish::TemplateOnce;
 #[template(path = "tables/large/row/template.html")]
 pub struct Row {
     columns: Vec<Component>,
+    action: String,
+    data: Vec<(String, String)>,
 }
 
 impl Row {
     pub fn new(columns: &[Component]) -> Row {
         Row {
             columns: columns.to_vec(),
+            action: "click->tables-large-table#selectRow".to_string(),
+            data: vec![],
         }
     }
+
+    pub fn action(mut self, action: &str) -> Self {
+        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/row.scss b/pgml-dashboard/src/components/tables/large/row/row.scss
@@ -6,7 +6,7 @@ table.table.table-lg {
             }
         }
 
-        &:hover {
+        &:hover, &.active {
             div.table-cell-content {
                 background: #{$gray-800};
             }
@@ -34,4 +34,12 @@ table.table.table-lg {
             }
         }
     }
+
+    &.selectable {
+        tbody {
+            tr:hover {
+                cursor: pointer;
+            }
+        }
+    }
 }
diff --git a/pgml-dashboard/src/components/tables/large/row/template.html b/pgml-dashboard/src/components/tables/large/row/template.html
@@ -1,4 +1,10 @@
-<tr>
+<tr
+  data-action="<%= action %>"
+  data-tables-large-table-target="row"
+  <% for (name, value) in data { %>
+  data-<%= name %>="<%= value %>"
+  <% } %>
+>
   <% for column in columns { %>
   <td>
     <div class="table-cell-content">
diff --git a/pgml-dashboard/src/components/tables/large/table/mod.rs b/pgml-dashboard/src/components/tables/large/table/mod.rs
@@ -7,15 +7,22 @@ use sailfish::TemplateOnce;
 pub struct Table {
     rows: Vec<Row>,
     headers: Vec<String>,
+    classes: String,
 }
 
 impl Table {
     pub fn new(headers: &[impl ToString], rows: &[Row]) -> 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
@@ -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
@@ -1,4 +1,4 @@
-<table class="table table-lg">
+<table class="<%= classes %>" data-controller="tables-large-table">
   <thead>
     <tr>
       <% for header in headers { %>
@@ -11,4 +11,4 @@
     <%+ row %>
     <% } %>
   </tbody>
-</div>
+</table>
diff --git a/pgml-dashboard/static/js/playground.js 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
@@ -1,6 +1,9 @@
-<% use crate::components::*; %>
+<% use crate::components::*; 
+use crate::components::tables::large::*;
+use crate::components::navigation::tabs::*;
+%>
 
-<div class="min-height: 100vh;">
+<div class="min-height: 100vh;" data-controller="playground">
   <h3 class="h3">Playground</h3>
 
   <div class="mb-3">
@@ -37,26 +40,52 @@ <h3 class="h3">Playground</h3>
     </div>
   </div>
   <div class="mb-3">
-    <%+ 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") %>
   </div>
   <div class="mb-3">
-    <%+ 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()]),
-    ]) %>
+
   </div>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ table.table.table-lg {`
`6`	`6`	`}`
`7`	`7`	`}`
`8`	`8`
`9`		`- &:hover {`
	`9`	`+ &:hover, &.active {`
`10`	`10`	`div.table-cell-content {`
`11`	`11`	`background: #{$gray-800};`
`12`	`12`	`}`
`@@ -34,4 +34,12 @@ table.table.table-lg {`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`	`}`
	`37`	`+`
	`38`	`+ &.selectable {`
	`39`	`+ tbody {`
	`40`	`+ tr:hover {`
	`41`	`+ cursor: pointer;`
	`42`	`+ }`
	`43`	`+ }`
	`44`	`+ }`
`37`	`45`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,15 +7,22 @@ use sailfish::TemplateOnce;`
`7`	`7`	`pub struct Table {`
`8`	`8`	`rows: Vec<Row>,`
`9`	`9`	`headers: Vec<String>,`
	`10`	`+ classes: String,`
`10`	`11`	`}`
`11`	`12`
`12`	`13`	`impl Table {`
`13`	`14`	`pub fn new(headers: &[impl ToString], rows: &[Row]) -> Table {`
`14`	`15`	`Table {`
`15`	`16`	`headers: headers.iter().map(\|h\| h.to_string()).collect(),`
`16`	`17`	`rows: rows.to_vec(),`
	`18`	`+ classes: "table table-lg".to_string(),`
`17`	`19`	`}`
`18`	`20`	`}`
	`21`	`+`
	`22`	`+ pub fn selectable(mut self) -> Self {`
	`23`	`+ self.classes.push_str(" selectable");`
	`24`	`+ self`
	`25`	`+ }`
`19`	`26`	`}`
`20`	`27`
`21`	`28`	`component!(Table);`