Migrate front-end to Nuxt app (#284)
* wip * Managed to load a page * Stuck at changing routes * Fixed the router, and editable div * WIP * Fix app loader * WIP * Fix check-auth middleware * Started to refactor input components * WIP * Added select input, v-click-outside for vselect * update vselect & phone input * Fixed the mixin * input component updates * Fix signature input import * input component updates in vue3 * image input in vue3 * small fixes * fix useFormInput watcher * scale input in vue3 * Vue3: migrating from vuex to Pinia (#249) * Vue3: migrating from vuex to Pinia * toggle input fixes * update configureCompat --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> * support vue3 query builder * Refactor inpus * fix: Vue3 Query Builder - Logic Editor (#251) * support vue3 query builder * upgrade * remove local from middleware * Submission table pagination & migrate chart to vue3 (#254) * Submission table Pagination in background * migrate chart to vue3 * Form submissions pagination * Form submissions * Fix form starts * Fix openSelect key issue --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> Co-authored-by: Julien Nahum <julien@nahum.net> * Vue 3 better animation (#257) * vue-3-better-animation * Working on migration to vueuse/motion * Form sidebar animations * Clean code * Added animations for modal * Finished implementing better animations --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> * Work in progress * Migrating amplitude and crisp plugin/composable * Started to refactor pages * WIP * vue3-scroll-shadow-fixes (#260) * WIP * WIP * WIP * Figured out auth & middlewares * WI * Refactoring stores and templates pages to comp. api * Finishing the templates pages * fix collapsible * Finish reworking most templates pages * Reworked workspaces store * Working on home page and modal * Fix dropdown * Fix modal * Fixed form creation * Fixed most of the form/show pages * Updated cors dependency * fix custom domain warning * NuxtLink migration (#262) Co-authored-by: Forms Dev <chirag+new@notionforms.io> * Tiny fixes + start pre-rendering * migrate-to-nuxt-useappconfig (#263) * migrate-to-nuxt-useappconfig * defineAppConfig --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> * Working on form/show and editor * Globally import form inputs to fix resolve * Remove vform - working on form public page * Remove initform mixin * Work in progress for form create guess user * Nuxt Migration notifications (#265) * Nuxt Migration notifications * @input to @update:model-value * change field type fixes * @update:model-value * Enable form-block-logic-editor * vue-confetti migration * PR request changes * useAlert in setup * Migrate to nuxt settings page AND remove axios (#266) * Settings pages migration * remove axios and use opnFetch * Make created form reactive (#267) * Remove verify pages and axios lib --------- Co-authored-by: Julien Nahum <julien@nahum.net> * Fix alert styling + bug fixes and cleaning * Refactor notifications + add shadow * Fix vselect issue * Working on page pre-rendering * Created NotionPages store * Added sitemap on nuxt side * Sitemap done, working on aws amplify * Adding missing module * Remove axios and commit backend changes to sitemap * Fix notifications * fix guestpage editor (#269) Co-authored-by: Julien Nahum <julien@nahum.net> * Remove appconfig in favor of runtimeconfig * Fixed amplitude bugs, and added staging environment * Added amplify file * Change basdirectory amplify * Fix loading bar position * Fix custom redirect (#273) * Dirty form handling - nuxt migration (#272) * SEO meta nuxt migration (#274) * SEO meta nuxt migration * Polish seo metas, add defaults for OG and twitter --------- Co-authored-by: Julien Nahum <julien@nahum.net> * migrate to nuxt useClipboard (#268) * Set middleware on pages (#278) * Se middleware on pages * Se middleware on account page * add robots.txt (#276) * 404 page migration (#277) * Templates pages migration (#275) * NuxtImg Migration (#279) Co-authored-by: Julien Nahum <julien@nahum.net> * Update package json * Fix build script * Add loglevel param * Disable page pre-rendering * Attempt to allow svgs * Fix SVGs with NuxtImage * Add .env file at AWS build time * tRGIGGER deploy * Fix issue * ANother attrempt * Fix typo * Fix env? * Attempt to simplify build * Enable swr caching instead of prerenderign * Better image compression * Last attempt at nuxt images efficiency * Improve image optimization again * Remove NuxtImg for non asset files * Restore templates pages cache * Remove useless images + fix templates show page * image optimization caching + fix hydratation issue form template page * URL generation (front&back) + fixed authJWT for SSR * Fix composable issue * Fix form share page * Embeddable form as a nuxt middleware * Fix URL for embeddable middleware * Debugging embeddable on amplify * Add custom domain support * No follow for non-production env * Fix sentry nuxt and custom domain redirect * remove api prefix from routes (#280) * remove api prefix from routes * PR changes --------- Co-authored-by: Julien Nahum <julien@nahum.net> * nuxt migration -file upload - WIP (#271) Co-authored-by: Julien Nahum <julien@nahum.net> * Fix local file upload * Fix file submissions preview * API redirect to back-end from nuxt * API redirect to back-end from nuxt * Remove old JS app, update deploy script * Fix tests, added gh action nuxt step * Updated package-lock.json * Setup node in GH Nuxt action * Setup client directory for GH workflow --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> Co-authored-by: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com> Co-authored-by: Rishi Raj Jain <rishi18304@iiitd.ac.in> Co-authored-by: formsdev <136701234+formsdev@users.noreply.github.com>
This commit is contained in:
Julien Nahum
GitHub
105
client/pages/forms/create/guest.vue
Normal file
105
client/pages/forms/create/guest.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<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"
|
||||
:is-guest="isGuest"
|
||||
@openRegister="registerModal=true"
|
||||
/>
|
||||
<div v-else class="text-center mt-4 py-6">
|
||||
<Loader class="h-6 w-6 text-nt-blue mx-auto"/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<quick-register :show-register-modal="registerModal" @close="registerModal=false" @reopen="registerModal=true"
|
||||
@afterLogin="afterLogin"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormEditor from "~/components/open/forms/components/FormEditor.vue"
|
||||
import QuickRegister from '~/components/pages/auth/components/QuickRegister.vue'
|
||||
import CreateFormBaseModal from '../../../components/pages/forms/create/CreateFormBaseModal.vue'
|
||||
import {initForm} from "~/composables/forms/initForm.js"
|
||||
import {fetchTemplate} from "~/stores/templates.js"
|
||||
import {fetchAllWorkspaces} from "~/stores/workspaces.js";
|
||||
|
||||
|
||||
const templatesStore = useTemplatesStore()
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
const workspacesStore = useWorkspacesStore()
|
||||
const route = useRoute()
|
||||
|
||||
// Fetch the template
|
||||
if (route.query.template !== undefined && route.query.template) {
|
||||
const {data} = await fetchTemplate(route.query.template)
|
||||
templatesStore.save(data.value)
|
||||
}
|
||||
|
||||
// Store values
|
||||
const workspace = computed(() => workspacesStore.getCurrent)
|
||||
const workspacesLoading = computed(() => workspacesStore.loading)
|
||||
const form = storeToRefs(workingFormStore).content
|
||||
|
||||
useOpnSeoMeta({
|
||||
title: 'Create a new Form for free',
|
||||
})
|
||||
definePageMeta({
|
||||
middleware: "guest"
|
||||
})
|
||||
|
||||
// Data
|
||||
const stateReady = ref(false)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const registerModal = ref(false)
|
||||
const isGuest = ref(true)
|
||||
const showInitialFormModal = ref(false)
|
||||
|
||||
// Component ref
|
||||
const editor = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
// Set as guest user
|
||||
workspacesStore.set([{
|
||||
id: null,
|
||||
name: 'Guest Workspace',
|
||||
is_enterprise: false,
|
||||
is_pro: false
|
||||
}])
|
||||
|
||||
form.value = initForm()
|
||||
if (route.query.template !== undefined && route.query.template) {
|
||||
const template = templatesStore.getByKey(route.query.template)
|
||||
if (template && template.structure) {
|
||||
form.value = useForm({...form.value.data(), ...template.structure})
|
||||
}
|
||||
} else {
|
||||
// No template loaded, ask how to start
|
||||
showInitialFormModal.value = true
|
||||
}
|
||||
stateReady.value = true
|
||||
})
|
||||
|
||||
const afterLogin = () => {
|
||||
registerModal.value = false
|
||||
isGuest.value = false
|
||||
fetchAllWorkspaces()
|
||||
setTimeout(() => {
|
||||
if (editor) {
|
||||
editor.value.saveFormCreate()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const formGenerated = (newForm) => {
|
||||
form.value = useForm({...form.value.data(), ...newForm})
|
||||
}
|
||||
</script>
|
||||
117
client/pages/forms/create/index.vue
Normal file
117
client/pages/forms/create/index.vue
Normal 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'
|
||||
import {fetchTemplate} from "~/stores/templates.js"
|
||||
import {hash} from "~/lib/utils.js"
|
||||
import {onBeforeRouteLeave} from 'vue-router'
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
useOpnSeoMeta({
|
||||
title: 'Create a new Form'
|
||||
})
|
||||
|
||||
onBeforeRouteLeave((to, from, next) => {
|
||||
if (isDirty()) {
|
||||
return useAlert().confirm('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()
|
||||
|
||||
// Fetch the template
|
||||
if (route.query.template !== undefined && route.query.template) {
|
||||
const {data} = await fetchTemplate(route.query.template)
|
||||
templatesStore.save(data.value)
|
||||
}
|
||||
|
||||
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.loadAll(workspace.value.id)
|
||||
}
|
||||
|
||||
form.value = initForm({workspace_id: workspace.value?.id})
|
||||
formInitialHash.value = hash(JSON.stringify(form.value.data()))
|
||||
if (route.query.template !== undefined && route.query.template) {
|
||||
const template = templatesStore.getByKey(route.query.template)
|
||||
if (template && template.structure) {
|
||||
form.value = useForm({...form.value.data(), ...template.structure})
|
||||
}
|
||||
} else {
|
||||
// No template loaded, ask how to start
|
||||
showInitialFormModal.value = true
|
||||
}
|
||||
// workspacesStore.loadIfEmpty()
|
||||
})
|
||||
|
||||
// Methods
|
||||
const formGenerated = (newForm) => {
|
||||
form.value = useForm({...form.value.data(), ...newForm})
|
||||
}
|
||||
|
||||
const isDirty = () => {
|
||||
return !loading.value && formInitialHash.value && formInitialHash.value !== hash(JSON.stringify(form.value.data()))
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user