update logic to adapt to altnames

This commit is contained in:
Julien Fastré 2022-01-19 17:46:27 +01:00
parent 409cd40460
commit 03bd4d1942
2 changed files with 34 additions and 25 deletions

View File

@ -1,21 +1,17 @@
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
return string.charAt(0).toLocaleUpperCase() + 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)
@ -25,34 +21,39 @@ window.addEventListener('DOMContentLoaded', function() {
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")
const pre = '<ul class="list-suggest add-items inline">';
const after = '</ul>';
suggestFirstName.innerHTML = suggestions.join(' ');
suggestLastname.innerHTML = suggestions.join(' ');
document.querySelectorAll('[data-suggest-container]').forEach(function(container) {
const suggestions = searchFragments.map((el) => `<li class="suggest-item-name"><span data-suggest-target="${container.dataset.suggestContainer}">${capitalizeFirstLetter(el)}</span></li>`);
container.innerHTML = pre + suggestions.join(' ') + after;
})
}
const tags = document.querySelectorAll('.name')
tags.forEach((tag) => {
const tags = document.querySelectorAll('[data-suggest-target]').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
const field = document.querySelector(`[name="${e.target.dataset.suggestTarget}"]`);
let suggestion = e.target.textContent.trim();
switch (field.dataset.suggestTransform) {
case 'uppercase_all':
suggestion = suggestion.toLocaleUpperCase();
break;
case 'uppercase_first_letter':
default:
suggestion = capitalizeFirstLetter(suggestion);
}
if (field.value === '') {
if (field.value === '') {
field.value = suggestion;
} else {
field.value = `${field.value} ${suggestion}`
}
e.target.style.display = "none";
[...document.querySelectorAll("p")]
[...document.querySelectorAll("[data-suggest-target]")]
.filter(p => p.textContent.includes(e.target.textContent))
.forEach(p => p.style.display = "none")
.forEach(p => p.remove());
})
})

View File

@ -66,21 +66,29 @@
<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'}) }}
{{ form_widget(form.lastName, {'attr': {'data-suggest-transform': 'uppercase_all' } }) }}
</div>
</div>
<div id="suggest-lastname" class="col-sm-8" style="margin-left: auto;"></div>
<div data-suggest-container="{{ form.lastName.vars.full_name|e('html_attr') }}" class="col-sm-8" style="margin-left: auto;"></div>
<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' }) }}
{{ form_widget(form.firstName, {'attr': {'data-suggest-transform': 'uppercase_first_letter' } }) }}
</div>
</div>
<div id="suggest-firstname" class="col-sm-8" style="margin-left: auto;"></div>
<div data-suggest-container="{{ form.firstName.vars.full_name|e('html_attr') }}" class="col-sm-8" style="margin-left: auto;"></div>
{% if form.altNames is defined %}
{{ form_widget(form.altNames) }}
{% for altName in form.altNames %}
<div class="row mb-1" style="display:flex;">
{{ form_label(altName) }}
<div class="col-sm-8">
{{ form_widget(altName, {'attr': {'data-suggest-transform': 'uppercase_all' } }) }}
</div>
</div>
<div data-suggest-container="{{ altName.vars.full_name|e('html_attr') }}" class="col-sm-8" style="margin-left: auto;"></div>
{% endfor %}
{% endif %}
{{ form_row(form.gender, { 'label' : 'Gender'|trans }) }}