Subversion Repositories eFlore/Applications.cel

import {hideNRemove} from './utils.js';

/*********************************************
 *  Validation et envoi des nouveaux champs  *
 *********************************************/

// Empêcher de créer plus d'une fois la même clé
export const onChangeCheckKeyUnique = () => {
 if ( 1 < $('.field-key').length) {
    // Marqueur de valeur dupliquée
    let notUnique = false,
      thisFieldKey,
      otherFieldKey;

    $('.field-key').change(function () {
      const count = $('.field-key').length;

      for(let index = 0; index < count; index++) {
        thisFieldKey = $(`.field-key[data-id="${index}"]`);
        // Le champ avec cet index pourrait avoir été supprimé
        if (0 < thisFieldKey.length) {
          for( let otherIndex = 0; otherIndex < count; otherIndex++) {
            otherFieldKey = $(`.field-key[data-id="${otherIndex}"]`);
            // Le champ avec cet index pourrait avoir été supprimé
            // On vérifie qu'on ne compare pas un champ avec lui-même
            // Que les champs ne sont pas vides
            // Les champs dupliqués déclanchent le marqueur et les alertes
            if (
              0 < otherFieldKey.length &&
              index !== otherIndex &&
              '' !== otherFieldKey.val() &&
              '' !== thisFieldKey.val() &&
              thisFieldKey.val() === otherFieldKey.val()
           ) {
              // Le marqueur de valeur dupliquée passe à true
              notUnique = true;
              if (0 === $(`.invalid-field-key[data-id="${index}"]`).length) {
                // Le champ est signalé en rouge
                // Un message d'alerte apparait sous le champ
                thisFieldKey.addClass('invalid-key');
                thisFieldKey.after(
                  `<p class="message invalid-field-key" data-id="${index}">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
                     Vérifiez qu’aucune clé n’ait été utilisée plus d’une fois
                  </p>`
                );
              }
            }
          }
        }
      }
      if ( notUnique) {
        // Un message d'alerte apparait au dessus des boutons prévisualiser/valider
        if (0 === $('.invalid-field-key-bottom').length) {
          $('#new-fields').after(
            `<p class="message invalid-field-key-bottom">
              <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
               Une clé a été utilisée plusieurs fois
            </p>`
          );
        }
        // Les boutons prévisualiser/valider sont désactivés et signalés en rouge
        $('#preview-field, #validate-new-fields').addClass('invalid-key').css('pointer-events', 'none');
      } else {// Si on est ok on retire toutes les alertes
        // signalements rouges
        $('.field-key').each(function () {
          $(this).removeClass('invalid-key');
        });
        $('#preview-field, #validate-new-fields').removeClass('invalid-key');
        // messages d'alerte
        $('.invalid-field-key').each(function() {
          hideNRemove($(this));
        });
        hideNRemove($('.invalid-field-key-bottom'));
        //réactivation des boutons prévisualiser/valider
        $('#preview-field')[0].style.removeProperty('pointer-events');
        $('#validate-new-fields')[0].style.removeProperty('pointer-events')
      }
      // Réinitialisation
      notUnique = false;
    });
  }
};

// Classe "invalid"
export const missingValuesClass = () => {
  const $newFields = $('#new-fields');

  // Si au moins un champ "required" n'est pas rempli
  $('input[required]', $newFields).each(function () {
    const $inputValidationWarning = $(this).next('.validation-warning');

    if (0 === $(this).val().length) {
      // Le champ est signalé en rouge
      $(this).addClass('invalid');
      // Un message d'alerte apparait après le champ
      if (0 === $inputValidationWarning.length) {
        $(this).after(
          `<p class="validation-warning message">
            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
             &nbsp;Ce champ est requis
          </p>`
        );
      }
    } else {
      // Le champ est signalé en rouge
      $(this).removeClass('invalid');
      // Le message d'alerte du champ est supprimé
      if (0 < $inputValidationWarning.length) {
        hideNRemove($inputValidationWarning);
      }
    }
  });
  const $validationWarning = $newFields.next('.validation-warning'),
    $buttons = $('#preview-field , #validate-new-fields');

  // Si on a des champs à compléter
  if (0 < $('.invalid[type="text"]').length) {
    // Les boutons sont signalés en rouge
    $buttons.addClass('invalid');
    // Un message d'alerte apparait avant les boutons
    if (0 === $validationWarning.length) {
      $newFields.after(
        `<p class="validation-warning message">
          <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
           &nbsp;Des informations sont manquantes pour certains champs,
            vérifiez ceux signalés en rouge
        </p>`
      );
    }
  } else {
    // Les signalements et messages sont supprimés
    $buttons.removeClass('invalid');
    hideNRemove($validationWarning);
  }
};