@fleetbase/fleetops-engine 0.6.56 → 0.6.58

package/addon/components/fleet/details.js

@@ -1,3 +1,57 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
-export default class FleetDetailsComponent extends Component {}
+export default class FleetDetailsComponent extends Component {
+    @service fleetActions;
+    @service driverActions;
+    @service vehicleActions;
+
+    get resource() {
+        return this.args.resource ?? this.args.fleet;
+    }
+
+    get drivers() {
+        return this.resourceArray(this.resource?.drivers);
+    }
+
+    get driversCount() {
+        return Number(this.resource?.drivers_count ?? this.drivers.length ?? 0);
+    }
+
+    get driversOnlineCount() {
+        return Number(this.resource?.drivers_online_count ?? this.drivers.filter((driver) => driver?.online).length ?? 0);
+    }
+
+    resourceArray(resources) {
+        if (!resources) {
+            return [];
+        }
+
+        if (typeof resources.toArray === 'function') {
+            return resources.toArray();
+        }
+
+        return Array.isArray(resources) ? resources : [];
+    }
+
+    @action viewFleet(fleet) {
+        return this.fleetActions.panel.view(fleet);
+    }
+
+    @action viewDriver(driver) {
+        return this.driverActions.panel.view(driver);
+    }
+
+    @action viewVehicle(vehicle) {
+        return this.vehicleActions.panel.view(vehicle);
+    }
+
+    @action assignDriver(fleet) {
+        return this.fleetActions.assignDriver(fleet);
+    }
+
+    @action assignVehicle(fleet) {
+        return this.fleetActions.assignVehicle(fleet);
+    }
+}

package/addon/components/fleet/hierarchy-tree.hbs

@@ -0,0 +1,137 @@
+<div class="fleet-hierarchy-tree" data-test-fleet-hierarchy-tree {{did-insert this.loadVisibleFleetResources}} ...attributes>
+    <div class="flex flex-col gap-2 border-b border-gray-200 bg-gray-50 px-2.5 pb-2 dark:border-gray-700 dark:bg-gray-800">
+        <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div class="flex min-w-0 flex-1 items-center gap-1.5 rounded border border-gray-200 bg-white px-2 py-1 text-gray-400 dark:border-gray-700 dark:bg-gray-900">
+                <FaIcon @icon="magnifying-glass" @size="xs" />
+                <input
+                    type="search"
+                    value={{this.query}}
+                    placeholder="Search hierarchy..."
+                    class="min-w-0 flex-1 appearance-none rounded-md border-0 bg-transparent p-0 text-xs leading-5 text-gray-700 outline-none shadow-none ring-0 focus:border-transparent focus:outline-none focus:ring-0 dark:text-gray-100"
+                    data-test-fleet-hierarchy-search
+                    {{on "input" this.updateQuery}}
+                />
+            </div>
+            <div class="flex shrink-0 items-center gap-1 rounded bg-gray-100 p-1 dark:bg-gray-900" data-test-fleet-hierarchy-filters>
+                {{#each this.filters as |filter|}}
+                    <button
+                        type="button"
+                        class="rounded px-2 py-1 text-xs font-medium {{if (eq this.activeFilter filter.id) 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white' 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white'}}"
+                        data-test-fleet-hierarchy-filter={{filter.id}}
+                        {{on "click" (fn this.setFilter filter.id)}}
+                    >
+                        {{filter.label}}
+                    </button>
+                {{/each}}
+            </div>
+            <div class="flex shrink-0 items-center gap-1">
+                <Button
+                    @type="default"
+                    @size="xs"
+                    @icon={{this.expandCollapseIcon}}
+                    @helpText={{this.expandCollapseHelpText}}
+                    @onClick={{this.toggleExpandCollapseAll}}
+                    data-test-fleet-hierarchy-expand-toggle
+                />
+            </div>
+        </div>
+    </div>
+
+    <div class="fleet-hierarchy-tree-list bg-white dark:bg-gray-900" aria-label="Fleet hierarchy">
+        {{#if this.visibleRows.length}}
+            {{#each this.visibleRows as |row|}}
+                {{#if (eq row.type "fleet")}}
+                    <div
+                        class="fleet-hierarchy-tree-row {{row.depthClass}} group flex min-w-0 items-start gap-2 border-b border-gray-100 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-200 dark:hover:bg-gray-800"
+                        data-test-fleet-hierarchy-row="fleet"
+                    >
+                        <button
+                            type="button"
+                            class="flex min-w-0 flex-1 items-start gap-2 text-left"
+                            aria-expanded={{if (this.fleetHasChildren row.fleet) (if (this.isFleetExpanded row.fleet) "true" "false")}}
+                            {{on "click" (fn this.toggleFleet row.fleet)}}
+                        >
+                            <span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded bg-gray-100 text-gray-400 dark:bg-gray-800" aria-hidden="true">
+                                {{#if (this.fleetHasChildren row.fleet)}}
+                                    <FaIcon @icon={{if (this.isFleetExpanded row.fleet) "chevron-down" "chevron-right"}} @size="xs" />
+                                {{else}}
+                                    <FaIcon @icon="user-group" @size="xs" />
+                                {{/if}}
+                            </span>
+                            <span class="min-w-0 flex-1">
+                                <span class="block truncate font-semibold leading-5" title={{this.displayName row.fleet}}>{{this.displayName row.fleet}}</span>
+                                <span class="block truncate text-xs leading-4 text-gray-400">{{this.fleetSubtitle row.fleet}}</span>
+                            </span>
+                        </button>
+                        <div class="flex shrink-0 items-center gap-1">
+                            <span class="hidden rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500 dark:bg-gray-800 dark:text-gray-400 md:inline-flex">
+                                {{this.fleetSubfleetCount row.fleet}} subfleets
+                            </span>
+                            <DropdownButton
+                                @icon="ellipsis-h"
+                                @iconPrefix="fas"
+                                @size="xs"
+                                @buttonClass="fleetops-btn-xxs"
+                                @contentClass="dropdown-menu"
+                                @horizontalPosition="left"
+                                @calculatePosition={{this.calculateDropdownLeftPosition}}
+                                as |dd|
+                            >
+                                <div class="next-dd-menu mx-0 mt-1" role="menu">
+                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.viewFleet row.fleet)}}>View details</a>
+                                    <div class="next-dd-menu-seperator"></div>
+                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.assignDriver row.fleet)}}>Assign driver</a>
+                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.assignVehicle row.fleet)}}>Assign vehicle</a>
+                                </div>
+                            </DropdownButton>
+                        </div>
+                    </div>
+                {{else if (eq row.type "driver")}}
+                    <button
+                        type="button"
+                        class="fleet-hierarchy-tree-row {{row.depthClass}} flex w-full min-w-0 items-start gap-2 border-b border-gray-100 px-3 py-1.5 text-left text-xs text-gray-600 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
+                        data-test-fleet-hierarchy-row="driver"
+                        {{on "click" (fn this.viewDriver row.driver)}}
+                    >
+                        <span class="mt-1 h-1.5 w-1.5 shrink-0 rounded-full {{if row.driver.online 'bg-green-500' 'bg-yellow-300'}}" aria-hidden="true"></span>
+                        <span class="min-w-0 flex-1">
+                            <span class="block truncate font-medium leading-4" title={{this.displayName row.driver}}>{{this.displayName row.driver}}</span>
+                            <span class="block truncate text-xs leading-4 text-gray-400">Driver - {{this.driverSubtitle row.driver}}</span>
+                        </span>
+                    </button>
+                {{else}}
+                    <button
+                        type="button"
+                        class="fleet-hierarchy-tree-row {{row.depthClass}} flex w-full min-w-0 items-start gap-2 border-b border-gray-100 px-3 py-1.5 text-left text-xs text-gray-600 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
+                        data-test-fleet-hierarchy-row="vehicle"
+                        {{on "click" (fn this.viewVehicle row.vehicle)}}
+                    >
+                        <span class="mt-1 h-1.5 w-1.5 shrink-0 rounded-full {{if row.vehicle.online 'bg-green-500' 'bg-yellow-300'}}" aria-hidden="true"></span>
+                        <span class="min-w-0 flex-1">
+                            <span class="block truncate font-medium leading-4" title={{this.displayName row.vehicle}}>{{this.displayName row.vehicle}}</span>
+                            <span class="block truncate text-xs leading-4 text-gray-400">Vehicle - {{this.vehicleSubtitle row.vehicle}}</span>
+                        </span>
+                    </button>
+                {{/if}}
+            {{/each}}
+        {{else}}
+            <div class="flex flex-col items-center justify-center gap-2 p-6 text-center" data-test-fleet-hierarchy-empty>
+                <span class="flex h-8 w-8 items-center justify-center rounded bg-gray-100 text-gray-400 dark:bg-gray-800">
+                    <FaIcon @icon={{if this.hasControlsApplied "magnifying-glass" "diagram-project"}} @size="sm" />
+                </span>
+                <div>
+                    <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{this.emptyTitle}}</div>
+                    <div class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-400">{{this.emptyDescription}}</div>
+                </div>
+                {{#if this.hasControlsApplied}}
+                    <Button @type="default" @size="xs" @icon="times" @text="Clear filters" @onClick={{this.clearFilters}} data-test-fleet-hierarchy-clear-filters />
+                {{else}}
+                    <div class="flex items-center gap-1">
+                        <Button @type="default" @size="xs" @icon="user-plus" @text="Assign driver" @onClick={{fn this.assignDriver this.rootFleet}} />
+                        <Button @type="default" @size="xs" @icon="car" @text="Assign vehicle" @onClick={{fn this.assignVehicle this.rootFleet}} />
+                    </div>
+                {{/if}}
+            </div>
+        {{/if}}
+    </div>
+</div>