9c4124ba80
This commits adds a components for inline editing functionality. It has three buttons. The first one starts inline editing. When clicked, it converts the text into an editable input field, allowing users to modify the content directly on the page. The second button is for saving the changes made to the inline edit. It captures the modified content and updates the server with the new value. The third button is for canceling the inline edit, discarding any changes made during the editing process and reverting the content back to its original state.
35 lines
746 B
Plaintext
35 lines
746 B
Plaintext
<%# locals: (url: request.path, csrf_url: url, confirmation_message: nil) %>
|
|
|
|
<div class="group-[.active]/inline-editable:hidden block">
|
|
<%== part(
|
|
"components/button",
|
|
text: "",
|
|
icon: "hero-pencil",
|
|
extra_class: "edit-inline-btn",
|
|
type: "warning"
|
|
) %>
|
|
</div>
|
|
|
|
<div class="group-[.active]/inline-editable:block hidden">
|
|
<%== part(
|
|
"components/button",
|
|
text: "",
|
|
icon: "hero-check-circle",
|
|
extra_class: "save-inline-btn",
|
|
type: "safe",
|
|
attributes: {
|
|
"data-url" => url,
|
|
"data-csrf" => csrf_token(csrf_url, "PATCH"),
|
|
"data-confirmation-message" => confirmation_message
|
|
}
|
|
) %>
|
|
|
|
<%== part(
|
|
"components/button",
|
|
text: "",
|
|
icon: "hero-x-circle",
|
|
extra_class: "cancel-inline-btn",
|
|
type: "danger"
|
|
) %>
|
|
</div>
|