précision champs importants et manquants dans edit form

assets/edit.js

@@ -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, '&quot;')}">?</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);
+    }
   }
 }
 
@@ -43,4 +123,4 @@ function parseCuisine() {
 }
 
 window.updateCompletionProgress = updateCompletionProgress;
-window.parseCuisine = parseCuisine;
+window.parseCuisine = parseCuisine;

assets/styles/app.css

@@ -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 {