précision champs importants et manquants dans edit form
This commit is contained in:
parent
bf2c5bdf7d
commit
21d3a5dfc7
8 changed files with 304 additions and 48 deletions
|
@ -4,13 +4,36 @@
|
|||
* pour le formulaire de modification
|
||||
*/
|
||||
function updateCompletionProgress() {
|
||||
const inputs = document.querySelectorAll('input[type="text"]');
|
||||
const inputs = document.querySelectorAll('input[data-important]');
|
||||
let filledInputs = 0;
|
||||
let totalInputs = inputs.length;
|
||||
let missingFields = [];
|
||||
|
||||
inputs.forEach(input => {
|
||||
if (input.value.trim() !== '') {
|
||||
filledInputs++;
|
||||
} else {
|
||||
// Get the field label or name for display in the popup
|
||||
let fieldName = '';
|
||||
const label = input.closest('.row')?.querySelector('.form-label, .label-translated');
|
||||
if (label) {
|
||||
fieldName = label.textContent.trim();
|
||||
} else {
|
||||
// If no label found, try to get a meaningful name from the input
|
||||
const name = input.getAttribute('name');
|
||||
if (name) {
|
||||
// Extract field name from the attribute (e.g., commerce_tag_value__contact:email -> Email)
|
||||
const parts = name.split('__');
|
||||
if (parts.length > 1) {
|
||||
fieldName = parts[1].replace('commerce_tag_value_', '').replace('contact:', '');
|
||||
// Capitalize first letter
|
||||
fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
|
||||
} else {
|
||||
fieldName = name;
|
||||
}
|
||||
}
|
||||
}
|
||||
missingFields.push(fieldName || input.getAttribute('name') || 'Champ inconnu');
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -19,7 +42,64 @@ function updateCompletionProgress() {
|
|||
if (progressBar) {
|
||||
progressBar.style.width = completionPercentage + '%';
|
||||
progressBar.setAttribute('aria-valuenow', completionPercentage);
|
||||
document.querySelector('#completion_display').innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}%`;
|
||||
|
||||
// Create the completion display with a clickable question mark
|
||||
const displayElement = document.querySelector('#completion_display');
|
||||
|
||||
// Format missing fields as an HTML list for better readability
|
||||
let missingFieldsContent = '';
|
||||
if (missingFields.length > 0) {
|
||||
missingFieldsContent = '<ul class="list-unstyled mb-0">';
|
||||
// Filter out empty or undefined field names and sort them alphabetically
|
||||
missingFields
|
||||
.filter(field => field && field.trim() !== '')
|
||||
.sort()
|
||||
.forEach(field => {
|
||||
missingFieldsContent += `<li><i class="bi bi-exclamation-circle text-warning"></i> ${field}</li>`;
|
||||
});
|
||||
missingFieldsContent += '</ul>';
|
||||
} else {
|
||||
missingFieldsContent = 'Tous les champs importants sont remplis !';
|
||||
}
|
||||
|
||||
displayElement.innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}% <a href="#" class="missing-fields-info badge rounded-pill bg-warning text-dark ms-1" style="text-decoration: none; font-weight: bold;" data-bs-toggle="popover" data-bs-placement="bottom" title="Champs manquants" data-bs-html="true" data-bs-content="${missingFieldsContent.replace(/"/g, '"')}">?</a>`;
|
||||
|
||||
// Initialize the Bootstrap popover
|
||||
const popoverTrigger = displayElement.querySelector('.missing-fields-info');
|
||||
if (popoverTrigger) {
|
||||
// Add click handler to focus on the first missing field
|
||||
popoverTrigger.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // Prevent scrolling to top
|
||||
|
||||
// Find the first missing field
|
||||
const missingInput = document.querySelector('input[data-important]:not(.good_filled)');
|
||||
if (missingInput) {
|
||||
// Focus on the first missing field
|
||||
missingInput.focus();
|
||||
// Scroll to the field if needed
|
||||
missingInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
});
|
||||
|
||||
// Use setTimeout to ensure this runs after the current execution context
|
||||
setTimeout(() => {
|
||||
if (typeof bootstrap !== 'undefined' && bootstrap.Popover) {
|
||||
// Destroy existing popover if any
|
||||
const existingPopover = bootstrap.Popover.getInstance(popoverTrigger);
|
||||
if (existingPopover) {
|
||||
existingPopover.dispose();
|
||||
}
|
||||
// Initialize new popover
|
||||
new bootstrap.Popover(popoverTrigger, {
|
||||
html: true,
|
||||
trigger: 'click',
|
||||
container: 'body'
|
||||
});
|
||||
} else {
|
||||
console.warn('Bootstrap popover not available');
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -18,13 +18,22 @@ body {
|
|||
#qrcode {
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
.filled {
|
||||
background-color: rgba(0, 255, 0, 0.2) !important;
|
||||
input[data-important]{
|
||||
border-color: #7a8fbb ;
|
||||
border-left-width: 5px ;
|
||||
}
|
||||
|
||||
.filled:hover {
|
||||
background-color: #8abb7a !important;
|
||||
input[data-important]:before{
|
||||
content : ">" !important ;
|
||||
}
|
||||
|
||||
.filled, .good_filled {
|
||||
border-color: rgba(0, 255, 0, 0.8) !important;
|
||||
color: #082b0a !important;
|
||||
}
|
||||
|
||||
.filled:hover , .good_filled:hover {
|
||||
background-color: #d9ffd1 !important;
|
||||
}
|
||||
|
||||
.no-name {
|
||||
|
|
|
@ -320,6 +320,10 @@ class PublicController extends AbstractController
|
|||
// Récupérer tous les tags du formulaire
|
||||
$tags = [];
|
||||
$request_post = $request->request->all();
|
||||
|
||||
var_dump($request_post);
|
||||
|
||||
|
||||
$request_post = $this->motocultrice->map_post_values($request_post);
|
||||
$request_post = $request_post ?? [];
|
||||
// Log temporaire pour debug POST
|
||||
|
@ -343,6 +347,11 @@ class PublicController extends AbstractController
|
|||
// Récupérer le token OSM depuis les variables d'environnement
|
||||
$osm_api_token = $_ENV['APP_OSM_BEARER'];
|
||||
|
||||
|
||||
var_dump($tags_after_modif);
|
||||
die("tosssp");
|
||||
|
||||
|
||||
try {
|
||||
$client = new Client();
|
||||
|
||||
|
|
|
@ -27,6 +27,10 @@ class Motocultrice
|
|||
'harassment_prevention',
|
||||
'image',
|
||||
'panoramax',
|
||||
'opening_hours',
|
||||
'email',
|
||||
'contact:email',
|
||||
'contact:mastodon',
|
||||
];
|
||||
// les tags OSM que l'on estime nécessaires pour un commerce
|
||||
public $base_tags = [
|
||||
|
|
|
@ -38,6 +38,7 @@
|
|||
<div class="col-12 col-md-8">
|
||||
<input type="text" class="form-control"
|
||||
name="commerce_tag_value__name"
|
||||
data-important="true"
|
||||
value="{% if commerce_overpass.tags_converted.name is defined %}{{ commerce_overpass.tags_converted.name }}{% endif %}">
|
||||
|
||||
</div>
|
||||
|
@ -56,11 +57,49 @@
|
|||
<input type="text" class="form-control"
|
||||
id="commerce_tag_value__contact:phone"
|
||||
name="commerce_tag_value__contact:phone"
|
||||
data-important="true"
|
||||
value="{{ commerce_overpass.tags_converted['contact:phone'] ?? '' }}"
|
||||
placeholder="+33 1 23 45 67 89">
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<div id="email" class="row mb-3 ">
|
||||
<div class="col-md-5">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-envelope me-2"></i>
|
||||
<span class="label-translated" title="contact:email">Email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control"
|
||||
data-important="true"
|
||||
id="commerce_tag_value__contact:email" name="commerce_tag_value__contact:email" value="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<div id="mastodon" class="row mb-3 ">
|
||||
<div class="col-md-5">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-mastodon me-2"></i>
|
||||
<span class="label-translated" title="contact:mastodon">Contact Mastodon</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control"
|
||||
data-important="true"
|
||||
id="commerce_tag_value__contact:mastodon" name="commerce_tag_value__contact:mastodon" value="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% include 'public/edit/opening_hours.html.twig' %}
|
||||
|
||||
|
||||
<div id="images">
|
||||
{% if commerce_overpass.tags_converted.image is defined and commerce_overpass.tags_converted.image|length > 0 %}
|
||||
<img class="img-fluid img-thumbnail mb-3" style="height: 500px; width: auto;"
|
||||
|
@ -103,7 +142,6 @@
|
|||
opening_hours {{ 'display.already_filled'|trans }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% include 'public/edit/opening_hours.html.twig' %}
|
||||
|
||||
|
||||
{% include 'public/edit/clim.html.twig' %}
|
||||
|
@ -258,7 +296,7 @@
|
|||
<script>
|
||||
{% if commerce is not empty and mapbox_token is not empty and maptiler_token is not empty and commerce_overpass['@attributes'].lon is defined and commerce_overpass['@attributes'].lat is defined %}
|
||||
mapboxgl.accessToken = '{{ mapbox_token }}';
|
||||
map = new mapboxgl.Map({
|
||||
let map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
|
||||
center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}],
|
||||
|
@ -278,9 +316,14 @@
|
|||
});
|
||||
|
||||
|
||||
/**
|
||||
* indiquer la complétion des champs importants dans ce formulaire
|
||||
* @param e
|
||||
*/
|
||||
function check_validity(e) {
|
||||
|
||||
list_inputs_good_to_fill = [
|
||||
'input[name="commerce_tag_value__name"]',
|
||||
'input[name="commerce_tag_value__contact:email"]',
|
||||
'input[name="commerce_tag_value__contact:phone"]',
|
||||
'input[name="commerce_tag_value__contact:website"]',
|
||||
|
@ -331,10 +374,114 @@
|
|||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
// Collect all missing important fields
|
||||
const missingImportantFields = [];
|
||||
list_inputs_good_to_fill.forEach(selector => {
|
||||
const input = document.querySelector(selector);
|
||||
if (input && input.value.trim() === '') {
|
||||
// Get the field label or name for display
|
||||
let fieldName = '';
|
||||
const label = input.closest('.row')?.querySelector('.form-label, .label-translated');
|
||||
if (label) {
|
||||
fieldName = label.textContent.trim();
|
||||
} else {
|
||||
// If no label found, try to get a meaningful name from the input
|
||||
const name = input.getAttribute('name');
|
||||
if (name) {
|
||||
// Extract field name from the attribute (e.g., commerce_tag_value__contact:email -> Email)
|
||||
const parts = name.split('__');
|
||||
if (parts.length > 1) {
|
||||
fieldName = parts[1].replace('commerce_tag_value_', '').replace('contact:', '');
|
||||
// Capitalize first letter
|
||||
fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
|
||||
} else {
|
||||
fieldName = name;
|
||||
}
|
||||
}
|
||||
}
|
||||
missingImportantFields.push(fieldName || input.getAttribute('name') || 'Champ inconnu');
|
||||
}
|
||||
});
|
||||
|
||||
if (errors.length > 0 || missingImportantFields.length > 0) {
|
||||
e.preventDefault();
|
||||
document.querySelector('#validation_messages').innerHTML = errors.join('<br>');
|
||||
|
||||
// Format missing fields as an HTML list for better readability
|
||||
let missingFieldsContent = '';
|
||||
if (missingImportantFields.length > 0) {
|
||||
// Filter out empty or undefined field names and sort them alphabetically
|
||||
const filteredMissingFields = missingImportantFields
|
||||
.filter(field => field && field.trim() !== '')
|
||||
.sort();
|
||||
|
||||
// Create the HTML content for the popover
|
||||
missingFieldsContent = '<ul class="list-unstyled mb-0">';
|
||||
filteredMissingFields.forEach(field => {
|
||||
missingFieldsContent += `<li><i class="bi bi-exclamation-circle text-warning"></i> ${field}</li>`;
|
||||
});
|
||||
missingFieldsContent += '</ul>';
|
||||
}
|
||||
|
||||
// Display validation errors
|
||||
let validationMessage = '';
|
||||
if (errors.length > 0) {
|
||||
validationMessage += errors.join('<br>');
|
||||
}
|
||||
|
||||
// Add information about missing fields with a popover
|
||||
if (missingImportantFields.length > 0) {
|
||||
if (validationMessage) {
|
||||
validationMessage += '<br>';
|
||||
}
|
||||
validationMessage += `Champs manquants: ${missingImportantFields.length} <a href="#" class="missing-fields-info badge rounded-pill bg-warning text-dark ms-1" style="text-decoration: none; font-weight: bold;" data-bs-toggle="popover" data-bs-placement="bottom" title="Champs manquants" data-bs-html="true" data-bs-content="${missingFieldsContent.replace(/"/g, '"')}">?</a>`;
|
||||
}
|
||||
|
||||
document.querySelector('#validation_messages').innerHTML = validationMessage;
|
||||
document.querySelector('#validation_messages').classList.remove('d-none');
|
||||
document.querySelector('#validation_messages').classList.add('is-invalid');
|
||||
|
||||
// Initialize the Bootstrap popover
|
||||
const popoverTrigger = document.querySelector('.missing-fields-info');
|
||||
if (popoverTrigger) {
|
||||
// Add click handler to focus on the first missing field
|
||||
popoverTrigger.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // Prevent scrolling to top
|
||||
|
||||
// Find the first missing field from the list_inputs_good_to_fill
|
||||
let firstMissingField = null;
|
||||
for (const selector of list_inputs_good_to_fill) {
|
||||
const input = document.querySelector(selector);
|
||||
if (input && input.value.trim() === '') {
|
||||
firstMissingField = input;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (firstMissingField) {
|
||||
// Focus on the first missing field
|
||||
firstMissingField.focus();
|
||||
// Scroll to the field if needed
|
||||
firstMissingField.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
});
|
||||
|
||||
// Use setTimeout to ensure this runs after the current execution context
|
||||
setTimeout(() => {
|
||||
if (typeof bootstrap !== 'undefined' && bootstrap.Popover) {
|
||||
// Destroy existing popover if any
|
||||
const existingPopover = bootstrap.Popover.getInstance(popoverTrigger);
|
||||
if (existingPopover) {
|
||||
existingPopover.dispose();
|
||||
}
|
||||
// Initialize new popover
|
||||
new bootstrap.Popover(popoverTrigger, {
|
||||
html: true,
|
||||
trigger: 'click',
|
||||
container: 'body'
|
||||
});
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -5,11 +5,16 @@
|
|||
<div class="row mb-3">
|
||||
<div class="col-12 col-md-2">
|
||||
<label for="commerce_tag_value__contact:housenumber">{{ 'display.keys.contact:housenumber'|trans }}</label>
|
||||
<input type="text" class="form-control text-end" name="commerce_tag_value__contact:housenumber" value="{% if commerce_overpass.tags_converted['contact:housenumber'] is defined %}{{ commerce_overpass.tags_converted['contact:housenumber'] }}{% endif %}">
|
||||
<input type="text" class="form-control text-end"
|
||||
name="commerce_tag_value__contact:housenumber"
|
||||
data-important="true"
|
||||
value="{% if commerce_overpass.tags_converted['contact:housenumber'] is defined %}{{ commerce_overpass.tags_converted['contact:housenumber'] }}{% endif %}">
|
||||
</div>
|
||||
<div class="col-12 col-md-10">
|
||||
<label for="commerce_tag_value__contact:street">{{ 'display.keys.contact:street'|trans }}</label>
|
||||
<input type="text" class="form-control" name="commerce_tag_value__contact:street" value="{% if commerce_overpass.tags_converted['contact:street'] is defined %}{{ commerce_overpass.tags_converted['contact:street'] }}{% endif %}">
|
||||
<input type="text" class="form-control" name="commerce_tag_value__contact:street"
|
||||
data-important="true"
|
||||
value="{% if commerce_overpass.tags_converted['contact:street'] is defined %}{{ commerce_overpass.tags_converted['contact:street'] }}{% endif %}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,5 +1,5 @@
|
|||
<div id="opening_hours">
|
||||
<h2>
|
||||
<h2 class="mt-4">
|
||||
<i class="bi bi-clock"></i>
|
||||
{{ 'display.opening_hours'|trans }}</h2>
|
||||
<p class="description">{{ 'display.opening_hours_description'|trans }}</p>
|
||||
|
@ -10,6 +10,7 @@
|
|||
class="form-control"
|
||||
name="custom__opening_hours"
|
||||
id="custom__opening_hours"
|
||||
data-important="true"
|
||||
value="{{ commerce_overpass.tags_converted.opening_hours }}">
|
||||
{% else %}
|
||||
<input type="text"
|
||||
|
@ -17,6 +18,7 @@
|
|||
class="form-control"
|
||||
name="custom__opening_hours"
|
||||
id="custom__opening_hours"
|
||||
data-important="true"
|
||||
value="">
|
||||
<br>
|
||||
{% endif %}
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
{# {% if k not in excluded_tags_to_render %} #}
|
||||
{% if k not in excluded_tags_to_render %}
|
||||
<div class="input-group">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
|
@ -36,7 +36,7 @@
|
|||
value="{{ v }}"
|
||||
{% if hide_filled_inputs is defined and v %}style="display: none;"{% endif %}>
|
||||
</div>
|
||||
{# {% endif %} #}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue