@fleetbase/ember-core 0.2.9 → 0.2.11

package/addon/services/crud.js

@@ -40,6 +40,11 @@ export default class CrudService extends Service {
      */
     @service store;
 
+    /**
+     * @service currentUser
+     */
+    @service currentUser;
+
     /**
      * Generic deletion modal with options
      *
@@ -198,25 +203,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}`,
                         }
                     )
@@ -237,4 +246,109 @@ export default class CrudService extends Service {
             ...options,
         });
     }
+
+    /**
+     * Prompts a spreadsheet upload for an import process.
+     *
+     * @param {String} modelName
+     * @param {Object} [options={}]
+     * @memberof CrudService
+     */
+    @action import(modelName, options = {}) {
+        // always lowercase modelname
+        modelName = modelName.toLowerCase();
+
+        // set the model uri endpoint
+        const modelEndpoint = dasherize(pluralize(modelName));
+
+        // function to check if queue is empty
+        const checkQueue = () => {
+            const uploadQueue = this.modalsManager.getOption('uploadQueue');
+
+            if (uploadQueue.length) {
+                this.modalsManager.setOption('acceptButtonDisabled', false);
+            } else {
+                this.modalsManager.setOption('acceptButtonDisabled', true);
+            }
+        };
+
+        this.modalsManager.show('modals/import-form', {
+            title: `Import ${pluralize(modelName)} with spreadsheets`,
+            acceptButtonText: 'Start Import',
+            acceptButtonScheme: 'magic',
+            acceptButtonIcon: 'upload',
+            acceptButtonDisabled: true,
+            isProcessing: false,
+            uploadQueue: [],
+            fileQueueColumns: [
+                { name: 'Type', valuePath: 'extension', key: 'type' },
+                { name: 'File Name', valuePath: 'name', key: 'fileName' },
+                { name: 'File Size', valuePath: 'size', key: 'fileSize' },
+                { name: 'Upload Date', valuePath: 'file.lastModifiedDate', key: 'uploadDate' },
+                { name: '', valuePath: '', key: 'delete' },
+            ],
+            acceptedFileTypes: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/csv'],
+            queueFile: (file) => {
+                const uploadQueue = this.modalsManager.getOption('uploadQueue');
+
+                uploadQueue.pushObject(file);
+                checkQueue();
+            },
+
+            removeFile: (file) => {
+                const { queue } = file;
+                const uploadQueue = this.modalsManager.getOption('uploadQueue');
+
+                uploadQueue.removeObject(file);
+                queue.remove(file);
+                checkQueue();
+            },
+            confirm: async (modal) => {
+                const uploadQueue = this.modalsManager.getOption('uploadQueue');
+                const uploadedFiles = [];
+                const uploadTask = (file) => {
+                    return new Promise((resolve) => {
+                        this.fetch.uploadFile.perform(
+                            file,
+                            {
+                                path: `uploads/import-sources/${this.currentUser.companyId}/${modelEndpoint}`,
+                                type: 'import-source',
+                            },
+                            (uploadedFile) => {
+                                uploadedFiles.pushObject(uploadedFile);
+                                resolve(uploadedFile);
+                            }
+                        );
+                    });
+                };
+
+                if (!uploadQueue.length) {
+                    return this.notifications.warning('No spreadsheets uploaded for import to process.');
+                }
+
+                modal.startLoading();
+                modal.setOption('acceptButtonText', 'Uploading...');
+
+                for (let i = 0; i < uploadQueue.length; i++) {
+                    const file = uploadQueue.objectAt(i);
+                    await uploadTask(file);
+                }
+
+                this.modalsManager.setOption('acceptButtonText', 'Processing...');
+                this.modalsManager.setOption('isProcessing', true);
+
+                const files = uploadedFiles.map((file) => file.id);
+
+                try {
+                    const response = await this.fetch.post(`${modelEndpoint}/import`, { files });
+                    if (typeof options.onImportCompleted === 'function') {
+                        options.onImportCompleted(response, files);
+                    }
+                } catch (error) {
+                    return this.notifications.serverError(error);
+                }
+            },
+            ...options,
+        });
+    }
 }

package/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);

package/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>

package/addon/utils/is-empty-object.js

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

package/app/utils/is-empty-object.js

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

package/package.json

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