@fleetbase/fleetops-engine 0.6.53 → 0.6.55

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

@@ -19,6 +19,7 @@
             <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                 <PowerSelectMultiple
                     @searchEnabled={{true}}
+                    @searchField="label"
                     @options={{this.trackingProviderOptions}}
                     @selected={{this.selectedTrackingFallbackOptions}}
                     @onChange={{this.setTrackingFallbacks}}
@@ -79,4 +80,4 @@
         @isLoading={{or this.saveSettings.isRunning this.loadSettings.isRunning}}
         @disabled={{this.saveSettings.isRunning}}
     />
-</EmberWormhole>
+</EmberWormhole>

package/addon/components/cell/attached-vehicle.hbs

@@ -0,0 +1,10 @@
+<div ...attributes>
+    {{#if this.hasVehicle}}
+        <Cell::VehicleIdentity @row={{this.vehicleResource}} @column={{this.identityColumn}} @onClick={{this.onClick}} />
+    {{else}}
+        <div class="flex items-center gap-2 py-1 text-xs text-gray-400 dark:text-gray-500">
+            <FaIcon @icon="link-slash" />
+            <span>Unattached</span>
+        </div>
+    {{/if}}
+</div>

package/addon/components/cell/attached-vehicle.js

@@ -0,0 +1,58 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class CellAttachedVehicleComponent extends Component {
+    get device() {
+        return this.args.row;
+    }
+
+    get vehicle() {
+        return this.device?.attachable;
+    }
+
+    get vehicleResource() {
+        return (
+            this.vehicle ?? {
+                id: this.device?.attachable_uuid,
+                displayName: this.device?.attached_to_name,
+                display_name: this.device?.attached_to_name,
+                name: this.device?.attached_to_name,
+                public_id: this.device?.attachable_uuid,
+            }
+        );
+    }
+
+    get identityColumn() {
+        return {
+            ...(this.args.column ?? {}),
+            action: null,
+            showStatusBadge: false,
+        };
+    }
+
+    get hasVehicle() {
+        return Boolean(this.device?.attachable_uuid && this.isVehicleAttachment);
+    }
+
+    get isVehicleAttachment() {
+        const attachableType = `${this.device?.attachable_type ?? ''}`.toLowerCase();
+
+        return !attachableType || attachableType.includes('vehicle');
+    }
+
+    @action onClick(_vehicle, event) {
+        const { column, onClick } = this.args;
+
+        if (!this.hasVehicle) {
+            return;
+        }
+
+        if (typeof onClick === 'function') {
+            onClick(this.device, event);
+        }
+
+        if (typeof column?.action === 'function') {
+            column.action(this.device, event);
+        }
+    }
+}

package/addon/components/cell/device-identity.hbs

@@ -0,0 +1,24 @@
+{{#if this.resource}}
+    {{#if this.compact}}
+        <button
+            type="button"
+            disabled={{and @column.permission (cannot @column.permission)}}
+            {{on "click" this.onClick}}
+            class="group flex w-full min-w-0 cursor-pointer items-center gap-2 py-0.5 text-left"
+            data-test-device-identity-compact
+            ...attributes
+        >
+            <div class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
+                <Image src={{this.mediaUrl}} @fallbackSrc={{this.fallbackImage}} class="h-5 w-5 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
+                {{#if this.hasCompactStatusDot}}
+                    <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -ml-1 -mt-1 {{this.compactStatusDotClass}}" data-test-resource-identity-status-dot />
+                {{/if}}
+            </div>
+            <div class="min-w-0 truncate text-sm leading-4 text-gray-900 group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-300">{{n-a this.label}}</div>
+        </button>
+    {{else}}
+        <Table::Cell::ResourceIdentity @row={{this.resource}} @value={{@value}} @column={{this.column}} @onClick={{@onClick}} ...attributes />
+    {{/if}}
+{{else}}
+    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-identity-empty-text ...attributes>{{this.emptyText}}</div>
+{{/if}}

package/addon/components/cell/device-identity.js

@@ -0,0 +1,129 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import config from 'ember-get-config';
+import { resolveIdentityCellResource } from '../../utils/identity-cell-resource';
+
+const DEFAULT_STATUS_TONES = {
+    online: 'text-green-500',
+    active: 'text-green-500',
+    recently_offline: 'text-yellow-500',
+    offline: 'text-gray-400',
+    long_offline: 'text-gray-400',
+    never_connected: 'text-gray-400',
+    inactive: 'text-gray-400',
+    error: 'text-red-500',
+};
+
+export default class CellDeviceIdentityComponent extends Component {
+    get resource() {
+        return resolveIdentityCellResource(this.args);
+    }
+
+    get emptyText() {
+        return this.args.column?.emptyText ?? '-';
+    }
+
+    get showStatus() {
+        return this.args.column?.showStatus ?? true;
+    }
+
+    get compact() {
+        return this.args.column?.compact ?? false;
+    }
+
+    get label() {
+        const device = this.resource;
+
+        return get(device, 'displayName') ?? get(device, 'display_name') ?? get(device, 'name') ?? get(device, 'device_id') ?? get(device, 'imei') ?? get(device, 'serial_number');
+    }
+
+    get mediaUrl() {
+        return get(this.resource, 'photo_url');
+    }
+
+    get fallbackImage() {
+        return config?.defaultValues?.placeholderImage;
+    }
+
+    get hasCompactStatusDot() {
+        return this.args.column?.showStatusDot ?? this.args.column?.showOnlineIndicator ?? true;
+    }
+
+    get compactStatusValue() {
+        const device = this.resource;
+
+        return get(device, 'is_online') ?? get(device, 'connection_status') ?? get(device, 'status');
+    }
+
+    get compactStatusToneClass() {
+        const value = this.compactStatusValue;
+        const statusToneMap = {
+            ...DEFAULT_STATUS_TONES,
+            ...(this.args.column?.statusToneMap ?? {}),
+        };
+
+        if (typeof this.args.column?.statusToneClass === 'function') {
+            return this.args.column.statusToneClass(value, this.resource, this.args.column);
+        }
+
+        if (typeof value === 'boolean') {
+            return value ? 'text-green-500' : 'text-yellow-200';
+        }
+
+        return statusToneMap[value] ?? statusToneMap[String(value ?? '').toLowerCase()] ?? 'text-gray-400';
+    }
+
+    get compactStatusDotClass() {
+        return this.compactStatusToneClass;
+    }
+
+    get column() {
+        return {
+            ...(this.args.column ?? {}),
+            labelPath: (device) =>
+                get(device, 'displayName') ?? get(device, 'display_name') ?? get(device, 'name') ?? get(device, 'device_id') ?? get(device, 'imei') ?? get(device, 'serial_number'),
+            mediaPath: 'photo_url',
+            fallbackImage: config?.defaultValues?.placeholderImage,
+            statusPath: this.showStatus ? (device) => get(device, 'connection_status') ?? get(device, 'status') : undefined,
+            onlinePath: 'is_online',
+            showStatusBadge: this.showStatus ? (this.args.column?.showStatusBadge ?? true) : false,
+            statusBadgeSize: this.args.column?.statusBadgeSize ?? 'xxs',
+            statusBadgeWrapperClass: this.args.column?.statusBadgeWrapperClass ?? 'resource-identity-status-badge device-identity-status-badge',
+            metaPaths: [
+                {
+                    value: (device) => get(device, 'imei') ?? get(device, 'device_id') ?? get(device, 'ident') ?? get(device, 'serial_number'),
+                    icon: 'microchip',
+                    style: 'badge',
+                    class: 'max-w-[12rem]',
+                },
+            ],
+            statusToneMap: {
+                online: 'text-green-500',
+                active: 'text-green-500',
+                recently_offline: 'text-yellow-500',
+                offline: 'text-gray-400',
+                long_offline: 'text-gray-400',
+                never_connected: 'text-gray-400',
+                inactive: 'text-gray-400',
+                error: 'text-red-500',
+            },
+        };
+    }
+
+    @action onClick(event) {
+        const { column, onClick } = this.args;
+        const resource = this.resource;
+
+        if (typeof onClick === 'function') {
+            onClick(resource, event);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(resource, event);
+        }
+
+        if (typeof column?.action === 'function') {
+            column.action(resource, event);
+        }
+    }
+}

package/addon/components/cell/driver-identity.hbs

@@ -0,0 +1,33 @@
+{{#if this.resource}}
+    {{#if this.compact}}
+        <button
+            type="button"
+            disabled={{and @column.permission (cannot @column.permission)}}
+            {{on "click" this.onClick}}
+            class="group flex w-full min-w-0 cursor-pointer items-center gap-2 py-0.5 text-left"
+            data-test-driver-identity-compact
+            ...attributes
+        >
+            <div class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
+                <Image src={{this.mediaUrl}} @fallbackSrc={{this.fallbackImage}} class="h-5 w-5 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
+                {{#if this.hasCompactStatusDot}}
+                    <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -ml-1 -mt-1 {{this.compactStatusDotClass}}" data-test-resource-identity-status-dot />
+                {{/if}}
+            </div>
+            <div class="min-w-0 truncate text-sm leading-4 text-gray-900 group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-300">{{n-a this.label}}</div>
+            {{#if this.assignedVehicleLabel}}
+                <span
+                    data-test-resource-identity-meta-badge
+                    class="inline-flex min-w-0 max-w-[12rem] flex-shrink items-center rounded-lg bg-gray-200 px-1 py-0 text-[10px] leading-4 text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-300"
+                >
+                    <FaIcon @icon="car" @prefix="fas" @size="xs" class="mr-1 flex-shrink-0" />
+                    <span class="truncate">{{n-a this.assignedVehicleLabel}}</span>
+                </span>
+            {{/if}}
+        </button>
+    {{else}}
+        <Table::Cell::ResourceIdentity @row={{this.resource}} @value={{@value}} @column={{this.column}} @onClick={{@onClick}} ...attributes />
+    {{/if}}
+{{else}}
+    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-identity-empty-text ...attributes>{{this.emptyText}}</div>
+{{/if}}

package/addon/components/cell/driver-identity.js

@@ -0,0 +1,143 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import config from 'ember-get-config';
+import { resolveIdentityCellResource } from '../../utils/identity-cell-resource';
+
+const DEFAULT_STATUS_TONES = {
+    available: 'text-green-500',
+    active: 'text-green-500',
+    on_duty: 'text-green-500',
+    busy: 'text-yellow-500',
+    assigned: 'text-yellow-500',
+    unavailable: 'text-gray-400',
+    offline: 'text-gray-400',
+    suspended: 'text-red-500',
+};
+
+export default class CellDriverIdentityComponent extends Component {
+    get resource() {
+        return resolveIdentityCellResource(this.args);
+    }
+
+    get emptyText() {
+        return this.args.column?.emptyText ?? '-';
+    }
+
+    get compact() {
+        return this.args.column?.compact ?? false;
+    }
+
+    get label() {
+        const driver = this.resource;
+
+        return get(driver, 'name') ?? get(driver, 'displayName') ?? get(driver, 'display_name');
+    }
+
+    get mediaUrl() {
+        return get(this.resource, 'photo_url');
+    }
+
+    get fallbackImage() {
+        return config?.defaultValues?.driverImage;
+    }
+
+    get hasCompactStatusDot() {
+        return this.args.column?.showStatusDot ?? this.args.column?.showOnlineIndicator ?? true;
+    }
+
+    get compactStatusValue() {
+        const driver = this.resource;
+
+        return get(driver, 'online') ?? get(driver, 'status');
+    }
+
+    get compactStatusToneClass() {
+        const value = this.compactStatusValue;
+        const statusToneMap = {
+            ...DEFAULT_STATUS_TONES,
+            ...(this.args.column?.statusToneMap ?? {}),
+        };
+
+        if (typeof this.args.column?.statusToneClass === 'function') {
+            return this.args.column.statusToneClass(value, this.resource, this.args.column);
+        }
+
+        if (typeof value === 'boolean') {
+            return value ? 'text-green-500' : 'text-yellow-200';
+        }
+
+        return statusToneMap[value] ?? statusToneMap[String(value ?? '').toLowerCase()] ?? 'text-gray-400';
+    }
+
+    get compactStatusDotClass() {
+        return this.compactStatusToneClass;
+    }
+
+    get assignedVehicleLabel() {
+        const column = this.args.column ?? {};
+        const driver = this.resource;
+
+        if (typeof column.assignedVehicleLabel === 'function') {
+            return column.assignedVehicleLabel(driver, this.args.row, column);
+        }
+
+        if (column.assignedVehicleLabel !== undefined) {
+            return column.assignedVehicleLabel;
+        }
+
+        if (typeof column.assignedVehiclePath === 'string') {
+            return get(this.args.row, column.assignedVehiclePath) ?? get(driver, column.assignedVehiclePath);
+        }
+
+        return get(driver, 'vehicle_assigned.display_name') ?? get(driver, 'vehicle.display_name') ?? get(driver, 'vehicle_name');
+    }
+
+    get column() {
+        return {
+            ...(this.args.column ?? {}),
+            labelPath: 'name',
+            mediaPath: 'photo_url',
+            fallbackImage: config?.defaultValues?.driverImage,
+            statusPath: 'status',
+            onlinePath: 'online',
+            showStatusBadge: this.args.column?.showStatusBadge ?? true,
+            statusBadgeSize: this.args.column?.statusBadgeSize ?? 'xxs',
+            statusBadgeWrapperClass: this.args.column?.statusBadgeWrapperClass ?? 'resource-identity-status-badge driver-identity-status-badge order-first',
+            metaPaths: [
+                {
+                    value: (driver) => get(driver, 'vehicle_assigned.display_name') ?? get(driver, 'vehicle.display_name') ?? get(driver, 'vehicle_name'),
+                    icon: 'car',
+                    style: 'badge',
+                    class: 'max-w-[12rem]',
+                },
+            ],
+            statusToneMap: {
+                available: 'text-green-500',
+                active: 'text-green-500',
+                on_duty: 'text-green-500',
+                busy: 'text-yellow-500',
+                assigned: 'text-yellow-500',
+                unavailable: 'text-gray-400',
+                offline: 'text-gray-400',
+                suspended: 'text-red-500',
+            },
+        };
+    }
+
+    @action onClick(event) {
+        const { column, onClick } = this.args;
+        const resource = this.resource;
+
+        if (typeof onClick === 'function') {
+            onClick(resource, event);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(resource, event);
+        }
+
+        if (typeof column?.action === 'function') {
+            column.action(resource, event);
+        }
+    }
+}

package/addon/components/cell/equipment-identity.hbs

@@ -0,0 +1,5 @@
+{{#if this.resource}}
+    <Table::Cell::ResourceIdentity @row={{this.resource}} @value={{@value}} @column={{this.column}} @onClick={{@onClick}} ...attributes />
+{{else}}
+    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-identity-empty-text ...attributes>{{this.emptyText}}</div>
+{{/if}}

package/addon/components/cell/equipment-identity.js

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+import config from 'ember-get-config';
+import { resolveIdentityCellResource } from '../../utils/identity-cell-resource';
+
+export default class CellEquipmentIdentityComponent extends Component {
+    get resource() {
+        return resolveIdentityCellResource(this.args);
+    }
+
+    get emptyText() {
+        return this.args.column?.emptyText ?? '-';
+    }
+
+    get column() {
+        return {
+            ...(this.args.column ?? {}),
+            labelPath: 'name',
+            mediaPath: 'photo_url',
+            fallbackImage: config?.defaultValues?.equipmentImage ?? config?.defaultValues?.placeholderImage,
+            statusPath: (equipment) => (get(equipment, 'is_equipped') ? 'equipped' : (get(equipment, 'status') ?? 'unequipped')),
+            statusFormatter: () => null,
+            metaPaths: [
+                {
+                    value: (equipment) => get(equipment, 'type'),
+                    formatter: (type) => type,
+                    icon: 'toolbox',
+                    style: 'badge',
+                },
+                {
+                    value: (equipment) => get(equipment, 'serial_number') ?? get(equipment, 'code') ?? get(equipment, 'public_id'),
+                    icon: 'barcode',
+                    style: 'badge',
+                    class: 'max-w-[12rem]',
+                },
+            ],
+            statusToneMap: {
+                active: 'text-green-500',
+                equipped: 'text-green-500',
+                available: 'text-green-500',
+                maintenance: 'text-yellow-500',
+                unequipped: 'text-gray-400',
+                inactive: 'text-gray-400',
+                retired: 'text-red-500',
+            },
+        };
+    }
+}

package/addon/components/cell/part-identity.hbs

@@ -0,0 +1,5 @@
+{{#if this.resource}}
+    <Table::Cell::ResourceIdentity @row={{this.resource}} @value={{@value}} @column={{this.column}} @onClick={{@onClick}} ...attributes />
+{{else}}
+    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-identity-empty-text ...attributes>{{this.emptyText}}</div>
+{{/if}}

package/addon/components/cell/part-identity.js

@@ -0,0 +1,63 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+import config from 'ember-get-config';
+import { resolveIdentityCellResource } from '../../utils/identity-cell-resource';
+
+function inventoryStatus(part) {
+    if (get(part, 'is_low_stock')) {
+        return 'low_stock';
+    }
+
+    if (get(part, 'is_in_stock')) {
+        return 'in_stock';
+    }
+
+    return 'out_of_stock';
+}
+
+function inventoryStatusLabel(part) {
+    return inventoryStatus(part)
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+
+export default class CellPartIdentityComponent extends Component {
+    get resource() {
+        return resolveIdentityCellResource(this.args);
+    }
+
+    get emptyText() {
+        return this.args.column?.emptyText ?? '-';
+    }
+
+    get column() {
+        return {
+            ...(this.args.column ?? {}),
+            labelPath: 'name',
+            mediaPath: 'photo_url',
+            fallbackImage: config?.defaultValues?.partImage ?? config?.defaultValues?.placeholderImage,
+            statusPath: inventoryStatus,
+            statusFormatter: () => null,
+            metaPaths: [
+                {
+                    value: (part) => get(part, 'type'),
+                    icon: 'tag',
+                    style: 'badge',
+                },
+                {
+                    value: inventoryStatusLabel,
+                    icon: 'boxes-stacked',
+                    style: 'badge',
+                },
+            ],
+            statusToneMap: {
+                in_stock: 'text-green-500',
+                low_stock: 'text-yellow-500',
+                out_of_stock: 'text-red-500',
+                active: 'text-green-500',
+                inactive: 'text-gray-400',
+            },
+        };
+    }
+}

package/addon/components/cell/telematic-device.hbs

@@ -0,0 +1,38 @@
+<div ...attributes>
+    <button
+        type="button"
+        disabled={{and @column.permission (cannot @column.permission)}}
+        {{on "click" this.onClick}}
+        class="group flex w-full min-w-0 max-w-md cursor-pointer items-center gap-2 py-0.5 text-left"
+    >
+        <div class="relative flex h-9 w-9 flex-shrink-0 items-center justify-center">
+            <Image
+                src={{this.imageUrl}}
+                @fallbackSrc={{config "defaultValues.placeholderImage"}}
+                alt={{this.name}}
+                data-test-telematic-device-image
+                class="h-9 w-9 rounded-sm border border-gray-200 bg-white object-cover shadow-sm dark:border-gray-700 dark:bg-gray-900"
+            />
+            <FaIcon
+                @icon="circle"
+                @size="2xs"
+                data-test-telematic-device-online-indicator
+                class="absolute left-0 top-0 -ml-1 -mt-1 h-2 w-2 {{if this.isOnline 'text-green-500' 'text-yellow-200'}}"
+            />
+        </div>
+        <div class="min-w-0 text-left">
+            <div class="truncate text-sm font-semibold leading-4 text-gray-900 group-hover:text-blue-600 dark:text-gray-100 dark:group-hover:text-blue-300">{{n-a this.name}}</div>
+            <div class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs leading-4 text-gray-500 dark:text-gray-400">
+                <Badge
+                    @status={{this.connectionStatus}}
+                    @hideStatusDot={{true}}
+                    @wrapperClass="fleetops-device-status-badge"
+                    data-test-telematic-device-status-badge
+                >
+                    {{smart-humanize this.connectionStatus}}
+                </Badge>
+                <span class="truncate" data-test-telematic-device-identifier>{{n-a this.identifier}}</span>
+            </div>
+        </div>
+    </button>
+</div>

package/addon/components/cell/telematic-device.js

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class CellTelematicDeviceComponent extends Component {
+    get device() {
+        return this.args.row;
+    }
+
+    get name() {
+        return this.device?.displayName ?? this.device?.display_name ?? this.device?.name ?? this.device?.device_id ?? this.device?.imei ?? this.device?.serial_number;
+    }
+
+    get identifier() {
+        return this.device?.imei ?? this.device?.device_id ?? this.device?.internal_id ?? this.device?.serial_number ?? this.device?.public_id;
+    }
+
+    get imageUrl() {
+        return this.device?.photo_url;
+    }
+
+    get connectionStatus() {
+        return this.device?.connection_status ?? (this.device?.is_online ? 'online' : 'offline');
+    }
+
+    get isOnline() {
+        return this.device?.is_online || this.connectionStatus === 'online';
+    }
+
+    @action onClick(event) {
+        const { column, onClick } = this.args;
+
+        if (typeof onClick === 'function') {
+            onClick(this.device, event);
+        }
+
+        if (typeof column?.action === 'function') {
+            column.action(this.device, event);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(this.device, event);
+        }
+    }
+}