Escape periods and display the group name properly (#15819)

* Escape periods and display the group name properly

* Rename method to dom_safe_name and move to admin helper

* Replace beginning of string digit with underscore then digit
This commit is contained in:
Andy Zhao 2021-12-17 17:35:42 -05:00 committed by GitHub
parent 6335f9a7e9
commit 8a7e5a5566
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 14 deletions

View file

@ -10,4 +10,8 @@ module AdminHelper
def display_name(group_name)
group_name.to_s.tr("_", " ").titleize
end
def dom_safe_name(group_name)
group_name.gsub(/\s+|\./, "_").gsub(/\A(\d)/, '_\1')
end
end

View file

@ -1,16 +1,16 @@
<span data-controller="modal" data-modal-root-selector-value="#add-<%= group_name %>-profile-field-modal-root" data-modal-content-selector-value="#add-<%= group_name %>-profile-field-modal" data-modal-title-value="Add Profile Field" data-modal-size-value="s" class="mx-1">
<span data-controller="modal" data-modal-root-selector-value="#add-<%= dom_safe_name %>-profile-field-modal-root" data-modal-content-selector-value="#add-<%= dom_safe_name %>-profile-field-modal" data-modal-title-value="Add Profile Field" data-modal-size-value="s" 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 id="add-<%= dom_safe_name %>-profile-field-modal" class="hidden">
<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 %>
<%= render "profile_field_form", form: form, group: group, group_name: dom_safe_name %>
<%= form.submit class: "btn btn-primary" %>
<% end %>
</div>
</div>
<div id="add-<%= group_name %>-profile-field-modal-root"></div>
<div id="add-<%= dom_safe_name %>-profile-field-modal-root"></div>
</span>

View file

@ -1,9 +1,9 @@
<span data-controller="modal" data-modal-root-selector-value="#edit-group-<%= group_name %>-modal-root" data-modal-content-selector-value="#edit-group-<%= group_name %>-modal" data-modal-title-value="Edit Group <%= group_name %>" data-modal-size-value="s" class="mx-1">
<span data-controller="modal" data-modal-root-selector-value="#edit-group-<%= dom_safe_name %>-modal-root" data-modal-content-selector-value="#edit-group-<%= dom_safe_name %>-modal" data-modal-title-value="Edit Group <%= group.name %>" data-modal-size-value="s" 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 id="edit-group-<%= dom_safe_name %>-modal" class="hidden">
<div class="form-group grid p-6 mb-6 gap-1">
<%= form_for [:admin, group] do |form| %>
<div class="form-group">
@ -19,5 +19,5 @@
</div>
</div>
<div id="edit-group-<%= group_name %>-modal-root"></div>
<div id="edit-group-<%= dom_safe_name %>-modal-root"></div>
</span>

View file

@ -1,10 +1,9 @@
<% @grouped_profile_fields.each do |group| %>
<% group_name = group.name.gsub(/\s+/, "_") %>
<article id="profile-field-group-<%= group.id %>" class="row my-3">
<div class="card w-100">
<div class="card-header">
<div class="card-header__information">
<div class="fw-bold fs-l"><%= group_name %></div>
<div class="fw-bold fs-l"><%= group.name %></div>
<div class="fw-bold fs-s">&nbsp;(<%= group.profile_fields.length %>)</div>
<% if group.description %>
<div class="fs-s group__description"><%= group.description %></div>
@ -12,17 +11,17 @@
</div>
<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 } %>
<%= render partial: "add_profile_field_modal", locals: { group: group, dom_safe_name: dom_safe_name(group.name) } %>
<%= render partial: "edit_group_modal", locals: { group: group, dom_safe_name: dom_safe_name(group.name) } %>
<%= 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">
<button id="<%= dom_safe_name(group.name) %>Header" data-toggle="collapse" class="crayons-btn crayons-btn--secondary mx-1"
data-target="#<%= dom_safe_name(group.name) %>BodyContainer" aria-expanded="false" aria-controls="<%= dom_safe_name(group.name) %>BodyContainer">
Toggle
</button>
</div>
</div>
<div id="<%= group_name %>BodyContainer" class="collapse hide p-3" aria-labelledby="<%= group_name %>Header">
<div id="<%= dom_safe_name(group.name) %>BodyContainer" class="collapse hide p-3" aria-labelledby="<%= dom_safe_name(group.name) %>Header">
<% if group.profile_fields.empty? %>
<div> There are no profile fields configured for this group. </div>
<% else %>