Multiple bug fixing

client/components/global/ScrollShadow.vue

@@ -4,7 +4,7 @@
       ref="scrollContainer"
       :class="[$style['scroll-container'],{'no-scrollbar':hideScrollbar}]"
       :style="{ width: width?width:'auto', height }"
-      @scroll.passive="toggleShadow"
+      @scroll.passive="throttled.toggleShadow"
     >
       <slot />
       <span :class="[$style['shadow-top'], shadow.top && $style['is-active']]" :style="{
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import throttle from 'lodash.throttle'
 function newResizeObserver (callback) {
   // Skip this feature for browsers which
   // do not support ResizeObserver.
@@ -50,28 +51,31 @@ export default {
         bottom: false,
         left: false
       },
-      debounceTimeout: null,
       scrollContainerObserver: null,
-      wrapObserver: null
+      wrapObserver: null,
+      throttled: {}
     }
   },
   mounted () {
-    window.addEventListener('resize', this.calcDimensions)
+    this.throttled.toggleShadow = throttle(this.toggleShadow, 100);
+    this.throttled.calcDimensions = throttle(this.calcDimensions, 100);
+
+    window.addEventListener('resize', this.throttled.calcDimensions)
 
     // Check if shadows are necessary after the element is resized.
-    const scrollContainerObserver = newResizeObserver(this.toggleShadow)
+    const scrollContainerObserver = newResizeObserver(this.throttled.toggleShadow)
     if (scrollContainerObserver) {
       scrollContainerObserver.observe(this.$refs.scrollContainer)
     }
 
     // Recalculate the container dimensions when the wrapper is resized.
-    this.wrapObserver = newResizeObserver(this.calcDimensions)
+    this.wrapObserver = newResizeObserver(this.throttled.calcDimensions)
     if (this.wrapObserver) {
       this.wrapObserver.observe(this.$el)
     }
   },
   unmounted () {
-    window.removeEventListener('resize', this.calcDimensions)
+    window.removeEventListener('resize', this.throttled.calcDimensions)
     // Cleanup when the component is unmounted.
     this.wrapObserver.disconnect()
     if (this.scrollContainerObserver) {

client/components/open/forms/OpenForm.vue

@@ -173,6 +173,7 @@ export default {
      */
     currentFieldsPageBreak () {
       // Last block from current group
+      if (!this.currentFields?.length) return null
       const block = this.currentFields[this.currentFields.length - 1]
       if (block && block.type === 'nf-page-break') return block
       return null

client/components/open/forms/components/FormEditor.vue

@@ -97,6 +97,7 @@ import FormCustomSeo from './form-components/FormCustomSeo.vue'
 import FormAccess from './form-components/FormAccess.vue'
 import {validatePropertiesLogic} from "~/composables/forms/validatePropertiesLogic.js"
 import opnformConfig from "~/opnform.config.js";
+import {captureException} from "@sentry/vue";
 
 export default {
   name: 'FormEditor',
@@ -255,9 +256,12 @@ export default {
         this.amplitude.logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
         this.displayFormModificationAlert(data)
       }).catch((error) => {
-        if (error.response.status === 422) {
+        if (error?.response.status === 422) {
           this.validationErrorResponse = error.response.data
           this.showValidationErrors()
+        } else {
+          useAlert().error('An error occurred while saving the form, please try again.')
+          captureException(error)
         }
       }).finally(() => {
         this.updateFormLoading = false
@@ -282,10 +286,12 @@ export default {
         this.displayFormModificationAlert(response)
         useRouter().push({ name: 'forms-slug-show-share', params: { slug: this.createdFormSlug, new_form: response.users_first_form } })
       }).catch((error) => {
-        console.error(error)
-        if (error.response && error.response.status === 422) {
+        if (error?.response?.status === 422) {
           this.validationErrorResponse = error.response
           this.showValidationErrors()
+        } else {
+          useAlert().error('An error occurred while saving the form, please try again.')
+          captureException(error)
         }
       }).finally(() => {
         this.updateFormLoading = false

client/components/open/forms/components/form-components/FormCustomization.vue

@@ -17,11 +17,6 @@
                   ]"
                   :form="form" label="Form Theme"
     />
-    <div class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
-      <small>
-        Need another theme? <a href="#" @click.prevent="crisp.openAndShowChat">Send us some suggestions!</a>
-      </small>
-    </div>
 
     <select-input name="dark_mode" class="mt-4"
                   help="To see changes, save your form and open it"

client/components/open/forms/fields/components/FieldOptions.vue

@@ -468,6 +468,7 @@ export default {
       return true
     },
     optionsText () {
+      if (this.field[this.field.type]) return []
       return this.field[this.field.type].options.map(option => {
         return option.name
       }).join('\n')

client/components/open/tables/OpenTable.vue

@@ -53,8 +53,8 @@
       <td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
           style="width: 100px"
       >
-        <record-operations :form="form" :structure="columns" :submission="row" 
-                            @deleted="(submission)=>$emit('deleted',submission)" 
+        <record-operations :form="form" :structure="columns" :submission="row"
+                            @deleted="(submission)=>$emit('deleted',submission)"
                             @updated="(submission)=>$emit('updated', submission)"/>
       </td>
     </tr>
@@ -91,7 +91,7 @@ import {hash} from "~/lib/utils.js";
 
 export default {
   components: {ResizableTh, RecordOperations},
-  emits: ["updated",  "deleted"],
+  emits: ["updated",  "deleted", "resize"],
   props: {
     columns: {
       type: Array,

client/components/pages/forms/create/CreateFormBaseModal.vue

@@ -145,7 +145,9 @@ export default {
             this.fetchGeneratedForm(generationId)
           }
         }).catch(error => {
-          this.useAlert.error(error.data.message)
+          if (error?.data?.message){
+            this.useAlert.error(error.data.message)
+          }
           this.state = 'default'
           this.loading = false
         })