@fleetbase/ember-core 0.0.1

package/addon/services/filters.js

@@ -0,0 +1,183 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import { isBlank } from '@ember/utils';
+import { computed, action, set, get } from '@ember/object';
+import { getOwner } from '@ember/application';
+import { format } from 'date-fns';
+
+export default class FiltersService extends Service {
+    @service router;
+    @service urlSearchParams;
+    @tracked pendingQueryParams = {};
+    @tracked managedQueryParams = ['limit', 'offset', 'sort', 'query', 'page', 'layout', 'view'];
+
+    @computed('managedQueryParams', 'pendingQueryParams') get activeFilters() {
+        const queryParams = this.getQueryParams();
+        const activeQueryParams = [];
+
+        for (let queryParam in queryParams) {
+            const value = get(queryParams, queryParam);
+
+            if (isBlank(value) || this.managedQueryParams.includes(queryParam)) {
+                continue;
+            }
+
+            activeQueryParams.pushObject({ queryParam, label: queryParam, value });
+        }
+
+        return activeQueryParams;
+    }
+
+    @action set(queryParam, value) {
+        if (value instanceof InputEvent) {
+            value = value.target.value;
+        }
+
+        // special case for status
+        if (queryParam === 'status' && value === 'all') {
+            value = null;
+        }
+
+        // serialize query param value
+        value = this.serializeQueryParamValue(queryParam, value);
+
+        if (isBlank(value)) {
+            return this.clear(queryParam);
+        }
+
+        this.pendingQueryParams = {
+            ...this.pendingQueryParams,
+            [queryParam]: value,
+        };
+    }
+
+    @action mutate(queryParam, value, controller) {
+        this.set(queryParam, value);
+        this.apply(controller);
+    }
+
+    @action serializeQueryParamValue(queryParam, value) {
+        if (value instanceof Date) {
+            return format(value, 'yyyy-MM-dd HH:mm');
+        }
+
+        if (isArray(value)) {
+            return value
+                .filter((value) => !isBlank(value))
+                .map((value) => this.serializeQueryParamValue(queryParam, value))
+                .join(',');
+        }
+
+        return value;
+    }
+
+    @action apply(controller) {
+        const currentQueryParams = this.getQueryParams();
+        const updatableQueryParams = { ...currentQueryParams, ...this.pendingQueryParams };
+
+        for (let queryParam in updatableQueryParams) {
+            set(controller, queryParam, get(updatableQueryParams, queryParam));
+        }
+
+        // reset pagination to first page
+        set(controller, 'page', 1);
+
+        this.notifyPropertyChange('activeFilters');
+    }
+
+    @action reset(controller) {
+        this.clear((queryParam) => {
+            set(controller, queryParam, undefined);
+        });
+    }
+
+    @action clear(callback, queryParam = []) {
+        const currentQueryParams = this.getQueryParams();
+        const callbackIsQp = typeof callback === 'string' || isArray(callback);
+        const qpIsCallback = typeof queryParam === 'function' || isBlank(queryParam);
+
+        // handle reversed arguments
+        if (callbackIsQp && qpIsCallback) {
+            return this.clear(queryParam, callback);
+        }
+
+        if (isBlank(queryParam)) {
+            return Object.keys(currentQueryParams).forEach((qp) => this.clear(callback, qp));
+        }
+
+        if (isArray(queryParam)) {
+            return queryParam.forEach((qp) => this.clear(callback, qp));
+        }
+
+        if (typeof queryParam !== 'string') {
+            return;
+        }
+
+        set(this.pendingQueryParams, queryParam, undefined);
+
+        if (typeof callback == 'function') {
+            callback(queryParam);
+        }
+
+        this.notifyPropertyChange('activeFilters');
+    }
+
+    @action removeFromController(controller, queryParam, newValue) {
+        set(controller, queryParam, newValue);
+
+        this.set(queryParam, newValue);
+        this.notifyPropertyChange('activeFilters');
+    }
+
+    @action lookupCurrentController() {
+        const currentRoute = this.lookupCurrentRoute();
+        const currentController = currentRoute.controller;
+
+        return currentController;
+    }
+
+    @action lookupCurrentRoute() {
+        const owner = getOwner(this); // ApplicationInstance
+        const router = owner.lookup('router:main'); // Router
+        const routerMicrolib = router._routerMicrolib; // PrivateRouter
+        const currentRouteInfos = routerMicrolib.currentRouteInfos; // Array
+        const currentRouteInfo = currentRouteInfos[currentRouteInfos.length - 1]; // ResolvedRouteInfo
+
+        return currentRouteInfo._route;
+    }
+
+    @action getRouteQueryParams() {
+        const currentRoute = this.lookupCurrentRoute();
+        return currentRoute.queryParams;
+    }
+
+    @action getQueryParams() {
+        const currentRoute = this.lookupCurrentRoute();
+        const currentRouteQueryParams = Object.keys(currentRoute.queryParams);
+        const queryParams = {};
+
+        for (let i = 0; i < currentRouteQueryParams.length; i++) {
+            const queryParam = currentRouteQueryParams.objectAt(i);
+            const value = this.urlSearchParams.get(queryParam);
+
+            if (this.managedQueryParams.includes(queryParam)) {
+                continue;
+            }
+
+            if (value) {
+                queryParams[queryParam] = value;
+            }
+        }
+
+        return queryParams;
+    }
+
+    @action resetQueryParams() {
+        if (!isBlank(this.activeFilters)) {
+            this.clear();
+            this.router.transitionTo({ queryParams: {} });
+        }
+    }
+}

package/addon/services/loader.js

@@ -0,0 +1,136 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { later } from '@ember/runloop';
+
+export default class LoaderService extends Service {
+    @tracked routesLoaded = [];
+
+    showOnCondition(target, options = {}, condition = null) {
+        const { loadingMessage, opacity } = options;
+
+        if (typeof condition === 'function') {
+            condition = condition();
+        }
+
+        if (condition) {
+            this.showLoader(target, loadingMessage, opacity);
+        }
+    }
+
+    showOnInitialTransition(transition, target, loadingMessage = 'Loading...', opacity = 0.1) {
+        const route = transition.to.name;
+        const isSameRoute = transition.from ? transition.to.name === transition.from.name : false;
+
+        if (!this.routesLoaded.includes(route) || !isSameRoute) {
+            if (document.querySelectorAll(`.overloader`).length > 0) {
+                return;
+            }
+
+            this.showLoader(target, loadingMessage, opacity);
+
+            transition.finally(() => {
+                this.removeLoader(target);
+            });
+        }
+
+        this.routesLoaded.pushObject(route);
+    }
+
+    /**
+     * Creates an HTML element node for a loading overlay with a message.
+     *
+     * @param {String|HTMLElement} targetSelector
+     * @param {String} loadingMessage
+     * @return {HTMLElement} loader
+     */
+    showLoader(targetSelector, loadingMessage = 'Loading...', opacity = 0.1) {
+        let target = typeof targetSelector === 'string' ? document.querySelector(targetSelector) : targetSelector;
+
+        if (!target) {
+            target = document.body;
+        }
+
+        const isDarkMode = document.body.dataset.theme ? document.body.dataset.theme === 'dark' : true;
+
+        target.style.position = 'relative';
+
+        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">
+            <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>
+            </div>
+
+            <span class="font-semibold text-gray-700 dark:text-gray-100 test-xs md:text-sm">${loadingMessage}</span>
+        </div>`;
+
+        target.appendChild(loader);
+
+        return loader;
+    }
+
+    show(loadingMessage = 'Loading...', opacity = 0.1) {
+        return this.showLoader(document.body, loadingMessage, opacity);
+    }
+
+    /**
+     * Creates an HTML element node for a loading overlay with a message.
+     *
+     * @param {String|HTMLElement} targetSelector
+     * @return {Service} this
+     */
+    removeLoader(targetSelector) {
+        let target = typeof targetSelector === 'string' ? document.querySelector(targetSelector) : targetSelector;
+        const removeStyle = (el, styleProperty) => {
+            if (el.style.removeProperty) {
+                el.style.removeProperty(styleProperty);
+            } else {
+                el.style.removeAttribute(styleProperty);
+            }
+        };
+
+        if (!target) {
+            target = document.body;
+        }
+
+        if (target.classList.contains('overloader')) {
+            target.remove();
+
+            return this;
+        }
+
+        const loader = target.querySelector('.overloader');
+
+        if (!loader) {
+            return;
+        }
+
+        removeStyle(target, 'position');
+        target.removeChild(loader);
+
+        return this;
+    }
+
+    /**
+     * Removes the all loader instances.
+     *
+     * @return {Service} this
+     */
+    remove(delay = 0) {
+        const loaders = document.querySelectorAll(`.overloader`);
+
+        later(
+            this,
+            () => {
+                loaders.forEach((loader) => {
+                    loader.remove();
+                });
+            },
+            delay
+        );
+
+        return this;
+    }
+}

package/addon/services/notifications.js

@@ -0,0 +1,32 @@
+import EmberNotificationsService from 'ember-cli-notifications/services/notifications';
+import { isArray } from '@ember/array';
+
+export default class NotificationsService extends EmberNotificationsService {
+    /**
+     * Handles errors from the server
+     *
+     * @param {Error} error
+     * @void
+     */
+    serverError(error, fallbackMessage = 'Oops! Something went wrong with your request.', options) {
+        if (isArray(error.errors)) {
+            const errorMessage = error.errors.firstObject;
+
+            return this.error(errorMessage ?? fallbackMessage, options);
+        }
+
+        if (error instanceof Error) {
+            return this.error(error.message ?? fallbackMessage, options);
+        }
+
+        return this.error(error ?? fallbackMessage, options);
+    }
+
+    invoke(type, message, ...params) {
+        if (typeof message === 'function') {
+            this[type](message(...params));
+        } else {
+            this[type](message);
+        }
+    }
+}

package/addon/services/session.js

@@ -0,0 +1,221 @@
+import SimpleAuthSessionService from 'ember-simple-auth/services/session';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { later } from '@ember/runloop';
+
+export default class SessionService extends SimpleAuthSessionService {
+    /**
+     * Inject the router service
+     *
+     * @var {Service}
+     */
+    @service router;
+
+    /**
+     * Inject the current user service
+     *
+     * @var {Service}
+     */
+    @service currentUser;
+
+    /**
+     * Inject the current user service
+     *
+     * @var {Service}
+     */
+    @service fetch;
+
+    /**
+     * Set where to transition to
+     *
+     * @var {String}
+     */
+    @tracked redirectTo = 'console';
+
+    /**
+     * If session is onboarding a user.
+     *
+     * @var {String}
+     */
+    @tracked _isOnboarding = false;
+
+    /**
+     * Set this as onboarding.
+     *
+     * @return {SessionService}
+     */
+    isOnboarding() {
+        this._isOnboarding = true;
+
+        return this;
+    }
+
+    /**
+     * Manually authenticate user
+     */
+    manuallyAuthenticate(authToken) {
+        return this.session._setup('authenticator:fleetbase', { token: authToken }, true);
+    }
+
+    /**
+     * Overwrite the handle authentication method
+     *
+     * @void
+     */
+    async handleAuthentication() {
+        if (this._isOnboarding) {
+            return;
+        }
+
+        const loaderNode = this.showLoader('Starting session...');
+
+        this.isLoaderNodeOpen = true;
+
+        this.router
+            .transitionTo(this.redirectTo)
+            .finally(() => {
+                later(
+                    this,
+                    () => {
+                        // remove node from body
+                        document.body.removeChild(loaderNode);
+                        this.isLoaderNodeOpen = false;
+                    },
+                    600 * 6
+                );
+            })
+            .catch((error) => console.log(error));
+    }
+
+    /**
+     * Loads the current authenticated user
+     *
+     * @void
+     */
+    async loadCurrentUser() {
+        try {
+            const user = await this.currentUser.load();
+
+            if (!user) {
+                return this.invalidateWithLoader(`Session authentication failed...`);
+            }
+
+            return user;
+        } catch (error) {
+            await this.invalidateWithLoader(error.message ?? `Session authentication failed...`);
+        }
+    }
+
+    /**
+     * Loads the current authenticated user
+     *
+     * @param {Transition} transition
+     * @void
+     */
+    promiseCurrentUser(transition = null) {
+        const invalidateWithLoader = this.invalidateWithLoader.bind(this);
+
+        return new Promise((resolve, reject) => {
+            return this.currentUser
+                .promiseUser()
+                .then((user) => {
+                    if (!user) {
+                        if (transition !== null) {
+                            transition.abort();
+                        }
+
+                        reject(invalidateWithLoader(`Session authentication failed...`));
+                    }
+
+                    resolve(user);
+                })
+                .catch((error) => {
+                    if (transition !== null) {
+                        transition.abort();
+                    }
+
+                    reject(invalidateWithLoader(error.message ?? `Session authentication failed...`));
+                });
+        });
+    }
+
+    /**
+     * Creates an HTML element node for a loading overlay with a message.
+     *
+     * @param {String} loadingMessage
+     * @return {HTMLElement} loader
+     */
+    showLoader(loadingMessage) {
+        const loader = document.createElement('div');
+        loader.classList.add('overloader');
+        loader.innerHTML = `<div class="flex items-center justify-center">
+            <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>
+            </div>
+
+            <span class="font-semibold text-gray-700 dark:text-gray-100 test-sm">${loadingMessage}</span>
+        </div>`;
+        document.body.appendChild(loader);
+
+        return loader;
+    }
+
+    /**
+     * Invalidates the current session while displaying a loading message on the page.
+     *
+     * @param {String} loadingMessage
+     * @return {Promise}
+     */
+    invalidateWithLoader(loadingMessage = 'Ending session...') {
+        // if loader node is open already just invalidate
+        if (this.isLoaderNodeOpen === true) {
+            return this.session.invalidate();
+        }
+
+        const loaderNode = this.showLoader(loadingMessage);
+
+        this.isLoaderNodeOpen = false;
+
+        return this.session.invalidate().then(() => {
+            later(
+                this,
+                () => {
+                    document.body.removeChild(loaderNode);
+                    this.isLoaderNodeOpen = false;
+                },
+                600
+            );
+        });
+    }
+
+    /**
+     * Set the redirect route after authentication
+     *
+     * @void
+     */
+    setRedirect(whereTo = 'console') {
+        this.redirectTo = whereTo;
+    }
+
+    /**
+     * Get session time expiry date in moment
+     *
+     * @return {Date}
+     */
+    getExpiresAtDate() {
+        return new Date(this.data.authenticated.expires_at);
+    }
+
+    /**
+     * Get session time expiry in seconds
+     *
+     * @return {Integer}
+     */
+    getSessionSecondsRemaining() {
+        const date = this.getExpiresAtDate();
+        const now = new Date();
+
+        return Math.round((now - date) / 1000);
+    }
+}