Convert inline JS to Stimulus (#11364)
* Convert inline JS to Stimulus * Use Stimulus targets over element IDs
This commit is contained in:
Jacob Herrington
GitHub
parent
3fd6aa5c89
commit
9f62711123
5 changed files with 103 additions and 132 deletions
11
app/javascript/admin/controllers/modal_controller.js
Normal file
11
app/javascript/admin/controllers/modal_controller.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { Controller } from 'stimulus';
|
||||
|
||||
export default class ModalController extends Controller {
|
||||
static targets = ['toggle'];
|
||||
|
||||
toggleModal() {
|
||||
if (this.toggleTarget) {
|
||||
this.toggleTarget.classList.toggle('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +1,36 @@
|
|||
<button class="btn btn-primary" type="button" onclick="showAddGroupModal()">
|
||||
Add group
|
||||
</button>
|
||||
<span data-controller="modal">
|
||||
<button class="crayons-btn" type="button" data-action="modal#toggleModal">
|
||||
Add group
|
||||
</button>
|
||||
|
||||
<div id="add-group-modal" class="hidden">
|
||||
<div class="crayons-modal crayons-modal--s absolute">
|
||||
<div class="crayons-modal__box">
|
||||
<header class="crayons-modal__box__header">
|
||||
<h2>Add Group</h2>
|
||||
<button type="button" onclick="hideAddGroupModal()" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="crayons-modal__box__body">
|
||||
<div class="form-group grid p-6 mb-6 gap-1">
|
||||
<%= form_for [:admin, ProfileFieldGroup.new] do |form| %>
|
||||
<div class="form-group">
|
||||
<%= form.label :name %>
|
||||
<%= form.text_field :name, class: "form-control" %>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<%= form.label :description %>
|
||||
<%= form.text_field :description, class: "form-control" %>
|
||||
</div>
|
||||
<%= form.submit class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
<div id="add-group-modal" class="hidden" data-target="modal.toggle">
|
||||
<div class="crayons-modal crayons-modal--s absolute">
|
||||
<div class="crayons-modal__box">
|
||||
<header class="crayons-modal__box__header">
|
||||
<h2>Add Group</h2>
|
||||
<button type="button" data-action="modal#toggleModal" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="crayons-modal__box__body">
|
||||
<div class="form-group grid p-6 mb-6 gap-1">
|
||||
<%= form_for [:admin, ProfileFieldGroup.new] do |form| %>
|
||||
<div class="form-group">
|
||||
<%= form.label :name %>
|
||||
<%= form.text_field :name, class: "form-control" %>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<%= form.label :description %>
|
||||
<%= form.text_field :description, class: "form-control" %>
|
||||
</div>
|
||||
<%= form.submit class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crayons-modal__overlay"></div>
|
||||
</div>
|
||||
<div class="crayons-modal__overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showAddGroupModal() {
|
||||
const confirmationModal = document.getElementById('add-group-modal');
|
||||
if (confirmationModal) {
|
||||
confirmationModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function hideAddGroupModal() {
|
||||
const confirmationModal = document.getElementById('add-group-modal');
|
||||
if (confirmationModal) {
|
||||
confirmationModal.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,29 @@
|
|||
<div onclick="showAddProfileFieldModal('<%= group_name %>')">
|
||||
Add Field
|
||||
</div>
|
||||
<span data-controller="modal" class="mx-1">
|
||||
<button data-action="modal#toggleModal" class="crayons-btn">
|
||||
Add Field
|
||||
</button>
|
||||
|
||||
<div id="add-<%= group_name %>-profile-field-modal" class="hidden">
|
||||
<div class="crayons-modal crayons-modal--s">
|
||||
<div class="crayons-modal__box">
|
||||
<header class="crayons-modal__box__header">
|
||||
<h2>Add Profile Field</h2>
|
||||
<button type="button" onclick="hideProfileFieldModal('<%= group_name %>')" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="crayons-modal__box__body">
|
||||
<div class="form-group grid p-6 mb-6 gap-1">
|
||||
<%= form_for [:admin, ProfileField.new] do |form| %>
|
||||
<%= render "profile_field_form", form: form, group: group, group_name: group_name %>
|
||||
<%= form.submit class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
<div id="add-<%= group_name %>-profile-field-modal" class="hidden" data-target="modal.toggle">
|
||||
<div class="crayons-modal crayons-modal--s">
|
||||
<div class="crayons-modal__box">
|
||||
<header class="crayons-modal__box__header">
|
||||
<h2>Add Profile Field</h2>
|
||||
<button type="button" data-action="modal#toggleModal" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="crayons-modal__box__body">
|
||||
<div class="form-group grid p-6 mb-6 gap-1">
|
||||
<%= form_for [:admin, ProfileField.new] do |form| %>
|
||||
<%= render "profile_field_form", form: form, group: group, group_name: group_name %>
|
||||
<%= form.submit class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crayons-modal__overlay"></div>
|
||||
</div>
|
||||
<div class="crayons-modal__overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showAddProfileFieldModal(group_name) {
|
||||
const confirmationModal = document.getElementById(`add-${group_name}-profile-field-modal`);
|
||||
if (confirmationModal) {
|
||||
confirmationModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function hideProfileFieldModal(group_name) {
|
||||
const confirmationModal = document.getElementById(`add-${group_name}-profile-field-modal`);
|
||||
if (confirmationModal) {
|
||||
confirmationModal.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,36 @@
|
|||
<div onclick="showEditGroupModal('<%= group_name %>')" class="color-accent-warning-darker">
|
||||
Edit group
|
||||
</div>
|
||||
<span data-controller="modal" class="mx-1">
|
||||
<button data-action="modal#toggleModal" class="crayons-btn crayons-btn--secondary">
|
||||
Edit group
|
||||
</button>
|
||||
|
||||
<div id="edit-group-<%= group_name %>-modal" class="hidden">
|
||||
<div class="crayons-modal crayons-modal--s">
|
||||
<div class="crayons-modal__box">
|
||||
<header class="crayons-modal__box__header">
|
||||
<h2>Edit Group <%= group_name %></h2>
|
||||
<button type="button" onclick="hideEditGroupModal('<%= group_name %>')" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="crayons-modal__box__body">
|
||||
<div class="form-group grid p-6 mb-6 gap-1">
|
||||
<%= form_for [:admin, group] do |form| %>
|
||||
<div class="form-group">
|
||||
<%= form.label :name %>
|
||||
<%= form.text_field :name, class: "form-control" %>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<%= form.label :description %>
|
||||
<%= form.text_field :description, class: "form-control" %>
|
||||
</div>
|
||||
<%= form.submit class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
<div id="edit-group-<%= group_name %>-modal" class="hidden" data-target="modal.toggle">
|
||||
<div class="crayons-modal crayons-modal--s">
|
||||
<div class="crayons-modal__box">
|
||||
<header class="crayons-modal__box__header">
|
||||
<h2>Edit Group <%= group_name %></h2>
|
||||
<button type="button" data-action="modal#toggleModal" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="crayons-modal__box__body">
|
||||
<div class="form-group grid p-6 mb-6 gap-1">
|
||||
<%= form_for [:admin, group] do |form| %>
|
||||
<div class="form-group">
|
||||
<%= form.label :name %>
|
||||
<%= form.text_field :name, class: "form-control" %>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<%= form.label :description %>
|
||||
<%= form.text_field :description, class: "form-control" %>
|
||||
</div>
|
||||
<%= form.submit class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crayons-modal__overlay"></div>
|
||||
</div>
|
||||
<div class="crayons-modal__overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showEditGroupModal(group_name) {
|
||||
const confirmationModal = document.getElementById(`edit-group-${group_name}-modal`);
|
||||
if (confirmationModal) {
|
||||
confirmationModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function hideEditGroupModal(group_name) {
|
||||
const confirmationModal = document.getElementById(`edit-group-${group_name}-modal`);
|
||||
if (confirmationModal) {
|
||||
confirmationModal.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,11 @@
|
|||
<div class="card-header__actions">
|
||||
<%= render partial: "add_profile_field_modal", locals: { group: group, group_name: group_name } %>
|
||||
<%= render partial: "edit_group_modal", locals: { group: group, group_name: group_name } %>
|
||||
<div><%= link_to "Delete Group", admin_profile_field_group_path(group), data: { confirm: "Are you sure?" }, method: :delete, class: "color-accent-danger" %></div>
|
||||
<div id="<%= group_name %>Header" data-toggle="collapse" class="color-base-70"
|
||||
data-target="#<%= group_name %>BodyContainer" aria-expanded="false" aria-controls="<%= group_name %>BodyContainer">Toggle</div>
|
||||
<%= button_to "Delete Group", admin_profile_field_group_path(group), data: { confirm: "Are you sure?" }, method: :delete, class: "crayons-btn crayons-btn--danger mx-1" %>
|
||||
<button id="<%= group_name %>Header" data-toggle="collapse" class="crayons-btn crayons-btn--secondary mx-1"
|
||||
data-target="#<%= group_name %>BodyContainer" aria-expanded="false" aria-controls="<%= group_name %>BodyContainer">
|
||||
Toggle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -39,7 +41,7 @@
|
|||
<%= render "profile_field_form", form: form, group: group %>
|
||||
<%= form.submit class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
<%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-secondary" %>
|
||||
<%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-secondary mx-auto" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue