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

Remove vform - working on form public page

Browse Source
This commit is contained in:
Julien Nahum
2023-12-24 20:19:59 +01:00
parent 8db2b09767
commit e2dd0295ff
32 changed files with 951 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/components/open/forms/OpenCompleteForm.vue
View File

@@ -108,20 +108,17 @@
</template>
<script>
import Form from 'vform'
import OpenForm from './OpenForm.vue'
import OpenFormButton from './OpenFormButton.vue'
import { themes } from '~/lib/forms/form-themes.js'
import VButton from '~/components/global/VButton.vue'
import VTransition from '~/components/global/transitions/VTransition.vue'
import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
import VTransition from '~/components/global/transitions/VTransition.vue'
import {pendingSubmission} from "~/composables/forms/pendingSubmission.js";
export default {
components: { VTransition, VButton, OpenFormButton, OpenForm, FormCleanings },
mixins: [FormPendingSubmissionKey],
props: {
form: { type: Object, required: true },
creating: { type: Boolean, default: false }, // If true, fake form submit
@@ -129,9 +126,10 @@ export default {
submitButtonClass: { type: String, default: '' }
},
setup() {
setup(props) {
return {
isIframe: useIsIframe()
isIframe: useIsIframe(),
pendingSubmission: pendingSubmission(props.form)
}
},
@@ -140,7 +138,7 @@ export default {
loading: false,
submitted: false,
themes: themes,
passwordForm: new Form({
passwordForm: useForm({
password: null
}),
hidePasswordDisabledMsg: false,
@@ -163,9 +161,6 @@ export default {
}
},
mounted () {
},
methods: {
submitForm (form, onFailure) {
if (this.creating) {
@@ -175,8 +170,8 @@ export default {
}
this.loading = true
this.closeAlert()
form.post('/api/forms/' + this.form.slug + '/answer').then((response) => {
// this.closeAlert()
form.post('/forms/' + this.form.slug + '/answer').then((data) => {
this.$logEvent('form_submission', {
workspace_id: this.form.workspace_id,
form_id: this.form.id
@@ -202,15 +197,15 @@ export default {
}, '*')
try {
window.localStorage.removeItem(this.formPendingSubmissionKey)
this.pendingSubmission.remove()
} catch (e) {}
if (response.data.redirect && response.data.redirect_url) {
window.location.href = response.data.redirect_url
if (data.redirect && data.redirect_url) {
window.location.href = data.redirect_url
}
if (response.data.submission_id) {
this.submissionId = response.data.submission_id
if (data.submission_id) {
this.submissionId = data.submission_id
}
this.loading = false
@@ -223,7 +218,8 @@ export default {
}
}).catch((error) => {
if (error.response && error.response.data && error.response.data.message) {
this.alertError(error.response.data.message)
console.error(error)
// this.alertError(error.response.data.message)
}
this.loading = false
onFailure()

62
client/components/open/forms/OpenForm.vue
View File

@@ -5,7 +5,7 @@
</p>
</div>
<form v-else-if="dataForm" @submit.prevent="">
<transition name="fade" mode="out-in" appear>
<transition name="fade" mode="out-in">
<div :key="currentFieldGroupIndex" class="form-group flex flex-wrap w-full">
<draggable v-model="currentFields"
item-key="id"
@@ -61,22 +61,17 @@
<script>
import axios from 'axios'
import Form from 'vform'
import OpenFormButton from './OpenFormButton.vue'
import clonedeep from 'clone-deep'
import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js";
import OpenFormField from './OpenFormField.vue'
import draggable from 'vuedraggable'
import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
draggable.compatConfig = { MODE: 3 }
const VueHcaptcha = () => import('@hcaptcha/vue3-hcaptcha')
import OpenFormButton from './OpenFormButton.vue'
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha"
import OpenFormField from './OpenFormField.vue'
import {pendingSubmission} from "~/composables/forms/pendingSubmission.js";
import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js";
export default {
name: 'OpenForm',
components: { draggable, OpenFormField, OpenFormButton, VueHcaptcha },
mixins: [FormPendingSubmissionKey],
props: {
form: {
type: Object,
@@ -101,24 +96,26 @@ export default {
adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
},
setup () {
setup (props) {
const recordsStore = useRecordsStore()
const workingFormStore = useWorkingFormStore()
const dataForm = ref(useForm())
return {
dataForm,
recordsStore,
workingFormStore,
darkModeEnabled: useDark()
darkModeEnabled: useDark(),
pendingSubmission: pendingSubmission(props.form)
}
},
data () {
return {
dataForm: null,
currentFieldGroupIndex: 0,
/**
* Used to force refresh components by changing their keys
*/
formVersionId: 1,
isAutoSubmit: false,
/**
* If currently dragging a field
@@ -128,7 +125,7 @@ export default {
},
computed: {
hCaptchaSiteKey: () => this.$config.hCaptchaSiteKey,
hCaptchaSiteKey: () => useAppConfig().hCaptchaSiteKey,
/**
* Create field groups (or Page) using page breaks if any
*/
@@ -191,7 +188,7 @@ export default {
return this.currentFieldGroupIndex === (this.fieldGroups.length - 1)
},
isPublicFormPage () {
return this.$route.name === 'forms.show_public'
return this.$route.name === 'forms-slug'
},
dataFormValue () {
// For get values instead of Id for select/multi select options
@@ -226,19 +223,11 @@ export default {
this.initForm()
}
},
theme: {
handler () {
this.formVersionId++
}
},
dataForm: {
dataFormValue: {
deep: true,
handler () {
if (this.isPublicFormPage && this.form && this.form.auto_save && this.dataFormValue) {
try {
window.localStorage.setItem(this.formPendingSubmissionKey, JSON.stringify(this.dataFormValue))
} catch (e) {
}
if (this.isPublicFormPage && this.form && this.form.auto_save) {
this.pendingSubmission.set(this.dataFormValue)
}
}
}
@@ -246,8 +235,7 @@ export default {
mounted () {
this.initForm()
if (window.location.href.includes('auto_submit=true')) {
if (window.client && window.location.href.includes('auto_submit=true')) {
this.isAutoSubmit = true
this.submitForm()
}
@@ -318,20 +306,14 @@ export default {
this.form.submission_id = urlParam.get('submission_id')
const data = await this.getSubmissionData()
if (data !== null && data) {
this.dataForm = new Form(data)
this.dataForm = useForm(data)
return
}
}
}
if (this.isPublicFormPage && this.form.auto_save) {
let pendingData
try {
pendingData = window.localStorage.getItem(this.formPendingSubmissionKey)
} catch (e) {
pendingData = null
}
let pendingData = this.pendingSubmission.get()
if (pendingData !== null && pendingData) {
pendingData = JSON.parse(pendingData)
this.fields.forEach((field) => {
if (field.type === 'date' && field.prefill_today === true) { // For Prefill with 'today'
const dateObj = new Date()
@@ -345,7 +327,7 @@ export default {
pendingData[field.id] = currentDate
}
})
this.dataForm = new Form(pendingData)
this.dataForm = useForm(pendingData)
return
}
}
@@ -389,7 +371,7 @@ export default {
formData[field.id] = field.prefill
}
})
this.dataForm = new Form(formData)
this.dataForm = useForm(formData)
},
previousPage () {
this.currentFieldGroupIndex -= 1

31
client/components/open/forms/OpenFormField.vue
View File

@@ -81,12 +81,10 @@
<script>
import { computed } from 'vue'
import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
import FormPendingSubmissionKey from '~/mixins/forms/form-pending-submission-key.js'
export default {
name: 'OpenFormField',
components: {},
mixins: [FormPendingSubmissionKey],
props: {
form: {
type: Object,
@@ -115,7 +113,7 @@ export default {
adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
},
setup () {
setup (props) {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore,
@@ -125,20 +123,6 @@ export default {
},
computed: {
fieldComponents () {
return {
text: 'TextInput',
number: 'TextInput',
select: 'SelectInput',
multi_select: 'SelectInput',
date: 'DateInput',
files: 'FileInput',
checkbox: 'CheckboxInput',
url: 'TextInput',
email: 'TextInput',
phone_number: 'TextInput'
}
},
/**
* Get the right input component for the field/options combination
*/
@@ -168,7 +152,18 @@ export default {
if (field.type === 'phone_number' && !field.use_simple_text_input) {
return 'PhoneInput'
}
return this.fieldComponents[field.type]
return {
text: 'TextInput',
number: 'TextInput',
select: 'SelectInput',
multi_select: 'SelectInput',
date: 'DateInput',
files: 'FileInput',
checkbox: 'CheckboxInput',
url: 'TextInput',
email: 'TextInput',
phone_number: 'TextInput'
}[field.type]
},
isPublicFormPage () {
return this.$route.name === 'forms.show_public'

3
client/components/open/forms/components/FormSubmissions.vue
View File

@@ -89,7 +89,6 @@
<script>
import Fuse from 'fuse.js'
import Form from 'vform'
import clonedeep from 'clone-deep'
import VSwitch from '../../../forms/components/VSwitch.vue'
import OpenTable from '../../tables/OpenTable.vue'
@@ -117,7 +116,7 @@ export default {
properties: [],
removed_properties: [],
displayColumns: {},
searchForm: new Form({
searchForm: useForm({
search: ''
})
}

5
client/components/open/forms/components/form-components/AddFormBlock.vue
View File

@@ -61,10 +61,8 @@
</template>
<script>
import Form from 'vform'
import clonedeep from 'clone-deep'
import { computed } from 'vue'
import { useWorkingFormStore } from '../../../../../stores/working_form'
export default {
name: 'AddFormBlock',
@@ -206,7 +204,7 @@ export default {
this.workingFormStore.closeAddFieldSidebar()
},
reset () {
this.blockForm = new Form({
this.blockForm = useForm({
type: null,
name: null
})
@@ -222,7 +220,6 @@ export default {
}
newBlock.help_position = 'below_input'
if (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) {
console.log('------',this.form)
const newFields = clonedeep(this.form.properties)
newFields.push(newBlock)
this.form.properties = newFields

5
client/components/open/forms/components/templates/FormTemplateModal.vue
View File

@@ -73,10 +73,7 @@
<script>
import axios from 'axios'
import Form from 'vform'
import { computed } from 'vue'
import { useAuthStore } from '../../../../../stores/auth'
import { useTemplatesStore } from '../../../../../stores/templates'
import QuestionsEditor from './QuestionsEditor.vue'
export default {
@@ -105,7 +102,7 @@ export default {
}),
mounted () {
this.templateForm = new Form(this.template ?? {
this.templateForm = useForm(this.template ?? {
publicly_listed: false,
name: '',
slug: '',