administrateur
/
personnal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Alexis Burnaz 2026-04-21 09:48:30 +02:00
parent 47c70697d3
commit 0b7d8b6eb3
3 changed files with 321 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
ecole/public/css/global.css
View File

@ -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;
}
@ -571,4 +644,4 @@ a.grille-garanties:hover{
color: #90CAF9;
text-decoration-thickness: 2px;
text-shadow: 0 0 10px rgba(102, 178, 255, 0.6);
}
}

214
ecole/public/js/tarif-form-rc.js
View File

@ -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();

64
ecole/views/tarifformrc.ejs
View File

@ -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>
<input placeholder="1 ou 2" type="number" id="nbrVehicule" value="1" min="1" max="2">
<label for="nbrVehicule" class="rc-field-label">Nombre de véhicule(s) :<span style="color: red"><b>*</b></span></label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
<label class="rc-field-label">Capital à assurer</label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 100000, 150000, 200000, 300000, 400000</span>
<label class="rc-field-label">Capital à assurer</label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
<label class="rc-field-label">Capital à assurer</label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
<label class="rc-field-label">Capital à assurer</label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 25000, 50000, 75000, 100000, 125000, 150000</span>
<label class="rc-field-label">Capital à assurer</label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
<label class="rc-field-label">Capital à assurer</label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 15000, 50000, 100000, 150000, 300000, 400000, 500000</span>
<label class="rc-field-label">Capital à assurer</label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 25000, 50000, 100000</span>
<label class="rc-field-label">Capital à assurer</label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 15000, 30000, 50000</span>
<label class="rc-field-label">Capital à assurer</label>
<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;">
<span class="helper-text" style="font-size: 0.75em; color: #999; display: block; margin-bottom: 10px;">Ex: 5000, 10000, 15000, 30000</span>
<input type="number" id="selTPPCveh" placeholder="Nombre de véhicules" min="1" max="10" style="text-align: center; font-weight: bold;">
<span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 1, 2, 3...</span>
<label class="rc-field-label">Capital à assurer</label>
<input type="text" id="selTPPCcapital" placeholder="Ex: 5000, 10000, 15000" style="font-weight: bold; margin-bottom: 10px;">
<label class="rc-field-label" for="selTPPCveh">Nombre de véhicules</label>
<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">
@ -1249,4 +1251,4 @@
<button id="comm-OK" class="waves-effect waves-light btn indigo darken-4">Valider</button>
<button id="comm-cancel" class="modal-close waves-effect waves-light btn red darken-1">Annuler</button>
</div>
</div>
</div>