@fleetbase/fleetops-engine 0.1.9 → 0.2.1

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.js

@@ -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',

package/addon/engine.js

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

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,6 +1,6 @@
 {
     "name": "@fleetbase/fleetops-engine",
-    "version": "0.1.9",
+    "version": "0.2.1",
     "description": "Fleetbase Fleet-Ops extension provides a fleet management and last mile delivery operations system module.",
     "fleetbase": {
         "route": "fleet-ops",
@@ -34,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.1.0",
-        "@fleetbase/ember-ui": "^0.1.3",
+        "@fleetbase/ember-core": "^0.1.1",
+        "@fleetbase/ember-ui": "^0.1.7",
         "@fleetbase/fleetops-data": "^0.0.6",
         "@fleetbase/leaflet-routing-machine": "^3.2.16",
         "@fortawesome/ember-fontawesome": "^0.4.1",
@@ -48,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