@fleetbase/fleetops-engine 0.6.49 → 0.6.51

package/addon/components/issue/panel-header.hbs

@@ -0,0 +1,43 @@
+<div class="issue-panel-header">
+    <div class="issue-panel-header-main">
+        <div class="issue-panel-header-icon">
+            <FaIcon @icon="triangle-exclamation" />
+        </div>
+        <div class="issue-panel-header-content">
+            <div class="issue-panel-header-title-row">
+                <h1 class="issue-panel-header-title">{{this.title}}</h1>
+            </div>
+            {{#if @resource.public_id}}
+                <ClickToCopy @value={{@resource.public_id}} class="issue-panel-header-id">
+                    <FaIcon @icon="hashtag" />
+                    <span>{{@resource.public_id}}</span>
+                </ClickToCopy>
+            {{/if}}
+            <div class="issue-panel-header-meta">
+                {{#if this.subtitle}}
+                    <span>{{titleize this.subtitle}}</span>
+                {{/if}}
+                {{#if @resource.createdAt}}
+                    <span>Reported {{@resource.createdAt}}</span>
+                {{/if}}
+            </div>
+        </div>
+    </div>
+
+    <div class="issue-panel-header-actions">
+        <div class="issue-panel-header-badges">
+            <Badge @status={{@resource.status}} />
+            <Badge @status={{@resource.priority}} />
+        </div>
+        <Layout::Resource::Panel::HeaderActions
+            @resource={{@resource}}
+            @saveTask={{@saveTask}}
+            @saveOptions={{@saveOptions}}
+            @saveDisabled={{@saveDisabled}}
+            @pojoResource={{@pojoResource}}
+            @authSchema={{@authSchema}}
+            @actionButtons={{@actionButtons}}
+            @onPressCancel={{@onPressCancel}}
+        />
+    </div>
+</div>

package/addon/components/issue/panel-header.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+
+export default class IssuePanelHeaderComponent extends Component {
+    get resource() {
+        return this.args.resource;
+    }
+
+    get title() {
+        return this.resource?.title || `Issue reported on ${this.resource?.createdAt || 'unknown date'}`;
+    }
+
+    get tags() {
+        return Array.isArray(this.resource?.tags) ? this.resource.tags.filter(Boolean) : [];
+    }
+
+    get subtitle() {
+        return [this.resource?.type, this.resource?.category]
+            .filter(Boolean)
+            .map((value) => value.replace(/[-_]/g, ' '))
+            .join(' / ');
+    }
+}

package/addon/components/issue/timeline.hbs

@@ -0,0 +1,40 @@
+<div class="issue-timeline" {{did-update this.reload this.issueId}} ...attributes>
+    {{#if this.loadTimeline.isRunning}}
+        <div class="issue-timeline-loading">
+            <Spinner @loadingMessage="Loading timeline..." />
+        </div>
+    {{else if this.hasEvents}}
+        <ol class="issue-timeline-list">
+            {{#each this.events as |event|}}
+                <li class="issue-timeline-event tone-{{event.tone}}">
+                    <div class="issue-timeline-marker">
+                        <FaIcon @icon={{event.icon}} />
+                    </div>
+                    <div class="issue-timeline-card">
+                        <div class="issue-timeline-card-header">
+                            <div>
+                                <div class="issue-timeline-label">{{event.label}}</div>
+                                <div class="issue-timeline-actor">{{n-a event.actor_name "Someone"}}</div>
+                            </div>
+                            <time>{{n-a (format-date-fns event.created_at "dd MMM yyyy HH:mm")}}</time>
+                        </div>
+                        {{#if event.description}}
+                            <p>{{event.description}}</p>
+                        {{/if}}
+                        {{#if event.meta.file_url}}
+                            <a href={{event.meta.file_url}} target="_blank" rel="noopener noreferrer" class="issue-timeline-link">
+                                <FaIcon @icon="download" />
+                                <span>{{n-a event.meta.file_name "Download file"}}</span>
+                            </a>
+                        {{/if}}
+                    </div>
+                </li>
+            {{/each}}
+        </ol>
+    {{else}}
+        <div class="issue-detail-empty issue-detail-empty-compact">
+            <FaIcon @icon="timeline" />
+            <span>No issue activity yet.</span>
+        </div>
+    {{/if}}
+</div>

package/addon/components/issue/timeline.js

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
+
+export default class IssueTimelineComponent extends Component {
+    @service fetch;
+    @service notifications;
+
+    @tracked events = [];
+
+    constructor() {
+        super(...arguments);
+        this.loadTimeline.perform();
+    }
+
+    get issueId() {
+        return this.args.resource?.id || this.args.resource?.uuid || this.args.resource?.public_id;
+    }
+
+    get hasEvents() {
+        return this.events.length > 0;
+    }
+
+    @task *loadTimeline() {
+        if (!this.issueId) {
+            this.events = [];
+            return;
+        }
+
+        try {
+            const response = yield this.fetch.get(`issues/${this.issueId}/timeline`, {}, { namespace: 'int/v1' });
+            this.events = response.events ?? response.timeline ?? [];
+        } catch (err) {
+            debug('Failed to load issue timeline: ' + err.message);
+            this.notifications.serverError(err);
+        }
+    }
+
+    @action reload() {
+        this.loadTimeline.perform();
+    }
+}

package/addon/components/leaflet-tracking-marker.js

@@ -1,5 +1,6 @@
 import MarkerLayer from 'ember-leaflet/components/marker-layer';
 import { isArray } from '@ember/array';
+import ensureLeafletDrawEditNamespace from '../utils/leaflet-draw-namespace-guard';
 
 const __draggingHotfix = (layer) => {
     if (!layer.dragging) {
@@ -23,6 +24,7 @@ const arrayFromLatLng = (latlng) => {
 };
 
 const L = window.leaflet || window.L;
+ensureLeafletDrawEditNamespace(L);
 const oldIE = L.DomUtil.TRANSFORM === 'msTransform';
 L.TrackingMarker = L.Marker.extend({
     // eslint-disable-next-line ember/avoid-leaking-state-in-ember-objects
@@ -291,6 +293,7 @@ export default class LeafletTrackingMarkerComponent extends MarkerLayer {
     }
 
     createLayer() {
+        ensureLeafletDrawEditNamespace(L);
         const { rotationAngle, location } = this.args;
         const bearingAngle = rotationAngle ?? computeBearing([0, 0], location);
         return new L.TrackingMarker(...this.requiredOptions, { ...this.options, bearingAngle });

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

@@ -7,6 +7,7 @@ import { isArray } from '@ember/array';
 import { htmlSafe } from '@ember/template';
 import { startOfWeek, endOfWeek, format } from 'date-fns';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+import ensureLeafletDrawEditNamespace from '../../../utils/leaflet-draw-namespace-guard';
 
 const L = window.leaflet || window.L;
 
@@ -412,6 +413,8 @@ export default class MapDrawerPositionListingComponent extends Component {
             return;
         }
 
+        ensureLeafletDrawEditNamespace(L);
+        ensureLeafletDrawEditNamespace();
         const marker = L.circleMarker([lat, lng], {
             radius: 3,
             color: '#3b82f6',

package/addon/components/map/google-live-map.js

@@ -276,15 +276,19 @@ export default class MapGoogleLiveMapComponent extends Component {
     }
 
     _showServiceAreaContextMenu(serviceArea, event) {
-        const items = this.mapManager.getComposedContextMenuItems(`service-area:${serviceArea.public_id}`);
+        const items = this.mapManager.getComposedContextMenuItems(this._resourceContextKey('service-area', serviceArea));
         this.mapManager.showContextMenu(event, items);
     }
 
     _showZoneContextMenu(zone, event) {
-        const items = this.mapManager.getComposedContextMenuItems(`zone:${zone.public_id}`);
+        const items = this.mapManager.getComposedContextMenuItems(this._resourceContextKey('zone', zone));
         this.mapManager.showContextMenu(event, items);
     }
 
+    _resourceContextKey(type, resource) {
+        return `${type}:${resource?.public_id ?? resource?.id}`;
+    }
+
     _closeAllInfoWindows() {
         this._infoWindows.forEach((iw) => iw.close());
         this.mapManager.closeContextMenu();

package/addon/components/map/leaflet-live-map.hbs

@@ -13,7 +13,7 @@
     through the provider-agnostic MapManagerService.
 }}
 
-<div class="live-map-component {{@wrapperClass}}">
+<div class="live-map-component {{@wrapperClass}}" {{did-update this.syncServiceAreaContextMenus this.serviceAreaActions.serviceAreas this.serviceAreaActions.serviceAreas.length}}>
 
     {{#if this.shouldUseGoogleMaps}}
         {{! ─── Google Maps branch ──────────────────────────────────────────── }}
@@ -39,7 +39,7 @@
             @mapClass={{@mapClass}}
             ...attributes
         />
-    {{else}}
+    {{else if this.leafletPluginsReady}}
         {{! ─── Leaflet branch (default) ────────────────────────────────────── }}
         <LeafletMap
             id={{this.id}}
@@ -87,7 +87,11 @@
                                 <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
                                     <span class="inline-block w-2 h-2 rounded-full {{if driver.online 'bg-green-400' 'bg-red-500'}}"></span>
                                     <span>{{driver.name}}</span>
-                                    <div class="status-badge {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}} shadow-none ml-auto">
+                                    <div
+                                        class="status-badge
+                                            {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}}
+                                            shadow-none ml-auto"
+                                    >
                                         <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a driver.meta.status_label (smart-humanize driver.status)}}</span>
                                     </div>
                                 </div>
@@ -122,7 +126,10 @@
                                     </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.location_coordinates (point-coordinates driver.location)}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                                                driver.meta.location_coordinates
+                                                (point-coordinates driver.location)
+                                            }}</div>
                                     </div>
                                 </div>
                             </div>
@@ -132,7 +139,11 @@
                                 <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
                                     <span class="inline-block w-2 h-2 rounded-full {{if driver.online 'bg-green-400' 'bg-red-500'}}"></span>
                                     <span>{{driver.name}}</span>
-                                    <div class="status-badge {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}} shadow-none ml-auto">
+                                    <div
+                                        class="status-badge
+                                            {{if driver.status (dasherize driver.status) 'default'}}-status-badge status-badge-{{if driver.status (dasherize driver.status) 'default'}}
+                                            shadow-none ml-auto"
+                                    >
                                         <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a driver.meta.status_label (smart-humanize driver.status)}}</span>
                                     </div>
                                 </div>
@@ -167,7 +178,10 @@
                                     </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Location</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a driver.meta.location_coordinates (point-coordinates driver.location)}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                                                driver.meta.location_coordinates
+                                                (point-coordinates driver.location)
+                                            }}</div>
                                     </div>
                                 </div>
                             </div>
@@ -192,14 +206,24 @@
                                 <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
                                     <span class="inline-block w-2 h-2 rounded-full {{if vehicle.online 'bg-green-400' 'bg-red-500'}}"></span>
                                     <span>{{vehicle.displayName}}</span>
-                                    <div class="status-badge {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}} shadow-none ml-auto">
+                                    <div
+                                        class="status-badge
+                                            {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}}
+                                            shadow-none ml-auto"
+                                    >
                                         <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a vehicle.meta.status_label}}</span>
                                     </div>
                                 </div>
                                 <div class="grid grid-cols-2 gap-1">
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle #</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.internal_id vehicle.public_id vehicle.plate_number vehicle.serial_number vehicle.vin}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                                                vehicle.internal_id
+                                                vehicle.public_id
+                                                vehicle.plate_number
+                                                vehicle.serial_number
+                                                vehicle.vin
+                                            }}</div>
                                     </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
@@ -229,14 +253,24 @@
                                 <div class="flex items-center gap-1.5 text-xs font-semibold mb-1.5">
                                     <span class="inline-block w-2 h-2 rounded-full {{if vehicle.online 'bg-green-400' 'bg-red-500'}}"></span>
                                     <span>{{vehicle.displayName}}</span>
-                                    <div class="status-badge {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}} shadow-none ml-auto">
+                                    <div
+                                        class="status-badge
+                                            {{if vehicle.status (dasherize vehicle.status) 'default'}}-status-badge status-badge-{{if vehicle.status (dasherize vehicle.status) 'default'}}
+                                            shadow-none ml-auto"
+                                    >
                                         <span class="rounded-full text-[9px] px-1.5 py-0.5">{{n-a vehicle.meta.status_label}}</span>
                                     </div>
                                 </div>
                                 <div class="grid grid-cols-2 gap-1">
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Vehicle #</div>
-                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a vehicle.internal_id vehicle.public_id vehicle.plate_number vehicle.serial_number vehicle.vin}}</div>
+                                        <div class="text-[11px] text-white leading-tight whitespace-normal break-words">{{n-a
+                                                vehicle.internal_id
+                                                vehicle.public_id
+                                                vehicle.plate_number
+                                                vehicle.serial_number
+                                                vehicle.vin
+                                            }}</div>
                                     </div>
                                     <div class="rounded bg-gray-900 shadow-md px-1.5 py-1 min-w-0">
                                         <div class="text-[9px] font-semibold uppercase text-gray-400 leading-none">Driver</div>
@@ -291,8 +325,8 @@
                         @id={{serviceArea.id}}
                         @record={{serviceArea}}
                         @locations={{unwrap-coordinates serviceArea.leafletCoordinates}}
-                        @fillColor={{serviceArea.color}}
-                        @color={{serviceArea.stroke_color}}
+                        @fillColor={{or serviceArea.color "#3388ff"}}
+                        @color={{or serviceArea.stroke_color serviceArea.color "#3388ff"}}
                         @onAdd={{fn this.trigger "onServiceAreaLayerAdded" serviceArea}}
                         as |polygon|
                     >
@@ -304,8 +338,8 @@
                             @id={{zone.id}}
                             @record={{zone}}
                             @locations={{unwrap-coordinates zone.leafletCoordinates}}
-                            @fillColor={{zone.color}}
-                            @color={{zone.stroke_color}}
+                            @fillColor={{or zone.color "#3388ff"}}
+                            @color={{or zone.stroke_color zone.color "#3388ff"}}
                             @onAdd={{fn this.trigger "onZoneLayerAdd" zone}}
                             as |polygon|
                         >