dqt: replace $.ajax with lorisFetch

htdocs/js/loris-scripts.js

@@ -1,5 +1,70 @@
 /* eslint new-cap: ["error", {capIsNewExceptions: ["DynamicTable", "FileUpload"]}]*/
 
+/**
+ * Display the login modal when a request returns a 401 response.
+ */
+function handleUnauthorized() {
+  if (!window.$ || !window.loris) {
+    return;
+  }
+
+  if (!$('#login-modal').length) {
+    return;
+  }
+
+  if ($('#login-modal').hasClass('in')) {
+    $('#login-modal-error').show();
+    return;
+  }
+
+  $('#login-modal').modal('show');
+  $('#modal-login')
+    .off('click.lorisFetch')
+    .on('click.lorisFetch', function(e) {
+      e.preventDefault();
+      let data = {
+        username: $('#modal-username').val(),
+        password: $('#modal-password').val(),
+        login: 'Login',
+      };
+
+      window.lorisFetch(window.loris.BaseURL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+        },
+        body: new URLSearchParams(data),
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('request_failed');
+          }
+          $('#login-modal-error').hide();
+          $('#login-modal').modal('hide');
+        })
+        .catch(() => {
+          $('#login-modal-error').show();
+        });
+    });
+}
+
+if (!window.lorisFetch) {
+  window.lorisFetch = function(input, init) {
+    const options = Object.assign(
+      {
+        credentials: 'same-origin',
+      },
+      init || {}
+    );
+    return fetch(input, options).then((response) => {
+      if (response.status === 401) {
+        handleUnauthorized();
+      }
+      return response;
+    });
+  };
+}
+
 $(document).ready(function() {
   $('#menu-toggle').click(function(e) {
     e.preventDefault();
@@ -8,30 +73,3 @@ $(document).ready(function() {
   $('.dynamictable').DynamicTable();
   $('.fileUpload').FileUpload();
 });
-
-$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
-  if (jqxhr.status === 401) {
-    if ($('#login-modal').hasClass('in')) {
-      $('#login-modal-error').show();
-    } else {
-      $('#login-modal').modal('show');
-      $('#modal-login').click(function(e) {
-        e.preventDefault();
-        let data = {
-          username: $('#modal-username').val(),
-          password: $('#modal-password').val(),
-          login: 'Login',
-        };
-        $.ajax({
-          type: 'post',
-          url: loris.BaseURL,
-          data: data,
-          success: function() {
-            $('#login-modal-error').hide();
-            $('#login-modal').modal('hide');
-          },
-        });
-      });
-    }
-  }
-});

jslib/lorisFetch.js

@@ -0,0 +1,81 @@
+/**
+ * Display the login modal when a request returns a 401 response.
+ */
+function handleUnauthorized() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  if (!window.$ || !window.loris) {
+    return;
+  }
+
+  const $ = window.$;
+  if (!$('#login-modal').length) {
+    return;
+  }
+
+  if ($('#login-modal').hasClass('in')) {
+    $('#login-modal-error').show();
+    return;
+  }
+
+  $('#login-modal').modal('show');
+  $('#modal-login')
+    .off('click.lorisFetch')
+    .on('click.lorisFetch', function(e) {
+      e.preventDefault();
+      let data = {
+        username: $('#modal-username').val(),
+        password: $('#modal-password').val(),
+        login: 'Login',
+      };
+
+      fetch(window.loris.BaseURL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+        },
+        body: new URLSearchParams(data),
+        credentials: 'same-origin',
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('request_failed');
+          }
+          $('#login-modal-error').hide();
+          $('#login-modal').modal('hide');
+        })
+        .catch(() => {
+          $('#login-modal-error').show();
+        });
+    });
+}
+
+/**
+ * Wrapper around fetch that keeps credentials and handles 401s.
+ *
+ * @param {*} input
+ * @param {object=} init
+ * @return {Promise<Response>}
+ */
+function lorisFetch(input, init) {
+  const options = Object.assign(
+    {
+      credentials: 'same-origin',
+    },
+    init || {}
+  );
+
+  return fetch(input, options).then((response) => {
+    if (response.status === 401) {
+      handleUnauthorized();
+    }
+    return response;
+  });
+}
+
+if (typeof window !== 'undefined') {
+  window.lorisFetch = lorisFetch;
+}
+
+export default lorisFetch;

modules/dqt/jsx/DQTClient.js

@@ -0,0 +1,94 @@
+import {Http} from 'jslib';
+
+/**
+ * DQT JSON client.
+ */
+class DQTClient extends Http.Client {
+  /**
+   * @constructor
+   */
+  constructor() {
+    super('/dqt');
+  }
+
+  /**
+   * Get DQT setup payload.
+   *
+   * @return {Promise<any>}
+   */
+  getSetup() {
+    const query = new Http.Query().addParam({field: 'format', value: 'json'});
+    return this.setSubEndpoint('dqt_setup/').get(query);
+  }
+
+  /**
+   * Get DQT sessions payload.
+   *
+   * @return {Promise<any>}
+   */
+  getSessions() {
+    const query = new Http.Query().addParam({field: 'format', value: 'json'});
+    return this.setSubEndpoint('sessions/').get(query);
+  }
+
+  /**
+   * Get a saved query document by id.
+   *
+   * @param {string} docID
+   * @return {Promise<any>}
+   */
+  getDoc(docID) {
+    const query = new Http.Query()
+      .addParam({field: 'Module', value: 'dqt'})
+      .addParam({field: 'script', value: 'GetDoc.php'})
+      .addParam({field: 'DocID', value: docID});
+    return this.setSubEndpoint('../AjaxHelper.php').get(query);
+  }
+
+  /**
+   * Get data dictionary for an instrument category.
+   *
+   * @param {string} category
+   * @return {Promise<any>}
+   */
+  getDataDictionaryByCategory(category) {
+    const query = new Http.Query()
+      .addParam({field: 'Module', value: 'dqt'})
+      .addParam({field: 'script', value: 'datadictionary.php'})
+      .addParam({field: 'category', value: category});
+    return this.setSubEndpoint('../AjaxHelper.php').get(query);
+  }
+
+  /**
+   * Get query matches for a condition operator script.
+   *
+   * @param {string} script
+   * @param {string} category
+   * @param {string} field
+   * @param {string} value
+   * @return {Promise<any>}
+   */
+  getMatches(script, category, field, value) {
+    const query = new Http.Query()
+      .addParam({field: 'Module', value: 'dqt'})
+      .addParam({field: 'script', value: script})
+      .addParam({field: 'category', value: category})
+      .addParam({field: 'field', value: field})
+      .addParam({field: 'value', value: value});
+    return this.setSubEndpoint('../AjaxHelper.php').get(query);
+  }
+
+  /**
+   * Get datadictionary entries by key list.
+   *
+   * @param {string[]} keys
+   * @return {Promise<any>}
+   */
+  getDataDictionaryByKeys(keys) {
+    const query = new Http.Query()
+      .addParam({field: 'keys', value: JSON.stringify(keys)});
+    return this.setSubEndpoint('ajax/datadictionary.php').get(query);
+  }
+}
+
+export default DQTClient;