javascript added to easily fill in form fields with name elements

src/Bundle/ChillPersonBundle/Controller/PersonController.php

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

src/Bundle/ChillPersonBundle/Resources/views/Person/create.html.twig

@@ -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 %}