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

Working on form/show and editor

Browse Source
This commit is contained in:
Julien Nahum
2023-12-24 09:51:22 +01:00
parent 56e533581c
commit d93b696b05
16 changed files with 96 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
client/components/open/forms/components/FormEditor.vue
View File

@@ -200,7 +200,7 @@ export default {
}
]
},
helpUrl: () => this.$config.links.help
helpUrl: () => useAppConfig().links.help
},
watch: {},
@@ -217,9 +217,9 @@ export default {
methods: {
displayFormModificationAlert (responseData) {
if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
this.alertWarning(responseData.message)
// this.alertWarning(responseData.message)
} else {
this.alertSuccess(responseData.message)
// this.alertSuccess(responseData.message)
}
},
openCrisp () {
@@ -244,12 +244,13 @@ export default {
this.updateFormLoading = true
this.validationErrorResponse = null
this.form.put('/open/forms/{id}/'.replace('{id}', this.form.id)).then((data) => {
this.formsStore.addOrUpdate(data.form)
this.formsStore.save(data.form)
this.$emit('on-save')
this.$router.push({ name: 'forms-slug-show', params: { slug: this.form.slug } })
this.$router.push({ name: 'forms-slug-show-share', params: { slug: this.form.slug } })
this.amplitude.logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
this.displayFormModificationAlert(data)
}).catch((error) => {
console.log(error)
if (error.response.status === 422) {
this.validationErrorResponse = error.response.data
this.showValidationErrors()

55
client/components/open/forms/components/FormFieldsEditor.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-button v-if="formFields && formFields.length > 8"
<v-button v-if="form.properties && form.properties.length > 8"
class="w-full mb-3" color="light-gray"
@click="openAddFieldSidebar"
>
@@ -14,7 +14,7 @@
Add block
</v-button>
<draggable v-model="formFields"
<draggable v-model="form.properties"
item-key="id"
class="bg-white overflow-hidden dark:bg-notion-dark-light rounded-md w-full mx-auto border transition-colors"
ghost-class="bg-gray-50"
@@ -23,7 +23,7 @@
>
<template #item="{element, index}">
<div class="w-full mx-auto transition-colors"
:class="{'bg-gray-100 dark:bg-gray-800':element.hidden,'bg-white dark:bg-notion-dark-light':!element.hidden && !element.type==='nf-page-break', 'border-b': (index!== formFields.length -1), 'bg-blue-50 dark:bg-blue-900':element && element.type==='nf-page-break'}"
:class="{'bg-gray-100 dark:bg-gray-800':element.hidden,'bg-white dark:bg-notion-dark-light':!element.hidden && !element.type==='nf-page-break', 'border-b': (index!== form.properties.length -1), 'bg-blue-50 dark:bg-blue-900':element && element.type==='nf-page-break'}"
>
<div v-if="element" class="flex items-center space-x-1 group py-2 pr-4 relative">
<!-- Drag handler -->
@@ -186,51 +186,23 @@ export default {
const workingFormStore = useWorkingFormStore()
return {
route: useRoute(),
workingFormStore
workingFormStore,
form: storeToRefs(workingFormStore).content,
}
},
data () {
return {
formFields: [],
removing: null
}
},
computed: {
form: {
get () {
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.workingFormStore.set(value)
}
}
},
watch: {
formFields: {
deep: true,
handler () {
this.form.properties = this.formFields
}
},
'form.properties': {
deep: true,
handler () {
// If different, then update
if (this.form.properties.length !== this.formFields.length ||
JSON.stringify(this.form.properties) !== JSON.stringify(this.formFields)) {
this.formFields = clonedeep(this.form.properties)
}
}
}
beforeMount() {
console.log('beforemounted formfields editor with', this.form)
},
mounted () {
console.log('mounted formfields editor with', this.form)
this.init()
},
@@ -279,9 +251,11 @@ export default {
},
init () {
if (this.route.name === 'forms-create' || this.route.name === 'forms-create-guest') { // Set Default fields
this.formFields = (this.form.properties.length > 0) ? clonedeep(this.form.properties) : this.getDefaultFields()
if (!this.form.properties) {
this.form.properties = this.getDefaultFields()
}
} else {
this.formFields = clonedeep(this.form.properties).map((field) => {
this.form.properties = this.form.properties.map((field) => {
// Add more field properties
field.placeholder = field.placeholder || null
field.prefill = field.prefill || null
@@ -291,7 +265,6 @@ export default {
return field
})
}
this.form.properties = this.formFields
},
generateUUID () {
let d = new Date().getTime()// Timestamp
@@ -324,9 +297,7 @@ export default {
this.workingFormStore.openSettingsForField(index)
},
removeBlock (blockIndex) {
const newFields = clonedeep(this.formFields)
newFields.splice(blockIndex, 1)
this.formFields = newFields
this.form.properties.splice(blockIndex, 1)
this.closeSidebar()
},
closeSidebar () {

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

@@ -23,18 +23,26 @@
<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]" class="float-right" @update:model-value="onChangeDisplayColumns" />
<div class="border border-gray-300 rounded-md">
<div v-for="(field,index) in properties" :key="field.id" class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
<p class="flex-grow truncate">
{{ field.name }}
</p>
<v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
</div>
</div>
</template>
<template v-if="removed_properties.length > 0">
<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]" class="float-right" @update:model-value="onChangeDisplayColumns" />
<div class="border border-gray-300 rounded-md">
<div v-for="(field,index) in removed_properties" :key="field.id" class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
<p class="flex-grow truncate">
{{ field.name }}
</p>
<v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
</div>
</div>
</template>
</div>
@@ -80,18 +88,15 @@
</template>
<script>
import axios from 'axios'
import Fuse from 'fuse.js'
import Form from 'vform'
import { useWorkingFormStore } from '../../../../stores/working_form'
import ScrollShadow from '~/components/global/ScrollShadow.vue'
import OpenTable from '../../tables/OpenTable.vue'
import clonedeep from 'clone-deep'
import VSwitch from '../../../forms/components/VSwitch.vue'
import OpenTable from '../../tables/OpenTable.vue'
export default {
name: 'FormSubmissions',
components: { ScrollShadow, OpenTable, VSwitch },
components: { OpenTable, VSwitch },
props: {},
setup () {

4
client/components/open/tables/components/ResizableTh.vue
View File

@@ -43,7 +43,7 @@ export default {
this.w = parseInt(styles.width, 10)
// Attach the listeners to `document`
if (process.server) {
if (process.client) {
document.addEventListener('mousemove', this.mouseMoveHandler)
document.addEventListener('mouseup', this.mouseUpHandler)
}
@@ -57,7 +57,7 @@ export default {
},
mouseUpHandler () {
// Remove the handlers of `mousemove` and `mouseup`
if (process.server) {
if (process.client) {
document.removeEventListener('mousemove', this.mouseMoveHandler)
document.removeEventListener('mouseup', this.mouseUpHandler)
}