postgresml · chillenberger · Sep 21, 2023 · Sep 20, 2023 · Sep 20, 2023 · Sep 20, 2023
diff --git a/pgml-dashboard/src/components/inputs/mod.rs b/pgml-dashboard/src/components/inputs/mod.rs
@@ -4,3 +4,6 @@
 // src/components/inputs/range_group
 pub mod range_group;
 pub use range_group::RangeGroup;
+
+// src/components/inputs/text
+pub mod text;
diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/editable_header.scss b/pgml-dashboard/src/components/inputs/text/editable_header/editable_header.scss
@@ -0,0 +1,36 @@
+div[data-controller="inputs-text-editable-header"] {
+    .editable-header-container {
+        span.material-symbols-outlined {
+            color: #{$slate-shade-500};
+            font-size: inherit;
+            text-overflow: ellipsis;
+            &.active {
+                color: #{$slate-tint-500};
+            }
+        }
+
+        &:hover {
+            span.material-symbols-outlined {
+                color: #{$slate-shade-300}
+            }
+        }
+
+        &:focus, &:focus-within {
+            span.material-symbols-outlined {
+                color: #{$slate-tint-500};
+            }
+        }
+
+    }
+
+    input, input:focus {
+        border: none;
+        border-radius: 0;
+        border-bottom: 2px solid #{$slate-tint-500};
+        background: transparent;
+        font-size: inherit;
+        line-height: inherit;
+        padding: 0px;
+        margin-bottom: -2px; // compensate for border space
+    }
+}
diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/editable_header_controller.js b/pgml-dashboard/src/components/inputs/text/editable_header/editable_header_controller.js
@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ["input", "header"]
+
+  initialize() {
+    this.inputTarget.addEventListener("focusout", (e) => {
+      this.headerTarget.innerHTML = e.target.value
+      this.toggleEditor()
+    })
+
+    // blur input on enter
+    this.inputTarget.addEventListener("keydown", (e) => {
+      if(e.key == "Enter") {
+        this.inputTarget.blur()
+      }
+    })
+  }
+
+  toggleEditor(e) {
+    // dont toggle if click inside input
+    if( e && this.inputTarget.contains(e.target)) {
+      return 
+    }
+
+    if(this.inputTarget.style.display == "none") {
+      this.inputTarget.style.display = "block"
+      this.headerTarget.style.display = "none"
+      this.inputTarget.focus()
+    } else {
+      this.inputTarget.style.display = "none"
+      this.headerTarget.style.display = "flex"
+    }
+  }
+}
diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/mod.rs b/pgml-dashboard/src/components/inputs/text/editable_header/mod.rs
@@ -0,0 +1,106 @@
+use pgml_components::component;
+use sailfish::runtime::{Buffer, Render};
+use sailfish::TemplateOnce;
+use std::fmt;
+
+pub enum Headers {
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6,
+}
+
+impl fmt::Display for Headers {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Headers::H1 => write!(f, "h1"),
+            Headers::H2 => write!(f, "h2"),
+            Headers::H3 => write!(f, "h3"),
+            Headers::H4 => write!(f, "h4"),
+            Headers::H5 => write!(f, "h5"),
+            Headers::H6 => write!(f, "h6"),
+        }
+    }
+}
+
+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 {
+    value: String,
+    header_type: Headers,
+    input_target: StimulusTarget,
+    input_name: Option<String>,
+}
+
+impl EditableHeader {
+    pub fn new() -> EditableHeader {
+        EditableHeader {
+            value: String::from("Title Goes Here"),
+            header_type: Headers::H3,
+            input_target: StimulusTarget::new(),
+            input_name: None,
+        }
+    }
+
+    pub fn header_type(mut self, header_type: Headers) -> Self {
+        self.header_type = header_type;
+        self
+    }
+
+    pub fn value(mut self, value: &str) -> Self {
+        self.value = value.to_string();
+        self
+    }
+
+    pub fn input_target(mut self, input_target: StimulusTarget) -> Self {
+        self.input_target = input_target;
+        self
+    }
+
+    pub fn input_name(mut self, input_name: &str) -> Self {
+        self.input_name = Some(input_name.to_string());
+        self
+    }
+}
+
+component!(EditableHeader);
diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/template.html b/pgml-dashboard/src/components/inputs/text/editable_header/template.html
@@ -0,0 +1,23 @@
+<div data-controller="inputs-text-editable-header">
+  <div class="editable-header-container" style="display: block"
+    data-action="click->inputs-text-editable-header#toggleEditor">
+    <<%= header_type.to_string() %> class="align-items-center <%= header_type.to_string() %> d-flex gap-3">
+      <span  data-inputs-text-editable-header-target="header">
+        <%= value %>
+      </span>
+
+      <input type="text" class="form-control" value="<%= value %>" style="display: none"  maxlength="50"
+      name='<%= input_name.unwrap_or_else(|| "".to_string()) %>'
+      data-inputs-text-editable-header-target="input"
+      <%- input_target %> >
+
+      <div>
+        <span class="material-symbols-outlined">
+          border_color
+        </span>
+      </div>
+    </<%= header_type.to_string() %>>
+  </div>
+
+
+</div>
diff --git a/pgml-dashboard/src/components/inputs/text/mod.rs b/pgml-dashboard/src/components/inputs/text/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/inputs/text/editable_header
+pub mod editable_header;
+pub use editable_header::EditableHeader;
diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -3,6 +3,7 @@
 
 @import "../../src/components/dropdown/dropdown.scss";
 @import "../../src/components/inputs/range_group/range_group.scss";
+@import "../../src/components/inputs/text/editable_header/editable_header.scss";
 @import "../../src/components/left_nav_menu/left_nav_menu.scss";
 @import "../../src/components/left_nav_web_app/left_nav_web_app.scss";
 @import "../../src/components/modal/modal.scss";

diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html
@@ -2,6 +2,7 @@
 use crate::components::tables::large::*;
 use crate::components::navigation::tabs::*;
 use crate::components::inputs::range_group::RangeGroup;
+use crate::components::inputs::text::editable_header::{EditableHeader, Headers, StimulusTarget};
 %>
 
 <div class="min-height: 100vh;" data-controller="playground">
@@ -115,5 +116,37 @@ <h3 class="h3">Inputs</h3>
         .cost_rate(0.144) %>
       </div>
     </div>
+
+    <div class="d-flex flex-row justify-content-between">
+      <%+ EditableHeader::new()
+          .value("Size H1")
+          .header_type(Headers::H1) %>
+      <div>
+        this is a thing that takes up space
+      </div>
+    </div>
+    <div class="d-flex flex-row justify-content-between">
+      <%+ EditableHeader::new()
+          .value("Size H2")
+          .header_type(Headers::H2) %>
+      <div>
+        this is a thing that takes up space
+      </div>
+    </div>
+    <div class="d-flex flex-row justify-content-between">
+      <%+ EditableHeader::new()
+          .value("Size H3")
+          .header_type(Headers::H3)
+          .input_name("title")
+          .input_target(
+            StimulusTarget::new()
+              .controller("some-existing-controller")
+              .target_name("desired-target-name")
+          ) %>
+      <div>
+        this is a thing that takes up space
+      </div>
+    </div>
   </div>
+
 </div>