@fleetbase/fleetops-engine 0.6.50 → 0.6.51

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/leaflet-live-map.hbs

@@ -39,7 +39,7 @@
             @mapClass={{@mapClass}}
             ...attributes
         />
-    {{else}}
+    {{else if this.leafletPluginsReady}}
         {{! ─── Leaflet branch (default) ────────────────────────────────────── }}
         <LeafletMap
             id={{this.id}}
@@ -374,4 +374,4 @@
         @liveMap={{this}}
         @onDrawerReady={{this.setDrawerContext}}
     />
-{{/if}} --}}
+{{/if}} --}}

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

@@ -11,6 +11,7 @@ import { all } from 'rsvp';
 import { task, timeout } from 'ember-concurrency';
 import { next } from '@ember/runloop';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+import ensureLeafletPluginsReady, { hasLeafletPluginsReady } from '../../utils/leaflet-plugin-loader';
 
 export default class MapLeafletLiveMapComponent extends Component {
     liveViewportReloadDebounceMs = 300;
@@ -53,6 +54,7 @@ export default class MapLeafletLiveMapComponent extends Component {
     @tracked drivers = [];
     @tracked vehicles = [];
     @tracked places = [];
+    @tracked leafletPluginsReady = hasLeafletPluginsReady();
     _viewportReloadLocks = new Set();
 
     constructor() {
@@ -79,6 +81,10 @@ export default class MapLeafletLiveMapComponent extends Component {
         this._geofenceExitedHandler = this.#handleGeofenceExited.bind(this);
         this.universe.on('fleet-ops.geofence.entered', this._geofenceEnteredHandler);
         this.universe.on('fleet-ops.geofence.exited', this._geofenceExitedHandler);
+
+        if (!this.shouldUseGoogleMaps && !this.leafletPluginsReady) {
+            this.prepareLeafletPlugins();
+        }
     }
 
     willDestroy() {
@@ -329,6 +335,17 @@ export default class MapLeafletLiveMapComponent extends Component {
         return this.mapSettings.isGoogleMaps;
     }
 
+    async prepareLeafletPlugins() {
+        try {
+            await ensureLeafletPluginsReady();
+            if (!this.isDestroying && !this.isDestroyed) {
+                this.leafletPluginsReady = true;
+            }
+        } catch (error) {
+            debug('Failed to prepare Leaflet plugins: ' + error.message);
+        }
+    }
+
     /**
      * Get valid zoom level for map initialization
      * @returns {number} Valid zoom level between 1-20

package/addon/components/map/order-list-overlay.hbs

@@ -44,10 +44,10 @@
                             <div class="next-dd-menu-seperator"></div>
                             <div class="px-1">
                                 <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.orderActions.bulkCancel this.overlay.selectedOrders)}}>{{t
-                                        "fleet-ops.component.order-list-overlay.cancel"
+                                        "order-list-overlay.cancel"
                                     }}</a>
                                 <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (dropdown-fn dd this.orderActions.bulkDelete this.overlay.selectedOrders)}}>{{t
-                                        "fleet-ops.component.order-list-overlay.delete"
+                                        "order-list-overlay.delete"
                                     }}</a>
                             </div>
                         </div>
@@ -70,10 +70,10 @@
                         <div class="next-dd-menu-seperator"></div>
                         <div class="px-1">
                             <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd (transition-to "operations.orders.index.new"))}}>{{t
-                                    "fleet-ops.component.order-list-overlay.create-order"
+                                    "order-list-overlay.create-order"
                                 }}</a>
                             <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.fleetActions.modal.create)}}>{{t
-                                    "fleet-ops.component.order-list-overlay.create-fleet"
+                                    "order-list-overlay.create-fleet"
                                 }}</a>
                         </div>
                     </div>

package/addon/components/modals/convert-customer-to-vendor.hbs

@@ -0,0 +1,30 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="mb-4 rounded-md border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-900 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-100">
+            <div class="mb-1 font-semibold">Create a company customer account</div>
+            <div>
+                This action will create a vendor, assign
+                {{this.customer.name}}
+                as admin personnel, and migrate any customer-owned portal history to the vendor account.
+            </div>
+        </div>
+
+        <InputGroup @name="Primary Personnel" @wrapperClass="mb-0i">
+            <div class="flex items-start rounded-md border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-800">
+                <Image src={{this.customer.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{this.customer.name}} class="mr-2 h-6 w-6 rounded-md" />
+                <div class="min-w-0">
+                    <div class="leading-4 text-sm truncate font-semibold dark:text-gray-100">{{this.customer.name}}</div>
+                    <div class="truncate text-sm text-gray-500 dark:text-gray-400">{{n-a this.customer.email}}</div>
+                </div>
+            </div>
+        </InputGroup>
+
+        <div class="mt-4 grid grid-cols-1 gap-3 text-xs lg:grid-cols-2">
+            <InputGroup @name="Vendor Name" @value={{this.vendorName}} @placeholder="Company name" @wrapperClass="mb-0i" />
+            <InputGroup @name="Email" @type="email" @value={{this.vendorEmail}} @placeholder="billing@example.com" @wrapperClass="mb-0i" />
+            <InputGroup @name="Phone" @wrapperClass="mb-0i">
+                <PhoneInput @value={{this.vendorPhone}} @onInput={{fn (mut this.vendorPhone)}} class="form-input w-full" />
+            </InputGroup>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/convert-customer-to-vendor.js

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class ModalsConvertCustomerToVendorComponent extends Component {
+    @service fetch;
+    @service notifications;
+
+    @tracked customer;
+    @tracked vendorName;
+    @tracked vendorEmail;
+    @tracked vendorPhone;
+    @tracked options = {};
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.customer = options.customer;
+        this.vendorName = this.customer?.name;
+        this.vendorEmail = this.customer?.email;
+        this.vendorPhone = this.customer?.phone;
+        this.options = options;
+        this.setupOptions();
+    }
+
+    setupOptions() {
+        this.options.title = 'Convert Contact to Vendor';
+        this.options.acceptButtonText = 'Create Vendor';
+        this.options.confirm = async (modal) => {
+            modal.startLoading();
+
+            try {
+                const response = await this.fetch.post(
+                    `contacts/${this.customer.id}/convert-to-vendor`,
+                    {
+                        name: this.vendorName,
+                        email: this.vendorEmail,
+                        phone: this.vendorPhone,
+                    },
+                    { namespace: 'int/v1' }
+                );
+
+                this.notifications.success('Customer converted to vendor account.');
+
+                if (typeof this.options.onConverted === 'function') {
+                    this.options.onConverted(response.vendor);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}

package/addon/components/modals/issue-assign.hbs

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Assignee" @helpText="Choose the operator responsible for following up on this issue.">
+            <ModelSelect
+                @modelName="user"
+                @selectedModel={{this.selectedAssignee}}
+                @placeholder="Select assignee"
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @query={{hash is_not_customer=true}}
+                @allowClear={{true}}
+                @onChange={{fn (mut this.selectedAssignee)}}
+                as |model|
+            >
+                {{model.name}}
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/issue-assign.js

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class ModalsIssueAssignComponent extends Component {
+    @service notifications;
+
+    @tracked options = {};
+    @tracked issue;
+    @tracked selectedAssignee;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.options = options;
+        this.issue = options.issue;
+        this.selectedAssignee = this.issue?.assignee;
+        this.setupOptions();
+    }
+
+    setupOptions() {
+        this.options.title = 'Assign Issue';
+        this.options.acceptButtonText = 'Assign Issue';
+        this.options.acceptButtonIcon = 'user-check';
+        this.options.confirm = async (modal) => {
+            modal.startLoading();
+
+            try {
+                if (this.selectedAssignee?.type === 'customer') {
+                    this.notifications.warning('Customers cannot be assigned to issues.');
+                    modal.stopLoading();
+                    return;
+                }
+
+                this.issue.assignee = this.selectedAssignee;
+                await this.issue.save();
+                this.notifications.success('Issue assignment updated.');
+
+                if (typeof this.options.onSaved === 'function') {
+                    await this.options.onSaved(this.issue);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}

package/addon/components/modals/issue-close.hbs

@@ -0,0 +1,30 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="issue-close-modal-summary">
+            {{#if this.vehicleLabel}}
+                <div>
+                    <span>Vehicle</span>
+                    <strong>{{this.vehicleLabel}}</strong>
+                </div>
+            {{/if}}
+            {{#if this.orderLabel}}
+                <div>
+                    <span>Order</span>
+                    <strong>{{this.orderLabel}}</strong>
+                </div>
+            {{/if}}
+            <div>
+                <span>Summary</span>
+                <strong>{{n-a this.issue.title}}</strong>
+            </div>
+            <div>
+                <span>Description</span>
+                <strong>{{n-a this.issue.report "No report was provided."}}</strong>
+            </div>
+        </div>
+
+        <InputGroup @name="Close Note" @helpText="Describe why this issue is being closed.">
+            <Textarea @value={{this.note}} class="form-input w-full" rows={{5}} placeholder="Resolution note" />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/issue-close.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class ModalsIssueCloseComponent extends Component {
+    @service currentUser;
+    @service notifications;
+
+    @tracked options = {};
+    @tracked issue;
+    @tracked note;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.options = options;
+        this.issue = options.issue;
+        this.setupOptions();
+    }
+
+    get orderLabel() {
+        return this.issue?.order?.tracking || this.issue?.order?.public_id;
+    }
+
+    get vehicleLabel() {
+        return this.issue?.vehicle?.displayName || this.issue?.vehicle_name;
+    }
+
+    setupOptions() {
+        this.options.title = `Close ${this.issue?.public_id || 'Issue'}`;
+        this.options.acceptButtonText = 'Close Issue';
+        this.options.acceptButtonIcon = 'circle-check';
+        this.options.acceptButtonScheme = 'success';
+        this.options.confirm = async (modal) => {
+            if (!this.note) {
+                this.notifications.warning('Add a close note before closing the issue.');
+                return;
+            }
+
+            modal.startLoading();
+
+            try {
+                const closedAt = new Date().toISOString();
+                const user = this.currentUser.user;
+                const meta = this.issue.meta ?? {};
+
+                this.issue.status = 'closed';
+                this.issue.resolved_at = new Date();
+                this.issue.meta = {
+                    ...meta,
+                    resolution: {
+                        ...(meta.resolution ?? {}),
+                        note: this.note,
+                        closed_at: closedAt,
+                        closed_by_uuid: user?.id,
+                        closed_by_name: user?.name,
+                    },
+                };
+
+                await this.issue.save();
+                this.notifications.success('Issue closed.');
+
+                if (typeof this.options.onSaved === 'function') {
+                    await this.options.onSaved(this.issue);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}

package/addon/components/modals/issue-status.hbs

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Status" @helpText="Choose the current workflow state for this issue.">
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelect
+                    @options={{@options.statusOptions}}
+                    @selected={{this.selectedStatus}}
+                    @onChange={{fn (mut this.selectedStatus)}}
+                    @placeholder="Select status"
+                    @triggerClass="form-select form-input"
+                    @renderInPlace={{true}}
+                    as |status|
+                >
+                    <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
+                    <div class="hide-from-trigger text-xs text-gray-500 dark:text-gray-400">{{status.description}}</div>
+                </PowerSelect>
+            </div>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/issue-status.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class ModalsIssueStatusComponent extends Component {
+    @service notifications;
+
+    @tracked options = {};
+    @tracked issue;
+    @tracked selectedStatus;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.options = options;
+        this.issue = options.issue;
+        this.selectedStatus = options.statusOptions?.find((status) => status.value === this.issue?.status);
+        this.setupOptions();
+    }
+
+    setupOptions() {
+        this.options.title = 'Change Issue Status';
+        this.options.acceptButtonText = 'Update Status';
+        this.options.acceptButtonIcon = 'save';
+        this.options.confirm = async (modal) => {
+            modal.startLoading();
+
+            try {
+                this.issue.status = this.selectedStatus?.value ?? this.issue.status;
+                await this.issue.save();
+                this.notifications.success('Issue status updated.');
+
+                if (typeof this.options.onSaved === 'function') {
+                    await this.options.onSaved(this.issue);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}

package/addon/components/modals/reset-customer-credentials.js

@@ -2,6 +2,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 
+const INTERNAL_NAMESPACE = 'int/v1';
+
 export default class ModalsResetCustomerCredentialsComponent extends Component {
     @service fetch;
     @service notifications;
@@ -26,12 +28,16 @@ export default class ModalsResetCustomerCredentialsComponent extends Component {
             modal.startLoading();
 
             try {
-                await this.fetch.post('customers/reset-credentials', {
-                    customer: this.customer.id,
-                    password: this.password,
-                    password_confirmation: this.confirmPassword,
-                    send_credentials: this.sendCredentials,
-                });
+                await this.fetch.post(
+                    'customers/reset-credentials',
+                    {
+                        customer: this.customer.id,
+                        password: this.password,
+                        password_confirmation: this.confirmPassword,
+                        send_credentials: this.sendCredentials,
+                    },
+                    { namespace: INTERNAL_NAMESPACE }
+                );
 
                 this.notifications.success('Customer password reset.');