@fleetbase/fleetops-engine 0.3.1 → 0.3.2

package/addon/components/fleet-panel/driver-listing.js

@@ -0,0 +1,149 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { isBlank } from '@ember/utils';
+import { action, set } from '@ember/object';
+import { timeout } from 'ember-concurrency';
+import { task } from 'ember-concurrency-decorators';
+import contextComponentCallback from '../../utils/context-component-callback';
+
+export default class FleetPanelDriverListingComponent extends Component {
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * The fetch wrapper service.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * The universe service.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * The selected drivers.
+     *
+     * @var {Array}
+     * @memberof FleetPanelDriverListingComponent
+     */
+    @tracked selected = [];
+
+    /**
+     * Determines if list of drivers should be selectable.
+     *
+     * @var {Boolean}
+     * @memberof FleetPanelDriverListingComponent
+     */
+    @tracked selectable = false;
+
+    /**
+     * The fleet managing drivers for.
+     *
+     * @var {FleetModel}
+     * @memberof FleetPanelDriverListingComponent
+     */
+    @tracked fleet = [];
+
+    /**
+     * Creates an instance of FleetPanelDriverListingComponent.
+     * @memberof FleetPanelDriverListingComponent
+     */
+    constructor() {
+        super(...arguments);
+        const { options = {} } = this.args;
+
+        this.fleet = this.args.fleet;
+        this.selectable = this.args.selectable === true || options.selectable === true;
+        this.search.perform({ limit: -1 });
+    }
+
+    /**
+     * Fetches fleet drivers based on the given parameters.
+     * @param {Object} params - Parameters to filter the drivers.
+     * @returns {Promise} Promise object representing the fetched drivers.
+     * @memberof FleetPanelDriverListringComponent
+     */
+    fetchFleetDrivers(params = {}) {
+        return this.store.query('driver', { fleet: this.fleet.id, ...params }).then((drivers) => {
+            set(this, 'drivers', drivers.toArray());
+            contextComponentCallback(this, 'onLoaded', drivers);
+
+            return drivers;
+        });
+    }
+
+    /**
+     * Searches for fleet drivers based on the given parameters.
+     * @task
+     * @param {Object} params - Search parameters.
+     * @memberof FleetPanelDriverListringComponent
+     */
+    @task({ restartable: true }) *search(params = {}) {
+        if (!isBlank(params.value)) {
+            yield timeout(300);
+        }
+
+        yield this.fetchFleetDrivers(params);
+    }
+
+    /**
+     * Handles input events to initiate search.
+     * @action
+     * @param {Object} event - The input event.
+     * @memberof FleetPanelDriverListringComponent
+     */
+    @action onInput({ target: { value } }) {
+        this.search.perform({ query: value });
+    }
+
+    /**
+     * Assigns a driver to the fleet.
+     * @action
+     * @param {DriverModel} driver - The driver to be added.
+     * @memberof FleetPanelDriverListringComponent
+     */
+    @action onAddDriver(driver) {
+        this.fetch.post('fleets/assign-driver', { driver: driver.id, fleet: this.fleet.id }).then(() => {
+            this.drivers.pushObject(driver);
+            this.universe.trigger('fleet.driver.assigned', this.fleet, driver);
+        });
+    }
+
+    /**
+     * Removes a driver from the fleet.
+     * @action
+     * @param {DriverModel} driver - The driver to be removed.
+     * @memberof FleetPanelDriverListringComponent
+     */
+    @action onRemoveDriver(driver) {
+        this.fetch.post('fleets/remove-driver', { driver: driver.id, fleet: this.fleet.id }).then(() => {
+            this.drivers.removeObject(driver);
+            this.universe.trigger('fleet.driver.unassigned', this.fleet, driver);
+        });
+    }
+
+    /**
+     * Selects or deselects a driver.
+     * @action
+     * @param {DriverModel} driver - The driver to be selected or deselected.
+     * @memberof FleetPanelDriverListringComponent
+     */
+    @action onSelect(driver) {
+        if (this.selected.includes(driver)) {
+            this.selected.removeObject(driver);
+        } else {
+            this.selected.pushObject(driver);
+        }
+
+        contextComponentCallback(this, 'onSelect', ...arguments);
+    }
+}

package/addon/components/fleet-panel/vehicle-listing.hbs

@@ -0,0 +1,72 @@
+<div class={{or @wrapperClass @options.wrapperClass}}>
+    <div class="fleet-vehicle-listing" ...attributes>
+        <div class="mb-3 flex items-center justify-between">
+            <div class="flex items-center">
+                <div class="fleet-vehicle-listing-search">
+                    <Input @type="text" {{on "input" this.onInput}} placeholder="Search vehicle's in fleet" class="w-64 form-input form-input-sm" />
+                </div>
+                {{#if this.search.isRunning}}
+                    <div class="mx-2">
+                        <Spinner @iconClass="text-sky-500 fa-spin-800ms" />
+                    </div>
+                {{/if}}
+            </div>
+            <div class="w-56">
+                <ModelSelect @modelName="vehicle" @selectedModel={{this.selectedVehicle}} @placeholder="Add vehicle to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAddVehicle}} as |model|>
+                    {{model.displayName}}
+                </ModelSelect>
+            </div>
+        </div>
+        <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900 text-xs">
+            <div class="w-full">
+                <div class="grid grid-cols-12 text-xs p-3 font-bold text-gray-800 dark:text-gray-100 border-b border-gray-900 shadow">
+                    {{#if this.selectable}}
+                        <div></div>
+                    {{/if}}
+                    <div class="col-span-4 flex items-center">Vehicle</div>
+                    <div class="col-span-7 flex items-center"></div>
+                </div>
+            </div>
+            <div class="h-48 overflow-y-scroll">
+                {{#if this.search.isRunning}}
+                    <div class="flex items-center justify-center p-4 dark:text-gray-100">
+                        <div class="mr-2">
+                            <Spinner @iconClass="text-sky-500" />
+                        </div>
+                        <span>Loading fleet vehicles...</span>
+                    </div>
+                {{/if}}
+                {{#each this.vehicles as |vehicle|}}
+                    <div class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100">
+                        <div class="flex flex-row items-center">
+                            {{#if this.selectable}}
+                                <div class="flex items-center mr-2">
+                                    <Checkbox @value={{includes vehicle this.selected}} @onToggle={{fn this.onSelect vehicle}} />
+                                </div>
+                            {{/if}}
+                            <div class="flex items-center">
+                                <div class="flex flex-row items-start">
+                                    <div class="mr-2">
+                                        <div class="relative">
+                                            <Image src={{vehicle.photo_url}} alt={{vehicle.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{config "defaultValues.vehicleImage"}} />
+                                            <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if vehicle.online "text-green-500" "text-yellow-200"}}" />
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div class="font-semibold">{{vehicle.displayName}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-end">
+                            <a href="javascript:;" class="text-danger text-opacity-75" {{on "click" (fn this.onRemoveVehicle vehicle)}}>
+                                <FaIcon @icon="times" @prefix="fas" class="mr-1" />
+                                <span>Remove</span>
+                            </a>
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+</div>

package/addon/components/fleet-panel/vehicle-listing.js

@@ -0,0 +1,149 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { isBlank } from '@ember/utils';
+import { action, set } from '@ember/object';
+import { timeout } from 'ember-concurrency';
+import { task } from 'ember-concurrency-decorators';
+import contextComponentCallback from '../../utils/context-component-callback';
+
+export default class FleetPanelVehicleListingComponent extends Component {
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * The fetch wrapper service.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * The universe service.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * The selected vehicles.
+     *
+     * @var {Array}
+     * @memberof FleetPanelVehicleListingComponent
+     */
+    @tracked selected = [];
+
+    /**
+     * Determines if list of vehicles should be selectable.
+     *
+     * @var {Boolean}
+     * @memberof FleetPanelVehicleListingComponent
+     */
+    @tracked selectable = false;
+
+    /**
+     * The fleet managing vehicles for.
+     *
+     * @var {FleetModel}
+     * @memberof FleetPanelVehicleListingComponent
+     */
+    @tracked fleet = [];
+
+    /**
+     * Creates an instance of FleetPanelVehicleListingComponent.
+     * @memberof FleetPanelVehicleListingComponent
+     */
+    constructor() {
+        super(...arguments);
+        const { options = {} } = this.args;
+
+        this.fleet = this.args.fleet;
+        this.selectable = this.args.selectable === true || options.selectable === true;
+        this.search.perform({ limit: -1 });
+    }
+
+    /**
+     * Fetches fleet vehicles based on the given parameters.
+     * @param {Object} params - Parameters to filter the vehicles.
+     * @returns {Promise} Promise object representing the fetched vehicles.
+     * @memberof FleetPanelVehicleListringComponent
+     */
+    fetchFleetVehicles(params = {}) {
+        return this.store.query('vehicle', { fleet: this.fleet.id, ...params }).then((vehicles) => {
+            set(this, 'vehicles', vehicles.toArray());
+            contextComponentCallback(this, 'onLoaded', vehicles);
+
+            return vehicles;
+        });
+    }
+
+    /**
+     * Searches for fleet vehicles based on the given parameters.
+     * @task
+     * @param {Object} params - Search parameters.
+     * @memberof FleetPanelVehicleListringComponent
+     */
+    @task({ restartable: true }) *search(params = {}) {
+        if (!isBlank(params.value)) {
+            yield timeout(300);
+        }
+
+        yield this.fetchFleetVehicles(params);
+    }
+
+    /**
+     * Handles input events to initiate search.
+     * @action
+     * @param {Object} event - The input event.
+     * @memberof FleetPanelVehicleListringComponent
+     */
+    @action onInput({ target: { value } }) {
+        this.search.perform({ query: value });
+    }
+
+    /**
+     * Assigns a vehicle to the fleet.
+     * @action
+     * @param {VehicleModel} vehicle - The vehicle to be added.
+     * @memberof FleetPanelVehicleListringComponent
+     */
+    @action onAddVehicle(vehicle) {
+        this.fetch.post('fleets/assign-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id }).then(() => {
+            this.vehicles.pushObject(vehicle);
+            this.universe.trigger('fleet.vehicle.assigned', this.fleet, vehicle);
+        });
+    }
+
+    /**
+     * Removes a vehicle from the fleet.
+     * @action
+     * @param {VehicleModel} vehicle - The vehicle to be removed.
+     * @memberof FleetPanelVehicleListringComponent
+     */
+    @action onRemoveVehicle(vehicle) {
+        this.fetch.post('fleets/remove-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id }).then(() => {
+            this.vehicles.removeObject(vehicle);
+            this.universe.trigger('fleet.vehicle.unassigned', this.fleet, vehicle);
+        });
+    }
+
+    /**
+     * Selects or deselects a vehicle.
+     * @action
+     * @param {VehicleModel} vehicle - The vehicle to be selected or deselected.
+     * @memberof FleetPanelVehicleListringComponent
+     */
+    @action onSelect(vehicle) {
+        if (this.selected.includes(vehicle)) {
+            this.selected.removeObject(vehicle);
+        } else {
+            this.selected.pushObject(vehicle);
+        }
+
+        contextComponentCallback(this, 'onSelect', ...arguments);
+    }
+}

package/addon/components/fleet-panel.hbs

@@ -1,70 +1,24 @@
-<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
-    <Overlay::Header @title="Vehicle Details" @status={{@fleet.public_id}} @hideStatusDot={{true}}
-        @createdAt={{@fleet.createdAt}} @onPressCancel={{@onPressCancel}}>
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+    <Overlay::Header @title={{this.fleet.name}} @status={{this.fleet.public_id}} @disableBadgeHumanize={{true}} @hideStatusDot={{true}} @createdAt={{this.fleet.createdAt}}>
+        <Button @type="default" @icon="pen" @helpText="Edit fleet" @onClick={{this.onEdit}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{if this.fleet.id "Cancel edit fleet" "Cancel new fleet"}} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
 
     <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
             <div class="ui-tabs mt-4">
                 <nav>
-                    <a href="javascript:;" class="ui-tab {{if (eq this.currentTab "details") 'active' }}" {{on "click" (fn this.changeTab "details" )}}>
-                        <FaIcon @icon="circle-info" class="mr-1" />
-                        <span>Details</span>
-                    </a>
-                    <a href="javascript:;" class="ui-tab {{if (eq this.currentTab "vehicles") 'active' }}" {{on "click" (fn this.changeTab "vehicles" )}}>
-                        <FaIcon @icon="satellite-dish" class="mr-1" />
-                        <span>Vehicles</span>
-                    </a>
-                    <a href="javascript:;" class="ui-tab {{if (eq this.currentTab "drivers") 'active' }}" {{on "click" (fn this.changeTab "drivers" )}}>
-                        <FaIcon @icon="hard-drive" class="mr-1" />
-                        <span>Drivers</span>
-                    </a>
+                    {{#each this.tabs as |tab|}}
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active' }}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                            <FaIcon @icon={{tab.icon}} class="mr-1" />
+                            <span>{{tab.title}}</span>
+                        </a>
+                    {{/each}}
                 </nav>
             </div>
         </div>
-        <div class="tab-content tab-{{this.currentTab}}">
-            <div class="p-4">
-                {{#if (eq this.currentTab "details")}}
-                    <div class="modal-body-container">
-                        <div class="grid grid-cols-2 flex-col md:flex-row gap-2 mb-6">
-                            <div class="field-info-container">
-                                <div class="field-name">Name</div>
-                                <div class="field-value">{{n-a @fleet.name}}</div>
-                            </div>
-                            <div class="field-info-container">
-                                <div class="field-name">Service Area</div>
-                                <div class="field-value">{{n-a @fleet.serviceArea.name}}</div>
-                            </div>
-                            <div class="field-info-container">
-                                <div class="field-name">Zone</div>
-                                <div class="field-value">{{n-a @fleet.zone.name}}</div>
-                            </div>
-                            <div class="field-info-container">
-                                <div class="field-name">Task</div>
-                                <div class="field-value">{{n-a @fleet.task}}</div>
-                            </div>
-                            <div class="field-info-container">
-                                <div class="field-name">Active Manpower</div>
-                                <div class="field-value">{{@fleet.drivers_online_count}} of {{@fleet.drivers_count}} Online</div>
-                            </div>
-                            <div class="field-info-container">
-                                <div class="field-name">Date Created</div>
-                                <div class="field-value">{{@fleet.createdAtShort}}</div>
-                            </div>
-                        </div>
-                    </div>
-                {{/if}}
-                {{#if (eq this.currentTab "vehicles")}}
-                    <div class="modal-body-container">
-                        <FleetVehicleListing @fleet={{@fleet}} @onAddVehicle={{this.addVehicle}} @onRemoveVehicle={{this.removeVehicle}} />
-                    </div>
-                {{/if}}
-                {{#if (eq this.currentTab "drivers")}}
-                    <div class="modal-body-container">
-                        <FleetDriverListing @fleet={{@fleet}} @onAddDriver={{this.addDriver}} @onRemoveDriver={{this.removeDriver}} />
-                    </div>
-                {{/if}}
-            </div>
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component fleet=this.fleet tabOptions=this.tab options=this.tab.componentParams}}
         </div>
     </Overlay::Body>
 </Overlay>

package/addon/components/fleet-panel.js

@@ -2,51 +2,173 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import FleetPanelDetailComponent from './fleet-panel/details';
+import FleetPanelDriverListingComponent from './fleet-panel/driver-listing';
+import FleetPanelVehicleListingComponent from './fleet-panel/vehicle-listing';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
 export default class FleetPanelComponent extends Component {
+    /**
+     * Service for fetching data.
+     *
+     * @type {Service}
+     */
     @service fetch;
+
+    /**
+     * Service for managing modals.
+     *
+     * @type {Service}
+     */
     @service modalsManager;
+
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
     @service universe;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
     @service store;
-    @service fetch;
-    @tracked currentTab;
-    @tracked fleet;
 
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
+    @service hostRouter;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The vehicle being displayed or edited.
+     *
+     * @type {VehicleModel}
+     * @tracked
+     */
+    @tracked vehicle;
+
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:fleet-panel');
+        const defaultTabs = [
+            this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: FleetPanelDetailComponent }),
+            this.universe._createMenuItem('Vehicles', null, {
+                icon: 'car',
+                component: FleetPanelVehicleListingComponent,
+                componentParams: { wrapperClass: 'px-4 pt-6', selectable: true },
+            }),
+            this.universe._createMenuItem('Drivers', null, {
+                icon: 'id-card',
+                component: FleetPanelDriverListingComponent,
+                componentParams: { wrapperClass: 'px-4 pt-6', selectable: true },
+            }),
+        ];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Initializes the vehicle panel component.
+     */
     constructor() {
         super(...arguments);
         this.fleet = this.args.fleet;
-        this.changeTab(this.args.tab || 'details');
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
     }
 
-    @action async changeTab(tab) {
-        this.currentTab = tab;
-
-        if (typeof this.args.onTabChanged === 'function') {
-            this.args.onTabChanged(tab);
-        }
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
     }
 
-    @action addDriver(driver) {
-        this.fetch.post('fleets/assign-driver', { driver: driver.id, fleet: this.fleet.id }).then(() => {
-            this.universe.trigger('fleet.driver.assigned', this.fleet, driver);
-        });
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
     }
 
-    @action removeDriver(driver) {
-        this.fetch.post('fleets/remove-driver', { driver: driver.id, fleet: this.fleet.id }).then(() => {
-            this.universe.trigger('fleet.driver.unassigned', this.fleet, driver);
-        });
+    /**
+     * Handles edit action for the fleet.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.fleet);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.fleet, 'editing', {
+                onAfterSave: () => {
+                    this.contextPanel.clear();
+                },
+            });
+        }
     }
 
-    @action addVehicle(vehicle) {
-        this.fetch.post('fleets/assign-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id }).then(() => {
-            this.universe.trigger('fleet.vehicle.assigned', this.fleet, vehicle);
-        });
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.fleet);
     }
 
-    @action removeVehicle(vehicle) {
-        this.fetch.post('fleets/remove-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id }).then(() => {
-            this.universe.trigger('fleet.vehicle.unassigned', this.fleet, vehicle);
-        });
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
     }
 }

package/addon/components/fleet-vehicle-listing.hbs

@@ -4,7 +4,6 @@
             <div class="fleet-vehicle-listing-search">
                 <Input @type="text" {{on "keyup" (perform this.search)}} placeholder="Search vehicle in fleet" class="w-64 form-input form-input-sm" />
             </div>
-
             {{#if this.isLoading}}
                 <div class="mx-2">
                     <Spinner @iconClass="text-sky-500 fa-spin-800ms" />