Subversion Repositories eFlore/Applications.cel

Rev

Rev 3897 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3897 delphine 1
import {hideNRemove} from './utils.js';
2
 
3
/*********************************************
4
 *  Validation et envoi des nouveaux champs  *
5
 *********************************************/
6
 
7
// Empêcher de créer plus d'une fois la même clé
8
export const onChangeCheckKeyUnique = () => {
9
 if ( 1 < $('.field-key').length) {
10
    // Marqueur de valeur dupliquée
11
    let notUnique = false,
12
      thisFieldKey,
13
      otherFieldKey;
14
 
15
    $('.field-key').change(function () {
16
      const count = $('.field-key').length;
17
 
18
      for(let index = 0; index < count; index++) {
19
        thisFieldKey = $(`.field-key[data-id="${index}"]`);
20
        // Le champ avec cet index pourrait avoir été supprimé
21
        if (0 < thisFieldKey.length) {
22
          for( let otherIndex = 0; otherIndex < count; otherIndex++) {
23
            otherFieldKey = $(`.field-key[data-id="${otherIndex}"]`);
24
            // Le champ avec cet index pourrait avoir été supprimé
25
            // On vérifie qu'on ne compare pas un champ avec lui-même
26
            // Que les champs ne sont pas vides
27
            // Les champs dupliqués déclanchent le marqueur et les alertes
28
            if (
29
 
30
              index !== otherIndex &&
31
              '' !== otherFieldKey.val() &&
32
              '' !== thisFieldKey.val() &&
33
              thisFieldKey.val() === otherFieldKey.val()
34
           ) {
35
              // Le marqueur de valeur dupliquée passe à true
36
              notUnique = true;
37
              if (0 === $(`.invalid-field-key[data-id="${index}"]`).length) {
38
                // Le champ est signalé en rouge
39
                // Un message d'alerte apparait sous le champ
40
                thisFieldKey.addClass('invalid-key');
41
                thisFieldKey.after(
42
                  `<p class="message invalid-field-key" data-id="${index}">
43
                    <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
44
                     Vérifiez qu’aucune clé n’ait été utilisée plus d’une fois
45
                  </p>`
46
                );
47
              }
48
            }
49
          }
50
        }
51
      }
52
      if ( notUnique) {
53
        // Un message d'alerte apparait au dessus des boutons prévisualiser/valider
54
        if (0 === $('.invalid-field-key-bottom').length) {
55
          $('#new-fields').after(
56
            `<p class="message invalid-field-key-bottom">
57
              <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
58
               Une clé a été utilisée plusieurs fois
59
            </p>`
60
          );
61
        }
62
        // Les boutons prévisualiser/valider sont désactivés et signalés en rouge
63
        $('#preview-field, #validate-new-fields').addClass('invalid-key').css('pointer-events', 'none');
64
      } else {// Si on est ok on retire toutes les alertes
65
        // signalements rouges
66
        $('.field-key').each(function () {
67
          $(this).removeClass('invalid-key');
68
        });
69
        $('#preview-field, #validate-new-fields').removeClass('invalid-key');
70
        // messages d'alerte
71
        $('.invalid-field-key').each(function() {
72
          hideNRemove($(this));
73
        });
74
        hideNRemove($('.invalid-field-key-bottom'));
75
        //réactivation des boutons prévisualiser/valider
76
        $('#preview-field')[0].style.removeProperty('pointer-events');
77
        $('#validate-new-fields')[0].style.removeProperty('pointer-events')
78
      }
79
      // Réinitialisation
80
      notUnique = false;
81
    });
82
  }
83
};
84
 
85
// Classe "invalid"
86
export const missingValuesClass = () => {
87
  const $newFields = $('#new-fields');
88
 
89
  // Si au moins un champ "required" n'est pas rempli
90
  $('input[required]', $newFields).each(function () {
91
    const $inputValidationWarning = $(this).next('.validation-warning');
92
 
93
    if (0 === $(this).val().length) {
94
      // Le champ est signalé en rouge
95
      $(this).addClass('invalid');
96
      // Un message d'alerte apparait après le champ
97
      if (0 === $inputValidationWarning.length) {
98
        $(this).after(
99
          `<p class="validation-warning message">
100
            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
101
             &nbsp;Ce champ est requis
102
          </p>`
103
        );
104
      }
105
    } else {
106
      // Le champ est signalé en rouge
107
      $(this).removeClass('invalid');
108
      // Le message d'alerte du champ est supprimé
109
      if (0 < $inputValidationWarning.length) {
110
        hideNRemove($inputValidationWarning);
111
      }
112
    }
113
  });
114
  const $validationWarning = $newFields.next('.validation-warning'),
115
    $buttons = $('#preview-field , #validate-new-fields');
116
 
117
  // Si on a des champs à compléter
118
  if (0 < $('.invalid[type="text"]').length) {
119
    // Les boutons sont signalés en rouge
120
    $buttons.addClass('invalid');
121
    // Un message d'alerte apparait avant les boutons
122
    if (0 === $validationWarning.length) {
123
      $newFields.after(
124
        `<p class="validation-warning message">
125
          <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
126
           &nbsp;Des informations sont manquantes pour certains champs,
127
            vérifiez ceux signalés en rouge
128
        </p>`
129
      );
130
    }
131
  } else {
132
    // Les signalements et messages sont supprimés
133
    $buttons.removeClass('invalid');
134
    hideNRemove($validationWarning);
135
  }
136
};