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

2
client/components/global/Modal.vue
View File

@@ -11,7 +11,7 @@
:class="maxWidthClass"
>
<div v-if="closeable" class="absolute top-4 right-4">
<button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="close">
<button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click="close()">
<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"

5
client/components/global/ScrollShadow.vue
View File

@@ -74,7 +74,9 @@ export default {
window.removeEventListener('resize', this.calcDimensions)
// Cleanup when the component is unmounted.
this.wrapObserver.disconnect()
this.scrollContainerObserver.disconnect()
if (this.scrollContainerObserver) {
this.scrollContainerObserver.disconnect()
}
},
methods: {
async calcDimensions () {
@@ -88,6 +90,7 @@ export default {
},
// Check if shadows are needed.
toggleShadow () {
if (!this.$refs.scrollContainer) return
const hasHorizontalScrollbar =
this.$refs.scrollContainer.clientWidth <
this.$refs.scrollContainer.scrollWidth

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

4
client/components/pages/forms/show/EmbedFormAsPopupModal.vue
View File

@@ -6,12 +6,12 @@
color="light-gray"
@click="showEmbedFormAsPopupModal=true"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4 text-blue-600 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
/>
</svg>
Embed form as popup
Embed as popup
</v-button>
<modal :show="showEmbedFormAsPopupModal" @close="onClose">

6
client/components/pages/forms/show/RegenerateFormLink.vue
View File

@@ -6,13 +6,13 @@
v-track.regenerate_form_link_click="{form_id:form.id, form_slug:form.slug}"
@click="showGenerateFormLinkModal=true"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4 text-blue-600 inline" fill="none"
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 inline" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
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"
/>
</svg>
Regenerate form link
Regenerate link
</v-button>
<!-- Regenerate form link modal -->
@@ -105,7 +105,7 @@ export default {
this.loadingNewLink = true
axios.put(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option).then((response) => {
this.formsStore.addOrUpdate(response.data.form)
this.$router.push({name: 'forms-slug-show', params: {slug: response.data.form.slug}})
this.$router.push({name: 'forms-slug-show-share', params: {slug: response.data.form.slug}})
this.alertSuccess(response.data.message)
this.loadingNewLink = false
}).finally(() => {

4
client/components/pages/forms/show/UrlFormPrefill.vue
View File

@@ -6,13 +6,13 @@
v-track.url_form_prefill_click="{form_id:form.id, form_slug:form.slug}"
@click="showUrlFormPrefillModal=true"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4 text-blue-600 inline" fill="none"
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 inline" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-7a2 2 0 012-2h2m3-4H9a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-1m-1 4l-3 3m0 0l-3-3m3 3V3"
/>
</svg>
Url form pre-fill
Url pre-fill
</v-button>
<modal :show="showUrlFormPrefillModal" @close="showUrlFormPrefillModal=false">