[FEATURE] EXT:form - Add multiselect inspector editor 57/51457/9
authorRalf Zimmermann <ralf.zimmermann@tritum.de>
Sun, 29 Jan 2017 19:25:08 +0000 (20:25 +0100)
committerSusanne Moog <susanne.moog@typo3.org>
Thu, 2 Feb 2017 20:30:48 +0000 (21:30 +0100)
A new inspector editor, i.e. a new field type of the form editor,
has been added.

Additionally, this patch fixes the wrong mime types of file upload
form elements.

Resolves: #79531
Resolves: #79252
Releases: master
Change-Id: I8a4111b7daf04751bbb16a0a5946700767bc0461
Reviewed-on: https://review.typo3.org/51457
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Tested-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
Tested-by: Susanne Moog <susanne.moog@typo3.org>
typo3/sysext/core/Documentation/Changelog/master/Feature-79531-EXTform-AddInspectorMultiselectEditors.rst [new file with mode: 0644]
typo3/sysext/form/Configuration/Yaml/FormEditorSetup.yaml
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/MultiSelectEditor.html [new file with mode: 0644]
typo3/sysext/form/Resources/Private/Language/Database.xlf
typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js

diff --git a/typo3/sysext/core/Documentation/Changelog/master/Feature-79531-EXTform-AddInspectorMultiselectEditors.rst b/typo3/sysext/core/Documentation/Changelog/master/Feature-79531-EXTform-AddInspectorMultiselectEditors.rst
new file mode 100644 (file)
index 0000000..d6c5dca
--- /dev/null
@@ -0,0 +1,22 @@
+.. include:: ../../Includes.txt
+
+=============================================================
+Feature: #79531 - EXT:form - Add multiselect inspector editor
+=============================================================
+
+See :issue:`79531`
+
+Description
+===========
+
+A new inspector editor, i.e. a new field type of the form editor, has been added.
+If applied, multi-select fields can be added to the inspector.
+A multi-select field allows the selection of multiple meta properties for a field
+and stores them in the defined property path.
+
+For example:
+If you have a file upload element in your form, until now you could only select a single
+mime type restriction. With the new multi-select option, the mime-type field was converted
+and you can now select multiple mime-types (for example docx, doc and odt together).
+
+.. index:: Backend, ext:form
\ No newline at end of file
index ba74e4b..81046ef 100644 (file)
@@ -85,6 +85,7 @@ TYPO3:
               Inspector-TextEditor: 'Inspector/TextEditor'
               Inspector-PropertyGridEditor: 'Inspector/PropertyGridEditor'
               Inspector-SingleSelectEditor: 'Inspector/SingleSelectEditor'
+              Inspector-MultiSelectEditor: 'Inspector/MultiSelectEditor'
               Inspector-TextareaEditor: 'Inspector/TextareaEditor'
               Inspector-RemoveElementEditor: 'Inspector/RemoveElementEditor'
               Inspector-FinishersEditor: 'Inspector/FinishersEditor'
@@ -485,21 +486,36 @@ TYPO3:
                 groupSorting: 200
                 predefinedDefaults:
                   properties:
-                    allowedMimeTypes: ['application/doc', 'application/docx', 'application/odt', 'application/pdf']
+                    allowedMimeTypes: ['application/pdf']
                 iconIdentifier: 't3-form-icon-file-upload'
                 editors:
                   300:
                     identifier: 'allowedMimeTypes'
-                    templateName: 'Inspector-SingleSelectEditor'
+                    templateName: 'Inspector-MultiSelectEditor'
                     label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.label'
                     propertyPath: 'properties.allowedMimeTypes'
                     selectOptions:
                       10:
-                        value: ['application/doc', 'application/docx', 'application/odt', 'application/pdf']
-                        label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.1'
+                        value: 'application/msword'
+                        label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.doc'
                       20:
-                        value: ['application/xls']
-                        label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.2'
+                        value: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+                        label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.docx'
+                      30:
+                        value: 'application/msexcel'
+                        label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.xls'
+                      40:
+                        value: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+                        label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.xlsx'
+                      50:
+                        value: 'application/pdf'
+                        label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.pdf'
+                      60:
+                        value: 'application/vnd.oasis.opendocument.text'
+                        label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.odt'
+                      70:
+                        value: 'application/vnd.oasis.opendocument.spreadsheet-template'
+                        label: 'formEditor.elements.FileUpload.editor.allowedMimeTypes.ods'
 
             ImageUpload:
               formEditor:
@@ -508,8 +524,24 @@ TYPO3:
                 groupSorting: 300
                 predefinedDefaults:
                   properties:
-                    allowedMimeTypes: ['image/jpeg', 'image/png', 'image/bmp']
+                    allowedMimeTypes: ['image/jpeg']
                 iconIdentifier: 't3-form-icon-image-upload'
+                editors:
+                  300:
+                    identifier: 'allowedMimeTypes'
+                    templateName: 'Inspector-MultiSelectEditor'
+                    label: 'formEditor.elements.ImageUpload.editor.allowedMimeTypes.label'
+                    propertyPath: 'properties.allowedMimeTypes'
+                    selectOptions:
+                      10:
+                        value: 'image/jpeg'
+                        label: 'formEditor.elements.ImageUpload.editor.allowedMimeTypes.jpg'
+                      20:
+                        value: 'image/png'
+                        label: 'formEditor.elements.ImageUpload.editor.allowedMimeTypes.png'
+                      30:
+                        value: 'image/bmp'
+                        label: 'formEditor.elements.ImageUpload.editor.allowedMimeTypes.bmp'
 
           ### FINISHERS ###
           finishersDefinition:
diff --git a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/MultiSelectEditor.html b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/MultiSelectEditor.html
new file mode 100644 (file)
index 0000000..05fbb4d
--- /dev/null
@@ -0,0 +1,6 @@
+<div class="t3-form-control-group form-group">
+    <label><span data-template-property="label" /></label>
+    <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
+        <select data-template-property="selectOptions" class="form-control" multiple="multiple"/>
+    </div>
+</div>
\ No newline at end of file
index 36364dd..6421717 100644 (file)
             <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.label" xml:space="preserve">
                 <source>Allowed file mime types</source>
             </trans-unit>
-            <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.1" xml:space="preserve">
-                <source>Documents (doc, docx, odt, pdf)</source>
+            <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.doc" xml:space="preserve">
+                <source>Documents (doc)</source>
             </trans-unit>
-            <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.2" xml:space="preserve">
-                <source>Spreadsheet documents (xls)</source>
+            <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.docx" xml:space="preserve">
+                <source>Documents (docx)</source>
+            </trans-unit>
+            <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.xls" xml:space="preserve">
+                <source>Documents (xls)</source>
+            </trans-unit>
+            <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.xlsx" xml:space="preserve">
+                <source>Documents (xlsx)</source>
+            </trans-unit>
+            <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.pdf" xml:space="preserve">
+                <source>Documents (pdf)</source>
+            </trans-unit>
+            <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.odt" xml:space="preserve">
+                <source>Documents (odt)</source>
+            </trans-unit>
+            <trans-unit id="formEditor.elements.FileUpload.editor.allowedMimeTypes.ods" xml:space="preserve">
+                <source>Documents (ods)</source>
             </trans-unit>
 
             <trans-unit id="formEditor.elements.ImageUpload.label" xml:space="preserve">
                 <source>Image upload</source>
             </trans-unit>
+            <trans-unit id="formEditor.elements.ImageUpload.editor.allowedMimeTypes.label" xml:space="preserve">
+                <source>Allowed file mime types</source>
+            </trans-unit>
+            <trans-unit id="formEditor.elements.ImageUpload.editor.allowedMimeTypes.jpg" xml:space="preserve">
+                <source>Images (jpg)</source>
+            </trans-unit>
+            <trans-unit id="formEditor.elements.ImageUpload.editor.allowedMimeTypes.png" xml:space="preserve">
+                <source>Images (png)</source>
+            </trans-unit>
+            <trans-unit id="formEditor.elements.ImageUpload.editor.allowedMimeTypes.bmp" xml:space="preserve">
+                <source>Images (bmp)</source>
+            </trans-unit>
 
             <trans-unit id="formEditor.elements.UnknownElement" xml:space="preserve">
                 <source>Unknown Element</source>
index 8059f48..1987fc6 100644 (file)
@@ -77,6 +77,7 @@ define(['jquery',
                 'Inspector-RemoveElementEditor': 'Inspector-RemoveElementEditor',
                 'Inspector-RequiredValidatorEditor': 'Inspector-RequiredValidatorEditor',
                 'Inspector-SingleSelectEditor': 'Inspector-SingleSelectEditor',
+                'Inspector-MultiSelectEditor': 'Inspector-MultiSelectEditor',
                 'Inspector-TextareaEditor': 'Inspector-TextareaEditor',
                 'Inspector-TextEditor': 'Inspector-TextEditor',
                 'Inspector-Typo3WinBrowserEditor': 'Inspector-Typo3WinBrowserEditor',
@@ -301,6 +302,14 @@ define(['jquery',
                         collectionName
                     );
                     break;
+                case 'Inspector-MultiSelectEditor':
+                    renderMultiSelectEditor(
+                        editorConfiguration,
+                        editorHtml,
+                        collectionElementIdentifier,
+                        collectionName
+                    );
+                    break;
                 case 'Inspector-PropertyGridEditor':
                     renderPropertyGridEditor(
                         editorConfiguration,
@@ -1162,6 +1171,96 @@ define(['jquery',
          * @param string collectionElementIdentifier
          * @param string collectionName
          * @return void
+         * @throws 1485712399
+         * @throws 1485712400
+         * @throws 1485712401
+         * @throws 1485712402
+         * @throws 1485712403
+         */
+        function renderMultiSelectEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
+            var propertyData, propertyPath, selectElement;
+            assert(
+                'object' === $.type(editorConfiguration),
+                'Invalid parameter "editorConfiguration"',
+                1485712399
+            );
+            assert(
+                'object' === $.type(editorHtml),
+                'Invalid parameter "editorHtml"',
+                1485712400
+            );
+            assert(
+                getUtility().isNonEmptyString(editorConfiguration['label']),
+                'Invalid configuration "label"',
+                1485712401
+            );
+            assert(
+                getUtility().isNonEmptyString(editorConfiguration['propertyPath']),
+                'Invalid configuration "propertyPath"',
+                1485712402
+            );
+            assert(
+                'array' === $.type(editorConfiguration['selectOptions']),
+                'Invalid configuration "selectOptions"',
+                1485712403
+            );
+
+            propertyPath = getFormEditorApp().buildPropertyPath(
+                editorConfiguration['propertyPath'],
+                collectionElementIdentifier,
+                collectionName
+            );
+
+            getHelper()
+                .getTemplatePropertyDomElement('label', editorHtml)
+                .append(editorConfiguration['label']);
+
+            selectElement = getHelper()
+                .getTemplatePropertyDomElement('selectOptions', editorHtml);
+
+            propertyData = getCurrentlySelectedFormElement().get(propertyPath);
+
+            for (var i = 0, len1 = editorConfiguration['selectOptions'].length; i < len1; ++i) {
+                var option, value;
+
+                option = null;
+                for (var propertyDataKey in propertyData) {
+                    if (!propertyData.hasOwnProperty(propertyDataKey)) {
+                        continue;
+                    }
+                    if (editorConfiguration['selectOptions'][i]['value'] === propertyData[propertyDataKey]) {
+                        option = new Option(editorConfiguration['selectOptions'][i]['label'], i, false, true);
+                        break;
+                    }
+                }
+
+                if (!option) {
+                    option = new Option(editorConfiguration['selectOptions'][i]['label'], i);
+                }
+
+                $(option).data({value: editorConfiguration['selectOptions'][i]['value']});
+
+                selectElement.append(option);
+            }
+
+            selectElement.on('change', function() {
+                var selectValues = [];
+                $('option:selected', $(this)).each(function(i) {
+                    selectValues.push($(this).data('value'));
+                });
+
+                getCurrentlySelectedFormElement().set(propertyPath, selectValues);
+            });
+        };
+
+        /**
+         * @public
+         *
+         * @param object editorConfiguration
+         * @param object editorHtml
+         * @param string collectionElementIdentifier
+         * @param string collectionName
+         * @return void
          * @throws 1475419226
          * @throws 1475419227
          * @throws 1475419228
@@ -1793,7 +1892,7 @@ define(['jquery',
 
                             $('[data-formelement-identifier="' + nonCompositeNonToplevelFormElement.get('identifier') + '"]', itemTemplate)
                                 .append($(icon))
-                                .append(' ' + nonCompositeNonToplevelFormElements[i].get('label'));
+                                .append(' ' + nonCompositeNonToplevelFormElement.get('label'));
 
                             $('a', itemTemplate).on('click', function() {
                                 var propertyData;
@@ -1893,6 +1992,7 @@ define(['jquery',
             renderRemoveElementEditor: renderRemoveElementEditor,
             renderRequiredValidatorEditor: renderRequiredValidatorEditor,
             renderSingleSelectEditor: renderSingleSelectEditor,
+            renderMultiSelectEditor: renderMultiSelectEditor,
             renderTextareaEditor: renderTextareaEditor,
             renderTextEditor: renderTextEditor,
             renderTypo3WinBrowserEditor: renderTypo3WinBrowserEditor,