village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed form creation

This commit is contained in:
Julien Nahum 2023-12-20 16:10:32 +01:00
parent b598a16406
commit af5656ce81
34 changed files with 363 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/forms/CodeInput.vue → client/components/forms/CodeInput.client.vue
View File

@ -36,8 +36,6 @@ import { inputProps, useFormInput } from './useFormInput.js'
import InputWrapper from './components/InputWrapper.vue'
export default {
name: 'CodeInput',
components: { InputWrapper, codemirror },
props: {
...inputProps

3
client/components/forms/DateInput.vue
View File

@ -46,7 +46,6 @@
<script>
import { inputProps, useFormInput } from './useFormInput.js'
import InputWrapper from './components/InputWrapper.vue'
import { fixedClasses } from '../../plugins/config/vue-tailwind/datePicker.js'
export default {
name: 'DateInput',
@ -68,7 +67,6 @@ export default {
},
data: () => ({
fixedClasses: fixedClasses,
fromDate: null,
toDate: null
}),
@ -142,7 +140,6 @@ export default {
}
}
this.fixedClasses.input = this.theme.default.input
this.setInputColor()
},

10
client/components/forms/components/VSelect.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="v-select relative">
<div class="v-select relative" ref="select">
<span class="inline-block w-full rounded-md">
<button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
class="cursor-pointer"
@ -31,7 +31,7 @@
</span>
</button>
</span>
<collapsible v-model="isOpen"
<collapsible v-model="isOpen" @click-away="onClickAway"
class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-xl z-10"
:class="dropdownClass"
>
@ -155,6 +155,12 @@ export default {
}
},
methods: {
onClickAway (event) {
// Check that event target isn't children of dropdown
if (this.$refs.select && !this.$refs.select.contains(event.target)) {
this.isOpen = false
}
},
isSelected (value) {
if (!this.modelValue) return false

1
client/components/global/Dropdown.vue
View File

@ -33,7 +33,6 @@ const open = (event) => {
}
const close = (event) => {
console.log('closing')
isOpen.value = false
}

11
client/components/global/Navbar.vue
View File

@ -144,15 +144,14 @@ export default {
},
setup () {
const authStore = useAuthStore()
const formsStore = useFormsStore()
const workspacesStore = useWorkspacesStore()
const {openCrisp} = useCrisp()
const authStore = useAuthStore()
return {
authStore,
formsStore,
workspacesStore,
openCrisp,
appStore: useAppStore(),
formsStore: useFormsStore(),
workspacesStore: useWorkspacesStore(),
config: useConfig(),
user: computed(() => authStore.user),
isIframe: useIsIframe(),
@ -189,7 +188,7 @@ export default {
return false
}
}
return !this.$root.navbarHidden
return !this.appStore.navbarHidden
},
userOnboarded () {
return this.user && this.user.workspaces_count > 0

3
client/components/global/WorkspaceDropdown.vue
View File

@ -79,7 +79,8 @@ export default {
methods: {
switchWorkspace (workspace) {
this.workspacesStore.setCurrentId(workspace.id)
this.$refs.dropdown.close()
this.formsStore.resetState()
this.formsStore.load(workspace.id)
const router = useRouter()
const route = useRoute()
if (route.name !== 'home') {

30
client/components/open/editors/EditorRightSidebar.vue
View File

@ -1,6 +1,6 @@
<template>
<transition @leave="(el,done) => motions.slide.leave(done)">
<div v-if="show" v-motion-slide-right="'slide'"
<transition @leave="(el,done) => sidebarMotion.leave(done)">
<div v-if="show" ref="sidebar"
class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-50"
>
<slot />
@ -8,21 +8,25 @@
</transition>
</template>
<script>
import { useMotions } from '@vueuse/motion'
<script setup>
import {slideRight, useMotion} from "@vueuse/motion"
import {watch} from "vue";
export default {
name: 'EditorRightSidebar',
props: {
const props = defineProps({
show: {
type: Boolean,
default: false
}
},
setup (props) {
return {
motions: useMotions()
}
}
})
const sidebar = ref(null)
const sidebarMotion = ref(null)
watch(() => props.show, (newVal) => {
if (newVal) {
nextTick(() => {
sidebarMotion.value = useMotion(sidebar.value, slideRight)
})
}
})
</script>

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

@ -77,17 +77,12 @@
/>
</div>
</div>
<div v-else class="flex justify-center items-center">
<div v-else class="flex justify-center items-center p-8">
<Loader class="w-6 h-6" />
</div>
</template>
<script>
import { computed } from 'vue'
import { useAuthStore } from '../../../../stores/auth'
import { useFormsStore } from '../../../../stores/forms'
import { useWorkingFormStore } from '../../../../stores/working_form'
import { useWorkspacesStore } from '../../../../stores/workspaces'
import FormEditorSidebar from './form-components/FormEditorSidebar.vue'
import FormErrorModal from './form-components/FormErrorModal.vue'
import FormInformation from './form-components/FormInformation.vue'
@ -100,8 +95,7 @@ import FormEditorPreview from './form-components/FormEditorPreview.vue'
import FormSecurityPrivacy from './form-components/FormSecurityPrivacy.vue'
import FormCustomSeo from './form-components/FormCustomSeo.vue'
import FormAccess from './form-components/FormAccess.vue'
import saveUpdateAlert from '../../../../mixins/forms/saveUpdateAlert.js'
import fieldsLogic from '../../../../mixins/forms/fieldsLogic.js'
import {validatePropertiesLogic} from "~/composables/forms/validatePropertiesLogic.js"
export default {
name: 'FormEditor',
@ -119,7 +113,6 @@ export default {
FormCustomSeo,
FormAccess
},
mixins: [saveUpdateAlert, fieldsLogic],
props: {
isEdit: {
required: false,
@ -144,15 +137,18 @@ export default {
},
setup () {
const authStore = useAuthStore()
const {user} = storeToRefs(useAuthStore())
const formsStore = useFormsStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
const {content: form} = storeToRefs(useWorkingFormStore())
const {getCurrent: workspace} = storeToRefs(useWorkspacesStore())
return {
appStore: useAppStore(),
crisp: useCrisp(),
amplitude: useAmplitude(),
workspace,
formsStore,
workingFormStore,
workspacesStore,
user: computed(() => authStore.user)
form,
user,
}
},
@ -166,21 +162,9 @@ export default {
},
computed: {
form: {
get () {
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.workingFormStore.set(value)
}
},
createdForm () {
return this.formsStore.getBySlug(this.createdFormSlug)
},
workspace () {
return this.workspacesStore.getCurrent()
},
steps () {
return [
{
@ -223,23 +207,29 @@ export default {
mounted () {
this.$emit('mounted')
this.$root.hideNavbar()
this.appStore.hideNavbar()
},
beforeUnmount () {
this.$root.hideNavbar(false)
this.appStore.showNavbar()
},
methods: {
displayFormModificationAlert (responseData) {
if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
this.alertWarning(responseData.message)
} else {
this.alertSuccess(responseData.message)
}
},
openCrisp () {
window.$crisp.push(['do', 'chat:show'])
window.$crisp.push(['do', 'chat:open'])
this.crisp.openChat()
},
showValidationErrors () {
this.showFormErrorModal = true
},
saveForm () {
this.form.properties = this.validateFieldsLogic(this.form.properties)
this.form.properties = validatePropertiesLogic(this.form.properties)
if (this.isGuest) {
this.saveFormGuest()
} else if (this.isEdit) {
@ -253,12 +243,11 @@ export default {
this.updateFormLoading = true
this.validationErrorResponse = null
this.form.put('/api/open/forms/{id}/'.replace('{id}', this.form.id)).then((response) => {
const data = response.data
this.form.put('/open/forms/{id}/'.replace('{id}', this.form.id)).then((data) => {
this.formsStore.addOrUpdate(data.form)
this.$emit('on-save')
this.$router.push({ name: 'forms.show', params: { slug: this.form.slug } })
this.$logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
this.amplitude.logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
this.displayFormModificationAlert(data)
}).catch((error) => {
if (error.response.status === 422) {
@ -275,27 +264,27 @@ export default {
this.validationErrorResponse = null
this.updateFormLoading = true
this.form.post('/api/open/forms').then((response) => {
this.formsStore.addOrUpdate(response.data.form)
this.form.post('/open/forms').then((response) => {
this.formsStore.save(response.form)
this.$emit('on-save')
this.createdFormSlug = response.data.form.slug
this.createdFormSlug = response.form.slug
this.$logEvent('form_created', { form_id: response.data.form.id, form_slug: response.data.form.slug })
this.$crisp.push(['set', 'session:event', [[['form_created', {
form_id: response.data.form.id,
form_slug: response.data.form.slug
}, 'blue']]]])
this.displayFormModificationAlert(response.data)
this.$router.push({
name: 'forms.show',
this.amplitude.logEvent('form_created', { form_id: response.form.id, form_slug: response.form.slug })
this.crisp.pushEvent('form_created',{
form_id: response.form.id,
form_slug: response.form.slug
})
this.displayFormModificationAlert(response)
useRouter().push({
name: 'forms-show',
params: {
slug: this.createdForm.slug,
new_form: response.data.users_first_form
new_form: response.users_first_form
}
})
}).catch((error) => {
if (error.response && error.response.status === 422) {
this.validationErrorResponse = error.response.data
this.validationErrorResponse = error.response
this.showValidationErrors()
}
}).finally(() => {

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

@ -166,8 +166,6 @@
</template>
<script>
import { computed } from 'vue'
import { useWorkingFormStore } from '../../../../stores/working_form'
import draggable from 'vuedraggable'
import ProTag from '~/components/global/ProTag.vue'
import clonedeep from 'clone-deep'
@ -187,6 +185,7 @@ export default {
setup () {
const workingFormStore = useWorkingFormStore()
return {
route: useRoute(),
workingFormStore
}
},
@ -279,7 +278,7 @@ export default {
]
},
init () {
if (this.$route.name === 'forms-create' || this.$route.name === 'forms-create-guest') { // 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) => {

13
client/components/open/forms/components/form-components/AddFormBlock.vue
View File

@ -73,7 +73,9 @@ export default {
setup () {
const workingFormStore = useWorkingFormStore()
const {content: form} = storeToRefs(workingFormStore)
return {
form,
workingFormStore,
selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex)
}
@ -171,16 +173,6 @@ export default {
},
computed: {
form: {
get () {
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.workingFormStore.set(value)
}
},
defaultBlockNames () {
return {
text: 'Your name',
@ -230,6 +222,7 @@ export default {
}
newBlock.help_position = 'below_input'
if (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) {
console.log('------',this.form)
const newFields = clonedeep(this.form.properties)
newFields.push(newBlock)
this.form.properties = newFields

2
client/components/open/forms/components/form-components/FormAboutSubmission.vue
View File

@ -139,7 +139,9 @@ export default {
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
const {content: form} = storeToRefs(workingFormStore)
return {
form,
workingFormStore
}
},

13
client/components/open/forms/components/form-components/FormCustomCode.vue
View File

@ -2,7 +2,9 @@
<editor-options-panel name="Custom Code" :already-opened="false" :has-pro-tag="true">
<template #icon>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path
d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<p class="mt-4">
@ -17,22 +19,21 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import CodeInput from '../../../../forms/CodeInput.vue'
export default {
components: { EditorOptionsPanel, CodeInput },
components: {EditorOptionsPanel},
props: {},
setup() {
const workingFormStore = useWorkingFormStore()
const {content: form} = storeToRefs(workingFormStore)
return {
form,
workingFormStore
}
},
data() {
return {
}
return {}
},
computed: {

7
client/components/open/forms/components/form-components/FormInformation.vue
View File

@ -68,8 +68,6 @@
<script>
import { computed } from 'vue'
import clonedeep from 'clone-deep'
import { useFormsStore } from '../../../../../stores/forms'
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import SelectInput from '../../../../forms/SelectInput.vue'
@ -80,10 +78,11 @@ export default {
setup () {
const formsStore = useFormsStore()
const workingFormStore = useWorkingFormStore()
const {getAll: forms} = storeToRefs(formsStore)
return {
forms,
formsStore,
workingFormStore,
forms : computed(() => formsStore.content)
}
},
@ -129,7 +128,7 @@ export default {
}
},
allTagsOptions () {
return this.formsStore.getAllTags.map((tagname) => {
return this.formsStore.allTags.map((tagname) => {
return {
name: tagname,
value: tagname

15
client/components/open/forms/components/form-components/FormNotifications.vue
View File

@ -44,8 +44,10 @@ export default {
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
const {content: form} = storeToRefs(workingFormStore)
return {
workingFormStore
workingFormStore,
form
}
},
data () {
@ -54,16 +56,7 @@ export default {
},
computed: {
form: {
get () {
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.workingFormStore.set(value)
}
},
zapierUrl: () => this.$config.links.zapier_integration
zapierUrl: () => useConfig().links.zapier_integration
},
watch: {

15
client/components/open/forms/components/form-components/components/FormNotificationsOption.vue
View File

@ -50,15 +50,15 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../../stores/working_form'
import ProTag from '~/components/global/ProTag.vue'
export default {
components: { ProTag },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
const {content: form} = storeToRefs(workingFormStore)
return {
form,
workingFormStore
}
},
@ -69,17 +69,8 @@ export default {
},
computed: {
form: {
get () {
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.workingFormStore.set(value)
}
},
replayToEmailField () {
const emailFields = this.form.properties.filter((field) => {
const emailFields = this.form.value.properties.filter((field) => {
return field.type === 'email' && !field.hidden
})
if (emailFields.length === 1) return emailFields[0]

4
client/components/open/forms/fields/components/BlockOptions.vue
View File

@ -91,11 +91,9 @@
</template>
<script>
import CodeInput from '../../../../forms/CodeInput.vue'
export default {
name: 'BlockOptions',
components: { CodeInput },
components: { },
props: {
field: {
type: Object,

4
client/components/open/forms/fields/components/FieldOptions.vue
View File

@ -387,8 +387,8 @@
</template>
<script>
import timezones from '../../../../../../data/timezones.json'
import countryCodes from '../../../../../../data/country_codes.json'
import timezones from '~/data/timezones.json'
import countryCodes from '~/data/country_codes.json'
import CountryFlag from 'vue-country-flag-next'
export default {

8
client/components/pages/forms/create/CreateFormBaseModal.vue
View File

@ -91,20 +91,16 @@
</template>
<script>
import Loader from '~/components/global/Loader.vue'
import Form from 'vform'
import axios from 'axios'
export default {
name: 'CreateFormBaseModal',
components: { Loader },
props: {
show: { type: Boolean, required: true }
},
data: () => ({
state: 'default',
aiForm: new Form({
aiForm: useForm({
form_prompt: ''
}),
loading: false
@ -112,7 +108,7 @@ export default {
computed: {
aiFeaturesEnabled () {
return this.$config.ai_features_enabled
return useConfig().ai_features_enabled
}
},

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

@ -41,8 +41,8 @@
</svg>
View form
</a>
<router-link v-if="isMainPage" v-track.edit_form_click="{form_id:form.id, form_slug:form.slug}"
:to="{name:'forms-edit', params: {slug: form.slug}}"
<nuxt-link v-if="isMainPage" v-track.edit_form_click="{form_id:form.id, form_slug:form.slug}"
:to="{name:'forms-slug-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"
>
<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">
@ -52,7 +52,7 @@
/>
</svg>
Edit
</router-link>
</nuxt-link>
<a v-if="isMainPage" 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"
@click.prevent="copyLink"

54
client/composables/forms/initForm.js vendored Normal file
View File

@ -0,0 +1,54 @@
export const initForm = (options = {}) => {
return useForm({
title: 'My Form',
description: null,
visibility: 'public',
workspace_id: null,
properties: [],
notifies: false,
slack_notifies: false,
send_submission_confirmation: false,
webhook_url: null,
notification_settings: {},
// Customization
theme: 'default',
width: 'centered',
dark_mode: 'auto',
color: '#3B82F6',
hide_title: false,
no_branding: false,
uppercase_labels: true,
transparent_background: false,
closes_at: null,
closed_text: 'This form has now been closed by its owner and does not accept submissions anymore.',
auto_save: true,
// Submission
submit_button_text: 'Submit',
re_fillable: false,
re_fill_button_text: 'Fill Again',
submitted_text: 'Amazing, we saved your answers. Thank you for your time and have a great day!',
notification_sender: 'OpnForm',
notification_subject: 'We saved your answers',
notification_body: 'Hello there 👋 <br>This is a confirmation that your submission was successfully saved.',
notifications_include_submission: true,
use_captcha: false,
is_rating: false,
rating_max_value: 5,
max_submissions_count: null,
max_submissions_reached_text: 'This form has now reached the maximum number of allowed submissions and is now closed.',
editable_submissions_button_text: 'Edit submission',
confetti_on_submission: false,
// Security & Privacy
can_be_indexed: true,
// Custom SEO
seo_meta: {},
...options
})
}

14
client/composables/forms/validatePropertiesLogic.js vendored Normal file
View File

@ -0,0 +1,14 @@
import FormPropertyLogicRule from "~/lib/forms/FormPropertyLogicRule.js";
export const validatePropertiesLogic = (properties) => {
properties.forEach((field) => {
const isValid = (new FormPropertyLogicRule(field)).isValid()
if (!isValid) {
field.logic = {
conditions: null,
actions: []
}
}
})
return properties
}

8
client/composables/useCrisp.js vendored
View File

@ -4,6 +4,7 @@ export const useCrisp = () => {
function openChat() {
if (!crisp) return
showChat()
crisp.chat.open()
}
@ -34,6 +35,7 @@ export const useCrisp = () => {
openChat()
crisp.chat.setHelpdeskView()
}
function openHelpdeskArticle(articleSlug, locale = 'en') {
if (!crisp) return
crisp.chat.openHelpdeskArticle(locale, articleSlug);
@ -60,6 +62,11 @@ export const useCrisp = () => {
}
}
function pushEvent(event, data = {}) {
if (!crisp) return
crisp.pushEvent(event, data)
}
function setSegments(segments, overwrite = false) {
if (!crisp) return
crisp.session.setSegments(segments, overwrite)
@ -75,6 +82,7 @@ export const useCrisp = () => {
openHelpdesk,
openHelpdeskArticle,
sendTextMessage,
pushEvent,
setUser
}
}

8
client/pages/forms/edit.vue → client/pages/forms/[slug]/edit.vue
View File

@ -16,11 +16,11 @@
<script>
import { computed } from 'vue'
import Form from 'vform'
import { useFormsStore } from '../../stores/forms'
import { useWorkingFormStore } from '../../stores/working_form'
import { useWorkspacesStore } from '../../stores/workspaces'
import { useFormsStore } from '../../../stores/forms.js'
import { useWorkingFormStore } from '../../../stores/working_form.js'
import { useWorkspacesStore } from '../../../stores/workspaces.js'
import Breadcrumb from '~/components/global/Breadcrumb.vue'
import SeoMeta from '../../mixins/seo-meta.js'
import SeoMeta from '../../../mixins/seo-meta.js'
const loadForms = function () {
const formsStore = useFormsStore()

16
client/pages/forms/show/index.vue → client/pages/forms/[slug]/show/index.vue
View File

@ -133,15 +133,15 @@
<script>
import { computed } from 'vue'
import Form from 'vform'
import { useAuthStore } from '../../../stores/auth'
import { useFormsStore } from '../../../stores/forms'
import { useWorkingFormStore } from '../../../stores/working_form'
import { useWorkspacesStore } from '../../../stores/workspaces'
import { useAuthStore } from '../../../../stores/auth.js'
import { useFormsStore } from '../../../../stores/forms.js'
import { useWorkingFormStore } from '../../../../stores/working_form.js'
import { useWorkspacesStore } from '../../../../stores/workspaces.js'
import ProTag from '~/components/global/ProTag.vue'
import VButton from '~/components/global/VButton.vue'
import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu.vue'
import SeoMeta from '../../../mixins/seo-meta.js'
import FormCleanings from '../../../components/pages/forms/show/FormCleanings.vue'
import ExtraMenu from '../../../../components/pages/forms/show/ExtraMenu.vue'
import SeoMeta from '../../../../mixins/seo-meta.js'
import FormCleanings from '../../../../components/pages/forms/show/FormCleanings.vue'
const loadForms = function () {
const formsStore = useFormsStore()
@ -263,7 +263,7 @@ export default {
this.$router.push({ name: 'home' })
},
openEdit () {
this.$router.push({ name: 'forms-edit', params: { slug: this.form.slug } })
this.$router.push({ name: 'forms-slug-edit', params: { slug: this.form.slug } })
}
}
}

16
client/pages/forms/show/share.vue → client/pages/forms/[slug]/show/share.vue
View File

@ -19,14 +19,14 @@
</template>
<script>
import ShareLink from '../../../components/pages/forms/show/ShareLink.vue'
import EmbedCode from '../../../components/pages/forms/show/EmbedCode.vue'
import FormQrCode from '../../../components/pages/forms/show/FormQrCode.vue'
import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill.vue'
import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue'
import SeoMeta from '../../../mixins/seo-meta.js'
import AdvancedFormUrlSettings from '../../../components/open/forms/components/AdvancedFormUrlSettings.vue'
import EmbedFormAsPopupModal from '../../../components/pages/forms/show/EmbedFormAsPopupModal.vue'
import ShareLink from '../../../../components/pages/forms/show/ShareLink.vue'
import EmbedCode from '../../../../components/pages/forms/show/EmbedCode.vue'
import FormQrCode from '../../../../components/pages/forms/show/FormQrCode.vue'
import UrlFormPrefill from '../../../../components/pages/forms/show/UrlFormPrefill.vue'
import RegenerateFormLink from '../../../../components/pages/forms/show/RegenerateFormLink.vue'
import SeoMeta from '../../../../mixins/seo-meta.js'
import AdvancedFormUrlSettings from '../../../../components/open/forms/components/AdvancedFormUrlSettings.vue'
import EmbedFormAsPopupModal from '../../../../components/pages/forms/show/EmbedFormAsPopupModal.vue'
export default {
components: {

4
client/pages/forms/show/stats.vue → client/pages/forms/[slug]/show/stats.vue
View File

@ -8,8 +8,8 @@
</template>
<script>
import FormStats from '../../../components/open/forms/components/FormStats.vue'
import SeoMeta from '../../../mixins/seo-meta.js'
import FormStats from '../../../../components/open/forms/components/FormStats.vue'
import SeoMeta from '../../../../mixins/seo-meta.js'
export default {
name: 'Stats',

4
client/pages/forms/show/submissions.vue → client/pages/forms/[slug]/show/submissions.vue
View File

@ -5,8 +5,8 @@
</template>
<script>
import FormSubmissions from '../../../components/open/forms/components/FormSubmissions.vue'
import SeoMeta from '../../../mixins/seo-meta.js'
import FormSubmissions from '../../../../components/open/forms/components/FormSubmissions.vue'
import SeoMeta from '../../../../mixins/seo-meta.js'
export default {
components: {FormSubmissions},

164
client/pages/forms/create.vue
View File

@ -1,164 +0,0 @@
<template>
<div class="flex flex-wrap flex-col">
<transition v-if="stateReady" name="fade" mode="out-in">
<div key="2">
<create-form-base-modal :show="showInitialFormModal" @form-generated="formGenerated"
@close="showInitialFormModal=false"
/>
<form-editor v-if="!workspacesLoading" ref="editor"
class="w-full flex flex-grow"
:error="error"
@on-save="formInitialHash=null"
/>
<div v-else class="text-center mt-4 py-6">
<Loader class="h-6 w-6 text-nt-blue mx-auto" />
</div>
</div>
</transition>
</div>
</template>
<script>
import Form from 'vform'
import { computed } from 'vue'
import { useAuthStore } from '../../stores/auth'
import { useTemplatesStore } from '../../stores/templates'
import { useWorkingFormStore } from '../../stores/working_form'
import { useWorkspacesStore } from '../../stores/workspaces'
import initForm from '../../mixins/form_editor/initForm.js'
import SeoMeta from '../../mixins/seo-meta.js'
import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'
const loadTemplates = function () {
const templatesStore = useTemplatesStore()
templatesStore.startLoading()
templatesStore.loadIfEmpty().then(() => {
templatesStore.stopLoading()
})
}
export default {
name: 'CreateForm',
components: { CreateFormBaseModal },
mixins: [initForm, SeoMeta],
middleware: 'auth',
beforeRouteEnter (to, from, next) {
loadTemplates()
next()
},
beforeRouteLeave (to, from, next) {
if (this.isDirty()) {
return this.alertConfirm('Changes you made may not be saved. Are you sure want to leave?', () => {
window.onbeforeunload = null
next()
}, () => {})
}
next()
},
setup () {
const authStore = useAuthStore()
const templatesStore = useTemplatesStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
return {
templatesStore,
workingFormStore,
workspacesStore,
user: computed(() => authStore.user),
workspaces : computed(() => workspacesStore.content),
workspacesLoading : computed(() => workspacesStore.loading)
}
},
data () {
return {
metaTitle: 'Create a new Form',
stateReady: false,
loading: false,
error: '',
showInitialFormModal: false,
formInitialHash: null
}
},
computed: {
form: {
get () {
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.workingFormStore.set(value)
}
},
workspace () {
return this.workspacesStore.getCurrent()
}
},
watch: {
workspace () {
if (this.workspace) {
this.form.workspace_id = this.workspace.id
}
},
user () {
this.stateReady = true
}
},
mounted () {
window.onbeforeunload = () => {
if (this.isDirty()) {
return false
}
}
this.initForm()
this.formInitialHash = this.hashString(JSON.stringify(this.form.data()))
if (this.$route.query.template !== undefined && this.$route.query.template) {
const template = this.templatesStore.getByKey(this.$route.query.template)
if (template && template.structure) {
this.form = new Form({ ...this.form.data(), ...template.structure })
}
} else {
// No template loaded, ask how to start
this.showInitialFormModal = true
}
this.closeAlert()
this.workspacesStore.loadIfEmpty()
this.stateReady = this.user !== null
},
created () {},
unmounted () {},
methods: {
formGenerated (form) {
this.form = new Form({ ...this.form.data(), ...form })
},
isDirty () {
return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.form.data()))
},
hashString (str, seed = 0) {
let h1 = 0xdeadbeef ^ seed
let h2 = 0x41c6ce57 ^ seed
for (let i = 0, ch; i < str.length; i++) {
ch = str.charCodeAt(i)
h1 = Math.imul(h1 ^ ch, 2654435761)
h2 = Math.imul(h2 ^ ch, 1597334677)
}
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909)
h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909)
return 4294967296 * (2097151 & h2) + (h1 >>> 0)
}
}
}
</script>

117
client/pages/forms/create/index.vue Normal file
View File

@ -0,0 +1,117 @@
<template>
<div class="flex flex-wrap flex-col">
<transition name="fade" mode="out-in">
<div key="2">
<create-form-base-modal :show="showInitialFormModal" @form-generated="formGenerated"
@close="showInitialFormModal=false"
/>
<form-editor v-if="form && !workspacesLoading" ref="editor"
class="w-full flex flex-grow"
:error="error"
@on-save="formInitialHash=null"
/>
<div v-else class="text-center mt-4 py-6">
<Loader class="h-6 w-6 text-nt-blue mx-auto"/>
</div>
</div>
</transition>
</div>
</template>
<script setup>
import {watch} from 'vue'
import {initForm} from "~/composables/forms/initForm.js"
import FormEditor from "~/components/open/forms/components/FormEditor.vue"
import CreateFormBaseModal from '../../../components/pages/forms/create/CreateFormBaseModal.vue'
// metaTitle: 'Create a new Form',
// beforeRouteLeave (to, from, next) {
// if (this.isDirty()) {
// return this.alertConfirm('Changes you made may not be saved. Are you sure want to leave?', () => {
// window.onbeforeunload = null
// next()
// }, () => {})
// }
// next()
// },
const route = useRoute()
const authStore = useAuthStore()
const templatesStore = useTemplatesStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
const formStore = useFormsStore()
const {
getCurrent: workspace,
getAll: workspaces,
workspacesLoading: workspacesLoading
} = storeToRefs(workspacesStore)
const {content: form} = storeToRefs(workingFormStore)
// State
const loading = ref(false)
const error = ref('')
const showInitialFormModal = ref(false)
const formInitialHash = ref(null)
watch(() => workspace, () => {
if (workspace) {
form.workspace_id = workspace.value.id
}
})
onMounted(() => {
if (process.client) {
// window.onbeforeunload = () => {
if (isDirty()) {
return false
}
}
if (!formStore.allLoaded) {
formStore.load(workspace.value.id)
}
form.value = initForm({workspace_id: workspace.value?.id})
formInitialHash.value = hashString(JSON.stringify(form.value.data()))
// if (this.$route.query.template !== undefined && this.$route.query.template) {
// const template = this.templatesStore.getByKey(this.$route.query.template)
// if (template && template.structure) {
// this.form = new Form({...this.form.data(), ...template.structure})
// }
// } else {
// // No template loaded, ask how to start
// this.showInitialFormModal = true
// }
// this.closeAlert()
// this.workspacesStore.loadIfEmpty()
})
// Methods
const formGenerated = (newForm) => {
form.value = useForm({...form.value.data(), ...newForm})
}
const isDirty = () => {
return !loading.value && formInitialHash.value && formInitialHash.value !== hashString(JSON.stringify(form.value.data()))
}
const hashString = (str, seed = 0) => {
let h1 = 0xdeadbeef ^ seed
let h2 = 0x41c6ce57 ^ seed
for (let i = 0, ch; i < str.length; i++) {
ch = str.charCodeAt(i)
h1 = Math.imul(h1 ^ ch, 2654435761)
h2 = Math.imul(h2 ^ ch, 1597334677)
}
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909)
h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909)
return 4294967296 * (2097151 & h2) + (h1 >>> 0)
}
</script>

16
client/pages/home.vue
View File

@ -133,14 +133,18 @@ definePageMeta({
const authStore = useAuthStore()
const formsStore = useFormsStore()
formsStore.startLoading()
const workspacesStore = useWorkspacesStore()
onMounted(() => {
if (!formsStore.allLoaded) {
console.log('starting to load')
formsStore.load(workspacesStore.currentId)
}
})
// State
const {getAll: forms, loading: formsLoading} = storeToRefs(formsStore)
const {getAll: forms, loading: formsLoading, allTags} = storeToRefs(formsStore)
const showEditFormModal = ref(false)
const selectedForm = ref(null)
const search = ref('')
@ -167,15 +171,7 @@ const viewForm = (form) => {
const isFilteringForms = computed(() => {
return (search.value !== '' && search.value !== null) || selectedTags.value.size > 0
})
const allTags = computed(() => {
let tags = []
forms.value.forEach((form) => {
if (form.tags && form.tags.length) {
tags = tags.concat(form.tags.split(','))
}
})
return [...new Set(tags)]
})
const enrichedForms = computed(() => {
let enrichedForms = forms.value.map((form) => {
form.workspace = workspacesStore.getByKey(form.workspace_id)

7
client/stores/app.js vendored
View File

@ -5,6 +5,7 @@ import { nextTick } from 'vue'
export const useAppStore = defineStore('app', {
state: () => ({
layout: 'default',
navbarHidden: false,
// App Loader
loader: {
@ -17,6 +18,12 @@ export const useAppStore = defineStore('app', {
}
}),
actions: {
hideNavbar () {
this.navbarHidden = true
},
showNavbar () {
this.navbarHidden = false
},
setLayout (layout) {
this.layout = layout ?? 'default'
},

15
client/stores/forms.js vendored
View File

@ -6,7 +6,7 @@ export const formsEndpoint = '/open/workspaces/{workspaceId}/forms'
export const useFormsStore = defineStore('forms', () => {
const contentStore = useContentStore('slug')
contentStore.startLoading()
const allLoaded = ref(false)
const currentPage = ref(1)
const load = (workspaceId) => {
@ -23,14 +23,27 @@ export const useFormsStore = defineStore('forms', () => {
currentPage.value++
load(workspaceId)
} else {
allLoaded.value = true
contentStore.stopLoading()
currentPage.value = 1
}
})
}
const allTags = computed(() => {
let tags = []
contentStore.getAll.value.forEach((form) => {
if (form.tags && form.tags.length) {
tags = tags.concat(form.tags.split(','))
}
})
return [...new Set(tags)]
})
return {
...contentStore,
allLoaded,
allTags,
load
}
})

1
resources/js/components/open/forms/fields/components/FieldOptions.vue
View File

@ -387,6 +387,7 @@
</template>
<script>
import timezones
import timezones from '../../../../../../data/timezones.json'
import countryCodes from '../../../../../../data/country_codes.json'
import CountryFlag from 'vue-country-flag-next'

8
resources/js/components/pages/forms/create/CreateFormBaseModal.vue
View File

@ -91,20 +91,16 @@
</template>
<script>
import Loader from '../../../common/Loader.vue'
import Form from 'vform'
import axios from 'axios'
export default {
name: 'CreateFormBaseModal',
components: { Loader },
components: { },
props: {
show: { type: Boolean, required: true }
},
data: () => ({
state: 'default',
aiForm: new Form({
aiForm: useForm({
form_prompt: ''
}),
loading: false