fix: Prevent submitting a form before saving an input into the store

dist/assets/admin/twill-manifest.json

@@ -11,20 +11,20 @@
   "Inter-MediumItalic.woff2": "/assets/admin/fonts/Inter-MediumItalic.7a7fd735.woff2",
   "Inter-Regular.woff": "/assets/admin/fonts/Inter-Regular.aebfbb3c.woff",
   "Inter-Regular.woff2": "/assets/admin/fonts/Inter-Regular.bffaed79.woff2",
-  "chunk-common.css": "/assets/admin/css/chunk-common.e85ffd4c.css",
-  "chunk-common.js": "/assets/admin/js/chunk-common.e45f02f2.js",
-  "chunk-vendors.css": "/assets/admin/css/chunk-vendors.e0f3ef32.css",
-  "chunk-vendors.js": "/assets/admin/js/chunk-vendors.750de529.js",
+  "chunk-common.css": "/assets/admin/css/chunk-common.8d093546.css",
+  "chunk-common.js": "/assets/admin/js/chunk-common.afb17077.js",
+  "chunk-vendors.css": "/assets/admin/css/chunk-vendors.0d19f197.css",
+  "chunk-vendors.js": "/assets/admin/js/chunk-vendors.88c4239b.js",
   "icons-files.php": "/views/partials/icons/icons-files-svg.blade.php",
   "icons-wysiwyg.php": "/views/partials/icons/icons-wysiwyg-svg.blade.php",
   "icons.php": "/views/partials/icons/icons-svg.blade.php",
   "main-buckets.css": "/assets/admin/css/main-buckets.b3760912.css",
-  "main-buckets.js": "/assets/admin/js/main-buckets.5590f8ca.js",
+  "main-buckets.js": "/assets/admin/js/main-buckets.d981e32e.js",
   "main-dashboard.css": "/assets/admin/css/main-dashboard.7e178125.css",
-  "main-dashboard.js": "/assets/admin/js/main-dashboard.fc57884f.js",
-  "main-form.css": "/assets/admin/css/main-form.34549069.css",
-  "main-form.js": "/assets/admin/js/main-form.3d12537f.js",
+  "main-dashboard.js": "/assets/admin/js/main-dashboard.9729b301.js",
+  "main-form.css": "/assets/admin/css/main-form.683ac78f.css",
+  "main-form.js": "/assets/admin/js/main-form.56735c96.js",
   "main-free.js": "/assets/admin/js/main-free.75070804.js",
   "main-listing.css": "/assets/admin/css/main-listing.32e2c205.css",
-  "main-listing.js": "/assets/admin/js/main-listing.609e7b17.js"
+  "main-listing.js": "/assets/admin/js/main-listing.35805d0e.js"
 }

frontend/js/components/Textfield.vue

@@ -204,11 +204,18 @@
         this.focused = false
         this.$emit('blur', newValue)
       },
-      onInput: debounce(function (event) {
+      onInput: function (event) {
+        this.preventSubmit()
+
+        this._onInputInternal(event)
+      },
+      _onInputInternal: debounce(function (event) {
         const newValue = event.target.value
         this.updateAndSaveValue(newValue)
 
         this.$emit('change', newValue)
+
+        this.allowSubmit()
       }, 250),
       resizeTextarea: function () {
         if (this.type !== 'textarea') return

frontend/js/components/Wysiwyg.vue

@@ -243,8 +243,13 @@
           this.updateEditor(newValue)
         }
       },
-      textUpdate: debounce(function () {
-        this.saveIntoStore() // see formStore mixin
+      textUpdate: function () {
+        this.preventSubmit()
+        this._textUpdateInternal()
+      },
+      _textUpdateInternal: debounce(function () {
+        this.saveIntoStore()
+        this.allowSubmit()
       }, 600),
       toggleSourcecode: function () {
         this.editorHeight = (Math.max(50, this.$refs.editor.clientHeight) + this.toolbarHeight - 1) + 'px'

frontend/js/components/WysiwygTiptap.vue

@@ -306,8 +306,13 @@
           this.updateEditor(newValue)
         }
       },
-      textUpdate: debounce(function () {
-        this.saveIntoStore() // see formStore mixin
+      textUpdate: function () {
+        this.preventSubmit()
+        this._textUpdateInternal()
+      },
+      _textUpdateInternal: debounce(function () {
+        this.saveIntoStore()
+        this.allowSubmit()
       }, 600),
       toggleSourcecode: function () {
         this.editorHeight = (Math.max(50, this.$refs.editor.clientHeight) + this.toolbarHeight - 1) + 'px'

frontend/js/components/modals/ModalAdd.vue

@@ -11,9 +11,11 @@
   import { NOTIFICATION, FORM } from '@/store/mutations'
   import ACTIONS from '@/store/actions'
   import a17ModalValidationButtons from './ModalValidationButtons.vue'
+  import retrySubmitMixin from '@/mixins/retrySubmit'
 
   export default {
     name: 'A17ModalAdd',
+    mixins: [retrySubmitMixin],
     props: {
       name: {
         type: String,
@@ -35,7 +37,12 @@
       open: function () {
         if (this.$refs.modal) this.$refs.modal.open()
       },
-      submit: function (event) {
+      submit: function () {
+        if (this.isSubmitPrevented) {
+          this.shouldRetrySubmitWhenAllowed = true
+          return
+        }
+
         if (this._isSubmitting) return
         this._isSubmitting = true
 

frontend/js/components/modals/ModalCreate.vue

@@ -21,9 +21,11 @@
   import { NOTIFICATION, FORM, DATATABLE, LANGUAGE } from '@/store/mutations'
   import ACTIONS from '@/store/actions'
   import a17ModalValidationButtons from './ModalValidationButtons.vue'
+  import retrySubmitMixin from '@/mixins/retrySubmit'
 
   export default {
     name: 'A17ModalCreate',
+    mixins: [retrySubmitMixin],
     props: {
       formCreate: {
         type: String,
@@ -80,7 +82,12 @@
 
         this.$refs.modal.open()
       },
-      submit: function (event) {
+      submit: function () {
+        if (this.isSubmitPrevented) {
+          this.shouldRetrySubmitWhenAllowed = true
+          return
+        }
+
         if (this._isSubmitting) return
         this._isSubmitting = true
 

frontend/js/main-form.js

@@ -57,6 +57,7 @@ import attributes from '@/store/modules/attributes'
 import formatPermalink from '@/mixins/formatPermalink'
 import editorMixin from '@/mixins/editor.js'
 import BlockMixin from '@/mixins/block'
+import retrySubmitMixin from '@/mixins/retrySubmit'
 
 // configuration
 Vue.use(A17Config)
@@ -144,7 +145,7 @@ importedComponents.keys().map(block => {
 window[process.env.VUE_APP_NAME].vm = window.vm = new Vue({
   store, // inject store to all children
   el: '#app',
-  mixins: [formatPermalink, editorMixin],
+  mixins: [formatPermalink, editorMixin, retrySubmitMixin],
   data: function () {
     return {
       unSubscribe: function () {
@@ -165,7 +166,12 @@ window[process.env.VUE_APP_NAME].vm = window.vm = new Vue({
     ])
   },
   methods: {
-    submitForm: function (event) {
+    submitForm: function () {
+      if (this.isSubmitPrevented) {
+        this.shouldRetrySubmitWhenAllowed = true
+        return
+      }
+
       if (!this.loading) {
         this.isFormUpdated = false
         this.$store.commit(FORM.UPDATE_FORM_LOADING, true)

frontend/js/mixins/formStore.js

@@ -71,6 +71,12 @@ export default {
       // in Modal or in Form
       if (this.inModal) this.$store.commit(FORM.UPDATE_MODAL_FIELD, field)
       else this.$store.commit(FORM.UPDATE_FORM_FIELD, field)
+    },
+    preventSubmit: function () {
+      this.$store.commit(FORM.PREVENT_SUBMIT)
+    },
+    allowSubmit: function () {
+      this.$store.commit(FORM.ALLOW_SUBMIT)
     }
   },
   beforeMount: function () {

frontend/js/mixins/retrySubmit.js

@@ -0,0 +1,31 @@
+import { mapState } from 'vuex'
+
+export default {
+  data: function () {
+    return {
+      shouldRetrySubmitWhenAllowed: false
+    }
+  },
+  computed: {
+    ...mapState({
+      isSubmitPrevented: state => state.form.isSubmitPrevented
+    })
+  },
+  watch: {
+    isSubmitPrevented: function (isSubmitPrevented) {
+      if (!isSubmitPrevented && this.shouldRetrySubmitWhenAllowed) {
+        this.shouldRetrySubmitWhenAllowed = false
+        this.retrySubmit()
+      }
+    }
+  },
+  methods: {
+    retrySubmit: function () {
+      if (this.submitForm) {
+        this.submitForm() // @see main-form.js
+      } else if (this.submit) {
+        this.submit() // @see ModalCreate.vue & ModalAdd.vue
+      }
+    }
+  }
+}

frontend/js/store/modules/form.js

@@ -66,15 +66,19 @@ const state = {
   errors: {},
   /**
    * Is this a custom form (that will let the browser submit the form instead of hooking up the submit event)
-   * @type {Bookean}
+   * @type {Boolean}
    */
   isCustom: window[process.env.VUE_APP_NAME].STORE.form.isCustom || false,
   /**
    * Force reload on successful submit
-   * @type {Bookean}
+   * @type {Boolean}
    */
-  reloadOnSuccess: window[process.env.VUE_APP_NAME].STORE.form.reloadOnSuccess || false
-
+  reloadOnSuccess: window[process.env.VUE_APP_NAME].STORE.form.reloadOnSuccess || false,
+  /**
+   * Determines if the form should prevent submitting before an input value is pushed into the store
+   * @type {Boolean}
+   */
+  isSubmitPrevented: false
 }
 
 // getters
@@ -103,6 +107,12 @@ const mutations = {
       state.permalink = newValue
     }
   },
+  [FORM.PREVENT_SUBMIT] (state) {
+    state.isSubmitPrevented = true
+  },
+  [FORM.ALLOW_SUBMIT] (state) {
+    state.isSubmitPrevented = false
+  },
   // ----------- Form fields ----------- //
   [FORM.EMPTY_FORM_FIELDS] (state, status) {
     state.fields = []

frontend/js/store/mutations/form.js

@@ -1,3 +1,6 @@
+export const PREVENT_SUBMIT = 'preventSubmit'
+export const ALLOW_SUBMIT = 'allowSubmit'
+
 /* form */
 export const UPDATE_FORM_PERMALINK = 'updateFormPermalink'
 export const UPDATE_FORM_FIELD = 'updateFormField'
@@ -20,6 +23,8 @@ export const REMOVE_MODAL_FIELD = 'removeModalField'
 export const REPLACE_MODAL_FIELDS = 'replaceModalField'
 
 export default {
+  PREVENT_SUBMIT,
+  ALLOW_SUBMIT,
   UPDATE_FORM_PERMALINK,
   UPDATE_FORM_FIELD,
   REMOVE_FORM_FIELD,