diff --git a/src/components/form_elements/formbuilder.js b/src/components/form_elements/formbuilder.js
index e991acb..1ed4fec 100644
--- a/src/components/form_elements/formbuilder.js
+++ b/src/components/form_elements/formbuilder.js
@@ -342,19 +342,19 @@ export const FormBuilder = new Vue({
}
},
methods: {
- deleteElement(index) {
- vm.$store.activeForm = [];
+ deleteElement(index, form) {
+ vm.$store.activeField = [];
vm.$store.activeTabForFields = "elements";
- vm.$delete(vm.$store.forms, index);
+ vm.$delete(form, index);
},
- cloneElement(index, form) {
- var cloned = _.cloneDeep(form) // clone deep lodash
- vm.$store.forms.splice(index, 0, cloned)
+ cloneElement(index, field, form) {
+ var cloned = _.cloneDeep(field) // clone deep lodash
+ form.splice(index, 0, cloned)
},
- editElementProperties(form) {
- vm.$store.activeForm = form;
+ editElementProperties(field) {
+ vm.$store.activeField = field;
vm.$store.activeTabForFields = "properties";
}
}
diff --git a/src/components/form_elements/properties/HtmlAdvancedProps.vue b/src/components/form_elements/properties/HtmlAdvancedProps.vue
index f4fb1db..5ba13b2 100644
--- a/src/components/form_elements/properties/HtmlAdvancedProps.vue
+++ b/src/components/form_elements/properties/HtmlAdvancedProps.vue
@@ -1,13 +1,13 @@
<template>
-<el-form-item label="Html Content" v-show="activeForm.hasOwnProperty('htmlContent')">
- <el-input :rows="16" type="textarea" v-model="activeForm.htmlContent">{{activeForm.htmlContent}}</el-input>
+<el-form-item label="Html Content" v-show="activeField.hasOwnProperty('htmlContent')">
+ <el-input :rows="16" type="textarea" v-model="activeField.htmlContent">{{activeField.htmlContent}}</el-input>
</el-form-item>
</template>
<script>
export default {
name: 'HtmlAdvancedProp',
- store: ['activeForm']
+ store: ['activeField']
}
</script>
diff --git a/src/components/form_elements/properties/NumberInputAdvancedProps.vue b/src/components/form_elements/properties/NumberInputAdvancedProps.vue
index 93f2489..d9b3ec6 100644
--- a/src/components/form_elements/properties/NumberInputAdvancedProps.vue
+++ b/src/components/form_elements/properties/NumberInputAdvancedProps.vue
@@ -3,19 +3,19 @@
<el-row>
<el-col :span="8">
<el-form-item label="Disabled">
- <el-switch v-model="activeForm.disabled"></el-switch>
+ <el-switch v-model="activeField.disabled"></el-switch>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="Step">
- <el-input-number v-model="activeForm.step" controls-position="right"></el-input-number>
+ <el-input-number v-model="activeField.step" controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="Step Strictly">
- <el-switch v-model="activeForm.stepStrictly"></el-switch>
+ <el-switch v-model="activeField.stepStrictly"></el-switch>
</el-form-item>
</el-col>
</el-row>
@@ -24,10 +24,10 @@
<el-form-item label="Min Value">
<el-row>
<el-col :span="6">
- <el-switch v-model="activeForm.hasMinValue"></el-switch>
+ <el-switch v-model="activeField.hasMinValue"></el-switch>
</el-col>
<el-col :span="18">
- <el-input-number v-show="activeForm.hasMinValue" v-model="activeForm.mix" controls-position="right"></el-input-number>
+ <el-input-number v-show="activeField.hasMinValue" v-model="activeField.mix" controls-position="right"></el-input-number>
</el-col>
</el-row>
</el-form-item>
@@ -36,10 +36,10 @@
<el-form-item label="Max Value">
<el-row>
<el-col :span="6">
- <el-switch v-model="activeForm.hasMaxValue"></el-switch>
+ <el-switch v-model="activeField.hasMaxValue"></el-switch>
</el-col>
<el-col :span="18">
- <el-input-number v-show="activeForm.hasMaxValue" v-model="activeForm.max" controls-position="right"></el-input-number>
+ <el-input-number v-show="activeField.hasMaxValue" v-model="activeField.max" controls-position="right"></el-input-number>
</el-col>
</el-row>
</el-form-item>
@@ -50,6 +50,6 @@
<script>
export default {
name: 'RatingAdvancedProp',
- store: ['activeForm']
+ store: ['activeField']
}
</script>
diff --git a/src/components/form_elements/properties/OptionsAdvancedProps.vue b/src/components/form_elements/properties/OptionsAdvancedProps.vue
index 00e2906..9649fc5 100644
--- a/src/components/form_elements/properties/OptionsAdvancedProps.vue
+++ b/src/components/form_elements/properties/OptionsAdvancedProps.vue
@@ -3,30 +3,30 @@
<el-row>
<el-col :span="6">
<el-form-item label="Remote Data Source">
- <el-switch v-model="activeForm.isFromUrl">{{activeForm.htmlContent}}</el-switch>
+ <el-switch v-model="activeField.isFromUrl">{{activeField.htmlContent}}</el-switch>
</el-form-item>
</el-col>
<el-col :span="18">
- <el-form-item label="Url" v-show="activeForm.isFromUrl" prop="dataUrl">
- <el-input v-model="activeForm.dataUrl"></el-input>
+ <el-form-item label="Url" v-show="activeField.isFromUrl" prop="dataUrl">
+ <el-input v-model="activeField.dataUrl"></el-input>
</el-form-item>
</el-col>
</el-row>
- <el-row v-show="activeForm.isFromUrl">
+ <el-row v-show="activeField.isFromUrl">
<el-col :span="4">
- <el-form-item label="Fetch Data" v-show="activeForm.labelField">
+ <el-form-item label="Fetch Data" v-show="activeField.labelField">
<el-button type="success" plain @click="fetchData">Fetch Data</el-button>
</el-form-item>
</el-col>
<el-col :span="10">
- <el-form-item label="Label Field" v-show="activeForm.labelField">
- <el-input v-model="activeForm.labelField"></el-input>
+ <el-form-item label="Label Field" v-show="activeField.labelField">
+ <el-input v-model="activeField.labelField"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
- <el-form-item label="Value Field" v-show="activeForm.valueField">
- <el-input v-model="activeForm.valueField"></el-input>
+ <el-form-item label="Value Field" v-show="activeField.valueField">
+ <el-input v-model="activeField.valueField"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -38,12 +38,12 @@ import fetchData from '@/api/fetch-data';
export default {
name: 'SelectListAdvancedProp',
- store: ['activeForm'],
+ store: ['activeField'],
methods: {
fetchData() {
- let dataUrl = this.activeForm.dataUrl;
- let valueField = this.activeForm.valueField;
- let labelField = this.activeForm.labelField;
+ let dataUrl = this.activeField.dataUrl;
+ let valueField = this.activeField.valueField;
+ let labelField = this.activeField.labelField;
if (!dataUrl) {
this.$message.error('Url can not be empty');
return;
@@ -59,7 +59,7 @@ export default {
let promise = fetchData.fetchOptionsData(dataUrl, labelField, valueField);
promise.then((data) => {
- this.activeForm.options = data;
+ this.activeField.options = data;
});
this.$message({
showClose: true,
diff --git a/src/components/form_elements/properties/Properties.vue b/src/components/form_elements/properties/Properties.vue
index d9195e4..5ce018b 100644
--- a/src/components/form_elements/properties/Properties.vue
+++ b/src/components/form_elements/properties/Properties.vue
@@ -3,30 +3,30 @@
<el-form :model="fieldProperties" :rules="rules" :label-position="labelPosition" ref="fieldProperties">
<el-row>
<el-col :span="12">
- <el-form-item label="Label Name" v-show="activeForm.hasOwnProperty('label')">
- <el-input v-model="activeForm.label">{{activeForm.label}}</el-input>
+ <el-form-item label="Label Name" v-show="activeField.hasOwnProperty('label')">
+ <el-input v-model="activeField.label">{{activeField.label}}</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="Label Width - px" v-show="activeForm.hasOwnProperty('label')">
- <el-input-number v-model="activeForm.labelWidth" :min="30" :max="1000" controls-position="right"></el-input-number>
+ <el-form-item label="Label Width - px" v-show="activeField.hasOwnProperty('label')">
+ <el-input-number v-model="activeField.labelWidth" :min="30" :max="1000" controls-position="right"></el-input-number>
</el-form-item>
</el-col>
</el-row>
- <el-form-item label="Height - px" v-show="activeForm.hasOwnProperty('fieldType') && activeForm['fieldType'] == 'Carousel'">
- <el-input-number v-model="activeForm.controlHeight" controls-position="right"></el-input-number>
+ <el-form-item label="Height - px" v-show="activeField.hasOwnProperty('fieldType') && activeField['fieldType'] == 'Carousel'">
+ <el-input-number v-model="activeField.controlHeight" controls-position="right"></el-input-number>
</el-form-item>
<!-- Show only when 'isPlacehodlerVisible' key exist -->
- <el-form-item label="Placeholder" v-show="activeForm.hasOwnProperty('isPlaceholderVisible') && activeForm['isPlaceholderVisible'] == true">
+ <el-form-item label="Placeholder" v-show="activeField.hasOwnProperty('isPlaceholderVisible') && activeField['isPlaceholderVisible'] == true">
<el-row>
<el-col :span="5">
- <el-switch v-model="activeForm.isPlaceholderVisible"></el-switch>
+ <el-switch v-model="activeField.isPlaceholderVisible"></el-switch>
</el-col>
<el-col :span="19 ">
- <el-input v-show="activeForm.isPlaceholderVisible" v-model="activeForm.placeholder">
- {{activeForm.placeholder}}
+ <el-input v-show="activeField.isPlaceholderVisible" v-model="activeField.placeholder">
+ {{activeField.placeholder}}
</el-input>
</el-col>
</el-row>
@@ -34,73 +34,73 @@
<el-row>
<el-col :span="12">
- <el-form-item label="Required field?" v-show="activeForm.hasOwnProperty('isRequired')">
- <el-switch v-model="activeForm.isRequired"></el-switch>
+ <el-form-item label="Required field?" v-show="activeField.hasOwnProperty('isRequired')">
+ <el-switch v-model="activeField.isRequired"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="Layout - Max value is 24" v-show="activeForm.hasOwnProperty('span')">
- <el-input-number v-model="activeForm.span" :min="1" :max="24" controls-position="right"></el-input-number>
+ <el-form-item label="Layout - Max value is 24" v-show="activeField.hasOwnProperty('span')">
+ <el-input-number v-model="activeField.span" :min="1" :max="24" controls-position="right"></el-input-number>
</el-form-item>
</el-col>
</el-row>
- <el-form-item label="Button text" v-show="activeForm.hasOwnProperty('buttonText')">
- <el-input v-model="activeForm.buttonText">
- {{activeForm.buttonText}}
+ <el-form-item label="Button text" v-show="activeField.hasOwnProperty('buttonText')">
+ <el-input v-model="activeField.buttonText">
+ {{activeField.buttonText}}
</el-input>
</el-form-item>
- <el-form-item label="Code view" v-show="activeForm.hasOwnProperty('fieldText')">
- <el-input v-model="activeForm.fieldText" type="textarea" :rows="10">
- {{activeForm.fieldText}}
+ <el-form-item label="Code view" v-show="activeField.hasOwnProperty('fieldText')">
+ <el-input v-model="activeField.fieldText" type="textarea" :rows="10">
+ {{activeField.fieldText}}
</el-input>
</el-form-item>
- <!-- <el-form-item label="Helpblock" v-show="activeForm.hasOwnProperty('isHelpBlockVisible')">
- <el-switch v-model="activeForm.isHelpBlockVisible"></el-switch>
- <el-input v-show="activeForm.isHelpBlockVisible" v-model="activeForm.helpBlockText">
- {{activeForm.helpBlockText}}
+ <!-- <el-form-item label="Helpblock" v-show="activeField.hasOwnProperty('isHelpBlockVisible')">
+ <el-switch v-model="activeField.isHelpBlockVisible"></el-switch>
+ <el-input v-show="activeField.isHelpBlockVisible" v-model="activeField.helpBlockText">
+ {{activeField.helpBlockText}}
</el-input>
</el-form-item> -->
<el-row>
<el-col :span="12">
- <el-form-item label="Active Text" v-show="activeForm.hasOwnProperty('activeText')">
- <el-input v-model="activeForm.activeText">{{activeForm.activeText}}</el-input>
+ <el-form-item label="Active Text" v-show="activeField.hasOwnProperty('activeText')">
+ <el-input v-model="activeField.activeText">{{activeField.activeText}}</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="Inactive Text" v-show="activeForm.hasOwnProperty('inActiveText')">
- <el-input v-model="activeForm.inActiveText">{{activeForm.inActiveText}}</el-input>
+ <el-form-item label="Inactive Text" v-show="activeField.hasOwnProperty('inActiveText')">
+ <el-input v-model="activeField.inActiveText">{{activeField.inActiveText}}</el-input>
</el-form-item>
</el-col>
</el-row>
- <el-form-item label="uploadURL" v-show="activeForm.hasOwnProperty('uploadURL')">
- <el-input v-model="activeForm.uploadURL">{{activeForm.uploadURL}}</el-input>
+ <el-form-item label="uploadURL" v-show="activeField.hasOwnProperty('uploadURL')">
+ <el-input v-model="activeField.uploadURL">{{activeField.uploadURL}}</el-input>
</el-form-item>
- <el-form-item label="Items" v-show="activeForm.hasOwnProperty('items')">
- <li v-for="(item, index) in activeForm.items" :key="index" class="properties__optionslist">
+ <el-form-item label="Items" v-show="activeField.hasOwnProperty('items')">
+ <li v-for="(item, index) in activeField.items" :key="index" class="properties__optionslist">
<el-row :gutter="5">
<el-col :span="20">
<el-input v-model="item.url">{{item.url}}</el-input>
</el-col>
<el-col :span="4">
- <el-button v-show="activeForm.items.length > 1">
+ <el-button @click="deleteOption(activeField.items, index)" v-show="activeField.items.length > 1">
<i class="el-icon-error"></i>
</el-button>
</el-col>
</el-row>
</li>
- <el-button type="text" @click="addItem(activeForm.items)">
+ <el-button type="text" @click="addItem(activeField.items)">
<i class="el-icon-plus"></i>
Add more
</el-button>
</el-form-item>
- <el-form-item label="Options" v-if="!activeForm.isFromUrl && activeForm.options">
+ <el-form-item label="Options" v-if="!activeField.isFromUrl && activeField.options">
<ul class="properties__optionsul">
<li class="properties__optionslist">
<el-row :gutter="5">
@@ -114,7 +114,7 @@
</el-col>
</el-row>
</li>
- <li v-for="(item, index) in activeForm.options" :key="index" class="properties__optionslist">
+ <li v-for="(item, index) in activeField.options" :key="index" class="properties__optionslist">
<el-row :gutter="5">
<el-col :span="10">
<el-input v-model="item.optionLabel">{{item.optionLabel}}</el-input>
@@ -123,20 +123,20 @@
<el-input v-model="item.optionValue">{{item.optionValue}}</el-input>
</el-col>
<el-col :span="4">
- <el-button @click="deleteOption(activeForm.options, index)" v-show="activeForm.options.length > 1">
+ <el-button @click="deleteOption(activeField.options, index)" v-show="activeField.options.length > 1">
<i class="el-icon-error"></i>
</el-button>
</el-col>
</el-row>
</li>
</ul>
- <el-button type="text" @click="addOption(activeForm.options)">
+ <el-button type="text" @click="addOption(activeField.options)">
<i class="el-icon-plus"></i>
Add more
</el-button>
</el-form-item>
- <el-form-item label="Table Columns" v-show="activeForm.fieldType === 'TableComponent'">
+ <el-form-item label="Table Columns" v-show="activeField.fieldType === 'TableComponent'">
<ul class="properties__optionsul">
<li class="properties__optionslist">
<el-row :gutter="5">
@@ -153,7 +153,7 @@
</el-col>
</el-row>
</li>
- <li v-for="(column, index) in activeForm.tableColumns" :key="index" class="properties__optionslist">
+ <li v-for="(column, index) in activeField.tableColumns" :key="index" class="properties__optionslist">
<el-row :gutter="5">
<el-col :span="7">
<el-input v-model="column.prop">{{column.prop}}</el-input>
@@ -165,34 +165,34 @@
<el-input @change="columnWidth" v-model="column.width">{{column.width}}</el-input>
</el-col>
<el-col :span="3">
- <el-button @click="deleteColumn(activeForm.tableColumns, index, column.prop)" v-show="activeForm.tableColumns.length > 1">
+ <el-button @click="deleteColumn(activeField.tableColumns, index, column.prop)" v-show="activeField.tableColumns.length > 1">
<i class="el-icon-error"></i>
</el-button>
</el-col>
</el-row>
</li>
</ul>
- <el-button type="text" @click="addColumn(activeForm.tableColumns)">
+ <el-button type="text" @click="addColumn(activeField.tableColumns)">
<i class="el-icon-plus"></i>
Add more
</el-button>
</el-form-item>
- <el-form-item label="Html Content" v-show="activeForm.hasOwnProperty('htmlContent')">
- <el-input :rows="10" type="textarea" v-model="activeForm.htmlContent">{{activeForm.htmlContent}}</el-input>
+ <el-form-item label="Html Content" v-show="activeField.hasOwnProperty('htmlContent')">
+ <el-input :rows="10" type="textarea" v-model="activeField.htmlContent">{{activeField.htmlContent}}</el-input>
</el-form-item>
- <el-button v-show="activeForm.hasOwnProperty('advancedOptions')" @click="advancedPropsVisible = true" style="width: 100%;" type="success">
+ <el-button v-show="activeField.hasOwnProperty('advancedOptions')" @click="advancedPropsVisible = true" style="width: 100%;" type="success">
Advanced Options
</el-button>
<el-dialog :close-on-click-modal="false" title="Advanced Options" :visible.sync="advancedPropsVisible">
<el-form ref="OptionsForm" :rules="dialogRules">
- <rating-advanced-props v-if="activeForm.fieldType === 'Rating'"></rating-advanced-props>
- <text-input-advanced-props v-if="activeForm.fieldType === 'TextInput'"></text-input-advanced-props>
- <html-advanced-props v-if="activeForm.fieldType === 'HtmlComponent'"></html-advanced-props>
- <number-input-advanced-props v-if="activeForm.fieldType === 'NumberInput'"></number-input-advanced-props>
- <select-list-advanced-props v-if="activeForm.fieldType === 'SelectList'"></select-list-advanced-props>
- <options-advanced-props v-if="activeForm.fieldType === 'RadioButton' || activeForm.fieldType === 'Checkbox'"></options-advanced-props>
+ <rating-advanced-props v-if="activeField.fieldType === 'Rating'"></rating-advanced-props>
+ <text-input-advanced-props v-if="activeField.fieldType === 'TextInput'"></text-input-advanced-props>
+ <html-advanced-props v-if="activeField.fieldType === 'HtmlComponent'"></html-advanced-props>
+ <number-input-advanced-props v-if="activeField.fieldType === 'NumberInput'"></number-input-advanced-props>
+ <select-list-advanced-props v-if="activeField.fieldType === 'SelectList'"></select-list-advanced-props>
+ <options-advanced-props v-if="activeField.fieldType === 'RadioButton' || activeField.fieldType === 'Checkbox'"></options-advanced-props>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmForm">Confirm</el-button>
@@ -221,7 +221,7 @@ export default {
OptionsAdvancedProps,
SelectListAdvancedProps
},
- store: ['activeForm'], // Get the form data from Home
+ store: ['activeField'], // Get the form data from Home
data() {
return {
labelPosition: 'top',
@@ -236,8 +236,8 @@ export default {
}
},
mounted() {
- console.log("activeform ->", this.activeForm)
- console.log("activeForm.hasOwnProperty('span') ->", this.activeForm.hasOwnProperty('span'))
+ console.log("activeField ->", this.activeField)
+ console.log("activeField.hasOwnProperty('span') ->", this.activeField.hasOwnProperty('span'))
},
methods: {
deleteOption(option, index) {
@@ -257,7 +257,7 @@ export default {
},
deleteColumn(column, index, prop) {
this.$delete(column, index)
- this.activeForm.tableDatas.forEach(function(ele) {
+ this.activeField.tableDatas.forEach(function(ele) {
delete ele[prop];
})
},
diff --git a/src/components/form_elements/properties/RatingAdvancedProps.vue b/src/components/form_elements/properties/RatingAdvancedProps.vue
index a077a45..a5d96db 100644
--- a/src/components/form_elements/properties/RatingAdvancedProps.vue
+++ b/src/components/form_elements/properties/RatingAdvancedProps.vue
@@ -4,8 +4,8 @@
<el-col :span="24">
<el-form-item label="Colors">
<el-row :gutter="3">
- <el-col :span="7" v-for="(color, index) in activeForm.colors" :key="index">
- <el-input v-model="activeForm.colors[index]"></el-input>
+ <el-col :span="7" v-for="(color, index) in activeField.colors" :key="index">
+ <el-input v-model="activeField.colors[index]"></el-input>
</el-col>
</el-row>
</el-form-item>
@@ -15,22 +15,22 @@
<el-row>
<el-col :span="12">
<el-form-item label="Show Text">
- <el-switch @change="showTextChange" v-model="activeForm.showText"></el-switch>
+ <el-switch @change="showTextChange" v-model="activeField.showText"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Disabled">
- <el-switch v-model="activeForm.disabled"></el-switch>
+ <el-switch v-model="activeField.disabled"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
- <el-form-item label="Texts" v-show="activeForm.showText">
+ <el-form-item label="Texts" v-show="activeField.showText">
<el-row :gutter="3">
- <el-col :span="4" v-for="(text, index) in activeForm.texts" :key="index">
- <el-input v-model="activeForm.texts[index]"></el-input>
+ <el-col :span="4" v-for="(text, index) in activeField.texts" :key="index">
+ <el-input v-model="activeField.texts[index]"></el-input>
</el-col>
</el-row>
</el-form-item>
@@ -40,12 +40,12 @@
<el-row>
<el-col :span="12">
<el-form-item label="Show Score">
- <el-switch @change="showScoreChange" v-model="activeForm.showScore"></el-switch>
+ <el-switch @change="showScoreChange" v-model="activeField.showScore"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="Score Unit" v-show="activeForm.showScore">
- <el-input v-model="activeForm.scoreUnit"></el-input>
+ <el-form-item label="Score Unit" v-show="activeField.showScore">
+ <el-input v-model="activeField.scoreUnit"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -56,7 +56,7 @@
export default {
name: 'RatingAdvancedProp',
- store: ['activeForm'],
+ store: ['activeField'],
data() {
return {
name: ''
@@ -64,13 +64,13 @@ export default {
},
methods: {
showTextChange(value) {
- if (value && this.activeForm.showScore) {
- this.activeForm.showScore = false;
+ if (value && this.activeField.showScore) {
+ this.activeField.showScore = false;
}
},
showScoreChange(value) {
- if (value && this.activeForm.showText) {
- this.activeForm.showText = false;
+ if (value && this.activeField.showText) {
+ this.activeField.showText = false;
}
}
}
diff --git a/src/components/form_elements/properties/SelectListAdvancedProps.vue b/src/components/form_elements/properties/SelectListAdvancedProps.vue
index 8b0ad82..9e03e00 100644
--- a/src/components/form_elements/properties/SelectListAdvancedProps.vue
+++ b/src/components/form_elements/properties/SelectListAdvancedProps.vue
@@ -4,38 +4,38 @@
<el-row>
<el-col :span="8">
<el-form-item label="Disabled">
- <el-switch v-model="activeForm.disabled"></el-switch>
+ <el-switch v-model="activeField.disabled"></el-switch>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="Clearable">
- <el-switch v-model="activeForm.clearable"></el-switch>
+ <el-switch v-model="activeField.clearable"></el-switch>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="Multiple">
- <el-switch v-model="activeForm.multiple"></el-switch>
+ <el-switch v-model="activeField.multiple"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="Filterable">
- <el-switch v-model="activeForm.filterable"></el-switch>
+ <el-switch v-model="activeField.filterable"></el-switch>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="Remote Search">
- <el-switch @change="remoteChange" v-model="activeForm.remote"></el-switch>
+ <el-switch @change="remoteChange" v-model="activeField.remote"></el-switch>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="Multiple">
- <el-switch v-model="activeForm.multiple"></el-switch>
+ <el-switch v-model="activeField.multiple"></el-switch>
</el-form-item>
</el-col>
</el-row>
@@ -47,15 +47,15 @@ import OptionsAdvancedProps from './OptionsAdvancedProps';
export default {
name: 'SelectListAdvancedProp',
- store: ['activeForm'],
+ store: ['activeField'],
components: {
OptionsAdvancedProps
},
methods: {
remoteChange(value) {
if (value) {
- this.activeForm.filterable = true;
- this.activeForm.isFromUrl = true;
+ this.activeField.filterable = true;
+ this.activeField.isFromUrl = true;
}
}
}
diff --git a/src/components/form_elements/properties/TextInputAdvancedProps.vue b/src/components/form_elements/properties/TextInputAdvancedProps.vue
index 95f3ab4..fcc5e29 100644
--- a/src/components/form_elements/properties/TextInputAdvancedProps.vue
+++ b/src/components/form_elements/properties/TextInputAdvancedProps.vue
@@ -3,17 +3,17 @@
<el-row>
<el-col :span="8">
<el-form-item label="Password">
- <el-switch @change="passwordChange" v-model="activeForm.showPassword"></el-switch>
+ <el-switch @change="passwordChange" v-model="activeField.showPassword"></el-switch>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="Disabled">
- <el-switch v-model="activeForm.disabled"></el-switch>
+ <el-switch v-model="activeField.disabled"></el-switch>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="Clearable">
- <el-switch v-model="activeForm.clearable"></el-switch>
+ <el-switch v-model="activeField.clearable"></el-switch>
</el-form-item>
</el-col>
</el-row>
@@ -21,12 +21,12 @@
<el-row>
<el-col :span="12">
<el-form-item label="Prepend">
- <el-input v-model="activeForm.prepend"></el-input>
+ <el-input v-model="activeField.prepend"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Append">
- <el-input v-model="activeForm.append"></el-input>
+ <el-input v-model="activeField.append"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -34,12 +34,12 @@
<el-row>
<el-col :span="12">
<el-form-item label="Show Word Limit">
- <el-switch @change="showWordLimitChange" v-model="activeForm.showWordLimit"></el-switch>
+ <el-switch @change="showWordLimitChange" v-model="activeField.showWordLimit"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="Word Limit" v-show="activeForm.showWordLimit">
- <el-input-number :min="1" v-model="activeForm.maxlength"></el-input-number>
+ <el-form-item label="Word Limit" v-show="activeField.showWordLimit">
+ <el-input-number :min="1" v-model="activeField.maxlength"></el-input-number>
</el-form-item>
</el-col>
</el-row>
@@ -49,7 +49,7 @@
<script>
export default {
name: 'RatingAdvancedProp',
- store: ['activeForm'],
+ store: ['activeField'],
data() {
return {
name: ''
@@ -58,12 +58,12 @@ export default {
methods: {
passwordChange(value) {
if (value) {
- this.activeForm.showWordLimit = false;
+ this.activeField.showWordLimit = false;
}
},
showWordLimitChange(value) {
if (value) {
- this.activeForm.showPassword = false;
+ this.activeField.showPassword = false;
}
}
}
diff --git a/src/store.js b/src/store.js
index 826289b..82409c2 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,5 +1,5 @@
export default {
forms: [],
- activeForm: [],
+ activeField: [],
activeTabForFields: 'elements'
}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0f1ac7c..40a4d42 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,35 +1,59 @@
<template>
<div>
<el-container>
- <el-main>
+ <el-main class="el-main-left">
<div class="wrapper--forms">
<el-form>
<el-row>
- <draggable :list="forms" class="dragArea" :group="{ name:'formbuilder', pull:false, put:true }" :sort="true" ghost-class="sortable__ghost">
- <!-- The form elements starts (on the right) -->
- <!-- <div> -->
- <el-col v-for="(form, index) in forms" :key="index" v-bind="form" :span="form.span" class="form__group" :class="{ 'is--active': form === activeForm }">
- <span class="form__selectedlabel">{{ form.fieldType }}</span>
-
- <div @click="editElementProperties(form)">
- <!-- <label class="form__label" v-model="form.label" v-show="form.hasOwnProperty('label')">{{ form.label }}</label> -->
- <component :is="form.fieldType" :currentField="form" class="form__field">
- </component>
- </div>
-
- <!-- Actions list -->
- <div class="form__actiongroup">
- <el-button circle size="mini" icon="el-icon-rank" class="form__actionitem--move"></el-button>
-
- <el-button-group class="form__actionlist">
- <el-button size="mini" icon="el-icon-plus" @click="cloneElement(index, form)" v-show="!form.isUnique"></el-button>
- <el-button size="mini" icon="el-icon-delete" @click="deleteElement(index)"></el-button>
- </el-button-group>
- </div>
- </el-col>
- <!-- </div> -->
- </draggable>
+ <el-button style="margin-bottom: 10px;" type="primary" @click="addSection">Add Section</el-button>
</el-row>
+
+ <el-row v-if="forms.length === 0">
+ <div class="empty-section">Please add Sections</div>
+ </el-row>
+
+ <template v-for="(eachFormObj, eachFormIndex) in forms">
+ <div :key="`div-${eachFormIndex}`" class="section-block">
+ <div class="source">
+ <el-row>
+ <el-col :span="18">
+ <el-input placeholder="Please input section title" v-model="eachFormObj.title" style="width: 100%;"></el-input>
+ </el-col>
+ <el-col :span="6">
+ <el-button type="danger" round style="float: right" @click="deleteSection(eachFormIndex, eachFormObj.title)">Delete Section</el-button>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="meta">
+ <el-row>
+ <draggable :list="eachFormObj.fields" class="dragArea" :group="{ name:'formbuilder', pull:false, put:true }" :sort="true" ghost-class="sortable__ghost">
+ <!-- The form elements starts (on the right) -->
+ <!-- <div> -->
+ <el-col v-for="(field, index) in eachFormObj.fields" :key="index" v-bind="field" :span="field.span" class="form__group" :class="{ 'is--active': field === activeField }">
+ <span class="form__selectedlabel">{{ field.fieldType }}</span>
+
+ <div @click="editElementProperties(field)">
+ <!-- <label class="form__label" v-model="form.label" v-show="form.hasOwnProperty('label')">{{ form.label }}</label> -->
+ <component :is="field.fieldType" :currentField="field" class="form__field">
+ </component>
+ </div>
+
+ <!-- Actions list -->
+ <div class="form__actiongroup">
+ <el-button circle size="mini" icon="el-icon-rank" class="form__actionitem--move"></el-button>
+
+ <el-button-group class="form__actionlist">
+ <el-button size="mini" icon="el-icon-plus" @click="cloneElement(index, field, eachFormObj.fields)" v-show="!field.isUnique"></el-button>
+ <el-button size="mini" icon="el-icon-delete" @click="deleteElement(index, eachFormObj.fields)"></el-button>
+ </el-button-group>
+ </div>
+ </el-col>
+ <!-- </div> -->
+ </draggable>
+ </el-row>
+ </div>
+ </div>
+ </template>
</el-form>
</div>
@@ -42,11 +66,11 @@
</el-tab-pane>
<el-tab-pane name="properties" label="Properties">
- <properties v-show="Object.keys($store.activeForm).length > 0"></properties>
+ <properties v-show="Object.keys($store.activeField).length > 0"></properties>
</el-tab-pane>
</el-tabs>
- <!--{{ $store.activeForm }}-->
+ <!--{{ $store.activeField }}-->
</el-aside>
</el-container>
</div>
@@ -59,7 +83,7 @@ import {
export default {
name: 'Home',
- store: ['forms', 'activeForm', 'activeTabForFields'],
+ store: ['forms', 'activeField', 'activeTabForFields'],
data() {
return {
sortElementOptions: FormBuilder.$data.sortElementOptions
@@ -67,19 +91,37 @@ export default {
},
mounted() {
console.log("form ->", this.forms)
- console.log("activeform ->", this.activeForm)
+ console.log("activeField ->", this.activeField)
},
components: FormBuilder.$options.components,
methods: {
- deleteElement(index) {
- FormBuilder.deleteElement(index)
+ deleteElement(index, form) {
+ FormBuilder.deleteElement(index, form)
},
- cloneElement(index, form) {
- FormBuilder.cloneElement(index, form)
+ cloneElement(index, field, form) {
+ FormBuilder.cloneElement(index, field, form)
},
- editElementProperties(form) {
+ editElementProperties(field) {
console.log("form ->", this.forms)
- FormBuilder.editElementProperties(form)
+ console.log("activeField ->", this.activeField)
+ FormBuilder.editElementProperties(field)
+ },
+ addSection() {
+ const formObj = {
+ title: "",
+ fields: []
+ };
+ this.forms.push(formObj);
+ },
+ deleteSection(formIndex, formTitle) {
+ this.$confirm(`Are you sure to delete the section ${formTitle}?`, 'Warning', {
+ confirmButtonText: 'OK',
+ cancelButtonText: 'Cancel',
+ type: 'warning'
+ }).then(() => {
+ this.$delete(this.forms, formIndex);
+ });
+
}
}
}
@@ -87,15 +129,27 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
+.empty-section {
+ text-align: center;
+ font-size: 40px;
+ background: linear-gradient(to bottom,#FFF,#409EFF);
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+}
+
.dragArea {
margin-left: auto;
margin-right: auto;
position: relative;
min-height: 10px;
- height: calc(60vh);
+ height: calc(30vh);
z-index: 2;
}
+.el-main-left {
+ height: calc(90vh);
+}
+
.form__selectedlabel {
display: none;
background: #ECF5FF;
@@ -156,4 +210,19 @@ export default {
}
}
}
+
+.section-block {
+ border: 1px solid #ebebeb;
+ border-radius: 3px;
+}
+
+.section-block .source {
+ padding: 10px
+}
+
+.section-block .meta {
+ background-color: #fafafa;
+ border-top: 1px solid #eaeefb;
+}
+
</style>
diff --git a/src/views/Preview.vue b/src/views/Preview.vue
index 3bc2cda..24fe1de 100644
--- a/src/views/Preview.vue
+++ b/src/views/Preview.vue
@@ -3,18 +3,21 @@
<el-container>
<el-main :style="cssProps">
<el-form>
- <el-row>
- <div class="wrapper--forms">
- <el-col v-for="(form, index) in forms" :key="index" :span="form.span" v-bind="form" class="form__group">
- <!-- <label class="form__label" v-model="form.label" v-show="form.hasOwnProperty('label')">{{ form.label }}</label> -->
- <component :is="form.fieldType" :currentField="form" class="form__field">
- </component>
- <!-- <small class="form__helpblock" v-model="form.helpBlockText" v-show="form.isHelpBlockVisible">
- {{ form.helpBlockText }}
- </small> -->
- </el-col>
- </div>
- </el-row>
+ <template v-for="(eachFormObj, eachFormIndex) in forms">
+ <el-divider :key="`divider-${eachFormIndex}`">{{ eachFormObj.title }}</el-divider>
+ <el-row :key="`row-${eachFormIndex}`">
+ <div class="wrapper--forms">
+ <el-col v-for="(field, index) in eachFormObj.fields" :key="index" :span="field.span" v-bind="field" class="form__group">
+ <!-- <label class="form__label" v-model="form.label" v-show="form.hasOwnProperty('label')">{{ form.label }}</label> -->
+ <component :is="field.fieldType" :currentField="field" class="form__field">
+ </component>
+ <!-- <small class="form__helpblock" v-model="form.helpBlockText" v-show="form.isHelpBlockVisible">
+ {{ form.helpBlockText }}
+ </small> -->
+ </el-col>
+ </div>
+ </el-row>
+ </template>
</el-form>
</el-main>
</el-container>