From 59a90cb965419c322e99dcf4b248480343701d6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Harouna=20Traor=C3=A9?= Date: Thu, 12 Oct 2023 15:04:34 +0200 Subject: [PATCH 01/12] add stepper widget and setup (wip) --- README.md | 3 +- i18n/en.json | 4 ++ lib/fields.js | 24 ++++++++++ .../form-stepper-widget/index.js | 44 +++++++++++++++++++ .../form-stepper-widget/views/widget.html | 7 +++ 5 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 modules/@apostrophecms/form-stepper-widget/index.js create mode 100644 modules/@apostrophecms/form-stepper-widget/views/widget.html diff --git a/README.md b/README.md index 9cdb953..d2dc1d2 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,8 @@ require('apostrophe')({ '@apostrophecms/form-checkboxes-field-widget': {}, '@apostrophecms/form-boolean-field-widget': {}, '@apostrophecms/form-conditional-widget': {}, - '@apostrophecms/form-divider-widget': {} + '@apostrophecms/form-divider-widget': {}, + '@apostrophecms/form-stepper-widget': {} } }); ``` diff --git a/i18n/en.json b/i18n/en.json index 9d02eef..bcb8bd1 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -82,6 +82,10 @@ "select": "Select input", "selectBlank": "", "selectChoice": "Select input options", + "stepper": "Stepper", + "stepperContentsHelp": "Multiple steps form", + "stepperLabel": "Step label", + "stepperSteps": "Steps", "submitLabel": "Submit button label", "templateOptional": "(Optional)", "text": "Text input", diff --git a/lib/fields.js b/lib/fields.js index 44f38b4..dfe94b9 100644 --- a/lib/fields.js +++ b/lib/fields.js @@ -7,9 +7,21 @@ module.exports = { sortify: true, required: true }, + hasStepper: { + label: 'aposForm:stepperIsEnabled', + type: 'boolean', + default: false + }, contents: { label: 'aposForm:formContents', type: 'area', + if: { + $or: [ + { hasStepper: false }, + { hasStepper: null }, + { hasStepper: undefined } + ] + }, options: { widgets: options.formWidgets || { '@apostrophecms/form-text-field': {}, @@ -35,6 +47,18 @@ module.exports = { label: 'aposForm:submitLabel', type: 'string' }, + steppedContent: { + label: 'aposForm:formContents', + type: 'area', + if: { + hasStepper: true + }, + options: { + widgets: { + '@apostrophecms/form-stepper': {} + } + } + }, thankYouHeading: { label: 'aposForm:thankYouTitle', type: 'string' diff --git a/modules/@apostrophecms/form-stepper-widget/index.js b/modules/@apostrophecms/form-stepper-widget/index.js new file mode 100644 index 0000000..8a5d42d --- /dev/null +++ b/modules/@apostrophecms/form-stepper-widget/index.js @@ -0,0 +1,44 @@ +module.exports = { + extend: '@apostrophecms/widget-type', + options: { + label: 'aposForm:stepper', + className: 'apos-form-stepper', + icon: 'file-multiple-outline-icon' + }, + icons: { + 'file-multiple-outline-icon': 'FileMultipleOutline' + }, + fields (self) { + // Prevent nester stepper + const form = self.options.apos.modules['@apostrophecms/form']; + const formWidgets = Object.assign({}, form.fields.contents.options.widgets); + delete formWidgets['@apostrophecms/form-stepper']; + + return { + add: { + steps: { + label: 'aposForm:stepperSteps', + type: 'array', + required: true, + titleField: 'label', + fields: { + label: { + label: 'aposForm:stepperLabel', + type: 'string', + required: true + }, + contents: { + label: 'aposForm:formContents', + help: 'aposForm:stepperContentsHelp', + type: 'area', + contextual: false, + options: { + widgets: formWidgets + } + } + } + } + } + }; + } +}; diff --git a/modules/@apostrophecms/form-stepper-widget/views/widget.html b/modules/@apostrophecms/form-stepper-widget/views/widget.html new file mode 100644 index 0000000..714b62c --- /dev/null +++ b/modules/@apostrophecms/form-stepper-widget/views/widget.html @@ -0,0 +1,7 @@ +{% set prependIfPrefix = apos.modules['@apostrophecms/form'].prependIfPrefix %} +
+ {% area data.widget, 'contents' %} +
From 9b71205c604bd62e4abc97588dd94b3e064a1088 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Harouna=20Traor=C3=A9?= Date: Fri, 13 Oct 2023 08:40:11 +0200 Subject: [PATCH 02/12] add stepper fieldset --- i18n/en.json | 2 ++ index.js | 6 ++++- lib/fields.js | 16 +++++------- .../form-stepper-widget/index.js | 26 ++++++++++--------- .../form-stepper-widget/views/widget.html | 16 +++++++----- .../form-widget/views/widget.html | 6 ++++- 6 files changed, 42 insertions(+), 30 deletions(-) diff --git a/i18n/en.json b/i18n/en.json index bcb8bd1..5a3613c 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -84,8 +84,10 @@ "selectChoice": "Select input options", "stepper": "Stepper", "stepperContentsHelp": "Multiple steps form", + "stepperIsEnabled": "Is multiple steps form?", "stepperLabel": "Step label", "stepperSteps": "Steps", + "stepperSubmitLabel": "Step submit button label", "submitLabel": "Submit button label", "templateOptional": "(Optional)", "text": "Text input", diff --git a/index.js b/index.js index 5227c7c..0790edd 100644 --- a/index.js +++ b/index.js @@ -33,7 +33,11 @@ module.exports = { const group = { basics: { label: 'aposForm:groupForm', - fields: [ 'contents' ] + fields: [ + 'hasStepper', + 'contents', + 'stepperContents' + ] }, afterSubmit: { label: 'aposForm:groupAfterSubmission', diff --git a/lib/fields.js b/lib/fields.js index dfe94b9..a231c29 100644 --- a/lib/fields.js +++ b/lib/fields.js @@ -16,11 +16,7 @@ module.exports = { label: 'aposForm:formContents', type: 'area', if: { - $or: [ - { hasStepper: false }, - { hasStepper: null }, - { hasStepper: undefined } - ] + hasStepper: false }, options: { widgets: options.formWidgets || { @@ -43,11 +39,7 @@ module.exports = { } } }, - submitLabel: { - label: 'aposForm:submitLabel', - type: 'string' - }, - steppedContent: { + stepperContents: { label: 'aposForm:formContents', type: 'area', if: { @@ -59,6 +51,10 @@ module.exports = { } } }, + submitLabel: { + label: 'aposForm:submitLabel', + type: 'string' + }, thankYouHeading: { label: 'aposForm:thankYouTitle', type: 'string' diff --git a/modules/@apostrophecms/form-stepper-widget/index.js b/modules/@apostrophecms/form-stepper-widget/index.js index 8a5d42d..f7e7713 100644 --- a/modules/@apostrophecms/form-stepper-widget/index.js +++ b/modules/@apostrophecms/form-stepper-widget/index.js @@ -22,18 +22,20 @@ module.exports = { required: true, titleField: 'label', fields: { - label: { - label: 'aposForm:stepperLabel', - type: 'string', - required: true - }, - contents: { - label: 'aposForm:formContents', - help: 'aposForm:stepperContentsHelp', - type: 'area', - contextual: false, - options: { - widgets: formWidgets + add: { + label: { + label: 'aposForm:stepperLabel', + type: 'string', + required: true + }, + contents: { + label: 'aposForm:formContents', + help: 'aposForm:stepperContentsHelp', + type: 'area', + contextual: false, + options: { + widgets: formWidgets + } } } } diff --git a/modules/@apostrophecms/form-stepper-widget/views/widget.html b/modules/@apostrophecms/form-stepper-widget/views/widget.html index 714b62c..381cc5a 100644 --- a/modules/@apostrophecms/form-stepper-widget/views/widget.html +++ b/modules/@apostrophecms/form-stepper-widget/views/widget.html @@ -1,7 +1,11 @@ {% set prependIfPrefix = apos.modules['@apostrophecms/form'].prependIfPrefix %} -
- {% area data.widget, 'contents' %} -
+{% for step in data.widget.steps %} +
+ {{ step.label }} + {% area step, 'contents' %} +
+{% endfor %} diff --git a/modules/@apostrophecms/form-widget/views/widget.html b/modules/@apostrophecms/form-widget/views/widget.html index c5403fa..d0c7053 100644 --- a/modules/@apostrophecms/form-widget/views/widget.html +++ b/modules/@apostrophecms/form-widget/views/widget.html @@ -26,7 +26,11 @@ data-apos-recaptcha-sitekey="{{ recaptchaSite }}" {% endif %} > - {% area form, 'contents' %} + {% if form.hasStepper != true %} + {% area form, 'contents' %} + {% elif form.hasStepper == true %} + {% area form, 'stepperContents' %} + {% endif %} {% if recaptchaReady %}