From fb7e521470965dc7e842495d3d9557919c0569b9 Mon Sep 17 00:00:00 2001 From: Snjezana Dreznjak Date: Wed, 27 Jun 2018 10:52:40 +0200 Subject: [PATCH] Default Form actions (save, clear) ref #17 #24 --- dev/data/form.json | 33 ++++----- dev/data/page.json | 31 ++++---- src/components/CForm/CForm.js | 111 ++++++++++++++++------------- src/components/CForm/index.meta.js | 102 +++++++++++++++++++++++++- 4 files changed, 189 insertions(+), 88 deletions(-) diff --git a/dev/data/form.json b/dev/data/form.json index f58b8866..f62313c9 100644 --- a/dev/data/form.json +++ b/dev/data/form.json @@ -546,24 +546,21 @@ "value": true } ], - "actions": [ - { - "name": "htmlMarkup", - "type": "html", - "label": "Html Markup", - "value": "

This is heading 1

" - }, - { - "name": "save", - "type": "button", - "label": "Save", - "color": "primary", - "theme": "light", - "actions": { - "click": "save" - } - } - ] + "enabled": false, + "save": { + "name": "save_button", + "action": "save", + "label": "Save", + "color": "primary", + "theme": "light" + }, + "clear": { + "name": "clear_button", + "action": "clear", + "label": "Clear", + "color": "red", + "theme": "light" + } } ] } diff --git a/dev/data/page.json b/dev/data/page.json index a4910004..52459aab 100644 --- a/dev/data/page.json +++ b/dev/data/page.json @@ -42,6 +42,19 @@ "name": "person", "color": "", "theme": "", + "enabled": true, + "save": { + "name": "save_button", + "label": "Submit", + "color": "primary", + "theme": "dark" + }, + "clear": { + "name": "clear_button", + "label": "Clear", + "color": "red", + "theme": "dark" + }, "elements": [ { "name": "firstName", @@ -590,24 +603,6 @@ "disabled": false, "persistentHint": false } - ], - "actions": [ - { - "name": "htmlMarkup", - "type": "html", - "label": "Html Markup", - "value": "

This is heading 1

" - }, - { - "name": "save", - "type": "button", - "label": "Save", - "color": "primary", - "theme": "dark", - "actions": { - "click": "save" - } - } ] } ] diff --git a/src/components/CForm/CForm.js b/src/components/CForm/CForm.js index 27ee41b3..02328cb8 100644 --- a/src/components/CForm/CForm.js +++ b/src/components/CForm/CForm.js @@ -11,6 +11,49 @@ const getComponentTag = (name, context) => { const uuid = () => v4(); +const getFormActions = (context, createElement) => { + if (!context.formActionsStatus) return false; + + return createElement( + 'v-card-actions', + map(context.formActions, (button, action) => createElement( + getComponentTag('button', context), + { + props: { + definition: button, + }, + key: `${button.name}_${uuid()}`, + on: { + click() { + context[action](); + }, + }, + })), + ); +}; + +const getFormInputs = (context, createElement) => createElement( + 'v-card-text', + { + staticClass: `${context.$options.name}-items`, + }, + map(context.getFields(), field => createElement( + getComponentTag(field.type, context), + { + props: { + definition: field, + }, + on: { + input(value) { + const currentField = field; + currentField.value = value; + context.$emit('input', value); + }, + }, + }, + )), +); + export default { extends: Element, provide() { @@ -21,14 +64,20 @@ export default { }; }, computed: { + formActions() { + return { + save: this.config.save, + clear: this.config.clear, + }; + }, + formActionsStatus() { + return this.config.enabled; + }, entity() { return this.getEntity(); }, }, methods: { - getActions() { - return filter(this.config.actions, n => !isNil(n.actions)); - }, getForm() { return this.$refs[this.config.name]; }, @@ -60,19 +109,22 @@ export default { return errors; }, + clear() { + console.log('Clear actions TODO'); + }, save() { const formName = this.config.name; const form = this.$refs[formName]; - if (form.validate()) { + console.log('TODO SAVE form ', form); + /* if (form.validate()) { this.sendToEventBus('Saved', this.getEntity()); } else { this.sendToEventBus('Errored', this.getErrors()); - } + } */ }, }, render(createElement) { const context = this; - const data = { props: { color: context.config.color, @@ -82,8 +134,6 @@ export default { }, }; - // TODO: Extract children render function - // Arrow function madness ahead const children = createElement( 'v-form', { @@ -91,49 +141,8 @@ export default { staticClass: `${this.$options.name} ${context.baseChildrenClass}`, }, [ - createElement( - 'v-card-text', - { - staticClass: `${context.$options.name}-items`, - }, - map(this.getFields(), (field) => { - const self = this; - return createElement( - getComponentTag(field.type, this), - { - props: { - definition: field, - }, - // TODO: Expand field listeners if needed - // Should fields be able to trigger flow? - on: { - input(value) { - const currentField = field; - currentField.value = value; - self.$emit('input', value); - }, - }, - }, - ); - }), - ), - createElement( - 'v-card-actions', - map(this.getActions(), button => createElement(this.getElementTag('button'), - { - // Dynamic key to disable component re-use - key: `${button.name}_${uuid()}`, - props: { - definition: button, - }, - on: { - click() { - context.save(); - }, - }, - }, - )), - ), + getFormInputs(this, createElement), + getFormActions(this, createElement), ], ); diff --git a/src/components/CForm/index.meta.js b/src/components/CForm/index.meta.js index 24cbf4b0..8846a3e1 100644 --- a/src/components/CForm/index.meta.js +++ b/src/components/CForm/index.meta.js @@ -3,16 +3,33 @@ export default { type: 'form', name: 'Form', icon: 'subtitles', + optionGroups: { + save: { + key: 'save', + name: 'Default Save Action', + }, + clear: { + key: 'clear', + name: 'Default Clear Action', + }, + }, actions: [ { name: 'save', - help: 'Save form', + help: 'Save Form', + }, + { + name: 'clear', + help: 'Clear Form', }, ], events: [ { name: 'Saved', }, + { + name: 'Cleared', + }, { name: 'Errored', }, @@ -26,6 +43,89 @@ export default { priority: 1, }, theme: true, + enabled: { + type: 'check', + name: 'Enable Default Actions', + value: true, + }, + save: { + type: 'group', + group: 'save', + label: { + type: 'input', + name: 'Button Label', + value: 'Save', + }, + color: { + type: 'colorPicker', + name: 'Color', + value: '', + }, + icon: { + type: 'check', + name: 'Icon', + value: false, + }, + round: { + type: 'check', + name: 'Round Button', + value: false, + }, + flat: { + type: 'check', + name: 'No Background', + value: false, + }, + block: { + type: 'check', + name: '100% Width', + value: false, + }, + depressed: { + type: 'check', + name: 'No Shadow', + value: false, + }, + }, + clear: { + type: 'group', + group: 'clear', + label: { + type: 'input', + name: 'Button Label', + value: 'Clear', + }, + color: { + type: 'colorPicker', + name: 'Color', + value: '', + }, + icon: { + type: 'check', + name: 'Icon', + value: false, + }, + round: { + type: 'check', + name: 'Round Button', + value: false, + }, + flat: { + type: 'check', + name: 'No Background', + value: false, + }, + block: { + type: 'check', + name: '100% Width', + value: false, + }, + depressed: { + type: 'check', + name: 'No Shadow', + value: false, + }, + }, }, children: [ 'inputs',