formulaire.ctp 19.1 KB
Newer Older
1 2 3 4 5 6 7 8 9
<!-- Onglet Formulaire -->
<?php
echo $this->Html->script([
    'smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min',
    'smalot-bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.fr.js'
]);
echo $this->Html->css('/js/smalot-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min');

$calendrier = [];
10 11
$conditions = [];

12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
$col = 1;
$line = 1;
?>

<!-- Champs du formulaire -->
<div class="col-md-6">
    <?php
    foreach ($champs as $value) {
    if ($value['Champ']['colonne'] > $col) {
    ?>
</div>

<div class="col-md-6">
    <?php
    $line = 1;
    $col++;
    }

    if ($value['Champ']['ligne'] > $line) {
        for ($i = $line; $i < $value['Champ']['ligne']; $i++) {
            ?>
            <div class="row row35"></div>
            <?php
        }
        $line = $value['Champ']['ligne'];
    }

    $options = json_decode($value['Champ']['details'], true);
40

41 42 43 44
    if (isset($options['conditions']) && !empty($options['conditions'])) {
        $fieldConditions = json_decode($options['conditions'], true);
        $conditions = array_merge($conditions, $fieldConditions);
    }
45 46 47 48 49

    $required = $options['obligatoire'];
    if (isset($fieldsIsRequired) && $fieldsIsRequired === false) {
        $required = false;
    }
50 51 52 53 54 55 56 57
    ?>

    <div class="row row35">
        <div class="col-md-12">
            <?php
            switch ($value['Champ']['type']) {
                // Petit champ texte
                case 'input':
58
                    echo $this->WebcilForm->input('WebdpoFiche.'.$options['name'], [
59 60 61 62 63
                        'id' => $options['name'],
                        'label' => [
                            'text' => $options['label'],
                            'class' => 'col-md-4'
                        ],
64
                        'required' => $required,
65 66 67 68 69 70
                        'placeholder' => $options['placeholder']
                    ]);
                    break;

                // Grand champ texte
                case 'textarea':
71
                    echo $this->WebcilForm->input('WebdpoFiche.'.$options['name'], [
72 73 74 75 76 77
                        'id' => $options['name'],
                        'label' => [
                            'text' => $options['label'],
                            'class' => 'col-md-4'
                        ],
                        'type' => 'textarea',
78
                        'required' => $required,
79 80 81 82 83 84
                        'placeholder' => $options['placeholder']
                    ]);
                    break;

                // Champ date
                case 'date':
85
                    echo $this->WebcilForm->input('WebdpoFiche.'.$options['name'], [
86 87 88 89 90
                        'id' => $options['name'],
                        'label' => [
                            'text' => $options['label'],
                            'class' => 'col-md-4'
                        ],
91
                        'class' => 'form-control calendar',
92
                        'required' => $required,
93 94 95 96 97 98 99 100 101
                        'placeholder' => $options['placeholder']
                    ]);
                    $calendrier[] = $options['name'];
                    break;

                // Titre de catégorie
                case 'title':
                    ?>
                    <div class="col-md-12 text-center">
102
                        <h1 style="overflow-wrap: anywhere;">
103 104 105 106 107 108 109 110 111
                            <?php echo $options['content']; ?>
                        </h1>
                    </div>
                    <?php
                    break;

                // Label
                case 'texte':
                    echo '<div class="form-group">'
112
                        . '<h5 style="overflow-wrap: anywhere;">' . $options['content'] . '</h5>'
113 114 115 116 117 118 119 120 121 122
                        . '</div>';
                    break;

                // Champ d'information
                case 'help':
                    ?>
                    <div class="col-md-12 alert alert-info text-center">
                        <div class="col-md-12">
                            <i class="fa fa-fw fa-info-circle fa-2x"><!----></i>
                        </div>
123
                        <div class="col-md-12" style="overflow-wrap: anywhere;">
124 125 126 127 128 129 130 131
                            <?php echo $options['content']; ?>
                        </div>
                    </div>
                    <?php
                    break;

                // Cases à cocher
                case 'checkboxes':
132
                    echo $this->WebcilForm->input('WebdpoFiche.'.$options['name'], [
133 134 135 136 137
                        'id' => $options['name'],
                        'label' => [
                            'text' => $options['label'],
                            'class' => 'col-md-4'
                        ],
138
                        'required' => $required,
139 140 141 142 143 144 145 146 147
                        'multiple' => 'checkbox',
                        'class' => 'checkbox',
                        'options' => $options['options'],
                        'div' => "input select"
                    ]);
                    break;

                // Menu déroulant
                case 'deroulant':
148
                    echo $this->WebcilForm->input('WebdpoFiche.'.$options['name'], [
149 150 151 152 153 154
                        'id' => $options['name'],
                        'label' => [
                            'text' => $options['label'],
                            'class' => 'col-md-4'
                        ],
                        'options' => $options['options'],
155
                        'required' => $required,
156
                        'class' => 'transformSelect form-control',
157 158 159 160 161 162 163 164
                        'empty' => true,
                        'placeholder' => false,
                        'data-placeholder' => ' '
                    ]);
                    break;

                // Menu multi-select
                case 'multi-select':
165
                    echo $this->WebcilForm->input('WebdpoFiche.'.$options['name'], [
166 167 168 169 170 171 172
                        'id' => $options['name'],
                        'options' => $options['options'],
                        'class' => 'form-group multiSelect',
                        'label' => [
                            'text' => $options['label'],
                            'class' => 'col-md-4'
                        ],
173
                        'required' => $required,
174 175 176 177 178 179 180 181
                        'between' => '<div class="col-md-8">',
                        'after' => '</div>',
                        'multiple' => 'multiple'
                    ]);
                    break;

                // Choix unique
                case 'radios':
182
                    $fieldName = 'WebdpoFiche.'.$options['name'];
183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
                    if (false === strpos($fieldName, '.')) {
                        $modelName = Inflector::classify($this->request->params['controller']);
                    } else {
                        list($modelName, $fieldName) = explode('.', $fieldName);
                    }
                    ?>
                    <div class="form-group">
                        <div class="col-md-4">
                            <label>
                                <span class="labeler">
                                    <?php echo $options['label'];?>
                                </span>
                                <?php if ($options['obligatoire']): echo '<span class="requis">*</span>'; endif;?>
                            </label>
                        </div>
                        <div class="col-md-8" <?php if ($options['obligatoire']): echo 'required="required"'; endif;?>>
                            <input type="hidden" id="<?php echo $options['name']; ?>" name="data[<?php echo $modelName;?>][<?php echo $fieldName;?>]" value="" />
                            <?php
                            foreach ($options['options'] as $key => $val) {
                                $checked = $val == $this->request->data("{$modelName}.{$fieldName}") ? ' checked="checked"' : '';
                                echo '<div class="radio">
                                    <input type="radio" id="'.$options['name'].$key.'" name="data['.$modelName.']['.$fieldName.']" value="'.$val.'" '.$checked.'>
205
                                    <label for="'.$options['name'].$key.'">'.$val.'</label>
206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225
                                </div>';
                            }
                            ?>
                        </div>
                        <?php echo $this->WebcilForm->error("{$modelName}.{$fieldName}");?>
                    </div>
                    <?php
                    break;
            }
            $line++;
            ?>
        </div>
    </div>
    <?php
    }
    ?>
</div>
<!-- Fin onglet Formulaire -->

<script type="text/javascript">
226

227 228 229 230 231 232 233 234 235 236 237 238 239 240 241
    $(document).ready(function () {

        $('.multiSelect').select2({
            placeholder: 'Sélectionnez une ou plusieurs options',
            allowClear: true,
            width: '100%'
        });

        //--------------------------------------------------------------------------------------------------------------
        /**
         * Si le champ n'est pas affiché au départ (dans le second onglet), la largeur correcte n'est pas calculée, il
         * faut donc la recalculer au changement d'onglet.
         *
         * @see Search.prototype.resizeSearch
         */
242
        let fixSelect2SearchFieldWidth = function() {
243
            $('.select2.select2-container').each(function(idx, container) {
244
                let field = $(container).find('.select2-search__field');
245 246 247 248 249 250 251 252 253 254
                if (field && $(field).attr('placeholder') !== '') {
                    $(field).width($(container).width());
                }
            });
        };

        /**
         * Lorsque la classe d'un tab-pane change, on exécute la fonction fixSelect2SearchFieldWidth
         * @see https://stackoverflow.com/a/19401707
         */
255 256
            // let $div = $("#info_formulaire");
        let observer = new MutationObserver(function(mutations) {
257 258
                mutations.forEach(function(mutation) {
                    if (mutation.attributeName === "class") {
259
                        let attributeValue = $(mutation.target).prop(mutation.attributeName);
260 261 262 263 264 265 266 267 268 269
                        fixSelect2SearchFieldWidth();
                    }
                });
            });
        // observer.observe($div[0], { attributes: true });
        $('.tab-pane').each(function() {
            observer.observe(this, { attributes: true });
        });
        //--------------------------------------------------------------------------------------------------------------

270
        let champsDate = null;
271 272 273 274 275 276 277 278 279 280 281
        champsDate = <?php echo json_encode($calendrier); ?>;
        jQuery.each(champsDate, function(key, val){
            $('#' + val).datetimepicker({
                viewMode: 'year',
                startView: 'decade',
                format: 'dd/mm/yyyy',
                minView: 2,
                language: 'fr'
            });
        });

282
        // Mise en place des conditions
283
        let conditions = <?php echo json_encode($conditions); ?>;
284
        $.each(conditions, function (key, value) {
285
            // On cache le champ par défault
286
            // shownHideField(value['ifNot'], value['thenTheField']);
287

288
            // Si le champ a comme balise "select" (deroulant et multi-select)
289
            if ($('#'+value['ifTheField']).is('select')) {
290 291 292 293 294 295 296 297 298 299
                if ($('#'+value['ifTheField']).hasClass('multiSelect') == true) {
                    $('#'+value['ifTheField']).parent().parent().on('show', function() {
                        if (jQuery.inArray(value['hasValue'], $('#'+value['ifTheField']).val()) !== -1) {
                            shownHideField(value['mustBe'], value['thenTheField'])
                        } else {
                            shownHideField(value['ifNot'], value['thenTheField']);
                        }
                    });

                    $('#'+value['ifTheField']).parent().parent().on('hide', function() {
300 301 302
                        // if (jQuery.inArray(value['hasValue'], $('#'+value['ifTheField']).val()) !== -1) {
                        //     shownHideField(value['mustBe'], value['thenTheField'])
                        // } else {
303
                            shownHideField(value['ifNot'], value['thenTheField']);
304
                        // }
305 306 307 308 309 310 311
                    });

                    if (jQuery.inArray(value['hasValue'], $('#'+value['ifTheField']).val()) !== -1 && $('#'+value['ifTheField']).parent().parent().css('display') != 'none') {
                        shownHideField(value['mustBe'], value['thenTheField'])
                    } else {
                        shownHideField(value['ifNot'], value['thenTheField']);
                    }
Théo GUILLON's avatar
Théo GUILLON committed
312
                } else {
313 314 315 316 317 318 319 320 321
                    $('#'+value['ifTheField']).parent().parent().on('show', function() {
                        if ($('#'+value['ifTheField']).val() == value['hasValue']) {
                            shownHideField(value['mustBe'], value['thenTheField'])
                        } else {
                            shownHideField(value['ifNot'], value['thenTheField']);
                        }
                    });

                    $('#'+value['ifTheField']).parent().parent().on('hide', function() {
322 323 324
                        // if ($('#'+value['ifTheField']).val() == value['hasValue']) {
                        //     shownHideField(value['mustBe'], value['thenTheField'])
                        // } else {
325
                            shownHideField(value['ifNot'], value['thenTheField']);
326
                        // }
327 328 329 330 331 332 333
                    });

                    if ($('#'+value['ifTheField']).val() == value['hasValue'] && $('#'+value['ifTheField']).parent().parent().css('display') != 'none') {
                        shownHideField(value['mustBe'], value['thenTheField'])
                    } else {
                        shownHideField(value['ifNot'], value['thenTheField']);
                    }
Théo GUILLON's avatar
Théo GUILLON committed
334
                }
335

336 337
                // Quand le champ deroulant ou multi-select change de valeur
                $('#'+value['ifTheField']).change(function () {
338 339 340 341 342 343
                    if ($('#'+value['ifTheField']).hasClass('multiSelect') == true) {
                        if (jQuery.inArray(value['hasValue'], $(this).val()) !== -1) {
                            shownHideField(value['mustBe'], value['thenTheField'])
                        } else {
                            shownHideField(value['ifNot'], value['thenTheField']);
                        }
344
                    } else {
345 346 347 348 349
                        if ($(this).val() == value['hasValue']) {
                            shownHideField(value['mustBe'], value['thenTheField'])
                        } else {
                            shownHideField(value['ifNot'], value['thenTheField']);
                        }
350
                    }
Théo GUILLON's avatar
Théo GUILLON committed
351
                });
352
            }
Théo GUILLON's avatar
Théo GUILLON committed
353

354 355
            // Si le champ a comme balise "input"
            if ($('#'+value['ifTheField']).is('input')) {
356

357 358
                // Si le champ est de type "checkbox"
                if ($('#'+value['hasValue']).attr('type') == "checkbox") {
359 360 361 362 363 364 365 366 367 368 369 370 371
                    $('#'+value['hasValue']).parent().parent().parent().on('show', function() {
                        if ($('#'+value['hasValue']).prop("checked") == true) {
                            shownHideField(value['mustBe'], value['thenTheField'])
                        } else {
                            shownHideField(value['ifNot'], value['thenTheField']);
                        }
                    });

                    $('#'+value['hasValue']).parent().parent().parent().on('hide', function() {
                        shownHideField(value['ifNot'], value['thenTheField']);
                    });

                    if ($('#'+value['hasValue']).prop("checked") === true && $('#'+value['ifTheField']).parent().parent().css('display') != 'none') {
Théo GUILLON's avatar
Théo GUILLON committed
372
                        shownHideField(value['mustBe'], value['thenTheField'])
373
                    } else {
Théo GUILLON's avatar
Théo GUILLON committed
374
                        shownHideField(value['ifNot'], value['thenTheField']);
375
                    }
376

377 378
                    // Quand la valeur de la condition change
                    $('#' + value['hasValue']).on('change', function () {
379 380 381 382 383 384 385
                        if ($(this).prop("checked") == true) {
                            shownHideField(value['mustBe'], value['thenTheField'])
                        } else {
                            shownHideField(value['ifNot'], value['thenTheField']);
                        }
                    });
                }
386 387

                // Si le champ est de type "radio"
388 389 390 391
                // if ($('#'+value['hasValue']).attr('type') == "radio") {
                if ($('input[type="radio"][value="'+value['hasValue']+'"]').length == 1) {

                    // Quand le changer est affiché
392 393
                    $('#'+value['ifTheField']).parent().parent().on('show', function() {
                        $('#'+value['ifTheField']).parent().find('input[type=radio]:checked').each(function () {
394
                            if ($(this).val() == value['hasValue']) {
395 396 397 398 399 400 401
                                shownHideField(value['mustBe'], value['thenTheField'])
                            } else {
                                shownHideField(value['ifNot'], value['thenTheField']);
                            }
                        });
                    });

402
                    // Quand le champ est caché
403 404 405 406 407
                    $('#'+value['ifTheField']).parent().parent().on('hide', function() {
                        shownHideField(value['ifNot'], value['thenTheField']);
                    });

                    if ($('#'+value['ifTheField']).parent().parent().css('display') != 'none') {
408
                        if ($('#'+value['ifTheField']).parent().find('input[type=radio]:checked').val() == value['hasValue']) {
409 410 411 412 413 414 415 416 417
                            shownHideField(value['mustBe'], value['thenTheField'])
                        } else {
                            shownHideField(value['ifNot'], value['thenTheField']);
                        }

                    } else {
                        shownHideField(value['ifNot'], value['thenTheField']);
                    }

418
                    // Quand le champ radio change de valeur
419
                    $('#'+value['ifTheField']).parent().find('input[type=radio]').on('change', function () {
420
                        if ($(this).val() == value['hasValue']) {
421 422 423 424 425 426
                            shownHideField(value['mustBe'], value['thenTheField'])
                        } else {
                            shownHideField(value['ifNot'], value['thenTheField']);
                        }
                    });
                }
Théo GUILLON's avatar
Théo GUILLON committed
427
            }
428 429
        });

Théo GUILLON's avatar
Théo GUILLON committed
430
        function shownHideField(condition, thenTheField)
431
        {
432
            if (condition === 'shown') {
Théo GUILLON's avatar
Théo GUILLON committed
433 434 435
                $('#' + thenTheField).parent().parent().show();
            } else {
                $('#' + thenTheField).parent().parent().hide();
436
                // $('#' + thenTheField).val('');
Théo GUILLON's avatar
Théo GUILLON committed
437
            }
438
        }
439
    });
440 441 442 443 444 445 446 447 448 449

    (function ($) {
        $.each(['show', 'hide'], function (i, ev) {
            let el = $.fn[ev];
            $.fn[ev] = function () {
                this.trigger(ev);
                return el.apply(this, arguments);
            };
        });
    })(jQuery);
450
</script>