| New file |
|---|
| 0,0 → 1,727 |
|---|
| import {inputFile} from './display.js'; |
| import {findFieldset, showField, hideNRemove, replacer, valeurOk} from './utils.js'; |
| import {newFieldsPreview} from './preview.js'; |
| import {onChangeCheckKeyUnique, missingValuesClass} from './validation.js'; |
| |
| // Tableau d'envoi des données |
| const datasToSubmit = [], |
| datePattern = '(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)', |
| isModification = Array.isArray(CHAMPS_SUPP_JSON) && 0 < CHAMPS_SUPP_JSON.length; |
| |
| /** |
| * ChampsSupp |
| */ |
| export function ChampsSupp() { |
| this.fieldIndex = -1; |
| } |
| |
| ChampsSupp.prototype.init = function() { |
| // Ajout de nouveaux champs |
| $('#add-fields').on('click', this.onClickAddNewFields.bind(this)); |
| // Activation/Desactivation des boutons valider et prévisualiser |
| this.onClickButtonsTagMissingValues(); |
| // Activer la checkbox de valeur par default uniquement si une valeur est entrée |
| this.onInputListValueLabelEnableDefaultCheckbox(); |
| // Modifications |
| this.onExtentedFieldsForModification(); |
| }; |
| |
| /*********************************************************** |
| * Fonctions pour la création des champs supplémentaires * |
| ***********************************************************/ |
| |
| // Logique globale pour l'ajout de nouveaux champs |
| ChampsSupp.prototype.onClickAddNewFields = function() { |
| this.fieldIndex++; |
| this.dataIdAttr = `data-id="${this.fieldIndex}"`; |
| // Affichage du formulaire pour un champ |
| this.displayNewField(); |
| // Affichage du nom du champ |
| this.onChangeDisplayFieldLabel(); |
| // Empêcher de créer plus d'une fois la même clé |
| onChangeCheckKeyUnique(); |
| // Affichage des images/nom des documents importés dans les champs ajoutés |
| inputFile(); |
| // Recueil des informations correspondantes au nouveau champ |
| this.onChangeFieldTypeCollectDetails(); |
| // Suppression d'un champ |
| this.onClickRemoveField(); |
| }; |
| |
| // Création/affichage du formulaire d'un nouveau champ |
| ChampsSupp.prototype.displayNewField = function() { |
| const fieldsetHtml = `<fieldset ${this.dataIdAttr} class="new-field"></fieldset>`, |
| fieldsetHtmlContent = |
| `<h3>Nouveau champ :<br><strong class="field-title" ${this.dataIdAttr}></strong></h3> |
| <!-- Nom du champ --> |
| <div class="row"> |
| <div class="col-sm-12 mt-3 mb-3"> |
| <label for="field-name" title="Donnez un titre à votre champ">Nom du champ *</label> |
| <input type="text" name="field-name" ${this.dataIdAttr} class="field-name form-control" placeholder="Titre de votre champ" title="Le titre du champ" required> |
| </div> |
| <!-- Clé du champ --> |
| <div class="col-sm-12 mt-3 mb-3"> |
| <label for="field-key" title="Nom du champ dans la base de données"> |
| Clé du champ * |
| </label> |
| <input type="text" name="field-key" ${this.dataIdAttr} class="field-key form-control" placeholder="Clé du champ" pattern="^(?:[a-z]+(?:(?:[A-Z]+[a-z]+)+)?|[a-z]+(?:(?:-[a-z]+)+)?)$" title="Clé Unique en Camelcase ou minuscule séparés par tirets, pas d’accents pas de caractères spéciaux." required> |
| </div> |
| <p class="message m-2"> |
| <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
| Une clé doit être unique<br> |
| En "camelCase" (ecriture chameau)<br> |
| Ou en minuscule avec tirets ("-") si nécessaire<br> |
| Pas d’espaces, aucuns caractères spéciaux (accents, cédilles, etc.). |
| </p> |
| <!-- Type de champ --> |
| <div class="col-sm-12 mt-3 mb-3 add-field-select" ${this.dataIdAttr}> |
| <label for="field-element" title="Quel type de champ">Type de champ *</label> |
| <select name="field-element" ${this.dataIdAttr} class="field-element form-control custom-select"> |
| <option value="text">Champ texte</option> |
| <option value="email">Champ email</option> |
| <option value="textarea">Champ rédaction</option> |
| <option value="select">Menu déroulant</option> |
| <option value="checkbox">Cases à cocher</option> |
| <option value="list-checkbox">Liste de cases à cocher</option> |
| <option value="radio">Boutons radio</option> |
| <option value="date">Calendrier</option> |
| <option value="range">Curseur (entre 2 bornes)</option> |
| <option value="number">Nombre</option> |
| </select> |
| </div> |
| <!-- Checkbox "champ requis" --> |
| <div class="col-sm-12 radio mt-3 mb-3"> |
| <label class="radio-label" for="field-is_mandatory" title="Ce champ est obligatoire"> |
| <input type="checkbox" name="field-is_mandatory" ${this.dataIdAttr} class="field-is_mandatory form-control"> |
| Champ requis ? |
| </label> |
| </div> |
| <!-- Unité des valeurs --> |
| <div class="col-sm-12 mt-3 mb-3"> |
| <label for="field-unit" title="Unité de mesure de vos valeurs">Unités (cm, kg, ha, etc.)</label> |
| <input type="text" name="field-unit" ${this.dataIdAttr} class="field-unit form-control" placeholder="symbole de vos unités"> |
| </div> |
| <!-- Tooltip --> |
| <div class="col-sm-12 mt-3 mb-3"> |
| <label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label> |
| <input type="text" name="field-description" ${this.dataIdAttr} class="field-description form-control" placeholder="Quelques mots"> |
| </div> |
| <!-- Import d'une image d'aide à afficher en popup --> |
| <div class="input-file-row row"> |
| <div class="input-file-container col-sm-10"> |
| <input type="file" class="input-file field-help" name="field-help${this.fieldIndex}" ${this.dataIdAttr} id="help-doc-${this.fieldIndex}" accept="image/*"> |
| <label for="field-help${this.fieldIndex}" class="label-file"><i class="fas fa-download"></i> Popup aide image (.jpg)</label> |
| </div> |
| <div class="btn btn-danger btn-sm remove-file" name="remove-file" ${this.dataIdAttr} title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div> |
| <div class="file-return help-doc-${this.fieldIndex} hidden"></div> |
| </div> |
| <!-- Boutons supprimer --> |
| <div class="col-sm-12 mt-3 mb-3"> |
| <label for="remove-field">Supprimer</label> |
| <div class="remove-field button" name="remove-field" ${this.dataIdAttr} title="Supprimer un champ"><i class="fa fa-skull" aria-hidden="true"></i></div> |
| </div> |
| <input type="hidden" name="field-is_visible" class="field-is_visible" ${this.dataIdAttr} value="1"> |
| </div>`; |
| |
| $('#new-fields').append(fieldsetHtml); |
| |
| const $fieldset = findFieldset(this.fieldIndex); |
| |
| // Insertion du contenu html du formulaire du nouveaux champs inséré dans le dom |
| $fieldset.append(fieldsetHtmlContent); |
| // Animation de l'affichage |
| if (!isModification) { |
| showField($fieldset); |
| $('html, body').stop().animate({ |
| scrollTop: $fieldset.offset().top |
| }, 300); |
| } |
| this.$fieldset = $fieldset; |
| }; |
| |
| // Affichage du nom du champ dès qu'il est renseigné |
| ChampsSupp.prototype.onChangeDisplayFieldLabel = function() { |
| const $fieldset = this.$fieldset; |
| |
| $('.field-name', $fieldset).on('change', function () { |
| $('.field-title', $fieldset).text($(this).val()); |
| }); |
| }; |
| |
| // Supprimer un nouveau champ |
| ChampsSupp.prototype.onClickRemoveField = function() { |
| $('.remove-field').click(function () { |
| const $fieldset = $(this).closest('fieldset'), |
| fieldIndex = $fieldset.data('id'); |
| |
| $fieldset.hide(200, function () { |
| if (!CHAMPS_SUPP_JSON[fieldIndex]) { |
| $fieldset.remove(); |
| } else { |
| if (0 === $('#info-suppression-champs-supp').length) { |
| $('#infos-validation-boutons').after( |
| `<p id="info-suppression-champs-supp" class="message invalid"> |
| <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
| vous avez supprimé un ou plusieurs champs supplémentaires ici<br> |
| Lorsque vous aurez fini de saisir/modifier/supprimer vos champs suppléménetaires, pensez à cliquer sur le bouton <i class="fa fa-bolt" aria-hidden="true" style="color:#B3C954"></i> "Valider", même si vous les avez tous supprimés, sans quoi ces changements ne seront pas pris en compte. |
| </p>` |
| ); |
| } |
| $('.field-is_visible', $fieldset).val(0); |
| } |
| }); |
| }); |
| }; |
| |
| /**** Recueil des informations et détails qui dépendent du type de champ choisi ****/ |
| |
| // Logique de recueil d'informations en fonction du type de champ choisi |
| ChampsSupp.prototype.onChangeFieldTypeCollectDetails = function() { |
| const lthis = this, |
| placeholderFieldHtml = |
| `<div class="col-sm-12 mt-3"> |
| <label for="aide-saisie" title="Deux ou 3 mots ou chiffres pour comprendre ce que doit contenir ce champ (ex: min 20, 10 par 10, etc.)">Texte d’aide à la saisie</label> |
| <input type="text" name="aide-saisie" ${this.dataIdAttr} class="aide-saisie form-control" placeholder="Ce que doit contenir ce champ"> |
| </div>`, |
| $element = $('.field-element', this.$fieldset); |
| |
| // On insère les champs par défaut de recueil d'informations |
| this.displayFieldDetailsCollect(placeholderFieldHtml); |
| // Sinon : |
| $element.on('change', function() { |
| const selectedItem = this.value; |
| // On intialise l'index pour les listes la variable qui contiendra un id pour chaque option |
| let valueIndex = 0, |
| fieldDetails = placeholderFieldHtml; |
| |
| // Si on hésite on qu'on se trompe dans la liste : |
| // les champs de détails de l'option précédente doivent être supprimés |
| hideNRemove($('.field-details', lthis.$fieldset)); |
| // Html de recueil de données en fonction de l'élément choisi |
| switch(selectedItem) { |
| case 'range': |
| case 'number': |
| fieldDetails = |
| `<p class="message"> |
| <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
| Ne pas oublier de prévisualiser !!<br> |
| Vérifier le bon fonctionnement et changer, si nécessaire, les valeurs de défaut, incrémentation (step), min et max.<br> |
| Si le navigateur considère que certaines valeurs sont incohérentes il pourrait les modifier automatiquement |
| </p> |
| <!-- Placeholder --> |
| ${placeholderFieldHtml} |
| <!-- Valeur par défaut --> |
| <div class="col-sm-12 mt-3"> |
| <label for="default" title="Valeur par défaut">Valeur par défaut</label> |
| <input type="number" name="default" ${lthis.dataIdAttr} class="default form-control" step="0.01" lang="en"> |
| </div> |
| <!-- Incrémentation ( attribut step="" ) --> |
| <div class="col-sm-12 mt-3"> |
| <label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step)</label> |
| <input type="number" name="step" ${lthis.dataIdAttr} class="step form-control" step="0.01" value="1" lang="en"> |
| </div> |
| <!-- Min --> |
| <div class="col-sm-12 mt-3"> |
| <label for="min" title="valeur min">Valeur minimale</label> |
| <input type="number" name="min" ${lthis.dataIdAttr} class="min form-control" step="0.01" value="0" lang="en"> |
| </div> |
| <!-- Max --> |
| <div class="col-sm-12 mt-3"> |
| <label for="max" title="valeur max">Valeur maximale</label> |
| <input type="number" name="max" ${lthis.dataIdAttr} class="max form-control" step="0.01" value="1" lang="en"> |
| </div>`; |
| break; |
| |
| case 'date': |
| fieldDetails = |
| `<!-- Date min --> |
| <div class="col-sm-12 mt-3"> |
| <label for="min" title="date min">Date minimale</label> |
| <input type="date" name="min" ${lthis.dataIdAttr} class="min form-control" pattern="${datePattern}" title="jj/mm/aaaa"> |
| </div> |
| <!-- Date max --> |
| <div class="col-sm-12 mt-3"> |
| <label for="max" title="date max">Date maximale</label> |
| <input type="date" name="max" ${lthis.dataIdAttr} class="max form-control" pattern="${datePattern}" title="jj/mm/aaaa"> |
| </div>`; |
| break; |
| |
| case 'select': |
| case 'checkbox': |
| case 'list-checkbox': |
| case 'radio': |
| const mayHavePlaceholder = ['select', 'list-checkbox'].includes(selectedItem); |
| let additionnalMessage = '', |
| required = 'required', |
| asterisk = ' *'; |
| |
| if (mayHavePlaceholder) { |
| additionnalMessage = |
| `<br><i class="fas fa-info-circle" style="color:#009fb8"></i> |
| Si aucune valeur n’est indiquée pour la première option, |
| <br>celle-ci servira de placeholder (indication affichée dans le champ), |
| <br>et n’apparaitra pas dans les options à choisir/cocher. |
| <br><i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
| Dans ce cas il est impossible de choisir une "valeur par defaut"`; |
| required = ''; |
| asterisk = ''; |
| } |
| |
| fieldDetails = |
| `<p class="message element-message"> |
| <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
| Entrez au moins une valeur de ${$element.children('option:selected').text()} |
| <br>Si aucun label à afficher n’est indiqué, la valeur entrée sera utilisée (première lettre en majuscule). |
| ${additionnalMessage} |
| </p> |
| <!-- Première option --> |
| <div class="new-value center-block row" data-list-value-id="${valueIndex}"> |
| <!-- Recueil d'une valeur de la liste --> |
| <div class="col-sm-12 mt-3"> |
| <label for="list-value">Valeur${asterisk}</label> |
| <input type="text" name="list-value" ${lthis.dataIdAttr} class="list-value form-control" data-list-value-id="${valueIndex}" placeholder="Une des valeurs de la liste" ${required}> |
| </div> |
| <!-- Recueil du label à afficher --> |
| <div class="col-sm-12 mt-3"> |
| <label for="displayed-label">Label</label> |
| <input type="text" name="displayed-label" ${lthis.dataIdAttr} class="displayed-label form-control" data-list-value-id="${valueIndex}" placeholder="Label à afficher"> |
| </div> |
| <!-- Checkbox valeur par défaut --> |
| <div class="col-sm-12 radio mt-3"> |
| <label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label"> |
| <input type="checkbox" name="is-defaut-value" ${lthis.dataIdAttr} class="is-defaut-value" checked="checked" data-list-value-id="${valueIndex}" disabled > |
| Valeur par défaut |
| </label> |
| </div> |
| </div> |
| <!-- Bouton ajout d'une valeur à la liste --> |
| <div class="col-sm-12 mt-3 add-value-container" ${lthis.dataIdAttr}> |
| <label for="add-value" class="add-value" ${lthis.dataIdAttr} title="Ajouter une valeur à la liste">Ajouter une valeur</label> |
| <div class="button add-value-button" name="add-value" ${lthis.dataIdAttr} title="Ajouter une valeur à la liste"><i class="fa fa-puzzle-piece" aria-hidden="true"></i></div> |
| </div> |
| <!-- checkbox ajouter une valeur "Autre:" --> |
| <div class="col-sm-12 radio mt-3"> |
| <label for="option-other-value" title="Ajouter une option \"Autre:\" à la fin" class="radio-label"> |
| <input type="checkbox" name="option-other-value" ${lthis.dataIdAttr} class="option-other-value" title="Ajouter une option \"Autre\" à la fin"> |
| Valeur "Autre" |
| </label> |
| </div>`; |
| break; |
| |
| // case 'email': |
| // case 'text': |
| // case 'textarea': |
| default: |
| break; |
| } |
| lthis.displayFieldDetailsCollect(fieldDetails); |
| // Ajout des valeurs possibles |
| // lorsque le champ est une liste ou case à cocher |
| lthis.onClickAddNewValueToList(valueIndex); |
| }); |
| }; |
| |
| // Insertion dans le dom des champs de recueil d'informations |
| ChampsSupp.prototype.displayFieldDetailsCollect = function(fieldDetails) { |
| const $detailsCollect = $('.add-field-select', this.$fieldset); |
| |
| $detailsCollect.after(`<div class="field-details col-sm-11 mt-3 row" ${this.dataIdAttr}>${fieldDetails}</div>`); |
| showField($detailsCollect); |
| }; |
| |
| /**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/ |
| |
| // Ajout des options des listes (deroulantes, cases à cocher etc.) |
| ChampsSupp.prototype.onClickAddNewValueToList = function(valueIndex) { |
| const lthis = this, |
| $addValueContainer = $('.add-value-container', this.$fieldset); |
| |
| $('.add-value-button', this.$fieldset).click(function() { |
| valueIndex++; |
| $addValueContainer.before( |
| `<div class="new-value center-block row" data-list-value-id="${valueIndex}"> |
| <!-- Recueil d'une valeur de la liste --> |
| <div class="col-sm-12 mt-3"> |
| <label for="list-value">Valeur *</label> |
| <input type="text" name="list-value" ${lthis.dataIdAttr} class="list-value form-control" data-list-value-id="${valueIndex}" placeholder="Une des valeurs de la liste" required> |
| </div> |
| <!-- Recueil du label à afficher --> |
| <div class="col-sm-12 mt-3"> |
| <label for="displayed-label">Label</label> |
| <input type="text" name="displayed-label" ${lthis.dataIdAttr} class="displayed-label form-control" data-list-value-id="${valueIndex}" placeholder="Label à afficher"> |
| </div> |
| <!-- Checkbox valeur par défaut+bouton supprimer --> |
| <div class="col-sm-12 mt-3 row"> |
| <!-- Bouton supprimer une option --> |
| <div class="col-sm-5"> |
| <div class="remove-value button" name="remove-value" ${lthis.dataIdAttr} data-list-value-id="${valueIndex}" title="Supprimer une valeur"><i class="fa fa-trash" aria-hidden="true"></i></div> |
| </div> |
| <!-- Valeur par défaut --> |
| <div class="col-sm-7 radio"> |
| <label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label"> |
| <input type="checkbox" name="is-defaut-value" ${lthis.dataIdAttr} class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="${valueIndex}" disabled > |
| Valeur défaut |
| </label> |
| </div> |
| </div> |
| </div>` |
| ); |
| showField($addValueContainer); |
| // Une seule valeur par défaut pour select et radio |
| lthis.onClickDefaultValueRemoveOthers(); |
| // Supprimer une valeur |
| lthis.onClickRemoveListValue(); |
| }); |
| }; |
| |
| // Activer la checkbox de valeur par default uniquement si une valeur est entrée |
| ChampsSupp.prototype.onInputListValueLabelEnableDefaultCheckbox = function() { |
| $('#new-fields').on('input blur', '.list-value', function () { |
| const $fieldset = findFieldset($(this).data('id')), |
| $firstDefautValue = $('.is-defaut-value', $fieldset).first(); |
| |
| if ('' === $('.list-value', $fieldset).first().val()) { |
| $('.is-defaut-value', $fieldset).attr('disabled', true).removeAttr('checked'); |
| $firstDefautValue.attr('checked', true).prop('checked',true); |
| |
| } else { |
| $('.is-defaut-value', $fieldset).each(function () { |
| const $thisListValue = $(`.list-value[data-list-value-id=${$(this).data('list-value-id')}]`, $fieldset); |
| |
| if ('' !== $thisListValue.val()) { |
| $(this).removeAttr('disabled'); |
| } else { |
| $(this).attr('disabled', true).removeAttr('checked'); |
| } |
| }); |
| } |
| }); |
| }; |
| |
| // Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée |
| ChampsSupp.prototype.onClickDefaultValueRemoveOthers = function() { |
| const lthis = this, |
| selectedFieldElement = $('.field-element', this.$fieldset).val(); |
| |
| if (selectedFieldElement === 'select' || selectedFieldElement === 'radio') { |
| $('.is-defaut-value', this.$fieldset).click(function () { |
| if ($(this).is(':checked')) { |
| // Décocher tous les autres |
| $('.is-defaut-value:checked', lthis.$fieldset).not($(this)).removeAttr('checked'); |
| } |
| }); |
| } |
| }; |
| |
| // Bouton supprimer une valeur |
| ChampsSupp.prototype.onClickRemoveListValue = function() { |
| $('.remove-value.button', this.$fieldset).off('click').on('click', function () { |
| hideNRemove($('.new-value[data-list-value-id='+$(this).data('list-value-id')+']')); |
| }); |
| }; |
| |
| /**** Envoi des nouveaux champs ****/ |
| |
| // Enregistrement des valeurs à transmettre |
| ChampsSupp.prototype.onClickStoreNewFields = function() { |
| const count = $('fieldset').last().data('id'), |
| $submitButton = $('#submit-button'); |
| // Lorsqu'on valide |
| let resultArrayIndex = 0, |
| newHelpFileExists = false; |
| |
| // Savoir si au moins un fichier "aide" est enregistré |
| $('.field-help').each(function () { |
| if ('' !== $(this).val()){ |
| newHelpFileExists = true; |
| } |
| }) |
| // dans ce cas intégrer dans le formulaire à soumettre un bloc |
| // qui contiendra une copie de chacun de ces input[type="file"] |
| if (newHelpFileExists){ |
| $submitButton.before('<div id="help-doc-submit" style="position:fixed;visibility:hidden;"></div>'); |
| } |
| |
| let $thisFieldset = $('fieldset').first(), |
| valueForIsVisible, |
| $inputFile, |
| uploadedHelpFiles; |
| |
| // On déroule les blocs de champs supplémentaires |
| for(let index = $thisFieldset.data('id'); index <= count; index++) { |
| $thisFieldset = findFieldset(index); |
| valueForIsVisible = $('.field-is_visible', $thisFieldset).val(); |
| // Certains indices peuvent correspondre à un champ supprimé |
| if (0 < $($thisFieldset).length) { |
| if (0 === parseInt(valueForIsVisible)) { |
| datasToSubmit[resultArrayIndex] = CHAMPS_SUPP_JSON[resultArrayIndex]; |
| } else { |
| // initialisation du tableau de résultats |
| datasToSubmit[resultArrayIndex] = {fieldValues:{}}; |
| $.each(['key','name','element','unit','description'], (i, fieldName) => datasToSubmit[resultArrayIndex][fieldName] = $('.field-'+fieldName, $thisFieldset).val() || null); |
| // Ajout de la valeur 'requis' ou non au tableau de resultats |
| datasToSubmit[resultArrayIndex].mandatory = $('.field-is_mandatory', $thisFieldset).is(':checked'); |
| // Collecte les des données dépendantes de l'élément choisi |
| // sous forme d'un tableau de resultats |
| this.onSelectCollectDataValuesToSubmit(datasToSubmit[resultArrayIndex], $thisFieldset); |
| |
| if ($.isEmptyObject(datasToSubmit[resultArrayIndex].fieldValues)){ |
| delete datasToSubmit[resultArrayIndex].fieldValues; |
| } |
| // Copie d'un champ de fichier d'aide dans le bloc d'envoi |
| $inputFile = $('.field-help', $thisFieldset); |
| uploadedHelpFiles = $inputFile.get(0).files; |
| if (0 < uploadedHelpFiles.length) { |
| // Présence d'un document d'aide |
| datasToSubmit[resultArrayIndex].help = uploadedHelpFiles[0].type; |
| $inputFile.clone() |
| .attr('name', 'help-'+datasToSubmit[resultArrayIndex].key)// l'attribut name prend la valeur de la clé |
| .appendTo('#help-doc-submit'); |
| // si un fichier d'aide était déjà présent et que l'utilisateur ne le supprime pas on réinjecte le type mime |
| // ce qui indique la présence d'un fichier d'aide lors de l'affichage du widget de saisie |
| } else if (!!CHAMPS_SUPP_JSON[resultArrayIndex] && !!CHAMPS_SUPP_JSON[resultArrayIndex]['help'] && !$('.file-return', $thisFieldset).hasClass('hidden')) { |
| datasToSubmit[resultArrayIndex].help = CHAMPS_SUPP_JSON[resultArrayIndex]['help']; |
| |
| } else { |
| datasToSubmit[resultArrayIndex].help = null; |
| } |
| datasToSubmit[resultArrayIndex].is_visible = valueForIsVisible; |
| resultArrayIndex++; |
| } |
| } |
| } |
| |
| const resultsArrayJson = JSON.stringify(datasToSubmit, replacer); |
| |
| console.log(resultsArrayJson); |
| |
| // Désactivation de tous les champs et boutons (nouveaux champs) |
| $('#new-fields, #new-fields .button, #add-fields, #preview-field').addClass('disabled'); |
| $('#validate-new-fields').addClass('validated'); |
| $('.validate-new-fields').text('Champs validés'); |
| // Mise à disposition des données pour le bouron submit |
| $submitButton.before('<input type="hidden" name="champs-supp" id="champs-supp">'); |
| $('#champs-supp').val(resultsArrayJson); |
| // suppression du message d'alerte validations des champs supprimés en mode modification |
| $('#info-suppression-champs-supp').remove(); |
| }; |
| |
| // Renseigne le tableau de resultat |
| // pour les données dépendant de l'élément choisi |
| ChampsSupp.prototype.onSelectCollectDataValuesToSubmit = function(datasToSubmitObject, $thisFieldset) { |
| switch(datasToSubmitObject.element) { |
| case 'select': |
| case 'checkbox': |
| case 'list-checkbox': |
| case 'radio': |
| datasToSubmitObject.fieldValues.listValue = []; |
| // Ajout des valeurs de liste |
| this.onChangeStoreListValueLabel(datasToSubmitObject, $thisFieldset); |
| // S'il y a une valeur 'autre' on l'indique à la fin de la liste |
| if ($('.option-other-value', $thisFieldset).is(':checked') && -1 === datasToSubmitObject.fieldValues.listValue.indexOf('other')) { |
| datasToSubmitObject.fieldValues.listValue.push('other'); |
| } |
| break; |
| |
| case 'number': |
| case 'range': |
| // Placeholder |
| datasToSubmitObject.fieldValues.placeholder = $('.aide-saisie', $thisFieldset).val() || null; |
| // Valeur par défaut |
| datasToSubmitObject.fieldValues.default = $('.default', $thisFieldset).val() || null; |
| // Incrémentation ( attribut step="" ) |
| datasToSubmitObject.fieldValues.step = $('.step', $thisFieldset).val() || null; |
| |
| case 'date': |
| // Min |
| datasToSubmitObject.fieldValues.min = $('.min', $thisFieldset).val() || null; |
| // Max |
| datasToSubmitObject.fieldValues.max = $('.max', $thisFieldset).val() || null; |
| break; |
| |
| case 'email': |
| case 'text': |
| case 'textarea': |
| default: |
| // Placeholder |
| datasToSubmitObject.fieldValues.placeholder = $('.aide-saisie', $thisFieldset).val() || null; |
| break; |
| } |
| return datasToSubmitObject; |
| }; |
| |
| // Ajout d'une valeur d'un élément liste (select, checkbox etc.) |
| // dans le tableau de resultats |
| ChampsSupp.prototype.onChangeStoreListValueLabel = function(datasToSubmitObject, $thisFieldset) { |
| const $listValues = $('.list-value', $thisFieldset), |
| hasPlaceholder = !valeurOk($listValues.first().val()); |
| |
| $('.list-value', $thisFieldset).each(function (i) { |
| const valueId = $(this).data('list-value-id'), |
| $displayedLabel = $(`.displayed-label[data-list-value-id=${valueId}]`, $thisFieldset), |
| hasDisplayedLabel = valeurOk($displayedLabel.val()); |
| let displayedLabel = hasDisplayedLabel ? $displayedLabel.val() : ''; |
| |
| if ($(this).val()){ |
| // Is-default-value non cochée |
| if (!$(`.is-defaut-value[data-list-value-id="${valueId}"]`, $thisFieldset).is(':checked')) { |
| datasToSubmitObject.fieldValues.listValue.push([$(this).val(), displayedLabel]); |
| // Is-default-value cochée pour select/radio |
| } else if (['select', 'radio'].include($('.field-element', $thisFieldset).val())) { |
| // Une seule valeur par defaut, devient la première valeur du tableau+'#' |
| datasToSubmitObject.fieldValues.listValue.unshift([$(this).val()+'#', displayedLabel]); |
| // Is-default-value cochée pour checkbox/list-checkbox |
| } else { |
| // On ajoute simplement la valeur au tableau+'#' |
| datasToSubmitObject.fieldValues.listValue.push([$(this).val()+'#', displayedLabel]); |
| } |
| } else if (0 === i) {// deviendra un placeholder |
| displayedLabel = hasDisplayedLabel ? $displayedLabel.val() : '...Choisir...'; |
| datasToSubmitObject.fieldValues.listValue.push([null, displayedLabel]); |
| } |
| }); |
| }; |
| |
| /********************************************************* |
| * Modification des champs supp sur un Widget existant * |
| *********************************************************/ |
| |
| ChampsSupp.prototype.onExtentedFieldsForModification = function() { |
| if (!$('#type').val() && isModification) { |
| $.each(CHAMPS_SUPP_JSON, this.fillFieldsForModification); |
| } |
| }; |
| |
| ChampsSupp.prototype.fillFieldsForModification = function(index, extendedFieldValues) { |
| $('#add-fields').click(); |
| |
| const fieldValues = extendedFieldValues.fieldValues, |
| $fieldset = findFieldset(index), |
| textFields = [ |
| 'name', |
| 'key', |
| 'unit', |
| 'description' |
| ], |
| fieldsetKeys = textFields.concat([ |
| 'is_visible', |
| 'is_mandatory', |
| 'element' |
| ]), |
| extendedFields = {}; |
| |
| $.each(fieldsetKeys, (i, fieldName) => extendedFields[fieldName] = $('.field-'+fieldName, $fieldset)); |
| extendedFields.is_visible.val(extendedFieldValues.is_visible); |
| if (!extendedFieldValues.is_visible) { |
| $fieldset.hide(); |
| } |
| |
| const selectedOption = $(`option[value=${extendedFieldValues.element}]`, extendedFields.element); |
| |
| $.each(textFields, (i, fieldName) => extendedFields[fieldName].val(extendedFieldValues[fieldName])); |
| |
| const isMandatory = 1 === extendedFieldValues.mandatory; |
| |
| extendedFields.key.attr('disabled', true); |
| extendedFields.name.change(); |
| extendedFields.is_mandatory.attr('checked', isMandatory).prop('checked', isMandatory); |
| |
| selectedOption.attr('selected','selected'); |
| selectedOption.change(); |
| if (!!extendedFieldValues.help) { |
| const fileExtension = 'png' === extendedFieldValues.help.replace('image/','').toLowerCase() ? '.png' : '.jpg', |
| fileName = extendedFieldValues.key+fileExtension; |
| |
| $('.file-return', $fieldset).append(`${fileName}<img src="${URLS_IMAGES+fileName}" width="50%">`).removeClass('hidden'); |
| } |
| switch(extendedFieldValues.element) { |
| case 'select': |
| case 'checkbox': |
| case 'list-checkbox': |
| case 'radio': |
| const listValues = fieldValues.listValue; |
| let $listValueBlock; |
| |
| if ('other' === listValues.slice(-1)[0]) { |
| $('.option-other-value', $fieldset).attr('checked', true).prop('checked', true); |
| listValues.pop(); |
| } |
| |
| $.each(listValues, (i, listValue) => { |
| $listValueBlock = $(`.new-value[data-list-value-id=${i}]`, $fieldset); |
| if(valeurOk(listValue[0])) { |
| if ('#' === listValue[0].slice(-1)) { |
| listValue[0] = listValue[0].slice(0,-1); |
| $('.is-defaut-value', $listValueBlock).attr('checked', true).prop('checked', true); |
| } |
| $('.list-value', $listValueBlock).val(listValue[0]); |
| } |
| if(valeurOk(listValue[1])) { |
| $('.displayed-label', $listValueBlock).val(listValue[1]); |
| } |
| $('.list-value', $listValueBlock).trigger('input'); |
| if (1 < listValues.length - i) { |
| $('.add-value-button', $fieldset).click(); |
| } |
| }); |
| break; |
| |
| case 'number': |
| case 'range': |
| case 'date': |
| case 'email': |
| case 'text': |
| case 'textarea': |
| default: |
| const specificationKeys = ['placeholder', 'default', 'step', 'min', 'max']; |
| let classAttr; |
| |
| $.each(specificationKeys, (i, key) => { |
| classAttr = key === 'placeholder' ? 'aide-saisie' : key; |
| if (fieldValues[key] !== undefined) { |
| $('.'+classAttr, $fieldset).val(fieldValues[key]); |
| } |
| }); |
| break; |
| } |
| }; |
| |
| /********************************* |
| * Enregistrer / prévisualiser * |
| *********************************/ |
| |
| // Activation/desactivation des champs valider/previsualiser |
| ChampsSupp.prototype.onClickButtonsTagMissingValues = function() { |
| const lthis = this |
| $('#preview-field, #validate-new-fields').on('click', function () { |
| const $button = $(this); |
| //S'il n'y a pas (plus) de bloc nouveau champ |
| if (0 === $('fieldset').length) { |
| return; |
| } |
| // Classe "invalid" |
| missingValuesClass(); |
| if (!$(this).hasClass('invalid')) { |
| if ($(this).is('#validate-new-fields')) { |
| // Lancement de l'enregistrement des valeurs à transmettre |
| lthis.onClickStoreNewFields(); |
| } else if ($(this).is('#preview-field')) { |
| // Lancement de la prévisualisation |
| newFieldsPreview(); |
| } |
| } |
| }); |
| // Si un champ manquant est renseigné |
| // ou on choisit nouvel élément liste (au moins une option) |
| // Cette action doit être prise en compte dans la validation |
| $('#new-fields').on('change', '.invalid[type="text"], .field-element', function () { |
| // S'il on a pas encore cliqué sur prévisualiser/valider |
| // changer l'élément ne doit pas déclancher le signalement en rouge |
| if ($(this).is('.field-element') && !$('#preview-field, #validate-new-fields').hasClass('invalid')) { |
| return; |
| } else { |
| // Classe "invalid" |
| missingValuesClass(); |
| } |
| }); |
| }; |