Form Component

fragments/form/hatch.js

@@ -0,0 +1,22 @@
+module.exports = {
+    convert: function($, f) {
+        f.wrap($, 'themecleanflex-components-block')
+        f.bindAttribute($.parent(),'model','model')
+
+        const failureP = $.find('p').first()
+        f.mapField(failureP,'failureText')
+
+        const div2 = $.find('div').eq(1)
+        f.replace(div2, '<vue-form-generator></vue-form-generator>')
+
+        const formEl = $.find('form')
+        f.bindEvent(formEl,'submit.prevent','onSubmit')
+
+        const form = $.find('vue-form-generator').first()
+        f.bindAttribute(form,'model','formModel')
+        f.bindAttribute(form,'schema','schema')
+        f.bindAttribute(form,'options','formOptions')
+
+        f.bindPath($)
+    }
+}

fragments/form/model.json

@@ -0,0 +1,51 @@
+{
+  "definitions": {
+    "Form": {
+      "type": "object",
+      "x-type": "component",
+      "properties": {
+        "schema": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Form Model",
+          "x-form-type": "textarea",
+          "x-form-hint": "JSON description passed to vue-form-generator, see <a href='https://vue-generators.gitbook.io/vue-generators/fields'>vue form generator fields documentation</a>",
+          "x-form-max": "16000"
+        },
+        "endpointurl": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Form submit endpoint URL",
+          "x-form-type": "text",
+          "x-default": ""
+        },
+        "submitfunction": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Javascript function to call on submit",
+          "x-form-hint": "Function must accept (model, formdata)",
+          "x-form-type": "text",
+          "x-default": "onSubmit"
+        },
+        "failmessage": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Failure Message",
+          "x-form-type": "text",
+          "x-default": "Error processing form"
+        },
+        "successpage": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-type": "pathbrowser",
+          "x-form-label": "Submit Success Page",
+          "x-form-browserRoot": "/content/themecleanflex/pages"
+        },
+        "bgref": {
+          "$ref": "fragments/block/model.json#/definitions/Block",
+          "x-form-type": "reference"
+        }
+      }
+    }
+  }
+}

fragments/form/sample-contact.json

@@ -0,0 +1,7 @@
+{
+  "title": "Form - Contact",
+  "group": "Features",
+  "model": {
+    "schema": "{}"
+  }
+}

fragments/form/sample.json

@@ -0,0 +1,7 @@
+{
+  "title": "Form",
+  "group": "Features",
+  "model": {
+    "schema": "{}"
+  }
+}

fragments/form/template.html

@@ -0,0 +1,9 @@
+<div>
+    <div>
+        <p></p>
+    </div>
+    <form>
+        <div></div>
+        <input type="submit">
+    </form>
+</div>

fragments/form/template.vue

@@ -0,0 +1,75 @@
+<template>
+  <themecleanflex-components-block v-bind:model="model">
+    <div v-bind:data-per-path="model.path">
+      <div>
+        <p data-per-inline="failureText">{{failureText}}</p>
+      </div>
+      <form v-on:submit.prevent="onSubmit">
+        <vue-form-generator v-bind:model="formModel" v-bind:schema="schema" v-bind:options="formOptions"></vue-form-generator>
+        <input type="submit">
+      </form>
+    </div>
+  </themecleanflex-components-block>
+</template>
+
+<script>
+export default {
+    props: ['model'],
+    data() {
+      return {
+        formModel: {},
+        formOptions: {
+          validateAfterChange: true
+        },
+        failureText: ''
+      }
+    },
+    methods: {
+      onSubmit(e) {
+        if(this.model.submitfunction != 'onSubmit' && this.model.submitfunction != '') {
+          const objs = this.model.submitfunction.split('.')
+          let parent = window
+          let i = 0
+          while(i < objs.length && parent[objs[i]]) {
+            if(i == objs.length-1) {
+              try {
+                const result = parent[objs[i]](this.model,this.formModel)
+                if(result === false) {
+                  this.failureText = this.model.failmessage
+                }
+              } catch(err) {
+                console.error(err)
+                this.failureText = this.model.failmessage
+              }
+              return
+            }
+            parent = parent[objs[i]]
+            i++
+          }
+          console.log('window.' + this.model.submitfunction + ' not found')
+          this.failureText = this.model.failmessage
+          return
+        }
+        axios.post(this.model.endpointurl, {
+            form: this.formModel
+        })
+        .then( (response) => {
+            $peregrineApp.loadContent(this.model.successpage)
+        })
+        .catch( (error) => {
+            this.failureText = this.model.failmessage
+        })
+      }
+    },
+    computed: {
+      schema() {
+        try {
+          return JSON.parse(this.model.schema)
+        } catch( error ) {
+          return { fields: [] } 
+        }
+      }
+    }
+  }
+</script>
+

ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/.content.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Form">
+  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+    <sample jcr:primaryType="nt:unstructured" title="Form" group="Features">
+      <jcr:content jcr:primaryType="nt:unstructured" schema="{}"/>
+    </sample>
+    <sample-contact jcr:primaryType="nt:unstructured" title="Form - Contact" group="Features">
+      <jcr:content jcr:primaryType="nt:unstructured" schema="{}"/>
+    </sample-contact>
+  </jcr:content>
+</jcr:root>