javascript added to easily fill in form fields with name elements

This commit is contained in:
Julie Lenaerts 2022-01-17 16:24:35 +01:00
parent 41354097f3
commit 96b1f31665
2 changed files with 52 additions and 3 deletions

View File

@ -266,7 +266,6 @@ final class PersonController extends AbstractController
[
'form' => $form->createView(),
'alternatePersons' => $alternatePersons ?? [],
'_fragment' => $request->query->get('_fragment')
]
);
}

View File

@ -63,9 +63,21 @@
{{ form_start(form, {'attr' : {'id' : 'create-form'}}) }}
{{ form_row(form.lastName, { 'label' : 'Last name'|trans }) }}
<div class="row mb-1" style="display:flex;">
{{ form_label(form.lastName, 'Last name'|trans) }}
<div class="col-sm-8">
{{ form_widget(form.lastName, { 'id' : 'lastname-field'}) }}
</div>
</div>
<div id="suggest-lastname" class="col-sm-8" style="margin-left: auto;"></div>
{{ form_row(form.firstName, { 'label' : 'First name'|trans }) }}
<div class="row mb-1" style="display:flex;">
{{ form_label(form.firstName, 'First name'|trans) }}
<div class="col-sm-8">
{{ form_widget(form.firstName, { 'id' : 'firstname-field' }) }}
</div>
</div>
<div id="suggest-firstname" class="col-sm-8" style="margin-left: auto;"></div>
{% if form.altNames is defined %}
{{ form_widget(form.altNames) }}
@ -109,4 +121,42 @@
{% block js %}
{# {{ encore_entry_script_tags('mod_disablebuttons') }} #}
<script>
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
const searchFragments = location.hash.substring(1).split('%20')
if (searchFragments) {
const suggestions = searchFragments.map((el) => `<p class="name badge bg-person" style="cursor: pointer; margin-right: 5px;">${capitalizeFirstLetter(el)}</p>`)
const suggestFirstName = document.getElementById("suggest-firstname")
const suggestLastname = document.getElementById("suggest-lastname")
suggestFirstName.innerHTML = suggestions.join(' ');
suggestLastname.innerHTML = suggestions.join(' ');
}
const tags = document.getElementsByClassName('name')
for (let i=0; i < tags.length; i++) {
const tag = tags[i]
tag.onclick = function(e) {
const field = e.target.parentElement.id === 'suggest-lastname' ? document.getElementById('lastname-field') : document.getElementById('firstname-field')
if (field.value === '') {
field.value = e.target.textContent;
} else {
field.value = `${field.value} ${e.target.textContent}`
}
e.target.style.display = "none";
[...document.querySelectorAll("p")]
.filter(p => p.textContent.includes(e.target.textContent))
.forEach(p => p.style.display = "none")
}
}
</script>
{% endblock js %}