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>
2022-10-26 16:44:47 +02:00
parent 393c41eab7
commit 42955ab9d0
33 changed files with 1469 additions and 1531 deletions
--- a/resources/js/pages/forms/create.vue
+++ b/resources/js/pages/forms/create.vue
@@ -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();
    }
  }
 }
--- a/resources/js/pages/forms/edit.vue
+++ b/resources/js/pages/forms/edit.vue
@@ -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
     */
--- a/resources/js/pages/settings/admin.vue
+++ b/resources/js/pages/settings/admin.vue
@@ -25,7 +25,7 @@
      />

      <!-- Submit Button -->
-      <v-button :loading="loading" type="success" color="nt-blue" class="mt-4 w-full">
+      <v-button :loading="loading" class="mt-4 w-full">
        Impersonate User
      </v-button>
    </form>
--- a/resources/js/pages/settings/password.vue
+++ b/resources/js/pages/settings/password.vue
@@ -14,7 +14,7 @@
      />

      <!-- Submit Button -->
-      <v-button :loading="form.busy" type="success" color="nt-blue" class="mt-4 w-full">
+      <v-button :loading="form.busy" class="mt-4 w-full">
        {{ $t('update') }}
      </v-button>
    </form>
--- a/resources/js/pages/settings/profile.vue
+++ b/resources/js/pages/settings/profile.vue
@@ -10,7 +10,7 @@
      <text-input name="email" :form="form" :label="$t('email')" :required="true" />

      <!-- Submit Button -->
-      <v-button :loading="form.busy" type="success" color="nt-blue" class="mt-4 w-full">
+      <v-button :loading="form.busy" class="mt-4 w-full">
        {{ $t('update') }}
      </v-button>
    </form>