9a3d4 form page (#20)
* Form page new ui * UI polishing, code cleanign & bug fixes * form page divide into separate component & user route-view for tabs * new pages change meta info * Display columns modal Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>
This commit is contained in:
Chirag
GitHub
@@ -1,29 +1,35 @@
|
||||
<template>
|
||||
<modal :show="show" @close="$emit('close')">
|
||||
<form @submit.prevent="createTemplate" @keydown="templateForm.onKeydown($event)">
|
||||
<div class="-m-6">
|
||||
<div class="p-6">
|
||||
<h2 class="text-nt-blue text-3xl font-bold mb-6">
|
||||
Create template
|
||||
</h2>
|
||||
<p>
|
||||
New template will be create from your form <span class="font-semibold">{{form.title}}</span>.
|
||||
Template will be public for all to create form quickly.
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-t py-4 px-6">
|
||||
<text-input name="name" :form="templateForm" class="mt-4" label="Title" :required="true" />
|
||||
<text-input name="slug" :form="templateForm" class="mt-4" label="Slug" :required="true" />
|
||||
<rich-text-area-input name="description" :form="templateForm" class="mt-4" label="Description" :required="true" />
|
||||
<text-input name="image_url" :form="templateForm" class="mt-4" label="Image" :required="true" />
|
||||
<questions-editor name="questions" :form="templateForm" class="mt-4" label="Frequently asked questions" />
|
||||
</div>
|
||||
<div class="flex justify-end mt-4 pb-5 px-6">
|
||||
<v-button class="mr-2" :loading="templateForm.busy">Create</v-button>
|
||||
<v-button color="gray" shade="light" @click.prevent="$emit('close')">Close</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<template #icon>
|
||||
<svg class="w-10 h-10 text-blue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 27C16.0681 27 15.6022 27 15.2346 26.8478C14.7446 26.6448 14.3552 26.2554 14.1522 25.7654C14 25.3978 14 24.9319 14 24V17.2C14 16.0799 14 15.5198 14.218 15.092C14.4097 14.7157 14.7157 14.4097 15.092 14.218C15.5198 14 16.0799 14 17.2 14H24C24.9319 14 25.3978 14 25.7654 14.1522C26.2554 14.3552 26.6448 14.7446 26.8478 15.2346C27 15.6022 27 16.0681 27 17M24.2 34H30.8C31.9201 34 32.4802 34 32.908 33.782C33.2843 33.5903 33.5903 33.2843 33.782 32.908C34 32.4802 34 31.9201 34 30.8V24.2C34 23.0799 34 22.5198 33.782 22.092C33.5903 21.7157 33.2843 21.4097 32.908 21.218C32.4802 21 31.9201 21 30.8 21H24.2C23.0799 21 22.5198 21 22.092 21.218C21.7157 21.4097 21.4097 21.7157 21.218 22.092C21 22.5198 21 23.0799 21 24.2V30.8C21 31.9201 21 32.4802 21.218 32.908C21.4097 33.2843 21.7157 33.5903 22.092 33.782C22.5198 34 23.0799 34 24.2 34Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</template>
|
||||
<template #title>
|
||||
Create template
|
||||
</template>
|
||||
<div class="p-4">
|
||||
<p>
|
||||
New template will be create from your form <span class="font-semibold">{{form.title}}</span>.
|
||||
Template will be public for all to create form quickly.
|
||||
</p>
|
||||
|
||||
<form @submit.prevent="createTemplate" @keydown="templateForm.onKeydown($event)" class="mt-6">
|
||||
<div class="-m-6">
|
||||
<div class="border-t py-4 px-6">
|
||||
<text-input name="name" :form="templateForm" class="mt-4" label="Title" :required="true" />
|
||||
<text-input name="slug" :form="templateForm" class="mt-4" label="Slug" :required="true" />
|
||||
<rich-text-area-input name="description" :form="templateForm" class="mt-4" label="Description" :required="true" />
|
||||
<text-input name="image_url" :form="templateForm" class="mt-4" label="Image" :required="true" />
|
||||
<questions-editor name="questions" :form="templateForm" class="mt-4" label="Frequently asked questions" />
|
||||
</div>
|
||||
<div class="flex justify-end mt-4 pb-5 px-6">
|
||||
<v-button class="mr-2" :loading="templateForm.busy">Create</v-button>
|
||||
<v-button color="white" @click.prevent="$emit('close')">Close</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<modal :show="show" @close="$emit('close')">
|
||||
<div id="form-prefill-url-content" ref="content" class="px-4">
|
||||
<h2 class="text-nt-blue text-3xl font-bold mb-4 flex items-center">
|
||||
<span>Url Form Prefill</span>
|
||||
<pro-tag class="ml-4 pb-3" />
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
Create dynamic links when sharing your form (whether it's embedded or not), that allows you to prefill
|
||||
your form fields. You can use this to personalize the form when sending it to multiple contacts for instance.
|
||||
</p>
|
||||
|
||||
<h3 class="mt-6 border-t text-xl font-semibold mb-4 pt-6">
|
||||
How does it work?
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
Complete your form below and fill only the fields you want to prefill. You can even leave the required fields empty.
|
||||
</p>
|
||||
|
||||
<div class="rounded-lg p-5 bg-gray-100 dark:bg-gray-900 mt-4">
|
||||
<open-form v-if="form" :theme="theme" :loading="false" :show-hidden="true" :form="form" :fields="form.properties" @submit="generateUrl">
|
||||
<template #submit-btn="{submitForm}">
|
||||
<v-button class="mt-2 px-8 mx-1" @click.prevent="submitForm">
|
||||
Generate Pre-filled URL
|
||||
</v-button>
|
||||
</template>
|
||||
</open-form>
|
||||
</div>
|
||||
|
||||
<template v-if="prefillFormData">
|
||||
<h3 class="mt-6 text-xl font-semibold mb-4 pt-6">
|
||||
Your Prefill url
|
||||
</h3>
|
||||
|
||||
<form-url-prefill :form="form" :form-data="prefillFormData" />
|
||||
</template>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<v-button color="gray" shade="light" @click="$emit('close')">Close</v-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormUrlPrefill from '../../open/forms/components/FormUrlPrefill'
|
||||
import ProTag from '../../common/ProTag'
|
||||
import OpenForm from '../../open/forms/OpenForm'
|
||||
import { themes } from '~/config/form-themes'
|
||||
|
||||
export default {
|
||||
name: 'UrlFormPrefillModal',
|
||||
components: { FormUrlPrefill, ProTag, OpenForm },
|
||||
props: {
|
||||
show: { type: Boolean, required: true },
|
||||
form: { type: Object, required: true }
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
prefillFormData: null,
|
||||
theme: themes.default
|
||||
}),
|
||||
|
||||
computed: {},
|
||||
|
||||
methods: {
|
||||
generateUrl (formData, onFailure) {
|
||||
this.prefillFormData = formData
|
||||
this.$nextTick().then(() => {
|
||||
this.$refs.content.parentElement.parentElement.parentElement.scrollTop = (this.$refs.content.offsetHeight - this.$refs.content.parentElement.parentElement.parentElement.offsetHeight + 50)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
53
resources/js/components/pages/forms/show/EmbedCode.vue
Normal file
53
resources/js/components/pages/forms/show/EmbedCode.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="font-semibold text-xl">Embed</h3>
|
||||
<p>Embed your form on your website by copying the HTML code below.</p>
|
||||
<copy-content :content="embedCode" buttonText="Copy Code">
|
||||
<template #icon>
|
||||
<svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 18 18" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.0833 11.5L13.5833 9L11.0833 6.5M6.91667 6.5L4.41667 9L6.91667 11.5M5.5 16.5H12.5C13.9001 16.5 14.6002 16.5 15.135 16.2275C15.6054 15.9878 15.9878 15.6054 16.2275 15.135C16.5 14.6002 16.5 13.9001 16.5 12.5V5.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.5V12.5C1.5 13.9001 1.5 14.6002 1.77248 15.135C2.01217 15.6054 2.39462 15.9878 2.86502 16.2275C3.3998 16.5 4.09987 16.5 5.5 16.5Z"
|
||||
stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</template>
|
||||
Copy Code
|
||||
</copy-content>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CopyContent from '../../../open/forms/components/CopyContent'
|
||||
|
||||
export default {
|
||||
name: 'EmbedCode',
|
||||
components: { CopyContent },
|
||||
props: {
|
||||
form: { type: Object, required: true }
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
|
||||
}),
|
||||
|
||||
computed: {
|
||||
embedCode() {
|
||||
return '<iframe style="border:none;width:100%;" height="' + this.formHeight + 'px" src="' + this.form.share_url + '"></iframe>'
|
||||
},
|
||||
formHeight() {
|
||||
let height = 200
|
||||
if (!this.form.hide_title) {
|
||||
height += 60
|
||||
}
|
||||
height += this.form.properties.filter((property) => {
|
||||
return !property.hidden
|
||||
}).length * 70
|
||||
|
||||
return height
|
||||
}
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
130
resources/js/components/pages/forms/show/ExtraMenu.vue
Normal file
130
resources/js/components/pages/forms/show/ExtraMenu.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="loadingDuplicate || loadingDelete" class="pr-4 pt-2">
|
||||
<loader class="h-6 w-6 mx-auto"/>
|
||||
</div>
|
||||
<dropdown v-else class="inline" dusk="nav-dropdown">
|
||||
<template #trigger="{toggle}">
|
||||
<v-button color="light-gray" class="mr-2" @click="toggle">
|
||||
<svg class="w-4 h-4 inline -mt-1" viewBox="0 0 16 4" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.00016 2.83366C8.4604 2.83366 8.8335 2.46056 8.8335 2.00033C8.8335 1.54009 8.4604 1.16699 8.00016 1.16699C7.53993 1.16699 7.16683 1.54009 7.16683 2.00033C7.16683 2.46056 7.53993 2.83366 8.00016 2.83366Z"
|
||||
stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path
|
||||
d="M13.8335 2.83366C14.2937 2.83366 14.6668 2.46056 14.6668 2.00033C14.6668 1.54009 14.2937 1.16699 13.8335 1.16699C13.3733 1.16699 13.0002 1.54009 13.0002 2.00033C13.0002 2.46056 13.3733 2.83366 13.8335 2.83366Z"
|
||||
stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path
|
||||
d="M2.16683 2.83366C2.62707 2.83366 3.00016 2.46056 3.00016 2.00033C3.00016 1.54009 2.62707 1.16699 2.16683 1.16699C1.70659 1.16699 1.3335 1.54009 1.3335 2.00033C1.3335 2.46056 1.70659 2.83366 2.16683 2.83366Z"
|
||||
stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</v-button>
|
||||
</template>
|
||||
<router-link :to="{name:'forms.show_public', params: {slug: form.slug}}" target="_blank"
|
||||
class="block sm:hidden px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
|
||||
v-track.view_form_click="{form_id:form.id, form_slug:form.slug}"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path
|
||||
d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
View form
|
||||
</router-link>
|
||||
<a href="#"
|
||||
class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
|
||||
v-track.duplicate_form_click="{form_id:form.id, form_slug:form.slug}"
|
||||
@click.prevent="duplicateForm"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
|
||||
/>
|
||||
</svg>
|
||||
Duplicate form
|
||||
</a>
|
||||
<a href="#"
|
||||
class="block block px-4 py-2 text-md text-red-600 hover:bg-red-50 flex items-center"
|
||||
v-track.delete_form_click="{form_id:form.id, form_slug:form.slug}"
|
||||
@click.prevent="alertConfirm('Do you really want to delete this form?',deleteForm)"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
Delete form
|
||||
</a>
|
||||
<a href="#" v-if="user.admin"
|
||||
class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
|
||||
@click.prevent="showCreateTemplateModal=true"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
Create Template
|
||||
</a>
|
||||
</dropdown>
|
||||
|
||||
<create-template-modal :form="form" :show="showCreateTemplateModal" @close="showCreateTemplateModal=false"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import {mapGetters, mapState} from 'vuex'
|
||||
import Dropdown from '../../../common/Dropdown'
|
||||
import CreateTemplateModal from '../CreateTemplateModal'
|
||||
|
||||
export default {
|
||||
name: 'ExtraMenu',
|
||||
components: { Dropdown, CreateTemplateModal },
|
||||
props: {
|
||||
form: { type: Object, required: true }
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
loadingDuplicate: false,
|
||||
loadingDelete: false,
|
||||
showCreateTemplateModal: false
|
||||
}),
|
||||
|
||||
computed: {
|
||||
...mapGetters({
|
||||
user: 'auth/user'
|
||||
}),
|
||||
formEndpoint: () => '/api/open/forms/{id}',
|
||||
},
|
||||
|
||||
methods: {
|
||||
duplicateForm() {
|
||||
if (this.loadingDuplicate) return
|
||||
this.loadingDuplicate = true
|
||||
axios.post(this.formEndpoint.replace('{id}', this.form.id) + '/duplicate').then((response) => {
|
||||
this.$store.commit('open/forms/addOrUpdate', response.data.new_form)
|
||||
this.$router.push({name: 'forms.show', params: {slug: response.data.new_form.slug}})
|
||||
this.alertSuccess('Form was successfully duplicated.')
|
||||
this.loadingDuplicate = false
|
||||
})
|
||||
},
|
||||
deleteForm() {
|
||||
if (this.loadingDelete) return
|
||||
this.loadingDelete = true
|
||||
axios.delete(this.formEndpoint.replace('{id}', this.form.id)).then(() => {
|
||||
this.$store.commit('open/forms/remove', this.form)
|
||||
this.$router.push({name: 'home'})
|
||||
this.alertSuccess('Form was deleted.')
|
||||
this.loadingDelete = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
108
resources/js/components/pages/forms/show/RegenerateFormLink.vue
Normal file
108
resources/js/components/pages/forms/show/RegenerateFormLink.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-button
|
||||
class="w-full"
|
||||
color="light-gray"
|
||||
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"
|
||||
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
|
||||
</v-button>
|
||||
|
||||
<!-- Regenerate form link modal -->
|
||||
<modal :show="showGenerateFormLinkModal" @close="showGenerateFormLinkModal=false">
|
||||
<template #icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue-600" 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>
|
||||
</template>
|
||||
<template #title>
|
||||
Generate new form link
|
||||
</template>
|
||||
<div class="p-4">
|
||||
<p>
|
||||
You can choose between two different URL formats for your form.
|
||||
<span class="font-semibold">Be careful, changing your form URL is not a reversible operation</span>.
|
||||
Make sure to udpate your form URL everywhere where it's used.
|
||||
</p>
|
||||
<div class="border-t py-4 mt-4">
|
||||
<h3 class="text-xl text-gray-700 font-semibold">
|
||||
Human Readable URL
|
||||
</h3>
|
||||
<p>If your users are going to see this url, you might want to make nice and readable. Example:</p>
|
||||
<p class="text-gray-600 border p-4 bg-gray-50 rounded-md mt-4">
|
||||
https://opnform.com/forms/contact
|
||||
</p>
|
||||
<div class="text-center mt-4">
|
||||
<v-button :loading="loadingNewLink" color="outline-blue" @click="regenerateLink('slug')">
|
||||
Generate a Human Readable URL
|
||||
</v-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t pt-4 mt-4">
|
||||
<h3 class="text-xl text-gray-700 font-semibold">
|
||||
Random ID URL
|
||||
</h3>
|
||||
<p>
|
||||
If your user are not going to see your form url (if it's embedded), and if you prefer to have a random
|
||||
non-guessable URL. Example:
|
||||
</p>
|
||||
<p class="text-gray-600 p-4 border bg-gray-50 rounded-md mt-4">
|
||||
https://opnform.com/forms/b4417f9c-34ae-4421-8006-832ee47786e7
|
||||
</p>
|
||||
<div class="text-center mt-4">
|
||||
<v-button :loading="loadingNewLink" color="outline-blue" @click="regenerateLink('uuid')">
|
||||
Generate a Random ID URL
|
||||
</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'RegenerateFormLink',
|
||||
components: {},
|
||||
props: {
|
||||
form: { type: Object, required: true }
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
loadingNewLink: false,
|
||||
showGenerateFormLinkModal: false,
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formEndpoint: () => '/api/open/forms/{id}',
|
||||
},
|
||||
|
||||
methods: {
|
||||
regenerateLink(option) {
|
||||
if (this.loadingNewLink) return
|
||||
this.loadingNewLink = true
|
||||
axios.put(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option).then((response) => {
|
||||
this.$store.commit('open/forms/addOrUpdate', response.data.form)
|
||||
this.$router.push({name: 'forms.show', params: {slug: response.data.form.slug}})
|
||||
this.alertSuccess(response.data.message)
|
||||
this.loadingNewLink = false
|
||||
}).finally(() => {
|
||||
this.showGenerateFormLinkModal = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
39
resources/js/components/pages/forms/show/ShareLink.vue
Normal file
39
resources/js/components/pages/forms/show/ShareLink.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="font-semibold text-xl">Share Link</h3>
|
||||
<p>Your form is now published and ready to be shared with the world! Copy this link to share your form
|
||||
on social media, messaging apps or via email.</p>
|
||||
<copy-content :content="form.share_url">
|
||||
<template #icon>
|
||||
<svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 20 10" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7.49984 9.16634H5.83317C3.53198 9.16634 1.6665 7.30086 1.6665 4.99967C1.6665 2.69849 3.53198 0.833008 5.83317 0.833008H7.49984M12.4998 9.16634H14.1665C16.4677 9.16634 18.3332 7.30086 18.3332 4.99967C18.3332 2.69849 16.4677 0.833008 14.1665 0.833008H12.4998M5.83317 4.99967L14.1665 4.99968"
|
||||
stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</template>
|
||||
Copy Link
|
||||
</copy-content>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CopyContent from '../../../open/forms/components/CopyContent'
|
||||
|
||||
export default {
|
||||
name: 'ShareLink',
|
||||
components: { CopyContent },
|
||||
props: {
|
||||
form: { type: Object, required: true }
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
|
||||
}),
|
||||
|
||||
computed: {},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
98
resources/js/components/pages/forms/show/UrlFormPrefill.vue
Normal file
98
resources/js/components/pages/forms/show/UrlFormPrefill.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-button
|
||||
class="w-full"
|
||||
color="light-gray"
|
||||
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"
|
||||
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
|
||||
<pro-tag class="ml-2"/>
|
||||
</v-button>
|
||||
|
||||
<modal :show="showUrlFormPrefillModal" @close="showUrlFormPrefillModal=false">
|
||||
<template #icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue" 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>
|
||||
</template>
|
||||
<template #title>
|
||||
<span>Url Form Prefill</span>
|
||||
<pro-tag class="ml-4 pb-3" />
|
||||
</template>
|
||||
|
||||
<div class="p-4">
|
||||
<p>
|
||||
Create dynamic links when sharing your form (whether it's embedded or not), that allows you to prefill
|
||||
your form fields. You can use this to personalize the form when sending it to multiple contacts for instance.
|
||||
</p>
|
||||
|
||||
<h3 class="mt-6 border-t text-xl font-semibold mb-4 pt-6">
|
||||
How does it work?
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
Complete your form below and fill only the fields you want to prefill. You can even leave the required fields empty.
|
||||
</p>
|
||||
|
||||
<div class="rounded-lg p-5 bg-gray-100 dark:bg-gray-900 mt-4">
|
||||
<open-form v-if="form" :theme="theme" :loading="false" :show-hidden="true" :form="form" :fields="form.properties" @submit="generateUrl">
|
||||
<template #submit-btn="{submitForm}">
|
||||
<v-button class="mt-2 px-8 mx-1" @click.prevent="submitForm">
|
||||
Generate Pre-filled URL
|
||||
</v-button>
|
||||
</template>
|
||||
</open-form>
|
||||
</div>
|
||||
|
||||
<template v-if="prefillFormData">
|
||||
<h3 class="mt-6 text-xl font-semibold mb-4 pt-6">
|
||||
Your Prefill url
|
||||
</h3>
|
||||
<form-url-prefill :form="form" :form-data="prefillFormData" />
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormUrlPrefill from '../../../open/forms/components/FormUrlPrefill'
|
||||
import ProTag from '../../../common/ProTag'
|
||||
import OpenForm from '../../../open/forms/OpenForm'
|
||||
import { themes } from '~/config/form-themes'
|
||||
|
||||
export default {
|
||||
name: 'UrlFormPrefill',
|
||||
components: { FormUrlPrefill, ProTag, OpenForm },
|
||||
props: {
|
||||
form: { type: Object, required: true }
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
prefillFormData: null,
|
||||
theme: themes.default,
|
||||
showUrlFormPrefillModal: false,
|
||||
}),
|
||||
|
||||
computed: {},
|
||||
|
||||
methods: {
|
||||
generateUrl (formData, onFailure) {
|
||||
this.prefillFormData = formData
|
||||
this.$nextTick().then(() => {
|
||||
this.$refs.content.parentElement.parentElement.parentElement.scrollTop = (this.$refs.content.offsetHeight - this.$refs.content.parentElement.parentElement.parentElement.offsetHeight + 50)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user