On Form Preview field's modal & drag (#159)
* On Form Preview field's modal & drag * fix typo * remove extra code * fix page break
This commit is contained in:
formsdev
GitHub
parent
7e75343495
commit
11ad626a72
|
|
@ -87,6 +87,7 @@
|
|||
:loading="loading"
|
||||
:fields="form.properties"
|
||||
:theme="theme"
|
||||
:admin-preview="adminPreview"
|
||||
@submit="submitForm"
|
||||
>
|
||||
<template #submit-btn="{submitForm}">
|
||||
|
|
@ -136,7 +137,8 @@ export default {
|
|||
|
||||
props: {
|
||||
form: { type: Object, required: true },
|
||||
creating: { type: Boolean, default: false } // If true, fake form submit
|
||||
creating: { type: Boolean, default: false }, // If true, fake form submit
|
||||
adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
|
||||
},
|
||||
|
||||
mixins: [FormPendingSubmissionKey],
|
||||
|
|
|
|||
|
|
@ -7,35 +7,28 @@
|
|||
<form v-else-if="dataForm" @submit.prevent="">
|
||||
<transition name="fade" mode="out-in" appear>
|
||||
<template v-for="group, groupIndex in fieldGroups">
|
||||
<div v-if="currentFieldGroupIndex===groupIndex" :key="groupIndex" class="form-group flex flex-wrap w-full">
|
||||
<template v-for="field in group">
|
||||
<component :is="getFieldComponents(field)" v-if="getFieldComponents(field)"
|
||||
:key="field.id + formVersionId" :class="getFieldClasses(field)"
|
||||
v-bind="inputProperties(field)" :required="isFieldRequired[field.id]"
|
||||
:disabled="isFieldDisabled[field.id]"
|
||||
<div v-if="currentFieldGroupIndex===groupIndex"
|
||||
:key="groupIndex"
|
||||
class="form-group flex flex-wrap w-full">
|
||||
|
||||
<draggable v-model="currentFields"
|
||||
class="flex flex-wrap transition-all"
|
||||
:class="{'-m-6 p-2 bg-gray-50 rounded-md':dragging}"
|
||||
ghost-class="ghost-item"
|
||||
handle=".draggable" :animation="200"
|
||||
@start="onDragStart" @end="onDragEnd"
|
||||
>
|
||||
<open-form-field v-for="field in group"
|
||||
:key="field.id + formVersionId"
|
||||
:field="field"
|
||||
:show-hidden="showHidden"
|
||||
:form="form"
|
||||
:data-form="dataForm"
|
||||
:data-form-value="dataFormValue"
|
||||
:theme="theme"
|
||||
:admin-preview="adminPreview"
|
||||
/>
|
||||
<template v-else>
|
||||
<div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
|
||||
class="nf-text w-full px-2 mb-3" :class="[getFieldClasses(field), getFieldAlignClasses(field)]"
|
||||
v-html="field.content"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-code' && field.content" :id="field.id" :key="field.id"
|
||||
class="nf-code w-full px-2 mb-3" :class="getFieldClasses(field)"
|
||||
v-html="field.content"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id"
|
||||
class="border-b my-4 w-full mx-2" :class="getFieldClasses(field)"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id"
|
||||
:key="field.id" class="my-4 w-full px-2" :class="[getFieldClasses(field), getFieldAlignClasses(field)]"
|
||||
>
|
||||
<div v-if="!field.image_block" class="p-4 border border-dashed">
|
||||
Open <b>{{ field.name }}'s</b> block settings to upload image.
|
||||
</div>
|
||||
<img v-else :alt="field.name" :src="field.image_block" class="max-w-full">
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
</transition>
|
||||
|
|
@ -75,13 +68,14 @@ import Form from 'vform'
|
|||
import OpenFormButton from './OpenFormButton.vue'
|
||||
import clonedeep from 'clone-deep'
|
||||
import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
|
||||
|
||||
import OpenFormField from './OpenFormField.vue'
|
||||
import draggable from 'vuedraggable'
|
||||
const VueHcaptcha = () => import('@hcaptcha/vue-hcaptcha')
|
||||
import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
|
||||
|
||||
export default {
|
||||
name: 'OpenForm',
|
||||
components: {OpenFormButton, VueHcaptcha},
|
||||
components: {draggable, OpenFormField, OpenFormButton, VueHcaptcha},
|
||||
mixins: [FormPendingSubmissionKey],
|
||||
props: {
|
||||
form: {
|
||||
|
|
@ -103,37 +97,37 @@ export default {
|
|||
fields: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataForm: null,
|
||||
currentFieldGroupIndex: 0,
|
||||
|
||||
/**
|
||||
* Used to force refresh components by changing their keys
|
||||
*/
|
||||
formVersionId: 1,
|
||||
darkModeEnabled: document.body.classList.contains('dark'),
|
||||
isAutoSubmit: false
|
||||
isAutoSubmit: false,
|
||||
/**
|
||||
* If currently dragging a field
|
||||
*/
|
||||
dragging: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
hCaptchaSiteKey: () => window.config.hCaptchaSiteKey,
|
||||
actualFields() {
|
||||
return this.fields.filter((field) => {
|
||||
return this.showHidden || !this.isFieldHidden[field.id]
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Create field groups (or Page) using page breaks if any
|
||||
*/
|
||||
fieldGroups() {
|
||||
if (!this.actualFields) return []
|
||||
if (!this.fields) return []
|
||||
const groups = []
|
||||
let currentGroup = []
|
||||
this.actualFields.forEach((field) => {
|
||||
this.fields.forEach((field) => {
|
||||
if (field.type === 'nf-page-break' && this.isFieldHidden(field)) return
|
||||
currentGroup.push(field)
|
||||
if (field.type === 'nf-page-break') {
|
||||
groups.push(currentGroup)
|
||||
|
|
@ -143,8 +137,26 @@ export default {
|
|||
groups.push(currentGroup)
|
||||
return groups
|
||||
},
|
||||
currentFields() {
|
||||
return this.fieldGroups[this.currentFieldGroupIndex]
|
||||
currentFields: {
|
||||
get () {
|
||||
return this.fieldGroups[this.currentFieldGroupIndex]
|
||||
},
|
||||
set (val) {
|
||||
// On re-order from the form, set the new order
|
||||
// Add the previous groups and next to val, and set the properties on working form
|
||||
const newFields = []
|
||||
this.fieldGroups.forEach((group, index) => {
|
||||
if (index < this.currentFieldGroupIndex) {
|
||||
newFields.push(...group)
|
||||
} else if (index === this.currentFieldGroupIndex) {
|
||||
newFields.push(...val)
|
||||
} else {
|
||||
newFields.push(...group)
|
||||
}
|
||||
})
|
||||
// set the properties on working_form vuex
|
||||
this.$store.commit('open/working_form/setProperties', newFields)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Returns the page break block for the current group of fields
|
||||
|
|
@ -168,20 +180,6 @@ export default {
|
|||
isLastPage() {
|
||||
return this.currentFieldGroupIndex === (this.fieldGroups.length - 1)
|
||||
},
|
||||
fieldComponents() {
|
||||
return {
|
||||
text: 'TextInput',
|
||||
number: 'TextInput',
|
||||
select: 'SelectInput',
|
||||
multi_select: 'SelectInput',
|
||||
date: 'DateInput',
|
||||
files: 'FileInput',
|
||||
checkbox: 'CheckboxInput',
|
||||
url: 'TextInput',
|
||||
email: 'TextInput',
|
||||
phone_number: 'TextInput',
|
||||
}
|
||||
},
|
||||
isPublicFormPage() {
|
||||
return this.$route.name === 'forms.show_public'
|
||||
},
|
||||
|
|
@ -202,28 +200,7 @@ export default {
|
|||
}
|
||||
})
|
||||
return data
|
||||
},
|
||||
isFieldHidden() {
|
||||
const fieldsHidden = {}
|
||||
this.fields.forEach((field) => {
|
||||
fieldsHidden[field.id] = (new FormLogicPropertyResolver(field, this.dataFormValue)).isHidden()
|
||||
})
|
||||
return fieldsHidden
|
||||
},
|
||||
isFieldRequired() {
|
||||
const fieldsRequired = {}
|
||||
this.fields.forEach((field) => {
|
||||
fieldsRequired[field.id] = (new FormLogicPropertyResolver(field, this.dataFormValue)).isRequired()
|
||||
})
|
||||
return fieldsRequired
|
||||
},
|
||||
isFieldDisabled () {
|
||||
const fieldsDisabled = {}
|
||||
this.fields.forEach((field) => {
|
||||
fieldsDisabled[field.id] = (new FormLogicPropertyResolver(field, this.dataFormValue)).isDisabled()
|
||||
})
|
||||
return fieldsDisabled
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -402,108 +379,6 @@ export default {
|
|||
})
|
||||
this.dataForm = new Form(formData)
|
||||
},
|
||||
/**
|
||||
* Get the right input component for the field/options combination
|
||||
*/
|
||||
getFieldComponents(field) {
|
||||
if (field.type === 'text' && field.multi_lines) {
|
||||
return 'TextAreaInput'
|
||||
}
|
||||
if (field.type === 'url' && field.file_upload) {
|
||||
return 'FileInput'
|
||||
}
|
||||
if (field.type === 'number' && field.is_rating && field.rating_max_value) {
|
||||
return 'RatingInput'
|
||||
}
|
||||
if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
|
||||
return 'FlatSelectInput'
|
||||
}
|
||||
if (field.type === 'checkbox' && field.use_toggle_switch) {
|
||||
return 'ToggleSwitchInput'
|
||||
}
|
||||
if (field.type === 'signature') {
|
||||
return 'SignatureInput'
|
||||
}
|
||||
return this.fieldComponents[field.type]
|
||||
},
|
||||
getFieldClasses(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'
|
||||
} else if (field.width === '1/3') {
|
||||
return 'w-full sm:w-1/3 px-2'
|
||||
} else if (field.width === '2/3') {
|
||||
return 'w-full sm:w-2/3 px-2'
|
||||
} else if (field.width === '1/4') {
|
||||
return 'w-full sm:w-1/4 px-2'
|
||||
} else if (field.width === '3/4') {
|
||||
return 'w-full sm:w-3/4 px-2'
|
||||
}
|
||||
},
|
||||
getFieldAlignClasses (field) {
|
||||
if (!field.align || field.align === 'left') return 'text-left'
|
||||
else if (field.align === 'right') {
|
||||
return 'text-right'
|
||||
} else if (field.align === 'center') {
|
||||
return 'text-center'
|
||||
} else if (field.align === 'justify') {
|
||||
return 'text-justify'
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Get the right input component options for the field/options
|
||||
*/
|
||||
inputProperties(field) {
|
||||
const inputProperties = {
|
||||
key: field.id,
|
||||
name: field.id,
|
||||
form: this.dataForm,
|
||||
label: (field.hide_field_name) ? null : field.name + (this.isFieldHidden[field.id] ? ' (Hidden Field)' : ''),
|
||||
color: this.form.color,
|
||||
placeholder: field.placeholder,
|
||||
help: field.help,
|
||||
helpPosition: (field.help_position) ? field.help_position : 'below_input',
|
||||
uppercaseLabels: this.form.uppercase_labels,
|
||||
theme: this.theme,
|
||||
maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
|
||||
showCharLimit: field.show_char_limit || false
|
||||
}
|
||||
|
||||
if (['select', 'multi_select'].includes(field.type)) {
|
||||
inputProperties.options = (field.hasOwnProperty(field.type))
|
||||
? field[field.type].options.map(option => {
|
||||
return {
|
||||
name: option.name,
|
||||
value: option.name
|
||||
}
|
||||
})
|
||||
: []
|
||||
inputProperties.multiple = (field.type === 'multi_select')
|
||||
inputProperties.allowCreation = (field.allow_creation === true)
|
||||
inputProperties.searchable = (inputProperties.options.length > 4)
|
||||
} else if (field.type === 'date') {
|
||||
if (field.with_time) {
|
||||
inputProperties.withTime = true
|
||||
} else if (field.date_range) {
|
||||
inputProperties.dateRange = true
|
||||
}
|
||||
if (field.disable_past_dates) {
|
||||
inputProperties.disablePastDates = true
|
||||
} else if (field.disable_future_dates) {
|
||||
inputProperties.disableFutureDates = true
|
||||
}
|
||||
} else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
|
||||
inputProperties.multiple = (field.multiple !== undefined && field.multiple)
|
||||
inputProperties.mbLimit = 5
|
||||
inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ""
|
||||
} else if (field.type === 'number' && field.is_rating) {
|
||||
inputProperties.numberOfStars = parseInt(field.rating_max_value)
|
||||
} else if (['number', 'phone_number'].includes(field.type)) {
|
||||
inputProperties.pattern = "/\d*"
|
||||
}
|
||||
|
||||
return inputProperties
|
||||
},
|
||||
previousPage() {
|
||||
this.currentFieldGroupIndex -= 1
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
|
|
@ -513,19 +388,22 @@ export default {
|
|||
this.currentFieldGroupIndex += 1
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
return false
|
||||
},
|
||||
isFieldHidden (field) {
|
||||
return (new FormLogicPropertyResolver(field, this.dataFormValue)).isHidden()
|
||||
},
|
||||
onDragStart () {
|
||||
this.dragging = true
|
||||
},
|
||||
onDragEnd () {
|
||||
this.dragging = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.nf-text {
|
||||
ol {
|
||||
@apply list-decimal list-inside;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply list-disc list-inside;
|
||||
}
|
||||
<style lang='scss' scoped>
|
||||
.ghost-item {
|
||||
@apply bg-blue-100 dark:bg-blue-900 rounded-md;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,290 @@
|
|||
<template>
|
||||
<div v-if="!isFieldHidden"
|
||||
:id="'block-'+field.id" :class="getFieldWidthClasses(field)"
|
||||
>
|
||||
<div :class="getFieldClasses(field)">
|
||||
<div v-if="adminPreview"
|
||||
class="absolute -translate-x-full top-0 bottom-0 opacity-0 group-hover/nffield:opacity-100 transition-opacity mb-4"
|
||||
>
|
||||
<div class="flex flex-col lg:flex-row bg-white rounded-md">
|
||||
<div class="p-2 lg:pr-1 text-gray-300 hover:text-blue-500 cursor-pointer" role="button"
|
||||
@click.prevent="editFieldOptions"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
||||
class="w-5 h-5"
|
||||
>
|
||||
<path fill-rule="evenodd"
|
||||
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="px-2 lg:pl-0 lg:pr-1 lg:pt-2 pb-2 bg-white rounded-md text-gray-300 hover:text-gray-500 cursor-grab draggable"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
|
||||
fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="getFieldComponents" v-if="getFieldComponents"
|
||||
v-bind="inputProperties(field)" :required="isFieldRequired"
|
||||
:disabled="isFieldDisabled"
|
||||
/>
|
||||
<template v-else>
|
||||
<div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
|
||||
class="nf-text w-full px-2 mb-3" :class="[getFieldAlignClasses(field)]"
|
||||
v-html="field.content"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-code' && field.content" :id="field.id" :key="field.id"
|
||||
class="nf-code w-full px-2 mb-3"
|
||||
v-html="field.content"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id"
|
||||
class="border-b my-4 w-full mx-2"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id"
|
||||
:key="field.id" class="my-4 w-full px-2" :class="[getFieldAlignClasses(field)]"
|
||||
>
|
||||
<div v-if="!field.image_block" class="p-4 border border-dashed">
|
||||
Open <b>{{ field.name }}'s</b> block settings to upload image.
|
||||
</div>
|
||||
<img v-else :alt="field.name" :src="field.image_block" class="max-w-full">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
|
||||
import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
|
||||
|
||||
export default {
|
||||
name: 'OpenFormField',
|
||||
components: { },
|
||||
mixins: [FormPendingSubmissionKey],
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
dataForm: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
dataFormValue: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
theme: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
showHidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
fieldComponents() {
|
||||
return {
|
||||
text: 'TextInput',
|
||||
number: 'TextInput',
|
||||
select: 'SelectInput',
|
||||
multi_select: 'SelectInput',
|
||||
date: 'DateInput',
|
||||
files: 'FileInput',
|
||||
checkbox: 'CheckboxInput',
|
||||
url: 'TextInput',
|
||||
email: 'TextInput',
|
||||
phone_number: 'TextInput',
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Get the right input component for the field/options combination
|
||||
*/
|
||||
getFieldComponents() {
|
||||
const field = this.field
|
||||
if (field.type === 'text' && field.multi_lines) {
|
||||
return 'TextAreaInput'
|
||||
}
|
||||
if (field.type === 'url' && field.file_upload) {
|
||||
return 'FileInput'
|
||||
}
|
||||
if (field.type === 'number' && field.is_rating && field.rating_max_value) {
|
||||
return 'RatingInput'
|
||||
}
|
||||
if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
|
||||
return 'FlatSelectInput'
|
||||
}
|
||||
if (field.type === 'checkbox' && field.use_toggle_switch) {
|
||||
return 'ToggleSwitchInput'
|
||||
}
|
||||
if (field.type === 'signature') {
|
||||
return 'SignatureInput'
|
||||
}
|
||||
return this.fieldComponents[field.type]
|
||||
},
|
||||
isPublicFormPage () {
|
||||
return this.$route.name === 'forms.show_public'
|
||||
},
|
||||
isFieldHidden () {
|
||||
return !this.showHidden && this.shouldBeHidden
|
||||
},
|
||||
shouldBeHidden () {
|
||||
return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isHidden()
|
||||
},
|
||||
isFieldRequired () {
|
||||
return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isRequired()
|
||||
},
|
||||
isFieldDisabled () {
|
||||
return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isDisabled()
|
||||
},
|
||||
selectionFieldsOptions () {
|
||||
// For auto update hidden options
|
||||
let fieldsOptions = []
|
||||
|
||||
if (['select', 'multi_select', 'status'].includes(this.field.type)) {
|
||||
fieldsOptions = [...this.field[this.field.type].options]
|
||||
if (this.field.hidden_options && this.field.hidden_options.length > 0) {
|
||||
fieldsOptions = fieldsOptions.filter((option) => {
|
||||
return this.field.hidden_options.indexOf(option.id) < 0
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return fieldsOptions
|
||||
}
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted () {},
|
||||
|
||||
methods: {
|
||||
editFieldOptions () {
|
||||
this.$store.commit('open/working_form/openSettingsForField', this.field)
|
||||
},
|
||||
/**
|
||||
* Get the right input component for the field/options combination
|
||||
*/
|
||||
getFieldClasses () {
|
||||
let classes = ''
|
||||
if (this.adminPreview) {
|
||||
classes += '-mx-4 px-4 -my-1 py-1 group/nffield relative'
|
||||
}
|
||||
return classes
|
||||
},
|
||||
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'
|
||||
} else if (field.width === '1/3') {
|
||||
return 'w-full sm:w-1/3 px-2'
|
||||
} else if (field.width === '2/3') {
|
||||
return 'w-full sm:w-2/3 px-2'
|
||||
} else if (field.width === '1/4') {
|
||||
return 'w-full sm:w-1/4 px-2'
|
||||
} else if (field.width === '3/4') {
|
||||
return 'w-full sm:w-3/4 px-2'
|
||||
}
|
||||
},
|
||||
getFieldAlignClasses (field) {
|
||||
if (!field.align || field.align === 'left') return 'text-left'
|
||||
else if (field.align === 'right') {
|
||||
return 'text-right'
|
||||
} else if (field.align === 'center') {
|
||||
return 'text-center'
|
||||
} else if (field.align === 'justify') {
|
||||
return 'text-justify'
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Get the right input component options for the field/options
|
||||
*/
|
||||
inputProperties(field) {
|
||||
const inputProperties = {
|
||||
key: field.id,
|
||||
name: field.id,
|
||||
form: this.dataForm,
|
||||
label: (field.hide_field_name) ? null : field.name + ((this.shouldBeHidden) ? ' (Hidden Field)' : ''),
|
||||
color: this.form.color,
|
||||
placeholder: field.placeholder,
|
||||
help: field.help,
|
||||
helpPosition: (field.help_position) ? field.help_position : 'below_input',
|
||||
uppercaseLabels: this.form.uppercase_labels,
|
||||
theme: this.theme,
|
||||
maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
|
||||
showCharLimit: field.show_char_limit || false
|
||||
}
|
||||
|
||||
if (['select', 'multi_select'].includes(field.type)) {
|
||||
inputProperties.options = (field.hasOwnProperty(field.type))
|
||||
? field[field.type].options.map(option => {
|
||||
return {
|
||||
name: option.name,
|
||||
value: option.name
|
||||
}
|
||||
})
|
||||
: []
|
||||
inputProperties.multiple = (field.type === 'multi_select')
|
||||
inputProperties.allowCreation = (field.allow_creation === true)
|
||||
inputProperties.searchable = (inputProperties.options.length > 4)
|
||||
} else if (field.type === 'date') {
|
||||
if (field.with_time) {
|
||||
inputProperties.withTime = true
|
||||
} else if (field.date_range) {
|
||||
inputProperties.dateRange = true
|
||||
}
|
||||
if (field.disable_past_dates) {
|
||||
inputProperties.disablePastDates = true
|
||||
} else if (field.disable_future_dates) {
|
||||
inputProperties.disableFutureDates = true
|
||||
}
|
||||
} else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
|
||||
inputProperties.multiple = (field.multiple !== undefined && field.multiple)
|
||||
inputProperties.mbLimit = 5
|
||||
inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ""
|
||||
} else if (field.type === 'number' && field.is_rating) {
|
||||
inputProperties.numberOfStars = parseInt(field.rating_max_value)
|
||||
} else if (['number', 'phone_number'].includes(field.type)) {
|
||||
inputProperties.pattern = "/\d*"
|
||||
}
|
||||
|
||||
return inputProperties
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.nf-text {
|
||||
ol {
|
||||
@apply list-decimal list-inside;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply list-disc list-inside;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -156,6 +156,7 @@ import ProTag from '../../../common/ProTag.vue'
|
|||
import clonedeep from 'clone-deep'
|
||||
import EditableDiv from '../../../common/EditableDiv.vue'
|
||||
import VButton from "../../../common/Button.vue";
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'FormFieldsEditor',
|
||||
|
|
@ -172,14 +173,16 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
formFields: [],
|
||||
selectedFieldIndex: null,
|
||||
showEditFieldModal: false,
|
||||
showAddBlock: false,
|
||||
removing: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
selectedFieldIndex: state => state['open/working_form'].selectedFieldIndex,
|
||||
showEditFieldModal: state => state['open/working_form'].showEditFieldModal
|
||||
}),
|
||||
form: {
|
||||
get() {
|
||||
return this.$store.state['open/working_form'].content
|
||||
|
|
@ -306,28 +309,25 @@ export default {
|
|||
return block && block.type.startsWith('nf')
|
||||
},
|
||||
editOptions(index) {
|
||||
this.selectedFieldIndex = index
|
||||
this.showEditFieldModal = true
|
||||
this.$store.commit('open/working_form/openSettingsForField', index)
|
||||
},
|
||||
blockAdded(block) {
|
||||
this.formFields.push(block)
|
||||
},
|
||||
removeBlock(blockIndex) {
|
||||
this.closeInputOptionModal()
|
||||
this.selectedFieldIndex = null
|
||||
const newFields = clonedeep(this.formFields)
|
||||
newFields.splice(blockIndex, 1)
|
||||
this.$set(this, 'formFields', newFields)
|
||||
},
|
||||
duplicateBlock(blockIndex) {
|
||||
this.closeInputOptionModal()
|
||||
this.selectedFieldIndex = null
|
||||
const newField = clonedeep(this.formFields[blockIndex])
|
||||
newField.id = this.generateUUID()
|
||||
this.formFields.push(newField)
|
||||
},
|
||||
closeInputOptionModal() {
|
||||
this.showEditFieldModal = false
|
||||
this.$store.commit('open/working_form/closeEditFieldModal')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<flat-select-input :form="submissionOptions" name="databaseAction" label="Database Submission Action"
|
||||
:options="[
|
||||
{name:'Create new record (default)', value:'create'},
|
||||
{name:'Update Record (if any)', value:'update'}
|
||||
{name:'Update Record (or create if no match)', value:'update'}
|
||||
]" :required="true" help="Create a new record or update an existing one"
|
||||
>
|
||||
<template #selected="{option,optionName}">
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
<open-complete-form ref="form-preview" class="w-full mx-auto py-5 px-3" :class="{'max-w-lg': form && (form.width === 'centered')}"
|
||||
:creating="creating"
|
||||
:form="form"
|
||||
:admin-preview="true"
|
||||
@restarted="previewFormSubmitted=false"
|
||||
@submitted="previewFormSubmitted=true"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,37 @@ export const namespaced = true
|
|||
|
||||
// state
|
||||
export const state = {
|
||||
content: null
|
||||
content: null,
|
||||
|
||||
// Field being edited
|
||||
selectedFieldIndex: null,
|
||||
showEditFieldModal: null
|
||||
}
|
||||
|
||||
// mutations
|
||||
export const mutations = {
|
||||
set (state, form) {
|
||||
state.content = form
|
||||
},
|
||||
setProperties (state, properties) {
|
||||
state.content.properties = properties
|
||||
},
|
||||
openSettingsForField (state, index) {
|
||||
// If field is passed, compute index
|
||||
if (typeof index === 'object') {
|
||||
index = state.content.properties.findIndex(prop => prop.id === index.id)
|
||||
}
|
||||
state.selectedFieldIndex = index
|
||||
state.showEditFieldModal = true
|
||||
},
|
||||
setSelectedFieldIndex (state, index) {
|
||||
state.selectedFieldIndex = index
|
||||
},
|
||||
openEditFieldModal (state) {
|
||||
state.showEditFieldModal = true
|
||||
},
|
||||
closeEditFieldModal (state) {
|
||||
state.showEditFieldModal = false
|
||||
this.selectedFieldIndex = null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue