set active pagination on render (#1408)

chillenberger · web-flow · commit 948a1cb2b6ee · 2024-04-15T16:31:21.000-06:00
diff --git a/pgml-dashboard/src/components/pagination/mod.rs b/pgml-dashboard/src/components/pagination/mod.rs
@@ -7,6 +7,8 @@ pub struct Pagination {
     count: usize,
     timed: bool,
     identifier: u16,
+    active_index: Option<usize>,
+    clickable: bool,
 }
 
 impl Pagination {
@@ -15,13 +17,27 @@ impl Pagination {
             count,
             timed: false,
             identifier: identifier,
+            active_index: None,
+            clickable: true,
         }
     }
 
     pub fn timed(mut self) -> Self {
         self.timed = true;
         self
     }
+
+    // When the user wantes to set the active index on render.
+    pub fn active_index(mut self, index: usize) -> Self {
+        self.active_index = Some(index);
+        self
+    }
+
+    // Prevents hover states.
+    pub fn not_clickable(mut self) -> Self {
+        self.clickable = false;
+        self
+    }
 }
 
 component!(Pagination);
diff --git a/pgml-dashboard/src/components/pagination/pagination.scss b/pgml-dashboard/src/components/pagination/pagination.scss
@@ -1,4 +1,5 @@
 div[data-controller="pagination"] {
+   $active-color: #00E0FF;
 
     .pagination-container {
         display: flex;
@@ -15,6 +16,26 @@ div[data-controller="pagination"] {
         transition: width 0.25s;
     }
 
+    .pagination-item-container-animation {
+        animation: IndicatorGrow 0.3s;
+        animation-fill-mode: forwards;
+
+        .pagination-item {
+            background-color: $active-color;
+            width: 100%;
+        }
+    }
+
+    .pagination-item-container-animation-reverse {
+        animation: IndicatorShrink 0.3s;
+        animation-fill-mode: forwards;
+
+        .pagination-item {
+            background-color: #{$gray-700};
+            width: 100%;
+        }
+    }
+
     .pagination-item-container-clickable:not(.pagination-item-active) {
         cursor: pointer;
         &:hover {
@@ -26,14 +47,14 @@ div[data-controller="pagination"] {
 
     .pagination-item-active {
         .pagination-item {
-            background-color: #00E0FF;
+            background-color: $active-color;
             width: 100%;
         }
     }
 
     .pagination-item-timed-active {
         .pagination-item {
-            background-color: #00E0FF;
+            background-color: $active-color;
             animation: IndicatorGrow 4500ms;
             animation-fill-mode: forwards;
         }
@@ -44,6 +65,11 @@ div[data-controller="pagination"] {
         100% {width: 4rem;}
     }
 
+    @keyframes IndicatorShrink {
+        0% {width: 4rem;}
+        100% {width: 1rem;}
+    }
+
     .pagination-item {
         width: 1rem;
         height: 1rem;
diff --git a/pgml-dashboard/src/components/pagination/template.html b/pgml-dashboard/src/components/pagination/template.html
@@ -1,6 +1,6 @@
 <%
   let active_class = if timed { "pagination-item-timed-active" } else { "pagination-item-active" };
-  let clickable_class = if timed { "" } else { "pagination-item-container-clickable" };
+  let clickable_class = if timed || !clickable { "" } else { "pagination-item-container-clickable" };
 %>
 
 <div 
@@ -11,8 +11,15 @@
 >
   <div class="pagination-container w-100 mt-4 pt-3">
     <% if count > 1 {
-      for i in 0..count { %>
-    <div class="pagination-item-container <%- clickable_class %>" data-pagination-target="paginationItem">
+      for i in 0..count {
+        let make_active = match active_index {
+          Some(index) if i == index => "pagination-item-container-animation",
+          Some(index) if i + 1 == index => "pagination-item-container-animation-reverse",
+          Some(index) if i == count - 1 && index == 0 => "pagination-item-container-animation-reverse",
+          _ => ""
+        };
+      %>
+    <div class="pagination-item-container <%- clickable_class %> <%- make_active %>" data-pagination-target="paginationItem">
       <div class="pagination-item" data-action="click->pagination#change" data-pagination-index-param="<%- i %>"></div>
     </div>
     <% } 
diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html
@@ -11,12 +11,28 @@
 use crate::components::cards::marketing::Slider as SliderCard;
 use crate::components::icons::Checkmark;
 use crate::components::Slider;
+use crate::components::pagination::Pagination;
 %>
 
 <div class="min-height: 100vh;" data-controller="playground">
   <h1 class="h1">Playground</h1>
   <p>This is a space to display components.</p>
 
+  <div style="margin-bottom: 14rem;">
+    <%+ Pagination::new(3, 1)
+    .active_index(0)
+    .not_clickable() %>
+
+    <%+ Pagination::new(3, 1)
+    .active_index(1)
+    .not_clickable() %>
+
+    <%+ Pagination::new(3, 1)
+    .active_index(2)
+    .not_clickable() %>
+  
+  </div>
+
   <h3 class="h3">icons</h3>
   <div class="mb-5">
     <%+ GithubIcon::new() %>
@@ -271,3 +287,4 @@ <h3 class="h3">Inputs</h3>
       ])
   )%>
 </div>
+
