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

16
resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue
View File

@@ -1,5 +1,5 @@
<template>
<collapse class="py-5 w-full" :default-value="false">
<collapse class="py-5 w-full" :model-value="false">
<template #title>
<div class="flex">
<h3 class="font-semibold block text-lg">
@@ -10,15 +10,15 @@
</div>
</template>
<toggle-switch-input :value="value.hide_title" name="hide_title" class="mt-4"
label="Hide Form Title"
:disabled="form.hide_title===true"
@input="onChangeHideTitle"
:help="hideTitleHelp"
label="Hide Form Title"
:disabled="form.hide_title===true"
:help="hideTitleHelp"
@input="onChangeHideTitle"
/>
<toggle-switch-input :value="value.auto_submit" name="auto_submit" class="mt-4"
label="Auto Submit Form"
help="Form will auto submit immediate after open URL"
@input="onChangeAutoSubmit"
label="Auto Submit Form"
help="Form will auto submit immediate after open URL"
@input="onChangeAutoSubmit"
/>
</collapse>
</template>

20
resources/js/components/open/forms/components/FormFieldsEditor.vue
View File

@@ -205,7 +205,7 @@ export default {
formFields: {
deep: true,
handler () {
this.$set(this.form, 'properties', this.formFields)
this.form.properties = this.formFields
}
},
@@ -228,21 +228,21 @@ export default {
methods: {
onChangeName (field, newName) {
this.$set(field, 'name', newName)
field.name = newName
},
toggleHidden (field) {
this.$set(field, 'hidden', !field.hidden)
field.hidden = !field.hidden
if (field.hidden) {
this.$set(field, 'required', false)
field.required = false
} else {
this.$set(field, 'generates_uuid', false)
this.$set(field, 'generates_auto_increment_id', false)
field.generates_uuid = false
field.generates_auto_increment_id = false
}
},
toggleRequired (field) {
this.$set(field, 'required', !field.required)
field.required = !field.required
if (field.required) {
this.$set(field, 'hidden', false)
field.hidden = false
}
},
getDefaultFields () {
@@ -283,7 +283,7 @@ export default {
return field
})
}
this.$set(this.form, 'properties', this.formFields)
this.form.properties = this.formFields
},
generateUUID () {
let d = new Date().getTime()// Timestamp
@@ -318,7 +318,7 @@ export default {
removeBlock (blockIndex) {
const newFields = clonedeep(this.formFields)
newFields.splice(blockIndex, 1)
this.$set(this, 'formFields', newFields)
this.formFields = newFields
this.closeSidebar()
},
closeSidebar () {

105
resources/js/components/open/forms/components/FormSubmissions.vue
View File

@@ -1,6 +1,7 @@
<template>
<div
class="my-4 w-full mx-auto">
class="my-4 w-full mx-auto"
>
<h3 class="font-semibold mb-4 text-xl">
Form Submissions
</h3>
@@ -9,8 +10,8 @@
<modal :show="showColumnsModal" @close="showColumnsModal=false">
<template #icon>
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 5H8C4.13401 5 1 8.13401 1 12C1 15.866 4.13401 19 8 19H16C19.866 19 23 15.866 23 12C23 8.13401 19.866 5 16 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 15C9.65685 15 11 13.6569 11 12C11 10.3431 9.65685 9 8 9C6.34315 9 5 10.3431 5 12C5 13.6569 6.34315 15 8 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 5H8C4.13401 5 1 8.13401 1 12C1 15.866 4.13401 19 8 19H16C19.866 19 23 15.866 23 12C23 8.13401 19.866 5 16 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 15C9.65685 15 11 13.6569 11 12C11 10.3431 9.65685 9 8 9C6.34315 9 5 10.3431 5 12C5 13.6569 6.34315 15 8 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</template>
<template #title>
@@ -19,33 +20,43 @@
<div class="px-4">
<template v-if="properties.length > 0">
<h4 class="font-bold mb-2">Form Fields</h4>
<h4 class="font-bold mb-2">
Form Fields
</h4>
<div v-for="field in properties" :key="field.id" class="p-2 border">
{{ field.name }}
<v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right"/>
<v-switch v-model="displayColumns[field.id]" class="float-right" @input="onChangeDisplayColumns" />
</div>
</template>
<template v-if="removed_properties.length > 0">
<h4 class="font-bold mb-2 mt-4">Removed Fields</h4>
<h4 class="font-bold mb-2 mt-4">
Removed Fields
</h4>
<div v-for="field in removed_properties" :key="field.id" class="p-2 border">
{{ field.name }}
<v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right"/>
<v-switch v-model="displayColumns[field.id]" class="float-right" @input="onChangeDisplayColumns" />
</div>
</template>
</div>
</modal>
<loader v-if="!form || isLoading" class="h-6 w-6 text-nt-blue mx-auto"/>
<loader v-if="!form || isLoading" class="h-6 w-6 text-nt-blue mx-auto" />
<div v-else>
<div class="flex flex-wrap items-end">
<div class="flex-grow">
<text-input class="w-64" :form="searchForm" name="search" placeholder="Search..." />
</div>
<div class="font-semibold flex gap-4">
<p v-if="form && !isLoading && formInitDone" class="float-right text-xs uppercase mb-2"> <a
href="javascript:void(0);" class="text-gray-500" @click="showColumnsModal=true">Display columns</a></p>
<p v-if="form && !isLoading && tableData.length > 0" class="text-right text-xs uppercase"><a
:href="exportUrl" target="_blank">Export as CSV</a></p>
<p v-if="form && !isLoading && formInitDone" class="float-right text-xs uppercase mb-2">
<a
href="javascript:void(0);" class="text-gray-500" @click="showColumnsModal=true"
>Display columns</a>
</p>
<p v-if="form && !isLoading && tableData.length > 0" class="text-right text-xs uppercase">
<a
:href="exportUrl" target="_blank"
>Export as CSV</a>
</p>
</div>
</div>
@@ -62,8 +73,7 @@
:loading="isLoading"
@resize="dataChanged()"
@deleted="onDeleteRecord()"
>
</open-table>
/>
</scroll-shadow>
</div>
</div>
@@ -75,14 +85,14 @@ import Fuse from 'fuse.js'
import Form from 'vform'
import ScrollShadow from '../../../common/ScrollShadow.vue'
import OpenTable from '../../tables/OpenTable.vue'
import clonedeep from "clone-deep";
import clonedeep from 'clone-deep'
import VSwitch from '../../../forms/components/VSwitch.vue'
export default {
name: 'FormSubmissions',
components: {ScrollShadow, OpenTable, VSwitch},
components: { ScrollShadow, OpenTable, VSwitch },
props: {},
data() {
data () {
return {
formInitDone: false,
isLoading: false,
@@ -98,38 +108,25 @@ export default {
})
}
},
mounted() {
this.initFormStructure()
this.getSubmissionsData()
},
watch: {
form() {
if (this.form === null) {
return
}
this.initFormStructure()
this.getSubmissionsData()
}
},
computed: {
form: {
get() {
get () {
return this.$store.state['open/working_form'].content
},
set(value) {
set (value) {
this.$store.commit('open/working_form/set', value)
}
},
exportUrl() {
exportUrl () {
if (!this.form) {
return ''
}
return '/api/open/forms/' + this.form.id + '/submissions/export'
},
filteredData () {
if(!this.tableData) return []
if (!this.tableData) return []
let filteredData = clonedeep(this.tableData)
const filteredData = clonedeep(this.tableData)
if (this.searchForm.search === '' || this.searchForm.search === null) {
return filteredData
@@ -145,8 +142,21 @@ export default {
})
}
},
watch: {
form () {
if (this.form === null) {
return
}
this.initFormStructure()
this.getSubmissionsData()
}
},
mounted () {
this.initFormStructure()
this.getSubmissionsData()
},
methods: {
initFormStructure() {
initFormStructure () {
if (!this.form || this.formInitDone) {
return
}
@@ -163,12 +173,12 @@ export default {
// Add a "created at" column
const columns = clonedeep(this.form.properties)
columns.push({
"name": "Created at",
"id": "created_at",
"type": "date",
"width": 140,
name: 'Created at',
id: 'created_at',
type: 'date',
width: 140
})
this.$set(this.form, 'properties', columns)
this.form.properties = columns
}
this.formInitDone = true
@@ -186,7 +196,7 @@ export default {
})
}
},
getSubmissionsData() {
getSubmissionsData () {
if (!this.form || this.fullyLoaded) {
return
}
@@ -208,24 +218,23 @@ export default {
this.isLoading = false
})
},
dataChanged() {
dataChanged () {
if (this.$refs.shadows) {
this.$refs.shadows.toggleShadow()
this.$refs.shadows.calcDimensions()
}
},
onChangeDisplayColumns() {
onChangeDisplayColumns () {
window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))
const final_properties = this.properties.concat(this.removed_properties).filter((field) => {
this.form.properties = this.properties.concat(this.removed_properties).filter((field) => {
return this.displayColumns[field.id] === true
})
this.$set(this.form, 'properties', final_properties)
},
onDeleteRecord() {
onDeleteRecord () {
this.fullyLoaded = false
this.tableData = []
this.getSubmissionsData()
}
},
}
}
</script>

131
resources/js/components/open/forms/components/form-components/AddFormBlockSidebar.vue
View File

@@ -1,13 +1,14 @@
<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">
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"
>
<div class="p-4 border-b sticky top-0 z-10 bg-white">
<div class="flex">
<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">
@@ -18,32 +19,42 @@
<div class="py-2 px-4">
<div>
<p class="text-gray-500 uppercase text-xs font-semibold mb-2">Input Blocks</p>
<p class="text-gray-500 uppercase text-xs font-semibold mb-2">
Input Blocks
</p>
<div class="grid grid-cols-2 gap-2">
<div v-for="(block, i) in inputBlocks" :key="block.name"
class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
role="button" @click.prevent="addBlock(block.name)"
class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
role="button" @click.prevent="addBlock(block.name)"
>
<div class="mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
stroke="currentColor" stroke-width="2" v-html="block.icon"
/>
</div>
<p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">{{ block.title }}</p>
<p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
{{ block.title }}
</p>
</div>
</div>
</div>
<div class="border-t mt-6">
<p class="text-gray-500 uppercase text-xs font-semibold mb-2 mt-6">Layout Blocks</p>
<p class="text-gray-500 uppercase text-xs font-semibold mb-2 mt-6">
Layout Blocks
</p>
<div class="grid grid-cols-2 gap-2">
<div v-for="(block, i) in layoutBlocks" :key="block.name"
class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
role="button" @click.prevent="addBlock(block.name)"
class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
role="button" @click.prevent="addBlock(block.name)"
>
<div class="mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
stroke="currentColor" stroke-width="2" v-html="block.icon"
/>
</div>
<p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">{{ block.title }}</p>
<p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
{{ block.title }}
</p>
</div>
</div>
</div>
@@ -52,7 +63,7 @@
</template>
<script>
import {mapState} from 'vuex'
import { mapState } from 'vuex'
import Form from 'vform'
import clonedeep from 'clone-deep'
@@ -60,91 +71,91 @@ export default {
name: 'AddFormBlockSidebar',
components: {},
props: {},
data() {
data () {
return {
blockForm: null,
inputBlocks: [
{
name: 'text',
title: 'Text Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"/>',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"/>'
},
{
name: 'date',
title: 'Date Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>'
},
{
name: 'url',
title: 'URL Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>'
},
{
name: 'phone_number',
title: 'Phone Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>'
},
{
name: 'email',
title: 'Email Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>'
},
{
name: 'checkbox',
title: 'Checkbox Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>'
},
{
name: 'select',
title: 'Select Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>'
},
{
name: 'multi_select',
title: 'Multi-select Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>'
},
{
name: 'number',
title: 'Number Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>'
},
{
name: 'files',
title: 'File Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />'
},
{
name: 'signature',
title: 'Signature Input',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />'
}
],
layoutBlocks: [
{
name: 'nf-text',
title: 'Text Block',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h8m-8 6h16" />',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h8m-8 6h16" />'
},
{
name: 'nf-page-break',
title: 'Page-break Block',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />'
},
{
name: 'nf-divider',
title: 'Divider Block',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />'
},
{
name: 'nf-image',
title: 'Image Block',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />'
},
{
name: 'nf-code',
title: 'Code Block',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />',
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />'
}
]
}
@@ -156,80 +167,80 @@ export default {
showAddFieldSidebar: state => state['open/working_form'].showAddFieldSidebar
}),
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)
}
},
showSidebar() {
showSidebar () {
return (this.form && this.showAddFieldSidebar) ?? false
},
defaultBlockNames() {
defaultBlockNames () {
return {
'text': 'Your name',
'date': 'Date',
'url': 'Link',
'phone_number': 'Phone Number',
'number': 'Number',
'email': 'Email',
'checkbox': 'Checkbox',
'select': 'Select',
'multi_select': 'Multi Select',
'files': 'Files',
'signature': 'Signature',
text: 'Your name',
date: 'Date',
url: 'Link',
phone_number: 'Phone Number',
number: 'Number',
email: 'Email',
checkbox: 'Checkbox',
select: 'Select',
multi_select: 'Multi Select',
files: 'Files',
signature: 'Signature',
'nf-text': 'Text Block',
'nf-page-break': 'Page Break',
'nf-divider': 'Divider',
'nf-image': 'Image',
'nf-code': 'Code Block',
'nf-code': 'Code Block'
}
}
},
watch: {},
mounted() {
mounted () {
this.reset()
},
methods: {
closeSidebar() {
closeSidebar () {
this.$store.commit('open/working_form/closeAddFieldSidebar')
},
reset() {
reset () {
this.blockForm = new Form({
type: null,
name: null
})
},
addBlock(type) {
addBlock (type) {
this.blockForm.type = type
this.blockForm.name = this.defaultBlockNames[type]
const newBlock = this.prefillDefault(this.blockForm.data())
newBlock.id = this.generateUUID()
newBlock.hidden = false
if (['select', 'multi_select'].includes(this.blockForm.type)) {
newBlock[this.blockForm.type] = {'options': []}
newBlock[this.blockForm.type] = { options: [] }
}
newBlock.help_position = 'below_input'
if(this.selectedFieldIndex === null || this.selectedFieldIndex === undefined){
if (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) {
const newFields = clonedeep(this.form.properties)
newFields.push(newBlock)
this.$set(this.form, 'properties', newFields)
this.$store.commit('open/working_form/openSettingsForField', this.form.properties.length-1)
this.form.properties = newFields
this.$store.commit('open/working_form/openSettingsForField', this.form.properties.length - 1)
} else {
const newFields = clonedeep(this.form.properties)
newFields.splice(this.selectedFieldIndex+1, 0, newBlock)
this.$set(this.form, 'properties', newFields)
this.$store.commit('open/working_form/openSettingsForField', this.selectedFieldIndex+1)
newFields.splice(this.selectedFieldIndex + 1, 0, newBlock)
this.form.properties = newFields
this.$store.commit('open/working_form/openSettingsForField', this.selectedFieldIndex + 1)
}
this.reset()
},
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) {
@@ -244,7 +255,7 @@ export default {
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
})
},
prefillDefault(data) {
prefillDefault (data) {
if (data.type === 'nf-text') {
data.content = '<p>This is a text block.</p>'
} else if (data.type === 'nf-page-break') {

53
resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
View File

@@ -1,13 +1,15 @@
<template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
<collapse v-model="isCollapseOpen" class="p-4 w-full border-b">
<template #title>
<h3 class="font-semibold text-lg relative">
<svg
class="h-5 w-5 inline mr-2 -mt-0.5 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"
/>
</svg>
About Submissions
@@ -21,7 +23,7 @@
/>
<toggle-switch-input name="editable_submissions" :form="form" class="mt-4"
help="Gives user a unique url to update their submission"
help="Gives user a unique url to update their submission"
>
<template #label>
Editable submissions
@@ -35,21 +37,21 @@
/>
<flat-select-input :form="submissionOptions" name="databaseAction" label="Database Submission Action"
:options="[
{name:'Create new record (default)', value:'create'},
{name:'Update Record (or create if no match)', value:'update'}
]" :required="true" help="Create a new record or update an existing one"
:options="[
{name:'Create new record (default)', value:'create'},
{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}">
<div class="flex items-center truncate mr-6">
{{ optionName }}
<pro-tag v-if="option === 'update'" class="ml-2"/>
<pro-tag v-if="option === 'update'" class="ml-2" />
</div>
</template>
<template #option="{option, selected}">
<span class="flex hover:text-white">
<p class="flex-grow hover:text-white">
{{ option.name }} <template v-if="option.value === 'update'"><pro-tag/></template>
{{ option.name }} <template v-if="option.value === 'update'"><pro-tag /></template>
</p>
<span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4 dark:text-white">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -73,7 +75,8 @@
<small>If the submission has the same value(s) as a previous one for the selected
column(s), we will update it, instead of creating a new one.
<a href="#"
@click.prevent="$crisp.push(['do', 'helpdesk:article:open', ['en', 'how-to-update-a-page-on-form-submission-1t1jwmn']])">More
@click.prevent="$crisp.push(['do', 'helpdesk:article:open', ['en', 'how-to-update-a-page-on-form-submission-1t1jwmn']])"
>More
info here.</a>
</small>
</div>
@@ -89,13 +92,13 @@
<template #selected="{option,optionName}">
<div class="flex items-center truncate mr-6">
{{ optionName }}
<pro-tag v-if="option === 'redirect'" class="ml-2"/>
<pro-tag v-if="option === 'redirect'" class="ml-2" />
</div>
</template>
<template #option="{option, selected}">
<span class="flex hover:text-white">
<p class="flex-grow hover:text-white">
{{ option.name }} <template v-if="option.value === 'redirect'"><pro-tag/></template>
{{ option.name }} <template v-if="option.value === 'redirect'"><pro-tag /></template>
</p>
<span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -117,7 +120,7 @@
</template>
<template v-else>
<toggle-switch-input name="re_fillable" :form="form" class="mt-4"
label="Allow users to fill the form again"
label="Allow users to fill the form again"
/>
<text-input v-if="form.re_fillable" name="re_fill_button_text"
:form="form"
@@ -163,22 +166,22 @@ import ProTag from '../../../../common/ProTag.vue'
import VTransition from '../../../../common/transitions/VTransition.vue'
export default {
components: {Collapse, ProTag, VTransition},
components: { Collapse, ProTag, VTransition },
props: {},
data() {
data () {
return {
submissionOptions: {},
isCollapseOpen: true,
isCollapseOpen: true
}
},
computed: {
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)
}
},
@@ -186,10 +189,10 @@ export default {
* Used for the update record on submission. Lists all visible fields on which you can filter records to update
* on submission instead of creating
*/
filterableFields() {
filterableFields () {
if (this.submissionOptions.databaseAction !== 'update') return []
return this.form.properties.filter((field) => {
return !field.hidden && !['files','signature','multi_select'].includes(field.type)
return !field.hidden && !['files', 'signature', 'multi_select'].includes(field.type)
}).map((field) => {
return {
name: field.name,
@@ -201,7 +204,7 @@ export default {
watch: {
form: {
handler() {
handler () {
if (this.form) {
this.submissionOptions = {
submissionMode: this.form.redirect_url ? 'redirect' : 'default',
@@ -215,14 +218,14 @@ export default {
deep: true,
handler: function (val) {
if (val.submissionMode === 'default') {
this.$set(this.form, 'redirect_url', null)
this.form.redirect_url = null
}
if (val.databaseAction === 'create') {
this.$set(this.form, 'database_fields_update', null)
this.form.database_fields_update = null
}
}
}
},
}
}
</script>

26
resources/js/components/open/forms/components/form-components/FormCustomization.vue
View File

@@ -1,12 +1,12 @@
<template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
<collapse v-model="isCollapseOpen" class="p-4 w-full border-b">
<template #title>
<h3 class="font-semibold text-lg">
<svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Customization
@@ -59,7 +59,7 @@
label="Color (for buttons & inputs border)"
/>
<toggle-switch-input name="hide_title" :form="form" class="mt-4"
label="Hide Title"
label="Hide Title"
/>
<toggle-switch-input name="no_branding" :form="form" class="mt-4">
<template #label>
@@ -68,10 +68,10 @@
</template>
</toggle-switch-input>
<toggle-switch-input name="uppercase_labels" :form="form" class="mt-4"
label="Uppercase Input Labels"
label="Uppercase Input Labels"
/>
<toggle-switch-input name="transparent_background" :form="form" class="mt-4"
label="Transparent Background" help="Only applies when form is embedded"
label="Transparent Background" help="Only applies when form is embedded"
/>
<toggle-switch-input name="confetti_on_submission" :form="form" class="mt-4"
label="Confetti on successful submisison"
@@ -113,21 +113,21 @@ export default {
watch: {},
mounted() {
mounted () {
this.isMounted = true
},
methods: {
onChangeConfettiOnSubmission(val) {
this.$set(this.form, 'confetti_on_submission', val)
if(this.isMounted && val){
onChangeConfettiOnSubmission (val) {
this.form.confetti_on_submission = val
if (this.isMounted && val) {
this.playConfetti()
}
},
openChat () {
window.$crisp.push(['do', 'chat:show'])
window.$crisp.push(['do', 'chat:open'])
},
}
}
}
</script>

10
resources/js/components/open/forms/components/form-components/components/FormNotificationsSubmissionConfirmation.vue
View File

@@ -32,8 +32,8 @@
label="Send submission confirmation" :help="emailSubmissionConfirmationHelp"
/>
<template v-if="form.send_submission_confirmation">
<text-input name="confirmation_reply_to"
v-model="form.notification_settings.confirmation_reply_to" class="mt-4"
<text-input v-model="form.notification_settings.confirmation_reply_to"
name="confirmation_reply_to" class="mt-4"
label="Confirmation Reply To" help="help"
>
<template #help>
@@ -53,8 +53,8 @@
label="Confirmation email content" help="Content of the confirmation email that will be sent"
/>
<toggle-switch-input name="notifications_include_submission"
:form="form" class="mt-4"
label="Include submission data" help="If enabled the confirmation email will contain form submission answers"
:form="form" class="mt-4"
label="Include submission data" help="If enabled the confirmation email will contain form submission answers"
/>
</template>
</modal>
@@ -102,7 +102,7 @@ export default {
watch: {
emailSubmissionConfirmationField (val) {
if (val === null) {
this.$set(this.form, 'send_submission_confirmation', false)
this.form.send_submission_confirmation = false
}
}
},

68
resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
View File

@@ -10,7 +10,7 @@
<div>
<v-button color="light-gray" size="small" @click="showCopyFormModal=true">
<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>
Copy from
</v-button>
@@ -18,7 +18,7 @@
<div>
<v-button color="light-gray" shade="light" size="small" class="ml-1" @click="clearAll">
<svg class="text-red-600 h-4 w-4 inline -mt-1 mr-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 9L12 15M12 9L18 15M21 4H8L1 12L8 20H21C21.5304 20 22.0391 19.7893 22.4142 19.4142C22.7893 19.0391 23 18.5304 23 18V6C23 5.46957 22.7893 4.96086 22.4142 4.58579C22.0391 4.21071 21.5304 4 21 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 9L12 15M12 9L18 15M21 4H8L1 12L8 20H21C21.5304 20 22.0391 19.7893 22.4142 19.4142C22.7893 19.0391 23 18.5304 23 18V6C23 5.46957 22.7893 4.96086 22.4142 4.58579C22.0391 4.21071 21.5304 4 21 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Clear All
@@ -29,7 +29,7 @@
<h5 class="font-semibold mt-3">
1. Conditions
</h5>
<condition-editor ref="filter-editor" v-model="logic.conditions" class="mt-1 border-t border rounded-md" :form="form"/>
<condition-editor ref="filter-editor" v-model="logic.conditions" class="mt-1 border-t border rounded-md" :form="form" />
<h5 class="font-semibold mt-3">
2. Actions
@@ -75,7 +75,7 @@ import clonedeep from 'clone-deep'
export default {
name: 'FormBlockLogicEditor',
components: {SelectInput, Modal, ProTag, ConditionEditor},
components: { SelectInput, Modal, ProTag, ConditionEditor },
props: {
field: {
type: Object,
@@ -87,7 +87,7 @@ export default {
}
},
data() {
data () {
return {
resetKey: 0,
logic: this.field.logic || {
@@ -95,31 +95,31 @@ export default {
actions: []
},
showCopyFormModal: false,
copyFrom: null,
copyFrom: null
}
},
computed: {
copyFromOptions() {
copyFromOptions () {
return this.form.properties.filter((field) => {
return field.id !== this.field.id && field.hasOwnProperty('logic') && field.logic !== null && field.logic !== {}
}).map((field) => {
return {name: field.name, value: field.id}
return { name: field.name, value: field.id }
})
},
actionOptions() {
actionOptions () {
if (['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image'].includes(this.field.type)) {
if (this.field.hidden) {
return [{ name: 'Show Block', value: 'show-block' }]
}else{
} else {
return [{ name: 'Hide Block', value: 'hide-block' }]
}
}
if (this.field.hidden) {
return [
{name: 'Show Block', value: 'show-block'},
{name: 'Require answer', value: 'require-answer'}
{ name: 'Show Block', value: 'show-block' },
{ name: 'Require answer', value: 'require-answer' }
]
} else if (this.field.disabled) {
return [
@@ -133,14 +133,14 @@ export default {
]
} else {
return [
{name: 'Hide Block', value: 'hide-block'},
{ name: 'Hide Block', value: 'hide-block' },
{ name: 'Disable Block', value: 'disable-block' },
(this.field.required
? {name: 'Make it optional', value: 'make-it-optional'}
? { name: 'Make it optional', value: 'make-it-optional' }
: {
name: 'Require answer',
value: 'require-answer'
})
name: 'Require answer',
value: 'require-answer'
})
]
}
}
@@ -148,8 +148,8 @@ export default {
watch: {
logic: {
handler() {
this.$set(this.field, 'logic', this.logic)
handler () {
this.field.logic = this.logic
},
deep: true
},
@@ -164,46 +164,46 @@ export default {
},
'field.required': 'cleanConditions',
'field.disabled': 'cleanConditions',
'field.hidden': 'cleanConditions',
'field.hidden': 'cleanConditions'
},
mounted() {
mounted () {
if (!this.field.hasOwnProperty('logic')) {
this.$set(this.field, 'logic', this.logic)
this.field.logic = this.logic
}
},
methods: {
clearAll() {
this.$set(this.logic, 'conditions', null)
this.$set(this.logic, 'actions', [])
clearAll () {
this.logic.conditions = null
this.logic.actions = []
this.refreshActions()
},
onActionInput() {
onActionInput () {
if (this.logic.actions.length >= 2) {
if (this.logic.actions[1] === 'require-answer' && this.logic.actions[0] === 'hide-block') {
this.$set(this.logic, 'actions', ['require-answer'])
this.logic.actions = ['require-answer']
} else if (this.logic.actions[1] === 'hide-block' && this.logic.actions[0] === 'require-answer') {
this.$set(this.logic, 'actions', ['hide-block'])
this.logic.actions = ['hide-block']
}
this.refreshActions()
}
},
cleanConditions() {
const availableActions = this.actionOptions.map(function(op){ return op.value });
this.$set(this.logic, 'actions', availableActions.filter(value => this.logic.actions.includes(value)))
cleanConditions () {
const availableActions = this.actionOptions.map(function (op) { return op.value })
this.logic.actions = availableActions.filter(value => this.logic.actions.includes(value))
this.refreshActions()
},
refreshActions() {
refreshActions () {
this.resetKey++
},
copyLogic() {
copyLogic () {
if (this.copyFrom) {
const property = this.form.properties.find((property) => {
return property.id === this.copyFrom
})
if (property && property.logic) {
this.$set(this, 'logic', clonedeep(property.logic))
this.logic = clonedeep(property.logic)
this.cleanConditions()
}
}

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
}))
})
}
}
}

2
resources/js/components/open/tables/OpenTable.vue
View File

@@ -232,7 +232,7 @@ export default {
const columns = clonedeep(this.form.properties)
const index = this.form.properties.findIndex(c => c.id === col.id)
columns[index].cell_width = width
this.$set(this.form, 'properties', columns)
this.form.properties = columns
this.$nextTick(() => {
this.$emit('resize')
})