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

Initial commit

Browse Source
This commit is contained in:
Julien Nahum
2022-09-20 21:59:52 +02:00
commit f8e6cd4dd6
479 changed files with 77078 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
resources/js/components/pages/forms/NewFeatures.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<div id="new-features"
class="w-full bg-gray-50 dark:bg-gray-800 border rounded-lg mt-4"
>
<div class="border-b">
<div v-track.new_in_notionforms_click
class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4" role="button"
@click.prevent="showNewFeatures=!showNewFeatures"
>
<div class="text-gray-700 dark:text-gray-300 pr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
/>
</svg>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">
New in OpnForm
</p>
<p class="text-sm text-gray-700 dark:text-gray-300">
Click here to see our new features
</p>
</div>
</div>
<v-transition>
<ul v-if="showNewFeatures" class="list-disc list-inside border-t pt-2 p-4">
<li v-for="changelog in changelogEntries" :key="changelog.id" v-track.new_feature_click class="text-sm">
<a :href="changelog.url" target="_blank" class="text-gray-700 dark:text-gray-300">{{ changelog.title }}</a>
</li>
<li v-track.new_feature_read_more_click class="text-sm">
<a class="text-gray-700 dark:text-gray-300" :href="changelogLink" target="_blank">Read more</a>
</li>
</ul>
</v-transition>
</div>
<div class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4">
<a v-track.feature_request_click="{user_has_forms:user.has_forms}" :href="requestFeatureLink"
class="absolute inset-0" target="_blank"
/>
<div class="text-gray-700 dark:text-gray-300 pr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
/>
</svg>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">
An idea for a new feature?
</p>
<p class="text-sm text-gray-700 dark:text-gray-300">
Click here to request a new feature
</p>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import VTransition from '../../common/transitions/VTransition'
export default {
components: { VTransition },
props: {},
data: () => ({
changelogEntries: [],
showNewFeatures: false
}),
mounted () {
this.loadChangelogEntries()
},
computed: {
...mapGetters({
user: 'auth/user'
}),
requestFeatureLink () {
return window.config.links.feature_requests
},
changelogLink () {
return window.config.links.changelog_url
}
},
methods: {
loadChangelogEntries () {
axios.get('/api/content/changelog/entries').then(response => {
this.changelogEntries = response.data.splice(0, 3)
})
}
}
}
</script>

78
resources/js/components/pages/forms/UrlFormPrefillModal.vue Normal file
View File

@@ -0,0 +1,78 @@
<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>