Content-Length: 6769 | pFad | http://github.com/postgresml/postgresml/pull/1061.diff

thub.com 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 index 9a72b59a5..e00b8cefb 100644 --- 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 index 04e190535..7999f334d 100644 --- 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, + 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 index 65681507e..eb320ed5a 100644 --- 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 @@ -
+
<<%= header_type.to_string() %> class="align-items-center <%= header_type.to_string() %> d-flex gap-3"> @@ -9,6 +12,7 @@ >
@@ -17,6 +21,7 @@
> +
diff --git a/pgml-dashboard/static/css/scss/base/_typography.scss b/pgml-dashboard/static/css/scss/base/_typography.scss index 460d5452a..8ddfe763f 100644 --- 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 index 11fb66122..f95d84b0a 100644 --- 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 index c56721159..6e6f380d7 100644 --- a/pgml-dashboard/templates/content/playground.html +++ b/pgml-dashboard/templates/content/playground.html @@ -133,9 +133,11 @@

Inputs

<%+ EditableHeader::new() .value("Size H2") - .header_type(Headers::H2) %> + .header_type(Headers::H2) + .id("header-2") %>
- this is a thing that takes up space + +
@@ -147,9 +149,10 @@

Inputs

StimulusTarget::new() .controller("some-existing-controller") .name("desired-target-name") - ) %> + ).id("header-3") %>
- this is a thing that takes up space + +








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/postgresml/postgresml/pull/1061.diff

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy