v0.6.55

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>

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>

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);
+        }
+    }
+}

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}}

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);
+        }
+    }
+}

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}}