@fleetbase/fleetops-engine 0.0.1

package/addon/components/order-config.js

@@ -0,0 +1,296 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed, set } from '@ember/object';
+import { equal } from '@ember/object/computed';
+import isModel from '@fleetbase/ember-core/utils/is-model';
+import config from 'ember-get-config';
+
+export default class OrderConfigComponent extends Component {
+    @service modalsManager;
+    @service fetch;
+    @service store;
+    @service notifications;
+    @service crud;
+    @service currentUser;
+    @tracked activeTab = 'details';
+
+    @equal('activeTab', 'details') isDetailsTab;
+    @equal('activeTab', 'activity') isActivityTab;
+    @equal('activeTab', 'entities') isEntitiesTab;
+
+    @tracked selected;
+    @tracked isLoading = true;
+    @tracked isSaving = false;
+    @tracked configurations = [];
+    @tracked uninstallChannels = [];
+
+    @computed('selected', 'configurations.[]') get orderConfig() {
+        return this.configurations.find((config) => config.namespace === this.selected);
+    }
+
+    @computed('selected', 'configurations.[]') get orderConfigIndex() {
+        return this.configurations.findIndex((config) => config.namespace === this.selected);
+    }
+
+    @computed('orderConfig', 'orderConfig.meta.fields.[]') get configFields() {
+        const defaultLogicFields = ['status', 'type', 'internal_id', 'id'];
+        const metaFields = Array.from(this.orderConfig.meta.fields ?? []).map((metaField) => `meta.${metaField.key}`);
+
+        return [...defaultLogicFields, ...metaFields];
+    }
+
+    @action setupComponent() {
+        this.loadConfigurations();
+    }
+
+    @action async loadConfigurations() {
+        this.configurations = await this.fetchConfigurations();
+
+        if (typeof this.args.onReady === 'function') {
+            this.args.onReady(this.configurations);
+        }
+    }
+
+    @action selectConfig(selected) {
+        this.selected = selected;
+
+        if (typeof this.args.onConfigChanged === 'function') {
+            this.args.onConfigChanged(this.orderConfig);
+        }
+    }
+
+    @action fetchConfigurations() {
+        this.isLoading = true;
+
+        return new Promise((resolve, reject) => {
+            this.fetch
+                .get('fleet-ops/order-configs/get-installed')
+                .then((configs) => {
+                    const serialized = [];
+
+                    for (let i = 0; i < configs.length; i++) {
+                        const config = configs.objectAt(i);
+                        const normalizedConfig = this.store.normalize('order-config', config);
+                        const serializedConfig = this.store.push(normalizedConfig);
+
+                        serialized.pushObject(serializedConfig);
+                    }
+
+                    if (typeof this.args.onConfigsLoaded === 'function') {
+                        this.args.onConfigsLoaded(serialized);
+                    }
+
+                    this.isLoading = false;
+                    resolve(serialized);
+                })
+                .catch((error) => {
+                    this.isLoading = false;
+                    reject(error);
+                });
+        });
+    }
+
+    @action createNewOrderConfig() {
+        const tags = [];
+
+        this.modalsManager.show('modals/new-order-config', {
+            title: 'Create a new order configuration',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            name: null,
+            description: null,
+            tags,
+            addTag: (tag) => {
+                tags.pushObject(tag);
+            },
+            removeTag: (index) => {
+                tags.removeAt(index);
+            },
+            confirm: (modal) => {
+                modal.startLoading();
+
+                const { name, description, tags } = modal.getOptions();
+
+                if (!name) {
+                    modal.stopLoading();
+                    return this.notifications.warning('Order configuration requires a name');
+                }
+
+                return this.fetch
+                    .post('fleet-ops/order-configs/new', { name, description, tags })
+                    .then((newConfig) => {
+                        const newConfigExtension = this.fetch.jsonToModel(newConfig, 'extension');
+
+                        this.configurations.pushObject(newConfigExtension);
+                        this.notifications.success('New order config created successfully.');
+                        this.selectConfig(newConfigExtension.namespace);
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+            },
+        });
+    }
+
+    @action saveConfig() {
+        const { orderConfig } = this;
+
+        if (!orderConfig) {
+            this.notifications.warning('No order configuration selected.');
+
+            return;
+        }
+
+        this.isSaving = true;
+        this.fetch
+            .post(`fleet-ops/order-configs/save`, {
+                data: orderConfig,
+            })
+            .then(() => {
+                this.notifications.success(`${orderConfig.name} order configuration saved.`);
+                this.isSaving = false;
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+                this.isSaving = false;
+            });
+    }
+
+    @action cloneConfiguration(extension) {
+        const name = `${extension.name} Clone`;
+        const description = extension.description;
+
+        this.modalsManager.show('modals/clone-config-form', {
+            title: 'Enter name of cloned configuration',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            name,
+            description,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                const { name, description } = modal.getOptions();
+
+                if (!name) {
+                    return this.notifications.warning('No config name entered.');
+                }
+
+                return this.fetch
+                    .post('fleet-ops/order-configs/clone', {
+                        id: extension.id,
+                        installed: extension.installed,
+                        name,
+                        description,
+                    })
+                    .then((newConfig) => {
+                        const clone = this.fetch.jsonToModel(newConfig, 'extension');
+                        this.configurations.pushObject(clone);
+                        this.notifications.success('Order config successfully cloned.');
+                        this.selectConfig(clone.namespace);
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+            },
+        });
+    }
+
+    @action deleteExtension(extension) {
+        const uninstall = isModel(extension) ? extension : this.fetch.jsonToModel(extension, 'extension');
+
+        return this.crud.delete(uninstall, {
+            body: 'Once this order configuration is deleted you will not be able to create orders using it anymore. Are you sure?',
+            acceptButtonIcon: 'trash',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            onFinish: () => {
+                this.configurations.removeObject(extension);
+                this.selected = undefined;
+            },
+        });
+    }
+
+    @action uninstallConfiguration(extension) {
+        const extensionName = extension.display_name ?? extension.name;
+
+        this.listenForUninstallProgress(extension);
+
+        this.modalsManager.show('modals/uninstall-prompt', {
+            title: 'Uninstall Configuration',
+            acceptButtonText: 'Uninstall',
+            acceptButtonScheme: 'danger',
+            extension,
+            extensionName,
+            isUninstalling: false,
+            uninstallProgress: 0,
+            confirm: (modal, done) => {
+                modal.startLoading();
+                modal.setOption('isUninstalling', true);
+
+                extension
+                    .uninstall()
+                    .then(() => {
+                        this.closeUninstallChannel();
+                        this.notifications.success(`Extension '${extensionName}' uninstalled.`);
+                        this.configurations.removeObject(extension);
+                        this.selected = undefined;
+                        done();
+                    })
+                    .catch((error) => {
+                        modal.stopLoading();
+                        modal.setOption('isInstalling', false);
+                        this.notifications.serverError(error);
+                    });
+            },
+            decline: (modal) => {
+                this.closeUninstallChannel();
+                modal.done();
+            },
+        });
+    }
+
+    async listenForUninstallProgress(extension) {
+        // get channel identifier
+        const channelId = `${extension.id}:${this.currentUser.id}`;
+
+        // setup socket
+        const socket = socketClusterClient.create(config.socket);
+
+        // get channel
+        const channel = socket.subscribe(channelId);
+        this.uninstallChannels = channel;
+
+        // listen to channel for events
+        await channel.listener('subscribe').once();
+
+        // get incoming data and console out
+        for await (let data of channel) {
+            if (data.progress) {
+                this.modalsManager.setOption('uninstallProgress', data.progress);
+            }
+        }
+    }
+
+    closeUninstallChannel() {
+        if (this.uninstallChannels) {
+            this.uninstallChannels.close();
+        }
+    }
+
+    @action setMetaFields(fields = []) {
+        set(this.orderConfig, 'meta.fields', fields);
+    }
+
+    @action setFlow(flow = {}) {
+        set(this.orderConfig, 'meta.flow', flow);
+    }
+
+    @action setEntities(entities = {}) {
+        set(this.orderConfig, 'meta.entities', entities);
+    }
+}

package/addon/components/order-list-overlay/driver-panel-title.hbs

@@ -0,0 +1,6 @@
+<div class="flex flex-row items-center">
+    <img src={{@context.vehicle_avatar}} alt={{@context.name}} class="w-5 h-5 mr-1.5" />
+    <div>
+        <div class="text-sm">{{@context.name}}</div>
+    </div>
+</div>

package/addon/components/order-list-overlay/order.hbs

@@ -0,0 +1,22 @@
+<div class="{{@wrapperClass}}">
+    {{log @order}}
+    <a href="javascript:;" class="order-listings-row flex flex-col {{if @isSelected 'selected'}}" {{on "click" (fn @onClick @order)}} {{on "dblclick" (fn @onDoubleClick @order)}} ...attributes>
+        <div class="flex flex-row items-center">
+            <div class="mr-4 text-gray-600 {{if @isSelected 'text-blue-900'}}">
+                {{@index}}
+            </div>
+            <div>
+                <FaIcon @icon="map-marker" class="mr-3" />
+            </div>
+            <div class="truncate text-sm">
+                <div class="flex flex-row items-center justify-between mb-1.5 order-listing-row-header">
+                    <div class="truncate text-gray-900 dark:text-white font-semibold">{{@order.public_id}}</div>
+                    <Badge @status={{@order.status}} />
+                </div>
+                <div class="whitespace-pre-wrap mb-1">{{@order.payload.nextStop.address}}</div>
+                <div class="truncate">{{n-a @order.customer.name "No Customer"}}</div>
+            </div>
+        </div>
+    </a>
+    {{yield @isSelected}}
+</div>

package/addon/components/order-list-overlay/order.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class OrderListOverlayOrderComponent extends Component {}

package/addon/components/order-list-overlay.hbs

@@ -0,0 +1,120 @@
+<Overlay class="orders-panel" @position="right" @noBackdrop={{@noBackdrop}} @fullHeight={{@fullHeight}} @outView={{@outView}} @width={{@width}}>
+    <Overlay::Header @hideLeftSection={{true}} @onPressCancel={{@onPressCancel}} @actionsWrapperClass="h-full" @cancelButtonHeight="1.5rem" class="pl-0i" {{set-height "2.75rem"}}>
+        <div class="h-full flex-1 pl-11 relative">
+            <div class="absolute h-full left-0 top-0 bottom-0 pl-4 flex items-center justify-center">
+                <FaIcon @icon="search" />
+            </div>
+            <Input @value={{this.query}} @type="text" placeholder="Search orders..." class="w-full p-0 m-0 h-full bg-transparent order-list-overlay-search" />
+        </div>
+        {{#if this.selectedOrders.length}}
+            <BasicDropdown class="mr-2" @renderInPlace={{true}} as |dd|>
+                <dd.Trigger>
+                    <div role="button" class="next-org-button-trigger has-selections {{if dd.isOpen 'is-open'}}">
+                        <FaIcon @icon="ellipsis-h" @prefix="fas" class="text-gray-800 dark:text-white" />
+                    </div>
+                </dd.Trigger>
+                <dd.Content>
+                    <div class="next-dd-menu">
+                        <div class="px-1">
+                            <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1">
+                                Selected {{pluralize this.selectedOrders.length "Order"}}
+                            </div>
+                        </div>
+                        <div class="next-dd-menu-seperator"></div>
+                        <div class="px-1">
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressAssignOrders")}}>Assign to driver...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCancelOrders" this.selectedOrders)}}>Cancel orders...</a>
+                            <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownAction dd "onPressDeleteOrders" this.selectedOrders)}}>Delete orders...</a>
+                        </div>
+                    </div>
+                </dd.Content>
+            </BasicDropdown>
+        {{/if}}
+        <BasicDropdown @renderInPlace={{true}} as |dd|>
+            <dd.Trigger>
+                <div role="button" class="next-org-button-trigger {{if dd.isOpen 'is-open'}}">
+                    <FaIcon @icon="ellipsis-h" @prefix="fas" class="text-gray-900 dark:text-gray-500" />
+                </div>
+            </dd.Trigger>
+            <dd.Content>
+                <div class="next-dd-menu">
+                    <div class="px-1">
+                        <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1">
+                            Actions
+                        </div>
+                    </div>
+                    <div class="next-dd-menu-seperator"></div>
+                    <div class="px-1">
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCreateOrder")}}>Create new order...</a>
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCreateFleet")}}>Create new fleet...</a>
+                    </div>
+                </div>
+            </dd.Content>
+        </BasicDropdown>
+    </Overlay::Header>
+
+    <Overlay::Body>
+        {{#if this.isLoading}}
+            <div class="flex items-center p-4">
+                <Spinner class="mr-2" />
+                <span>Loading...</span>
+            </div>
+        {{/if}}
+
+        <div class="space-y-4 orders-panel-fleets">
+            <div class="next-content-panel-wrapper mb-2">
+                <ContentPanel @title="Active orders" @subtitle={{pluralize this.activeOrders.length "Order"}} @open={{this.activeOrders.length}} @pad={{true}} @panelSubtitleInlineClass="text-xs" @panelBodyClass="order-listings bg-white dark:bg-gray-800">
+                    {{#each this.activeOrders as |order index|}}
+                        <OrderListOverlay::Order @order={{order}} @index={{add index 1}} @isSelected={{includes order this.selectedOrders}} @onClick={{this.selectOrder}} @onDoubleClick={{fn this.onAction "onPressViewOrder"}} as |isSelected|>
+                            {{#if isSelected}}
+                                <div class="order-listings-row selected px-4 py-2">
+                                    <div class="flex flex-row items-center space-x-2">
+                                        {{!-- <Button @type="default" @icon="map" @text="Map" @size="xs" class="btn-transparent-border" /> --}}
+                                        <Button @type="default" @icon="file-invoice" @text="Details" @size="xs" class="btn-transparent-border" @onClick={{fn this.onAction "onPressViewOrder" order}} />
+                                    </div>
+                                </div>
+                            {{/if}}
+                        </OrderListOverlay::Order>
+                    {{/each}}
+                </ContentPanel>
+                <ContentPanel @title="Unassigned orders" @subtitle={{pluralize this.unassignedOrders.length "Order"}} @open={{this.unassignedOrders.length}} @pad={{true}} @panelSubtitleInlineClass="text-xs" @panelBodyClass="order-listings bg-white dark:bg-gray-800">
+                    {{#each this.unassignedOrders as |order index|}}
+                        <OrderListOverlay::Order @order={{order}} @index={{add index 1}} @isSelected={{includes order this.selectedOrders}} @onClick={{this.selectOrder}} @onDoubleClick={{fn this.onAction "onPressViewOrder"}} as |isSelected|>
+                            {{#if isSelected}}
+                                <div class="order-listings-row selected px-4 py-2">
+                                    <div class="flex flex-row items-center space-x-2">
+                                        {{!-- <Button @type="default" @icon="map" @text="Map" @size="xs" class="btn-transparent-border" /> --}}
+                                        <Button @type="default" @icon="file-invoice" @text="Details" @size="xs" class="btn-transparent-border" @onClick={{fn this.onAction "onPressViewOrder" order}} />
+                                    </div>
+                                </div>
+                            {{/if}}
+                        </OrderListOverlay::Order>
+                    {{/each}}
+                </ContentPanel>
+            </div>
+        </div>
+
+        <div class="space-y-4 orders-panel-fleets">
+            {{#each this.fleets as |fleet|}}
+                <ContentPanel @title={{fleet.name}} @titleIcon="users" @titleIconWrapperClass="flex-inline mr-3" @subtitle={{concat fleet.drivers_online_count " of " fleet.drivers_count " Online"}} @open={{fleet.drivers.length}} @actionButtons={{array (hash type="default" icon="cog" size="xs" onClick=(fn this.onAction "onPressManageFleet" fleet))}} @panelSubtitleInlineClass="dark:text-gray-100 text-xs" @panelHeaderClass="flex" @panelBodyClass="bg-white dark:bg-gray-800">
+                    {{#each fleet.drivers as |driver|}}
+                        <ContentPanel @titleComponent="order-list-overlay/driver-panel-title" @titleComponentContext={{driver}} @open={{true}} @panelBodyClass="order-listings bg-white dark:bg-gray-800" @panelHeaderClass="next-orders-driver-header" @containerClass="mt-0i">
+                            {{#each driver.activeJobs as |order index|}}
+                                <OrderListOverlay::Order @order={{order}} @index={{add index 1}} @isSelected={{includes order this.selectedOrders}} @onClick={{this.selectOrder}} @onDoubleClick={{fn this.onAction "onPressViewOrder"}} as |isSelected|>
+                                    {{#if isSelected}}
+                                        <div class="order-listings-row selected px-4 py-2">
+                                            <div class="flex flex-row items-center space-x-2">
+                                                {{!-- <Button @type="default" @icon="map" @text="Map" @size="xs" class="btn-transparent-border" /> --}}
+                                                <Button @type="default" @icon="file-invoice" @text="Details" @size="xs" class="btn-transparent-border" @onClick={{fn this.onAction "onPressViewOrder" order}} />
+                                            </div>
+                                        </div>
+                                    {{/if}}
+                                </OrderListOverlay::Order>
+                            {{/each}}
+                        </ContentPanel>
+                    {{/each}}
+                </ContentPanel>
+            {{/each}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/order-list-overlay.js

@@ -0,0 +1,227 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { all } from 'rsvp';
+
+export default class OrderListOverlayComponent extends Component {
+    /**
+     * Inject the `store` service
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @service store;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @service fetch;
+
+    /**
+     * Inject the `appCache` service
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @service appCache;
+
+    /**
+     * Inject the `router` service
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @service router;
+
+    /**
+     * Inject the `hostRouter` service
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @service hostRouter;
+
+    /**
+     * The loading state of the orders overlay
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @tracked isLoading = false;
+
+    /**
+     * The loaded fleet records.
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @tracked fleets = [];
+
+    /**
+     * The loaded active order records.
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @tracked activeOrders = [];
+
+    /**
+     * The loaded unassigned order records.
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @tracked unassignedOrders = [];
+
+    /**
+     * The user selected order records.
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @tracked selectedOrders = [];
+
+    /**
+     * Search filter variable
+     *
+     * @memberof OrderListOverlayComponent
+     */
+    @tracked query = null;
+
+    /**
+     * Creates an instance of OrderListOverlayComponent.
+     * @memberof OrderListOverlayComponent
+     */
+    constructor() {
+        super(...arguments);
+
+        all([this.fetchFleets(), this.fetchUnassignedOrders(), this.fetchActiveOrders()]);
+    }
+
+    /**
+     * Toggles an order selection.
+     *
+     * @param {OrderModel} order
+     * @memberof OrderListOverlayComponent
+     */
+    @action selectOrder(order) {
+        if (this.selectedOrders.includes(order)) {
+            this.selectedOrders.removeObject(order);
+        } else {
+            this.selectedOrders.pushObject(order);
+        }
+    }
+
+    /**
+     * Transitions to view the order.
+     *
+     * @param {OrderModel} order
+     * @return {Promise}
+     * @memberof OrderListOverlayComponent
+     */
+    @action viewOrder(order) {
+        const router = this.router ?? this.hostRouter;
+
+        return router.transitionTo('console.fleet-ops.operations.orders.index.view', order);
+    }
+
+    /**
+     * Triggers a component action.
+     *
+     * @param {String} actionName
+     * @param {...} params
+     * @memberof OrderListOverlayComponent
+     */
+    @action onAction(actionName, ...params) {
+        params.pushObject(this);
+
+        if (typeof this[actionName] === 'function') {
+            this[actionName](...params);
+        }
+
+        if (typeof this.args[actionName] === 'function') {
+            this.args[actionName](...params);
+        }
+    }
+
+    /**
+     * Triggers an action from the dropdown menu
+     *
+     * @param {DropdownActions} dd
+     * @param {String} actionName
+     * @param {...} params
+     * @memberof OrderListOverlayComponent
+     */
+    @action onDropdownAction(dd, actionName, ...params) {
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        this.onAction(actionName, ...params);
+    }
+
+    /**
+     * Loads fleets records.
+     *
+     * @return {Promise}
+     * @memberof OrderListOverlayComponent
+     */
+    @action fetchFleets() {
+        this.isLoading = true;
+
+        // if (this.appCache.has('fleets')) {
+        //     this.fleets = this.appCache.getEmberData('fleets', 'fleet');
+        // }
+
+        return this.store
+            .query('fleet', { with: ['serviceArea', 'drivers.jobs', 'drivers.currentJob'], without: ['drivers.fleets'] })
+            .then((fleets) => {
+                this.fleets = fleets;
+                this.appCache.setEmberData('fleets', fleets);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Loads unassinged orders records.
+     *
+     * @return {Promise}
+     * @memberof OrderListOverlayComponent
+     */
+    @action fetchUnassignedOrders() {
+        this.isLoading = true;
+
+        return this.store
+            .query('order', { unassigned: 1 })
+            .then((unassignedOrders) => {
+                this.unassignedOrders = unassignedOrders;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Loads active order records.
+     *
+     * @return {Promise}
+     * @memberof OrderListOverlayComponent
+     */
+    @action fetchActiveOrders() {
+        this.isLoading = true;
+
+        return this.fetch
+            .get(
+                'fleet-ops/live/orders',
+                {},
+                {
+                    normalizeToEmberData: true,
+                    normalizeModelType: 'order',
+                    expirationInterval: 5,
+                    expirationIntervalUnit: 'minute',
+                }
+            )
+            .then((orders) => {
+                this.activeOrders = orders;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}