matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Julien Nahum
2023-10-24 11:00:54 +02:00
parent d8c0371d43
commit 437644584a
34 changed files with 784 additions and 668 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
View File

@@ -9,7 +9,7 @@
<div>
<v-button color="light-gray" size="small" @click="removeBlock">
<svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Remove
@@ -18,7 +18,7 @@
<div class="ml-1">
<v-button size="small" color="light-gray" @click="duplicateBlock">
<svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Duplicate
</v-button>
@@ -100,14 +100,15 @@
</div>
<div v-else-if="field.type == 'nf-code'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<code-input name="content" class="mt-4 h-36" :form="field" label="Content"
help="You can add any html code, including iframes" />
help="You can add any html code, including iframes"
/>
</div>
<div v-else class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<p>No settings found.</p>
</div>
<!-- Logic Block -->
<form-block-logic-editor :form="form" :field="field" v-model="form"/>
<form-block-logic-editor v-model="form" :form="form" :field="field" />
<div class="pt-5 flex justify-end">
<v-button color="white" @click="close">
@@ -123,12 +124,12 @@
<script>
import ProTag from '../../../common/ProTag.vue'
const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
import CodeInput from '../../../forms/CodeInput.vue'
const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
export default {
name: 'FormBlockOptionsModal',
components: {ProTag, FormBlockLogicEditor, CodeInput},
components: { ProTag, FormBlockLogicEditor, CodeInput },
props: {
field: {
type: Object,
@@ -143,10 +144,10 @@ export default {
required: false
}
},
data() {
data () {
return {
editorToolbarCustom: [
['bold', 'italic', 'underline', 'link'],
['bold', 'italic', 'underline', 'link']
]
}
},
@@ -157,7 +158,7 @@ export default {
'field.width': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'width', 'full')
this.field.width = 'full'
}
},
immediate: true
@@ -165,38 +166,38 @@ export default {
'field.align': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'align', 'left')
this.field.align = 'left'
}
},
immediate: true
}
},
mounted() {
mounted () {
},
methods: {
close() {
close () {
this.$emit('close')
},
removeBlock() {
removeBlock () {
this.close()
this.$emit('remove-block', this.field)
},
duplicateBlock(){
duplicateBlock () {
this.close()
this.$emit('duplicate-block', this.field)
},
onFieldHiddenChange(val) {
this.$set(this.field, 'hidden', val)
onFieldHiddenChange (val) {
this.field.hidden = val
if (this.field.hidden) {
this.$set(this.field, 'required', false)
this.field.required = false
}
},
onFieldHelpPositionChange (val) {
if(!val){
this.$set(this.field, 'help_position', 'below_input')
if (!val) {
this.field.help_position = 'below_input'
}
}
}

82
resources/js/components/open/forms/fields/FormFieldEditSidebar.vue
View File

@@ -1,11 +1,13 @@
<template>
<div v-if="showSidebar"
class="absolute shadow-lg shadow-blue-800/30 top-0 h-[calc(100vh-45px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 overflow-x-hidden">
class="absolute shadow-lg shadow-blue-800/30 top-0 h-[calc(100vh-45px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 overflow-x-hidden"
>
<div class="p-4 border-b sticky top-0 z-10 bg-white">
<button v-if="!field" class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
stroke-linejoin="round"
/>
</svg>
</button>
<template v-else>
@@ -13,7 +15,8 @@
<button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
stroke-linejoin="round"
/>
</svg>
</button>
<div class="font-semibold inline ml-2 truncate flex-grow truncate">
@@ -22,36 +25,43 @@
</div>
<div class="flex mt-2">
<v-button color="light-gray" class="border-r-0 rounded-r-none text-xs hover:bg-red-50" size="small"
@click="removeBlock">
@click="removeBlock"
>
<svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
/>
</svg>
Remove
</v-button>
<v-button size="small" class="text-xs" :class="{
'rounded-none border-r-0':!isBlockField && typeCanBeChanged,
'rounded-l-none':isBlockField || !typeCanBeChanged
}" color="light-gray" @click="duplicateBlock">
}" color="light-gray" @click="duplicateBlock"
>
<svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
/>
</svg>
Duplicate
</v-button>
<change-field-type btn-classes="rounded-l-none text-xs" v-if="!isBlockField" :field="field"
@changeType="onChangeType"/>
<change-field-type v-if="!isBlockField" btn-classes="rounded-l-none text-xs" :field="field"
@changeType="onChangeType"
/>
</div>
</template>
</div>
<template v-if="field">
<field-options v-if="!isBlockField" :form="form" :field="field"/>
<block-options v-if="isBlockField" :form="form" :field="field"/>
<field-options v-if="!isBlockField" :form="form" :field="field" />
<block-options v-if="isBlockField" :form="form" :field="field" />
</template>
<div v-else class="text-center p-10">
Click on field's setting icon in your form to modify it
@@ -60,17 +70,17 @@
</template>
<script>
import {mapState} from 'vuex'
import { mapState } from 'vuex'
import clonedeep from 'clone-deep'
import ChangeFieldType from "./components/ChangeFieldType.vue"
import ChangeFieldType from './components/ChangeFieldType.vue'
import FieldOptions from './components/FieldOptions.vue'
import BlockOptions from './components/BlockOptions.vue'
export default {
name: 'FormFieldEditSidebar',
components: {ChangeFieldType, FieldOptions, BlockOptions},
components: { ChangeFieldType, FieldOptions, BlockOptions },
props: {},
data() {
data () {
return {
}
@@ -82,62 +92,62 @@ export default {
showEditFieldSidebar: state => state['open/working_form'].showEditFieldSidebar
}),
form: {
get() {
get () {
return this.$store.state['open/working_form'].content
},
/* We add a setter */
set(value) {
set (value) {
this.$store.commit('open/working_form/set', value)
}
},
field() {
field () {
return (this.form && this.selectedFieldIndex !== null) ? this.form.properties[this.selectedFieldIndex] : null
},
showSidebar() {
showSidebar () {
return (this.form && this.selectedFieldIndex !== null) ? (this.form.properties[this.selectedFieldIndex] && this.showEditFieldSidebar) : false
},
isBlockField() {
isBlockField () {
return this.field && this.field.type.startsWith('nf')
},
typeCanBeChanged() {
return ['text', 'email', 'phone', 'number','select', 'multi_select'].includes(this.field.type)
typeCanBeChanged () {
return ['text', 'email', 'phone', 'number', 'select', 'multi_select'].includes(this.field.type)
}
},
watch: {},
created() {
created () {
},
mounted() {
mounted () {
},
methods: {
onChangeType(newType) {
onChangeType (newType) {
if (['select', 'multi_select'].includes(this.field.type)) {
this.$set(this.field, newType, this.field[this.field.type]) // Set new options with new type
this.$delete(this.field, this.field.type) // remove old type options
this.field[newType] = this.field[this.field.type] // Set new options with new type
delete this.field[this.field.type] // remove old type options
}
this.$set(this.field, 'type', newType)
this.field.type = newType
},
removeBlock() {
removeBlock () {
const newFields = clonedeep(this.form.properties)
newFields.splice(this.selectedFieldIndex, 1)
this.$set(this.form, 'properties', newFields)
this.form.properties = newFields
this.closeSidebar()
},
duplicateBlock() {
duplicateBlock () {
const newFields = clonedeep(this.form.properties)
const newField = clonedeep(this.form.properties[this.selectedFieldIndex])
newField.id = this.generateUUID()
newFields.push(newField)
this.$set(this.form, 'properties', newFields)
this.form.properties = newFields
this.closeSidebar()
},
closeSidebar() {
closeSidebar () {
this.$store.commit('open/working_form/closeEditFieldSidebar')
},
generateUUID() {
generateUUID () {
let d = new Date().getTime()// Timestamp
let d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0// Time in microseconds since page-load or 0 if unsupported
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {

205
resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
View File

@@ -9,10 +9,12 @@
<div>
<v-button color="light-gray" size="small" @click="removeBlock">
<svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
/>
</svg>
Remove
@@ -21,15 +23,17 @@
<div class="ml-1">
<v-button size="small" color="light-gray" @click="duplicateBlock">
<svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
/>
</svg>
Duplicate
</v-button>
</div>
<change-field-type class="my-1" :field="field" @changeType="onChangeType"/>
<change-field-type class="my-1" :field="field" @changeType="onChangeType" />
</div>
</div>
@@ -125,7 +129,7 @@
</p>
<v-checkbox v-model="field.multi_lines"
:name="field.id+'_multi_lines'"
@input="$set(field,'multi_lines',$event)"
@input="field.multi_lines = $event"
>
Multi-lines input
</v-checkbox>
@@ -194,21 +198,23 @@
Advanced options for your select/multiselect fields.
</p>
<text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-4"
@input="onFieldOptionsChange"
label="Set selection options"
help="Add one option per line"
@input="onFieldOptionsChange"
/>
<v-checkbox v-model="field.allow_creation"
name="allow_creation" @input="onFieldAllowCreationChange" help=""
name="allow_creation" help="" @input="onFieldAllowCreationChange"
>
Allow respondent to create new options
</v-checkbox>
<v-checkbox v-model="field.without_dropdown" class="mt-4"
name="without_dropdown" @input="onFieldWithoutDropdownChange" help=""
name="without_dropdown" help="" @input="onFieldWithoutDropdownChange"
>
Always show all select options
</v-checkbox>
<p class="text-gray-400 mb-5 text-xs">Options won't be in a dropdown anymore, but will all be visible</p>
<p class="text-gray-400 mb-5 text-xs">
Options won't be in a dropdown anymore, but will all be visible
</p>
</div>
<!-- Customization - Placeholder, Prefill, Relabel, Field Help -->
@@ -235,7 +241,7 @@
<!-- Pre-fill depends on type -->
<v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-4"
:name="field.id+'_prefill'"
@input="$set(field,'prefill',$event)"
@input="field.prefill = $event"
>
Pre-filled value
</v-checkbox>
@@ -285,19 +291,19 @@
<!-- Help -->
<rich-text-area-input name="help" class="mt-4"
:form="field"
:editorToolbar="editorToolbarCustom"
label="Field Help"
help="Your field help will be shown below/above the field, just like this message."
:help-position="field.help_position"
:form="field"
:editor-toolbar="editorToolbarCustom"
label="Field Help"
help="Your field help will be shown below/above the field, just like this message."
:help-position="field.help_position"
/>
<select-input name="help_position" class="mt-4"
:options="[
{name:'Below input',value:'below_input'},
{name:'Above input',value:'above_input'},
]"
:form="field" label="Field Help Position"
@input="onFieldHelpPositionChange"
:options="[
{name:'Below input',value:'below_input'},
{name:'Above input',value:'above_input'},
]"
:form="field" label="Field Help Position"
@input="onFieldHelpPositionChange"
/>
<template v-if="['text','number','url','email','phone_number'].includes(field.type)">
@@ -311,7 +317,6 @@
label="Always show character limit"
/>
</template>
</div>
<!-- Advanced Options -->
@@ -342,7 +347,7 @@
</div>
<!-- Logic Block -->
<form-block-logic-editor v-model="form" :form="form" :field="field"/>
<form-block-logic-editor v-model="form" :form="form" :field="field" />
<div class="pt-5 flex justify-end">
<v-button color="white" @click="close">
@@ -359,14 +364,14 @@
<script>
import timezones from '../../../../../data/timezones.json'
import ProTag from "../../../common/ProTag.vue"
import ProTag from '../../../common/ProTag.vue'
import ChangeFieldType from './components/ChangeFieldType.vue'
const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
import ChangeFieldType from "./components/ChangeFieldType.vue"
export default {
name: 'FormFieldOptionsModal',
components: {ProTag, FormBlockLogicEditor, ChangeFieldType},
components: { ProTag, FormBlockLogicEditor, ChangeFieldType },
props: {
field: {
type: Object,
@@ -381,20 +386,20 @@ export default {
required: false
}
},
data() {
data () {
return {
typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
editorToolbarCustom: [
['bold', 'italic', 'underline', 'link'],
['bold', 'italic', 'underline', 'link']
]
}
},
computed: {
hasPlaceholder() {
hasPlaceholder () {
return !this.typesWithoutPlaceholder.includes(this.field.type)
},
prefillSelectsOptions() {
prefillSelectsOptions () {
if (!['select', 'multi_select'].includes(this.field.type)) return {}
return this.field[this.field.type].options.map(option => {
@@ -404,7 +409,7 @@ export default {
}
})
},
timezonesOptions() {
timezonesOptions () {
if (this.field.type !== 'date') return []
return timezones.map((timezone) => {
return {
@@ -413,24 +418,24 @@ export default {
}
})
},
displayBasedOnAdvanced() {
displayBasedOnAdvanced () {
if (this.field.generates_uuid || this.field.generates_auto_increment_id) {
return false
}
return true
},
optionsText() {
optionsText () {
return this.field[this.field.type].options.map(option => {
return option.name
}).join("\n")
},
}).join('\n')
}
},
watch: {
'field.width': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'width', 'full')
this.field.width = 'full'
}
},
immediate: true
@@ -439,139 +444,139 @@ export default {
created () {
if (this.field.width === undefined || this.field.width === null) {
this.$set(this.field, 'width', 'full')
this.field.width = 'full'
}
},
mounted() {
mounted () {
if (['text', 'number', 'url', 'email', 'phone_number'].includes(this.field.type) && !this.field.max_char_limit) {
this.field.max_char_limit = 2000
}
},
methods: {
onChangeType(newType) {
if(['select', 'multi_select'].includes(this.field.type)){
this.$set(this.field, newType, this.field[this.field.type]) // Set new options with new type
this.$delete(this.field, this.field.type) // remove old type options
onChangeType (newType) {
if (['select', 'multi_select'].includes(this.field.type)) {
this.field[newType] = this.field[this.field.type] // Set new options with new type
delete this.field[this.field.type] // remove old type options
}
this.$set(this.field, 'type', newType)
this.field.type = newType
},
close() {
close () {
this.$emit('close')
},
removeBlock() {
removeBlock () {
this.close()
this.$emit('remove-block', this.field)
},
duplicateBlock() {
duplicateBlock () {
this.close()
this.$emit('duplicate-block', this.field)
},
onFieldDisabledChange (val) {
this.$set(this.field, 'disabled', val)
this.field.disabled = val
if (this.field.disabled) {
this.$set(this.field, 'hidden', false)
this.field.hidden = false
}
},
onFieldRequiredChange(val) {
this.$set(this.field, 'required', val)
onFieldRequiredChange (val) {
this.field.required = val
if (this.field.required) {
this.$set(this.field, 'hidden', false)
this.field.hidden = false
}
},
onFieldHiddenChange(val) {
this.$set(this.field, 'hidden', val)
onFieldHiddenChange (val) {
this.field.hidden = val
if (this.field.hidden) {
this.$set(this.field, 'required', false)
this.$set(this.field, 'disabled', false)
this.field.required = false
this.field.disabled = false
} else {
this.$set(this.field, 'generates_uuid', false)
this.$set(this.field, 'generates_auto_increment_id', false)
this.field.generates_uuid = false
this.field.generates_auto_increment_id = false
}
},
onFieldDateRangeChange(val) {
this.$set(this.field, 'date_range', val)
onFieldDateRangeChange (val) {
this.field.date_range = val
if (this.field.date_range) {
this.$set(this.field, 'with_time', false)
this.$set(this.field, 'prefill_today', false)
this.field.with_time = false
this.field.prefill_today = false
}
},
onFieldWithTimeChange(val) {
this.$set(this.field, 'with_time', val)
onFieldWithTimeChange (val) {
this.field.with_time = val
if (this.field.with_time) {
this.$set(this.field, 'date_range', false)
this.field.date_range = false
}
},
onFieldGenUIdChange(val) {
this.$set(this.field, 'generates_uuid', val)
onFieldGenUIdChange (val) {
this.field.generates_uuid = val
if (this.field.generates_uuid) {
this.$set(this.field, 'generates_auto_increment_id', false)
this.$set(this.field, 'hidden', true)
this.field.generates_auto_increment_id = false
this.field.hidden = true
}
},
onFieldGenAutoIdChange(val) {
this.$set(this.field, 'generates_auto_increment_id', val)
onFieldGenAutoIdChange (val) {
this.field.generates_auto_increment_id = val
if (this.field.generates_auto_increment_id) {
this.$set(this.field, 'generates_uuid', false)
this.$set(this.field, 'hidden', true)
this.field.generates_uuid = false
this.field.hidden = true
}
},
initRating() {
initRating () {
if (this.field.is_rating && !this.field.rating_max_value) {
this.$set(this.field, 'rating_max_value', 5)
this.field.rating_max_value = 5
}
},
onFieldOptionsChange(val) {
const vals = (val) ? val.trim().split("\n") : []
onFieldOptionsChange (val) {
const vals = (val) ? val.trim().split('\n') : []
const tmpOpts = vals.map(name => {
return {
name: name,
id: name
}
})
this.$set(this.field, this.field.type, {'options': tmpOpts})
this.field[this.field.type] = { options: tmpOpts }
},
onFieldPrefillTodayChange(val) {
this.$set(this.field, 'prefill_today', val)
onFieldPrefillTodayChange (val) {
this.field.prefill_today = val
if (this.field.prefill_today) {
this.$set(this.field, 'prefill', 'Pre-filled with current date')
this.$set(this.field, 'date_range', false)
this.$set(this.field, 'disable_future_dates', false)
this.$set(this.field, 'disable_past_dates', false)
this.field.prefill = 'Pre-filled with current date'
this.field.date_range = false
this.field.disable_future_dates = false
this.field.disable_past_dates = false
} else {
this.$set(this.field, 'prefill', null)
this.field.prefill = null
}
},
onFieldAllowCreationChange(val) {
this.$set(this.field, 'allow_creation', val)
onFieldAllowCreationChange (val) {
this.field.allow_creation = val
if (this.field.allow_creation) {
this.$set(this.field, 'without_dropdown', false)
this.field.without_dropdown = false
}
},
onFieldWithoutDropdownChange(val) {
this.$set(this.field, 'without_dropdown', val)
onFieldWithoutDropdownChange (val) {
this.field.without_dropdown = val
if (this.field.without_dropdown) {
this.$set(this.field, 'allow_creation', false)
this.field.allow_creation = false
}
},
onFieldDisablePastDatesChange(val) {
this.$set(this.field, 'disable_past_dates', val)
onFieldDisablePastDatesChange (val) {
this.field.disable_past_dates = val
if (this.field.disable_past_dates) {
this.$set(this.field, 'disable_future_dates', false)
this.$set(this.field, 'prefill_today', false)
this.field.disable_future_dates = false
this.field.prefill_today = false
}
},
onFieldDisableFutureDatesChange(val) {
this.$set(this.field, 'disable_future_dates', val)
onFieldDisableFutureDatesChange (val) {
this.field.disable_future_dates = val
if (this.field.disable_future_dates) {
this.$set(this.field, 'disable_past_dates', false)
this.$set(this.field, 'prefill_today', false)
this.field.disable_past_dates = false
this.field.prefill_today = false
}
},
onFieldHelpPositionChange (val) {
if (!val) {
this.$set(this.field, 'help_position', 'below_input')
this.field.help_position = 'below_input'
}
}
}

12
resources/js/components/open/forms/fields/components/BlockOptions.vue
View File

@@ -121,7 +121,7 @@ export default {
'field.width': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'width', 'full')
this.field.width = 'full'
}
},
immediate: true
@@ -129,7 +129,7 @@ export default {
'field.align': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'align', 'left')
this.field.align = 'left'
}
},
immediate: true
@@ -138,7 +138,7 @@ export default {
created () {
if (this.field?.width === undefined || this.field?.width === null) {
this.$set(this.field, 'width', 'full')
this.field.width = 'full'
}
},
@@ -146,14 +146,14 @@ export default {
methods: {
onFieldHiddenChange (val) {
this.$set(this.field, 'hidden', val)
this.field.hidden = val
if (this.field.hidden) {
this.$set(this.field, 'required', false)
this.field.required = false
}
},
onFieldHelpPositionChange (val) {
if (!val) {
this.$set(this.field, 'help_position', 'below_input')
this.field.help_position = 'below_input'
}
}
}

93
resources/js/components/open/forms/fields/components/FieldOptions.vue
View File

@@ -92,7 +92,7 @@
</p>
<v-checkbox v-model="field.multi_lines" class="mb-2"
:name="field.id+'_multi_lines'"
@input="$set(field,'multi_lines',$event)"
@input="field.multi_lines = $event"
>
Multi-lines input
</v-checkbox>
@@ -243,7 +243,7 @@
<!-- Pre-fill depends on type -->
<v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3"
:name="field.id+'_prefill'"
@input="$set(field,'prefill',$event)"
@input="field.prefill =$event"
>
Pre-filled value
</v-checkbox>
@@ -363,6 +363,7 @@
import timezones from '../../../../../../data/timezones.json'
import countryCodes from '../../../../../../data/country_codes.json'
import CountryFlag from 'vue-country-flag-next'
const FormBlockLogicEditor = () => import('../../components/form-logic-components/FormBlockLogicEditor.vue')
export default {
@@ -428,7 +429,7 @@ export default {
'field.width': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'width', 'full')
this.field.width = 'full'
}
},
immediate: true
@@ -436,7 +437,7 @@ export default {
'field.align': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'align', 'left')
this.field.align = 'left'
}
},
immediate: true
@@ -445,7 +446,7 @@ export default {
created () {
if (this.field?.width === undefined || this.field?.width === null) {
this.$set(this.field, 'width', 'full')
this.field.width = 'full'
}
},
@@ -457,57 +458,57 @@ export default {
methods: {
onFieldDisabledChange (val) {
this.$set(this.field, 'disabled', val)
this.field.disabled = val
if (this.field.disabled) {
this.$set(this.field, 'hidden', false)
this.field.hidden = false
}
},
onFieldRequiredChange (val) {
this.$set(this.field, 'required', val)
this.field.required = val
if (this.field.required) {
this.$set(this.field, 'hidden', false)
this.field.hidden = false
}
},
onFieldHiddenChange (val) {
this.$set(this.field, 'hidden', val)
this.field.hidden = val
if (this.field.hidden) {
this.$set(this.field, 'required', false)
this.$set(this.field, 'disabled', false)
this.field.required = false
this.field.disabled = false
} else {
this.$set(this.field, 'generates_uuid', false)
this.$set(this.field, 'generates_auto_increment_id', false)
this.field.generates_uuid = false
this.field.generates_auto_increment_id = false
}
},
onFieldDateRangeChange (val) {
this.$set(this.field, 'date_range', val)
this.field.date_range = val
if (this.field.date_range) {
this.$set(this.field, 'with_time', false)
this.$set(this.field, 'prefill_today', false)
this.field.with_time = false
this.field.prefill_today = false
}
},
onFieldWithTimeChange (val) {
this.$set(this.field, 'with_time', val)
this.field.with_time = val
if (this.field.with_time) {
this.$set(this.field, 'date_range', false)
this.field.date_range = false
}
},
onFieldGenUIdChange (val) {
this.$set(this.field, 'generates_uuid', val)
this.field.generates_uuid = val
if (this.field.generates_uuid) {
this.$set(this.field, 'generates_auto_increment_id', false)
this.$set(this.field, 'hidden', true)
this.field.generates_auto_increment_id = false
this.field.hidden = true
}
},
onFieldGenAutoIdChange (val) {
this.$set(this.field, 'generates_auto_increment_id', val)
this.field.generates_auto_increment_id = val
if (this.field.generates_auto_increment_id) {
this.$set(this.field, 'generates_uuid', false)
this.$set(this.field, 'hidden', true)
this.field.generates_uuid = false
this.field.hidden = true
}
},
initRating () {
if (this.field.is_rating && !this.field.rating_max_value) {
this.$set(this.field, 'rating_max_value', 5)
this.field.rating_max_value = 5
}
},
onFieldOptionsChange (val) {
@@ -518,54 +519,54 @@ export default {
id: name
}
})
this.$set(this.field, this.field.type, { options: tmpOpts })
this.field[this.field.type] = { options: tmpOpts }
},
onFieldPrefillTodayChange (val) {
this.$set(this.field, 'prefill_today', val)
this.field.prefill_today = val
if (this.field.prefill_today) {
this.$set(this.field, 'prefill', 'Pre-filled with current date')
this.$set(this.field, 'date_range', false)
this.$set(this.field, 'disable_future_dates', false)
this.$set(this.field, 'disable_past_dates', false)
this.field.prefill = 'Pre-filled with current date'
this.field.date_range = false
this.field.disable_future_dates = false
this.field.disable_past_dates = false
} else {
this.$set(this.field, 'prefill', null)
this.field.prefill = null
}
},
onFieldAllowCreationChange (val) {
this.$set(this.field, 'allow_creation', val)
this.field.allow_creation = val
if (this.field.allow_creation) {
this.$set(this.field, 'without_dropdown', false)
this.field.without_dropdown = false
}
},
onFieldWithoutDropdownChange (val) {
this.$set(this.field, 'without_dropdown', val)
this.field.without_dropdown = val
if (this.field.without_dropdown) {
this.$set(this.field, 'allow_creation', false)
this.field.allow_creation = false
}
},
onFieldDisablePastDatesChange (val) {
this.$set(this.field, 'disable_past_dates', val)
this.field.disable_past_dates = val
if (this.field.disable_past_dates) {
this.$set(this.field, 'disable_future_dates', false)
this.$set(this.field, 'prefill_today', false)
this.field.disable_future_dates = false
this.field.prefill_today = false
}
},
onFieldDisableFutureDatesChange (val) {
this.$set(this.field, 'disable_future_dates', val)
this.field.disable_future_dates = val
if (this.field.disable_future_dates) {
this.$set(this.field, 'disable_past_dates', false)
this.$set(this.field, 'prefill_today', false)
this.field.disable_past_dates = false
this.field.prefill_today = false
}
},
onFieldHelpPositionChange (val) {
if (!val) {
this.$set(this.field, 'help_position', 'below_input')
this.field.help_position = 'below_input'
}
},
selectAllCountries () {
this.$set(this.field, 'unavailable_countries', this.allCountries.map(item => {
this.field.unavailable_countries = this.allCountries.map(item => {
return item.code
}))
})
}
}
}