Merge pull request #43 from apostrophecms/feature/select-multiple

Feature/select multiple

Author: haroun

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Adds
 
 * Add group widget which is a fieldset container for other form widgets.
+* Add multiple and size fields to select widget.
 
 ### Fixes
 

README.md

@@ -103,6 +103,25 @@ module.exports = {
 };
 ```
 
+#### select field widget option
+
+The select field widget has an option `allowMultiple` to allow multiple select options to be selected. The default value is `false`.
+
+Once set to `true`, it will add two new fields to the select field widget schema: 
+
+|  Property | Type | Description |
+|---|---|---|
+| `allowMultiple` | Boolean | Set to `true` to enable multiple values to be selected in the select widget options, default value is `false` |
+| `size` | Integer | Number of options in the list that should be visible, default value is `0` |
+
+```javascript
+// modules/@apostrophecms/form-select-field/index.js
+modules.exports = {
+  options: {
+    allowMultiple: false
+  }
+}
+```
 
 ### Supporting file field uploads safely
 

i18n/en.json

@@ -84,8 +84,10 @@
   "recaptchaValidationError": "There was a problem validating your reCAPTCHA verification submission.",
   "requiredError": "This field is required",
   "select": "Select input",
+  "selectAllowMultiple": "Allow multiple options to be selected",
   "selectBlank": "",
   "selectChoice": "Select input options",
+  "selectSize": "Number of options in the list that should be visible",
   "submitLabel": "Submit button label",
   "templateOptional": "(Optional)",
   "text": "Text input",

modules/@apostrophecms/form-select-field-widget/index.js

@@ -2,32 +2,55 @@ module.exports = {
   extend: '@apostrophecms/form-base-field-widget',
   options: {
     label: 'aposForm:select',
-    icon: 'form-select-icon'
+    icon: 'form-select-icon',
+    allowMultiple: false
   },
-  fields: {
-    add: {
-      choices: {
-        label: 'aposForm:selectChoice',
-        type: 'array',
-        titleField: 'label',
-        required: true,
-        fields: {
-          add: {
-            label: {
-              type: 'string',
-              required: true,
-              label: 'aposForm:checkboxChoicesLabel',
-              help: 'aposForm:checkboxChoicesLabelHelp'
-            },
-            value: {
-              type: 'string',
-              label: 'aposForm:checkboxChoicesValue',
-              help: 'aposForm:checkboxChoicesValueHelp'
-            }
+  fields(self) {
+    const optionalFields = self.options.allowMultiple
+      ? {
+        allowMultiple: {
+          label: 'aposForm:selectAllowMultiple',
+          type: 'boolean',
+          def: false
+        },
+        size: {
+          label: 'aposForm:selectSize',
+          type: 'integer',
+          def: 0,
+          min: 0,
+          if: {
+            allowMultiple: true
           }
         }
       }
-    }
+      : {};
+
+    return {
+      add: {
+        choices: {
+          label: 'aposForm:selectChoice',
+          type: 'array',
+          titleField: 'label',
+          required: true,
+          fields: {
+            add: {
+              label: {
+                type: 'string',
+                required: true,
+                label: 'aposForm:checkboxChoicesLabel',
+                help: 'aposForm:checkboxChoicesLabelHelp'
+              },
+              value: {
+                type: 'string',
+                label: 'aposForm:checkboxChoicesValue',
+                help: 'aposForm:checkboxChoicesValueHelp'
+              }
+            }
+          }
+        },
+        ...optionalFields
+      }
+    };
   },
   methods (self) {
     return {
@@ -38,5 +61,21 @@ module.exports = {
         output[widget.fieldName] = self.apos.launder.select(input[widget.fieldName], choices);
       }
     };
+  },
+  extendMethods (self) {
+    return {
+      async output(_super, req, widget, options, _with) {
+        return _super(
+          req,
+          {
+            ...widget,
+            allowMultiple: (self.options.allowMultiple && widget.allowMultiple) ?? false,
+            size: widget.size ?? 0
+          },
+          options,
+          _with
+        );
+      }
+    };
   }
 };

modules/@apostrophecms/form-select-field-widget/views/widget.html

@@ -17,6 +17,7 @@
   <select
     class="apos-form-input {{ prependIfPrefix('__input') }}" id="{{ id }}"
     name="{{ widget.fieldName}}" {% if widget.required %}required{% endif %}
+    {% if widget.allowMultiple %}multiple {% if widget.size %}size="{{ widget.size }}"{% endif %}{% endif %}
   >
     <option value="">{{ __t("aposForm:selectBlank") }}</option>
     {% for choice in widget.choices %}