accordian that uses bootstrap, so no custom js (#1546)

chillenberger · web-flow · commit a5472c9945b9 · 2024-07-08T10:46:28.000-06:00
diff --git a/pgml-dashboard/src/components/accordion/accordion.scss b/pgml-dashboard/src/components/accordion/accordion.scss
@@ -0,0 +1,45 @@
+div[data-controller="accordion"] {
+  .accordion-header {
+      cursor: pointer;
+  }
+
+  .accordion-body {
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .accordion-item {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: solid #{$gray-600} 1px;
+  }
+
+  .accordion-item:last-child {
+    border-bottom: solid #{$gray-600} 1px;
+  }
+
+  .accordion-header {
+    div[aria-expanded="true"] {
+      .title {
+        color: #{$gray-100};
+      }
+      .add {
+          display: none;
+      }
+      .remove {
+          display: block;
+      }
+    }
+    div[aria-expanded="false"] {
+      .title {
+        color: #{$gray-300};
+      }
+      .add {
+          display: block;
+      }
+      .remove {
+          display: none;
+      }
+    }
+  } 
+}
diff --git a/pgml-dashboard/src/components/accordion/mod.rs b/pgml-dashboard/src/components/accordion/mod.rs
@@ -0,0 +1,52 @@
+use pgml_components::{component, Component};
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "accordion/template.html")]
+pub struct Accordion {
+    html_contents: Vec<Component>,
+    html_titles: Vec<Component>,
+    selected: usize,
+    title_size: String,
+}
+
+impl Accordion {
+    pub fn new() -> Accordion {
+        Accordion {
+            html_contents: Vec::new(),
+            html_titles: Vec::new(),
+            selected: 0,
+            title_size: "h5".to_string(),
+        }
+    }
+
+    pub fn html_contents(mut self, html_contents: Vec<Component>) -> Self {
+        self.html_contents = html_contents;
+        self
+    }
+
+    pub fn html_titles(mut self, html_titles: Vec<Component>) -> Self {
+        self.html_titles = html_titles;
+        self
+    }
+
+    pub fn set_title_size_body(mut self) -> Self {
+        self.title_size = "body-regular-text".to_string();
+        self
+    }
+
+    pub fn set_title_size_header(mut self, title_size: i32) -> Self {
+        match title_size {
+            1 => self.title_size = "h1".to_string(),
+            2 => self.title_size = "h2".to_string(),
+            3 => self.title_size = "h3".to_string(),
+            4 => self.title_size = "h4".to_string(),
+            5 => self.title_size = "h5".to_string(),
+            6 => self.title_size = "h6".to_string(),
+            _ => self.title_size = "h5".to_string(),
+        }
+        self
+    }
+}
+
+component!(Accordion);
diff --git a/pgml-dashboard/src/components/accordion/template.html b/pgml-dashboard/src/components/accordion/template.html
@@ -0,0 +1,31 @@
+<%
+  let items = html_contents.iter().zip(html_titles.iter());
+%>
+
+<div data-controller="accordion">
+  <div class="accordion" id="accordionExample">
+    <% for (i, (content, title)) in items.enumerate() {%>
+
+    <%
+    let expanded = i == selected;
+    let target = format!("collapse{}a", i);
+    %>
+
+    <div class="accordion-item">
+      <div class="accordion-header">
+        <div class="d-flex justify-content-between align-items-center w-100" type="button" data-bs-toggle="collapse" data-bs-target="#<%- target %>" aria-expanded=<%- expanded %> aria-controls="<%- target %>">
+          <h6 class="mb-0 title <%- title_size %>"><%+ title.clone() %></h6>
+          <span class="add material-symbols-outlined">add</span>
+          <span class="remove material-symbols-outlined">remove</span>
+        </div>
+      </div>
+      <div id="<%- target %>" class="accordion-collapse collapse <% if expanded {%>show<% } %>" data-bs-parent="#accordionExample">
+        <div class="accordion-body pt-3">
+          <%+ content.clone() %>
+        </div>
+      </div>
+    </div>
+    <% } %>
+
+  </div>
+</div>
diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs
@@ -5,6 +5,10 @@
 pub mod accordian;
 pub use accordian::Accordian;
 
+// src/components/accordion
+pub mod accordion;
+pub use accordion::Accordion;
+
 // src/components/badges
 pub mod badges;
 
diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -2,6 +2,7 @@
 // There is no need to edit it manually.
 
 @import "../../src/components/accordian/accordian.scss";
+@import "../../src/components/accordion/accordion.scss";
 @import "../../src/components/badges/large/label/label.scss";
 @import "../../src/components/badges/small/label/label.scss";
 @import "../../src/components/breadcrumbs/breadcrumbs.scss";
