Skip to content

GitLab

W
web-DPO
Commit 20633073 authored by THEO GUILLON's avatar THEO GUILLON
Browse files
Options

Merge branch '175-formulaire-conditionnelle' into '2.0.0' 

Resolve "Formulaire conditionnelle"

See merge request libriciel/pole-citoyens/web-DPO/web-DPO!441
parents ab1e45ec a5a3f3a2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 275 additions and 174 deletions
app/View/Elements/Fiches/tabs/formulaire.ctp
View file @ 20633073
...@@ -134,6 +134,7 @@ $line = 1; ...@@ -134,6 +134,7 @@ $line = 1;
case 'checkboxes': case 'checkboxes':
echo $this->WebcilForm->input('WebdpoFiche.'.$options['name'], [ echo $this->WebcilForm->input('WebdpoFiche.'.$options['name'], [
'id' => $options['name'], 'id' => $options['name'],
'name' => $options['name'],
'label' => [ 'label' => [
'text' => $options['label'], 'text' => $options['label'],
'class' => 'col-md-4', 'class' => 'col-md-4',
...@@ -290,149 +291,194 @@ $line = 1; ...@@ -290,149 +291,194 @@ $line = 1;
// Mise en place des conditions // Mise en place des conditions
let conditions = <?php echo json_encode($conditions); ?>; let conditions = <?php echo json_encode($conditions); ?>;
$.each(conditions, function (key, value) { $.each(conditions, function (key, value) {
// On cache le champ par défault let valueIfTheField = $('#'+value['ifTheField']);
// shownHideField(value['ifNot'], value['thenTheField']);
// Si le champ a comme balise "select" (deroulant et multi-select) // Si le champ a comme balise "select" (deroulant et multi-select)
if ($('#'+value['ifTheField']).is('select')) { if ($(valueIfTheField).is('select')) {
if ($('#'+value['ifTheField']).hasClass('multiSelect') == true) {
$('#'+value['ifTheField']).parent().parent().on('show', function() {
if (jQuery.inArray(value['hasValue'], $('#'+value['ifTheField']).val()) !== -1) {
shownHideField(value['mustBe'], value['thenTheField'])
} else {
shownHideField(value['ifNot'], value['thenTheField']);
}
});
$('#'+value['ifTheField']).parent().parent().on('hide', function() { if ($(valueIfTheField).hasClass('multiSelect') === true) {
// if (jQuery.inArray(value['hasValue'], $('#'+value['ifTheField']).val()) !== -1) { // Champ multi-select
// shownHideField(value['mustBe'], value['thenTheField'])
// } else {
shownHideField(value['ifNot'], value['thenTheField']);
// }
});
if (jQuery.inArray(value['hasValue'], $('#'+value['ifTheField']).val()) !== -1 && $('#'+value['ifTheField']).parent().parent().css('display') != 'none') { // Si le champ multi-select est visible
shownHideField(value['mustBe'], value['thenTheField']) $(valueIfTheField).parent().parent().on('show', function() {
} else { let showCondition = false;
shownHideField(value['ifNot'], value['thenTheField']);
} if ($(valueIfTheField).val()) {
} else { $.each($(valueIfTheField).val(), function (k, v) {
$('#'+value['ifTheField']).parent().parent().on('show', function() { if (jQuery.inArray(v, value['hasValue']) !== -1) {
if ($('#'+value['ifTheField']).val() == value['hasValue']) { showCondition = true;
}
});
}
if (showCondition === true) {
shownHideField(value['mustBe'], value['thenTheField']) shownHideField(value['mustBe'], value['thenTheField'])
} else { } else {
shownHideField(value['ifNot'], value['thenTheField']); shownHideField(value['ifNot'], value['thenTheField']);
} }
}); });
$('#'+value['ifTheField']).parent().parent().on('hide', function() { // Si le champ multi-select n'est pas visible
// if ($('#'+value['ifTheField']).val() == value['hasValue']) { $(valueIfTheField).parent().parent().on('hide', function() {
// shownHideField(value['mustBe'], value['thenTheField'])
// } else {
shownHideField(value['ifNot'], value['thenTheField']);
// }
});
if ($('#'+value['ifTheField']).val() == value['hasValue'] && $('#'+value['ifTheField']).parent().parent().css('display') != 'none') {
shownHideField(value['mustBe'], value['thenTheField'])
} else {
shownHideField(value['ifNot'], value['thenTheField']); shownHideField(value['ifNot'], value['thenTheField']);
} });
}
// Quand le champ deroulant ou multi-select change de valeur $.each($(valueIfTheField).val(), function (k, v) {
$('#'+value['ifTheField']).change(function () { if (jQuery.inArray(v, value['hasValue']) !== -1 &&
if ($('#'+value['ifTheField']).hasClass('multiSelect') == true) { $(valueIfTheField).parent().parent().css('display') !== 'none'
if (jQuery.inArray(value['hasValue'], $(this).val()) !== -1) { ) {
shownHideField(value['mustBe'], value['thenTheField'])
} else {
shownHideField(value['ifNot'], value['thenTheField']);
}
} else {
if ($(this).val() == value['hasValue']) {
shownHideField(value['mustBe'], value['thenTheField']) shownHideField(value['mustBe'], value['thenTheField'])
} else { } else {
shownHideField(value['ifNot'], value['thenTheField']); shownHideField(value['ifNot'], value['thenTheField']);
} }
} });
});
}
// Si le champ a comme balise "input" } else {
if ($('#'+value['ifTheField']).is('input')) { // Champ deroulant
// Si le champ est de type "checkbox" // Si le champ déroulant est visible
if ($('#'+value['hasValue']).attr('type') == "checkbox") { $(valueIfTheField).parent().parent().on('show', function() {
$('#'+value['hasValue']).parent().parent().parent().on('show', function() { if ($(valueIfTheField).val() === value['hasValue']) {
if ($('#'+value['hasValue']).prop("checked") == true) {
shownHideField(value['mustBe'], value['thenTheField']) shownHideField(value['mustBe'], value['thenTheField'])
} else { } else {
shownHideField(value['ifNot'], value['thenTheField']); shownHideField(value['ifNot'], value['thenTheField']);
} }
}); });
$('#'+value['hasValue']).parent().parent().parent().on('hide', function() { // Si le champ déroulant n'est pas visible
$(valueIfTheField).parent().parent().on('hide', function() {
shownHideField(value['ifNot'], value['thenTheField']); shownHideField(value['ifNot'], value['thenTheField']);
}); });
if ($('#'+value['hasValue']).prop("checked") === true && $('#'+value['ifTheField']).parent().parent().css('display') != 'none') { if ($(valueIfTheField).val() === value['hasValue'] &&
$(valueIfTheField).parent().parent().css('display') !== 'none'
) {
shownHideField(value['mustBe'], value['thenTheField']) shownHideField(value['mustBe'], value['thenTheField'])
} else { } else {
shownHideField(value['ifNot'], value['thenTheField']); shownHideField(value['ifNot'], value['thenTheField']);
} }
}
// Quand le champ deroulant ou multi-select change de valeur
$(valueIfTheField).change(function () {
if ($(valueIfTheField).hasClass('multiSelect') === true) {
if (Array.isArray(value['hasValue']) === true) {
let showCondition = false;
if ($(this).val()) {
$.each($(this).val(), function (k, v) {
if (jQuery.inArray(v, value['hasValue']) !== -1) {
showCondition = true;
}
});
}
// Quand la valeur de la condition change if (showCondition === true) {
$('#' + value['hasValue']).on('change', function () {
if ($(this).prop("checked") == true) {
shownHideField(value['mustBe'], value['thenTheField'])
} else {
shownHideField(value['ifNot'], value['thenTheField']);
}
});
}
// Si le champ est de type "radio"
// if ($('#'+value['hasValue']).attr('type') == "radio") {
if ($('input[type="radio"][value="'+value['hasValue']+'"]').length == 1) {
// Quand le changer est affiché
$('#'+value['ifTheField']).parent().parent().on('show', function() {
$('#'+value['ifTheField']).parent().find('input[type=radio]:checked').each(function () {
if ($(this).val() == value['hasValue']) {
shownHideField(value['mustBe'], value['thenTheField']) shownHideField(value['mustBe'], value['thenTheField'])
} else { } else {
shownHideField(value['ifNot'], value['thenTheField']); shownHideField(value['ifNot'], value['thenTheField']);
} }
}); }
}); } else {
if ($(this).val() === value['hasValue']) {
// Quand le champ est caché shownHideField(value['mustBe'], value['thenTheField'])
$('#'+value['ifTheField']).parent().parent().on('hide', function() { } else {
shownHideField(value['ifNot'], value['thenTheField']); shownHideField(value['ifNot'], value['thenTheField']);
}); }
}
if ($('#'+value['ifTheField']).parent().parent().css('display') != 'none') { });
if ($('#'+value['ifTheField']).parent().find('input[type=radio]:checked').val() == value['hasValue']) { }
shownHideField(value['mustBe'], value['thenTheField'])
} else { // Si le champ a comme balise "input"
shownHideField(value['ifNot'], value['thenTheField']); if ($(valueIfTheField).is('input')) {
}
// Si le champ est de type "checkbox"
} else { if ($('#'+value['hasValue']).attr('type') === "checkbox") {
shownHideField(value['ifNot'], value['thenTheField']); $('#'+value['hasValue']).parent().parent().parent().on('show', function() {
} if ($('#'+value['hasValue']).prop("checked") == true) {
shownHideField(value['mustBe'], value['thenTheField'])
// Quand le champ radio change de valeur } else {
$('#'+value['ifTheField']).parent().find('input[type=radio]').on('change', function () { shownHideField(value['ifNot'], value['thenTheField']);
if ($(this).val() == value['hasValue']) { }
shownHideField(value['mustBe'], value['thenTheField']) });
} else {
shownHideField(value['ifNot'], value['thenTheField']); $('#'+value['hasValue']).parent().parent().parent().on('hide', function() {
} shownHideField(value['ifNot'], value['thenTheField']);
}); });
}
} if ($('#'+value['hasValue']).prop("checked") === true && $(valueIfTheField).parent().parent().css('display') != 'none') {
shownHideField(value['mustBe'], value['thenTheField'])
} else {
shownHideField(value['ifNot'], value['thenTheField']);
}
$('input[name ="'+value['ifTheField']+'[]"]').change(function() {
let valueSelected = [];
$.each($('input[name ="'+value['ifTheField']+'[]"]:checked'), function(){
valueSelected.push($(this).attr('id'));
});
if (Array.isArray(valueSelected) === true) {
let showCondition = false;
if (valueSelected) {
$.each(valueSelected, function (k, v) {
if (jQuery.inArray(v, value['hasValue']) !== -1) {
showCondition = true;
}
});
}
if (showCondition === true) {
shownHideField(value['mustBe'], value['thenTheField'])
} else {
shownHideField(value['ifNot'], value['thenTheField']);
}
}
});
}
// Si le champ est de type "radio"
// if ($('#'+value['hasValue']).attr('type') == "radio") {
if ($('input[type="radio"][value="'+value['hasValue']+'"]').length === 1) {
// Quand le changer est affiché
$(valueIfTheField).parent().parent().on('show', function() {
$(valueIfTheField).parent().find('input[type=radio]:checked').each(function () {
if ($(this).val() === value['hasValue']) {
shownHideField(value['mustBe'], value['thenTheField'])
} else {
shownHideField(value['ifNot'], value['thenTheField']);
}
});
});
// Quand le champ est caché
$(valueIfTheField).parent().parent().on('hide', function() {
shownHideField(value['ifNot'], value['thenTheField']);
});
if ($(valueIfTheField).parent().parent().css('display') !== 'none') {
if ($(valueIfTheField).parent().find('input[type=radio]:checked').val() === value['hasValue']) {
shownHideField(value['mustBe'], value['thenTheField'])
} else {
shownHideField(value['ifNot'], value['thenTheField']);
}
} else {
shownHideField(value['ifNot'], value['thenTheField']);
}
// Quand le champ radio change de valeur
$(valueIfTheField).parent().find('input[type=radio]').on('change', function () {
if ($(this).val() === value['hasValue']) {
shownHideField(value['mustBe'], value['thenTheField'])
} else {
shownHideField(value['ifNot'], value['thenTheField']);
}
});
}
}
}); });
function shownHideField(condition, thenTheField) function shownHideField(condition, thenTheField)
......
app/View/Elements/Formulaires/champDuFormulaire.ctp
View file @ 20633073
...@@ -257,7 +257,7 @@ foreach ($champs as $key => $value) { ...@@ -257,7 +257,7 @@ foreach ($champs as $key => $value) {
width: '100%' width: '100%'
}); });
var champsDate = <?php echo json_encode($calendrier)?>; let champsDate = <?php echo json_encode($calendrier)?>;
jQuery.each(champsDate, function(key, val){ jQuery.each(champsDate, function(key, val){
$('#' + val).datetimepicker({ $('#' + val).datetimepicker({
viewMode: 'year', viewMode: 'year',
......
app/View/Elements/Formulaires/modal/modalAddCondition.ctp
View file @ 20633073
...@@ -54,6 +54,19 @@ ...@@ -54,6 +54,19 @@
'text' => __d('formulaire', 'formulaire.champHasValue') 'text' => __d('formulaire', 'formulaire.champHasValue')
], ],
]); ]);
echo $this->WebcilForm->input('Fiche.hasValueMulti', [
'id' => 'hasValueMulti',
'options' => [],
'empty' => true,
'class' => 'form-control usersDeroulant',
'placeholder' => false,
'required' => true,
'data-placeholder' => ' ',
'label' => [
'text' => __d('formulaire', 'formulaire.champHasValue')
],
'multiple' => true,
]);
?> ?>
</div> </div>
...@@ -142,15 +155,13 @@ ...@@ -142,15 +155,13 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
let idContainer = null; let idContainer = null,
let idFieldConditionCreated = null; idFieldConditionCreated = null;
// $('#btn-condition').click(function () {
$('#btn-condition-formulaire, #btn-condition-coresponsable, #btn-condition-soustraitant').click(function () { $('#btn-condition-formulaire, #btn-condition-coresponsable, #btn-condition-soustraitant').click(function () {
hideAllFields(); hideAllFields();
$('#ifTheField option').slice(3).remove(); $('#ifTheField option').slice(3).remove();
// idContainer = '#' + $('.form-container').attr('id');
idContainer = '#' + $(this).parent().parent().nextAll('.form-container').attr('id'); idContainer = '#' + $(this).parent().parent().nextAll('.form-container').attr('id');
if (!idContainer) { if (!idContainer) {
return false; return false;
...@@ -165,8 +176,8 @@ ...@@ -165,8 +176,8 @@
} }
$(idContainer).find('.draggable').filter('.checkboxes, .radios, .deroulant, .multi-select').each(function (key, field) { $(idContainer).find('.draggable').filter('.checkboxes, .radios, .deroulant, .multi-select').each(function (key, field) {
let name = $(field).find('input, option').attr('name'); let name = $(field).find('input, option').attr('name'),
let label = $(field).find('.labeler').html(); label = $(field).find('.labeler').html();
if (name && label) { if (name && label) {
$('#ifTheField').append('<option value="' + name + '">' + label + '</option>'); $('#ifTheField').append('<option value="' + name + '">' + label + '</option>');
...@@ -179,14 +190,16 @@ ...@@ -179,14 +190,16 @@
idFieldConditionCreated = $(this).val(); idFieldConditionCreated = $(this).val();
let showHasValueMulti = false;
if (!idFieldConditionCreated) { if (!idFieldConditionCreated) {
hideAllFields(); hideAllFields();
} else { } else {
if (jQuery.inArray(idFieldConditionCreated, ['transfert_hors_ue', 'donnees_sensibles']) !== -1){ if (jQuery.inArray(idFieldConditionCreated, ['transfert_hors_ue', 'donnees_sensibles']) !== -1) {
// On recupere les "options" du champ "selected" sur lequel nous allons faire la condition // On recupere les "options" du champ "selected" sur lequel nous allons faire la condition
$('#'+idFieldConditionCreated).find('option').each(function () { $('#'+idFieldConditionCreated).find('option').each(function () {
let option = $(this).attr('value'); let option = $(this).attr('value'),
let label = $(this).text(); label = $(this).text();
if (option && label) { if (option && label) {
$('#hasValue').append('<option value="' + option + '">' + label + '</option>'); $('#hasValue').append('<option value="' + option + '">' + label + '</option>');
...@@ -195,20 +208,28 @@ ...@@ -195,20 +208,28 @@
} else { } else {
// On recupere les "options" du champ "selected" sur lequel nous allons faire la condition // On recupere les "options" du champ "selected" sur lequel nous allons faire la condition
if ($('#'+idFieldConditionCreated).is("select")) { if ($('#'+idFieldConditionCreated).is("select")) {
// Champs "Menu multi-select" ou "Menu déroulant"
$(idContainer).find('input[name ="'+idFieldConditionCreated+'"],option[name ="'+idFieldConditionCreated+'"]').each(function () { $(idContainer).find('input[name ="'+idFieldConditionCreated+'"],option[name ="'+idFieldConditionCreated+'"]').each(function () {
let value = $(this).attr('value'); let value = $(this).attr('value'),
let labelValue = $(this).text(); labelValue = $(this).text();
if (value && labelValue) { if (value && labelValue) {
$('#hasValue').append('<option value="' + value + '">' + labelValue + '</option>'); if ($(this).attr('type')) {
$('#hasValue').append('<option value="' + value + '">' + labelValue + '</option>');
} else {
let newOption = new Option(labelValue, value, false, false);
$('#hasValueMulti').append(newOption).trigger('change');
}
} }
}); });
} else { } else {
// Champs "Case à cocher" ou "Choix unique"
$(idContainer).find('input[name ="'+idFieldConditionCreated+'"], option[name ="'+idFieldConditionCreated+'"]').each(function () { $(idContainer).find('input[name ="'+idFieldConditionCreated+'"], option[name ="'+idFieldConditionCreated+'"]').each(function () {
let option = null; let option = null,
let id = null; id = null;
if ($(this).attr('type') == 'checkbox') { if ($(this).attr('type') == 'checkbox') {
showHasValueMulti = true;
option = $(this).next('label').text(); option = $(this).next('label').text();
} else { } else {
option = $(this).attr('value'); option = $(this).attr('value');
...@@ -221,17 +242,29 @@ ...@@ -221,17 +242,29 @@
} }
if (option && id) { if (option && id) {
$('#hasValue').append('<option value="' + id + '">' + option + '</option>');
if (showHasValueMulti === true) {
let newOption = new Option(option, id, false, false);
$('#hasValueMulti').append(newOption).trigger('change');
} else {
$('#hasValue').append('<option value="' + id + '">' + option + '</option>');
}
} }
}); });
} }
} }
$('#hasValue').parent().parent().show(); if ($('#'+idFieldConditionCreated).hasClass('multiSelect') === true ||
showHasValueMulti === true
) {
$('#hasValueMulti').parent().parent().show();
} else {
$('#hasValue').parent().parent().show();
}
} }
}); });
$('#hasValue').change(function () { $('#hasValue, #hasValueMulti').change(function () {
let valueSelected = $(this).val(); let valueSelected = $(this).val();
$('#thenTheField').parent().parent().hide(); $('#thenTheField').parent().parent().hide();
...@@ -250,8 +283,8 @@ ...@@ -250,8 +283,8 @@
} }
$.each(fieldsContainer, function (key, field) { $.each(fieldsContainer, function (key, field) {
let name = $(field).find('input, textarea, option').attr('name'); let name = $(field).find('input, textarea, option').attr('name'),
let label = $(field).find('.labeler').html(); label = $(field).find('.labeler').html();
if (name && label) { if (name && label) {
if (name != idFieldConditionCreated) { if (name != idFieldConditionCreated) {
...@@ -300,12 +333,12 @@ ...@@ -300,12 +333,12 @@
$('#saveCondition').click(function () { $('#saveCondition').click(function () {
$('div.error-message').remove(); $('div.error-message').remove();
let ifTheField = $('#ifTheField').val(); let ifTheField = $('#ifTheField').val(),
let hasValue = $('#hasValue').val(); hasValue = $('#hasValue').val(),
let thenTheField = $('#thenTheField').val(); thenTheField = $('#thenTheField').val(),
let mustBe = $('#mustBe').val(); mustBe = $('#mustBe').val(),
let ifNot = $('#ifNot').val(); ifNot = $('#ifNot').val(),
let success = true; success = true;
if (!ifTheField) { if (!ifTheField) {
$('#ifTheField').parent().parent().append('<div class="error-message">Champ obligatoire</div>'); $('#ifTheField').parent().parent().append('<div class="error-message">Champ obligatoire</div>');
...@@ -313,8 +346,11 @@ ...@@ -313,8 +346,11 @@
} }
if (!hasValue) { if (!hasValue) {
$('#hasValue').parent().parent().append('<div class="error-message">Champ obligatoire</div>'); hasValue = $('#hasValueMulti').val();
success = false; if (!hasValue) {
$('#hasValue').parent().parent().append('<div class="error-message">Champ obligatoire</div>');
success = false;
}
}