[Ajax] Add ec-crud-ajax-form-before and ec-crud-ajax-form-complete events

Author: hlecorche

assets/js/ajax.js

@@ -252,6 +252,21 @@ export function link (link, options) {
 }
 
 export function sendForm (form, options) {
+  const eventBefore = new CustomEvent('ec-crud-ajax-form-before', {
+    bubbles: true,
+    cancelable: true,
+    detail: {
+      form,
+      options
+    }
+  })
+  document.dispatchEvent(eventBefore)
+  if (eventBefore.defaultPrevented) {
+    return new Promise((resolve, reject) => {
+      resolve(null)
+    })
+  }
+
   form = optionsResolver.getElement(form)
   // Options in data-* override options argument
   // Option argument override action, method and data form
@@ -267,6 +282,25 @@ export function sendForm (form, options) {
     )
   )
 
+  const callbacksComplete = []
+  callbacksComplete.push({
+    priority: 10,
+    callback: (statusText, response) => {
+      const eventOnComplete = new CustomEvent('ec-crud-ajax-form-complete', {
+        detail: {
+          form,
+          statusText,
+          response
+        }
+      })
+      document.dispatchEvent(eventOnComplete)
+    }
+  })
+  if (optionsResolver.isNotBlank(options.onComplete)) {
+    callbacksComplete.push(options.onComplete)
+  }
+  options.onComplete = callbacksComplete
+
   return sendRequest(options)
 }
 

tests/assets/js/ajax.spec.js

@@ -1364,21 +1364,39 @@ describe('Test Ajax.form', function () {
       status: 200,
       responseText: 'CONTENT'
     })
+
+    jasmine.Ajax.stubRequest(/error404/).andReturn({
+      status: 404,
+      statusText: 'Not Found',
+      response: 'Page not found !',
+      responseText: 'Page not found !'
+    })
   })
 
   afterEach(function () {
     jasmine.Ajax.uninstall()
     $('.html-test').remove()
     callbackManager.clear()
+    $(document).off('ec-crud-ajax-form-before')
+    $(document).off('ec-crud-ajax-form-complete')
   })
 
   it('Send request with form', async function () {
     $('body').append('<form action="/goodRequest" method="POST" class="html-test" id="formToTest"><input type="text" name="var1" /><input type="text" name="var2" /></form>')
     $('#formToTest input[name=var1]').val('My value 1')
     $('#formToTest input[name=var2]').val('My value 2')
 
+    const callbackFormBefore = jasmine.createSpy('form_before')
+    const callbackFormComplete = jasmine.createSpy('form_complete')
     const callbackSuccess = jasmine.createSpy('success')
 
+    $(document).on('ec-crud-ajax-form-before', function (event) {
+      callbackFormBefore()
+    })
+    $(document).on('ec-crud-ajax-form-complete', function (event) {
+      callbackFormComplete()
+    })
+
     const promise = ajax.sendForm('#formToTest', {
       onSuccess: function (data, response) {
         callbackSuccess()
@@ -1392,9 +1410,92 @@ describe('Test Ajax.form', function () {
     expect(jasmine.Ajax.requests.mostRecent().url).toMatch('/goodRequest')
     expect(jasmine.Ajax.requests.mostRecent().method).toBe('POST')
     expect(jasmine.Ajax.requests.mostRecent().data()).toEqual([['var1', 'My value 1'], ['var2', 'My value 2']]) // Parsed by addJasmineAjaxFormDataSupport
+    expect(callbackFormBefore).toHaveBeenCalled()
+    expect(callbackFormComplete).toHaveBeenCalled()
     expect(callbackSuccess).toHaveBeenCalled()
   })
 
+  it('Send request with form canceled', async function () {
+    $('body').append('<form action="/goodRequest" method="POST" class="html-test" id="formToTest"><input type="text" name="var1" /><input type="text" name="var2" /></form>')
+    $('#formToTest input[name=var1]').val('My value 1')
+    $('#formToTest input[name=var2]').val('My value 2')
+
+    const callbackFormComplete = jasmine.createSpy('form_complete')
+
+    $(document).on('ec-crud-ajax-form-before', function (event) {
+      event.preventDefault()
+    })
+    $(document).on('ec-crud-ajax-form-complete', function (event) {
+      callbackFormComplete()
+    })
+
+    const promise = ajax.sendForm('#formToTest')
+    expect(promise).toBeInstanceOf(Promise)
+
+    await promise
+
+    expect(callbackFormComplete).not.toHaveBeenCalled()
+  })
+
+  it('Send request with form and complete callback', async function () {
+    $('body').append('<form action="/goodRequest" method="POST" class="html-test" id="formToTest"><input type="text" name="var1" /><input type="text" name="var2" /></form>')
+    $('#formToTest input[name=var1]').val('My value 1')
+    $('#formToTest input[name=var2]').val('My value 2')
+
+    const callbackFormBefore = jasmine.createSpy('form_before')
+    const callbackFormComplete = jasmine.createSpy('form_complete')
+    const callbackComplete = jasmine.createSpy('complete')
+
+    $(document).on('ec-crud-ajax-form-before', function (event) {
+      callbackFormBefore()
+    })
+    $(document).on('ec-crud-ajax-form-complete', function (event) {
+      callbackFormComplete()
+    })
+
+    const promise = ajax.sendForm('#formToTest', {
+      onComplete: function (statusText, response) {
+        callbackComplete()
+      }
+    })
+    expect(promise).toBeInstanceOf(Promise)
+
+    const response = await promise
+
+    expect(response).toBeInstanceOf(Response)
+    expect(jasmine.Ajax.requests.mostRecent().url).toMatch('/goodRequest')
+    expect(jasmine.Ajax.requests.mostRecent().method).toBe('POST')
+    expect(jasmine.Ajax.requests.mostRecent().data()).toEqual([['var1', 'My value 1'], ['var2', 'My value 2']]) // Parsed by addJasmineAjaxFormDataSupport
+    expect(callbackFormBefore).toHaveBeenCalled()
+    expect(callbackFormComplete).toHaveBeenCalled()
+    expect(callbackComplete).toHaveBeenCalled()
+  })
+
+  it('Send request with form and error', async function () {
+    $('body').append('<form action="/error404" method="POST" class="html-test" id="formToTest"><input type="text" name="var1" /><input type="text" name="var2" /></form>')
+    $('#formToTest input[name=var1]').val('My value 1')
+    $('#formToTest input[name=var2]').val('My value 2')
+
+    const callbackFormComplete = jasmine.createSpy('form_complete')
+    const callbackSuccess = jasmine.createSpy('success')
+
+    $(document).on('ec-crud-ajax-form-complete', function (event) {
+      callbackFormComplete()
+    })
+
+    const promise = ajax.sendForm('#formToTest', {
+      onSuccess: function (data, response) {
+        callbackSuccess()
+      }
+    })
+    expect(promise).toBeInstanceOf(Promise)
+
+    await promise
+
+    expect(callbackFormComplete).toHaveBeenCalled()
+    expect(callbackSuccess).not.toHaveBeenCalled()
+  })
+
   it('Send request with form with Element', async function () {
     $('body').append('<form action="/goodRequest" method="POST" class="html-test" id="formToTest"><input type="text" name="var1" /><input type="text" name="var2" /></form>')
     $('#formToTest input[name=var1]').val('My value 1')
@@ -1536,6 +1637,16 @@ describe('Test Ajax.form', function () {
     $('#formToTest input[name=var1]').val('My value 1')
     $('#formToTest input[name=var2]').val('My value 2')
 
+    const callbackFormBefore = jasmine.createSpy('form_before')
+    const callbackFormComplete = jasmine.createSpy('form_complete')
+
+    $(document).on('ec-crud-ajax-form-before', function (event) {
+      callbackFormBefore()
+    })
+    $(document).on('ec-crud-ajax-form-complete', function (event) {
+      callbackFormComplete()
+    })
+
     $('#formToTest button[type="submit"]').get(0).click()
 
     await wait(() => {
@@ -1545,6 +1656,8 @@ describe('Test Ajax.form', function () {
     expect(jasmine.Ajax.requests.mostRecent().url).toMatch('/goodRequest')
     expect(jasmine.Ajax.requests.mostRecent().method).toBe('POST')
     expect(jasmine.Ajax.requests.mostRecent().data()).toEqual([['var1', 'My value 1'], ['var2', 'My value 2']]) // Parsed by addJasmineAjaxFormDataSupport
+    expect(callbackFormBefore).toHaveBeenCalled()
+    expect(callbackFormComplete).toHaveBeenCalled()
   })
 
   it('Send auto-request with form canceled', async function () {