@fleetbase/fleetops-engine 0.4.2 → 0.4.4

package/addon/components/edit-order-route-panel.hbs

@@ -0,0 +1,182 @@
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @onOpen={{this.onOpen}}
+    @onClose={{this.onClose}}
+    @onToggle={{this.onToggle}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "570px"}}
+>
+    <Overlay::Header @title={{concat "Edit order " this.order.public_id " route"}}>
+        <Button @type="primary" @icon="check" @text="Save" @helpText="Save order route changes" @onClick={{this.onSave}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{t "fleet-ops.common.cancel"}} @onClick={{this.onPressCancel}} />
+    </Overlay::Header>
+
+    <Overlay::Body @increaseInnerBodyHeightBy={{1000}}>
+        <div class="p-4">
+            <div class="flex flex-row justify-between mb-6">
+                <div class="flex">
+                    <Toggle @isToggled={{this.order.payload.isMultiDrop}} @onToggle={{this.toggleMultiDropOrder}} @label={{t "fleet-ops.component.modals.order-route-form.toggle"}} />
+                </div>
+                <div class="flex flex-1 justify-end space-x-2">
+                    {{#if this.order.payload.isMultiDrop}}
+                        {{!-- <Button @type="magic" @icon="magic" @text={{t "fleet-ops.component.modals.order-route-form.optimize"}} @size="sm" @onClick={{fn this.optimizeRoute}} @helpText={{t "fleet-ops.component.modals.order-route-form.optimize-text"}} @disabled={{lt this.order.payload.waypoints.length 3}} @isLoading={{this.isOptimizingRoute}} /> --}}
+                        <Button
+                            @icon="map-marked-alt"
+                            @text={{t "fleet-ops.component.modals.order-route-form.add"}}
+                            @size="sm"
+                            @onClick={{this.addWaypoint}}
+                            @helpText={{t "fleet-ops.component.modals.order-route-form.add-text"}}
+                        />
+                    {{/if}}
+                </div>
+            </div>
+
+            {{#if this.order.payload.isMultiDrop}}
+                <DragSortList class="overflow-visible" @items={{this.order.payload.waypoints}} @dragEndAction={{this.sortWaypoints}} as |waypoint index|>
+                    <div id={{concat "waypoint_" (add index 1)}} class="py-1 mb-3">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center justify-between cursor-move">
+                                <FaIcon @icon="grip-lines" @prefix="fas" class="mr-3 text-gray-100" />
+                                <label class="waypoint-label dark:text-gray-100 text-sm">
+                                    {{waypoint-label (add index 1)}}
+                                </label>
+                            </div>
+
+                            <div class="flex-1 px-4">
+                                <ModelSelect
+                                    @modelName="place"
+                                    @selectedModel={{waypoint}}
+                                    @placeholder={{concat (t "fleet-ops.operations.orders.index.new.select-waypoint-placeholder") " " (add index 1)}}
+                                    @triggerClass="form-select form-input truncate max-w-300px"
+                                    @infiniteScroll={{false}}
+                                    @customSearchEndpoint="places/search"
+                                    @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                                    @renderInPlace={{true}}
+                                    @onChange={{fn this.setWaypointPlace index}}
+                                    as |model|
+                                >
+                                    {{model.address}}
+                                </ModelSelect>
+
+                                {{#unless waypoint.isNew}}
+                                    {{#if waypoint.hasInvalidCoordinates}}
+                                        <div class="leading-5 text-sm text-red-400 mt-2">
+                                            <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                            {{t "fleet-ops.component.modals.order-route-form.invalid"}}
+                                        </div>
+                                    {{/if}}
+                                {{/unless}}
+                            </div>
+
+                            <div class="flex items-center">
+                                <Button class="mr-2" @icon="edit" @size="sm" @onClick={{fn this.editPlace waypoint}} />
+                                <Button @type="danger" @icon="trash" @iconPrefix="fas" @size="sm" @onClick={{fn this.removeWaypoint waypoint}} />
+                            </div>
+                        </div>
+                    </div>
+                </DragSortList>
+            {{else}}
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs dark:text-gray-100">
+                    <div class="input-group">
+                        <div class="flex items-center justify-between">
+                            <label>{{t "fleet-ops.component.modals.order-route-form.pickup"}}</label>
+
+                            {{#if this.order.payload.pickup}}
+                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.pickup)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
+                            {{/if}}
+                        </div>
+
+                        <ModelSelect
+                            @modelName="place"
+                            @selectedModel={{this.order.payload.pickup}}
+                            @placeholder={{t "fleet-ops.component.modals.order-route-form.select-pickup"}}
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @customSearchEndpoint="places/search"
+                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.setPayloadPlace "pickup"}}
+                            as |model|
+                        >
+                            {{model.address}}
+                        </ModelSelect>
+
+                        {{#if this.order.payload.pickup.hasInvalidCoordinates}}
+                            <div class="leading-5 text-sm text-red-400 mt-2">
+                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
+                            </div>
+                        {{/if}}
+                    </div>
+
+                    <div class="input-group">
+                        <div class="flex items-center justify-between">
+                            <label>{{t "fleet-ops.component.modals.order-route-form.dropoff"}}</label>
+
+                            {{#if this.order.payload.dropoff}}
+                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.dropoff)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
+                            {{/if}}
+                        </div>
+
+                        <ModelSelect
+                            @modelName="place"
+                            @selectedModel={{this.order.payload.dropoff}}
+                            @placeholder={{t "fleet-ops.component.modals.order-route-form.select-dropoff"}}
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @customSearchEndpoint="places/search"
+                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.setPayloadPlace "dropoff"}}
+                            as |model|
+                        >
+                            {{model.address}}
+                        </ModelSelect>
+
+                        {{#if this.order.payload.dropoff.hasInvalidCoordinates}}
+                            <div class="leading-5 text-sm text-red-400 mt-2">
+                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
+                            </div>
+                        {{/if}}
+                    </div>
+
+                    <div class="input-group">
+                        <div class="flex items-center justify-between">
+                            <label>{{t "fleet-ops.component.modals.order-route-form.return"}}</label>
+
+                            {{#if this.order.payload.return}}
+                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.return)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
+                            {{/if}}
+                        </div>
+
+                        <ModelSelect
+                            @modelName="place"
+                            @selectedModel={{this.order.payload.return}}
+                            @placeholder={{t "fleet-ops.component.modals.order-route-form.select-return"}}
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @customSearchEndpoint="places/search"
+                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.setPayloadPlace "return"}}
+                            as |model|
+                        >
+                            {{model.address}}
+                        </ModelSelect>
+
+                        {{#if this.order.payload.return.hasInvalidCoordinates}}
+                            <div class="leading-5 text-sm text-red-400 mt-2">
+                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
+                            </div>
+                        {{/if}}
+                    </div>
+                </div>
+            {{/if}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/edit-order-route-panel.js

@@ -0,0 +1,265 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
+import Point from '@fleetbase/fleetops-data/utils/geojson/point';
+import findClosestWaypoint from '@fleetbase/ember-core/utils/find-closest-waypoint';
+
+export default class EditOrderRoutePanelComponent extends Component {
+    /**
+     * Fetch service.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
+    @service hostRouter;
+
+    /**
+     * Service for managing the modals.
+     *
+     * @type {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * Service for internationalization.
+     *
+     * @type {Service}
+     */
+    @service intl;
+
+    /**
+     * Service for notifications
+     *
+     * @type {Service}
+     */
+    @service notifications;
+
+    /**
+     * The orderwhich route is being edited.
+     *
+     * @type {OrderModel}
+     * @tracked
+     */
+    @tracked order;
+
+    /**
+     * Initializes the vehicle panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.order = this.args.order;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles save action for the order route.
+     *
+     * @method
+     * @action
+     */
+    @action onSave() {
+        const isActionOverrided = contextComponentCallback(this, 'onSave', this.order);
+
+        if (!isActionOverrided) {
+            return this.order
+                .save()
+                .then((order) => {
+                    this.notifications.success(this.intl.t('fleet-ops.operations.orders.index.view.update-success', { orderId: order.public_id }));
+                    contextComponentCallback(this, 'onAfterSave', order);
+                })
+                .catch((error) => {
+                    this.notifications.serverError(error);
+                });
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.order);
+    }
+
+    @action async editPlace(place) {
+        await this.modalsManager.done();
+
+        this.contextPanel.focus(place, 'editing', {
+            args: {
+                onClose: () => {
+                    this.editOrderRoute(this.order);
+                },
+            },
+        });
+    }
+
+    @action toggleMultiDropOrder(isMultiDrop) {
+        const { pickup, dropoff } = this.order.payload;
+
+        if (isMultiDrop) {
+            // if pickup move it to multipdrop
+            if (pickup) {
+                this.addWaypointFromExistingPlace(pickup);
+            }
+
+            // if pickup move it to multipdrop
+            if (dropoff) {
+                this.addWaypointFromExistingPlace(dropoff);
+            }
+
+            this.order.payload.setProperties({
+                pickup_uuid: null,
+                dropoff_uuid: null,
+            });
+        } else {
+            const waypoint = this.store.createRecord('waypoint');
+            this.order.payload.waypoints.pushObject(waypoint);
+
+            this.order.payload.setProperties({
+                pickup_uuid: null,
+                dropoff_uuid: null,
+                pickup: null,
+                dropoff: null,
+            });
+        }
+
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+
+    addWaypointFromExistingPlace(place) {
+        const waypoint = this.store.createRecord('waypoint', { place, location: place.location });
+        this.order.payload.waypoints.pushObject(waypoint);
+
+        // fire callback
+        contextComponentCallback(this, 'onWaypointAdded', waypoint);
+    }
+
+    @action removeWaypoint(waypoint) {
+        this.order.payload.waypoints.removeObject(waypoint);
+
+        // fire callback
+        contextComponentCallback(this, 'onWaypointRemoved', waypoint);
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+
+    @action addWaypoint() {
+        const location = new Point(0, 0);
+        const place = this.store.createRecord('place', { location });
+        const waypoint = this.store.createRecord('waypoint', { place, location });
+
+        this.order.payload.waypoints.pushObject(waypoint);
+        // fire callback
+        contextComponentCallback(this, 'onWaypointAdded', waypoint);
+    }
+
+    @action setWaypointPlace(index, place) {
+        if (isArray(this.order.payload.waypoints) && !this.order.payload.waypoints.objectAt(index)) {
+            return;
+        }
+
+        this.order.payload.waypoints.objectAt(index).setProperties({
+            name: place.name,
+            place_uuid: place.id,
+            location: place.location,
+            place,
+        });
+
+        // fire callback waypoint place selected
+        contextComponentCallback(this, 'onWaypointPlaceSelected', place);
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+
+    @action setPayloadPlace(prop, place) {
+        this.order.payload.set(prop, place);
+
+        // fire callback
+        contextComponentCallback(this, 'onPlaceSelected', place);
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+
+    @action async optimizeRoute() {
+        this.isOptimizingRoute = true;
+
+        const coordinates = this.order.payload.payloadCoordinates;
+        const routingHost = getRoutingHost(this.order.payload, this.order.payload.waypoints);
+        let sortedWaypoints = [];
+
+        const response = await this.fetch.routing(coordinates, { source: 'any', destination: 'any', annotations: true }, { host: routingHost }).catch(() => {
+            this.notifications.error(this.intl.t('fleet-ops.operations.orders.index.view.route-error'));
+            this.isOptimizingRoute = false;
+        });
+
+        if (response && response.code === 'Ok') {
+            if (response.waypoints && isArray(response.waypoints)) {
+                const responseWaypoints = response.waypoints.sortBy('waypoint_index');
+
+                for (let i = 0; i < responseWaypoints.length; i++) {
+                    const optimizedWaypoint = responseWaypoints.objectAt(i);
+                    const optimizedWaypointLongitude = optimizedWaypoint.location.firstObject;
+                    const optimizedWaypointLatitude = optimizedWaypoint.location.lastObject;
+                    const waypointModel = findClosestWaypoint(optimizedWaypointLatitude, optimizedWaypointLongitude, this.order.payload.waypoints);
+
+                    sortedWaypoints.pushObject(waypointModel);
+                }
+
+                this.order.payload.waypoints = sortedWaypoints;
+            }
+        } else {
+            this.notifications.error(this.intl.t('fleet-ops.operations.orders.index.view.route-error'));
+        }
+
+        this.isOptimizingRoute = false;
+    }
+
+    @action sortWaypoints({ sourceList, sourceIndex, targetList, targetIndex }) {
+        if (sourceList === targetList && sourceIndex === targetIndex) {
+            return;
+        }
+
+        const item = sourceList.objectAt(sourceIndex);
+
+        sourceList.removeAt(sourceIndex);
+        targetList.insertAt(targetIndex, item);
+
+        contextComponentCallback(this, 'onRouteChanged');
+    }
+}

package/addon/components/fleet-panel.js

@@ -61,12 +61,12 @@ export default class FleetPanelComponent extends Component {
     @tracked tab;
 
     /**
-     * The vehicle being displayed or edited.
+     * The fleet being displayed or edited.
      *
-     * @type {VehicleModel}
+     * @type {FleetModel}
      * @tracked
      */
-    @tracked vehicle;
+    @tracked fleet;
 
     /**
      * Returns the array of tabs available for the panel.

package/addon/components/map-container/toolbar.hbs

@@ -33,14 +33,14 @@
             </div>
             <FaIcon @icon="layer-group" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view-order"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
         <BasicDropdown id="map-toolbar-service-areas-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
             <dd.Trigger class="toolbar-button">
                 <FaIcon @icon="map-marked-alt" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                    <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view"}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
+                    <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view-service-area"}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
                 </Attach::Tooltip>
             </dd.Trigger>
             <dd.Content>

package/addon/components/modals/order-route-form.hbs

@@ -2,7 +2,7 @@
     <div class="modal-body-container">
         <div class="flex flex-row justify-between mb-6">
             <div class="flex">
-                <ShortToggle @isToggled={{@options.order.payload.isMultiDrop}} @onToggle={{@options.toggleMultiDropOrder}} @label={{t "fleet-ops.component.modals.order-route-form.toggle"}} />
+                <Toggle @isToggled={{@options.order.payload.isMultiDrop}} @onToggle={{@options.toggleMultiDropOrder}} @label={{t "fleet-ops.component.modals.order-route-form.toggle"}} />
             </div>
             <div class="flex flex-1 justify-end space-x-2">
                 {{#if @options.order.payload.isMultiDrop}}

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

@@ -161,6 +161,28 @@ export default class OperationsOrdersIndexNewController extends BaseController {
             onClick: this.editMetaData,
         },
     ];
+    @tracked uploadQueue = [];
+    acceptedFileTypes = [
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        'application/msword',
+        'application/pdf',
+        'application/x-pdf',
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+        'video/mp4',
+        'video/quicktime',
+        'video/x-msvideo',
+        'video/x-flv',
+        'video/x-ms-wmv',
+        'audio/mpeg',
+        'video/x-msvideo',
+        'application/zip',
+        'application/x-tar',
+    ];
 
     @not('isServicable') isNotServicable;
     @alias('currentUser.latitude') userLatitude;
@@ -211,27 +233,6 @@ export default class OperationsOrdersIndexNewController extends BaseController {
         this.payloadCoordinates = coordinates;
     }
 
-    // @computed('payload.{dropoff,pickup,waypoints}', 'waypoints.[]')
-    // get payloadCoordinates() {
-    //     let waypoints = [];
-    //     let coordinates = [];
-
-    //     console.log('[this.waypoints]', this.waypoints);
-
-    //     waypoints.pushObjects([this.payload.pickup, ...this.waypoints.map((waypoint) => waypoint.place), this.payload.dropoff]);
-    //     waypoints.forEach((place) => {
-    //         if (place && place.get('longitude') && place.get('latitude')) {
-    //             if (place.hasInvalidCoordinates) {
-    //                 return;
-    //             }
-
-    //             coordinates.pushObject([place.get('longitude'), place.get('latitude')]);
-    //         }
-    //     });
-
-    //     return coordinates;
-    // }
-
     @computed('payloadCoordinates.length', 'waypoints.[]') get isServicable() {
         return this.payloadCoordinates.length >= 2;
     }
@@ -571,7 +572,6 @@ export default class OperationsOrdersIndexNewController extends BaseController {
                 is_route_optimized,
             })
             .then((serviceQuotes) => {
-                console.log('[serviceQuotes]', serviceQuotes);
                 set(this, 'serviceQuotes', isArray(serviceQuotes) ? serviceQuotes : []);
 
                 if (this.serviceQuotes.length && this.isUsingIntegratedVendor) {
@@ -588,27 +588,31 @@ export default class OperationsOrdersIndexNewController extends BaseController {
 
     _getSerializedPayload(payload) {
         const serialized = {
-            pickup: payload.pickup,
-            dropoff: payload.dropoff,
+            pickup: this._seriailizeModel(payload.pickup),
+            dropoff: this._seriailizeModel(payload.dropoff),
+            entitities: this._serializeArray(payload.entities),
+            waypoints: this._serializeArray(payload.waypoint),
         };
 
-        if (isModel(payload.pickup)) {
-            serialized.pickup = payload.pickup.toJSON();
-        }
+        return serialized;
+    }
 
-        if (isModel(payload.dropoff)) {
-            serialized.dropoff = payload.dropoff.toJSON();
-        }
+    _seriailizeModel(model) {
+        if (isModel(model)) {
+            if (typeof model.toJSON === 'function') {
+                return model.toJSON();
+            }
 
-        if (isArray(payload.entities)) {
-            serialized.entities = payload.entities.toArray();
+            if (typeof model.serialize === 'function') {
+                return model.serialize();
+            }
         }
 
-        if (isArray(payload.waypoints)) {
-            serialized.waypoints = payload.waypoints.toArray();
-        }
+        return model;
+    }
 
-        return serialized;
+    _serializeArray(array) {
+        return isArray(array) ? array.map((item) => this._seriailizeModel(item)) : array;
     }
 
     @action scheduleOrder(dateInstance) {
@@ -1448,4 +1452,37 @@ export default class OperationsOrdersIndexNewController extends BaseController {
             }
         }
     }
+
+    @action queueFile(file) {
+        // since we have dropzone and upload button within dropzone validate the file state first
+        // as this method can be called twice from both functions
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
+            return;
+        }
+
+        // Queue and upload immediatley
+        this.uploadQueue.pushObject(file);
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: 'uploads/fleet-ops/order-files',
+                type: 'order_file',
+            },
+            (uploadedFile) => {
+                this.order.files.pushObject(uploadedFile);
+                this.uploadQueue.removeObject(file);
+            },
+            () => {
+                this.uploadQueue.removeObject(file);
+                // remove file from queue
+                if (file.queue && typeof file.queue.remove === 'function') {
+                    file.queue.remove(file);
+                }
+            }
+        );
+    }
+
+    @action removeFile(file) {
+        return file.destroyRecord();
+    }
 }