Skip to content

Editable header custom input actions #1458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 13, 2024
Merged

Editable header custom input actions #1458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35b17fc
Editable header custom input actions
levkk May 13, 2024
ac3bb43
fmt
levkk May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 27 additions & 3 deletions pgml-dashboard/src/components/inputs/text/editable_header/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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),
}
}
}
Expand Down Expand Up @@ -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
Expand Down
17 changes: 12 additions & 5 deletions pgml-dashboard/src/components/inputs/text/editable_header/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
11 changes: 11 additions & 0 deletions pgml-dashboard/src/components/stimulus/stimulus_action/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ pub enum StimulusEvents {
FocusIn,
KeyDown,
KeyUp,
KeyDownWithKey(String),
}

impl fmt::Display for StimulusEvents {
Expand All @@ -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),
}
}
}
Expand All @@ -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(()),
}
}
Expand Down Expand Up @@ -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 {
Expand Down