RC tarif: repositionner le blocage, placeholders et assouplir le blocage choix

ecole/public/css/global.css

@@ -422,6 +422,79 @@ a.grille-garanties:hover{
   color : white
 }
 
+#rcProjetBlockingSummary,
+#rcTarifBlockingSummary {
+  margin: 1rem 0 1.5rem 0;
+}
+
+.rc-blocking-summary {
+  display: none;
+  border-left: 6px solid #c62828;
+  background-color: #ffebee;
+  color: #b71c1c;
+  padding: 12px 16px;
+  border-radius: 6px;
+}
+
+.rc-blocking-title {
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.rc-blocking-list {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.rc-blocking-list li {
+  margin: 3px 0;
+}
+
+.rc-field-label {
+  display: block;
+  color: #1a237e;
+  font-weight: 700;
+  margin-bottom: 6px;
+  text-align: left;
+}
+
+.rc-three-col-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.rc-three-col-grid > [class*="col"] {
+  width: 100% !important;
+  margin-left: 0 !important;
+  padding: 0 !important;
+  display: flex;
+}
+
+.rc-three-col-grid .card {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.rc-three-col-grid .card-content {
+  flex: 1;
+}
+
+.rc-equal-card-row > [class*="col"] {
+  display: flex;
+}
+
+.rc-equal-card-row .card {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.rc-equal-card-row .card-content {
+  flex: 1;
+}
+
 #modalTarifCom span.material-icons {
   font-size: 4rem;
 }

ecole/public/js/tarif-form-rc.js

@@ -75,6 +75,8 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
 
     //Variables modulos et liste
     let modRCCA, modRCActRCC, modRCActRCE, modRCActCompl, modRCMar, modRCZone, modRCEngagCompl, modRCGarAdd, modRCSinistre, modRCFranchise, modRCPrimeMini
+    let rcTarifGuard = null;
+    let rcTarifHasErrors = false;
 
     // ═══════════════════════════════════════════════════════════════
     // FONCTIONS HELPERS 
@@ -93,6 +95,202 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
         return tranches[tranches.length - 1];
     }
 
+    function updateTarifChoiceButtonsState() {
+        const buttons = document.querySelectorAll('.franchise-card button[name]');
+        buttons.forEach((button) => {
+            const shouldDisable = rcTarifHasErrors;
+            button.disabled = shouldDisable;
+
+            if (!shouldDisable) {
+                button.removeAttribute('title');
+                return;
+            }
+            button.title = 'Corrigez les erreurs de saisie avant de sélectionner un tarif.';
+        });
+    }
+
+    function setupRCSafeValidation() {
+        if (!window.RCValidationUtils || typeof window.RCValidationUtils.createGuard !== 'function') {
+            return;
+        }
+
+        rcTarifGuard = window.RCValidationUtils.createGuard({
+            summaryId: 'rcTarifBlockingSummary',
+            summaryTitle: 'Impossible de choisir un tarif ou de continuer car :',
+            blockTargets: ['#generateDeclinaison', '#generateProject', '#comm-OK'],
+            onChange: function (messages) {
+                rcTarifHasErrors = messages.length > 0;
+                updateTarifChoiceButtonsState();
+            }
+        });
+
+        rcTarifGuard.registerField('#chiffreAffaire', {
+            profile: 'numeric',
+            label: "Chiffre d'affaires",
+            min: 0,
+            positive: true,
+            requiredWhen: function () {
+                return document.querySelector('input[name="cotisation"]:checked')?.value === 'revisable';
+            }
+        });
+
+        rcTarifGuard.registerField('#nbrVehicule', {
+            profile: 'integer',
+            label: 'Nombre de véhicule(s)',
+            min: 1,
+            max: 2,
+            requiredWhen: function () {
+                return document.querySelector('input[name="cotisation"]:checked')?.value === 'forfaitaire';
+            }
+        });
+
+        rcTarifGuard.registerField('#sinistre', {
+            profile: 'numeric',
+            label: 'Montant de sinistres annuel',
+            min: 0
+        });
+
+        rcTarifGuard.observe('.input-pourcent', {
+            profile: 'numeric',
+            label: "Pourcentage d'activité",
+            min: 0,
+            max: 100,
+            requiredWhen: function (field) {
+                return field && field.offsetParent !== null;
+            },
+            activeWhen: function (field) {
+                return field && field.offsetParent !== null;
+            }
+        });
+
+        const capitalFieldNames = [
+            'selectActVoiturier/Loueur',
+            'selectActCommissionnaire de Transport',
+            'selectActDéménageur',
+            'selectActLogistique',
+            'selectActAutocariste',
+            'selectActAutres activites'
+        ];
+
+        capitalFieldNames.forEach(function (fieldName) {
+            const field = document.getElementsByName(fieldName)[0];
+            if (!field) return;
+            rcTarifGuard.registerField(field, {
+                profile: 'numeric',
+                label: 'Capital à assurer',
+                min: 0,
+                positive: true,
+                requiredWhen: function () {
+                    return field.offsetParent !== null;
+                },
+                activeWhen: function () {
+                    return field.offsetParent !== null;
+                }
+            });
+        });
+
+        rcTarifGuard.registerField('#inputDomImmat', {
+            profile: 'numeric',
+            label: 'Capital dommages immatériels',
+            min: 0,
+            positive: true,
+            requiredWhen: function () {
+                return Boolean(document.getElementById('checkDomImmat')?.checked);
+            },
+            activeWhen: function () {
+                return Boolean(document.getElementById('checkDomImmat')?.checked);
+            }
+        });
+
+        rcTarifGuard.registerField('#inputContConf', {
+            profile: 'numeric',
+            label: 'Capital contenants confiés',
+            min: 0,
+            positive: true,
+            requiredWhen: function () {
+                return Boolean(document.getElementById('checkContConf')?.checked);
+            },
+            activeWhen: function () {
+                return Boolean(document.getElementById('checkContConf')?.checked);
+            }
+        });
+
+        rcTarifGuard.registerField('#inputDiffInv', {
+            profile: 'numeric',
+            label: "Capital différence inventaire",
+            min: 0,
+            positive: true,
+            requiredWhen: function () {
+                return Boolean(document.getElementById('checkDiffInv')?.checked);
+            },
+            activeWhen: function () {
+                return Boolean(document.getElementById('checkDiffInv')?.checked);
+            }
+        });
+
+        rcTarifGuard.registerField('#selTPPCcapital', {
+            profile: 'numeric',
+            label: 'Capital TPPC',
+            min: 0,
+            positive: true,
+            requiredWhen: function () {
+                return Boolean(document.getElementById('checkTPPC')?.checked);
+            },
+            activeWhen: function () {
+                return Boolean(document.getElementById('checkTPPC')?.checked);
+            }
+        });
+
+        rcTarifGuard.registerField('#selTPPCveh', {
+            profile: 'integer',
+            label: 'Nombre de véhicules TPPC',
+            min: 1,
+            max: 10,
+            requiredWhen: function () {
+                return Boolean(document.getElementById('checkTPPC')?.checked);
+            },
+            activeWhen: function () {
+                return Boolean(document.getElementById('checkTPPC')?.checked);
+            }
+        });
+
+        rcTarifGuard.registerField('#tarifCom', {
+            profile: 'numeric',
+            label: 'Tarif commercial',
+            min: 0,
+            positive: true,
+            requiredWhen: function () {
+                return Boolean(document.getElementById('modalTarifCom')?.classList.contains('open'));
+            },
+            activeWhen: function () {
+                return Boolean(document.getElementById('modalTarifCom')?.classList.contains('open'));
+            }
+        });
+
+        rcTarifGuard.registerField('#commentaire', {
+            profile: 'text',
+            label: 'Commentaire explicatif',
+            requiredWhen: function () {
+                return document.getElementById('tarifCom-error')?.style.display !== 'none';
+            },
+            activeWhen: function () {
+                return document.getElementById('col-commentaire')?.style.display !== 'none';
+            }
+        });
+
+        rcTarifGuard.observe('#tabAdvaloTerrestre input[type="text"], #tabAdvaloMultimodal input[type="text"], #tabAdvaloAerien input[type="text"]', {
+            profile: 'number_or_consulter',
+            label: 'Valeur ad valorem',
+            min: 0,
+            positive: true,
+            decimals: 3,
+            required: false
+        });
+
+        rcTarifGuard.refresh();
+        updateTarifChoiceButtonsState();
+    }
+
     // Fonction pour afficher un avertissement visuel de dépassement %
     function showPercentageWarning(excess) {
         let warningDiv = document.getElementById('percentageWarning');
@@ -219,8 +417,14 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
             setupEventListeners();
             setupTarifetteButtons();
             populateFormData();
+            setupRCSafeValidation();
             updatePercentageIndicator(100); // Initialiser à 100%
             calcGlobal();
+
+            setTimeout(() => {
+                if (rcTarifGuard) rcTarifGuard.refresh();
+                updateTarifChoiceButtonsState();
+            }, 300);
         })
     }
 
@@ -2349,6 +2553,8 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
         if (totalPourcentCheck > 100.01) {
             // Total > 100% : BLOQUER tous les calculs
             hideAllPrimes();
+            if (rcTarifGuard) rcTarifGuard.refresh();
+            updateTarifChoiceButtonsState();
             return;
         }
         
@@ -2370,6 +2576,9 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
 
             calcTarifettes(result.primePJ, result.CA, result.activites, capitalTPPC, nbVehicules, coefTPPC, result.primeRCCbase, result.primeRCEbase);
         }
+
+        if (rcTarifGuard) rcTarifGuard.refresh();
+        updateTarifChoiceButtonsState();
     }
 
     function calcRevisable() {
@@ -3716,6 +3925,11 @@ window.initSubmenuForm = initSubmenuForm;// Module IIFE pour éviter la pollutio
             return;
         }
 
+        if (rcTarifGuard && rcTarifGuard.refresh().length > 0) {
+            M.toast({html: 'Corrigez les erreurs du formulaire avant de valider ce tarif.', classes: 'red'});
+            return;
+        }
+
         
         // Fermer le modal
         window.modalTarifCom.close();

ecole/views/tarifformrc.ejs

@@ -39,15 +39,15 @@
         <div class="row">
           <div class="col s4 offset-s4">
             <label for="chiffreAffaire" class="left">Chiffre d'affaires (€) :</label>
-            <input placeholder="1234567" type="text" id="chiffreAffaire">
+            <input type="text" id="chiffreAffaire" placeholder="Ex: 1234567">
             <span id="chiffreAffaire-error" class="helper-text red-text"></span>
           </div>
           <div class="col s3 offset-s1">
             <div class="chip-info" id="modCA" style="display: none;">Modulation CA :<br>x 1.00</div>
           </div>
           <div class="col s4 offset-s4" id="rowNbrVehicule" style="display: none;">
-            <label for="nbrVehicule" class="left">Nombre de véhicule(s) :<span style="color: red"><b>*</b></span></label>
+            <label for="nbrVehicule" class="rc-field-label">Nombre de véhicule(s) :<span style="color: red"><b>*</b></span></label>
-            <input placeholder="1 ou 2" type="number" id="nbrVehicule" value="1" min="1" max="2">
+            <input placeholder="Ex: 1 ou 2" type="number" id="nbrVehicule" min="1" max="2">
             <span id="nbrVehicule-error" class="helper-text red-text"></span>
           </div>
         </div>
@@ -121,15 +121,15 @@
           </label>
         </div>
   
-        <div class="row">
+        <div class="row card-list rc-three-col-grid">
           <div class='col s4' name="actVoiturier/Loueur">
             <div class='card'>
               <div class='card-content'>
                 <span><strong style="color: darkblue;">Voiturier / Loueur</strong></span>
                 <hr>
                 <div class="row">
-                  <input type="text" name="selectActVoiturier/Loueur" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
+                  <input type="text" name="selectActVoiturier/Loueur" placeholder="Ex: 5000, 10000, 25000" style="text-align: center; font-weight: bold;">
                 </div>
                 <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                   <input id="pourcentVoiturier/Loueur" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
@@ -156,8 +156,8 @@
                 <span><strong style="color: darkblue;">Commissionnaire de Transport</strong></span>
                 <hr>
                 <div class="row">
-                  <input type="text" name="selectActCommissionnaire de Transport" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 100000, 150000, 200000, 300000, 400000</span>
+                  <input type="text" name="selectActCommissionnaire de Transport" placeholder="Ex: 100000, 150000, 200000" style="text-align: center; font-weight: bold;">
                 </div>
                 <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                   <input id="pourcentCommissionnaire de Transport" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
@@ -184,8 +184,8 @@
                 <span><strong style="color: darkblue;">Déménageur</strong></span>
                 <hr>
                 <div class="row">
-                  <input type="text" name="selectActDéménageur" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
+                  <input type="text" name="selectActDéménageur" placeholder="Ex: 5000, 10000, 25000" style="text-align: center; font-weight: bold;">
                 </div>
                 <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                   <input id="pourcentDéménageur" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
@@ -212,8 +212,8 @@
                 <span><strong style="color: darkblue;">Logistique</strong></span>
                 <hr>
                 <div class="row">
-                  <input type="text" name="selectActLogistique" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
+                  <input type="text" name="selectActLogistique" placeholder="Ex: 5000, 10000, 25000" style="text-align: center; font-weight: bold;">
                 </div>
                 <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                   <input id="pourcentLogistique" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
@@ -240,8 +240,8 @@
                 <span><strong style="color: darkblue;">Autocariste</strong></span>
                 <hr>
                 <div class="row">
-                  <input type="text" name="selectActAutocariste" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 25000, 50000, 75000, 100000, 125000, 150000</span>
+                  <input type="text" name="selectActAutocariste" placeholder="Ex: 25000, 50000, 75000" style="text-align: center; font-weight: bold;">
                 </div>
                 <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                   <input id="pourcentAutocariste" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
@@ -268,8 +268,8 @@
                 <span><strong style="color: darkblue;">Autres activites</strong></span>
                 <hr>
                 <div class="row">
-                  <input type="text" name="selectActAutres activites" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
+                  <input type="text" name="selectActAutres activites" placeholder="Ex: 5000, 10000, 25000" style="text-align: center; font-weight: bold;">
                 </div>
                 <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                   <input id="pourcentAutres activites" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
@@ -315,7 +315,7 @@
           </div>
         </div>
   
-        <div class="row card-list">
+        <div class="row card-list rc-three-col-grid">
           <div class='col s4 mrgl0' name="actComplVoiturier/Loueur">
             <div class='card'>
               <div class='card-content'>
@@ -453,7 +453,7 @@
           </div>
         </div>
   
-        <div class="row card-list">
+        <div class="row card-list rc-three-col-grid">
           <div class='col s4 mrgl0' name="marVoiturier/Loueur">
             <div class='card'>
               <div class='card-content'>
@@ -819,8 +819,8 @@
                   <label><input id="checkDomImmat" type='checkbox' class='filled-in' /><span>Dommages immatériels</span></label>
                 </div>
                 <div id="selectDomImmat" style="display: none; margin-top: 20px;">
-                  <input type="text" id="inputDomImmat" placeholder="Capital (€)" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 15000, 50000, 100000, 150000, 300000, 400000, 500000</span>
+                  <input type="text" id="inputDomImmat" placeholder="Ex: 15000, 50000, 100000" style="font-weight: bold;">
                 </div>
               </div>
             </div>
@@ -834,8 +834,8 @@
                   <label><input id="checkContConf" type='checkbox' class='filled-in' /><span>Contenants confiés</span></label>
                 </div>
                 <div id="selectContConf" style="display: none; margin-top: 20px;">
-                  <input type="text" id="inputContConf" placeholder="Capital (€)" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 25000, 50000, 100000</span>
+                  <input type="text" id="inputContConf" placeholder="Ex: 25000, 50000, 100000" style="font-weight: bold;">
                 </div>
               </div>
             </div>
@@ -849,8 +849,8 @@
                   <label><input id="checkDiffInv" type='checkbox' class='filled-in' /><span>Différence inventaire</span></label>
                 </div>
                 <div id="selectDiffInv" style="display: none; margin-top: 20px;">
-                  <input type="text" id="inputDiffInv" placeholder="Capital (€)" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 15000, 30000, 50000</span>
+                  <input type="text" id="inputDiffInv" placeholder="Ex: 15000, 30000, 50000" style="font-weight: bold;">
                 </div>
               </div>
             </div>
@@ -874,7 +874,7 @@
             <h6 class="red-text text-darken-4">Veuillez renseigner les garanties additionnelles du contrat :</h6>
           </div>
         </div>
-        <div class="row mrg-b-off">
+        <div class="row mrg-b-off rc-equal-card-row">
           <div class='col s4'>
             <div class='card'>
               <div class='card-content'>
@@ -883,10 +883,10 @@
                   <label><input id="checkTPPC" type='checkbox' class='filled-in' /><span>TPPC</span></label>
                 </div>
                 <div id="selectTPPC" style="display: none; margin-top: 20px;">
-                  <input type="text" id="selTPPCcapital" placeholder="Capital (€)" style="text-align: center; font-weight: bold; margin-bottom: 10px;">
+                  <label class="rc-field-label">Capital à assurer</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999; display: block; margin-bottom: 10px;">Ex: 5000, 10000, 15000, 30000</span>
+                  <input type="text" id="selTPPCcapital" placeholder="Ex: 5000, 10000, 15000" style="font-weight: bold; margin-bottom: 10px;">
-                  <input type="number" id="selTPPCveh" placeholder="Nombre de véhicules" min="1" max="10" style="text-align: center; font-weight: bold;">
+                  <label class="rc-field-label" for="selTPPCveh">Nombre de véhicules</label>
-                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 1, 2, 3...</span>
+                  <input type="number" id="selTPPCveh" placeholder="Ex: 1 ou 2" min="1" max="10" style="font-weight: bold;">
                 </div>
               </div>
             </div>
@@ -954,7 +954,8 @@
   
         <div class="col s4 offset-s4">
           <label for="sinistre" class="left">Montant de sinistres annuel :</label>
-          <input placeholder="1234567" type="text" id="sinistre" />
+          <input type="text" id="sinistre" placeholder="Ex: 1234567" />
+          <span id="sinistre-error" class="helper-text red-text"></span>
         </div>
         <div class="col s3 offset-s1">
           <div class="chip-info" id="modSinistre" style="display: none;">Modulation sinistre :<br>x 1.00</div>
@@ -970,6 +971,7 @@
             <h6 class="red-text text-darken-4">Veuillez sélectionner un tarif adapté :</h6>
           </div>
         </div>
+        <div id="rcTarifBlockingSummary" class="rc-blocking-summary"></div>
   
         <div class="col s12" style="display: flex;">
           <div class="col s4">