SelectMultipleSideBySideElement.php 22.8 KB
Newer Older
1
<?php
2

3
4
5
6
7
8
9
10
11
12
13
14
15
/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */

16
17
namespace TYPO3\CMS\Backend\Form\Element;

18
use TYPO3\CMS\Core\Authentication\BackendUserAuthentication;
19
use TYPO3\CMS\Core\Imaging\Icon;
20
use TYPO3\CMS\Core\Localization\LanguageService;
21
use TYPO3\CMS\Core\Utility\ArrayUtility;
22
use TYPO3\CMS\Core\Utility\GeneralUtility;
23
use TYPO3\CMS\Core\Utility\MathUtility;
24
use TYPO3\CMS\Core\Utility\StringUtility;
25
26
27
28

/**
 * Render a widget with two boxes side by side.
 *
29
 * This is rendered for config type=select, renderType=selectMultipleSideBySide set
30
 */
31
32
class SelectMultipleSideBySideElement extends AbstractFormElement
{
33
34
35
36
37
38
39
40
41
42
43
    /**
     * Default field information enabled for this element.
     *
     * @var array
     */
    protected $defaultFieldInformation = [
        'tcaDescription' => [
            'renderType' => 'tcaDescription',
        ],
    ];

44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
    /**
     * Default field controls for this element.
     *
     * @var array
     */
    protected $defaultFieldControl = [
        'editPopup' => [
            'renderType' => 'editPopup',
            'disabled' => true,
        ],
        'addRecord' => [
            'renderType' => 'addRecord',
            'disabled' => true,
        ],
        'listModule' => [
            'renderType' => 'listModule',
            'disabled' => true,
            'after' => [ 'addRecord' ],
        ],
    ];

    /**
     * Default field wizards enabled for this element.
     *
     * @var array
     */
    protected $defaultFieldWizard = [
71
72
73
        'localizationStateSelector' => [
            'renderType' => 'localizationStateSelector',
        ],
74
75
        'otherLanguageContent' => [
            'renderType' => 'otherLanguageContent',
76
77
78
            'after' => [
                'localizationStateSelector'
            ],
79
80
81
82
83
84
85
86
87
        ],
        'defaultLanguageDifferences' => [
            'renderType' => 'defaultLanguageDifferences',
            'after' => [
                'otherLanguageContent',
            ],
        ],
    ];

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
    /**
     * Merge field control configuration with default controls and render them.
     *
     * @return array Result array
     */
    protected function renderFieldControl(): array
    {
        $alternativeResult =  [
            'additionalJavaScriptPost' => [],
            'additionalHiddenFields' => [],
            'additionalInlineLanguageLabelFiles' => [],
            'stylesheetFiles' => [],
            'requireJsModules' => [],
            'inlineData' => [],
            'html' => '',
        ];
        $options = $this->data;
        $fieldControl = $this->defaultFieldControl;
        $fieldControlFromTca = $options['parameterArray']['fieldConf']['config']['fieldControl'] ?? [];
        ArrayUtility::mergeRecursiveWithOverrule($fieldControl, $fieldControlFromTca);
        $options['renderType'] = 'fieldControl';
        if (isset($fieldControl['editPopup'])) {
            $editPopupControl = $fieldControl['editPopup'];
            unset($fieldControl['editPopup']);
            $alternativeOptions = $options;
            $alternativeOptions['renderData']['fieldControl'] = ['editPopup' => $editPopupControl];
            $alternativeResult = $this->nodeFactory->create($alternativeOptions)->render();
        }
        $options['renderData']['fieldControl'] = $fieldControl;
        return [$this->nodeFactory->create($options)->render(), $alternativeResult];
    }

120
121
122
123
124
125
126
    /**
     * Render side by side element.
     *
     * @return array As defined in initializeResultArray() of AbstractNode
     */
    public function render()
    {
127
        $filterTextfield = [];
128
        $languageService = $this->getLanguageService();
129
        $resultArray = $this->initializeResultArray();
130

131
132
        $parameterArray = $this->data['parameterArray'];
        $config = $parameterArray['fieldConf']['config'];
133
        $elementName = $parameterArray['itemFormElName'];
134
135

        if ($config['readOnly']) {
136
137
            // Early return for the relatively simple read only case
            return $this->renderReadOnly();
138
139
        }

140
141
142
        $possibleItems = $config['items'];
        $selectedItems = $parameterArray['itemFormElValue'] ?: [];
        $selectedItemsCount = count($selectedItems);
143

144
145
146
147
148
149
150
151
152
153
        $maxItems = $config['maxitems'];
        $autoSizeMax = MathUtility::forceIntegerInRange($config['autoSizeMax'], 0);
        $size = 2;
        if (isset($config['size'])) {
            $size = (int)$config['size'];
        }
        if ($autoSizeMax >= 1) {
            $size = MathUtility::forceIntegerInRange($selectedItemsCount + 1, MathUtility::forceIntegerInRange($size, 1), $autoSizeMax);
        }
        $itemCanBeSelectedMoreThanOnce = !empty($config['multiple']);
154

155
156
157
158
159
160
161
        $listOfSelectedValues = [];
        $selectedItemsHtml = [];
        foreach ($selectedItems as $itemValue) {
            foreach ($possibleItems as $possibleItem) {
                if ($possibleItem[1] == $itemValue) {
                    $title = $possibleItem[0];
                    $listOfSelectedValues[] = $itemValue;
162
                    $selectedItemsHtml[] = '<option value="' . htmlspecialchars((string)$itemValue) . '" title="' . htmlspecialchars((string)$title) . '">' . htmlspecialchars($this->appendValueToLabelInDebugMode($title, $itemValue)) . '</option>';
163
                    break;
164
165
166
167
                }
            }
        }

168
169
170
171
172
173
174
175
176
177
178
179
180
181
        $selectableItemsHtml = [];
        foreach ($possibleItems as $possibleItem) {
            $disabledAttr = '';
            $classAttr = '';
            if (!$itemCanBeSelectedMoreThanOnce && in_array((string)$possibleItem[1], $selectedItems, true)) {
                $disabledAttr = ' disabled="disabled"';
                $classAttr = ' class="hidden"';
            }
            $selectableItemsHtml[] =
                '<option value="'
                    . htmlspecialchars($possibleItem[1])
                    . '" title="' . htmlspecialchars($possibleItem[0]) . '"'
                    . $classAttr . $disabledAttr
                . '>'
182
                    . htmlspecialchars($this->appendValueToLabelInDebugMode($possibleItem[0], $possibleItem[1])) .
183
                '</option>';
184
185
        }

186
        // Html stuff for filter and select filter on top of right side of multi select boxes
187
188
189
190
191
192
193
        $filterTextfield[] = '<span class="input-group input-group-sm">';
        $filterTextfield[] =    '<span class="input-group-addon">';
        $filterTextfield[] =        '<span class="fa fa-filter"></span>';
        $filterTextfield[] =    '</span>';
        $filterTextfield[] =    '<input class="t3js-formengine-multiselect-filter-textfield form-control" value="">';
        $filterTextfield[] = '</span>';

194
195
196
197
198
199
200
        $filterDropDownOptions = [];
        if (isset($config['multiSelectFilterItems']) && is_array($config['multiSelectFilterItems']) && count($config['multiSelectFilterItems']) > 1) {
            foreach ($config['multiSelectFilterItems'] as $optionElement) {
                $value = $languageService->sL($optionElement[0]);
                $label = $value;
                if (isset($optionElement[1]) && trim($optionElement[1]) !== '') {
                    $label = $languageService->sL($optionElement[1]);
201
                }
202
                $filterDropDownOptions[] = '<option value="' . htmlspecialchars($value) . '">' . htmlspecialchars($label) . '</option>';
203
            }
204
205
        }
        $filterHtml = [];
206
207
208
209
        $filterHtml[] = '<div class="form-multigroup-item-wizard">';
        if (!empty($filterDropDownOptions)) {
            $filterHtml[] = '<div class="t3js-formengine-multiselect-filter-container form-multigroup-wrap">';
            $filterHtml[] =     '<div class="form-multigroup-item form-multigroup-element">';
210
            $filterHtml[] =         '<select class="form-select form-select-sm t3js-formengine-multiselect-filter-dropdown">';
211
212
213
214
215
216
            $filterHtml[] =             implode(LF, $filterDropDownOptions);
            $filterHtml[] =         '</select>';
            $filterHtml[] =     '</div>';
            $filterHtml[] =     '<div class="form-multigroup-item form-multigroup-element">';
            $filterHtml[] =         implode(LF, $filterTextfield);
            $filterHtml[] =     '</div>';
217
            $filterHtml[] = '</div>';
218
219
        } else {
            $filterHtml[] = implode(LF, $filterTextfield);
220
        }
221
        $filterHtml[] = '</div>';
222

223
224
225
226
        $multipleAttribute = '';
        if ($maxItems !== 1 && $size !== 1) {
            $multipleAttribute = ' multiple="multiple"';
        }
227
228
229
230
231

        $fieldInformationResult = $this->renderFieldInformation();
        $fieldInformationHtml = $fieldInformationResult['html'];
        $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldInformationResult, false);

232
        [$fieldControlResult, $alternativeControlResult] = $this->renderFieldControl();
233
        $fieldControlHtml = $fieldControlResult['html'];
234
        $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldControlResult, false);
235
236
        $alternativeFieldControlHtml = $alternativeControlResult['html'];
        $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $alternativeControlResult, false);
237
238

        $fieldWizardResult = $this->renderFieldWizard();
239
        $fieldWizardHtml = $fieldWizardResult['html'];
240
241
        $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldWizardResult, false);

Andreas Fernandez's avatar
Andreas Fernandez committed
242
243
244
        $selectedOptionsFieldId = StringUtility::getUniqueId('tceforms-multiselect-');
        $availableOptionsFieldId = StringUtility::getUniqueId('tceforms-multiselect-');

245
        $html = [];
246
        $html[] = '<div class="formengine-field-item t3js-formengine-field-item">';
247
248
249
250
251
252
253
        $html[] =   $fieldInformationHtml;
        $html[] =   '<div class="form-wizards-wrap">';
        $html[] =       '<div class="form-wizards-element">';
        $html[] =           '<input type="hidden" data-formengine-input-name="' . htmlspecialchars($elementName) . '" value="' . (int)$itemCanBeSelectedMoreThanOnce . '" />';
        $html[] =           '<div class="form-multigroup-wrap t3js-formengine-field-group">';
        $html[] =               '<div class="form-multigroup-item form-multigroup-element">';
        $html[] =                   '<label>';
254
        $html[] =                       htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.selected'));
255
256
257
258
        $html[] =                   '</label>';
        $html[] =                   '<div class="form-wizards-wrap form-wizards-aside">';
        $html[] =                       '<div class="form-wizards-element">';
        $html[] =                           '<select';
Andreas Fernandez's avatar
Andreas Fernandez committed
259
        $html[] =                               ' id="' . $selectedOptionsFieldId . '"';
260
        $html[] =                               ' size="' . $size . '"';
261
        $html[] =                               ' class="form-select"';
262
263
264
265
266
267
268
269
        $html[] =                               $multipleAttribute;
        $html[] =                               ' data-formengine-input-name="' . htmlspecialchars($elementName) . '"';
        $html[] =                           '>';
        $html[] =                               implode(LF, $selectedItemsHtml);
        $html[] =                           '</select>';
        $html[] =                       '</div>';
        $html[] =                       '<div class="form-wizards-items-aside">';
        $html[] =                           '<div class="btn-group-vertical">';
270
        if ($maxItems > 1 && $size >= 5) {
271
            $html[] =                           '<a href="#"';
Andreas Fernandez's avatar
Andreas Fernandez committed
272
            $html[] =                               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-top"';
273
            $html[] =                               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
274
            $html[] =                               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_to_top')) . '"';
275
276
277
            $html[] =                           '>';
            $html[] =                               $this->iconFactory->getIcon('actions-move-to-top', Icon::SIZE_SMALL)->render();
            $html[] =                           '</a>';
278
279
        }
        if ($maxItems > 1) {
280
            $html[] =                           '<a href="#"';
Andreas Fernandez's avatar
Andreas Fernandez committed
281
            $html[] =                               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-up"';
282
            $html[] =                               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
283
            $html[] =                               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_up')) . '"';
284
285
286
287
            $html[] =                           '>';
            $html[] =                               $this->iconFactory->getIcon('actions-move-up', Icon::SIZE_SMALL)->render();
            $html[] =                           '</a>';
            $html[] =                           '<a href="#"';
Andreas Fernandez's avatar
Andreas Fernandez committed
288
            $html[] =                               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-down"';
289
            $html[] =                               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
290
            $html[] =                               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_down')) . '"';
291
292
293
            $html[] =                           '>';
            $html[] =                               $this->iconFactory->getIcon('actions-move-down', Icon::SIZE_SMALL)->render();
            $html[] =                           '</a>';
294
295
        }
        if ($maxItems > 1 && $size >= 5) {
296
            $html[] =                           '<a href="#"';
Andreas Fernandez's avatar
Andreas Fernandez committed
297
            $html[] =                               ' class="btn btn-default t3js-btn-option t3js-btn-moveoption-bottom"';
298
            $html[] =                               ' data-fieldname="' . htmlspecialchars($elementName) . '"';
299
            $html[] =                               ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.move_to_bottom')) . '"';
300
301
302
            $html[] =                           '>';
            $html[] =                               $this->iconFactory->getIcon('actions-move-to-bottom', Icon::SIZE_SMALL)->render();
            $html[] =                           '</a>';
303
        }
304
        $html[] =                                $alternativeFieldControlHtml;
305
        $html[] =                               '<a href="#"';
Andreas Fernandez's avatar
Andreas Fernandez committed
306
        $html[] =                                   ' class="btn btn-default t3js-btn-option t3js-btn-removeoption"';
307
        $html[] =                                   ' data-fieldname="' . htmlspecialchars($elementName) . '"';
308
        $html[] =                                   ' title="' . htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.remove_selected')) . '"';
309
310
311
312
313
314
315
316
317
        $html[] =                               '>';
        $html[] =                                   $this->iconFactory->getIcon('actions-selection-delete', Icon::SIZE_SMALL)->render();
        $html[] =                               '</a>';
        $html[] =                           '</div>';
        $html[] =                       '</div>';
        $html[] =                   '</div>';
        $html[] =               '</div>';
        $html[] =               '<div class="form-multigroup-item form-multigroup-element">';
        $html[] =                   '<label>';
318
        $html[] =                       htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.items'));
319
        $html[] =                   '</label>';
320
321
322
323
324
325
        $html[] =                   '<div class="form-wizards-wrap form-wizards-aside">';
        $html[] =                       '<div class="form-wizards-element">';
        $html[] =                           implode(LF, $filterHtml);
        $html[] =                           '<select';
        $html[] =                               ' data-relatedfieldname="' . htmlspecialchars($elementName) . '"';
        $html[] =                               ' data-exclusivevalues="' . htmlspecialchars($config['exclusiveKeys']) . '"';
Andreas Fernandez's avatar
Andreas Fernandez committed
326
        $html[] =                               ' id="' . $availableOptionsFieldId . '"';
327
        $html[] =                               ' data-formengine-input-name="' . htmlspecialchars($elementName) . '"';
328
        $html[] =                               ' class="form-select t3js-formengine-select-itemstoselect"';
329
330
331
332
333
334
335
        $html[] =                               ' size="' . $size . '"';
        $html[] =                               ' onchange="' . htmlspecialchars(implode('', $parameterArray['fieldChangeFunc'])) . '"';
        $html[] =                               ' data-formengine-validation-rules="' . htmlspecialchars($this->getValidationDataAsJsonString($config)) . '"';
        $html[] =                           '>';
        $html[] =                               implode(LF, $selectableItemsHtml);
        $html[] =                           '</select>';
        $html[] =                       '</div>';
336
337
338
339
340
341
342
        if (!empty($fieldControlHtml)) {
            $html[] =                       '<div class="form-wizards-items-aside">';
            $html[] =                           '<div class="btn-group-vertical">';
            $html[] =                               $fieldControlHtml;
            $html[] =                           '</div>';
            $html[] =                       '</div>';
        }
343
        $html[] =                   '</div>';
344
345
        $html[] =               '</div>';
        $html[] =           '</div>';
346
347
        $html[] =           '<input type="hidden" name="' . htmlspecialchars($elementName) . '" value="' . htmlspecialchars(implode(',', $listOfSelectedValues)) . '" />';
        $html[] =       '</div>';
348
349
350
351
352
        if (!empty($fieldWizardHtml)) {
            $html[] = '<div class="form-wizards-items-bottom">';
            $html[] = $fieldWizardHtml;
            $html[] = '</div>';
        }
353
354
        $html[] =   '</div>';
        $html[] = '</div>';
355

Andreas Fernandez's avatar
Andreas Fernandez committed
356
357
358
359
360
361
        $resultArray['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/Element/SelectMultipleSideBySideElement' => '
            function(SelectMultipleSideBySideElement) {
                new SelectMultipleSideBySideElement(' . GeneralUtility::quoteJSvalue($selectedOptionsFieldId) . ', ' . GeneralUtility::quoteJSvalue($availableOptionsFieldId) . ');
            }'
        ];

362
        $resultArray['html'] = implode(LF, $html);
363
364
365
        return $resultArray;
    }

366
367
368
369
370
371
372
373
374
    /**
     * Create HTML of a read only multi select. Right side is not
     * rendered, but just the left side with the selected items.
     *
     * @return array
     */
    protected function renderReadOnly()
    {
        $languageService = $this->getLanguageService();
375
        $resultArray = $this->initializeResultArray();
376
377
378
379
380
381
382

        $parameterArray = $this->data['parameterArray'];
        $config = $parameterArray['fieldConf']['config'];
        $fieldName = $parameterArray['itemFormElName'];

        $possibleItems = $config['items'];
        $selectedItems = $parameterArray['itemFormElValue'] ?: [];
383
384
385
        if (!is_array($selectedItems)) {
            $selectedItems = GeneralUtility::trimExplode(',', $selectedItems, true);
        }
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
        $selectedItemsCount = count($selectedItems);

        $autoSizeMax = MathUtility::forceIntegerInRange($config['autoSizeMax'], 0);
        $size = 2;
        if (isset($config['size'])) {
            $size = (int)$config['size'];
        }
        if ($autoSizeMax >= 1) {
            $size = MathUtility::forceIntegerInRange($selectedItemsCount + 1, MathUtility::forceIntegerInRange($size, 1), $autoSizeMax);
        }
        $multiple = '';
        if ($size !== 1) {
            $multiple = ' multiple="multiple"';
        }

        $listOfSelectedValues = [];
        $optionsHtml = [];
        foreach ($selectedItems as $itemValue) {
            foreach ($possibleItems as $possibleItem) {
                if ($possibleItem[1] == $itemValue) {
                    $title = $possibleItem[0];
                    $listOfSelectedValues[] = $itemValue;
                    $optionsHtml[] = '<option value="' . htmlspecialchars($itemValue) . '" title="' . htmlspecialchars($title) . '">' . htmlspecialchars($title) . '</option>';
                    break;
                }
            }
        }

414
415
416
417
        $fieldInformationResult = $this->renderFieldInformation();
        $fieldInformationHtml = $fieldInformationResult['html'];
        $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldInformationResult, false);

418
        $html = [];
419
        $html[] = '<div class="formengine-field-item t3js-formengine-field-item">';
420
        $html[] =   $fieldInformationHtml;
421
422
423
        $html[] =   '<div class="form-wizards-wrap">';
        $html[] =       '<div class="form-wizards-element">';
        $html[] =           '<label>';
424
        $html[] =               htmlspecialchars($languageService->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.selected'));
425
426
427
428
429
430
        $html[] =           '</label>';
        $html[] =           '<div class="form-wizards-wrap form-wizards-aside">';
        $html[] =               '<div class="form-wizards-element">';
        $html[] =                   '<select';
        $html[] =                       ' id="' . StringUtility::getUniqueId('tceforms-multiselect-') . '"';
        $html[] =                       ' size="' . $size . '"';
431
        $html[] =                       ' class="form-select"';
432
433
434
435
436
437
438
439
440
441
        $html[] =                       $multiple;
        $html[] =                       ' data-formengine-input-name="' . htmlspecialchars($fieldName) . '"';
        $html[] =                       ' disabled="disabled">';
        $html[] =                   '/>';
        $html[] =                       implode(LF, $optionsHtml);
        $html[] =                   '</select>';
        $html[] =               '</div>';
        $html[] =           '</div>';
        $html[] =           '<input type="hidden" name="' . htmlspecialchars($fieldName) . '" value="' . htmlspecialchars(implode(',', $listOfSelectedValues)) . '" />';
        $html[] =       '</div>';
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
        $html[] =   '</div>';
        $html[] = '</div>';

        $resultArray['html'] = implode(LF, $html);
        return $resultArray;
    }

    /**
     * @return LanguageService
     */
    protected function getLanguageService()
    {
        return $GLOBALS['LANG'];
    }

457
458
459
460
461
462
463
    /**
     * @return BackendUserAuthentication
     */
    protected function getBackendUserAuthentication()
    {
        return $GLOBALS['BE_USER'];
    }
464
}