E45fd new UI form editor (#17)
* New UI - Form Editor * edit & create save form changes * form editor changes * form editor changes * last updated human readable * change nt-blue to blue for icon * change icons color if block collapse open/close * Working on form editor * More polishing * Finished working on the new form editor design Co-authored-by: Chirag Chhatrala <chirag@notionforms.io> Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>
This commit is contained in:
Julien Nahum
GitHub
@@ -1,34 +1,12 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap flex-col">
|
||||
<!-- Step 1: Select Database -->
|
||||
<div ref="progress" class="w-full px-4 " :class="{
|
||||
'md:mx-auto md:max-w-5xl':currentStep===0}"
|
||||
>
|
||||
<div class="flex items-center justify-between pb-2">
|
||||
<v-button v-if="currentStep>0" color="gray" shade="light" class="hidden md:block mx-4 flex-shrink-0"
|
||||
@click="goBack"
|
||||
>
|
||||
Previous
|
||||
</v-button>
|
||||
<v-button v-if="currentStep>0" :loading="loading || createFormLoading" color="nt-blue"
|
||||
class="v-last-step hidden md:block mx-4 flex-shrink-0"
|
||||
@click="nextStep"
|
||||
>
|
||||
{{ currentStep !== 1 ? 'Continue' : 'Create Form' }}
|
||||
</v-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<transition v-if="stateReady" name="fade" mode="out-in">
|
||||
<!-- Step1: Form Customization -->
|
||||
<div v-if="currentStep===1" key="2">
|
||||
<div key="2">
|
||||
<form-editor v-if="!workspacesLoading" ref="editor"
|
||||
class="w-full flex border-t flex-grow"
|
||||
class="w-full flex flex-grow"
|
||||
:style="{
|
||||
'max-height': editorMaxHeight + 'px'
|
||||
}" :error="error"
|
||||
:validation-error-response="validationErrorResponse"
|
||||
@mounted="onResize"
|
||||
/>
|
||||
<div v-else class="text-center mt-4 py-6">
|
||||
@@ -36,17 +14,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div v-if="currentStep===1" class="md:hidden pt-4 mb-16 px-6 border-t flex justify-between">
|
||||
<v-button color="gray" shade="light" class="mt-2" @click="previousStep">
|
||||
Previous
|
||||
</v-button>
|
||||
<v-button v-track.create_form_click :loading="createFormLoading" color="nt-blue" class="mt-2 px-5 v-last-step"
|
||||
@click="nextStep"
|
||||
>
|
||||
Create Form
|
||||
</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -54,8 +21,6 @@
|
||||
import store from '~/store'
|
||||
import Form from 'vform'
|
||||
import {mapState, mapActions} from 'vuex'
|
||||
import saveUpdateAlert from '../../mixins/forms/saveUpdateAlert'
|
||||
import clonedeep from 'clone-deep'
|
||||
|
||||
const FormEditor = () => import('../../components/open/forms/components/FormEditor')
|
||||
|
||||
@@ -76,8 +41,6 @@ export default {
|
||||
return {title: 'Create a new Form'}
|
||||
},
|
||||
|
||||
mixins: [saveUpdateAlert],
|
||||
|
||||
beforeRouteEnter (to, from, next) {
|
||||
loadTemplates()
|
||||
next()
|
||||
@@ -88,13 +51,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
stateReady: false,
|
||||
validationErrorResponse: null,
|
||||
loading: false,
|
||||
createFormLoading: false,
|
||||
error: '',
|
||||
createdFormId: null,
|
||||
currentStep: 1,
|
||||
|
||||
editorMaxHeight: 500
|
||||
}
|
||||
},
|
||||
@@ -117,9 +75,6 @@ export default {
|
||||
workspace() {
|
||||
return this.$store.getters['open/workspaces/getCurrent']()
|
||||
},
|
||||
createdForm() {
|
||||
return this.$store.getters['open/forms/getById'](this.createdFormId)
|
||||
},
|
||||
fromOnboarding() {
|
||||
return this.$route.params.from_onboarding
|
||||
},
|
||||
@@ -211,59 +166,6 @@ export default {
|
||||
can_be_indexed: true
|
||||
})
|
||||
},
|
||||
nextStep() {
|
||||
this.error = ''
|
||||
if (this.currentStep === 0) {
|
||||
this.form.workspace = clonedeep(this.workspace)
|
||||
// Init editor max height
|
||||
this.currentStep++
|
||||
this.$nextTick(() => {
|
||||
this.editorMaxHeight = window.innerHeight - (this.$refs.progress.offsetTop + this.$refs.progress.offsetHeight)
|
||||
})
|
||||
return
|
||||
} else if (this.currentStep === 1) {
|
||||
return this.submit()
|
||||
}
|
||||
this.currentStep++
|
||||
},
|
||||
submit() {
|
||||
if (this.loading) return
|
||||
this.form.workspace_id = this.workspace.id
|
||||
this.validationErrorResponse = null
|
||||
|
||||
this.createFormLoading = true
|
||||
this.form.post('/api/open/forms').then((response) => {
|
||||
this.$store.commit('open/forms/addOrUpdate', response.data.form)
|
||||
this.createdFormId = response.data.form.id
|
||||
|
||||
this.$logEvent('form_created', {form_id: response.data.form.id, form_slug: response.data.form.slug})
|
||||
this.$getCrisp().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',
|
||||
params: {
|
||||
slug: this.createdForm.slug,
|
||||
new_form: response.data.users_first_form
|
||||
}
|
||||
})
|
||||
}).catch((error) => {
|
||||
if (error.response && error.response.status === 422) {
|
||||
this.validationErrorResponse = error.response.data
|
||||
this.$refs.editor.showValidationErrors()
|
||||
}
|
||||
}).finally(() => {
|
||||
this.createFormLoading = false
|
||||
})
|
||||
},
|
||||
previousStep() {
|
||||
if (this.currentStep > 0) {
|
||||
this.currentStep--
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Compute max height of editor
|
||||
*/
|
||||
@@ -271,9 +173,6 @@ export default {
|
||||
if (this.$refs.editor) {
|
||||
this.editorMaxHeight = window.innerHeight - this.$refs.editor.$el.offsetTop
|
||||
}
|
||||
},
|
||||
goBack() {
|
||||
return this.$router.back();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,10 @@
|
||||
<template>
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="flex justify-center md:justify-between pb-2 px-2">
|
||||
<div class="hidden md:block" />
|
||||
<breadcrumb class="hidden md:flex sm:px-6 mx-auto max-w-lg" :path="breadcrumbs" />
|
||||
<v-button v-if="!loading && updatedForm"
|
||||
v-track.save_form_click
|
||||
lass="hidden md:block"
|
||||
:loading="updateFormLoading" @click="saveForm"
|
||||
>
|
||||
Save changes
|
||||
</v-button>
|
||||
</div>
|
||||
<form-editor v-if="pageLoaded" ref="editor"
|
||||
:style="{
|
||||
'max-height': editorMaxHeight + 'px'
|
||||
}"
|
||||
:validation-error-response="validationErrorResponse"
|
||||
:isEdit="true"
|
||||
@mounted="onResize"
|
||||
/>
|
||||
<div v-else-if="!loading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
|
||||
@@ -34,7 +23,6 @@ import Breadcrumb from '../../components/common/Breadcrumb'
|
||||
|
||||
import Form from 'vform'
|
||||
|
||||
import saveUpdateAlert from '../../mixins/forms/saveUpdateAlert'
|
||||
import { mapState } from 'vuex'
|
||||
const FormEditor = () => import('../../components/open/forms/components/FormEditor')
|
||||
|
||||
@@ -48,7 +36,6 @@ const loadForms = function () {
|
||||
export default {
|
||||
name: 'EditForm',
|
||||
components: { Breadcrumb, FormEditor },
|
||||
mixins: [saveUpdateAlert],
|
||||
|
||||
beforeRouteEnter (to, from, next) {
|
||||
if (!store.getters['open/forms/getBySlug'](to.params.slug)) {
|
||||
@@ -61,10 +48,7 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
updateFormLoading: false,
|
||||
error: null,
|
||||
validationErrorResponse: null,
|
||||
|
||||
editorMaxHeight: 500
|
||||
}
|
||||
},
|
||||
@@ -85,17 +69,6 @@ export default {
|
||||
form () {
|
||||
return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
|
||||
},
|
||||
breadcrumbs () {
|
||||
if (!this.form) {
|
||||
return [{ route: { name: 'home' }, label: 'Your Forms' }]
|
||||
}
|
||||
return [
|
||||
{ route: { name: 'home' }, label: 'Your Forms' },
|
||||
{ label: this.form ? this.form.title : 'Your Form', route: { name: 'forms.show', params: { slug: this.form.slug } } },
|
||||
{ label: 'Edit' }
|
||||
]
|
||||
},
|
||||
formEndpoint: () => '/api/open/forms/{id}/',
|
||||
pageLoaded () {
|
||||
return !this.loading && this.updatedForm !== null
|
||||
}
|
||||
@@ -128,26 +101,6 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
saveForm () {
|
||||
if (this.updateFormLoading) return
|
||||
|
||||
this.updateFormLoading = true
|
||||
this.validationErrorResponse = null
|
||||
this.updatedForm.put(this.formEndpoint.replace('{id}', this.form.id)).then((response) => {
|
||||
const data = response.data
|
||||
this.$store.commit('open/forms/addOrUpdate', data.form)
|
||||
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.displayFormModificationAlert(data)
|
||||
}).catch((error) => {
|
||||
if (error.response.status === 422) {
|
||||
this.validationErrorResponse = error.response.data
|
||||
this.$refs.editor.showValidationErrors()
|
||||
}
|
||||
}).finally(() => {
|
||||
this.updateFormLoading = false
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Compute max height of editor
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user