@fleetbase/fleetops-engine 0.6.44 → 0.6.46

package/addon/components/admin/map-settings.hbs

@@ -0,0 +1,26 @@
+<ContentPanel @title="Configure Map" @open={{true}} @wrapperClass="bordered-classic">
+    <InputGroup @name="Default Map Provider" @helpText="Sets the default map provider for all organizations unless they override it in their own FleetOps map settings.">
+        <Select
+            class="w-full flex-1"
+            @value={{this.mapProvider}}
+            @options={{this.mapProviderOptions}}
+            @optionLabel="label"
+            @optionValue="value"
+            @placeholder="Select default map provider"
+            @onSelect={{this.selectMapProvider}}
+        />
+    </InputGroup>
+    <InputGroup @name="Google Map ID" @value={{this.googleMapsMapId}} @helpText="Required for Google Advanced Markers and cloud-based map styling." />
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button
+        @type="primary"
+        @size="sm"
+        @icon="save"
+        @text="Save Changes"
+        @onClick={{perform this.saveSettings}}
+        @isLoading={{or this.saveSettings.isRunning this.loadSettings.isRunning}}
+        @disabled={{this.saveSettings.isRunning}}
+    />
+</EmberWormhole>

package/addon/components/admin/map-settings.js

@@ -0,0 +1,46 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+import { action } from '@ember/object';
+import MAP_PROVIDER_OPTIONS from '../../utils/map-provider-options';
+
+export default class AdminMapSettingsComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked mapProviderOptions = MAP_PROVIDER_OPTIONS;
+    @tracked mapProvider = 'leaflet';
+    @tracked googleMapsMapId = '';
+
+    constructor() {
+        super(...arguments);
+        this.loadSettings.perform();
+    }
+
+    @task *loadSettings() {
+        try {
+            const settings = yield this.fetch.get('fleet-ops/settings/admin-map');
+            this.mapProvider = settings?.mapProvider ?? 'leaflet';
+            this.googleMapsMapId = settings?.googleMapsMapId ?? '';
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action selectMapProvider(option) {
+        this.mapProvider = option?.value ?? option ?? 'leaflet';
+    }
+
+    @task *saveSettings() {
+        try {
+            yield this.fetch.post('fleet-ops/settings/admin-map', {
+                mapProvider: this.mapProvider,
+                googleMapsMapId: this.googleMapsMapId,
+            });
+
+            this.notifications.success('Map settings saved.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

package/addon/components/admin/routing-settings.hbs

@@ -0,0 +1,11 @@
+<div class="space-y-6">
+    <InfoBlock @type="info" @icon="circle-info" class="mb-4">
+        Configure system-wide routing engine defaults here. Organizations can optionally override these values from their own routing settings.
+    </InfoBlock>
+
+    <RegistryYield @registry="fleet-ops:component:admin:routing-settings" as |RegistryComponent|>
+        <div>
+            <RegistryComponent />
+        </div>
+    </RegistryYield>
+</div>

package/addon/components/cell/order-route-type.hbs

@@ -0,0 +1,46 @@
+<div class="orders-route-type-cell" ...attributes>
+    {{#if this.hasRoutePreview}}
+        <div class="orders-route-type-trigger" {{on "mouseenter" this.ensurePayloadLoaded}} {{on "focusin" this.ensurePayloadLoaded}}>
+            <span class="{{this.summary.badgeClass}} orders-route-type-badge">
+                <FaIcon @icon={{this.summary.icon}} class="mr-0.5" />
+                {{this.summary.label}}
+            </span>
+            <Attach::Tooltip @class="clean orders-route-type-tooltip" @animation="scale" @placement="right">
+                <InputInfo @hideIcon={{true}}>
+                    <div class="orders-route-type-preview">
+                        <div class="orders-route-type-preview__header">
+                            <FaIcon @icon="route" class="mr-2" />
+                            <span>{{t "resource.route"}}</span>
+                        </div>
+                        {{#if this.isLoadingPayload}}
+                            <div class="orders-route-type-preview__state">
+                                <Spinner class="mr-2" />
+                                <span>{{t "common.loading-route"}}</span>
+                            </div>
+                        {{else if this.loadPayloadError}}
+                            <div class="orders-route-type-preview__state orders-route-type-preview__state--error">
+                                {{this.loadPayloadError}}
+                            </div>
+                        {{else if this.hasLoadedWaypointPayload}}
+                            <RouteList
+                                @order={{this.order}}
+                                @isCollapsible={{false}}
+                                @routeStopClass="orders-route-type-preview__stop"
+                                @routeLocationClass="orders-route-type-preview__location"
+                            />
+                        {{else}}
+                            <div class="orders-route-type-preview__state">
+                                {{t "common.hover-to-load-route"}}
+                            </div>
+                        {{/if}}
+                    </div>
+                </InputInfo>
+            </Attach::Tooltip>
+        </div>
+    {{else}}
+        <span class="{{this.summary.badgeClass}} orders-route-type-badge">
+            <FaIcon @icon={{this.summary.icon}} class="mr-0.5" />
+            {{this.summary.label}}
+        </span>
+    {{/if}}
+</div>

package/addon/components/cell/order-route-type.js

@@ -0,0 +1,90 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { buildRouteTypeSummary } from '../../utils/order-route-summary';
+
+export default class CellOrderRouteTypeComponent extends Component {
+    @service intl;
+    @tracked isLoadingPayload = false;
+    @tracked loadPayloadError = null;
+    _payloadLoadPromise = null;
+
+    get order() {
+        return this.args.row;
+    }
+
+    get payload() {
+        return this.order?.payload;
+    }
+
+    get intermediateStopCount() {
+        const loadedWaypointCount = this.payload?.waypoints?.length;
+        const indexedWaypointCount = Number(this.payload?.waypoints_count ?? 0);
+
+        if (typeof loadedWaypointCount === 'number') {
+            return Math.max(loadedWaypointCount, indexedWaypointCount);
+        }
+
+        return indexedWaypointCount;
+    }
+
+    get baseSummary() {
+        return buildRouteTypeSummary({
+            hasIntermediateWaypoints: this.order?.hasIntermediateWaypoints ?? this.payload?.hasIntermediateWaypoints,
+            intermediateStopCount: this.intermediateStopCount,
+            hasPickup: Boolean(this.payload?.pickup_uuid),
+            hasDropoff: Boolean(this.payload?.dropoff_uuid),
+        });
+    }
+
+    get summary() {
+        return {
+            ...this.baseSummary,
+            label: this.intl.t(this.baseSummary.translationKey, this.baseSummary.translationOptions),
+        };
+    }
+
+    get hasRoutePreview() {
+        return this.baseSummary.kind === 'multi_stop' || this.baseSummary.kind === 'pickup_dropoff_stops';
+    }
+
+    get hasLoadedWaypointPayload() {
+        const waypoints = this.payload?.waypoints;
+        const loadedWaypointCount = waypoints?.length;
+
+        if (typeof loadedWaypointCount === 'number') {
+            if (loadedWaypointCount > 0) {
+                return true;
+            }
+
+            return this.intermediateStopCount === 0;
+        }
+
+        return (typeof waypoints?.toArray === 'function' || isArray(waypoints)) && this.intermediateStopCount === 0;
+    }
+
+    @action async ensurePayloadLoaded() {
+        if (!this.hasRoutePreview || this.hasLoadedWaypointPayload || this.isLoadingPayload) {
+            return;
+        }
+
+        if (typeof this.order?.loadPayload !== 'function') {
+            return;
+        }
+
+        this.isLoadingPayload = true;
+        this.loadPayloadError = null;
+
+        try {
+            this._payloadLoadPromise ??= this.order.loadPayload();
+            await this._payloadLoadPromise;
+        } catch (error) {
+            this.loadPayloadError = error?.message ?? this.intl.t('common.unable-to-load-route');
+        } finally {
+            this.isLoadingPayload = false;
+            this._payloadLoadPromise = null;
+        }
+    }
+}

package/addon/components/cell/place-address.hbs

@@ -0,0 +1 @@
+<Place::Address @place={{@row}} />

package/addon/components/display-place.hbs

@@ -1,23 +1,25 @@
 <div {{did-insert this.setupComponent}} ...attributes>
-    {{#let (or @place.place @place) as |place|}}
-        {{#if (is-empty place)}}
-            <div class={{@noAddressClass}}>
-                <span class="text-red-500">
-                    {{#if @type}}
-                        {{t "display-panel.no-address" htmlSafe=true type=@type}}
-                    {{else}}
-                        {{t "display-panel.no-address-message"}}
-                    {{/if}}
-                </span>
-            </div>
-        {{else}}
-            <div class="flex flex-row item-center space-x-2 {{if (or place.status_code @eta) 'mb-2'}}">
-                {{#if place.status_code}}
-                    <Badge @status={{place.status_code}} />
-                {{/if}}
-                {{#if @eta}}
-                    <Badge @status="warning" @hideStatusDot={{true}}><span class="font-bold">{{t "common.eta"}}:</span> {{format-duration @eta}}</Badge>
+    {{#if (is-empty this.place)}}
+        <div class={{@noAddressClass}}>
+            <span class="text-red-500">
+                {{#if @type}}
+                    {{t "display-panel.no-address" htmlSafe=true type=@type}}
+                {{else}}
+                    {{t "display-panel.no-address-message"}}
                 {{/if}}
+            </span>
+        </div>
+    {{else}}
+        {{#if (and @waypointActions (not @hideBadges))}}
+            <div class="flex flex-row item-center space-x-2 {{if (or this.place.status_code @eta) 'mb-2'}}">
+                {{#unless @hideBadges}}
+                    {{#if this.place.status_code}}
+                        <Badge @status={{this.place.status_code}} />
+                    {{/if}}
+                    {{#if @eta}}
+                        <Badge @status="warning" @hideStatusDot={{true}}><span class="font-bold">{{t "common.eta"}}:</span> {{format-duration @eta}}</Badge>
+                    {{/if}}
+                {{/unless}}
                 {{#if @waypointActions}}
                     <DropdownButton @iconClass="icon-text-height" @size="xs" @buttonClass="fleetops-btn-xxs" @icon="ellipsis-h" @iconPrefix="fas" @contentClass="dropdown-menu" as |dd|>
                         <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
@@ -29,7 +31,7 @@
                             <div class="next-dd-menu-seperator"></div>
                             {{#each-in @waypointActions as |actionId action|}}
                                 <div class="px-1">
-                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (dropdown-fn dd action.fn place)}}>
+                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (dropdown-fn dd action.fn this.place)}}>
                                         {{action.label}}
                                     </a>
                                 </div>
@@ -38,42 +40,29 @@
                     </DropdownButton>
                 {{/if}}
             </div>
-            <address class={{@addressClass}}>
-                {{#if place.name}}
-                    {{place.name}}<br />
-                {{/if}}
-                {{#if place.street1}}
-                    {{place.street1}}<br />
-                {{/if}}
-                {{#if place.street2}}
-                    {{place.street2}}<br />
-                {{/if}}
-                <div class="comma-spans">
-                    {{#if place.city}}
-                        <span>{{place.city}}</span>
-                    {{/if}}
-                    {{#if place.province}}
-                        <span>{{place.province}}</span>
-                    {{/if}}
-                    {{#if place.postal_code}}
-                        <span>{{place.postal_code}}</span>
-                    {{/if}}
-                </div>
-                <div class="comma-spans">
-                    {{#if place.neighborhood}}
-                        <span>{{place.neighborhood}}</span>
-                    {{/if}}
-                    {{#if place.district}}
-                        <span>{{place.district}}</span>
-                    {{/if}}
-                    {{#if (and place.building (not place.street1))}}
-                        <span>{{place.building}}</span>
-                    {{/if}}
-                </div>
-                {{#if place.phone}}
-                    <a href="tel:{{place.phone}}" class="text-blue-500 hover:text-blue-400">{{place.phone}}</a><br />
-                {{/if}}
-            </address>
         {{/if}}
-    {{/let}}
+        <address class={{@addressClass}}>
+            {{#if this.name}}
+                <div class="font-semibold">{{this.name}}</div>
+                <div>{{this.place.street1}}</div>
+            {{else}}
+                <div class="font-semibold">{{this.place.street1}}</div>
+            {{/if}}
+            {{#if this.place.street2}}
+                <div>{{this.place.street2}}</div>
+            {{/if}}
+            {{#if this.cityStatePostalCode}}
+                <div>{{this.cityStatePostalCode}}</div>
+            {{/if}}
+            {{#if this.neighborhoodDistrictBuilding}}
+                <div>{{this.neighborhoodDistrictBuilding}}</div>
+            {{/if}}
+            {{#if this.place.country}}
+                <div>{{this.place.country_name}}</div>
+            {{/if}}
+            {{#if this.place.phone}}
+                <a href="tel:{{this.place.phone}}" class="text-blue-500 hover:text-blue-400">{{this.place.phone}}</a><br />
+            {{/if}}
+        </address>
+    {{/if}}
 </div>

package/addon/components/display-place.js

@@ -1,10 +1,31 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
 
 export default class DisplayPlaceComponent extends Component {
     @tracked ref;
 
+    get place() {
+        return this.args.place?.place ?? this.args.place ?? this.args.resource;
+    }
+
+    get name() {
+        if (this.place.name === this.place.street1) {
+            return null;
+        }
+
+        return this.place.name;
+    }
+
+    get cityStatePostalCode() {
+        return [this.place.city, this.place.province, this.place.postal_code].filter((value) => !isBlank(value)).join(', ');
+    }
+
+    get neighborhoodDistrictBuilding() {
+        return [this.place.neighborhood, this.place.district, this.place.building].filter((value) => !isBlank(value)).join(', ');
+    }
+
     @action setupComponent(element) {
         this.ref = element;
     }

package/addon/components/entity/form.hbs

@@ -23,6 +23,30 @@
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
                 <InputGroup @name={{t "common.name"}} @value={{@resource.name}} @helpText={{t "modals.entity-form.name-text"}} />
                 <InputGroup @name={{t "common.internal-id"}} @value={{@resource.internal_id}} @helpText={{t "modals.entity-form.id-text"}} />
+                <div class="space-y-2">
+                    <InputGroup @name={{t "common.type"}} @helpText="Choose a common entity type or switch to a custom value.">
+                        {{#if this.useCustomType}}
+                            <Input @value={{@resource.type}} @type="text" class="w-full form-input" placeholder="Enter custom entity type" />
+                        {{else}}
+                            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                                <PowerSelect
+                                    @options={{this.entityTypes}}
+                                    @selected={{this.selectedEntityType}}
+                                    @onChange={{this.selectEntityType}}
+                                    @placeholder="Select entity type"
+                                    @triggerClass="form-select"
+                                    as |type|
+                                >
+                                    <div class="text-sm">
+                                        <div class="font-semibold normalize-in-trigger">{{type.label}}</div>
+                                        <div class="hide-from-trigger">{{type.description}}</div>
+                                    </div>
+                                </PowerSelect>
+                            </div>
+                        {{/if}}
+                    </InputGroup>
+                    <Checkbox @value={{this.useCustomType}} @label="Use custom type" @onToggle={{this.toggleCustomType}} @alignItems="center" @labelClass="mb-0i" />
+                </div>
                 <InputGroup @name={{t "modals.entity-form.sku"}} @value={{@resource.sku}} @helpText={{t "modals.entity-form.sku-text"}} />
                 <div></div>
                 <InputGroup @name={{t "modals.entity-form.description"}} @helpText={{t "modals.entity-form.description-text"}} @wrapperClass="col-span-2">

package/addon/components/entity/form.js

@@ -1,11 +1,41 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
+import fleetOpsOptions from '../../utils/fleet-ops-options';
 
 export default class EntityFormComponent extends Component {
     @service fetch;
     @service currentUser;
     @service notifications;
+    @tracked useCustomType = false;
+
+    constructor() {
+        super(...arguments);
+        this.useCustomType = this.selectedEntityType === undefined && Boolean(this.args.resource?.type);
+    }
+
+    get entityTypes() {
+        return fleetOpsOptions('entityTypes');
+    }
+
+    get selectedEntityType() {
+        return this.entityTypes.find((option) => option.value === this.args.resource?.type);
+    }
+
+    @action selectEntityType(option) {
+        this.useCustomType = false;
+        this.args.resource.type = option?.value ?? null;
+    }
+
+    @action toggleCustomType(value) {
+        this.useCustomType = value;
+
+        if (!value && !this.selectedEntityType) {
+            this.args.resource.type = null;
+        }
+    }
 
     @task *handlePhotoUpload(file) {
         try {

package/addon/components/layout/fleet-ops-sidebar/driver-listing.js

@@ -6,7 +6,7 @@ import { task } from 'ember-concurrency';
 
 export default class LayoutFleetOpsSidebarDriverListingComponent extends Component {
     @service driverActions;
-    @service leafletMapManager;
+    @service mapManager;
     @service store;
     @service universe;
     @service hostRouter;
@@ -133,10 +133,10 @@ export default class LayoutFleetOpsSidebarDriverListingComponent extends Compone
             await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
         } catch {}
 
-        if (this.leafletMapManager._livemap?.isReady()) {
+        if (this.mapManager.livemap?.isReady?.()) {
             this.focusDriverOnMap(driver);
         } else {
-            this.universe.one('fleet-ops.live-map.on-loaded', () => {
+            this.universe.one('fleet-ops.live-map.loaded', () => {
                 this.focusDriverOnMap(driver);
             });
         }
@@ -147,8 +147,8 @@ export default class LayoutFleetOpsSidebarDriverListingComponent extends Compone
     }
 
     @action async focusDriverOnMap(driver) {
-        await this.leafletMapManager.ensureInteractive({ timeoutMs: 8000 });
-        this.leafletMapManager.flyToRecordLayer(driver, 16, {
+        await this.mapManager.waitForMap({ timeoutMs: 8000 });
+        this.mapManager.focusResource(driver, 16, {
             paddingBottomRight: [300, 200],
             moveend: () => {
                 this.driverActions.panel.view(driver, { closeOnTransition: true });

package/addon/components/layout/fleet-ops-sidebar/fleet-listing.js

@@ -8,7 +8,7 @@ export default class LayoutFleetOpsSidebarFleetListingComponent extends Componen
     @service store;
     @service universe;
     @service vehicleActions;
-    @service leafletMapManager;
+    @service mapManager;
     @service hostRouter;
     @service abilities;
     @service notifications;
@@ -86,10 +86,10 @@ export default class LayoutFleetOpsSidebarFleetListingComponent extends Componen
             await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
         } catch {}
 
-        if (this.leafletMapManager._livemap?.isReady()) {
+        if (this.mapManager.livemap?.isReady?.()) {
             this.focusVehicleOnMap(vehicle);
         } else {
-            this.universe.one('fleet-ops.live-map.on-loaded', () => {
+            this.universe.one('fleet-ops.live-map.loaded', () => {
                 this.focusVehicleOnMap(vehicle);
             });
         }
@@ -100,8 +100,8 @@ export default class LayoutFleetOpsSidebarFleetListingComponent extends Componen
     }
 
     @action async focusVehicleOnMap(vehicle) {
-        await this.leafletMapManager.ensureInteractive({ timeoutMs: 8000 });
-        this.leafletMapManager.flyToRecordLayer(vehicle, 16, {
+        await this.mapManager.waitForMap({ timeoutMs: 8000 });
+        this.mapManager.focusResource(vehicle, 16, {
             paddingBottomRight: [300, 200],
             moveend: () => {
                 this.vehicleActions.panel.view(vehicle, { closeOnTransition: true });

package/addon/components/layout/fleet-ops-sidebar.js

@@ -311,6 +311,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 permission: 'fleet-ops view routing-settings',
                 visible: this.abilities.can('fleet-ops see routing-settings'),
             },
+            {
+                intl: 'menu.map',
+                title: this.intl.t('menu.map'),
+                icon: 'map',
+                route: 'settings.map',
+                permission: 'fleet-ops view map-settings',
+                visible: this.abilities.can('fleet-ops see map-settings'),
+            },
             {
                 priority: 4,
                 intl: 'menu.orchestrator',

package/addon/components/leaflet-draw-control.js

@@ -27,7 +27,7 @@ export default class LeafletDrawControl extends BaseLayer {
     leafletOptions = ['draw', 'edit', 'remove', 'poly', 'position'];
 
     @computed('leafletEvents.[]', 'args') get usedLeafletEvents() {
-        const leafletEvents = [...this.leafletEvents, ...Object.values(L.Draw.Event)];
+        const leafletEvents = [...this.leafletEvents, ...Object.values(L.Draw?.Event ?? {})];
         return leafletEvents.filter((eventName) => {
             eventName = camelize(eventName.replace(':', ' '));
             let methodName = `_${eventName}`;

package/addon/components/maintenance-schedule/form.js

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { isArray } from '@ember/array';
 import { action } from '@ember/object';
 
 /**
@@ -116,7 +117,7 @@ export default class MaintenanceScheduleFormComponent extends Component {
                 }
             }
             // Restore reminder_offsets from the resource
-            if (Array.isArray(resource.reminder_offsets)) {
+            if (isArray(resource.reminder_offsets)) {
                 this.reminderOffsets = [...resource.reminder_offsets];
             }
             // Restore interval method from stored interval_method field, or infer from populated fields

package/addon/components/map/drawer/driver-listing.js

@@ -5,13 +5,13 @@ import { action } from '@ember/object';
 
 export default class MapDrawerDriverListingComponent extends Component {
     @service driverActions;
-    @service leafletMapManager;
+    @service mapManager;
     @service hostRouter;
     @service intl;
     @tracked query = '';
 
     get filteredDrivers() {
-        const drivers = this.leafletMapManager._livemap?.drivers ?? [];
+        const drivers = this.mapManager.livemap?.drivers ?? [];
         const query = this.query?.toLowerCase();
         if (!query) {
             return drivers;
@@ -119,7 +119,7 @@ export default class MapDrawerDriverListingComponent extends Component {
     }
 
     @action view(driver) {
-        this.leafletMapManager.flyToRecordLayer(driver, 16, {
+        this.mapManager.focusResource(driver, 16, {
             paddingBottomRight: [300, 200],
             moveend: () => {
                 this.driverActions.panel.view(driver);
@@ -128,7 +128,7 @@ export default class MapDrawerDriverListingComponent extends Component {
     }
 
     @action edit(driver) {
-        this.leafletMapManager.flyToRecordLayer(driver, 16, {
+        this.mapManager.focusResource(driver, 16, {
             paddingBottomRight: [300, 200],
             moveend: () => {
                 this.driverActions.panel.edit(driver);
@@ -137,7 +137,7 @@ export default class MapDrawerDriverListingComponent extends Component {
     }
 
     @action locate(driver) {
-        this.leafletMapManager.flyToRecordLayer(driver, 18, {
+        this.mapManager.focusResource(driver, 18, {
             paddingBottomRight: [300, 200],
         });
     }

package/addon/components/map/drawer/geofence-event-listing.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { next } from '@ember/runloop';
 
 export default class MapDrawerGeofenceEventListingComponent extends Component {
     @service fetch;
@@ -12,8 +13,10 @@ export default class MapDrawerGeofenceEventListingComponent extends Component {
 
     constructor() {
         super(...arguments);
-        this.geofenceEventBus.subscribe(this.currentUser.companyId);
-        this.loadRecentEvents();
+        next(() => {
+            this.geofenceEventBus.subscribe(this.currentUser.companyId);
+            this.loadRecentEvents();
+        });
     }
 
     get events() {