Add tabs & table

postgresml · levkk · Sep 5, 2023 · Sep 5, 2023 · Sep 5, 2023 · Sep 5, 2023
commit 292ebabb0a6c3dce8030525d43304fc4080e024e
diff --git a/pgml-dashboard/.editorconfig b/pgml-dashboard/.editorconfig
@@ -13,4 +13,4 @@ indent_size = 4
 
 [*.html]
 ident_style = space
-indent_size = 4
+indent_size = 2
diff --git a/pgml-dashboard/build.rs b/pgml-dashboard/build.rs
@@ -3,7 +3,6 @@ use std::process::Command;
 
 fn main() {
     println!("cargo:rerun-if-changed=migrations");
-    println!("cargo:rerun-if-changed=src");
 
     let output = Command::new("git")
         .args(&["rev-parse", "HEAD"])

diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs
@@ -4,7 +4,6 @@
 mod component;
 pub(crate) use component::{component, Component};
 
-
 // src/components/breadcrumbs
 pub mod breadcrumbs;
 pub use breadcrumbs::Breadcrumbs;
@@ -49,6 +48,9 @@ pub use navbar::Navbar;
 pub mod navbar_web_app;
 pub use navbar_web_app::NavbarWebApp;
 
+// src/components/navigation
+pub mod navigation;
+
 // src/components/postgres_logo
 pub mod postgres_logo;
 pub use postgres_logo::PostgresLogo;
@@ -65,6 +67,9 @@ pub use static_nav::StaticNav;
 pub mod static_nav_link;
 pub use static_nav_link::StaticNavLink;
 
+// src/components/tables
+pub mod tables;
+
 // src/components/test_component
 pub mod test_component;
 pub use test_component::TestComponent;
diff --git a/pgml-dashboard/src/components/navigation/mod.rs b/pgml-dashboard/src/components/navigation/mod.rs
@@ -0,0 +1,5 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/navigation/tabs
+pub mod tabs;
diff --git a/pgml-dashboard/src/components/navigation/tabs/mod.rs b/pgml-dashboard/src/components/navigation/tabs/mod.rs
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/navigation/tabs/tab
+pub mod tab;
+pub use tab::Tab;
+
+// src/components/navigation/tabs/tabs
+pub mod tabs;
+pub use tabs::Tabs;
diff --git a/pgml-dashboard/src/components/navigation/tabs/tab/mod.rs b/pgml-dashboard/src/components/navigation/tabs/tab/mod.rs
@@ -0,0 +1,65 @@
+#![allow(unused_variables)]
+use crate::components::component;
+use crate::components::component::Component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default, Clone)]
+#[template(path = "navigation/tabs/tab/template.html")]
+pub struct Tab {
+    content: Component,
+    active: bool,
+    name: String,
+}
+
+impl Tab {
+    pub fn new(name: impl ToString, content: Component) -> Tab {
+        Tab {
+            content,
+            active: false,
+            name: name.to_string(),
+        }
+    }
+
+    pub fn button_classes(&self) -> String {
+        if self.active {
+            "nav-link active btn btn-tertiary rounded-0".to_string()
+        } else {
+            "nav-link btn btn-tertiary rounded-0".to_string()
+        }
+    }
+
+    pub fn content_classes(&self) -> String {
+        if self.active {
+            "tab-pane my-4 show active".to_string()
+        } else {
+            "tab-pane my-4".to_string()
+        }
+    }
+
+    pub fn id(&self) -> String {
+        format!("tab-{}", self.name.to_lowercase().replace(" ", "-"))
+    }
+
+    pub fn selected(&self) -> String {
+        if self.active {
+            "selected".to_string()
+        } else {
+            "".to_string()
+        }
+    }
+
+    pub fn name(&self) -> String {
+        self.name.clone()
+    }
+
+    pub fn active(mut self) -> Self {
+        self.active = true;
+        self
+    }
+
+    pub fn is_active(&self) -> bool {
+        self.active
+    }
+}
+
+component!(Tab);
diff --git a/pgml-dashboard/src/components/navigation/tabs/tab/tab.scss b/pgml-dashboard/src/components/navigation/tabs/tab/tab.scss
diff --git a/pgml-dashboard/src/components/navigation/tabs/tab/template.html b/pgml-dashboard/src/components/navigation/tabs/tab/template.html
@@ -0,0 +1,3 @@
+<div>
+  <%+ content %>
+</div>
diff --git a/pgml-dashboard/src/components/navigation/tabs/tabs/mod.rs b/pgml-dashboard/src/components/navigation/tabs/tabs/mod.rs
@@ -0,0 +1,27 @@
+use crate::components::component;
+use crate::components::navigation::tabs::Tab;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "navigation/tabs/tabs/template.html")]
+pub struct Tabs {
+    tabs: Vec<Tab>,
+}
+
+impl Tabs {
+    pub fn new(tabs: &[Tab]) -> Tabs {
+        // Set the first tab to active if none are.
+        let mut tabs = tabs.to_vec();
+        if tabs.iter().all(|t| !t.is_active()) {
+            tabs = tabs
+                .into_iter()
+                .enumerate()
+                .map(|(i, tab)| if i == 0 { tab.active() } else { tab })
+                .collect();
+        }
+
+        Tabs { tabs }
+    }
+}
+
+component!(Tabs);
diff --git a/pgml-dashboard/src/components/navigation/tabs/tabs/tabs.scss b/pgml-dashboard/src/components/navigation/tabs/tabs/tabs.scss
@@ -0,0 +1,21 @@
+.nav-tabs {
+    // These tabs are used in docs as well, where they are
+    // generated using Bootstrap. It wasn't obvious to me
+    // how to replace those with this component yet, so I'm just
+    // enforcing the font-family here so they look the same. Docs use Roboto by default.
+    font-family: 'silka', 'Roboto', 'sans-serif';
+
+    --bs-nav-tabs-border-width: 4px;
+
+    .nav-link {
+        border: none;
+
+        &.active, &:focus, &:active {
+            border-bottom: 4px solid #{$slate-tint-700};
+            color: #{$slate-tint-700};
+            text-shadow: none;
+        }
+
+        color: #{$slate-tint-100};
+    }
+}
diff --git a/pgml-dashboard/src/components/navigation/tabs/tabs/template.html b/pgml-dashboard/src/components/navigation/tabs/tabs/template.html
@@ -0,0 +1,17 @@
+<ul class="nav nav-tabs" role="tablist">
+  <% for tab in &tabs { %>
+  <li class="nav-item" role="presentation">
+    <button
+      class="<%= tab.button_classes() %>" data-bs-toggle="tab" data-bs-target="#<%= tab.id() %>" type="button" role="tab" aria-controls="<%= tab.id() %>" aria-selected="<%= tab.selected() %>">
+      <%= tab.name() %>
+    </button>
+  </li>
+  <% } %>
+</ul>
+<div class="tab-content">
+  <% for (i, tab) in tabs.into_iter().enumerate() { %>
+    <div class="<%= tab.content_classes() %>" id="<%= tab.id() %>" role="tabpanel" aria-labelledby="tab-<%= tab.id() %>" tabindex="<%= i %>">
+      <%+ tab %>  
+    </div>
+  <% } %>
+</div>
diff --git a/pgml-dashboard/src/components/tables/large/mod.rs b/pgml-dashboard/src/components/tables/large/mod.rs
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/tables/large/row
+pub mod row;
+pub use row::Row;
+
+// src/components/tables/large/table
+pub mod table;
+pub use table::Table;
diff --git a/pgml-dashboard/src/components/tables/large/row/mod.rs b/pgml-dashboard/src/components/tables/large/row/mod.rs
@@ -0,0 +1,19 @@
+use crate::components::component;
+use crate::components::component::Component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default, Clone)]
+#[template(path = "tables/large/row/template.html")]
+pub struct Row {
+    columns: Vec<Component>,
+}
+
+impl Row {
+    pub fn new(columns: &[Component]) -> Row {
+        Row {
+            columns: columns.to_vec(),
+        }
+    }
+}
+
+component!(Row);
diff --git a/pgml-dashboard/src/components/tables/large/row/row.scss b/pgml-dashboard/src/components/tables/large/row/row.scss
@@ -0,0 +1,37 @@
+table.table.table-lg {
+    tr {
+        &:first-of-type {
+            td {
+                padding-top: 16px;
+            }
+        }
+
+        &:hover {
+            div.table-cell-content {
+                background: #{$gray-800};
+            }
+        }
+
+        td {
+            vertical-align: middle;
+            padding: 8px 0;
+
+            div.table-cell-content {
+                background: #{$gray-600};
+                padding: 20px 0;
+            }
+
+            &:first-of-type {
+                div.table-cell-content {
+                    padding-left: 67px;
+                }
+            }
+
+            &:last-of-type {
+                div.table-cell-content {
+                    padding-right: 67px;    
+                }
+            }
+        }
+    }
+}
diff --git a/pgml-dashboard/src/components/tables/large/row/row_controller.js b/pgml-dashboard/src/components/tables/large/row/row_controller.js
@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = []
+  static outlets = []
+
+  initialize() {
+    console.log('Initialized tables-large-row')
+  }
+
+  connect() {}
+
+  disconnect() {}
+}
diff --git a/pgml-dashboard/src/components/tables/large/row/template.html b/pgml-dashboard/src/components/tables/large/row/template.html
@@ -0,0 +1,9 @@
+<tr>
+  <% for column in columns { %>
+  <td>
+    <div class="table-cell-content">
+      <%+ column %>
+    </div>
+  </td>
+  <% } %>
+</tr>
diff --git a/pgml-dashboard/src/components/tables/large/table/mod.rs b/pgml-dashboard/src/components/tables/large/table/mod.rs
@@ -0,0 +1,21 @@
+use crate::components::component;
+use crate::components::tables::large::Row;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "tables/large/table/template.html")]
+pub struct Table {
+    rows: Vec<Row>,
+    headers: Vec<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(),
+        }
+    }
+}
+
+component!(Table);
diff --git a/pgml-dashboard/src/components/tables/large/table/table.scss b/pgml-dashboard/src/components/tables/large/table/table.scss
@@ -0,0 +1,19 @@
+table.table.table-lg {
+    * {
+        border-width: 0;
+    }
+
+    thead {
+        th {
+            color: #{$slate-shade-100};
+            background: #{$gray-800};
+            text-transform: uppercase;
+            font-size: 0.75rem;
+            padding: 16px 0;
+
+            &:first-of-type {
+                padding-left: 67px;
+            }
+        }
+    }
+}
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,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = []
+  static outlets = []
+
+  initialize() {
+    console.log('Initialized tables-large-table')
+  }
+
+  connect() {}
+
+  disconnect() {}
+}
diff --git a/pgml-dashboard/src/components/tables/large/table/template.html b/pgml-dashboard/src/components/tables/large/table/template.html
@@ -0,0 +1,14 @@
+<table data-controller="tables-large-table" class="table table-lg">
+  <thead>
+    <tr>
+      <% for header in headers { %>
+        <th><%= header %></th>
+      <% } %>
+    </tr>
+  </thead>
+  <tbody>
+    <% for row in rows { %>
+    <%+ row %>
+    <% } %>
+  </tbody>
+</div>
diff --git a/pgml-dashboard/src/components/tables/mod.rs b/pgml-dashboard/src/components/tables/mod.rs
@@ -0,0 +1,5 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/tables/large
+pub mod large;
diff --git a/pgml-dashboard/src/utils/markdown.rs b/pgml-dashboard/src/utils/markdown.rs
@@ -669,7 +669,7 @@ impl<'a> Tab<'a> {
             "
             <li class=\"nav-item\" role=\"presentation\">
                 <button
-                    class=\"nav-link {active}\"
+                    class=\"nav-link btn btn-tertiary rounded-0 {active}\"
                     data-bs-toggle=\"tab\"
                     data-bs-target=\"#tab-{id}\"
                     type=\"button\"

diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -6,5 +6,9 @@
 @import "../../src/components/left_nav_web_app/left_nav_web_app.scss";
 @import "../../src/components/modal/modal.scss";
 @import "../../src/components/navbar/navbar.scss";
+@import "../../src/components/navigation/tabs/tab/tab.scss";
+@import "../../src/components/navigation/tabs/tabs/tabs.scss";
 @import "../../src/components/postgres_logo/postgres_logo.scss";
 @import "../../src/components/static_nav/static_nav.scss";
+@import "../../src/components/tables/large/row/row.scss";
+@import "../../src/components/tables/large/table/table.scss";