Make table clickable

postgresml · levkk · Sep 6, 2023 · Sep 6, 2023 · Sep 6, 2023 · Sep 6, 2023
commit a0454cd3e01b0bb09227f608d0a2ac895ae8f9eb
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,21 @@ use sailfish::TemplateOnce;
 #[template(path = "tables/large/row/template.html")]
 pub struct Row {
     columns: Vec<Component>,
+    action: String,
 }
 
 impl Row {
     pub fn new(columns: &[Component]) -> Row {
         Row {
             columns: columns.to_vec(),
+            action: "click->tables-large-table#selectRow".to_string(),
         }
     }
+
+    pub fn action(mut self, action: &str) -> Self {
+        self.action.push_str(&format!(" {}", action));
+        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,7 @@
-<tr>
+<tr
+  data-action="<%= action %>"
+  data-tables-large-table-target="row"
+>
   <% 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) {
+    alert('Selected a row')
+  }
+}
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,49 @@ <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"),
+
+                        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") %>
   </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>