add submit listener to rpl-form, flagged emitter on optionbutton, dem…

…o story (#1184)
dpc-sdp · Apr 14, 2022 · 3eedd15 · 3eedd15
1 parent 7969239
commit 3eedd15
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
diff --git a/packages/components/Molecules/Form/Form.stories.mdx b/packages/components/Molecules/Form/Form.stories.mdx
@@ -429,3 +429,69 @@ export const formData = {
   </Story>
 </Canvas>
 
+export const optBtnFormData = {
+  model: {
+    text: null,
+    title_az: ''
+  },
+  schema: {
+    fields: [
+      {
+        type: 'input',
+        inputType: 'text',
+        label: 'Search',
+        hint: '',
+        placeholder: 'Keyword',
+        model: 'text'
+      },
+      {
+        type: 'rploptionbutton',
+        label: 'Option button default',
+        model: 'title_az',
+        submitOnClick: true
+      }
+    ],
+    groups: [
+      {
+        fields: [
+          {
+            type: 'rplsubmitloader',
+            buttonText: 'Submit (with animation)',
+            loading: false,
+            autoUpdate: true,
+            styleClasses: ['form-group--inline']
+          },
+          {
+            type: 'rplclearform',
+            buttonText: 'Clear search filters',
+            styleClasses: ['form-group--inline']
+          }
+        ]
+      }
+    ]
+  },
+  tag: 'rpl-fieldset',
+  formOptions: {
+    validateAfterLoad: false,
+    validateAfterChanged: false
+  },
+  formState: {}
+};
+
+<Canvas>
+  <Story
+    name="Option button, submit on click"
+    args={{
+      formData: optBtnFormData,
+      title: 'Option button, submit on click',
+      fullWidth: false,
+      isNewModel: true,
+      options: {
+        validateAfterChanged: false,
+        validateAfterLoad: false
+      }
+    }}
+  >
+    {TemplateForm.bind({})}
+  </Story>
+</Canvas>
diff --git a/packages/components/Molecules/Form/fields/fieldRploptionbutton.vue b/packages/components/Molecules/Form/fields/fieldRploptionbutton.vue
@@ -9,6 +9,7 @@
 
 <script>
 import { abstractField } from 'vue-form-generator'
+import { RplFormEventBus } from '@dpc-sdp/ripple-form'
 
 export default {
   name: 'RplOptionButton',
@@ -29,6 +30,9 @@ export default {
     },
     onSelection (item) {
       this.value = item
+      if (this.schema.submitOnClick) {
+        RplFormEventBus.$emit('submitform')
+      }
     },
     isItemChecked (item) {
       return (item === this.value)

diff --git a/packages/components/Molecules/Form/index.vue b/packages/components/Molecules/Form/index.vue
@@ -86,6 +86,8 @@ export default {
       RplFormEventBus.$on('clearform', this.clearForm)
     }
 
+    RplFormEventBus.$on('submitform', this.onSubmit)
+
     // TODO: We should abstract all future custom validators to a separate file and import them here.
     VueFormGenerator.validators.rplWordCount = function (value, field) {
       let wordCount = value ? value.trim().split(/\s+/).length : 0