create select component from dropdown

postgresml · chillenberger · Oct 3, 2023 · Sep 22, 2023 · Sep 22, 2023 · Sep 22, 2023
commit d722b51c28c0b6c70749e587d6f388bc78cfb249
diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss
@@ -48,6 +48,10 @@
     --bs-btn-active-color: #{$gray-100};
     --bs-btn-hover-color: #{$gray-100};
 
+    &.error {
+        border-color: #{$error};
+    }
+
     .material-symbols-outlined {
         color: #{$neon-shade-100};
     }
@@ -73,7 +77,7 @@
     }
 
     .menu-item {
-        a {
+        a, div {
             padding: 8px 12px;
             overflow: hidden;
             text-overflow: ellipsis;

diff --git a/pgml-dashboard/src/components/dropdown/mod.rs b/pgml-dashboard/src/components/dropdown/mod.rs
@@ -1,3 +1,5 @@
+use crate::components::navigation::dropdown_link::DropdownLink;
+use crate::components::stimulus::stimulus_target::StimulusTarget;
 use pgml_components::component;
 use pgml_components::Component;
 use sailfish::TemplateOnce;
@@ -21,35 +23,57 @@ pub struct Dropdown {
     //github.com/ The currently selected value.
     value: DropdownValue,
 
-    //github.com/ The list of dropdown links to render.
-    links: Vec<StaticNavLink>,
+    //github.com/ The list of dropdown items to render.
+    items: Vec<Component>,
 
     //github.com/ Position of the dropdown menu.
     offset: String,
 
-    //github.com/ Whether or not the dropdown is collapsble.
+    //github.com/ Whether or not the dropdown is collapsable.
     collapsable: bool,
     offset_collapsed: String,
 
     //github.com/ Where the dropdown menu should appear
     menu_position: String,
     expandable: bool,
+
+    //github.com/ target to control value
+    value_target: StimulusTarget,
 }
 
 impl Dropdown {
-    pub fn new(links: Vec<StaticNavLink>) -> Self {
+    pub fn new() -> Self {
+        Dropdown {
+            items: Vec::new(),
+            value: DropdownValue::Text("Dropdown".to_owned().into()),
+            offset: "0, 10".to_owned(),
+            offset_collapsed: "68, -44".to_owned(),
+            menu_position: "".to_owned(),
+            ..Default::default()
+        }
+    }
+
+    pub fn nav(links: Vec<StaticNavLink>) -> Self {
         let binding = links
             .iter()
             .filter(|link| link.active)
             .collect::<Vec<&StaticNavLink>>();
+
         let active = binding.first();
         let value = if let Some(active) = active {
             active.name.to_owned()
         } else {
-            "Menu".to_owned()
+            "Dropdown Nav".to_owned()
         };
+
+        let mut items = Vec::new();
+        for link in links {
+            let item = DropdownLink::new(link);
+            items.push(item.into());
+        }
+
         Dropdown {
-            links,
+            items,
             value: DropdownValue::Text(value.into()),
             offset: "0, 10".to_owned(),
             offset_collapsed: "68, -44".to_owned(),
@@ -58,6 +82,11 @@ impl Dropdown {
         }
     }
 
+    pub fn items(mut self, items: Vec<Component>) -> Self {
+        self.items = items;
+        self
+    }
+
     pub fn text(mut self, value: Component) -> Self {
         self.value = DropdownValue::Text(value);
         self
@@ -97,6 +126,11 @@ impl Dropdown {
         self.expandable = true;
         self
     }
+
+    pub fn value_target(mut self, value_target: StimulusTarget) -> Self {
+        self.value_target = value_target;
+        self
+    }
 }
 
 component!(Dropdown);
diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html
@@ -19,7 +19,8 @@
     role="button"
     data-bs-toggle="dropdown"
     data-bs-offset="<%= offset %>"
-    aria-expanded="false">
+    aria-expanded="false"
+    <%- value_target %>>
       <span class="btn-dropdown-text"><%+ text %></span>
       <span class="material-symbols-outlined">
         expand_more
@@ -42,14 +43,8 @@
   <% } %>
 
   <ul class="dropdown-menu <%= menu_position %>">
-    <% for link in links { %>
-      <li class="menu-item d-flex align-items-center <% if link.disabled { %>disabled<% } %>">
-        <% if link.disabled { %>
-          <a type="button" class="dropdown-item" disabled href="#"><%= link.name %></a>
-        <% } else { %>
-          <a type="button" class="dropdown-item" href="<%- link.href %>"><%= link.name %></a>
-        <% } %>
-      </li>
+    <% for item in items { %>
+        <%+ item %>
     <% } %>
   </ul>
 </div>

diff --git a/pgml-dashboard/src/components/inputs/mod.rs b/pgml-dashboard/src/components/inputs/mod.rs
@@ -5,5 +5,9 @@
 pub mod range_group;
 pub use range_group::RangeGroup;
 
+// src/components/inputs/select
+pub mod select;
+pub use select::Select;
+
 // src/components/inputs/text
 pub mod text;
diff --git a/pgml-dashboard/src/components/inputs/select/mod.rs b/pgml-dashboard/src/components/inputs/select/mod.rs
@@ -0,0 +1,111 @@
+use crate::components::stimulus::stimulus_action::{StimulusAction, StimulusEvents};
+use pgml_components::component;
+use pgml_components::Component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "inputs/select/template.html")]
+pub struct Select {
+    options: Vec<Component>,
+    value: String,
+    offset: String,
+    collapsable: bool,
+    offset_collapsed: String,
+    menu_position: String,
+    expandable: bool,
+    name: String,
+}
+
+impl Select {
+    pub fn new() -> Select {
+        Select {
+            options: Vec::new(),
+            value: "Select".to_owned(),
+            offset: "0, 10".to_owned(),
+            offset_collapsed: "68, -44".to_owned(),
+            menu_position: "".to_owned(),
+            name: "input_name".to_owned(),
+            ..Default::default()
+        }
+        .options(vec![
+            "option1".to_owned(),
+            "option2".to_owned(),
+            "option3".to_owned(),
+        ])
+    }
+
+    pub fn options(mut self, values: Vec<String>) -> Self {
+        let mut options = Vec::new();
+        self.value = values.first().unwrap().to_owned();
+
+        for value in values {
+            let item = Option::new(
+                value,
+                StimulusAction::new()
+                    .controller("inputs-select")
+                    .method("choose")
+                    .action(StimulusEvents::Click),
+            );
+            options.push(item.into());
+        }
+
+        self.options = options;
+        self
+    }
+
+    pub fn name(mut self, name: &str) -> Self {
+        self.name = name.to_owned();
+        self
+    }
+
+    pub fn text(mut self, value: String) -> Self {
+        self.value = value;
+        self
+    }
+
+    pub fn collapsable(mut self) -> Self {
+        self.collapsable = true;
+        self
+    }
+
+    pub fn menu_end(mut self) -> Self {
+        self.menu_position = "dropdown-menu-end".to_owned();
+        self
+    }
+
+    pub fn menu_start(mut self) -> Self {
+        self.menu_position = "dropdown-menu-start".to_owned();
+        self
+    }
+
+    pub fn offset(mut self, offset: &str) -> Self {
+        self.offset = offset.to_owned();
+        self
+    }
+
+    pub fn offset_collapsed(mut self, offset: &str) -> Self {
+        self.offset_collapsed = offset.to_owned();
+        self
+    }
+
+    pub fn expandable(mut self) -> Self {
+        self.expandable = true;
+        self
+    }
+}
+
+#[derive(TemplateOnce)]
+#[template(path = "inputs/select/option.html")]
+pub struct Option {
+    value: String,
+    action: StimulusAction,
+}
+
+impl Option {
+    pub fn new(value: String, action: StimulusAction) -> Self {
+        Option { value, action }
+    }
+}
+
+component!(Option);
+component!(Select);
diff --git a/pgml-dashboard/src/components/inputs/select/option.html b/pgml-dashboard/src/components/inputs/select/option.html
@@ -0,0 +1,4 @@
+
+<li class="menu-item d-flex align-items-center">
+  <button type="button" class="dropdown-item" data-action="<%- action %>"><%= value %></button>
+</li>
diff --git a/pgml-dashboard/src/components/inputs/select/select.scss b/pgml-dashboard/src/components/inputs/select/select.scss
@@ -0,0 +1,3 @@
+div[data-controller="inputs-select"] {
+
+}
diff --git a/pgml-dashboard/src/components/inputs/select/select_controller.js b/pgml-dashboard/src/components/inputs/select/select_controller.js
@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ["input", "value"]
+
+  choose(e) {
+    this.inputTarget.value = e.target.innerHTML
+    this.valueTarget.innerHTML = e.target.innerHTML
+  }
+
+}
diff --git a/pgml-dashboard/src/components/inputs/select/template.html b/pgml-dashboard/src/components/inputs/select/template.html
@@ -0,0 +1,33 @@
+<% 
+use crate::components::dropdown::Dropdown;
+use crate::components::stimulus::stimulus_target::StimulusTarget;
+%>
+<div data-controller="inputs-select">
+
+  <% let mut dropdown = Dropdown::new()
+      .items(options)
+      .offset(&offset)
+      .offset_collapsed(&offset_collapsed)
+      .text(value.clone().into());
+
+      if menu_position == "dropdown-menu-end" {
+        dropdown = dropdown.menu_end();
+      } else if menu_position == "dropdown-menu-start" {
+        dropdown = dropdown.menu_start();
+      }
+
+      if collapsable {
+        dropdown = dropdown.collapsable();
+      }
+
+      if expandable {
+        dropdown = dropdown.expandable();
+      }
+
+      dropdown = dropdown.value_target(StimulusTarget::new().controller("inputs-select").name("value"));
+  %>
+
+  <%+ dropdown %>
+
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-inputs-select-target="input">
+</div>
diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/mod.rs b/pgml-dashboard/src/components/inputs/text/editable_header/mod.rs
@@ -1,5 +1,5 @@
+use crate::components::stimulus::stimulus_target::StimulusTarget;
 use pgml_components::component;
-use sailfish::runtime::{Buffer, Render};
 use sailfish::TemplateOnce;
 use std::fmt;
 
@@ -25,44 +25,6 @@ impl fmt::Display for Headers {
     }
 }
 
-pub struct StimulusTarget {
-    controller: Option<String>,
-    target_name: Option<String>,
-}
-
-impl StimulusTarget {
-    pub fn new() -> StimulusTarget {
-        StimulusTarget {
-            controller: None,
-            target_name: None,
-        }
-    }
-
-    pub fn controller(mut self, controller: &str) -> Self {
-        self.controller = Some(controller.to_string());
-        self
-    }
-
-    pub fn target_name(mut self, target_name: &str) -> Self {
-        self.target_name = Some(target_name.to_string());
-        self
-    }
-}
-
-impl Render for StimulusTarget {
-    fn render(&self, b: &mut Buffer) -> Result<(), sailfish::RenderError> {
-        if self.controller.is_none() || self.target_name.is_none() {
-            return format!("").render(b);
-        }
-        format!(
-            "data-{}-target=\"{}\"",
-            self.controller.to_owned().unwrap(),
-            self.target_name.to_owned().unwrap()
-        )
-        .render(b)
-    }
-}
-
 #[derive(TemplateOnce)]
 #[template(path = "inputs/text/editable_header/template.html")]
 pub struct EditableHeader {

diff --git a/pgml-dashboard/src/components/left_nav_web_app/template.html b/pgml-dashboard/src/components/left_nav_web_app/template.html
@@ -12,7 +12,7 @@
       </button>
 
       <div class="mb-4">
-        <%+ Dropdown::new(dropdown_nav.links).collapsable() %>
+        <%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
       </div>
       <%+ LeftNavMenu { nav: upper_nav } %>
     </div>

diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs
@@ -67,6 +67,9 @@ pub use static_nav::StaticNav;
 pub mod static_nav_link;
 pub use static_nav_link::StaticNavLink;
 
+// src/components/stimulus
+pub mod stimulus;
+
 // src/components/tables
 pub mod tables;
 

diff --git a/pgml-dashboard/src/components/navbar_web_app/template.html b/pgml-dashboard/src/components/navbar_web_app/template.html
@@ -60,7 +60,7 @@
             <% if !account_management_nav.links.is_empty() { %>
             <li class="d-none d-lg-flex nav-item align-items-center">
               <%+
-                  Dropdown::new(account_management_nav.links.clone())
+                  Dropdown::nav(account_management_nav.links.clone())
                     .icon(ProfileIcon::new().into())
                     .expandable()
                 %>