From a2ad367651ccb9591de1f8814c56de98cabce33b Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Sun, 18 Mar 2018 10:49:49 +0800
Subject: [PATCH] feat: better DataTables AJAX error

---
 .eslintrc.js                                  |  3 ++-
 .../assets/src/js/__tests__/admin.test.js     | 22 ++++++++++++++++++-
 resources/assets/src/js/admin/common.js       |  9 ++++++++
 resources/assets/src/js/admin/players.js      |  2 +-
 resources/assets/src/js/admin/plugins.js      |  2 +-
 resources/assets/src/js/admin/users.js        |  2 +-
 6 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index cdc3cec3..19c2e963 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,7 +26,8 @@ module.exports = {
         "showModal": false,
         "showAjaxError": false,
         "getQueryString": false,
-        "TexturePreview": false
+        "TexturePreview": false,
+        "handleDataTablesAjaxError": false
     },
     "parserOptions": {
         "ecmaVersion": 2017
diff --git a/resources/assets/src/js/__tests__/admin.test.js b/resources/assets/src/js/__tests__/admin.test.js
index e2382f0b..e47e02bd 100644
--- a/resources/assets/src/js/__tests__/admin.test.js
+++ b/resources/assets/src/js/__tests__/admin.test.js
@@ -1132,7 +1132,7 @@ describe('tests for "common" module', () => {
     const fetch = jest.fn()
       .mockReturnValue(Promise.resolve({ errno: 0, msg: 'Recorded.' }));
 
-    $.fn.dataTable = { defaults: {} };
+    $.fn.dataTable = { defaults: {}, ext: { errMode: '' } };
     window.document.cookie = '';
     window.fetch = fetch;
     window.blessing = {
@@ -1155,4 +1155,24 @@ describe('tests for "common" module', () => {
     await sendFeedback();
     expect(fetch).toHaveBeenCalledTimes(1);
   });
+
+  it('handle DataTables AJAX error', () => {
+    const { handleDataTablesAjaxError } = require(modulePath);
+    const showModal = jest.fn();
+    window.trans = jest.fn(t => t);
+    window.showModal = showModal;
+    $.fn.dataTable = { defaults: {}, ext: { errMode: '' } };
+
+    handleDataTablesAjaxError(undefined, undefined, '{}');
+    expect(showModal).not.toBeCalled();
+
+    handleDataTablesAjaxError(undefined, undefined, null, {
+      responseText: 'error'
+    });
+    expect(showModal).toBeCalledWith(
+      'error',
+      'general.fatalError',
+      'danger'
+    );
+  });
 });
diff --git a/resources/assets/src/js/admin/common.js b/resources/assets/src/js/admin/common.js
index 19690091..c423f1cc 100644
--- a/resources/assets/src/js/admin/common.js
+++ b/resources/assets/src/js/admin/common.js
@@ -9,6 +9,14 @@ $.extend(true, $.fn.dataTable.defaults, {
     serverSide: true
 });
 
+$.fn.dataTable.ext.errMode = 'none';
+
+function handleDataTablesAjaxError(event, settings, json, xhr) {
+    if (json === null) {
+        showModal(xhr.responseText, trans('general.fatalError'), 'danger');
+    }
+}
+
 async function sendFeedback() {
     if (document.cookie.replace(/(?:(?:^|.*;\s*)feedback_sent\s*=\s*([^;]*).*$)|^.*$/, '$1') !== '') {
         return;
@@ -39,5 +47,6 @@ async function sendFeedback() {
 if (process.env.NODE_ENV === 'test') {
     module.exports = {
         sendFeedback,
+        handleDataTablesAjaxError,
     };
 }
diff --git a/resources/assets/src/js/admin/players.js b/resources/assets/src/js/admin/players.js
index c7609125..929bfcd0 100644
--- a/resources/assets/src/js/admin/players.js
+++ b/resources/assets/src/js/admin/players.js
@@ -13,7 +13,7 @@ function initPlayersTable() {
         scrollY: ($('.content-wrapper').height() - $('.content-header').outerHeight()) * 0.7,
         fnDrawCallback: () => $('[data-toggle="tooltip"]').tooltip(),
         columnDefs: playersTableColumnDefs
-    });
+    }).on('xhr.dt', handleDataTablesAjaxError);
 }
 
 const playersTableColumnDefs = [
diff --git a/resources/assets/src/js/admin/plugins.js b/resources/assets/src/js/admin/plugins.js
index 8088f087..9346d9fe 100644
--- a/resources/assets/src/js/admin/plugins.js
+++ b/resources/assets/src/js/admin/plugins.js
@@ -9,7 +9,7 @@ function initPluginsTable() {
         ajax: url('admin/plugins/data'),
         fnDrawCallback: () => $('[data-toggle="tooltip"]').tooltip(),
         columnDefs: pluginsTableColumnDefs
-    });
+    }).on('xhr.dt', handleDataTablesAjaxError);
 }
 
 const pluginsTableColumnDefs = [
diff --git a/resources/assets/src/js/admin/users.js b/resources/assets/src/js/admin/users.js
index e69c52e0..b01c7a04 100644
--- a/resources/assets/src/js/admin/users.js
+++ b/resources/assets/src/js/admin/users.js
@@ -14,7 +14,7 @@ function initUsersTable() {
         fnDrawCallback: () => $('[data-toggle="tooltip"]').tooltip(),
         rowCallback: (row, data) => $(row).attr('id', `user-${data.uid}`),
         columnDefs: usersTableColumnDefs
-    });
+    }).on('xhr.dt', handleDataTablesAjaxError);
 }
 
 const userPermissions = {