@fleetbase/fleetops-engine 0.6.54 → 0.6.55

package/addon/components/table/cell/dropdown/action-item.js

@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isNone } from '@ember/utils';
+
+export default class TableCellDropdownActionItemComponent extends Component {
+    @service abilities;
+    @tracked permissionRequired;
+    @tracked doesntHavePermissions = false;
+    @tracked disabled = false;
+    @tracked visible = true;
+
+    constructor(owner, { columnAction = {}, row = {}, disabled = false, permission = null }) {
+        super(...arguments);
+        this.permissionRequired = columnAction.permission ?? permission;
+        this.disabled = this.disabledCheck(columnAction, this.permissionRequired, disabled);
+        this.visible = (columnAction.visible ?? true) && this.visibilityCheck(columnAction, row);
+    }
+
+    @action onClick(columnAction, row, dd) {
+        if (this.disabled) {
+            return;
+        }
+
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof columnAction?.fn === 'function') {
+            columnAction.fn(row);
+        }
+    }
+
+    disabledCheck(columnAction, permission, defaultValue = false) {
+        let disabled = columnAction.disabled ?? defaultValue;
+        if (!disabled) {
+            disabled = permission && this.abilities.cannot(permission);
+            this.doesntHavePermissions = disabled;
+        }
+
+        return disabled;
+    }
+
+    visibilityCheck(columnAction, context) {
+        const isVisible = columnAction.isVisible;
+
+        if (isNone(context) || !isVisible) {
+            return true;
+        }
+
+        if (typeof isVisible === 'boolean') {
+            return isVisible;
+        }
+
+        if (typeof isVisible === 'function') {
+            return isVisible(context);
+        }
+
+        return true;
+    }
+}

package/addon/components/table/cell/dropdown.hbs

@@ -0,0 +1,28 @@
+<div class="cell-dropdown-button overflow-visible {{@column.wrapperClass}}" {{did-insert this.setupComponent}} ...attributes>
+    <DropdownButton
+        @icon={{@column.ddButtonIcon}}
+        @iconPrefix={{@column.ddButtonIconPrefix}}
+        @text={{this.buttonText}}
+        @size="xs"
+        @horizontalPosition="left"
+        @calculatePosition={{this.calculatePosition}}
+        @renderInPlace={{true}}
+        @onOpen={{this.onOpen}}
+        @onClose={{this.onClose}}
+        as |dd|
+    >
+        <div class="next-dd-menu next-dd-menu-table-dd mt-0i {{@column.ddMenuWrapperClass}}" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+            {{#if @column.ddMenuLabel}}
+                <div class="next-dd-menu-label-container px-1">
+                    <div class="next-dd-menu-label {{@column.ddMenuLabelClass}}">
+                        {{@column.ddMenuLabel}}
+                    </div>
+                </div>
+                <div class="next-dd-menu-seperator"></div>
+            {{/if}}
+            {{#each @column.actions as |columnAction|}}
+                <Table::Cell::Dropdown::ActionItem @columnAction={{columnAction}} @row={{@row}} @column={{@column}} @dd={{dd}} />
+            {{/each}}
+        </div>
+    </DropdownButton>
+</div>

package/addon/components/table/cell/dropdown.js

@@ -0,0 +1,91 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+
+export default class TableCellDropdownComponent extends Component {
+    @tracked tableCellNode;
+    defaultButtonText = 'Actions';
+
+    @computed('args.column.ddButtonText', 'defaultButtonText') get buttonText() {
+        const { ddButtonText } = this.args.column;
+
+        if (ddButtonText === undefined) {
+            return this.defaultButtonText;
+        }
+
+        if (ddButtonText === false) {
+            return null;
+        }
+
+        return ddButtonText;
+    }
+
+    @action setupComponent(dropdownWrapperNode) {
+        const tableCellNode = this.getOwnerTableCell(dropdownWrapperNode);
+
+        if (tableCellNode) {
+            tableCellNode.style.overflow = 'visible';
+        }
+
+        this.tableCellNode = tableCellNode;
+    }
+
+    @action onOpen() {
+        if (!this.tableCellNode) {
+            return;
+        }
+
+        const currentZIndex = Number.parseInt(this.tableCellNode.style.zIndex, 10) || 0;
+        this.tableCellNode.style.zIndex = currentZIndex + 1;
+    }
+
+    @action onClose() {
+        if (!this.tableCellNode) {
+            return;
+        }
+
+        const currentZIndex = Number.parseInt(this.tableCellNode.style.zIndex, 10) || 1;
+        this.tableCellNode.style.zIndex = currentZIndex - 1;
+    }
+
+    @action getOwnerTableCell(dropdownWrapperNode) {
+        while (dropdownWrapperNode) {
+            dropdownWrapperNode = dropdownWrapperNode.parentNode;
+
+            if (dropdownWrapperNode?.tagName?.toLowerCase() === 'td') {
+                return dropdownWrapperNode;
+            }
+        }
+
+        return undefined;
+    }
+
+    @action onDropdownItemClick(columnAction, row, dd) {
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof columnAction?.fn === 'function') {
+            columnAction.fn(row);
+        }
+    }
+
+    @action calculatePosition(trigger, content) {
+        if (typeof this.args.column?.calculatePosition === 'function') {
+            return this.args.column.calculatePosition(trigger, content);
+        }
+
+        const triggerRect = trigger.getBoundingClientRect();
+        const contentRect = content?.getBoundingClientRect?.();
+        const contentWidth = contentRect?.width || 224;
+
+        const style = {
+            position: 'fixed',
+            marginTop: '0px',
+            left: `${triggerRect.left - contentWidth - 3}px`,
+            top: `${triggerRect.top}px`,
+        };
+
+        return { style };
+    }
+}

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

@@ -0,0 +1,82 @@
+<div class="px-4 py-3" ...attributes>
+    <div class="flex flex-1 flex-row items-start justify-between gap-4">
+        <div class="flex min-w-0 flex-row items-start gap-3">
+            <div class="relative flex flex-shrink-0 items-start justify-start">
+                <Image
+                    src={{this.imageUrl}}
+                    @fallbackSrc={{config "defaultValues.vendorImage"}}
+                    alt={{this.name}}
+                    height="48"
+                    width="48"
+                    class="h-14 w-14 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700"
+                />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                    <InputInfo @text={{this.name}} />
+                </Attach::Tooltip>
+            </div>
+            <div class="flex min-w-0 flex-col">
+                <div class="flex min-w-0 flex-wrap items-center gap-2">
+                    <h1 class="truncate text-base font-semibold leading-5 text-gray-900 dark:text-gray-100">{{this.name}}</h1>
+                    <Badge @status={{this.status}} @size="xs">{{smart-humanize this.status}}</Badge>
+                </div>
+
+                <div class="mt-1 flex max-w-2xl flex-wrap items-center gap-1.5">
+                    {{#if this.businessId}}
+                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="id-card" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.businessId}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.type}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="building" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{smart-humanize this.type}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.email}}
+                        <span class="inline-flex max-w-[14rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="envelope" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.email}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.phone}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="phone" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.phone}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.country}}
+                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="globe" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate"><CountryName @country={{this.country}} @showFlag={{true}} /></span>
+                        </span>
+                    {{/if}}
+                    {{#if this.address}}
+                        <span class="inline-flex max-w-[16rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="location-dot" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.address}}</span>
+                        </span>
+                    {{/if}}
+                    {{#if this.website}}
+                        <span class="inline-flex max-w-[14rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                            <FaIcon @icon="link" class="text-gray-400 dark:text-gray-300" />
+                            <span class="truncate">{{this.website}}</span>
+                        </span>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+        <div class="next-view-header-right flex-shrink-0">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+
+export default class VendorPanelHeaderComponent extends Component {
+    get resource() {
+        return this.args.resource;
+    }
+
+    get imageUrl() {
+        return get(this.resource, 'photo_url') ?? get(this.resource, 'logo_url');
+    }
+
+    get name() {
+        return get(this.resource, 'name') ?? get(this.resource, 'displayName') ?? get(this.resource, 'business_id') ?? get(this.resource, 'public_id') ?? '-';
+    }
+
+    get status() {
+        return get(this.resource, 'status') ?? 'active';
+    }
+
+    get businessId() {
+        return get(this.resource, 'business_id') ?? get(this.resource, 'internal_id') ?? get(this.resource, 'public_id');
+    }
+
+    get type() {
+        return get(this.resource, 'type');
+    }
+
+    get email() {
+        return get(this.resource, 'email');
+    }
+
+    get phone() {
+        return get(this.resource, 'phone');
+    }
+
+    get country() {
+        return get(this.resource, 'country');
+    }
+
+    get address() {
+        return get(this.resource, 'address_street') ?? get(this.resource, 'address');
+    }
+
+    get website() {
+        return get(this.resource, 'website_url');
+    }
+}

package/addon/controllers/connectivity/devices/index/details/vehicle.js

@@ -7,17 +7,27 @@ export default class ConnectivityDevicesIndexDetailsVehicleController extends Co
     @service deviceActions;
     @service hostRouter;
     @service intl;
+    @service mapManager;
+    @service vehicleActions;
 
     @tracked queryParams = [];
 
     get device() {
-        return this.model;
+        return this.model?.device ?? this.model;
     }
 
     get vehicle() {
         return this.device?.attachable;
     }
 
+    get positions() {
+        return Array.from(this.model?.positions ?? []);
+    }
+
+    get hasPositions() {
+        return this.positions.length > 0;
+    }
+
     get vehicleName() {
         return this.device?.attached_to_name ?? this.vehicle?.displayName ?? this.vehicle?.display_name ?? this.vehicle?.name;
     }
@@ -58,6 +68,14 @@ export default class ConnectivityDevicesIndexDetailsVehicleController extends Co
         return Boolean(this.vehicleName || this.device?.attachable_uuid);
     }
 
+    get canOpenVehicle() {
+        return Boolean(this.vehicle?.id);
+    }
+
+    get canLocateVehicle() {
+        return Boolean(this.vehicle?.id && (this.vehicle?.location || this.vehicle?.last_position || this.hasPositions));
+    }
+
     @action attachToVehicle() {
         return this.deviceActions.attachToVehicle(this.device, { callback: () => this.hostRouter.refresh() });
     }
@@ -71,4 +89,34 @@ export default class ConnectivityDevicesIndexDetailsVehicleController extends Co
             return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', this.vehicle);
         }
     }
+
+    @action openVehiclePositions() {
+        if (this.vehicle?.id) {
+            return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details.positions', this.vehicle);
+        }
+    }
+
+    @action async locateVehicle() {
+        if (!this.vehicle?.id) {
+            return;
+        }
+
+        await this.transitionToLiveMap();
+        await this.mapManager.waitForMap({ timeoutMs: 8000 });
+
+        this.mapManager.focusResource(this.vehicle, 16, {
+            paddingBottomRight: [300, 200],
+            moveend: () => {
+                this.vehicleActions.panel?.view?.(this.vehicle, { closeOnTransition: true });
+            },
+        });
+    }
+
+    async transitionToLiveMap() {
+        try {
+            await this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index', { queryParams: { layout: 'map' } });
+        } catch (_) {
+            // Keep locate actions usable even if the current transition is already in-flight.
+        }
+    }
 }