Jsonforms for form component

docs/datalist.md

@@ -0,0 +1,108 @@
+# Datalist Implementation
+
+### Quickstart
+The easiest way to get started with the Datalist is to use the <code>$formsapp</code> javascript connected to a form. This will store data into your local browser storage that will then be displayed in the datalist.
+
+Create a new page and add a Form component. Edit the form to use the following form model:
+
+    {
+    "fields": [
+      {
+      "type": "input",
+        "inputType": "text",
+        "label": "First Name",
+        "model": "firstName",
+        "id": "first_name",
+        "placeholder": "Your name",
+        "featured": true,
+        "required": true
+      },{
+      "type": "input",
+        "inputType": "text",
+        "label": "Last Name",
+        "model": "lastName",
+        "id": "last_name",
+        "placeholder": "Your name",
+        "featured": true,
+        "required": true
+      }
+    ]}
+
+- Endpoint URL: <code>list</code>
+- Submit Function: <code>$formsapp.save</code>
+
+Add a Datalist component. You can leave the *endpoint URL*, *load function*, and *delete function* blank. Add two columns
+in the *Table Configuration* with the following values:
+- Header: **First Name**
+- Data Value: **firstName**
+- Header: **Last Name**
+- Data Value: **lastName**
+
+Now, if you submit a first and last name through the form and refresh the page, your values should show up in the table.
+If you edit the Datalist component and turn on *Selectable Table* you will get the option to delete rows from the table.
+
+### Datalist Javascript Events
+
+#### datalist-storage-update
+The datalist component has an event listener for the <code>datalist-storage-update</code> event. If this event is fired, it will trigger a reload of the backing data. You can use this event in other javascript functions to force a reload when data has been changed. 
+
+See the **themecleanflex/pages/js/formsapp.js** <code>save()</code> function for an example of this in action.
+
+### Datalist Component Configuration
+
+#### Datalist Data Retrieval 
+If a endpoint URL is indicated, then the datalist will do an axios GET request with the table data to this URL. 
+
+The endpoint should return a list of objects.
+ex.
+
+    [{
+        "firstName": "Kyle",
+        "lastName": "Watson"
+    },{
+        "firstName": "Shane",
+        "lastName": "Mcgrath"
+    },{
+        "firstName": "Ben",
+        "lastName": "Kahn"
+    }]
+
+#### Javascript Function to Get Data
+Instead of the default GET endpoint behaviour, the user can configure a custom function to be called instead. This function can be part of any object as long as it can be accessed through the javascript window object.
+This function will be passed one parameter
+- Path - the endpoint URL specified in the configuration
+
+#### Javascript Function to Delete Data
+If the table is selectable, the user can configure a custom function to delete data. If the load function is defined, this function must also be defined for table delete action to work correctly. 
+The function will be passed three parameters:
+- Table Data - the data array currently backing the table
+- Active - a boolean array denoting which rows of the table data array are currently selected
+- Path - the endpoint URL specified in the configuration
+
+This function is expected to return a new data array with the selected rows removed.
+
+#### Table Configuration
+Add columns with any header value with the data value being a property in the objects returned by the endpoint/local storage.
+Each column takes three configuration options:
+- Header - The name to be displayed in the column header
+- Data Value - The data in the backing model to display in this column
+- Column Alignment - The horizontal alignment to render text in the cell.
+
+#### Row Alignment
+Defines the default row vertical alignment for the table.
+
+#### Striped Rows
+
+Adjusts colors of every other row in the table.
+
+#### Dense Table
+
+Lowers the spacing of the table cells.
+
+#### Scrollable Table
+
+Allows user to scroll through table results. Can adjust the height of the container and make the headers stick to the top of table when scrolling or not.
+
+#### Selectable Table
+
+Allows user to select table rows and perform actions on the rows selected.

docs/forms.md

@@ -0,0 +1,100 @@
+# Forms Implementation
+
+### Quickstart
+
+Check out the Datalist documentation for a quickstart using a form that saves to your local browser storage and shows the results in a table.
+
+This section will describe setting up a contact form that posts to an external URL.
+
+Create a new page and add the Form - Contact sample component. This component has a form model configured with a first name, last name, email, and text area.
+
+    {
+    "fields": [
+      {
+        "type": "input",
+        "inputType": "text",
+        "label": "First Name",
+        "model": "first_name",
+        "id": "first_name",
+        "placeholder": "First Name"
+      },{
+        "type": "input",
+        "inputType": "text",
+        "label": "Last Name",
+        "model": "last_name",
+        "id": "last_name",
+        "placeholder": "Last Name"
+      },{
+        "type": "input",
+        "inputType": "text",
+        "label": "Email",
+        "model": "email",
+        "id": "email",
+        "placeholder": "Email",
+        "featured": true,
+        "required": true
+      },{
+        "type": "textArea",
+        "label": "Text",
+        "model": "text",
+        "id": "text",
+        "rows": 4,
+        "placeholder": "Enter text here",
+        "featured": true,
+        "required": true
+      }
+    ]}
+
+Edit the component configuration and update the following:
+- Endpoint URL: *url you would like to post to*
+- Failure Message: "Error processing form"
+- Success Page: *path to page when form submits successfully*
+
+Now the form will attempt to do an AJAX post to the endpoint URL. If you put an invalid URL, you can see that the failure message will show up when the form attempts to submit. If the submission is successful (the POST request gets a 200 OK HTTP status), then peregrine will forward the user to the configured success page.
+
+### Form Javascript Events
+
+#### form-clear
+The form component has an event listener for the 
+
+### Form Component Configuration
+
+#### Form Model
+The Form Model takes a Vue Form Generator JSON configuration. For an example and a list of the configuration options for each type of field see the [Vue Form Generator fields documentation](https://vue-generators.gitbook.io/vue-generators/fields)
+
+Here is an example form with a single field called name:
+
+    {
+    "fields": [
+      {
+      "type": "input",
+        "inputType": "text",
+        "label": "Name",
+        "model": "name",
+        "id": "user_name",
+        "placeholder": "Your name",
+        "featured": true,
+        "required": true
+      }
+    ]}
+
+#### Form Submit Endpoint URL
+The form will do an ajax POST with the form data to this URL. If the response is successful, it will forward the user to the configured Submit Success Page.
+
+#### Javascript Function to Call on Submit
+Instead of the default POST behaviour, the user can configure a custom function to be called instead. This function can be part of any object as long as it can be accessed through the javascript window object. 
+It will be passed two parameters:
+- model - the Vue object model with the component configuration
+- formData - an object containing the form data
+
+#### Submit Button Text
+
+Configure the text for the submit button, defaults to "Submit"
+
+#### Failure Message
+
+If there is an error processing the form, this message will be shown in an error box above the form.
+
+#### Submit Success Page
+
+If not empty, on successful form submission it will forward the user to this page.

fragments/datalist/hatch.js

@@ -0,0 +1,188 @@
+module.exports = {
+    convert: function($, f) {
+        f.wrap($, 'themecleanflex-components-block')
+        f.bindAttribute($.parent(),'model','model')
+
+        const selectedContainer = $.find('div.selected').eq(0)
+        const selectedContainerClasses = `{
+            'hidden': active.filter(element => element === true).length === 0,
+        }`
+        f.bindAttribute(selectedContainer, 'class', selectedContainerClasses, false)
+        const mobileSelectAction = selectedContainer.find('.action').eq(0)
+        f.addIf(mobileSelectAction, '(model.mobiletablestyle === "" || model.mobiletablestyle === "default") && isMobile' )
+        f.bindEvent(mobileSelectAction, 'click', 'toggleAllRows');
+        f.addIf(mobileSelectAction.find('.unchecked'), '(!active.every(element => element === true) || active.length === 0)');
+        f.addElse(mobileSelectAction.find('.checked'));
+        const selectedText = selectedContainer.find('.selected-text').eq(0)
+        f.mapField(selectedText, '`${active.filter(element => element === true).length} selected`', false)
+        const actionDelete = selectedContainer.find('.selected-actions svg').eq(0)
+        f.bindEvent(actionDelete, 'click', 'deleteAction');
+
+        const desktopContainer = $.find('div.overflow-x-scroll').eq(0);
+        const desktopContainerClasses = `{
+            'overflow-y-scroll': model.scrollabletable === 'true',
+            'hidden': isMobile,
+        }`
+        f.bindAttribute(desktopContainer, 'class', desktopContainerClasses, false)
+        f.addStyle(desktopContainer, 'height', "(model.scrollabletable === 'true') ? model.tableheight + 'px' : 'auto'", false)
+
+        const mobileContainer = $.find('div.mobile-table').eq(0);
+        const mobileContainerClasses = `{
+            'hidden': !isMobile,
+        }`
+        f.bindAttribute(mobileContainer, 'class', mobileContainerClasses, false)
+
+        //default mobile style
+        const mobileDefaultBody = mobileContainer.find('tbody').eq(0);
+        f.addIf(mobileDefaultBody, 'model.mobiletablestyle === "" || model.mobiletablestyle === "default"' )
+
+        const mobileDefaultTr =  mobileContainer.find('tr.item-row').eq(0)
+        f.addFor(mobileDefaultTr, 'model.columns', 'col')
+        mobileDefaultTr.attr(':key', `data.path || j`)
+        f.addStyle(mobileDefaultTr, 'background', "active[j] ? 'var(--color-red-500) !important' : ''")
+
+        const mobileDefaultAction = mobileDefaultBody.find('td.action-head').eq(0)
+        f.addStyle(mobileDefaultAction, 'background', "active[j] ? 'var(--color-red-500) !important' : ''")
+        f.addIf(mobileDefaultAction, 'i === 0')
+        f.addIf(mobileDefaultAction.find('.unchecked'), '!active[j]');
+        f.addIf(mobileDefaultAction.find('.checked'), 'active[j]')
+        f.addStyle(mobileDefaultAction.find('.checked'), 'fill',"active[j] ? 'var(--text-secondary-color) !important' : ''");
+        f.bindEvent(mobileDefaultAction.find('.action').eq(0), 'click', 'toggleRow(j)');
+
+        const mobileDefaultActionSpacer = mobileDefaultBody.find('td.mobile-action-spacer').eq(0)
+        f.addIf(mobileDefaultActionSpacer, 'i !== 0')
+        f.addStyle(mobileDefaultActionSpacer, 'background', "active[j] ? 'var(--color-red-500) !important' : ''")
+
+        f.mapField(mobileDefaultBody.find('td.mobile-header').eq(0), 'col.header', false)
+        mobileDefaultBody.find('td.mobile-header').eq(0).attr(':key', `col.path || i`)
+
+        f.mapField(mobileDefaultBody.find('td.mobile-item').eq(0), 'data[col.value]', false)
+        f.addStyle(mobileDefaultBody.find('td.mobile-item').eq(0), 'background', "active[j] ? 'var(--color-red-500) !important' : ''")
+        f.addStyle(mobileDefaultBody.find('td.mobile-item').eq(0), 'color',"active[j] ? 'var(--text-secondary-color) !important' : ''");
+
+        f.wrap(mobileDefaultTr, 'template')
+
+        const mobileTemplate = mobileDefaultBody.find('template').first();
+        mobileTemplate.attr('v-for', `(data, j) in storageData`)
+        f.addIf(mobileTemplate, 'rowHasData(data,model.columns)')
+
+        //scroll mobile style
+        const scrollMobileBody = mobileContainer.find('tbody').eq(1)
+        f.addElse(scrollMobileBody)
+        const mobileScrollActionTr = scrollMobileBody.find('tr.action-row').eq(0)
+        const mobileScrollAction = scrollMobileBody.find('td.action-item').eq(0)
+        f.addFor(mobileScrollAction, 'storageData', 'data')
+        f.addIf(mobileScrollAction, 'rowHasData(data,model.columns)')
+        f.addIf(mobileScrollAction.find('.unchecked'), '!active[i]');
+        f.addIf(mobileScrollAction.find('.checked'), 'active[i]');
+        f.addStyle(mobileScrollAction, 'background', "active[i] ? 'var(--color-red-500) !important' : ''")
+        f.addStyle(mobileScrollAction.find('.checked'), 'fill',"active[i] ? 'var(--text-secondary-color) !important' : ''");
+        f.bindEvent(mobileScrollAction.find('.action').eq(0), 'click', 'toggleRow(i)');
+
+        const mobileScrollActionAll = mobileScrollActionTr.find('td.action-item-all').eq(0)
+        f.addIf(mobileScrollActionAll.find('.unchecked'), '(!active.every(element => element === true) || active.length === 0)');
+        f.addElse(mobileScrollActionAll.find('.checked'));
+        f.bindEvent(mobileScrollActionAll.find('.action').eq(0), 'click', 'toggleAllRows');
+
+        const mobileScrollBodyTr = scrollMobileBody.find('tr.item-row').first()
+        f.addFor(mobileScrollBodyTr, 'model.columns', 'col')
+
+        const mobileScrollTd = mobileScrollBodyTr.find('td').first()
+        mobileScrollTd.attr('v-for', `(data, j) in storageData`)
+        mobileScrollTd.attr(':key', `data.path || j`)
+        f.addIf(mobileScrollTd, 'rowHasData(data,model.columns)')
+        f.mapField(mobileScrollTd, 'data[col.value]', false)
+        f.addStyle(mobileScrollTd, 'background', "active[j] ? 'var(--color-red-500) !important' : ''")
+
+        mobileScrollBodyTr.prepend("<td class='mobile-header'>{{col.header}}</td>")
+
+        const mobileTdClasses = `{
+            'border': model.cellborders === 'true', 
+            'p-3': model.densetable !== 'true', 
+            'p-1': model.densetable === 'true',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
+        }`
+        f.bindAttribute($.find('.mobile-table td'), 'class', mobileTdClasses, false)
+
+        //desktop
+        const table = $.find('table')
+        const tableClasses = `{
+            'striped': model.stripedrows === 'true'
+        }`
+        f.bindAttribute(table, 'class', tableClasses, false)
+
+        const thText = $.find('th.header-item').first()
+        f.addFor(thText, 'model.columns', 'col')
+        const thTextClasses = `{
+            'p-3': model.densetable !== 'true',
+            'p-1': model.densetable === 'true',
+            'sticky': model.stickyheader === 'true',
+            'top-0': model.stickyheader === 'true',
+            'text-left':  (col && col.textalignment === 'left') ||  (col && col.textalignment === ''),
+            'text-center': col && col.textalignment === 'center',
+            'text-right':  col && col.textalignment === 'right',
+        }`
+        f.bindAttribute(thText, 'class', thTextClasses, false)
+        f.mapField(thText.find('span'), 'col.header', false)
+
+        const thAction = $.find('th.action-head').first()
+        f.addIf(thAction, "model.selectable === 'true'")
+        f.addIf(thAction.find('.unchecked'), '(!active.every(element => element === true) || active.length === 0)');
+        f.addElse(thAction.find('.checked'));
+        f.bindEvent(thAction.find('.action').eq(0), 'click', 'toggleAllRows');
+        f.bindAttribute(thAction, 'class', thTextClasses, false)
+
+        const tbody = $.find('tbody').first()
+        const tr = tbody.find('tr').first()
+        const tdItem = tr.find('td.item').first()
+        tr.attr('v-for', `(data, j) in storageData`)
+        tr.attr(':key', `data.path || j`)
+        f.addIf(tr, 'rowHasData(data,model.columns)')
+
+        f.addFor(tdItem, 'model.columns', 'col')
+        f.mapField(tdItem.find('span.item-text'), 'data[col.value]', false)
+
+        const tdClasses = `{
+            'border': model.cellborders === 'true',
+            'p-3': model.densetable !== 'true',
+            'p-1': model.densetable === 'true',
+            'text-left':  (col && col.textalignment === 'left') ||  (col && col.textalignment === ''),
+            'text-center':  col && col.textalignment === 'center',
+            'text-right':  col && col.textalignment === 'right',
+            'align-top':  model.rowalignment === 'top' ||  model.rowalignment === '',
+            'align-center':  model.rowalignment === 'center',
+            'align-bottom':  model.rowalignment === 'bottom'
+        }`    
+        f.bindAttribute(tdItem, 'class', tdClasses, false)
+        f.addStyle(tdItem, 'background', "active[j] ? 'var(--color-red-500) !important' : ''")
+
+        f.addStyle(tdItem.find('span.item-text'), 'color',"active[j] ? 'var(--text-secondary-color) !important' : ''");
+
+        const tdAction = $.find('td.action-item').first()
+        f.addStyle(tdAction, 'background', "active[j] ? 'var(--color-red-500) !important' : ''")
+        f.addIf(tdAction, "model.selectable === 'true'")
+        f.addIf(tdAction.find('.unchecked'), '!active[j]');
+        f.addIf(tdAction.find('.checked'), 'active[j]');
+        f.addStyle(tdAction.find('.checked'), 'fill',"active[j] ? 'var(--text-secondary-color) !important' : ''");
+        f.bindEvent(tdAction.find('.action').eq(0), 'click', 'toggleRow(j)');
+        f.bindAttribute(tdAction, 'class', tdClasses, false)
+
+        const caption = $.find('caption')
+        const captionClasses = `{
+            'text-left': model.captionalignment === 'left',
+            'text-center': model.captionalignment === 'center',
+            'text-right': model.captionalignment === 'right',
+            'p-3': model.densetable !== 'true',
+            'p-1': model.densetable === 'true',
+            'hidden': model.caption !== 'true'
+        }`
+        f.bindAttribute(caption, 'class', captionClasses, false)
+        f.addStyle(caption, 'caption-side', "model.captionplacement", false);
+        f.mapField(caption, 'model.captiontext')
+
+        f.addElse($);
+        $.parent().prepend('<div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>')
+    }
+}