dev-v0.2.10

addon/services/crud.js

@@ -198,25 +198,29 @@ export default class CrudService extends Service {
 
         // set the model uri endpoint
         const modelEndpoint = dasherize(pluralize(modelName));
+        const exportParams = options.params ?? {};
 
         this.modalsManager.show('modals/export-form', {
             title: `Export ${pluralize(modelName)}`,
             acceptButtonText: 'Download',
             modalClass: 'modal-sm',
+            format: 'xlsx',
             formatOptions: ['csv', 'xlsx', 'xls', 'html', 'pdf'],
             setFormat: ({ target }) => {
                 this.modalsManager.setOption('format', target.value || null);
             },
             confirm: (modal, done) => {
-                const format = modal.getOption('format') || 'xlsx';
+                const format = modal.getOption('format') ?? 'xlsx';
                 modal.startLoading();
                 return this.fetch
                     .download(
                         `${modelEndpoint}/export`,
                         {
                             format,
+                            ...exportParams,
                         },
                         {
+                            method: 'POST',
                             fileName: `${modelEndpoint}-${formatDate(new Date(), 'yyyy-MM-dd-HH:mm')}.${format}`,
                         }
                     )

addon/services/fetch.js

@@ -15,6 +15,7 @@ import corslite from '../utils/corslite';
 import getMimeType from '../utils/get-mime-type';
 import download from '../utils/download';
 import getUserOptions from '../utils/get-user-options';
+import isEmptyObject from '../utils/is-empty-object';
 import fetch from 'fetch';
 
 if (isBlank(config.API.host)) {
@@ -339,7 +340,7 @@ export default class FetchService extends Service {
             return this.cachedGet(...arguments);
         }
 
-        const urlParams = !isBlank(query) ? new URLSearchParams(query).toString() : '';
+        const urlParams = !isEmptyObject(query) ? new URLSearchParams(query).toString() : '';
 
         return this.request(`${path}${urlParams ? '?' + urlParams : ''}`, 'GET', {}, options);
     }
@@ -506,7 +507,7 @@ export default class FetchService extends Service {
         let version = options?.version ?? 'v1';
         let host = options?.host ?? `https://${options?.subdomain ?? 'routing'}.fleetbase.io`;
         let route = coordinates.map((coords) => coords.join(',')).join(';');
-        let params = !isBlank(query) ? new URLSearchParams(query).toString() : '';
+        let params = !isEmptyObject(query) ? new URLSearchParams(query).toString() : '';
         let path = `${host}/${service}/${version}/${profile}/${route}`;
         let url = `${path}${params ? '?' + params : ''}`;
 
@@ -598,13 +599,25 @@ export default class FetchService extends Service {
      */
     download(path, query = {}, options = {}) {
         const headers = Object.assign(this.getHeaders(), options.headers ?? {});
+        const method = options.method ?? 'GET';
+        const credentials = options.credentials ?? this.credentials;
+        const baseUrl = `${options.host || this.host}/${options.namespace || this.namespace}`;
+        const isReadOnlyRequest = ['GET', 'HEAD'].includes(method.toUpperCase());
+        const params = isReadOnlyRequest && !isEmptyObject(query) ? `?${new URLSearchParams(query).toString()}` : '';
+        const body = !isReadOnlyRequest ? JSON.stringify(query) : {};
+        const fetchOptions = {
+            method,
+            credentials,
+            headers,
+        };
+
+        // Only supply body to fetch if not GET or HEAD request
+        if (!isReadOnlyRequest) {
+            fetchOptions.body = body;
+        }
 
         return new Promise((resolve, reject) => {
-            return fetch(`${options.host || this.host}/${options.namespace || this.namespace}/${path}?${!isBlank(query) ? new URLSearchParams(query).toString() : ''}`, {
-                method: 'GET',
-                credentials: options.credentials || this.credentials,
-                headers,
-            })
+            return fetch(`${baseUrl}/${path}${params}`, fetchOptions)
                 .then((response) => {
                     options.fileName = this.getFilenameFromResponse(response, options.fileName);
                     options.mimeType = this.getMimeTypeFromResponse(response, options.mimeType);

addon/services/loader.js

@@ -75,9 +75,10 @@ export default class LoaderService extends Service {
         }
 
         const loadingMessage = typeof options.loadingMessage === 'string' ? options.loadingMessage : 'Loading...';
-        const opacity = typeof options.opacity === 'number' ? options.opacity : 0.1;
+        const opacity = typeof options.opacity === 'number' ? options.opacity : 0;
         const isDarkMode = document.body.dataset.theme ? document.body.dataset.theme === 'dark' : true;
         const preserveTargetPosition = options.preserveTargetPosition === true;
+        const loaderContainerClass = options.loaderContainerClass ?? '';
 
         if (!preserveTargetPosition) {
             target.style.position = 'relative';
@@ -86,7 +87,7 @@ export default class LoaderService extends Service {
         let loader = document.createElement('div');
         loader.classList.add('overloader');
         loader.style.backgroundColor = isDarkMode ? `rgba(128, 128, 128, ${opacity})` : `rgba(249, 250, 251, ${opacity})`;
-        loader.innerHTML = `<div class="flex items-center justify-center text-center">
+        loader.innerHTML = `<div class="loader-container flex items-center justify-center text-center ${loaderContainerClass}">
             <div>
                 <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false" aria-hidden="true" data-icon="spinner-third" data-prefix="fad" id="ember240" class="svg-inline--fa fa-spinner-third fa-w-16 fa-spin ember-view text-sky-500 fa-spin-800ms mr-3"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M478.71 364.58zm-22 6.11l-27.83-15.9a15.92 15.92 0 0 1-6.94-19.2A184 184 0 1 1 256 72c5.89 0 11.71.29 17.46.83-.74-.07-1.48-.15-2.23-.21-8.49-.69-15.23-7.31-15.23-15.83v-32a16 16 0 0 1 15.34-16C266.24 8.46 261.18 8 256 8 119 8 8 119 8 256s111 248 248 248c98 0 182.42-56.95 222.71-139.42-4.13 7.86-14.23 10.55-22 6.11z"></path><path class="fa-primary" fill="currentColor" d="M271.23 72.62c-8.49-.69-15.23-7.31-15.23-15.83V24.73c0-9.11 7.67-16.78 16.77-16.17C401.92 17.18 504 124.67 504 256a246 246 0 0 1-25 108.24c-4 8.17-14.37 11-22.26 6.45l-27.84-15.9c-7.41-4.23-9.83-13.35-6.2-21.07A182.53 182.53 0 0 0 440 256c0-96.49-74.27-175.63-168.77-183.38z"></path></g>
                 </svg>

addon/utils/is-empty-object.js

@@ -0,0 +1,3 @@
+export default function isEmptyObject(obj) {
+    return Object.keys(obj).length === 0 && obj.constructor === Object;
+}

app/utils/is-empty-object.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-core/utils/is-empty-object';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fleetbase/ember-core",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Provides all the core services, decorators and utilities for building a Fleetbase extension for the Console.",
   "keywords": [
     "fleetbase-core",

tests/unit/utils/is-empty-object-test.js

@@ -0,0 +1,10 @@
+import isEmptyObject from 'dummy/utils/is-empty-object';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | is-empty-object', function () {
+    // TODO: Replace this with your real tests.
+    test('it works', function (assert) {
+        let result = isEmptyObject();
+        assert.ok(result);
+    });
+});