fixed and improved service area creation and added ability to add cir…

…cle service areas

addon/components/customer/orders.hbs

@@ -0,0 +1,22 @@
+<div class="portal-content-wrapper">
+    <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
+        <div class="lg:col-span-2 md:col-span-3">
+            <div class="customer-orders-section-header">
+                <div>
+                    <h1>Orders</h1>
+                </div>
+                <div class="customer-orders-list-content">
+                    {{#each this.orders as |order|}}
+                        <a href="javascript:;" class="flex border border-black rounded-md shadow-sm bg-gray-200 px-4 mb-2" {{on "click" (fn this.selectOrder order)}}>{{order.public_id}}</a>
+                    {{/each}}
+                </div>
+            </div>
+        </div>
+        <div class="lg:col-span-10 md:col-span-9">
+            <div class="font-semibold">
+                Render order here using selected order:
+                {{n-a this.selectedOrder.id}}
+            </div>
+        </div>
+    </div>
+</div>

addon/components/customer/orders.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class CustomerOrdersComponent extends Component {
+    @service store;
+    @service notifications;
+    @service currentUser;
+    @tracked orders = [];
+    @tracked selectedOrder;
+
+    constructor() {
+        super(...arguments);
+        this.loadCustomerOrders.perform();
+    }
+
+    @task *loadCustomerOrders() {
+        try {
+            this.orders = yield this.store.query('order', { customer: this.currentUser.id });
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action selectOrder(order) {
+        this.selectedOrder = order;
+    }
+}

addon/components/leaflet-draw-control.js

@@ -21,10 +21,26 @@ export default class LeafletDrawControl extends BaseLayer {
         L.Draw.Event.DRAWVERTEX,
     ];
 
+    alwaysCapturedLeafletEvents = [
+        L.Draw.Event.CREATED,
+        L.Draw.Event.EDITED,
+        L.Draw.Event.EDITSTART,
+        L.Draw.Event.EDITSTOP,
+        L.Draw.Event.EDITRESIZE,
+        L.Draw.Event.EDITMOVE,
+        L.Draw.Event.DELETED,
+        L.Draw.Event.DRAWSTART,
+        L.Draw.Event.DRAWSTOP,
+    ];
+
     leafletOptions = ['draw', 'edit', 'remove', 'poly', 'position'];
 
-    @computed('leafletEvents.[]', 'args') get usedLeafletEvents() {
+    @computed('leafletEvents.[]', 'alwaysCapturedLeafletEvents.[]', 'args') get usedLeafletEvents() {
         return this.leafletEvents.filter((eventName) => {
+            if (this.alwaysCapturedLeafletEvents.includes(eventName)) {
+                return true;
+            }
+
             eventName = camelize(eventName.replace(':', ' '));
             let methodName = `_${eventName}`;
             let actionName = `on${classify(eventName)}`;
@@ -36,7 +52,7 @@ export default class LeafletDrawControl extends BaseLayer {
     @computed('args.{draw,edit,remove,poly,position}') get options() {
         return {
             position: getWithDefault(this.args, 'position', 'topright'),
-            draw: getWithDefault(this.args, 'draw', { marker: false, circlemarker: false, circle: false, polyline: false }),
+            draw: getWithDefault(this.args, 'draw', { marker: false, circlemarker: false, polyline: false }),
             edit: getWithDefault(this.args, 'edit', {}),
             remove: getWithDefault(this.args, 'remove', {}),
             poly: getWithDefault(this.args, 'poly', null),
@@ -56,14 +72,10 @@ export default class LeafletDrawControl extends BaseLayer {
     createLayer() {
         const { onDrawFeatureGroupCreated } = this.args;
         const drawingLayerGroup = new this.L.FeatureGroup();
-        const showDrawingLayer = getWithDefault(this.args, 'showDrawingLayer', false);
-
-        if (showDrawingLayer) {
-            if (typeof onDrawFeatureGroupCreated === 'function') {
-                onDrawFeatureGroupCreated(drawingLayerGroup, this.map);
-            }
 
-            drawingLayerGroup.addTo(this.map);
+        drawingLayerGroup.addTo(this.map);
+        if (typeof onDrawFeatureGroupCreated === 'function') {
+            onDrawFeatureGroupCreated(drawingLayerGroup, this.map);
         }
 
         return drawingLayerGroup;
@@ -74,7 +86,7 @@ export default class LeafletDrawControl extends BaseLayer {
         const showDrawingLayer = getWithDefault(this.args, 'showDrawingLayer', false);
 
         if (this.map && this._layer && this.L.drawLocal) {
-            this.options.edit = Object.assign({ featureGroup: this._layer }, this.options.edit);
+            this.options.edit = Object.assign({ featureGroup: this._layer }, this.L.drawLocal.edit, this.options.edit);
             this.options.draw = Object.assign({}, this.L.drawLocal.draw, this.options.draw);
 
             // create draw control
@@ -88,19 +100,17 @@ export default class LeafletDrawControl extends BaseLayer {
             // Add the draw control to the map
             if (showDrawingLayer) {
                 this.map.addControl(drawControl);
+                // trigger action/event draw control added to map
+                if (typeof onDrawControlAddedToMap === 'function') {
+                    onDrawControlAddedToMap(drawControl, this.map);
+                }
             }
 
-            // trigger action/event draw control added to map
-            if (typeof onDrawControlAddedToMap === 'function') {
-                onDrawControlAddedToMap(drawControl, this.map);
-            }
-
-            // If showDrawingLayer, add new layer to the layerGroup
-            if (showDrawingLayer) {
-                this.map.on(this.L.Draw.Event.CREATED, ({ layer }) => {
-                    this._layer.addLayer(layer);
-                });
-            }
+            // Track every layer created via draw control
+            this.map.on(this.L.Draw.Event.CREATED, ({ layer }) => {
+                this._layer.lastCreatedLayer = layer;
+                this._layer.addLayer(layer);
+            });
         }
     }
 

addon/components/live-map.hbs

@@ -114,7 +114,7 @@
 
             <layers.draw-control
                 @position="topright"
-                @draw={{hash marker=false circlemarker=false circle=false polyline=false}}
+                @draw={{hash marker=false circlemarker=false polyline=false}}
                 @onDrawDrawstop={{fn this.triggerAction "onDrawDrawstop"}}
                 @onDrawDeleted={{fn this.triggerAction "onDrawDeleted"}}
                 @onDrawEdited={{fn this.triggerAction "onDrawEdited"}}

addon/components/live-map.js

@@ -232,6 +232,7 @@ export default class LiveMapComponent extends Component {
                 },
             }),
             this.loadLiveData.perform('places'),
+            this.loadServiceAreas.perform(),
         ]);
     }
 
@@ -244,14 +245,10 @@ export default class LiveMapComponent extends Component {
      * @param {Promise[]} liveDataPromises - An array of promises that fetch live data.
      * @returns {Promise} A promise that resolves when all data-fetching promises have settled.
      */
-    completeSetup(liveDataPromises) {
-        return allSettled(liveDataPromises)
-            .then(() => {
-                this.isDataLoaded = true;
-            })
-            .finally(() => {
-                this.listen();
-            });
+    async completeSetup(liveDataPromises) {
+        await allSettled(liveDataPromises);
+        this.isDataLoaded = true;
+        this.listen();
     }
 
     /**
@@ -273,6 +270,7 @@ export default class LiveMapComponent extends Component {
                 },
             }),
             this.loadLiveData.perform('places'),
+            this.loadServiceAreas.perform(),
         ]);
     }
 
@@ -1066,7 +1064,7 @@ export default class LiveMapComponent extends Component {
     @action hideDrawControls(options = {}) {
         this.hide('drawControls');
 
-        const text = getWithDefault(options, 'text');
+        const text = getWithDefault(options, 'text', true);
         const callback = getWithDefault(options, 'callback');
 
         if (typeof callback === 'function') {
@@ -1177,7 +1175,7 @@ export default class LiveMapComponent extends Component {
         // map except into ids only
         except = except
             .filter(Boolean)
-            .filter((record) => !record?.id)
+            .filter((record) => typeof record !== 'string' && !record?.id)
             .map((record) => record.id);
 
         for (let i = 0; i < this.activeServiceAreas.length; i++) {
@@ -1215,7 +1213,7 @@ export default class LiveMapComponent extends Component {
         // map except into ids only
         except = except
             .filter(Boolean)
-            .filter((record) => !record?.id)
+            .filter((record) => typeof record !== 'string' && !record?.id)
             .map((record) => record.id);
 
         for (let i = 0; i < this.serviceAreaRecords.length; i++) {
@@ -1795,7 +1793,7 @@ export default class LiveMapComponent extends Component {
      * @returns {Promise} A promise that resolves to an array of service area records.
      * @memberof LiveMapComponent
      */
-    @task *loadServiceAreas() {
+    @task *loadServiceAreas(options = {}) {
         if (this.abilities.cannot('fleet-ops list service-area')) {
             return [];
         }
@@ -1804,15 +1802,28 @@ export default class LiveMapComponent extends Component {
             const cachedRecords = this.serviceAreas.getFromCache('serviceAreas', 'service-area');
 
             if (cachedRecords) {
+                this.serviceAreaRecords = cachedRecords;
+                if (typeof options.onLoaded === 'function') {
+                    options.onLoaded(cachedRecords);
+                }
+
                 return cachedRecords;
             }
         }
 
-        const serviceAreaRecords = yield this.store.query('service-area', { with: ['zones'] });
-        if (serviceAreaRecords) {
-            this.appCache.setEmberData('serviceAreas', serviceAreaRecords);
-        }
+        try {
+            this.serviceAreaRecords = yield this.store.query('service-area', { with: ['zones'] });
+            if (this.serviceAreaRecords) {
+                this.appCache.setEmberData('serviceAreas', this.serviceAreaRecords);
+            }
+
+            if (typeof options.onLoaded === 'function') {
+                options.onLoaded(this.serviceAreaRecords);
+            }
 
-        return serviceAreaRecords;
+            return this.serviceAreaRecords;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 }

addon/engine.js

@@ -6,6 +6,7 @@ import services from '@fleetbase/ember-core/exports/services';
 import NavigatorAppConfigComponent from './components/admin/navigator-app';
 import WidgetFleetOpsKeyMetricsComponent from './components/widget/fleet-ops-key-metrics';
 import AdminAvatarManagementComponent from './components/admin/avatar-management';
+import CustomerOrdersComponent from './components/customer/orders';
 
 const { modulePrefix } = config;
 const externalRoutes = ['console', 'extensions'];
@@ -71,6 +72,13 @@ export default class FleetOpsEngine extends Engine {
             'fleet-ops:template:operations:orders:new',
             'fleet-ops:template:operations:orders:new:entities-input',
         ]);
+
+        // Add menu items to customer portal
+        if (universe.didBootEngine('@fleetbase/customer-portal-engine')) {
+            universe.registerMenuItems('customer-portal:sidebar', [
+                universe._createMenuItem('Orders', 'customer-portal.portal.virtual', { icon: 'boxes-packing', component: CustomerOrdersComponent }),
+            ]);
+        }
     };
 }