This commit is contained in:
Julien Nahum
2022-11-25 10:01:45 +01:00
37 changed files with 2195 additions and 1483 deletions

View File

@@ -15,15 +15,17 @@
<workspace-dropdown class="ml-6"/>
</div>
<div class="hidden md:block ml-auto relative">
<router-link :to="{name:'integrations'}"
<router-link :to="{name:'templates'}"
class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8">
Integrations
Templates
</router-link>
<a href="#" class="hidden lg:inline text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8">
Feature Requests
</a>
<a href="#" class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1"
@click.prevent="$getCrisp().push(['do', 'helpdesk:search'])"
@click.prevent="$getCrisp().push(['do', 'helpdesk:search'])" v-if="hasCrisp"
>
Help
</a>
<a href="https://help.opnform.com/en/" class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1"
target="_blank" v-else
>
Help
</a>
@@ -97,7 +99,7 @@
{{ $t('login') }}
</router-link>
<v-button size="small" :to="{ name: 'register' }" color="outline-blue" v-track.nav_create_form_click :arrow="true">
<v-button size="small" :to="{ name: 'forms.create.guest' }" color="outline-blue" v-track.nav_create_form_click :arrow="true">
Create a form
</v-button>
@@ -178,6 +180,9 @@ export default {
}),
userOnboarded() {
return this.user && this.user.workspaces_count > 0
},
hasCrisp() {
return window.config.crisp_website_id
}
},

View File

@@ -31,7 +31,7 @@ export default {
},
props: {
dropdownClass: { type: String, default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50' }
dropdownClass: { type: String, default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20' }
},
data () {
return {

View File

@@ -7,17 +7,17 @@
</div>
<modal :show="showPremiumModal" @close="showPremiumModal=false">
<h2 class="text-nt-blue">
OpenForm PRO
OpnForm PRO
</h2>
<h4 v-if="user.is_subscribed && !user.has_enterprise_subscription" class="text-center mt-5">
We're happy to have you as a Pro customer. If you're having any issue with OpenForm, or if you have a
We're happy to have you as a Pro customer. If you're having any issue with OpnForm, or if you have a
feature request, please <a href="mailto:contact@opnform.com">contact us</a>.
<br><br>
If you need to collaborate, or to work with multiple workspaces, or just larger file uploads, you can
also upgrade our subscription to get an Enterprise subscription.
</h4>
<h4 v-if="user.is_subscribed && user.has_enterprise_subscription" class="text-center mt-5">
We're happy to have you as an Enterprise customer. If you're having any issue with OpenForm, or if you have a
We're happy to have you as an Enterprise customer. If you're having any issue with OpnForm, or if you have a
feature request, please <a href="mailto:contact@opnform.com">contact us</a>.
</h4>
<p v-if="!user.is_subscribed" class="mt-4">
@@ -25,7 +25,7 @@
class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold mx-1"
>
PRO
</span> tag are available in the Pro plan of OpenForm. <b>You can play around and try all Pro features
</span> tag are available in the Pro plan of OpnForm. <b>You can play around and try all Pro features
within
the form editor, but you can't use them in your real forms</b>. You can subscribe now to gain unlimited access
to

View File

@@ -91,7 +91,7 @@
>
<template #submit-btn="{submitForm}">
<open-form-button :loading="loading" :theme="theme" :color="form.color" class="mt-2 px-8 mx-1"
@click="submitForm"
@click.prevent="submitForm"
>
{{ form.submit_button_text }}
</open-form-button>
@@ -191,6 +191,9 @@ export default {
workspace_id: this.form.workspace_id,
form_id: this.form.id
})
window.localStorage.removeItem(this.form.form_pending_submission_Key)
if (response.data.redirect && response.data.redirect_url) {
window.location.href = response.data.redirect_url
}

View File

@@ -217,7 +217,15 @@ export default {
handler () {
this.formVersionId++
}
}
},
dataForm: {
deep: true,
handler () {
if(this.isPublicFormPage && this.form && this.dataFormValue){
window.localStorage.setItem(this.form.form_pending_submission_Key, JSON.stringify(this.dataFormValue))
}
}
},
},
mounted () {
@@ -266,6 +274,14 @@ export default {
}
},
initForm () {
if (this.isPublicFormPage) {
const pendingData = window.localStorage.getItem(this.form.form_pending_submission_Key)
if(pendingData !== null && pendingData){
this.dataForm = new Form(JSON.parse(pendingData))
return
}
}
const formData = clonedeep(this.dataForm ? this.dataForm.data() : {})
let urlPrefill = null
if (this.isPublicFormPage && this.form.is_pro) {

View File

@@ -1,14 +1,13 @@
<template>
<div v-if="form" id="form-editor" class="w-full flex flex-grow relative overflow-x-hidden">
<!-- Form fields selection -->
<v-tour name="tutorial" :steps="steps"/>
<div class="w-full md:w-1/2 lg:w-2/5 border-r relative overflow-y-scroll md:max-w-sm flex-shrink-0">
<div class="p-4 bg-blue-50 border-b text-nt-blue-dark md:hidden">
We suggest you create this form on a device with a larger screen such as computed. That will allow you
to preview your form changes.
</div>
<div class="p-4 pb-0">
<a href="#" @click.prevent="$router.back()" class="flex text-blue mb-2 font-semibold text-sm">
<a v-if="!isGuest" href="#" @click.prevent="$router.back()" class="flex text-blue mb-2 font-semibold text-sm">
<svg class="w-3 h-3 text-blue mt-1 mr-1" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"/>
@@ -88,6 +87,11 @@ export default {
type: Boolean,
default: false
},
isGuest: {
required: false,
type: Boolean,
default: false
},
},
data() {
@@ -123,7 +127,7 @@ export default {
{
target: '#v-step-0',
header: {
title: 'Welcome to the OpenForm Editor!'
title: 'Welcome to the OpnForm Editor!'
},
content: 'Discover <strong>your form Editor</strong>!'
},
@@ -160,20 +164,16 @@ export default {
mounted() {
this.$emit('mounted')
this.startTour()
},
methods: {
startTour() {
if (!this.user.has_forms) {
this.$tours.tutorial.start()
}
},
showValidationErrors() {
this.showFormErrorModal = true
},
saveForm() {
if (this.isEdit) {
if(this.isGuest) {
this.saveFormGuest()
} else if (this.isEdit) {
this.saveFormEdit()
} else {
this.saveFormCreate()
@@ -230,6 +230,9 @@ export default {
}).finally(() => {
this.updateFormLoading = false
})
},
saveFormGuest() {
this.$emit('openRegister')
}
}
}

View File

@@ -266,7 +266,7 @@ export default {
];
},
init() {
if (this.$route.name === 'forms.create') { // Set Default fields
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()
} else {
this.formFields = clonedeep(this.form.properties).map((field) => {

View File

@@ -5,7 +5,7 @@
</div>
<dropdown v-else class="inline" dusk="nav-dropdown">
<template #trigger="{toggle}">
<v-button color="light-gray" class="mr-2" @click="toggle">
<v-button color="white" 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
@@ -34,6 +34,26 @@
</svg>
View form
</router-link>
<router-link v-if="isMainPage" :to="{name:'forms.edit', params: {slug: form.slug}}"
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.edit_form_click="{form_id:form.id, form_slug:form.slug}"
>
<svg class="w-4 h-4 mr-2" width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.99998 15.6662H16.5M1.5 15.6662H2.89545C3.3031 15.6662 3.50693 15.6662 3.69874 15.6202C3.8688 15.5793 4.03138 15.512 4.1805 15.4206C4.34869 15.3175 4.49282 15.1734 4.78107 14.8852L15.25 4.4162C15.9404 3.72585 15.9404 2.60656 15.25 1.9162C14.5597 1.22585 13.4404 1.22585 12.75 1.9162L2.28105 12.3852C1.9928 12.6734 1.84867 12.8175 1.7456 12.9857C1.65422 13.1348 1.58688 13.2974 1.54605 13.4675C1.5 13.6593 1.5 13.8631 1.5 14.2708V15.6662Z"
stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Edit
</router-link>
<a href="#" v-if="isMainPage"
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="copyLink"
>
<svg class="w-4 h-4 mr-2" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.00016 8.33317H4.66683C2.82588 8.33317 1.3335 6.84079 1.3335 4.99984C1.3335 3.15889 2.82588 1.6665 4.66683 1.6665H6.00016M10.0002 8.33317H11.3335C13.1744 8.33317 14.6668 6.84079 14.6668 4.99984C14.6668 3.15889 13.1744 1.6665 11.3335 1.6665H10.0002M4.66683 4.99984L11.3335 4.99984" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Copy link to share
</a>
<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}"
@@ -47,10 +67,21 @@
</svg>
Duplicate form
</a>
<a href="#" v-if="user.template_editor"
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>
<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)"
@click.prevent="showDeleteFormModal=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">
@@ -60,23 +91,36 @@
</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>
<!-- Delete Form Modal -->
<modal :show="showDeleteFormModal" icon-color="red" @close="showDeleteFormModal=false" max-width="sm">
<template #icon>
<svg class="w-10 h-10" 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>
</template>
<template #title>
Delete form
</template>
<div class="p-3">
<p>
If you want to permanently delete this form and all of its data, you can do so below.
</p>
<div class="flex mt-4">
<v-button class="sm:w-1/2 mr-4" color="white" @click.prevent="showDeleteFormModal=false">Cancel</v-button>
<v-button class="sm:w-1/2" color="red" :loading="loadingDelete" @click.prevent="deleteForm">Yes, delete it</v-button>
</div>
</div>
</modal>
<create-template-modal :form="form" :show="showCreateTemplateModal" @close="showCreateTemplateModal=false"/>
</div>
</template>
<script>
import axios from 'axios'
import {mapGetters, mapState} from 'vuex'
@@ -87,12 +131,14 @@ export default {
name: 'ExtraMenu',
components: { Dropdown, CreateTemplateModal },
props: {
form: { type: Object, required: true }
form: { type: Object, required: true },
isMainPage: { type: Boolean, required: false, default: false }
},
data: () => ({
loadingDuplicate: false,
loadingDelete: false,
showDeleteFormModal: false,
showCreateTemplateModal: false
}),
@@ -104,6 +150,14 @@ export default {
},
methods: {
copyLink(){
const el = document.createElement('textarea')
el.value = this.form.share_url
document.body.appendChild(el)
el.select()
document.execCommand('copy')
document.body.removeChild(el)
},
duplicateForm() {
if (this.loadingDuplicate) return
this.loadingDuplicate = true
@@ -127,4 +181,3 @@ export default {
}
}
</script>