Skip to content
This repository has been archived by the owner on Jul 14, 2020. It is now read-only.

Commit

Permalink
Default Form actions (save, clear)
Browse files Browse the repository at this point in the history
ref #17 #24
  • Loading branch information
Sneki committed Jun 27, 2018
1 parent a06298d commit fb7e521
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 88 deletions.
33 changes: 15 additions & 18 deletions dev/data/form.json
Original file line number Diff line number Diff line change
Expand Up @@ -546,24 +546,21 @@
"value": true
}
],
"actions": [
{
"name": "htmlMarkup",
"type": "html",
"label": "Html Markup",
"value": "<h1>This is heading 1</h1>"
},
{
"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"
}
}
]
}
Expand Down
31 changes: 13 additions & 18 deletions dev/data/page.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -590,24 +603,6 @@
"disabled": false,
"persistentHint": false
}
],
"actions": [
{
"name": "htmlMarkup",
"type": "html",
"label": "Html Markup",
"value": "<h1>This is heading 1</h1>"
},
{
"name": "save",
"type": "button",
"label": "Save",
"color": "primary",
"theme": "dark",
"actions": {
"click": "save"
}
}
]
}
]
Expand Down
111 changes: 60 additions & 51 deletions src/components/CForm/CForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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];
},
Expand Down Expand Up @@ -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,
Expand All @@ -82,58 +134,15 @@ export default {
},
};

// TODO: Extract children render function
// Arrow function madness ahead
const children = createElement(
'v-form',
{
ref: this.config.name,
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),
],
);

Expand Down
102 changes: 101 additions & 1 deletion src/components/CForm/index.meta.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand All @@ -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',
Expand Down

0 comments on commit fb7e521

Please sign in to comment.