Form Component

fragments/datalist/hatch.js

@@ -0,0 +1,7 @@
+module.exports = {
+    convert: function($, f) {
+        f.wrap($, 'themecleanflex-components-block')
+        f.bindAttribute($.parent(),'model','model')
+        f.mapField($, 'storageData')
+    }
+}

fragments/datalist/model.json

@@ -0,0 +1,28 @@
+{
+  "definitions": {
+    "Datalist": {
+      "type": "object",
+      "x-type": "component",
+      "properties": {
+        "endpointurl": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Form submit endpoint URL",
+          "x-form-type": "text",
+          "x-default": ""
+        },
+        "loadFunction": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Javascript function to call to load data",
+          "x-form-hint": "Function must accept (name)",
+          "x-form-type": "text"
+        },
+        "bgref": {
+          "$ref": "fragments/block/model.json#/definitions/Block",
+          "x-form-type": "reference"
+        }
+      }
+    }
+  }
+}

fragments/datalist/sample.json

@@ -0,0 +1,7 @@
+{
+  "title": "Datalist",
+  "group": "",
+  "model": {
+    "text": "example"
+  }
+}

fragments/datalist/template.html

@@ -0,0 +1 @@
+<div>datalist</div>

fragments/datalist/template.vue

@@ -0,0 +1,23 @@
+<template>
+  <themecleanflex-components-block v-bind:model="model">
+    <div data-per-inline="storageData">{{storageData}}</div>
+  </themecleanflex-components-block>
+</template>
+
+<script>
+    export default {
+        props: ['model'],
+        data() {
+          return {
+            storageData: JSON.parse(localStorage.getItem('list'))
+          }
+        },
+        mounted() {
+          // interesting aspect :-) if another tab on the same computer
+          // has the same page open it actually updates
+           window.addEventListener('storage', () => {
+            this.storageData = JSON.parse(localStorage.getItem('list'))
+           });
+        }
+    }
+</script>

fragments/form/hatch.js

@@ -0,0 +1,45 @@
+module.exports = {
+    convert: function($, f) {
+        f.wrap($, 'themecleanflex-components-block')
+        f.bindAttribute($.parent(),'model','model')
+
+        const failureP = $.find('p').eq(0)
+        f.mapField(failureP,'failureText',false)
+        f.addIf(failureP, "failureText");
+        const schemaErrorP = $.find('p').eq(1)
+        f.mapField(schemaErrorP,'schemaError',false)
+        f.addIf(schemaErrorP, "schemaError");
+
+        const messageContainer = $.find('div').eq(0);
+        f.addIf(messageContainer, "( failureText || schemaError )");
+
+        const submit = $.find('input').first()
+        f.bindAttribute(submit,'value','model.submittext')
+
+        const formContainer = $.find('form').eq(0);
+        let formContainerClasses = `{
+            'justify-button-start': model.submitalignment === 'start',
+            'justify-button-center': model.submitalignment === 'center',
+            'justify-button-end': model.submitalignment === 'end',
+            'normal-button': model.submitsize === 'normal',
+            'sm-button': model.submitsize === 'small',
+            'lg-button': model.submitsize === 'large',
+            'full-button': model.submitsize === 'full',
+        }`
+        f.bindAttribute(formContainer, 'class', formContainerClasses, false);
+
+        const div2 = $.find('div').eq(1)
+        f.replace(div2, '<vue-form-generator></vue-form-generator>')
+
+        const formEl = $.find('form')
+        f.bindEvent(formEl,'submit.prevent.stop','onSubmit')
+
+        const form = $.find('vue-form-generator').first()
+        f.bindAttribute(form,'class','`w-full`', false)
+        f.bindAttribute(form,'model','formModel')
+        f.bindAttribute(form,'schema','schema')
+        f.bindAttribute(form,'options','formOptions')
+
+        f.bindPath($)
+    }
+}

fragments/form/model.json

@@ -0,0 +1,104 @@
+{
+  "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' target='_blank'>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": ""
+        },
+        "submittext": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Submit Button Text",
+          "x-form-type": "text",
+          "x-default": "Submit"
+        },
+        "submitsize": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Submit button size",
+          "x-form-type": "materialselect",
+          "x-default": "normal",
+          "properties":{
+            "section": {
+              "x-form-name": "normal",
+              "x-form-value": "normal"
+            },
+            "small": {
+              "x-form-name": "small",
+              "x-form-value": "small"
+            },
+            "large": {
+              "x-form-name": "large",
+              "x-form-value": "large"
+            },
+            "full": {
+              "x-form-name": "full width",
+              "x-form-value": "full"
+            }
+          }
+        },
+        "submitalignment": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Submit button alignment",
+          "x-form-type": "materialselect",
+          "x-default": "start",
+          "properties":{
+            "start": {
+              "x-form-name": "start",
+              "x-form-value": "start"
+            },
+            "center": {
+              "x-form-name": "center",
+              "x-form-value": "center"
+            },
+            "end": {
+              "x-form-name": "end",
+              "x-form-value": "end"
+            }
+          }
+        },
+        "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-all.json

@@ -0,0 +1,7 @@
+{
+  "title": "Form - Input Types",
+  "group": "Features",
+  "model": {
+    "schema": "{\n\"groups\":[\n{\n\"legend\":\"Text Inputs\",\n\"fields\": [\n  {\n    \"type\": \"label\",\n    \"label\": \"Label\",\n    \"model\": \"label\"\n  },{\n    \"type\": \"input\",\n    \"inputType\": \"text\",\n    \"label\": \"Text\",\n    \"model\": \"text\",\n    \"id\": \"text\",\n    \"placeholder\": \"Text\"\n  },{\n    \"type\": \"textArea\",\n    \"label\": \"Text Area\",\n    \"model\": \"textarea\",\n    \"id\": \"textarea\",\n    \"rows\": 4,\n    \"placeholder\": \"Enter text here\"\n  }\n  ]\n},\n{\n\"legend\":\"Other Inputs\",\n\"fields\": [\n  {\n    \"type\": \"radios\",\n    \"label\": \"Radios\",\n    \"model\": \"radios\",\n    \"values\": [\n      \"Option 1\",\n      \"Option 2\"\n    ]\n  },{\n    \"type\": \"checkbox\",\n    \"label\": \"Checkbox\",\n    \"model\": \"checkbox\",\n    \"default\": true\n  },{\n    \"type\": \"checklist\",\n    \"label\": \"Checklist\",\n    \"model\": \"checklist\",\n    \"listBox\": true,\n    \"values\": [\n      \"Option 1\",\n      \"Option 2\"\n    ]\n  },{\n    \"type\": \"select\",\n    \"label\": \"Select\",\n    \"model\": \"select\",\n    \"values\": [\n      \"Option 1\",\n      \"Option 2\"\n    ]\n  },{\n    \"type\": \"submit\",\n    \"buttonText\": \"Submit Button\",\n    \"validateBeforeSubmit\": false\n  }\n]}]}"
+  }
+}

fragments/form/sample-contact.json

@@ -0,0 +1,7 @@
+{
+  "title": "Form - Contact",
+  "group": "Features",
+  "model": {
+    "schema": "{\n\"fields\": [\n  {\n    \"type\": \"input\",\n    \"inputType\": \"text\",\n    \"label\": \"First Name\",\n    \"model\": \"first_name\",\n    \"id\": \"first_name\",\n    \"placeholder\": \"First Name\"\n  },{\n    \"type\": \"input\",\n    \"inputType\": \"text\",\n    \"label\": \"Last Name\",\n    \"model\": \"last_name\",\n    \"id\": \"last_name\",\n    \"placeholder\": \"Last Name\"\n  },{\n    \"type\": \"input\",\n    \"inputType\": \"text\",\n    \"label\": \"Email\",\n    \"model\": \"email\",\n    \"id\": \"email\",\n    \"placeholder\": \"Email\",\n    \"featured\": true,\n    \"required\": true\n  },{\n    \"type\": \"textArea\",\n    \"label\": \"Text\",\n    \"model\": \"text\",\n    \"id\": \"text\",\n    \"rows\": 4,\n    \"placeholder\": \"Enter text here\",\n    \"featured\": true,\n    \"required\": true\n  }\n]}"
+  }
+}

fragments/form/sample.json

@@ -0,0 +1,7 @@
+{
+  "title": "Form",
+  "group": "Features",
+  "model": {
+    "schema": "{\n\"fields\": [\n  {\n  \"type\": \"input\",\n    \"inputType\": \"text\",\n    \"label\": \"Name\",\n    \"model\": \"name\",\n    \"id\": \"user_name\",\n    \"placeholder\": \"Your name\",\n    \"featured\": true,\n    \"required\": true\n  }\n]}"
+  }
+}

fragments/form/template.html

@@ -0,0 +1,10 @@
+<div class="w-full">
+    <div class="text-black p-2 rounded-r mt-4 border-l-4 shadow-md note-important">
+        <p class="ml-2"></p>
+        <p class="ml-2"></p>
+    </div>
+    <form class="w-full flex flex-col">
+        <div></div>
+        <input class="btn mb-4" type="submit">
+    </form>
+</div>

fragments/form/template.vue

@@ -0,0 +1,94 @@
+<template>
+  <themecleanflex-components-block v-bind:model="model">
+    <div class="w-full" v-bind:data-per-path="model.path">
+      <div class="text-black p-2 rounded-r mt-4 border-l-4 shadow-md note-important"
+      v-if="( failureText || schemaError )">
+        <p class="ml-2" v-if="failureText">{{failureText}}</p>
+        <p class="ml-2" v-if="schemaError">{{schemaError}}</p>
+      </div>
+      <form class="w-full flex flex-col" v-bind:class="{
+            'justify-button-start': model.submitalignment === 'start',
+            'justify-button-center': model.submitalignment === 'center',
+            'justify-button-end': model.submitalignment === 'end',
+            'normal-button': model.submitsize === 'normal',
+            'sm-button': model.submitsize === 'small',
+            'lg-button': model.submitsize === 'large',
+            'full-button': model.submitsize === 'full',
+        }" v-on:submit.prevent.stop="onSubmit">
+        <vue-form-generator v-bind:class="`w-full`" v-bind:model="formModel" v-bind:schema="schema"
+        v-bind:options="formOptions"></vue-form-generator>
+        <input class="btn mb-4" type="submit" v-bind:value="model.submittext">
+      </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) {
+                  Vue.set(this, 'failureText', this.model.failmessage);
+                }
+              } catch(err) {
+                console.error(err)
+                Vue.set(this, 'failureText', this.model.failmessage);
+              }
+              return
+            }
+            parent = parent[objs[i]]
+            i++
+          }
+          console.log('window.' + this.model.submitfunction + ' not found')
+          Vue.set(this, 'failureText', this.model.failmessage);
+          return
+        }
+        axios.post(this.model.endpointurl, {
+            form: this.formModel
+        })
+        .then( (response) => {
+            $peregrineApp.loadContent(this.model.successpage)
+        })
+        .catch( (error) => {
+          Vue.set(this, 'failureText', this.model.failmessage);
+        })
+      }
+    },
+    computed: {
+      schema() {
+        try {
+          return JSON.parse(this.model.schema)
+        } catch( error ) {
+          return { fields: [] } 
+        }
+      },
+      schemaError() {
+        try {
+          JSON.parse(this.model.schema)
+        } catch( error ) {
+          return 'Error parsing form model: ' + error
+        }
+        return ''
+      }
+    }
+  }
+</script>
+

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

@@ -0,0 +1,4 @@
+<?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="Datalist" group="">
+  <jcr:content jcr:primaryType="nt:unstructured" text="example"/>
+</jcr:root>