Subversion Repositories eFlore/Applications.cel

Rev

Rev 3892 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3892 idir 1
import {inputFile} from './display.js';
2
import {findFieldset, showField, hideNRemove, replacer, valeurOk} from './utils.js';
3
import {newFieldsPreview} from './preview.js';
4
import {onChangeCheckKeyUnique, missingValuesClass} from './validation.js';
5
 
6
// Tableau d'envoi des données
7
const datasToSubmit = [],
8
  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)$)',
9
  isModification    = Array.isArray(CHAMPS_SUPP_JSON) && 0 < CHAMPS_SUPP_JSON.length;
10
 
11
/**
12
 * ChampsSupp
13
 */
14
export function ChampsSupp() {
15
  this.fieldIndex = -1;
16
}
17
 
18
ChampsSupp.prototype.init = function() {
19
  // Ajout de nouveaux champs
20
  $('#add-fields').on('click', this.onClickAddNewFields.bind(this));
21
  // Activation/Desactivation des boutons valider et prévisualiser
22
  this.onClickButtonsTagMissingValues();
23
  // Activer la checkbox de valeur par default uniquement si une valeur est entrée
24
  this.onInputListValueLabelEnableDefaultCheckbox();
25
  // Modifications
26
  this.onExtentedFieldsForModification();
27
};
28
 
29
/***********************************************************
30
 *  Fonctions pour la création des champs supplémentaires  *
31
 ***********************************************************/
32
 
33
// Logique globale pour l'ajout de nouveaux champs
34
ChampsSupp.prototype.onClickAddNewFields = function() {
35
  this.fieldIndex++;
36
  this.dataIdAttr = `data-id="${this.fieldIndex}"`;
37
  // Affichage du formulaire pour un champ
38
  this.displayNewField();
39
  // Affichage du nom du champ
40
  this.onChangeDisplayFieldLabel();
41
  // Empêcher de créer plus d'une fois la même clé
42
  onChangeCheckKeyUnique();
43
  // Affichage des images/nom des documents importés dans les champs ajoutés
44
  inputFile();
45
  // Recueil des informations correspondantes au nouveau champ
46
  this.onChangeFieldTypeCollectDetails();
47
  // Suppression d'un champ
48
  this.onClickRemoveField();
49
};
50
 
51
// Création/affichage du formulaire d'un nouveau champ
52
ChampsSupp.prototype.displayNewField = function() {
53
  const fieldsetHtml    = `<fieldset ${this.dataIdAttr} class="new-field"></fieldset>`,
54
    fieldsetHtmlContent =
55
      `<h3>Nouveau champ :<br><strong class="field-title" ${this.dataIdAttr}></strong></h3>
56
      <!-- Nom du champ -->
57
      <div class="row">
58
        <div class="col-sm-12 mt-3 mb-3">
59
          <label for="field-name" title="Donnez un titre à votre champ">Nom du champ *</label>
60
          <input type="text" name="field-name" ${this.dataIdAttr} class="field-name form-control" placeholder="Titre de votre champ" title="Le titre du champ" required>
61
        </div>
62
        <!-- Clé du champ -->
63
        <div class="col-sm-12 mt-3 mb-3">
64
          <label for="field-key" title="Nom du champ dans la base de données">
65
            Clé du champ *
66
          </label>
67
          <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>
68
        </div>
69
        <p class="message m-2">
70
          <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
71
          Une clé doit être unique<br>
72
          En "camelCase" (ecriture chameau)<br>
73
          Ou en minuscule avec tirets ("-") si nécessaire<br>
74
          Pas d’espaces, aucuns caractères spéciaux (accents, cédilles, etc.).
75
        </p>
76
        <!-- Type de champ -->
77
        <div class="col-sm-12 mt-3 mb-3 add-field-select" ${this.dataIdAttr}>
78
          <label for="field-element" title="Quel type de champ">Type de champ *</label>
79
          <select name="field-element" ${this.dataIdAttr} class="field-element form-control custom-select">
80
            <option value="text">Champ texte</option>
81
            <option value="email">Champ email</option>
82
            <option value="textarea">Champ rédaction</option>
83
            <option value="select">Menu déroulant</option>
84
            <option value="checkbox">Cases à cocher</option>
85
            <option value="list-checkbox">Liste de cases à cocher</option>
86
            <option value="radio">Boutons radio</option>
87
            <option value="date">Calendrier</option>
88
            <option value="range">Curseur (entre 2 bornes)</option>
89
            <option value="number">Nombre</option>
90
          </select>
91
        </div>
92
        <!-- Checkbox "champ requis" -->
93
        <div class="col-sm-12 radio mt-3 mb-3">
94
          <label class="radio-label" for="field-is_mandatory" title="Ce champ est obligatoire">
95
            <input type="checkbox" name="field-is_mandatory" ${this.dataIdAttr} class="field-is_mandatory form-control">
96
            Champ requis ?
97
          </label>
98
        </div>
99
        <!-- Unité des valeurs -->
100
        <div class="col-sm-12 mt-3 mb-3">
101
          <label for="field-unit" title="Unité de mesure de vos valeurs">Unités (cm, kg, ha, etc.)</label>
102
          <input type="text" name="field-unit" ${this.dataIdAttr} class="field-unit form-control" placeholder="symbole de vos unités">
103
        </div>
104
        <!-- Tooltip -->
105
        <div class="col-sm-12 mt-3 mb-3">
106
          <label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>
107
          <input type="text" name="field-description" ${this.dataIdAttr} class="field-description form-control" placeholder="Quelques mots">
108
        </div>
109
        <!-- Import d'une image d'aide à afficher en popup -->
110
        <div class="input-file-row row">
111
          <div class="input-file-container col-sm-10">
112
            <input type="file" class="input-file field-help" name="field-help${this.fieldIndex}" ${this.dataIdAttr} id="help-doc-${this.fieldIndex}" accept="image/*">
113
            <label for="field-help${this.fieldIndex}" class="label-file"><i class="fas fa-download"></i> Popup aide image (.jpg)</label>
114
          </div>
115
          <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>
116
          <div class="file-return help-doc-${this.fieldIndex} hidden"></div>
117
        </div>
118
        <!-- Boutons supprimer -->
119
        <div class="col-sm-12 mt-3 mb-3">
120
          <label for="remove-field">Supprimer</label>
121
          <div class="remove-field button" name="remove-field" ${this.dataIdAttr} title="Supprimer un champ"><i class="fa fa-skull" aria-hidden="true"></i></div>
122
        </div>
123
        <input type="hidden" name="field-is_visible" class="field-is_visible" ${this.dataIdAttr} value="1">
124
      </div>`;
125
 
126
  $('#new-fields').append(fieldsetHtml);
127
 
128
  const $fieldset = findFieldset(this.fieldIndex);
129
 
130
  // Insertion du contenu html du formulaire du nouveaux champs inséré dans le dom
131
  $fieldset.append(fieldsetHtmlContent);
132
  // Animation de l'affichage
133
  if (!isModification) {
134
    showField($fieldset);
135
    $('html, body').stop().animate({
136
      scrollTop: $fieldset.offset().top
137
    }, 300);
138
  }
139
  this.$fieldset = $fieldset;
140
};
141
 
142
// Affichage du nom du champ dès qu'il est renseigné
143
ChampsSupp.prototype.onChangeDisplayFieldLabel = function() {
144
  const $fieldset = this.$fieldset;
145
 
146
  $('.field-name', $fieldset).on('change', function () {
147
    $('.field-title', $fieldset).text($(this).val());
148
  });
149
};
150
 
151
// Supprimer un nouveau champ
152
ChampsSupp.prototype.onClickRemoveField = function() {
153
  $('.remove-field').click(function () {
154
    const $fieldset = $(this).closest('fieldset'),
155
      fieldIndex = $fieldset.data('id');
156
 
157
    $fieldset.hide(200, function () {
158
      if (!CHAMPS_SUPP_JSON[fieldIndex]) {
159
        $fieldset.remove();
160
      } else {
161
        if (0 === $('#info-suppression-champs-supp').length) {
162
          $('#infos-validation-boutons').after(
163
            `<p id="info-suppression-champs-supp" class="message invalid">
164
              <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
165
              vous avez supprimé un ou plusieurs champs supplémentaires ici<br>
166
              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.
167
            </p>`
168
          );
169
        }
170
        $('.field-is_visible', $fieldset).val(0);
171
      }
172
    });
173
  });
174
};
175
 
176
/**** Recueil des informations et détails qui dépendent du type de champ choisi ****/
177
 
178
// Logique de recueil d'informations en fonction du type de champ choisi
179
ChampsSupp.prototype.onChangeFieldTypeCollectDetails = function() {
180
  const lthis = this,
181
    placeholderFieldHtml =
182
      `<div class="col-sm-12  mt-3">
183
        <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>
184
        <input type="text" name="aide-saisie" ${this.dataIdAttr} class="aide-saisie form-control" placeholder="Ce que doit contenir ce champ">
185
      </div>`,
186
    $element = $('.field-element', this.$fieldset);
187
 
188
  // On insère les champs par défaut de recueil d'informations
189
  this.displayFieldDetailsCollect(placeholderFieldHtml);
190
  // Sinon :
191
  $element.on('change', function() {
192
    const selectedItem = this.value;
193
    // On intialise l'index pour les listes la variable qui contiendra un id pour chaque option
194
    let valueIndex = 0,
195
      fieldDetails = placeholderFieldHtml;
196
 
197
    // Si on hésite on qu'on se trompe dans la liste :
198
    // les champs de détails de l'option précédente doivent être supprimés
199
    hideNRemove($('.field-details', lthis.$fieldset));
200
    // Html de recueil de données en fonction de l'élément choisi
201
    switch(selectedItem) {
202
      case 'range':
203
      case 'number':
204
        fieldDetails =
205
          `<p class="message">
206
            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
207
            Ne pas oublier de prévisualiser !!<br>
208
            Vérifier le bon fonctionnement et changer, si nécessaire, les valeurs de défaut, incrémentation (step), min et max.<br>
209
            Si le navigateur considère que certaines valeurs sont incohérentes il pourrait les modifier automatiquement
210
          </p>
211
          <!-- Placeholder -->
212
          ${placeholderFieldHtml}
213
          <!-- Valeur par défaut -->
214
          <div class="col-sm-12  mt-3">
215
            <label for="default" title="Valeur par défaut">Valeur par défaut</label>
216
            <input type="number" name="default" ${lthis.dataIdAttr} class="default form-control" step="0.01" lang="en">
217
          </div>
218
          <!-- Incrémentation ( attribut step="" ) -->
219
          <div class="col-sm-12  mt-3">
220
            <label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step)</label>
221
            <input type="number" name="step" ${lthis.dataIdAttr} class="step form-control" step="0.01" value="1" lang="en">
222
          </div>
223
          <!-- Min -->
224
          <div class="col-sm-12  mt-3">
225
            <label for="min" title="valeur min">Valeur minimale</label>
226
            <input type="number" name="min" ${lthis.dataIdAttr} class="min form-control" step="0.01" value="0" lang="en">
227
          </div>
228
          <!-- Max -->
229
          <div class="col-sm-12  mt-3">
230
            <label for="max" title="valeur max">Valeur maximale</label>
231
            <input type="number" name="max" ${lthis.dataIdAttr} class="max form-control" step="0.01" value="1" lang="en">
232
          </div>`;
233
        break;
234
 
235
      case 'date':
236
        fieldDetails =
237
          `<!-- Date min -->
238
          <div class="col-sm-12 mt-3">
239
            <label for="min" title="date min">Date minimale</label>
240
            <input type="date" name="min" ${lthis.dataIdAttr} class="min form-control" pattern="${datePattern}" title="jj/mm/aaaa">
241
          </div>
242
          <!-- Date max -->
243
          <div class="col-sm-12 mt-3">
244
            <label for="max" title="date max">Date maximale</label>
245
            <input type="date" name="max" ${lthis.dataIdAttr} class="max form-control" pattern="${datePattern}" title="jj/mm/aaaa">
246
          </div>`;
247
        break;
248
 
249
      case 'select':
250
      case 'checkbox':
251
      case 'list-checkbox':
252
      case 'radio':
253
        const mayHavePlaceholder = ['select', 'list-checkbox'].includes(selectedItem);
254
        let additionnalMessage = '',
255
          required             = 'required',
256
          asterisk             = ' *';
257
 
258
        if (mayHavePlaceholder) {
259
          additionnalMessage =
260
            `<br><i class="fas fa-info-circle" style="color:#009fb8"></i>
261
            Si aucune valeur n’est indiquée pour la première option,
262
            <br>celle-ci servira de placeholder (indication affichée dans le champ),
263
            <br>et n’apparaitra pas dans les options à choisir/cocher.
264
            <br><i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
265
            Dans ce cas il est impossible de choisir une "valeur par defaut"`;
266
          required = '';
267
          asterisk = '';
268
        }
269
 
270
        fieldDetails =
271
          `<p class="message element-message">
272
            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
273
            Entrez au moins une valeur de ${$element.children('option:selected').text()}
274
            <br>Si aucun label à afficher n’est indiqué, la valeur entrée sera utilisée (première lettre en majuscule).
275
            ${additionnalMessage}
276
          </p>
277
          <!-- Première option -->
278
          <div class="new-value center-block row" data-list-value-id="${valueIndex}">
279
            <!-- Recueil d'une valeur de la liste -->
280
            <div class="col-sm-12 mt-3">
281
              <label for="list-value">Valeur${asterisk}</label>
282
              <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}>
283
            </div>
284
            <!-- Recueil du label à afficher -->
285
            <div class="col-sm-12 mt-3">
286
              <label for="displayed-label">Label</label>
287
              <input type="text" name="displayed-label" ${lthis.dataIdAttr} class="displayed-label form-control" data-list-value-id="${valueIndex}" placeholder="Label à afficher">
288
            </div>
289
            <!-- Checkbox valeur par défaut -->
290
            <div class="col-sm-12 radio mt-3">
291
              <label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label">
292
                <input type="checkbox" name="is-defaut-value" ${lthis.dataIdAttr} class="is-defaut-value" checked="checked" data-list-value-id="${valueIndex}" disabled >
293
                Valeur par défaut
294
              </label>
295
            </div>
296
          </div>
297
          <!-- Bouton ajout d'une valeur à la liste -->
298
          <div class="col-sm-12 mt-3 add-value-container" ${lthis.dataIdAttr}>
299
            <label for="add-value" class="add-value" ${lthis.dataIdAttr} title="Ajouter une valeur à la liste">Ajouter une valeur</label>
300
            <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>
301
          </div>
302
          <!-- checkbox ajouter une valeur "Autre:" -->
303
          <div class="col-sm-12 radio mt-3">
304
            <label for="option-other-value" title="Ajouter une option \"Autre:\" à la fin" class="radio-label">
305
              <input type="checkbox" name="option-other-value" ${lthis.dataIdAttr} class="option-other-value" title="Ajouter une option \"Autre\" à la fin">
306
              Valeur "Autre"
307
            </label>
308
          </div>`;
309
        break;
310
 
311
      // case 'email':
312
      // case 'text':
313
      // case 'textarea':
314
      default:
315
        break;
316
    }
317
    lthis.displayFieldDetailsCollect(fieldDetails);
318
    // Ajout des valeurs possibles
319
    // lorsque le champ est une liste ou case à cocher
320
    lthis.onClickAddNewValueToList(valueIndex);
321
  });
322
};
323
 
324
// Insertion dans le dom des champs de recueil d'informations
325
ChampsSupp.prototype.displayFieldDetailsCollect = function(fieldDetails) {
326
  const $detailsCollect = $('.add-field-select', this.$fieldset);
327
 
328
  $detailsCollect.after(`<div class="field-details col-sm-11 mt-3 row" ${this.dataIdAttr}>${fieldDetails}</div>`);
329
  showField($detailsCollect);
330
};
331
 
332
/**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/
333
 
334
// Ajout des options des listes (deroulantes, cases à cocher etc.)
335
ChampsSupp.prototype.onClickAddNewValueToList = function(valueIndex) {
336
  const lthis = this,
337
    $addValueContainer = $('.add-value-container', this.$fieldset);
338
 
339
  $('.add-value-button', this.$fieldset).click(function() {
340
    valueIndex++;
341
    $addValueContainer.before(
342
      `<div class="new-value center-block row" data-list-value-id="${valueIndex}">
343
        <!-- Recueil d'une valeur de la liste -->
344
        <div class="col-sm-12 mt-3">
345
          <label for="list-value">Valeur *</label>
346
          <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>
347
        </div>
348
        <!-- Recueil du label à afficher -->
349
        <div class="col-sm-12 mt-3">
350
          <label for="displayed-label">Label</label>
351
          <input type="text" name="displayed-label" ${lthis.dataIdAttr} class="displayed-label form-control" data-list-value-id="${valueIndex}" placeholder="Label à afficher">
352
        </div>
353
        <!-- Checkbox valeur par défaut+bouton supprimer -->
354
        <div class="col-sm-12 mt-3 row">
355
          <!-- Bouton supprimer une option -->
356
          <div class="col-sm-5">
357
            <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>
358
          </div>
359
          <!-- Valeur par défaut -->
360
          <div class="col-sm-7 radio">
361
            <label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label">
362
              <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 >
363
              Valeur défaut
364
            </label>
365
          </div>
366
        </div>
367
      </div>`
368
    );
369
    showField($addValueContainer);
370
    // Une seule valeur par défaut pour select et radio
371
    lthis.onClickDefaultValueRemoveOthers();
372
    // Supprimer une valeur
373
    lthis.onClickRemoveListValue();
374
  });
375
};
376
 
377
// Activer la checkbox de valeur par default uniquement si une valeur est entrée
378
ChampsSupp.prototype.onInputListValueLabelEnableDefaultCheckbox = function() {
379
  $('#new-fields').on('input blur', '.list-value', function () {
380
    const $fieldset = findFieldset($(this).data('id')),
381
      $firstDefautValue = $('.is-defaut-value', $fieldset).first();
382
 
383
      if ('' === $('.list-value', $fieldset).first().val()) {
384
        $('.is-defaut-value', $fieldset).attr('disabled', true).removeAttr('checked');
385
        $firstDefautValue.attr('checked', true).prop('checked',true);
386
 
387
      } else {
388
        $('.is-defaut-value', $fieldset).each(function () {
389
          const $thisListValue = $(`.list-value[data-list-value-id=${$(this).data('list-value-id')}]`, $fieldset);
390
 
391
          if ('' !== $thisListValue.val()) {
392
            $(this).removeAttr('disabled');
393
          } else {
394
            $(this).attr('disabled', true).removeAttr('checked');
395
          }
396
        });
397
      }
398
  });
399
};
400
 
401
// Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée
402
ChampsSupp.prototype.onClickDefaultValueRemoveOthers = function() {
403
  const lthis = this,
404
    selectedFieldElement = $('.field-element', this.$fieldset).val();
405
 
406
  if (selectedFieldElement === 'select' || selectedFieldElement === 'radio') {
407
    $('.is-defaut-value', this.$fieldset).click(function () {
408
     if ($(this).is(':checked')) {
409
        // Décocher tous les autres
410
        $('.is-defaut-value:checked', lthis.$fieldset).not($(this)).removeAttr('checked');
411
      }
412
    });
413
  }
414
};
415
 
416
// Bouton supprimer une valeur
417
ChampsSupp.prototype.onClickRemoveListValue = function() {
418
  $('.remove-value.button', this.$fieldset).off('click').on('click', function () {
419
    hideNRemove($('.new-value[data-list-value-id='+$(this).data('list-value-id')+']'));
420
  });
421
};
422
 
423
/**** Envoi des nouveaux champs ****/
424
 
425
// Enregistrement des valeurs à transmettre
426
ChampsSupp.prototype.onClickStoreNewFields = function() {
3893 idir 427
  const count     = $('fieldset').last().data('id'),
428
    $submitButton = $('#submit-button');
3892 idir 429
  // Lorsqu'on valide
430
  let resultArrayIndex = 0,
431
    newHelpFileExists  = false;
432
 
433
  // Savoir si au moins un fichier "aide" est enregistré
434
  $('.field-help').each(function () {
435
    if ('' !== $(this).val()){
436
      newHelpFileExists = true;
437
    }
438
  })
439
  // dans ce cas intégrer dans le formulaire à soumettre un bloc
440
  // qui contiendra une copie de chacun de ces input[type="file"]
441
  if (newHelpFileExists){
3893 idir 442
    $submitButton.before('<div id="help-doc-submit" style="position:fixed;visibility:hidden;"></div>');
3892 idir 443
  }
444
 
445
  let $thisFieldset = $('fieldset').first(),
446
    valueForIsVisible,
447
    $inputFile,
448
    uploadedHelpFiles;
449
 
450
  // On déroule les blocs de champs supplémentaires
451
  for(let index = $thisFieldset.data('id'); index <= count; index++) {
452
    $thisFieldset = findFieldset(index);
453
    valueForIsVisible = $('.field-is_visible', $thisFieldset).val();
454
    // Certains indices peuvent correspondre à un champ supprimé
455
    if (0 < $($thisFieldset).length) {
456
      if (0 === parseInt(valueForIsVisible)) {
457
        datasToSubmit[resultArrayIndex] = CHAMPS_SUPP_JSON[resultArrayIndex];
458
      } else {
459
        // initialisation du tableau de résultats
460
        datasToSubmit[resultArrayIndex]             = {fieldValues:{}};
461
        $.each(['key','name','element','unit','description'], (i, fieldName) => datasToSubmit[resultArrayIndex][fieldName] = $('.field-'+fieldName, $thisFieldset).val() || null);
462
        // Ajout de la valeur 'requis' ou non au tableau de resultats
463
        datasToSubmit[resultArrayIndex].mandatory   = $('.field-is_mandatory', $thisFieldset).is(':checked');
464
        // Collecte les des données dépendantes de l'élément choisi
465
        // sous forme d'un tableau de resultats
466
        this.onSelectCollectDataValuesToSubmit(datasToSubmit[resultArrayIndex], $thisFieldset);
467
 
468
        if ($.isEmptyObject(datasToSubmit[resultArrayIndex].fieldValues)){
469
          delete datasToSubmit[resultArrayIndex].fieldValues;
470
        }
471
        // Copie d'un champ de fichier d'aide dans le bloc d'envoi
472
        $inputFile = $('.field-help', $thisFieldset);
473
        uploadedHelpFiles = $inputFile.get(0).files;
474
        if (0 < uploadedHelpFiles.length) {
475
          // Présence d'un document d'aide
476
          datasToSubmit[resultArrayIndex].help = uploadedHelpFiles[0].type;
477
          $inputFile.clone()
478
            .attr('name', 'help-'+datasToSubmit[resultArrayIndex].key)// l'attribut name prend la valeur de la clé
479
            .appendTo('#help-doc-submit');
480
        // si un fichier d'aide était déjà présent et que l'utilisateur ne le supprime pas on réinjecte le type mime
481
        // ce qui indique la présence d'un fichier d'aide lors de l'affichage du widget de saisie
482
        } else if (!!CHAMPS_SUPP_JSON[resultArrayIndex] && !!CHAMPS_SUPP_JSON[resultArrayIndex]['help'] && !$('.file-return', $thisFieldset).hasClass('hidden')) {
483
          datasToSubmit[resultArrayIndex].help = CHAMPS_SUPP_JSON[resultArrayIndex]['help'];
484
 
485
        } else {
486
          datasToSubmit[resultArrayIndex].help = null;
487
        }
488
        datasToSubmit[resultArrayIndex].is_visible = valueForIsVisible;
489
        resultArrayIndex++;
490
      }
491
    }
492
  }
493
 
494
  const resultsArrayJson = JSON.stringify(datasToSubmit, replacer);
495
 
496
  console.log(resultsArrayJson);
497
 
498
  // Désactivation de tous les champs et boutons (nouveaux champs)
499
  $('#new-fields, #new-fields .button, #add-fields, #preview-field').addClass('disabled');
500
  $('#validate-new-fields').addClass('validated');
501
  $('.validate-new-fields').text('Champs validés');
502
  // Mise à disposition des données pour le bouron submit
3893 idir 503
  $submitButton.before('<input type="hidden" name="champs-supp" id="champs-supp">');
504
  $('#champs-supp').val(resultsArrayJson);
3892 idir 505
  // suppression du message d'alerte validations des champs supprimés en mode modification
506
  $('#info-suppression-champs-supp').remove();
507
};
508
 
509
// Renseigne le tableau de resultat
510
// pour les données dépendant de l'élément choisi
511
ChampsSupp.prototype.onSelectCollectDataValuesToSubmit = function(datasToSubmitObject, $thisFieldset) {
512
  switch(datasToSubmitObject.element) {
513
    case 'select':
514
    case 'checkbox':
515
    case 'list-checkbox':
516
    case 'radio':
517
      datasToSubmitObject.fieldValues.listValue = [];
518
      // Ajout des valeurs de liste
519
      this.onChangeStoreListValueLabel(datasToSubmitObject, $thisFieldset);
520
      // S'il y a une valeur 'autre' on l'indique à la fin de la liste
521
      if ($('.option-other-value', $thisFieldset).is(':checked') && -1 === datasToSubmitObject.fieldValues.listValue.indexOf('other')) {
522
        datasToSubmitObject.fieldValues.listValue.push('other');
523
      }
524
      break;
525
 
526
    case 'number':
527
    case 'range':
528
      // Placeholder
529
      datasToSubmitObject.fieldValues.placeholder = $('.aide-saisie', $thisFieldset).val() || null;
530
      // Valeur par défaut
531
      datasToSubmitObject.fieldValues.default = $('.default', $thisFieldset).val() || null;
532
      // Incrémentation ( attribut step="" )
533
       datasToSubmitObject.fieldValues.step = $('.step', $thisFieldset).val() || null;
534
 
535
    case 'date':
536
      // Min
537
      datasToSubmitObject.fieldValues.min = $('.min', $thisFieldset).val() || null;
538
      // Max
539
      datasToSubmitObject.fieldValues.max = $('.max', $thisFieldset).val() || null;
540
      break;
541
 
542
    case 'email':
543
    case 'text':
544
    case 'textarea':
545
    default:
546
      // Placeholder
547
      datasToSubmitObject.fieldValues.placeholder = $('.aide-saisie', $thisFieldset).val() || null;
548
      break;
549
  }
550
  return datasToSubmitObject;
551
};
552
 
553
// Ajout d'une valeur d'un élément liste (select, checkbox etc.)
554
// dans le tableau de resultats
555
ChampsSupp.prototype.onChangeStoreListValueLabel = function(datasToSubmitObject, $thisFieldset) {
556
  const $listValues = $('.list-value', $thisFieldset),
557
    hasPlaceholder = !valeurOk($listValues.first().val());
558
 
559
  $('.list-value', $thisFieldset).each(function (i) {
560
    const valueId          = $(this).data('list-value-id'),
561
      $displayedLabel      = $(`.displayed-label[data-list-value-id=${valueId}]`, $thisFieldset),
562
      hasDisplayedLabel    = valeurOk($displayedLabel.val());
563
    let displayedLabel = hasDisplayedLabel ? $displayedLabel.val() : '';
564
 
565
    if ($(this).val()){
566
      // Is-default-value non cochée
567
      if (!$(`.is-defaut-value[data-list-value-id="${valueId}"]`, $thisFieldset).is(':checked')) {
568
        datasToSubmitObject.fieldValues.listValue.push([$(this).val(), displayedLabel]);
569
      // Is-default-value cochée pour select/radio
570
      } else if (['select', 'radio'].include($('.field-element', $thisFieldset).val())) {
571
        // Une seule valeur par defaut, devient la première valeur du tableau+'#'
572
        datasToSubmitObject.fieldValues.listValue.unshift([$(this).val()+'#', displayedLabel]);
573
      // Is-default-value cochée pour checkbox/list-checkbox
574
      } else {
575
        // On ajoute simplement la valeur au tableau+'#'
576
        datasToSubmitObject.fieldValues.listValue.push([$(this).val()+'#', displayedLabel]);
577
      }
578
    } else if (0 === i) {// deviendra un placeholder
579
      displayedLabel = hasDisplayedLabel ? $displayedLabel.val() : '...Choisir...';
580
      datasToSubmitObject.fieldValues.listValue.push([null, displayedLabel]);
581
    }
582
  });
583
};
584
 
585
/*********************************************************
586
 *  Modification des champs supp sur un Widget existant  *
587
 *********************************************************/
588
 
589
ChampsSupp.prototype.onExtentedFieldsForModification = function() {
590
  if (!$('#type').val() && isModification) {
591
    $.each(CHAMPS_SUPP_JSON, this.fillFieldsForModification);
592
  }
593
};
594
 
595
ChampsSupp.prototype.fillFieldsForModification = function(index, extendedFieldValues) {
596
  $('#add-fields').click();
597
 
598
  const fieldValues = extendedFieldValues.fieldValues,
599
    $fieldset       = findFieldset(index),
600
    textFields      = [
601
      'name',
602
      'key',
603
      'unit',
604
      'description'
605
    ],
606
    fieldsetKeys    = textFields.concat([
607
      'is_visible',
608
      'is_mandatory',
609
      'element'
610
    ]),
611
    extendedFields  = {};
612
 
613
  $.each(fieldsetKeys, (i, fieldName) => extendedFields[fieldName] = $('.field-'+fieldName, $fieldset));
614
  extendedFields.is_visible.val(extendedFieldValues.is_visible);
615
  if (!extendedFieldValues.is_visible) {
616
    $fieldset.hide();
617
  }
618
 
619
  const selectedOption = $(`option[value=${extendedFieldValues.element}]`, extendedFields.element);
620
 
621
  $.each(textFields, (i, fieldName) => extendedFields[fieldName].val(extendedFieldValues[fieldName]));
622
 
623
  const isMandatory = 1 === extendedFieldValues.mandatory;
624
 
625
  extendedFields.key.attr('disabled', true);
626
  extendedFields.name.change();
627
  extendedFields.is_mandatory.attr('checked', isMandatory).prop('checked', isMandatory);
628
 
629
  selectedOption.attr('selected','selected');
630
  selectedOption.change();
631
  if (!!extendedFieldValues.help) {
632
    const fileExtension = 'png' === extendedFieldValues.help.replace('image/','').toLowerCase() ? '.png' : '.jpg',
633
      fileName          = extendedFieldValues.key+fileExtension;
634
 
635
    $('.file-return', $fieldset).append(`${fileName}<img src="${URLS_IMAGES+fileName}" width="50%">`).removeClass('hidden');
636
  }
637
  switch(extendedFieldValues.element) {
638
    case 'select':
639
    case 'checkbox':
640
    case 'list-checkbox':
641
    case 'radio':
642
      const listValues = fieldValues.listValue;
643
      let $listValueBlock;
644
 
645
      if ('other' === listValues.slice(-1)[0]) {
646
        $('.option-other-value', $fieldset).attr('checked', true).prop('checked', true);
647
        listValues.pop();
648
      }
649
 
650
      $.each(listValues, (i, listValue) => {
651
        $listValueBlock = $(`.new-value[data-list-value-id=${i}]`, $fieldset);
652
        if(valeurOk(listValue[0])) {
653
          if ('#' === listValue[0].slice(-1)) {
654
            listValue[0] = listValue[0].slice(0,-1);
655
            $('.is-defaut-value', $listValueBlock).attr('checked', true).prop('checked', true);
656
          }
657
          $('.list-value', $listValueBlock).val(listValue[0]);
658
        }
659
        if(valeurOk(listValue[1])) {
660
          $('.displayed-label', $listValueBlock).val(listValue[1]);
661
        }
662
        $('.list-value', $listValueBlock).trigger('input');
663
        if (1 < listValues.length - i) {
664
          $('.add-value-button', $fieldset).click();
665
        }
666
      });
667
      break;
668
 
669
    case 'number':
670
    case 'range':
671
    case 'date':
672
    case 'email':
673
    case 'text':
674
    case 'textarea':
675
    default:
676
      const specificationKeys = ['placeholder', 'default', 'step', 'min', 'max'];
677
      let classAttr;
678
 
679
      $.each(specificationKeys, (i, key) => {
680
        classAttr = key === 'placeholder' ? 'aide-saisie' : key;
681
        if (fieldValues[key] !== undefined) {
682
          $('.'+classAttr, $fieldset).val(fieldValues[key]);
683
        }
684
      });
685
      break;
686
  }
687
};
688
 
689
/*********************************
690
 *  Enregistrer / prévisualiser  *
691
 *********************************/
692
 
693
// Activation/desactivation des champs valider/previsualiser
694
ChampsSupp.prototype.onClickButtonsTagMissingValues = function() {
695
  const lthis = this
696
  $('#preview-field, #validate-new-fields').on('click', function () {
697
    const $button = $(this);
698
    //S'il n'y a pas (plus) de bloc nouveau champ
699
    if (0 === $('fieldset').length) {
700
      return;
701
    }
702
    // Classe "invalid"
703
    missingValuesClass();
704
    if (!$(this).hasClass('invalid')) {
705
      if ($(this).is('#validate-new-fields')) {
706
        // Lancement de l'enregistrement des valeurs à transmettre
707
        lthis.onClickStoreNewFields();
708
      } else if ($(this).is('#preview-field')) {
709
        // Lancement de la prévisualisation
710
        newFieldsPreview();
711
      }
712
    }
713
  });
714
  // Si un champ manquant est renseigné
715
  // ou on choisit nouvel élément liste (au moins une option)
716
  // Cette action doit être prise en compte dans la validation
717
  $('#new-fields').on('change', '.invalid[type="text"], .field-element', function () {
718
    // S'il on a pas encore cliqué sur prévisualiser/valider
719
    // changer l'élément ne doit pas déclancher le signalement en rouge
720
    if ($(this).is('.field-element') && !$('#preview-field, #validate-new-fields').hasClass('invalid')) {
721
      return;
722
    } else {
723
      // Classe "invalid"
724
      missingValuesClass();
725
    }
726
  });
727
};