0351d front end linting (#377)
* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
GitHub
@@ -1,36 +1,43 @@
|
||||
<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 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"
|
||||
@open-register="registerModal = true"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="text-center mt-4 py-6"
|
||||
>
|
||||
<Loader class="h-6 w-6 text-nt-blue mx-auto" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<quick-register :show-register-modal="registerModal" @close="registerModal=false" @reopen="registerModal=true"
|
||||
@afterLogin="afterLogin"
|
||||
<quick-register
|
||||
:show-register-modal="registerModal"
|
||||
@close="registerModal = false"
|
||||
@reopen="registerModal = true"
|
||||
@after-login="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";
|
||||
|
||||
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()
|
||||
@@ -39,26 +46,24 @@ const route = useRoute()
|
||||
|
||||
// Fetch the template
|
||||
if (route.query.template !== undefined && route.query.template) {
|
||||
const {data} = await fetchTemplate(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',
|
||||
title: "Create a new Form for free",
|
||||
})
|
||||
definePageMeta({
|
||||
middleware: "guest"
|
||||
middleware: "guest",
|
||||
})
|
||||
|
||||
// Data
|
||||
const stateReady = ref(false)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const error = ref("")
|
||||
const registerModal = ref(false)
|
||||
const isGuest = ref(true)
|
||||
const showInitialFormModal = ref(false)
|
||||
@@ -68,18 +73,20 @@ const editor = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
// Set as guest user
|
||||
workspacesStore.set([{
|
||||
id: null,
|
||||
name: 'Guest Workspace',
|
||||
is_enterprise: false,
|
||||
is_pro: false
|
||||
}])
|
||||
workspacesStore.set([
|
||||
{
|
||||
id: null,
|
||||
name: "Guest Workspace",
|
||||
is_enterprise: false,
|
||||
is_pro: false,
|
||||
},
|
||||
])
|
||||
|
||||
form.value = initForm({}, true)
|
||||
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})
|
||||
form.value = useForm({ ...form.value.data(), ...template.structure })
|
||||
}
|
||||
} else {
|
||||
// No template loaded, ask how to start
|
||||
@@ -100,6 +107,6 @@ const afterLogin = () => {
|
||||
}
|
||||
|
||||
const formGenerated = (newForm) => {
|
||||
form.value = useForm({...form.value.data(), ...newForm})
|
||||
form.value = useForm({ ...form.value.data(), ...newForm })
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,54 +1,61 @@
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
<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>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import {watch} from 'vue'
|
||||
import {initForm} from "~/composables/forms/initForm.js"
|
||||
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'
|
||||
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"
|
||||
middleware: "auth",
|
||||
})
|
||||
|
||||
useOpnSeoMeta({
|
||||
title: 'Create a new Form'
|
||||
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()
|
||||
}, () => {})
|
||||
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()
|
||||
@@ -56,28 +63,30 @@ const formStore = useFormsStore()
|
||||
|
||||
// Fetch the template
|
||||
if (route.query.template !== undefined && route.query.template) {
|
||||
const {data} = await fetchTemplate(route.query.template)
|
||||
const { data } = await fetchTemplate(route.query.template)
|
||||
templatesStore.save(data.value)
|
||||
}
|
||||
|
||||
const {
|
||||
getCurrent: workspace,
|
||||
getAll: workspaces,
|
||||
workspacesLoading: workspacesLoading
|
||||
workspacesLoading: workspacesLoading,
|
||||
} = storeToRefs(workspacesStore)
|
||||
const {content: form} = storeToRefs(workingFormStore)
|
||||
const { content: form } = storeToRefs(workingFormStore)
|
||||
|
||||
// State
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const error = ref("")
|
||||
const showInitialFormModal = ref(false)
|
||||
const formInitialHash = ref(null)
|
||||
|
||||
watch(() => workspace, () => {
|
||||
if (workspace) {
|
||||
form.workspace_id = workspace.value.id
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => workspace,
|
||||
() => {
|
||||
if (workspace) {
|
||||
form.workspace_id = workspace.value.id
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.client) {
|
||||
@@ -92,12 +101,12 @@ onMounted(() => {
|
||||
formStore.loadAll(workspace.value.id)
|
||||
}
|
||||
|
||||
form.value = initForm({workspace_id: workspace.value?.id}, true)
|
||||
form.value = initForm({ workspace_id: workspace.value?.id }, true)
|
||||
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})
|
||||
form.value = useForm({ ...form.value.data(), ...template.structure })
|
||||
}
|
||||
} else {
|
||||
// No template loaded, ask how to start
|
||||
@@ -108,10 +117,14 @@ onMounted(() => {
|
||||
|
||||
// Methods
|
||||
const formGenerated = (newForm) => {
|
||||
form.value = useForm({...form.value.data(), ...newForm})
|
||||
form.value = useForm({ ...form.value.data(), ...newForm })
|
||||
}
|
||||
|
||||
const isDirty = () => {
|
||||
return !loading.value && formInitialHash.value && formInitialHash.value !== hash(JSON.stringify(form.value.data()))
|
||||
return (
|
||||
!loading.value &&
|
||||
formInitialHash.value &&
|
||||
formInitialHash.value !== hash(JSON.stringify(form.value.data()))
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user