Commit 2ac71299 authored by Théo GUILLON's avatar Théo GUILLON
Browse files

Correction : lorsqu'un champ à eu un nom de varible celui-ci n'est plus modifiable.

Modification : Ajout du bouton "Ajouter une condition" dans la barre de bouton en haut du formulaire
Ajout : enregistrement des conditions dans "data-virtual-conditions" sur le champ qui est à l'origine de la condition
Suppression : du bouton "Ajouter une condition" au niveau des options du champ
parent 42bf4bca
......@@ -194,6 +194,9 @@ msgstr "Champ d'information"
msgid "formulaire.btnLabel"
msgstr "Label"
msgid "formulaire.btnCondition"
msgstr "Ajouter une condition"
msgid "formulaire.champFichier"
msgstr "Fichier"
......
......@@ -65,6 +65,17 @@ $typeCreateForm = isset($typeCreateForm) === true ? $typeCreateForm : '';
<i class="fa fa-pencil fa-lg fa-fw"></i>
<?php echo __d ('formulaire','formulaire.btnLabel');?>
</button>
<!-- Bouton ajout d'une condition -->
<?php
echo $this->Html->link('<i class="fa fa-plus fa-lg"></i>' . ' ' . __d('formulaire', 'formulaire.btnCondition'), ['#' => '#'], [
'id' => 'btn-condition',
'escape' => false,
'data-toggle' => 'modal',
'data-target' => '#modalAddCondtion',
'class' => 'btn btn-default-primary btn-sm'
]);
?>
</div>
<div class="col-md-12" style="padding: 0;">
......
<?php
use Libriciel\Utility\Password\PasswordStrengthMeterAnssi;
?>
<!-- Pop-up de création d'un nouveau formulaire -->
<div class="modal fade" id="modalAddCondtion" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
......@@ -13,7 +8,7 @@ use Libriciel\Utility\Password\PasswordStrengthMeterAnssi;
</button>
<h4 class="modal-title" id="myModalLabel">
<?php
echo "Ajouter une condition sur le champ";
echo "Ajouter une condition un champ";
?>
</h4>
</div>
......@@ -27,12 +22,14 @@ use Libriciel\Utility\Password\PasswordStrengthMeterAnssi;
<div class="row form-group">
<?php
echo $this->WebcilForm->hidden('ifTheNameField', ['id' => 'ifTheNameField']);
echo $this->WebcilForm->input('ifTheLadelField', [
'id' => 'ifTheLadelField',
'options' => [],
'empty' => true,
'class' => 'transformSelect form-control',
'placeholder' => false,
'required' => true,
'readonly' => true
'data-placeholder' => ' '
]);
?>
</div>
......@@ -108,18 +105,94 @@ use Libriciel\Utility\Password\PasswordStrengthMeterAnssi;
<script type="text/javascript">
$(document).ready(function () {
var idContainer = null;
var idFieldConditionCreated = null;
$('#btn-condition').click(function () {
hideAllFields();
idContainer = '#' + $('.form-container').attr('id');
if (!idContainer) {
return false;
}
var allFields = $(idContainer).find('.draggable').filter('.checkboxes, .radios, .deroulant, .multi-select');
if (!allFields) {
return false;
}
$.each(allFields, function (key, field) {
var name = $(field).find('input, option').attr('name');
var label = $(field).find('.labeler').html();
$('#ifTheLadelField').append('<option value="'+name+'">'+label+'</option>');
});
});
$('#ifTheLadelField').change(function () {
idFieldConditionCreated = $(this).val();
if (!idFieldConditionCreated) {
hideAllFields();
} else {
// On recupere les "options" du champ "selected" sur lequel nous allons faire la condition
$(idContainer).find('input[name ="'+idFieldConditionCreated+'"], option[name ="'+idFieldConditionCreated+'"]').each(function () {
var option = $(this).attr('value');
if (option) {
$('#hasAsValue').append('<option value="' + option + '">' + option + '</option>');
}
});
$('#hasAsValue').parent().parent().show();
}
});
$('#hasAsValue').change(function () {
var valueSelected = $(this).val();
if (!valueSelected) {
$('#thenTheField').parent().parent().hide();
$('#mustBe').parent().parent().hide();
} else {
var fieldsContainer = $(idContainer).find('.draggable');
if (!fieldsContainer) {
return false;
}
$.each(fieldsContainer, function (key, field) {
var name = $(field).find('input, option').attr('name');
var label = $(field).find('.labeler').html();
if (name != idFieldConditionCreated) {
$('#thenTheField').append('<option value="'+name+'">'+label+'</option>');
}
});
$('#thenTheField').parent().parent().show();
}
});
$('#thenTheField').change(function () {
var val = $(this).val();
if (!val) {
$('#mustBe').parent().parent().hide();
} else {
$('#mustBe').parent().parent().show();
}
});
$('#saveCondition').click(function () {
$('div.error-message').remove();
let ifTheNameField = $('#ifTheNameField').val();
let hasAsValue = $('#hasAsValue').val();
let thenTheField = $('#thenTheField').val();
let mustBe = $('#mustBe').val();
let objCondition = {};
let success = true;
var ifTheNameField = $('#ifTheLadelField').val();
var hasAsValue = $('#hasAsValue').val();
var thenTheField = $('#thenTheField').val();
var mustBe = $('#mustBe').val();
var success = true;
if (!$('#ifTheLadelField').val()) {
if (!ifTheNameField) {
$('#ifTheLadelField').parent().parent().append('<div class="error-message">Champ obligatoire</div>');
success = false;
}
......@@ -144,33 +217,52 @@ use Libriciel\Utility\Password\PasswordStrengthMeterAnssi;
}
objCondition = {
'ifTheField' : fieldType,
'hasAsValue' : fieldLine,
'thenTheField' : fieldColumn,
'mustBe' : JSON.stringify(objFieldDetails)
'ifTheNameField' : ifTheNameField,
'hasAsValue' : hasAsValue,
'thenTheField' : thenTheField,
'mustBe' : mustBe
};
// objCondition = {
// 'ifTheLadelField' : $('#ifTheLadelField').val(),
// 'ifTheNameField' : $('#ifTheNameField').val(),
// 'hasAsValue' : $('#hasAsValue').val(),
// 'thenTheField' : $('#thenTheField').val(),
// 'mustBe' : $('#mustBe').val()
// };
//
// $.each(objCondition, function (key, value) {
// if (!$('#ifTheLadelField').val()) {
// $('#ifTheLadelField').parent().parent().append('<div class="error-message">Champ obligatoire</div>');
// return;
// }
// });
console.log(ifTheField);
console.log(hasAsValue);
console.log(thenTheField);
console.log(mustBe);
});
var conditions = {};
conditions[uuidv4()] = objCondition;
var idContainer = '#' + $('.form-container').attr('id');
var fieldChoose = $(idContainer).find('input[name ="'+idFieldConditionCreated+'"], option[name ="'+idFieldConditionCreated+'"]').closest('.draggable');
var otherConditions = $(fieldChoose).attr('data-virtual-conditions');
if (otherConditions) {
$.each(JSON.parse(otherConditions), function (key, value) {
conditions[key] = value
});
}
$(fieldChoose).attr('data-virtual-conditions', JSON.stringify(conditions));
$('#modalAddCondtion').modal('toggle');
});
});
function hideAllFields()
{
$('#hasAsValue').parent().parent().hide();
$('#thenTheField').parent().parent().hide();
$('#mustBe').parent().parent().hide();
removeValuesAllFields();
}
function removeValuesAllFields()
{
$('#ifTheLadelField').not(':first').remove();
$('#hasAsValue option').not(':first').remove();
$('#thenTheField option').not(':first').remove();
}
function uuidv4() {
// return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
return ([1e3]+-1e3).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
);
}
</script>
\ No newline at end of file
......@@ -440,6 +440,7 @@ var createForm = function(typeCreateForm) {
if ( (object.hasClass('small-text')) || (object.hasClass('long-text')) || (object.hasClass('date')) ) {
var attrNameNomDeVariable = null,
classNameNomDeVariableRequired = '',
attrPlaceholderAideSaisie = null,
forLabelNomChamp = null,
forPlaceholderAideSaisie = null,
......@@ -471,8 +472,10 @@ var createForm = function(typeCreateForm) {
attrPlaceholderAideSaisie = $(idContainer).find('.ui-selected').find(findType).attr('placeholder');
attrNameNomDeVariable = $(idContainer).find('.ui-selected').find(findType).attr('name');
if (attrNameNomDeVariable == null) {
if (!attrNameNomDeVariable) {
attrNameNomDeVariable = '';
} else {
classNameNomDeVariableRequired = "readonly='readonly'";
}
if ($(idContainer).find('.ui-selected').find(findType).attr('class') === 'form-control champNomVariableReadonly') {
......@@ -486,7 +489,7 @@ var createForm = function(typeCreateForm) {
'<label for="'+champId+'">Nom de variable' +
'<span class="obligatoire"> *</span>' +
'</label>' +
'<input type="text" class="form-control nameForm"'+readonly+' id="'+champId+'" placeholder="Nom UNIQUE" value="'+attrNameNomDeVariable+'">' +
'<input type="text" class="form-control nameForm"'+readonly+' id="'+champId+'" placeholder="Nom UNIQUE" value="'+attrNameNomDeVariable+'" '+classNameNomDeVariableRequired+'>' +
'</div>' +
'</div>' +
'<div class="col-md-3">' +
......@@ -519,9 +522,7 @@ var createForm = function(typeCreateForm) {
classListeValeur = '',
nameNomDeVariable = '',
forLabelNomDuChamp = '',
idListeDesValeurs = '',
btnAddConditions = '',
showBtnAddCondition = false;
idListeDesValeurs = '';
if ( (object.hasClass('checkboxes')) || (object.hasClass('radios')) ) {
findType = 'input';
......@@ -535,9 +536,6 @@ var createForm = function(typeCreateForm) {
idListeDesValeurs = 'option-checkbox';
classListeValeur = 'checkboxForm';
// btn conditions
showBtnAddCondition = giveValuesToModalCondition();
} else if (object.hasClass('radios')) {
champId = 'name-radios-'+typeCreateForm;
......@@ -553,10 +551,6 @@ var createForm = function(typeCreateForm) {
'Champ obligatoire' +
'</label>' +
'</div>';
if ($(idContainer).find('.ui-selected').find('input').attr('name')) {
showBtnAddCondition = true;
}
}
}
......@@ -572,10 +566,6 @@ var createForm = function(typeCreateForm) {
idListeDesValeurs = 'option-deroulant';
classListeValeur = 'deroulantForm';
if ($(idContainer).find('.ui-selected').find('option').attr('name')) {
showBtnAddCondition = true;
}
} else if (object.hasClass('multi-select')) {
champId = 'name-multi-select-'+typeCreateForm;
......@@ -584,11 +574,6 @@ var createForm = function(typeCreateForm) {
idListeDesValeurs = 'option-multi-select';
classListeValeur = 'multiSelectForm';
if ($(idContainer).find('.ui-selected').find('option').attr('name')) {
showBtnAddCondition = true;
}
}
}
......@@ -596,6 +581,7 @@ var createForm = function(typeCreateForm) {
nom = '';
} else {
nom = $(idContainer).find('.ui-selected').find(findType).attr('name').replace('[]', '');
classNameNomDeVariableRequired = "readonly='readonly'";
}
$(idContainer).find('.ui-selected').find(findType).each(function () {
......@@ -610,14 +596,6 @@ var createForm = function(typeCreateForm) {
readonly = "readonly='readonly'";
}
if (showBtnAddCondition == true) {
btnAddConditions = '<div id="btnAddCondition">' +
'<a href="#" data-toggle="modal" data-target="#modalAddCondtion" class="btn btn-default-primary">' +
'<i class="fa fa-plus fa-lg"></i>' +
' Ajouter une condition' +
'</a>';
}
options = jQuery('' +
'<div class="col-md-12">' +
'<div class="col-md-3">' +
......@@ -625,7 +603,7 @@ var createForm = function(typeCreateForm) {
'<label for='+champId+'>Nom de variable' +
'<span class="obligatoire"> *</span>' +
'</label>' +
'<input type="text" class="form-control nameForm"'+readonly+' name="'+nameNomDeVariable+'" id="'+champId+'" placeholder="Nom UNIQUE" value="' + nom + '">' +
'<input type="text" class="form-control nameForm"'+readonly+' name="'+nameNomDeVariable+'" id="'+champId+'" placeholder="Nom UNIQUE" value="'+nom+'" '+classNameNomDeVariableRequired+'>' +
'</div>' +
'</div>' +
'<div class="col-md-3">' +
......@@ -648,7 +626,6 @@ var createForm = function(typeCreateForm) {
'</div>' +
check +
'</div>' +
btnAddConditions +
btnGoupsTrashApplicable
);
}
......@@ -896,10 +873,6 @@ var createForm = function(typeCreateForm) {
// On rend non modifiable le nom de variable
$('#'+idbtnApplicable).closest(fieldOptions).find('input.nameForm').attr('readonly', true);
if ($(idContainer).find('.ui-selected').is('.checkboxes, .radios, .deroulant, .multi-select')) {
giveValuesToModalCondition();
}
});
/*Supprimer le champ en question au clic*/
......@@ -1045,57 +1018,4 @@ var createForm = function(typeCreateForm) {
}
}
function giveValuesToModalCondition()
{
var success = true,
nameFieldSelected = null;
// Réinitialisation des champs de la modal concernant l'ajout d'une condition sur un champs
$('#ifTheNameField').val('');
$('#ifTheLadelField').val('');
$('#hasAsValue option').not(':first').remove();
$('#thenTheField option').not(':first').remove();
nameFieldSelected = $(idContainer).find('.ui-selected').find('input').attr('name');
if (nameFieldSelected) {
// On recupere le "name" (id) du champ "selected" sur lequel nous allons faire la condition
$('#ifTheNameField').val(nameFieldSelected);
// On recupere le "label" du champ "selected" sur lequel nous allons faire la condition
var labelCheckboxes = $(idContainer).find('.ui-selected').find('.labeler').html();
if (!labelCheckboxes) {
success = false;
} else {
$('#ifTheLadelField').val(labelCheckboxes);
}
// On recupere les "options" du champ "selected" sur lequel nous allons faire la condition
$(idContainer).find('.ui-selected').find('input').each(function () {
var option = $(this).attr('value');
$('#hasAsValue').append('<option value="'+option+'">'+option+'</option>');
});
// On recupere tous les champs sur lequelle nous allons pouvoir faire une condition
var allFields = $(idContainer).find('.small-text, .long-text');
$.each(allFields, function() {
var nameFieldOfForm = '';
var labelFieldOfForm = '';
if ($(this).hasClass('small-text')) {
nameFieldOfForm = $(this).find('input').attr('name');
}
if ($(this).hasClass('long-text')) {
nameFieldOfForm = $(this).find('textarea').attr('name');
}
labelFieldOfForm = $(this).find('.labeler').html();
$('#thenTheField').append('<option value="'+nameFieldOfForm+'">'+labelFieldOfForm+'</option>');
});
}
return success;
}
};
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment