Better form editor (#187)

resources/js/pages/forms/create-guest.vue

@@ -6,11 +6,8 @@
                                 @close="showInitialFormModal=false"/>
         <form-editor v-if="!workspacesLoading" ref="editor"
                      class="w-full flex flex-grow"
-                     :style="{
-                       'max-height': editorMaxHeight + 'px'
-                     }" :error="error"
+                     :error="error"
                      :isGuest="isGuest"
-                     @mounted="onResize"
                      @openRegister="openRegister"
         />
         <div v-else class="text-center mt-4 py-6">
@@ -61,7 +58,6 @@ export default {
       stateReady: false,
       loading: false,
       error: '',
-      editorMaxHeight: 500,
       registerModal: false,
       isGuest: true,
       showInitialFormModal: false
@@ -120,25 +116,13 @@ export default {
     this.stateReady = true
   },
 
-  created() {
-    window.addEventListener('resize', this.onResize)
-  },
-  destroyed() {
-    window.removeEventListener('resize', this.onResize)
-  },
+  created() {},
+  destroyed() {},
 
   methods: {
     ...mapActions({
       loadWorkspaces: 'open/workspaces/load'
     }),
-    /**
-     * Compute max height of editor
-     */
-    onResize() {
-      if (this.$refs.editor) {
-        this.editorMaxHeight = window.innerHeight - this.$refs.editor.$el.offsetTop
-      }
-    },
     openRegister() {
       this.registerModal = true
     },

resources/js/pages/forms/create.vue

@@ -6,10 +6,7 @@
                                 @close="showInitialFormModal=false"/>
         <form-editor v-if="!workspacesLoading" ref="editor"
                      class="w-full flex flex-grow"
-                     :style="{
-                       'max-height': editorMaxHeight + 'px'
-                     }" :error="error"
-                     @mounted="onResize"
+                     :error="error"
                      @on-save="formInitialHash=null"
         />
         <div v-else class="text-center mt-4 py-6">
@@ -64,7 +61,6 @@ export default {
       stateReady: false,
       loading: false,
       error: '',
-      editorMaxHeight: 500,
       showInitialFormModal: false,
       formInitialHash: null
     }
@@ -125,25 +121,13 @@ export default {
     this.stateReady = this.user !== null
   },
 
-  created() {
-    window.addEventListener('resize', this.onResize)
-  },
-  destroyed() {
-    window.removeEventListener('resize', this.onResize)
-  },
+  created() {},
+  destroyed() {},
 
   methods: {
     ...mapActions({
       loadWorkspaces: 'open/workspaces/loadIfEmpty'
     }),
-    /**
-     * Compute max height of editor
-     */
-    onResize() {
-      if (this.$refs.editor) {
-        this.editorMaxHeight = window.innerHeight - this.$refs.editor.$el.offsetTop
-      }
-    },
     formGenerated(form) {
       this.form = new Form({...this.form.data(), ...form})
     },

resources/js/pages/forms/edit.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="w-full flex flex-col">
     <form-editor v-if="pageLoaded" ref="editor"
-                 :style="{
-                   'max-height': editorMaxHeight + 'px'
-                 }"
                  :isEdit="true"
-                 @mounted="onResize"
                  @on-save="formInitialHash=null"
     />
     <div v-else-if="!loading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
@@ -61,7 +57,6 @@ export default {
     return {
       loading: false,
       error: null,
-      editorMaxHeight: 500,
       formInitialHash: null
     }
   },
@@ -96,12 +91,8 @@ export default {
     }
   },
 
-  created () {
-    window.addEventListener('resize', this.onResize)
-  },
-  destroyed () {
-    window.removeEventListener('resize', this.onResize)
-  },
+  created () {},
+  destroyed () {},
 
   mounted () {
     window.onbeforeunload = () => {
@@ -120,14 +111,6 @@ export default {
   },
   
   methods: {
-    /**
-     * Compute max height of editor
-     */
-    onResize () {
-      if (this.$refs.editor) {
-        this.editorMaxHeight = Math.max(500, window.innerHeight - this.$refs.editor.$el.offsetTop)
-      }
-    },
     isDirty () {
       return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.updatedForm.data()))
     },