formulaire.ctp 18.9 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 50 51 52
    ?>

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

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

                // Champ date
                case 'date':
80
                    echo $this->WebcilForm->input('WebdpoFiche.'.$options['name'], [
81 82 83 84 85
                        'id' => $options['name'],
                        'label' => [
                            'text' => $options['label'],
                            'class' => 'col-md-4'
                        ],
86
                        'class' => 'form-control calendar',
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126
                        'required' => $options['obligatoire'],
                        'placeholder' => $options['placeholder']
                    ]);
                    $calendrier[] = $options['name'];
                    break;

                // Titre de catégorie
                case 'title':
                    ?>
                    <div class="col-md-12 text-center">
                        <h1>
                            <?php echo $options['content']; ?>
                        </h1>
                    </div>
                    <?php
                    break;

                // Label
                case 'texte':
                    echo '<div class="form-group">'
                        . '<h5>' . $options['content'] . '</h5>'
                        . '</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>
                        <div class="col-md-12">
                            <?php echo $options['content']; ?>
                        </div>
                    </div>
                    <?php
                    break;

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

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

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

                // Choix unique
                case 'radios':
177
                    $fieldName = 'WebdpoFiche.'.$options['name'];
178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220
                    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.'>
                                    '.$val.'
                                </div>';
                            }
                            ?>
                        </div>
                        <?php echo $this->WebcilForm->error("{$modelName}.{$fieldName}");?>
                    </div>
                    <?php
                    break;
            }
            $line++;
            ?>
        </div>
    </div>
    <?php
    }
    ?>
</div>
<!-- Fin onglet Formulaire -->

<script type="text/javascript">
221

222 223 224 225 226 227 228 229 230 231 232 233 234 235 236
    $(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
         */
237
        let fixSelect2SearchFieldWidth = function() {
238
            $('.select2.select2-container').each(function(idx, container) {
239
                let field = $(container).find('.select2-search__field');
240 241 242 243 244 245 246 247 248 249
                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
         */
250 251
            // let $div = $("#info_formulaire");
        let observer = new MutationObserver(function(mutations) {
252 253
                mutations.forEach(function(mutation) {
                    if (mutation.attributeName === "class") {
254
                        let attributeValue = $(mutation.target).prop(mutation.attributeName);
255 256 257 258 259 260 261 262 263 264
                        fixSelect2SearchFieldWidth();
                    }
                });
            });
        // observer.observe($div[0], { attributes: true });
        $('.tab-pane').each(function() {
            observer.observe(this, { attributes: true });
        });
        //--------------------------------------------------------------------------------------------------------------

265
        let champsDate = null;
266 267 268 269 270 271 272 273 274 275 276
        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'
            });
        });

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

283
            // Si le champ a comme balise "select" (deroulant et multi-select)
284
            if ($('#'+value['ifTheField']).is('select')) {
285 286 287 288 289 290 291 292 293 294
                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() {
295 296 297
                        // if (jQuery.inArray(value['hasValue'], $('#'+value['ifTheField']).val()) !== -1) {
                        //     shownHideField(value['mustBe'], value['thenTheField'])
                        // } else {
298
                            shownHideField(value['ifNot'], value['thenTheField']);
299
                        // }
300 301 302 303 304 305 306
                    });

                    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
307
                } else {
308 309 310 311 312 313 314 315 316
                    $('#'+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() {
317 318 319
                        // if ($('#'+value['ifTheField']).val() == value['hasValue']) {
                        //     shownHideField(value['mustBe'], value['thenTheField'])
                        // } else {
320
                            shownHideField(value['ifNot'], value['thenTheField']);
321
                        // }
322 323 324 325 326 327 328
                    });

                    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
329
                }
330

331 332
                // Quand le champ deroulant ou multi-select change de valeur
                $('#'+value['ifTheField']).change(function () {
333 334 335 336 337 338
                    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']);
                        }
339
                    } else {
340 341 342 343 344
                        if ($(this).val() == value['hasValue']) {
                            shownHideField(value['mustBe'], value['thenTheField'])
                        } else {
                            shownHideField(value['ifNot'], value['thenTheField']);
                        }
345
                    }
Théo GUILLON's avatar
Théo GUILLON committed
346
                });
347
            }
Théo GUILLON's avatar
Théo GUILLON committed
348

349 350
            // Si le champ a comme balise "input"
            if ($('#'+value['ifTheField']).is('input')) {
351

352 353
                // Si le champ est de type "checkbox"
                if ($('#'+value['hasValue']).attr('type') == "checkbox") {
354 355 356 357 358 359 360 361 362 363 364 365 366
                    $('#'+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
367
                        shownHideField(value['mustBe'], value['thenTheField'])
368
                    } else {
Théo GUILLON's avatar
Théo GUILLON committed
369
                        shownHideField(value['ifNot'], value['thenTheField']);
370
                    }
371

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

                // Si le champ est de type "radio"
383 384 385 386
                // if ($('#'+value['hasValue']).attr('type') == "radio") {
                if ($('input[type="radio"][value="'+value['hasValue']+'"]').length == 1) {

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

397
                    // Quand le champ est caché
398 399 400 401 402
                    $('#'+value['ifTheField']).parent().parent().on('hide', function() {
                        shownHideField(value['ifNot'], value['thenTheField']);
                    });

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

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

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

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

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