Editable header custom input actions (#1458)

levkk · web-flow · commit aab5bd5e64dd · 2024-05-13T12:32:42.000-07:00
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,8 +1,13 @@
-use crate::components::stimulus::stimulus_target::StimulusTarget;
+use crate::components::stimulus::{
+    stimulus_action::{StimulusAction, StimulusActions},
+    stimulus_target::StimulusTarget,
+};
 use pgml_components::component;
 use sailfish::TemplateOnce;
 use std::fmt;
 
+use crate::utils::random_string;
+
 pub enum Headers {
     H1,
     H2,
@@ -32,17 +37,31 @@ pub struct EditableHeader {
     header_type: Headers,
     input_target: StimulusTarget,
     input_name: Option<String>,
+    input_actions: StimulusActions,
     id: String,
 }
 
 impl Default for EditableHeader {
     fn default() -> Self {
+        let mut input_actions = StimulusActions::default();
+        input_actions.push(
+            StimulusAction::new_keydown_with_key("enter")
+                .controller("inputs-text-editable-header")
+                .method("blur"),
+        );
+        input_actions.push(
+            StimulusAction::new_focusout()
+                .controller("inputs-text-editable-header")
+                .method("focusout"),
+        );
+
         Self {
-            value: String::from("Title Goes Here"),
+            value: String::from("Title goes here"),
             header_type: Headers::H3,
             input_target: StimulusTarget::new(),
             input_name: None,
-            id: String::from(""),
+            input_actions,
+            id: random_string(12),
         }
     }
 }
@@ -72,6 +91,11 @@ impl EditableHeader {
         self
     }
 
+    pub fn input_action(mut self, input_action: StimulusAction) -> Self {
+        self.input_actions.push(input_action);
+        self
+    }
+
     pub fn id(mut self, id: &str) -> Self {
         self.id = id.to_string();
         self
diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/template.html b/pgml-dashboard/src/components/inputs/text/editable_header/template.html
@@ -9,11 +9,18 @@
         <%= value %>
       </span>
 
-      <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 %> >
+      <input
+        type="text"
+        class="form-control"
+        value="<%= value %>"
+        style="display: none" 
+        maxlength="50"
+        autocomplete="off"
+        name="<%= input_name.unwrap_or_default() %>"
+        data-inputs-text-editable-header-target="input"
+        data-action="<%- input_actions %>"
+        <%- input_target %>
+      >
       
       <div>
         <span class="material-symbols-outlined">
diff --git a/pgml-dashboard/src/components/stimulus/stimulus_action/mod.rs b/pgml-dashboard/src/components/stimulus/stimulus_action/mod.rs
@@ -13,6 +13,7 @@ pub enum StimulusEvents {
     FocusIn,
     KeyDown,
     KeyUp,
+    KeyDownWithKey(String),
 }
 
 impl fmt::Display for StimulusEvents {
@@ -27,6 +28,7 @@ impl fmt::Display for StimulusEvents {
             StimulusEvents::FocusIn => write!(f, "focusin"),
             StimulusEvents::KeyDown => write!(f, "keydown"),
             StimulusEvents::KeyUp => write!(f, "keyup"),
+            StimulusEvents::KeyDownWithKey(ref key) => write!(f, "keydown.{}", key),
         }
     }
 }
@@ -45,6 +47,7 @@ impl FromStr for StimulusEvents {
             "focusin" => Ok(StimulusEvents::FocusIn),
             "keydown" => Ok(StimulusEvents::KeyDown),
             "keyup" => Ok(StimulusEvents::KeyUp),
+            "keydown.enter" => Ok(StimulusEvents::KeyDownWithKey("enter".into())),
             _ => Err(()),
         }
     }
@@ -88,6 +91,14 @@ impl StimulusAction {
     pub fn new_input() -> Self {
         Self::new().action(StimulusEvents::Input)
     }
+
+    pub fn new_focusout() -> Self {
+        Self::new().action(StimulusEvents::FocusOut)
+    }
+
+    pub fn new_keydown_with_key(key: &str) -> Self {
+        Self::new().action(StimulusEvents::KeyDownWithKey(key.into()))
+    }
 }
 
 impl fmt::Display for StimulusAction {

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ pub enum StimulusEvents {`
`13`	`13`	`FocusIn,`
`14`	`14`	`KeyDown,`
`15`	`15`	`KeyUp,`
	`16`	`+ KeyDownWithKey(String),`
`16`	`17`	`}`
`17`	`18`
`18`	`19`	`impl fmt::Display for StimulusEvents {`
`@@ -27,6 +28,7 @@ impl fmt::Display for StimulusEvents {`
`27`	`28`	`StimulusEvents::FocusIn => write!(f, "focusin"),`
`28`	`29`	`StimulusEvents::KeyDown => write!(f, "keydown"),`
`29`	`30`	`StimulusEvents::KeyUp => write!(f, "keyup"),`
	`31`	`+ StimulusEvents::KeyDownWithKey(ref key) => write!(f, "keydown.{}", key),`
`30`	`32`	`}`
`31`	`33`	`}`
`32`	`34`	`}`
`@@ -45,6 +47,7 @@ impl FromStr for StimulusEvents {`
`45`	`47`	`"focusin" => Ok(StimulusEvents::FocusIn),`
`46`	`48`	`"keydown" => Ok(StimulusEvents::KeyDown),`
`47`	`49`	`"keyup" => Ok(StimulusEvents::KeyUp),`
	`50`	`+ "keydown.enter" => Ok(StimulusEvents::KeyDownWithKey("enter".into())),`
`48`	`51`	`_ => Err(()),`
`49`	`52`	`}`
`50`	`53`	`}`
`@@ -88,6 +91,14 @@ impl StimulusAction {`
`88`	`91`	`pub fn new_input() -> Self {`
`89`	`92`	`Self::new().action(StimulusEvents::Input)`
`90`	`93`	`}`
	`94`	`+`
	`95`	`+ pub fn new_focusout() -> Self {`
	`96`	`+ Self::new().action(StimulusEvents::FocusOut)`
	`97`	`+ }`
	`98`	`+`
	`99`	`+ pub fn new_keydown_with_key(key: &str) -> Self {`
	`100`	`+ Self::new().action(StimulusEvents::KeyDownWithKey(key.into()))`
	`101`	`+ }`
`91`	`102`	`}`
`92`	`103`
`93`	`104`	`impl fmt::Display for StimulusAction {`