postgresml · chillenberger · Oct 10, 2023 · Oct 10, 2023 · Oct 10, 2023
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
@@ -1,20 +1,15 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = ["input", "header"]
+  static targets = ["input", "header", "error"]
 
-  initialize() {
-    this.inputTarget.addEventListener("focusout", (e) => {
-      this.headerTarget.innerHTML = e.target.value
-      this.toggleEditor()
-    })
+  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()
-      }
-    })
+  blur() {
+    this.inputTarget.blur()
   }
 
   toggleEditor(e) {
@@ -32,4 +27,13 @@ export default class extends Controller {
       this.headerTarget.style.display = "flex"
     }
   }
+
+  error(e) {
+    this.errorTarget.innerHTML = e.detail
+    this.errorTarget.style.display = "block"
+  }
+
+  clear() {
+    this.errorTarget.style.display = "none"
+  }
 }
diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/mod.rs b/pgml-dashboard/src/components/inputs/text/editable_header/mod.rs
@@ -32,6 +32,7 @@ pub struct EditableHeader {
     header_type: Headers,
     input_target: StimulusTarget,
     input_name: Option<String>,
+    id: String,
 }
 
 impl EditableHeader {
@@ -41,6 +42,7 @@ impl EditableHeader {
             header_type: Headers::H3,
             input_target: StimulusTarget::new(),
             input_name: None,
+            id: String::from(""),
         }
     }
 
@@ -63,6 +65,11 @@ impl EditableHeader {
         self.input_name = Some(input_name.to_string());
         self
     }
+
+    pub fn id(mut self, id: &str) -> Self {
+        self.id = id.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
@@ -1,4 +1,7 @@
-<div data-controller="inputs-text-editable-header">
+<div 
+  id="<%= id %>"
+  data-controller="inputs-text-editable-header"
+  data-action="error->inputs-text-editable-header#error clear->inputs-text-editable-header#clear">
   <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">
@@ -9,6 +12,7 @@
       <input type="text" class="form-control" value="<%= value %>" style="display: none"  maxlength="50" autocomplete="off"
       name='<%= input_name.unwrap_or_else(|| "".to_string()) %>'
       data-inputs-text-editable-header-target="input"
+      data-action="keydown.enter->inputs-text-editable-header#blur focusout->inputs-text-editable-header#focusout"
       <%- input_target %> >
 
       <div>
@@ -17,6 +21,7 @@
         </span>
       </div>
     </<%= header_type.to_string() %>>
+    <div class="text-legal text-error" style="margin-top: -0.5rem; display: none" data-inputs-text-editable-header-target="error">error message</div>
   </div>
 
 

diff --git a/pgml-dashboard/static/css/scss/base/_typography.scss b/pgml-dashboard/static/css/scss/base/_typography.scss
@@ -26,6 +26,9 @@
     line-height: 16px;
 }
 
+.text-error {
+    color: #{$error} !important;
+}
 .text-black {
     color: #{$gray-900} !important;
 }

diff --git a/pgml-dashboard/static/js/playground.js b/pgml-dashboard/static/js/playground.js
@@ -1,7 +1,34 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
+  static targets = ["test"]
+
+  initialize() {
+    this.errorH3 = new CustomEvent("error", { detail: "message passed through event h3" })
+    this.clearH3 = new Event("clear")
+    this.errorH2 = new CustomEvent("error", { detail: "message passed through event h2" })
+    this.clearH2 = new Event("clear")
+  }
+
+
   selectRow(event) {
    console.log('dataset: ', event.currentTarget.dataset)
   }
+
+  addError(event) {
+    document.getElementById("header-3").dispatchEvent(this.errorH3)
+  }
+
+  clearError(event) {
+    document.getElementById("header-3").dispatchEvent(this.clearH3)
+  }
+
+  addErrorH2() {
+    document.getElementById("header-2").dispatchEvent(this.errorH2)
+  }
+
+  clearErrorH2() {
+    document.getElementById("header-2").dispatchEvent(this.clearH2)
+  }
+
 }
diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html
@@ -133,9 +133,11 @@ <h3 class="h3">Inputs</h3>
     <div class="d-flex flex-row justify-content-between">
       <%+ EditableHeader::new()
           .value("Size H2")
-          .header_type(Headers::H2) %>
+          .header_type(Headers::H2)
+          .id("header-2") %>
       <div>
-        this is a thing that takes up space
+        <button data-action="playground#addErrorH2">Add an Error</button>
+        <button data-action="playground#clearErrorH2">Clear Error</button>
       </div>
     </div>
     <div class="d-flex flex-row justify-content-between">
@@ -147,9 +149,10 @@ <h3 class="h3">Inputs</h3>
             StimulusTarget::new()
               .controller("some-existing-controller")
               .name("desired-target-name")
-          ) %>
+          ).id("header-3") %>
       <div>
-        this is a thing that takes up space
+        <button data-action="playground#addError">Add an Error</button>
+        <button data-action="playground#clearError">Clear Error</button>
       </div>
     </div>
   </div>