Open
{{ field.name }}'s block settings to upload image.
@@ -100,9 +111,9 @@ export default {
type: Object,
required: true
},
- adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
+ adminPreview: {type: Boolean, default: false} // If used in FormEditorPreview
},
- data () {
+ data() {
return {}
},
@@ -128,7 +139,7 @@ export default {
/**
* Get the right input component for the field/options combination
*/
- getFieldComponents() {
+ getFieldComponents() {
const field = this.field
if (field.type === 'text' && field.multi_lines) {
return 'TextAreaInput'
@@ -150,27 +161,27 @@ export default {
}
return this.fieldComponents[field.type]
},
- isPublicFormPage () {
+ isPublicFormPage() {
return this.$route.name === 'forms.show_public'
},
- isFieldHidden () {
+ isFieldHidden() {
return !this.showHidden && this.shouldBeHidden
},
- shouldBeHidden () {
+ shouldBeHidden() {
return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isHidden()
},
- isFieldRequired () {
+ isFieldRequired() {
return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isRequired()
},
- isFieldDisabled () {
+ isFieldDisabled() {
return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isDisabled()
},
beingEdited() {
- return this.adminPreview && this.showEditFieldSidebar && this.form.properties.findIndex((item)=>{
+ return this.adminPreview && this.showEditFieldSidebar && this.form.properties.findIndex((item) => {
return item.id === this.field.id
}) === this.selectedFieldIndex
},
- selectionFieldsOptions () {
+ selectionFieldsOptions() {
// For auto update hidden options
let fieldsOptions = []
@@ -184,21 +195,28 @@ export default {
}
return fieldsOptions
+ },
+ fieldSideBarOpened() {
+ return this.adminPreview && (this.form && this.selectedFieldIndex !== null) ? (this.form.properties[this.selectedFieldIndex] && this.showEditFieldSidebar) : false
}
},
watch: {},
- mounted () {},
+ mounted() {
+ },
methods: {
- editFieldOptions () {
+ editFieldOptions() {
this.$store.commit('open/working_form/openSettingsForField', this.field)
},
+ openAddFieldSidebar() {
+ this.$store.commit('open/working_form/openAddFieldSidebar', this.field)
+ },
/**
* Get the right input component for the field/options combination
*/
- getFieldClasses () {
+ getFieldClasses() {
let classes = ''
if (this.adminPreview) {
classes += '-mx-4 px-4 -my-1 py-1 group/nffield relative transition-colors'
@@ -209,7 +227,7 @@ export default {
}
return classes
},
- getFieldWidthClasses (field) {
+ getFieldWidthClasses(field) {
if (!field.width || field.width === 'full') return 'w-full px-2'
else if (field.width === '1/2') {
return 'w-full sm:w-1/2 px-2'
@@ -223,7 +241,7 @@ export default {
return 'w-full sm:w-3/4 px-2'
}
},
- getFieldAlignClasses (field) {
+ getFieldAlignClasses(field) {
if (!field.align || field.align === 'left') return 'text-left'
else if (field.align === 'right') {
return 'text-right'
diff --git a/resources/js/components/open/forms/components/FormEditor.vue b/resources/js/components/open/forms/components/FormEditor.vue
index 1d10582..871a1ac 100644
--- a/resources/js/components/open/forms/components/FormEditor.vue
+++ b/resources/js/components/open/forms/components/FormEditor.vue
@@ -69,6 +69,7 @@
+
import {mapGetters} from 'vuex'
+import AddFormBlockSidebar from './form-components/AddFormBlockSidebar.vue'
import FormFieldEditSidebar from '../fields/FormFieldEditSidebar.vue'
import FormErrorModal from './form-components/FormErrorModal.vue'
import FormInformation from './form-components/FormInformation.vue'
@@ -103,6 +105,7 @@ import fieldsLogic from '../../../../mixins/forms/fieldsLogic.js'
export default {
name: 'FormEditor',
components: {
+ AddFormBlockSidebar,
FormFieldEditSidebar,
FormEditorPreview,
FormIntegrations,
diff --git a/resources/js/components/open/forms/components/FormFieldsEditor.vue b/resources/js/components/open/forms/components/FormFieldsEditor.vue
index 4abfbec..4521b04 100644
--- a/resources/js/components/open/forms/components/FormFieldsEditor.vue
+++ b/resources/js/components/open/forms/components/FormFieldsEditor.vue
@@ -1,8 +1,15 @@
-
+
+
+ Add block
+
+ class="w-full mt-3" color="light-gray"
+ @click="openAddFieldSidebar">