js code put in seperate file for compilation

src/Bundle/ChillPersonBundle/Resources/public/page/person/suggest-names.js

@@ -0,0 +1,60 @@
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+window.addEventListener('DOMContentLoaded', function() {
+
+    const uri = decodeURI(location.hash.substring(1))
+    // console.log(uri)
+    let searchFragments = uri.split(' ')
+    console.log(searchFragments)
+    searchFragments = searchFragments.filter((el) => {
+        if ( ( el.startsWith("firstname") || el.startsWith("lastname") ) || (el !== '' && !el.startsWith('birthdate') && !el.startsWith('gender') && !el.startsWith('city') && !el.startsWith('phonenumber') && !el.startsWith('@'))) {
+            return el
+        }
+    })
+
+    console.log('after filter', searchFragments)
+
+    searchFragments = searchFragments.map((el) => {
+        if (el.startsWith("firstname")) {
+            return el.slice(10)
+        } else if (el.startsWith("lastname")) {
+            return el.slice(10)
+        }
+        return el.replace('\"', '')
+    })
+
+    console.log(searchFragments)
+
+    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.querySelectorAll('.name')
+
+    tags.forEach((tag) => {
+        tag.addEventListener('click', function(e) {
+            const field = e.target.parentElement.id === 'suggest-lastname' ? document.getElementById('lastname-field') : document.getElementById('firstname-field')
+                const suggestion = e.target.parentElement.id === 'suggest-lastname' ? e.target.textContent.toUpperCase() : e.target.textContent
+
+                if (field.value === '') {
+                    field.value = suggestion;
+                } else {
+                    field.value = `${field.value} ${suggestion}`
+                }
+                e.target.style.display = "none";
+
+                [...document.querySelectorAll("p")]
+                    .filter(p => p.textContent.includes(e.target.textContent))
+                    .forEach(p => p.style.display = "none")
+        })
+    })
+
+})
+

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

@@ -120,64 +120,5 @@
 {% endblock content %}
 
 {% block js %}
-    {# {{ encore_entry_script_tags('mod_disablebuttons') }} #}
+    {{ encore_entry_script_tags('page_suggest_names') }}
-    <script>
-        function capitalizeFirstLetter(string) {
-            return string.charAt(0).toUpperCase() + string.slice(1);
-        }
-
-        const uri = decodeURI(location.hash.substring(1))
-        console.log(uri)
-        let searchFragments = uri.split(' ')
-        console.log(searchFragments)
-        searchFragments = searchFragments.filter((el) => {
-            if ( ( el.startsWith("firstname") || el.startsWith("lastname") ) || (el !== '' && !el.startsWith('birthdate') && !el.startsWith('gender') && !el.startsWith('city') && !el.startsWith('phonenumber') && !el.startsWith('@'))) {
-                return el
-            }
-        })
-
-        console.log('after filter', searchFragments)
-
-        searchFragments = searchFragments.map((el) => {
-            if (el.startsWith("firstname")) {
-                return el.slice(10)
-            } else if (el.startsWith("lastname")) {
-                return el.slice(10)
-            }
-            return el.replace('\"', '')
-        })
-
-        console.log(searchFragments)
-
-        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.querySelectorAll('.name')
-
-        tags.forEach((tag) => {
-            tag.addEventListener('click', function(e) {
-                const field = e.target.parentElement.id === 'suggest-lastname' ? document.getElementById('lastname-field') : document.getElementById('firstname-field')
-                    const suggestion = e.target.parentElement.id === 'suggest-lastname' ? e.target.textContent.toUpperCase() : e.target.textContent
-
-                    if (field.value === '') {
-                        field.value = suggestion;
-                    } else {
-                        field.value = `${field.value} ${suggestion}`
-                    }
-                    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 %}

src/Bundle/ChillPersonBundle/chill.webpack.config.js

@@ -18,4 +18,5 @@ module.exports = function(encore, entries)
     encore.addEntry('page_person', __dirname + '/Resources/public/page/person/index.js');
     encore.addEntry('page_accompanying_course_index_person_locate', __dirname + '/Resources/public/page/accompanying_course_index/person_locate.js');
     encore.addEntry('page_accompanying_course_index_masonry', __dirname + '/Resources/public/page/accompanying_course_index/masonry.js');
+    encore.addEntry('page_suggest_names', __dirname + '/Resources/public/page/person/suggest-names.js');
 };