@fleetbase/fleetops-engine 0.1.8 → 0.2.0

package/addon/components/live-map.js

@@ -21,7 +21,7 @@ export default class LiveMapComponent extends Component {
     @service notifications;
     @service serviceAreas;
     @service appCache;
-    @service engineContext;
+    @service universe;
 
     @tracked routes = [];
     @tracked drivers = [];
@@ -80,7 +80,7 @@ export default class LiveMapComponent extends Component {
      */
     @action async setupLiveMap() {
         // trigger that initial coordinates have been set
-        this.engineContext.trigger('livemap.loaded', this);
+        this.universe.trigger('livemap.loaded', this);
 
         if (this.skipSetCoordinates === false) {
             if (this.appCache.has(['map_latitude', 'map_longitude'])) {
@@ -101,7 +101,7 @@ export default class LiveMapComponent extends Component {
         }
 
         // trigger that initial coordinates have been set
-        this.engineContext.trigger('livemap.has_coordinates', { latitude: this.latitude, longitude: this.longitude });
+        this.universe.trigger('livemap.has_coordinates', { latitude: this.latitude, longitude: this.longitude });
 
         this.routes = await this.fetchActiveRoutes();
         this.drivers = await this.fetchActiveDrivers();
@@ -115,7 +115,7 @@ export default class LiveMapComponent extends Component {
         }
 
         // add context event
-        this.engineContext.trigger('livemap.ready', this);
+        this.universe.trigger('livemap.ready', this);
     }
 
     @action setMapReference(event) {

package/addon/components/order-board.hbs

@@ -0,0 +1,19 @@
+<div class="order-board-container">
+    <div class="flex flex-row items-center justify-between px-6 py-3">
+        <div></div>
+        <div>
+            <DropdownButton @icon="layer-group" @text={{concat "Order Type: " this.type.name}} @type="magic" @size="sm" @contentClass="dropdown-menu" @disabled={{not this.orderTypes}} as |dd|>
+                <div class="next-dd-menu mt-2 mx-0">
+                    {{#each this.orderTypes as |type|}}
+                        <div class="px-1">
+                            <a href="#" class=" next-dd-item" {{on "click" (dropdown-fn dd this.selectOrderType type)}}>
+                                {{type.name}}
+                            </a>
+                        </div>
+                    {{/each}}
+                </div>
+            </DropdownButton>
+        </div>
+    </div>
+    <Kanban @columns={{this.columns}} />
+</div>

package/addon/components/order-board.js

@@ -0,0 +1,81 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class OrderBoardComponent extends Component {
+    /**
+     * Inject the `fetch` service
+     *
+     * @var {Service}
+     */
+    @service fetch;
+
+    @tracked type;
+    @tracked orderTypes = [];
+    @tracked columns = [];
+
+    constructor() {
+        super(...arguments);
+        this.loadOrderTypes();
+    }
+
+    /**
+     * Fetches the available order types from the server and updates the
+     * `orderTypes` property with the retrieved data. If the `type` query
+     * parameter is set (bound to `this.type`), it also finds and sets the
+     * corresponding selected order type in `selectedOrderType`.
+     *
+     * @action
+     * @returns {Promise} A promise that resolves when the order types have been loaded
+     */
+    @action loadOrderTypes() {
+        return this.fetch.get('orders/types').then((types) => {
+            this.orderTypes = types;
+
+            if (typeof this.args.onTypesLoaded === 'function') {
+                this.args.onTypesLoaded(types);
+            }
+
+            if (typeof this.args.type === 'string') {
+                const selectedType = types.find(({ key }) => key === this.args.type);
+
+                if (selectedType) {
+                    this.selectOrderType(selectedType);
+                }
+            }
+        });
+    }
+
+    /**
+     * Selectes the order type.
+     *
+     * @action
+     * @param {Object} type
+     * @memberof OrderBoardComponent
+     */
+    @action selectOrderType(type) {
+        this.type = type;
+        this.setColumnsFromOrderType(type);
+
+        if (typeof this.args.onOrderTypeChanged === 'function') {
+            this.args.onOrderTypeChanged(type);
+        }
+    }
+
+    @action setColumnsFromOrderType(type) {
+        const columns = [];
+
+        for (let event in type.meta.flow) {
+            if (!event.includes('|')) {
+                columns.push(event);
+            }
+        }
+
+        columns.push('canceled');
+        columns.push('completed');
+
+        this.columns = columns;
+        return this.columns;
+    }
+}

package/addon/controllers/operations/orders/index/new.js

@@ -31,16 +31,81 @@ export default class OperationsOrdersIndexNewController extends Controller {
     @controller('management.vendors.index') vendorsController;
     @controller('operations.orders.index') ordersController;
 
+    /**
+     * Inject the `modalsManager` service
+     *
+     * @var {Service}
+     */
     @service modalsManager;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @var {Service}
+     */
     @service notifications;
+
+    /**
+     * Inject the `loader` service
+     *
+     * @var {Service}
+     */
     @service loader;
+
+    /**
+     * Inject the `currentUser` service
+     *
+     * @var {Service}
+     */
     @service currentUser;
+
+    /**
+     * Inject the `hostRouter` service
+     *
+     * @var {Service}
+     */
     @service hostRouter;
+
+    /**
+     * Inject the `fileQueue` service
+     *
+     * @var {Service}
+     */
     @service fileQueue;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @var {Service}
+     */
     @service fetch;
+
+    /**
+     * Inject the `store` service
+     *
+     * @var {Service}
+     */
     @service store;
 
+    /**
+     * Inject the `universe` service
+     *
+     * @var {Service}
+     */
+    @service universe;
+
+    /**
+     * Create an OrderModel instance.
+     *
+     * @var {OrderModel}
+     */
     @tracked order = this.store.createRecord('order', { meta: [] });
+
+    /**
+     * Create an PayloadModel instance.
+     *
+     * @var {OrderModel}
+     */
     @tracked payload = this.store.createRecord('payload');
     @tracked driversQuery = {};
     @tracked meta = [];
@@ -213,12 +278,18 @@ export default class OperationsOrdersIndexNewController extends Controller {
             return;
         }
 
+        // send event that fleetops is `creating` an order
+        this.universe.trigger('fleet-ops.order.creating', order);
         this.isCreatingOrder = true;
 
         try {
             return order
                 .save()
                 .then((order) => {
+                    // trigger event that fleet-ops created an order
+                    this.universe.trigger('fleet-ops.order.created', order);
+
+                    // transition to order view
                     return this.transitionToRoute('operations.orders.index.view', order).then(() => {
                         this.notifications.success(`New Order ${order.public_id} Created`);
                         this.loader.removeLoader();

package/addon/controllers/operations/orders/index/view.js

@@ -9,7 +9,6 @@ import { OSRMv1, Control as RoutingControl } from '@fleetbase/leaflet-routing-ma
 import groupBy from '@fleetbase/ember-core/utils/macros/group-by';
 import findClosestWaypoint from '@fleetbase/ember-core/utils/find-closest-waypoint';
 import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
-import extractCoordinates from '@fleetbase/ember-core/utils/extract-coordinates';
 
 export default class OperationsOrdersIndexViewController extends Controller {
     /**
@@ -83,11 +82,11 @@ export default class OperationsOrdersIndexViewController extends Controller {
     @service hostRouter;
 
     /**
-     * Inject the `engineContext` service
+     * Inject the `universe` service
      *
      * @var {Service}
      */
-    @service engineContext;
+    @service universe;
 
     @tracked isLoadingAdditionalData = false;
     @tracked isWaypointsCollapsed;
@@ -226,14 +225,14 @@ export default class OperationsOrdersIndexViewController extends Controller {
         };
 
         // re-display order routes when livemap has coordinates
-        this.engineContext.on('livemap.has_coordinates', this, displayOrderRoute);
+        this.universe.on('livemap.has_coordinates', this, displayOrderRoute);
 
         // when transitioning away kill event listener
         this.hostRouter.on('routeWillChange', () => {
-            const isListening = this.engineContext.has('livemap.has_coordinates');
+            const isListening = this.universe.has('livemap.has_coordinates');
 
             if (isListening) {
-                this.engineContext.off('livemap.has_coordinates', this, displayOrderRoute);
+                this.universe.off('livemap.has_coordinates', this, displayOrderRoute);
             }
         });
 
@@ -241,10 +240,28 @@ export default class OperationsOrdersIndexViewController extends Controller {
         setup();
     }
 
+    @computed('model.payload.{dropoff,pickup,waypoints}') get routeWaypoints() {
+        const { payload } = this.model;
+        let waypoints = [];
+        let coordinates = [];
+
+        waypoints.pushObjects([payload.pickup, ...payload.waypoints.toArray(), payload.dropoff]);
+        waypoints.forEach((place) => {
+            if (place && place.get('longitude') && place.get('latitude')) {
+                if (place.hasInvalidCoordinates) {
+                    return;
+                }
+
+                coordinates.pushObject([place.get('latitude'), place.get('longitude')]);
+            }
+        });
+
+        return coordinates;
+    }
+
     @action displayOrderRoute() {
-        // map coordinates from lng, lat -> lat, lng
         const payload = this.model.payload;
-        const waypoints = payload?.payloadCoordinates?.map((coord) => extractCoordinates(coord));
+        const waypoints = this.routeWaypoints;
         const leafletMap = this.leafletMap;
         const routingHost = getRoutingHost(payload, payload?.waypoints?.toArray());
 

package/addon/controllers/operations/orders/index.js

@@ -74,11 +74,11 @@ export default class OperationsOrdersIndexController extends Controller {
     @service crud;
 
     /**
-     * Inject the `engineContext` service
+     * Inject the `universe` service
      *
      * @var {Service}
      */
-    @service engineContext;
+    @service universe;
 
     /**
      * Queryable parameters for this controller's model
@@ -102,6 +102,8 @@ export default class OperationsOrdersIndexController extends Controller {
         'created_by',
         'updated_by',
         'status',
+        'type',
+        'layout',
     ];
 
     /**
@@ -209,13 +211,74 @@ export default class OperationsOrdersIndexController extends Controller {
      */
     @tracked status;
 
+    /**
+     * The filterable param `type` - Filter by order type
+     *
+     * @var {String}
+     */
+    @tracked type;
+
+    /**
+     * Flag to determine if the search is visible
+     *
+     * @type {Boolean}
+     */
     @tracked isSearchVisible = false;
+
+    /**
+     * Flag to determine if the orders panel is visible
+     *
+     * @type {Boolean}
+     */
     @tracked isOrdersPanelVisible = false;
+
+    /**
+     * Count of active orders
+     *
+     * @type {Number}
+     */
     @tracked activeOrdersCount = 0;
+
+    /**
+     * Reference to the leaflet map object
+     *
+     * @type {Object}
+     */
     @tracked leafletMap;
+
+    /**
+     * Current layout type (e.g., 'map', 'table', 'kanban', 'analytics')
+     *
+     * @type {String}
+     */
     @tracked layout = 'map';
+
+    /**
+     * Flag to determine if the layout is 'map'
+     *
+     * @type {Boolean}
+     */
     @equal('layout', 'map') isMapLayout;
+
+    /**
+     * Flag to determine if the layout is 'table'
+     *
+     * @type {Boolean}
+     */
     @equal('layout', 'table') isTableLayout;
+
+    /**
+     * Flag to determine if the view is 'kanban'
+     *
+     * @type {Boolean}
+     */
+    @equal('layout', 'kanban') isKanbanView;
+
+    /**
+     * Flag to determine if the layout is 'analytics'
+     *
+     * @type {Boolean}
+     */
     @equal('layout', 'analytics') isAnalyticsLayout;
 
     /**
@@ -293,8 +356,10 @@ export default class OperationsOrdersIndexController extends Controller {
             sortable: true,
             filterable: true,
             filterComponent: 'filter/model',
+            filterOptionLabel: 'address',
             filterComponentPlaceholder: 'Select order pickup location',
             filterParam: 'pickup',
+            modelNamePath: 'address',
             model: 'place',
         },
         {
@@ -308,6 +373,7 @@ export default class OperationsOrdersIndexController extends Controller {
             filterComponent: 'filter/model',
             filterComponentPlaceholder: 'Select order dropoff location',
             filterParam: 'dropoff',
+            modelNamePath: 'address',
             model: 'place',
         },
         {
@@ -369,6 +435,12 @@ export default class OperationsOrdersIndexController extends Controller {
             resizable: true,
             hidden: true,
             sortable: true,
+            filterable: true,
+            filterComponent: 'filter/select',
+            filterOptions: this.orderTypes,
+            filterOptionLabel: 'name',
+            filterOptionValue: 'key',
+            filterComponentPlaceholder: 'Filter by order type',
         },
         {
             label: 'Status',
@@ -528,7 +600,7 @@ export default class OperationsOrdersIndexController extends Controller {
             this.isSearchVisible = false;
         }
 
-        this.engineContext.trigger('dashboard.layout.changed', mode);
+        this.universe.trigger('dashboard.layout.changed', mode);
     }
 
     @action setMapReference({ target }) {

package/addon/engine.js

@@ -14,6 +14,10 @@ export default class FleetOpsEngine extends Engine {
         services,
         externalRoutes,
     };
+    setupExtension = function (app, engine, universe) {
+        // register menu item in header
+        universe.registerHeaderMenuItem('Fleet-Ops', 'console.fleet-ops', { icon: 'route', priority: 0 });
+    };
 }
 
 loadInitializers(FleetOpsEngine, modulePrefix);

package/addon/routes/management/drivers/index.js

@@ -3,6 +3,7 @@ import { inject as service } from '@ember/service';
 
 export default class ManagementDriversIndexRoute extends Route {
     @service store;
+    @service intl;
 
     queryParams = {
         page: { refreshModel: true },
@@ -27,6 +28,10 @@ export default class ManagementDriversIndexRoute extends Route {
         'within[where]': { refreshModel: true, replace: true },
     };
 
+    beforeModel() {
+        this.intl.setLocale(['en-us']);
+    }
+
     model(params) {
         return this.store.query('driver', { ...params });
     }

package/addon/routes/operations/orders/index.js

@@ -23,6 +23,8 @@ export default class OperationsOrdersIndexRoute extends Route {
         dropoff: { refreshModel: true },
         after: { refreshModel: true },
         before: { refreshModel: true },
+        type: { refreshModel: true },
+        layout: { refreshModel: false },
     };
 
     @action willTransition(transition) {

package/addon/templates/management/drivers/index.hbs

@@ -1,4 +1,4 @@
-<Layout::Section::Header @title="Drivers" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+<Layout::Section::Header @title={{t "fleet-ops.management.drivers.index.title"}} @searchPlaceholder={{t "fleet-ops.management.drivers.index.fields.search.placeholder"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
     <Button @icon="grip-horizontal" @prefix="fas" @onClick={{fn this.changeLayout "grid"}} @disabled={{this.isGridLayout}} class="mr-2" />
     <Button @icon="table" @prefix="fas" @onClick={{fn this.changeLayout "table"}} @disabled={{this.isTableLayout}} class="mr-2" />
     <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />

package/addon/templates/operations/orders/index.hbs

@@ -4,8 +4,9 @@
         <button type="button" class="{{if this.isMapLayout 'active'}}" {{on "click" (fn this.setLayoutMode "map")}}>Map</button>
         <button type="button" class="{{if this.isTableLayout 'active'}} flex flex-row items-center relative" {{on "click" (fn this.setLayoutMode "table")}}>
             <div class="mr-1.5">Table</div>
-            <Badge class="flex items-center justify-center -mr-4" @spanClass="rounded-full px-1 py-0i" @hideStatusDot={{true}} @status="info">{{@model.meta.total}}</Badge>
+            <Badge class="flex items-center justify-center -mr-4" @spanClass="rounded-full items-center justify-center h-4 w-4" @hideStatusDot={{true}} @status="info">{{@model.meta.total}}</Badge>
         </button>
+        {{!-- <button type="button" class="{{if this.isKanbanView 'active'}}" {{on "click" (fn this.setLayoutMode "kanban")}}>Board</button> --}}
     </MapContainer::ViewSwitch>
 </MapContainer::Topbar>
 
@@ -45,4 +46,16 @@
     </Layout::Section::Body>
 {{/if}}
 
+{{#if this.isKanbanView}}
+    <Layout::Section::Header @title="Orders" @onSearch={{perform this.search}}>
+        <Button @icon="cogs" @text="Config" class="mr-2" @onClick={{fn (transition-to "operations.orders.index.config")}} />
+        <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
+        <Button @type="primary" @icon="plus" @iconPrefix="fas" @text="New" @wrapperClass="mr-2" @onClick={{fn (transition-to "operations.orders.index.new")}} />
+        <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" @onClick={{this.exportOrders}} />
+    </Layout::Section::Header>
+    <Layout::Section::Body>
+        <OrderBoard @type={{this.type}} />
+    </Layout::Section::Body>
+{{/if}}
+
 {{outlet}}

package/app/components/order-board.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/order-board';

package/index.js

@@ -9,6 +9,16 @@ const path = require('path');
 module.exports = buildEngine({
     name,
 
+    postprocessTree(type, tree) {
+        if (type === 'css') {
+            tree = new Funnel(tree, {
+                exclude: ['**/@fleetbase/ember-ui/**/*.css'],
+            });
+        }
+
+        return tree;
+    },
+
     lazyLoading: {
         enabled: true,
     },

package/package.json

@@ -1,13 +1,11 @@
 {
     "name": "@fleetbase/fleetops-engine",
-    "extension": "Fleet Ops",
-    "icon": "route",
-    "version": "0.1.8",
-    "priority": 0,
+    "version": "0.2.0",
+    "description": "Fleetbase Fleet-Ops extension provides a fleet management and last mile delivery operations system module.",
     "fleetbase": {
+        "route": "fleet-ops",
         "dashboard": "int/v1/fleet-ops/dashboard"
     },
-    "description": "Fleetbase Fleet-Ops extension provides a fleet management and last mile delivery operations system module.",
     "keywords": [
         "fleetbase-extension",
         "fleet-management",
@@ -36,11 +34,13 @@
         "start": "ember serve",
         "test": "npm-run-all lint test:*",
         "test:ember": "ember test",
-        "test:ember-compatibility": "ember try:each"
+        "test:ember-compatibility": "ember try:each",
+        "publish:npm": "npm config set registry https://registry.npmjs.org/ && npm publish",
+        "publish:github": "npm config set '@fleetbase:registry' https://npm.pkg.github.com/ && npm publish"
     },
     "dependencies": {
-        "@fleetbase/ember-core": "^0.0.8",
-        "@fleetbase/ember-ui":  "^0.1.2",
+        "@fleetbase/ember-core": "^0.1.1",
+        "@fleetbase/ember-ui": "^0.1.4",
         "@fleetbase/fleetops-data": "^0.0.6",
         "@fleetbase/leaflet-routing-machine": "^3.2.16",
         "@fortawesome/ember-fontawesome": "^0.4.1",
@@ -50,6 +50,7 @@
         "@zestia/ember-dragula": "^12.0.0",
         "broccoli-funnel": "^3.0.8",
         "broccoli-merge-trees": "^4.2.0",
+        "ember-intl": "^6.0.0-beta.6",
         "ember-cli-babel": "^7.26.11",
         "ember-cli-es6-transform": "^1.0.0",
         "ember-cli-htmlbars": "^6.1.0",

package/translations/en-us.yaml

@@ -0,0 +1,9 @@
+fleet-ops:
+  extension-name: Fleet-Ops
+  management:
+    drivers:
+      index:
+        title: Drivers
+        fields:
+          search: 
+            placeholder: Search Drivers

package/addon/services/engine-context.js

@@ -1,17 +0,0 @@
-import Service from '@ember/service';
-import Evented from '@ember/object/evented';
-
-export default class EngineContextService extends Service.extend(Evented) {
-    options = {};
-
-    setOption(key, value) {
-        this.options = {
-            ...this.options,
-            [key]: value,
-        };
-    }
-
-    getOption(key) {
-        return this.options[key];
-    }
-}

package/app/services/engine-context.js

@@ -1 +0,0 @@
-export { default } from '@fleetbase/fleetops-engine/services/engine-context';